Survey Slate | Technical OverviewSurvey Slate | Common ComponentsSurvey Slate | Survey ComponentsSurvey Slate | Admin ToolsSurvey Slate | Admin UISurvey Slate | Designer ToolsSurvey Slate | Designer UISurvey Slate | Survey Filler UIUser Guide for Survey Slate DesignerSurvey Slate | Styling
Tachyons CSS and some extras
cssVariables = () => `:root {
--spacing-none: 0;
--spacing-extra-small: .25rem;
--spacing-small: .5rem;
--spacing-medium: 1rem;
--spacing-large: 2rem;
--spacing-extra-large: 4rem;
--spacing-extra-extra-large: 8rem;
--spacing-extra-extra-extra-large: 16rem;
--border-radius-0: 0;
--border-radius-1: .125rem;
--border-radius-2: .25rem;
--border-radius-3: .5rem;
--border-radius-4: 1rem;
}
`
colorUtils = ({colors}) => {
const keys = Object.keys(colors || {})
if (keys.length === 0) return "";
const cssVariables = `:root {
${keys.reduce((acc,k) => `${acc}--${k}: ${colors[k]};`, "")}
}`
const utilClasses = keys.reduce((acc, k) => {
return `${acc}
.${k} { color: var(--${k}); }
.hover-${k}:hover, .hover-${k}:focus { color: var(--${k}); }
.bg-${k} { background-color: var(--${k}); }
.hover-bg-${k}:hover, .hover-bg-${k}:focus { background-color: var(--${k}); }
.b--${k} { border-color: var(--${k}); }
`}, "")
return cssVariables + "\n" + utilClasses;
}
fontUtils = ({fonts}) => {
const keys = Object.keys(fonts || {})
if (keys.length === 0) return "";
const cssVariables = `:root {
${keys.reduce((acc,k) => `${acc}--${k}: ${fonts[k]};`, "")}
}`
const utilClasses = keys.reduce((acc, k) => {
return `${acc}
.${k} { font-family: ${fonts[k]}; }
`}, "")
return cssVariables + "\n" +utilClasses;
}
spaceBetweenUtils = () => Object.keys(tokens.spaces).reduce((acc, k) => {
const v = tokens.spaces[k];
return `${acc}
.space-x-${k} > * + * {
margin-left: ${v}
}
.space-y-${k} > * + * {
margin-top: ${v};
}
.space-${k} {
margin: calc(-0.5 * ${v});
}
.space-${k} > * {
margin: calc(0.5 * ${v});
}`
}, "")
html`<div class="flex pa2">
${Array.from({length: 3}).map((_,i) => {
const n= i + 1;
return `<div class="[ box box--light ][ ba b--near-white flex-none ma2 f6 w4 h4 ][ solid-shadow-${n} ]">.solid-shadow-${n}</div>
<div class="[ box box--light ][ ba b--near-white flex-none ma2 f6 w4 h4 ][ solid-shadow-y-${n} ]">.solid-shadow-y-${n}</div>`
})}
</div>`
boxShadowUtils = () => `
.solid-shadow-1 {
box-shadow: 0.125rem 0.125rem rgba(0,0,0,0.08);
}
.solid-shadow-y-1 {
box-shadow: 0 0.125rem rgba(0,0,0,0.08);
}
.solid-shadow-2 {
box-shadow: 0.25rem 0.25rem rgba(0,0,0,0.06);
}
.solid-shadow-y-2 {
box-shadow: 0 0.25rem rgba(0,0,0,0.06);
}
.solid-shadow-3 {
box-shadow: 0.5rem 0.5rem rgba(0,0,0,0.06);
}
.solid-shadow-y-3 {
box-shadow: 0 0.5rem rgba(0,0,0,0.06);
}
`
trackedUtils = () => `.tracked-light { letter-spacing: .025em; }`
positionUtils = () => `.sticky { position: sticky }`
scrollUtils = () =>`.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none; // Safari and Chrome
}`;
tachyonsVersion = "4.12.0"
defaultOptions = ({})
addElementsToDOM = (elements) => elements.forEach(n => document.querySelector("head").prepend(n));
removeElementsFromDOM = (elements) => elements.forEach(n => n.parentNode && n.parentNode.removeChild(n))
tachyons = loadStyles // Original name, deprecated
loadStyles = {
let elements = new Set();
function detach(elements) {
for (let n of elements) {
n.remove();
elements.delete(n);
}
}
function attach(nodes) {
for (let n of nodes) {
document.head.prepend(n);
elements.add(n);
}
}
invalidation.then(() => detach(elements));
return (userOptions) => {
const options = Object.assign({}, defaultOptions, userOptions);
const src = `https://unpkg.com/tachyons@${tachyonsVersion}/css/tachyons.min.css`;
detach(elements);
const newStyleElements = new Set([
html`<link rel=stylesheet href="${src}">`,
html`<style>
${cssVariables()}
${scrollUtils()}
${spaceBetweenUtils()}
${trackedUtils()}
${positionUtils()}
${boxShadowUtils()}
${colorUtils(options)}
${fontUtils(options)}`,
].reverse());
attach(newStyleElements);
}
}
tokens = ({
spaces: {
'0': '0', // none
'1': '0.25rem', // extra-small
'2': '0.5rem', // small
'3': '1rem', // medium
'4': '2rem', // large
'5': '4rem', // extra-large
'6': '8rem', // extra-extra-large
'7': '16rem', // extra-extra-extra-large
}
})
loadStyles({
colors: {
brand: "#007DB7",
accent: "#FDB515"
},
fonts: {
roboto: `"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
},
})
demoStyles = html`<style>.box {
background-color: var(--brand);
color: white;
padding: 0.5rem;
font-family: system-ui, sans-serif;
}
.box--light {
color: var(--brand);
background-color: white;
}
.box--expand {
flex: 1;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
