Using Observable for software engineering, programming language and user interface research.
Public
Edited
Nov 26, 2022
Importers
render(Block, { contents: "Sample block" })
PanelStyle = style({
"&": {
padding: "8px 16px",
borderRadius: "4px",
border: "1px solid #00000015",
backgroundColor: "#FFFFFF"
},
"&[data-variant~=shadow]": {
boxShadow: "2px 2px 3px #00000008"
}
})
MenuItem({ label: "Add", icon: "X" }).node
MenuItemStyle = style(
{
"&": {
padding: "4px 8px",
borderRadius: "4px",
cursor: "pointer"
},
"&:hover": {
backgroundColor: "${Selectable.hover}"
}
},
Tokens
)
MenuItem = component(({ icon, label, actions, disabled }) =>
H.div(
{
class: className(RootStyle, MenuItemStyle),
"data-disabled": disabled
},
icon,
label,
actions
)
)
Menu(...["Add", "Remove", "Cancel"].map((_) => H.div(_))).node
Menu = component(({ items }) =>
H.div(
{
class: className(RootStyle, StackStyle)
},
// TODO: This is the composition of a component
// items.map(MenuItem);
$.map(items, MenuItem)
)
)
Stack(...["One", "Two", "Three"].map((_) => H.div(_))).node
StackStyle = style({
"&": {
display: "flex",
flexDirection: "column",
gap: "attr(data-gap)"
}
})
Stack = component(({ children }) =>
H.div(
{
class: className(RootStyle, StackStyle)
},
children
)
)
render(Row, { label: "Width", contents: "120px" })
RowStyle = style({
"&": {
display: "grid",
gridTemplateColumns: "1fr 2fr",
borderCollapse: "collapse",
borderRight: "1px solid #E0E0E0",
borderTop: "1px solid #E0E0E0",
borderBottom: "1px solid #E0E0E0"
},
"& > .cell": {
borderLeft: "1px solid #E0E0E0",
borderCollapse: "collapse",
padding: "4px 6px"
}
})
Row = {
const { label, contents, actions } = $.state();
return H.div(
{
class: className(RootStyle, RowStyle)
},
H.div({ class: "cell label" }, label),
H.div({ class: "cell contents" }, contents)
);
}
$(LineInput, {
before: icon("cycling"),
after: "km",
placeholder: "Type your name",
size: "small"
}).node
LineInputStyle = style(
{
"&": {
gap: "6px",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
minWidth: "8ch",
border: "0px solid transparent",
outline: "1px solid transparent"
},
"& > input": {
padding: "6px 12px",
border: "0px solid transparent",
borderRadius: "4px",
color: "inherit",
lineHeight: "1.25em",
fontSize: "1em",
borderRadius: "2px",
background: "${Background}",
outline: "0px solid transparent"
}
},
Tokens
)
LineInput = {
const { before, after, placeholder } = $.state();
return H.div(
{
class: className(RootStyle, InputStyle, LineInputStyle),
"data-variant": "x-small"
},
before,
H.input({ placeholder }),
after
);
}
$(TextInput, {
before: icon("cycling"),
after: "km",
placeholder: "Type your name",
size: "small"
}).node
TextInputStyle = style(
{
"&": {
gap: "6px",
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyItems: "stretch",
minWidth: "8ch",
border: "0px solid transparent"
},
"& > textarea": {
padding: "6px 12px",
display: "block",
boxSizing: "border-box",
margin: "0px",
width: "100%",
border: "0px solid ${Selectable.border}",
borderRadius: "4px",
color: "inherit",
lineHeight: "1.25em",
fontSize: "1em",
borderRadius: "2px",
background: "${Background}",
outline: "1px solid ${Selectable.border}"
},
"&:hover > textarea": {
outlineColor: "${Selectable.hover}"
},
"&[data-type~=code] > textarea": {
fontFamily: "${Code.font}",
fontSize: "${Code.size}",
lineHeight: "${Code.line}"
}
},
Tokens
)
TextInput = {
const { before, after, placeholder } = $.state();
return H.div(
{
class: className(RootStyle, InputStyle, TextInputStyle),
"data-type": "code",
"data-variant": "x-small"
},
before,
H.textarea({ placeholder }),
after
);
}
$(Button, {
before: icon("cycling"),
label: "Cycling",
size: "x-small",
variant: "outline"
}).node
ButtonStyle = style(
{
"&": {
padding: "6px 12px",
gap: "6px",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
minWidth: "8ch"
}
},
Tokens
)
Button = {
const { before, after, label, size, variant } = $.state();
return H.div(
{
class: className(RootStyle, ControlStyle, ButtonStyle),
"data-size": size,
"data-variant": variant
},
before,
H.span({ class: "label" }, label),
after
);
}
SquareButtonStyle = style(
{
"&": {
padding: "3px 4px",
borderRadius: "4px",
fontSize: "16px",
lineHeight: "16px",
display: "inline-block"
}
},
Tokens
)
RoundButtonStyle = style(
{
"&": {
padding: "4px",
borderRadius: "18px",
fontSize: "16px",
lineHeight: "0px",
display: "inline-block"
}
},
Tokens
)
$(Badge, {
icon: icon("lock", "16px", "icon", {
"stroke-width": "3px",
fill: "none",
"vector-effect": "non-scaling-stroke"
}),
label: "Only you"
}).node
DesignTokens = ({
Primary: "#ffbb30",
White: "#FFFFFF",
Secondary: "#7521c0",
Background: "#fdfdfd",
Highlight: "#FFFF00",
Text: "#3c3c3c",
background: (_) => _.color.blend(_("Background"), 0.35),
hover: (_) => _.color.blend(_("Highlight"), 0.25),
border: (_) => _.color.grey(0.5).alpha(0.5),
A: (_, k) => _.color.alpha(prel(k, 0, 10))
})
Tokens = ({
Text: {
font: "Karla, sans-serif",
color: T("Text"),
light: T("Text.A8"),
lighter: T("Text.A5")
},
Code: {
font: `"JetBrains Mono", monospace`,
color: "#8ab6cf",
background: "#f1f6fb"
},
Selectable: {
background: T("Primary.background"),
border: T("Primary.border"),
hover: T("Primary.hover"),
text: {
color: T("Text")
}
},
Background: T("Background"),
Black: T("Background"),
White: T("White"),
br: (_) => unit([0, 2, 4, 6, 8][_] || 0, "px")
})
InputStyle = style(
{
"&": {
padding: "2px 8px",
gap: "6px",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
color: "${Text.light}",
stroke: "${Text.light}",
border: "0px solid transparent",
outline: "1px solid transparent"
},
"&[data-variant~=x-small]": {
padding: "2px 4px",
fontSize: "80%"
},
"&[data-variant~=small]": {
padding: "4px 8px",
fontSize: "90%"
},
"&[data-variant~=large]": {
padding: "8px 16px"
},
"& > input": {
padding: "6px 12px",
border: "0px solid transparent",
borderRadius: "4px",
color: "inherit",
lineHeight: "1.25em",
fontSize: "1em",
borderRadius: "2px",
color: "${Text.color}",
outline: "0px solid transparent",
borderBottom: "1px solid ${Selectable.border}"
},
"&[data-variant~=small] > input": {
padding: "4px 8px"
},
"&[data-variant~=x-small] > input": {
padding: "2px 4px"
},
"&:hover > input": {
backgroundColor: "${Selectable.background}"
}
},
Tokens
)
ControlStyle = style(
{
"&": {
borderRadius: "$2br",
backgroundColor: "${Selectable.background}",
border: "2px solid ${Selectable.border}",
color: "${Selectable.text.color}",
padding: "4px 8px",
display: "inline-block",
cursor: "pointer",
fontWeight: 600
},
"&:hover": {
backgroundColor: "${Selectable.hover}"
},
"&[data-size~=x-small]": {
padding: "2px 4px",
fontSize: "80%"
},
"&[data-size~=small]": {
padding: "4px 8px",
fontSize: "90%"
},
"&[data-size~=large]": {
padding: "8px 16px"
},
"&[data-variant~=outline]": {
outline: "1px solid transparent",
borderColor: "transparent",
backgroundColor: "transparent",
color: "${Text.lighter}",
stroke: "${Text.lighter}"
},
"&[data-variant~=outline]:hover": {
backgroundColor: "${Selectable.hover}",
color: "${Text.light}",
stroke: "${Text.light}"
}
},
Tokens
)
RootStyle = style(
{
"@": [
"import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;800&display=swap')"
],
"&": {
fontSize: "1rem",
lineHeight: "1.25em",
fontFamily: "Karla, sans",
fontWeight: 200,
color: "${text.color}"
}
},
Tokens
)
Styles = registerStyle([
RootStyle,
PanelStyle,
ControlStyle,
InputStyle,
StackStyle,
LineInputStyle,
TextInputStyle,
ButtonStyle,
RoundButtonStyle,
SquareButtonStyle,
RowStyle,
MenuItemStyle,
MenuStyle
])
Icons
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.