@cloudfour/patterns
Version:
Front-end patterns for cloudfour.com
1,620 lines (1,594 loc) • 116 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.cloudfourPatterns = {}));
})(this, (function (exports) { 'use strict';
const initCommentReplyForm = comment => {
const replyButton = comment.querySelector('.js-comment-reply-button');
const replyForm = comment.querySelector('.js-comment-reply-form');
// The cancel button is inside the Comment Form, so we need to reach inside
// that component to grab the button. This feels a little awkward since
// we're directly manipulating a child component, but this is a lot simpler
// than other potential solutions. Other options included:
// - Having the Comment Form emit a `cancel` event
// - Having the Comment Form have a block that you could pass a button into
const cancelButton = comment.querySelector('.js-cancel-reply');
// If we're missing form elements we shouldn't proceed
if (!replyButton || !replyForm || !cancelButton) return {
destroy: () => {}
};
const show = () => {
comment.classList.add('is-replying');
replyButton.setAttribute('hidden', '');
const firstInput = replyForm.querySelector('textarea, input');
// Without this timeout, VoiceOver does not properly focus the first input
// (though it works outside of VoiceOver).
// With this timeout, iOS doesn't show the keyboard, since iOS will only
// show the keyboard in direct response to a user action.
// By doing it with and without a timeout we can make both work.
firstInput?.focus();
setTimeout(() => firstInput?.focus(), 0);
};
const hide = () => {
comment.classList.remove('is-replying');
replyButton.removeAttribute('hidden');
// Similar to above, we use a timeout to force the focus in VoiceOver.
setTimeout(() => replyButton.focus(), 0);
};
replyButton.addEventListener('click', show);
cancelButton.addEventListener('click', hide);
const destroy = () => {
replyButton.removeEventListener('click', show);
cancelButton.removeEventListener('click', hide);
};
return {
destroy
};
};
var items$3 = [
{
link: "/does",
title: "What We Do",
current: true
},
{
link: "/believes",
title: "Our Approach"
},
{
link: "/made",
title: "Our Work"
},
{
link: "/thinks",
title: "Articles"
},
{
link: "/presents",
title: "Speaking"
},
{
link: "/is",
title: "Team"
},
{
link: "/and-you",
title: "Hire Us"
}
];
var skyNavMenu = {
items: items$3
};
var items$2 = [
{
link: "https://cloudfour-patterns.netlify.app/",
title: "Patterns"
}
];
var groundNavMenu = {
items: items$2
};
var name = "Cloud Four, Inc.";
var address = {
street_address: "510 SW 3rd Ave, Suite 420",
address_locality: "Portland",
address_region: "Oregon",
postal_code: "97204",
address_country: "USA"
};
var email = "info@cloudfour.com";
var telephone = "+1 (503) 290-1090";
var url = "https://cloudfour.com/";
var founding_date = "2007-12-13";
var organization = {
name: name,
address: address,
email: email,
telephone: telephone,
url: url,
founding_date: founding_date
};
var items$1 = [
{
link: "https://www.linkedin.com/company/cloud-four",
title: "Follow us on LinkedIn",
icon: "brands/linkedin"
},
{
link: "https://www.youtube.com/channel/UC39ZT0CMds5z0K0Z7RWa98A",
title: "Follow us on YouTube",
icon: "brands/youtube"
},
{
link: "https://www.instagram.com/cloudfourpdx/",
title: "Follow us on Instagram",
icon: "brands/instagram"
},
{
link: "https://github.com/cloudfour",
title: "Find us on GitHub",
icon: "brands/github"
},
{
link: "/feed/atom/",
title: "Subscribe to our RSS Feed",
icon: "feed"
}
];
var social = {
items: items$1
};
var items = [
{
link: "/topics/rwd",
title: "Responsive Web Design"
},
{
link: "/topics/ecommerce",
title: "Ecommerce"
},
{
link: "/topics/performance",
title: "Performance"
},
{
link: "/topics/images",
title: "Images"
},
{
link: "/topics/accessibility",
title: "Accessibility"
},
{
link: "/topics/spotlight",
title: "Cloud Four Spotlight"
},
{
link: "/topics/css",
title: "CSS"
},
{
link: "/topics/essentials",
title: "Essentials"
}
];
var topics = {
items: items
};
// eslint-disable-next-line @cloudfour/import/order
const menu = {
items: [...skyNavMenu.items, ...groundNavMenu.items]
};
/**
* Default args for Ground Nav stories
*
* Currently storybook doesn't have support for nested or grouped args.
* @see https://github.com/storybookjs/storybook/issues/11525
* @see https://github.com/storybookjs/storybook/issues/10979
*/
const defaultArgs = {
alternate: false,
feature_count: 2,
feature_one_title: 'Nice to meet you',
feature_one_content: 'Cloud Four helps organizations solve complex responsive web design and development challenges every day. Let’s connect so we can tailor a solution to fit your needs.',
feature_two_title: 'Cloud Four, in your inbox',
feature_two_content: 'Our latest articles, updates, quick tips and insights in one convenient, occassional newsletter.',
organizationName: organization.name,
organizationStreetAddress: organization.address.street_address,
organizationAddressLocality: organization.address.address_locality,
organizationAddressRegion: organization.address.address_region,
organizationPostalCode: organization.address.postal_code,
organizationAddressCountry: organization.address.address_country,
organizationEmail: organization.email,
organizationTelephone: organization.telephone,
organizationUrl: organization.url,
organizationFoundingDate: organization.founding_date
};
/**
* Storybook arg types for the defaultArgs
*/
const defaultArgTypes = {
alternate: {
control: {
type: 'boolean'
}
},
feature_count: {
control: {
type: 'number',
min: 0,
max: 2
}
},
feature_one_title: {
type: {
name: 'string'
}
},
feature_one_content: {
type: {
name: 'string'
}
},
feature_two_title: {
type: {
name: 'string'
}
},
feature_two_content: {
type: {
name: 'string'
}
},
organizationName: {
type: {
name: 'string'
}
},
organizationStreetAddress: {
type: {
name: 'string'
}
},
organizationAddressLocality: {
type: {
name: 'string'
}
},
organizationAddressRegion: {
type: {
name: 'string'
}
},
organizationPostalCode: {
type: {
name: 'string'
}
},
organizationAddressCountry: {
type: {
name: 'string'
}
},
organizationEmail: {
type: {
name: 'string'
}
},
organizationTelephone: {
type: {
name: 'string'
}
},
organizationUrl: {
type: {
name: 'string'
}
},
organizationFoundingDate: {
type: {
name: 'string'
}
}
};
/**
* Generate Ground Nav Template Props
*
* Takes the flat args object and structures it as the template expects.
*
* @param {defaultArgs} args
*/
const generateGroundNavProps = args => ({
menu,
social,
topics,
alternate: args.alternate,
feature_count: args.feature_count,
feature_one_title: args.feature_one_title,
feature_one_content: args.feature_one_content,
feature_two_title: args.feature_two_title,
feature_two_content: args.feature_two_content,
organization: {
name: args.organizationName,
address: {
street_address: args.organizationStreetAddress,
address_locality: args.organizationAddressLocality,
address_region: args.organizationAddressRegion,
postal_code: args.organizationPostalCode,
address_country: args.organizationAddressCountry
},
email: args.organizationEmail,
telephone: args.organizationTelephone,
url: args.organizationUrl,
founding_date: args.organizationFoundingDate
}
});
/**
* Create Elastic TextArea
*
* Adds an event listener to a `textarea` elment that responds to input events
* by either increasing or decreasing the `rows` attribute based on whether the
* `textarea` is scrolling or not. Returns an object containing a `destroy()`
* method to remove the event listener.
*
* @param textarea - the target `textarea` element
*/
const createElasticTextArea = textarea => {
// Provides a CSS hook for JS-only styles
const JS_ENABLED_HOOK = 'is-elastic';
textarea.classList.add(JS_ENABLED_HOOK);
const minRows = Number(textarea.getAttribute('rows')) || 2;
let rows = Number(textarea.getAttribute('rows')) || minRows;
textarea.setAttribute('rows', String(rows));
/** Check if the textarea is currently scrolling */
const isScrolling = () => textarea.scrollHeight > textarea.clientHeight;
/** Grow until the textarea stops scrolling */
const grow = () => {
// Store initial height of textarea
let previousHeight = textarea.clientHeight;
while (isScrolling()) {
rows++;
textarea.setAttribute('rows', String(rows));
// Get height after rows change is made
const newHeight = textarea.clientHeight;
// If the height hasn't changed, break the loop
// This safety check is to prevent an infinite loop in IE11
if (newHeight === previousHeight) break;
// Store the updated height for the next comparison and proceed
previousHeight = newHeight;
}
};
/** Shrink until the textarea matches the minimum rows or starts scrolling */
const shrink = () => {
while (!isScrolling() && rows > minRows) {
rows--;
textarea.setAttribute('rows', String(Math.max(rows, minRows)));
if (isScrolling()) {
grow();
break;
}
}
};
/** Decide whether to grow or shrink the textarea */
const update = () => {
if (isScrolling()) {
grow();
} else {
shrink();
}
};
// Initialize the textarea with elastic behavior on a user's input
textarea.addEventListener('input', update);
// Run elastic behavior when the textarea resizes
const observer = new ResizeObserver(update);
observer.observe(textarea);
/**
* Ensure the component cleans up after itself when "destroyed"
*/
const destroy = () => {
// Reset the state
textarea.classList.remove(JS_ENABLED_HOOK);
// Remove event listeners
textarea.removeEventListener('input', update);
// Disconnect resize observer
observer.disconnect();
};
// Run the update method to set the initial size correctly
update();
// Return a public API for consumers of this component
return {
destroy
};
};
var tokens = {
"color": {
"base": {
"blue_lighter": {
"value": "#8abfff",
"comment": "Accessible on -darker colors.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#8abfff",
"comment": "Accessible on -darker colors."
},
"name": "color-base-blue-lighter",
"attributes": {
"category": "color",
"type": "base",
"item": "blue_lighter"
},
"path": ["color", "base", "blue_lighter"]
},
"blue_light": {
"value": "#3d84f5",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#3d84F5"
},
"name": "color-base-blue-light",
"attributes": {
"category": "color",
"type": "base",
"item": "blue_light"
},
"path": ["color", "base", "blue_light"]
},
"blue": {
"value": "#215cca",
"comment": "Accessible on white and lighter-gray.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#215cca",
"comment": "Accessible on white and lighter-gray."
},
"name": "color-base-blue",
"attributes": {
"category": "color",
"type": "base",
"item": "blue"
},
"path": ["color", "base", "blue"]
},
"blue_dark": {
"value": "#183889",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#183889",
"comment": "Accessible on white."
},
"name": "color-base-blue-dark",
"attributes": {
"category": "color",
"type": "base",
"item": "blue_dark"
},
"path": ["color", "base", "blue_dark"]
},
"blue_darker": {
"value": "#0e1c43",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#0E1C43",
"comment": "Accessible on white."
},
"name": "color-base-blue-darker",
"attributes": {
"category": "color",
"type": "base",
"item": "blue_darker"
},
"path": ["color", "base", "blue_darker"]
},
"green_lighter": {
"value": "#71f4ae",
"comment": "Accessible on -darker colors.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#71f4ae",
"comment": "Accessible on -darker colors."
},
"name": "color-base-green-lighter",
"attributes": {
"category": "color",
"type": "base",
"item": "green_lighter"
},
"path": ["color", "base", "green_lighter"]
},
"green_light": {
"value": "#2cdd90",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#2cdd90"
},
"name": "color-base-green-light",
"attributes": {
"category": "color",
"type": "base",
"item": "green_light"
},
"path": ["color", "base", "green_light"]
},
"green": {
"value": "#158466",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#158466",
"comment": "Accessible on white."
},
"name": "color-base-green",
"attributes": {
"category": "color",
"type": "base",
"item": "green"
},
"path": ["color", "base", "green"]
},
"green_dark": {
"value": "#105c52",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#105c52",
"comment": "Accessible on white."
},
"name": "color-base-green-dark",
"attributes": {
"category": "color",
"type": "base",
"item": "green_dark"
},
"path": ["color", "base", "green_dark"]
},
"green_darker": {
"value": "#0c3538",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#0c3538",
"comment": "Accessible on white."
},
"name": "color-base-green-darker",
"attributes": {
"category": "color",
"type": "base",
"item": "green_darker"
},
"path": ["color", "base", "green_darker"]
},
"purple_lighter": {
"value": "#e98efa",
"comment": "Accessible on -darker colors.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#e98efa",
"comment": "Accessible on -darker colors."
},
"name": "color-base-purple-lighter",
"attributes": {
"category": "color",
"type": "base",
"item": "purple_lighter"
},
"path": ["color", "base", "purple_lighter"]
},
"purple_light": {
"value": "#d250f7",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#d250f7"
},
"name": "color-base-purple-light",
"attributes": {
"category": "color",
"type": "base",
"item": "purple_light"
},
"path": ["color", "base", "purple_light"]
},
"purple": {
"value": "#950cde",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#950cde",
"comment": "Accessible on white."
},
"name": "color-base-purple",
"attributes": {
"category": "color",
"type": "base",
"item": "purple"
},
"path": ["color", "base", "purple"]
},
"purple_dark": {
"value": "#560a9b",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#560a9b",
"comment": "Accessible on white."
},
"name": "color-base-purple-dark",
"attributes": {
"category": "color",
"type": "base",
"item": "purple_dark"
},
"path": ["color", "base", "purple_dark"]
},
"purple_darker": {
"value": "#2a085e",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#2a085e",
"comment": "Accessible on white."
},
"name": "color-base-purple-darker",
"attributes": {
"category": "color",
"type": "base",
"item": "purple_darker"
},
"path": ["color", "base", "purple_darker"]
},
"fuchsia_lighter": {
"value": "#ff80ca",
"comment": "Accessible on -darker colors.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#ff80ca",
"comment": "Accessible on -darker colors."
},
"name": "color-base-fuchsia-lighter",
"attributes": {
"category": "color",
"type": "base",
"item": "fuchsia_lighter"
},
"path": ["color", "base", "fuchsia_lighter"]
},
"fuchsia_light": {
"value": "#f240ae",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#f240ae"
},
"name": "color-base-fuchsia-light",
"attributes": {
"category": "color",
"type": "base",
"item": "fuchsia_light"
},
"path": ["color", "base", "fuchsia_light"]
},
"fuchsia": {
"value": "#d9118f",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#d9118f",
"comment": "Accessible on white."
},
"name": "color-base-fuchsia",
"attributes": {
"category": "color",
"type": "base",
"item": "fuchsia"
},
"path": ["color", "base", "fuchsia"]
},
"fuchsia_dark": {
"value": "#950f7d",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#950f7d",
"comment": "Accessible on white."
},
"name": "color-base-fuchsia-dark",
"attributes": {
"category": "color",
"type": "base",
"item": "fuchsia_dark"
},
"path": ["color", "base", "fuchsia_dark"]
},
"fuchsia_darker": {
"value": "#5c0a5c",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#5c0a5c",
"comment": "Accessible on white."
},
"name": "color-base-fuchsia-darker",
"attributes": {
"category": "color",
"type": "base",
"item": "fuchsia_darker"
},
"path": ["color", "base", "fuchsia_darker"]
},
"orange_lighter": {
"value": "#ffad5c",
"comment": "Accessible on -darker colors.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#ffad5c",
"comment": "Accessible on -darker colors."
},
"name": "color-base-orange-lighter",
"attributes": {
"category": "color",
"type": "base",
"item": "orange_lighter"
},
"path": ["color", "base", "orange_lighter"]
},
"orange_light": {
"value": "#fa8f47",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#fa8f47"
},
"name": "color-base-orange-light",
"attributes": {
"category": "color",
"type": "base",
"item": "orange_light"
},
"path": ["color", "base", "orange_light"]
},
"orange": {
"value": "#f27041",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#f27041"
},
"name": "color-base-orange",
"attributes": {
"category": "color",
"type": "base",
"item": "orange"
},
"path": ["color", "base", "orange"]
},
"orange_dark": {
"value": "#aa3f24",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#aa3f24",
"comment": "Accessible on white."
},
"name": "color-base-orange-dark",
"attributes": {
"category": "color",
"type": "base",
"item": "orange_dark"
},
"path": ["color", "base", "orange_dark"]
},
"orange_darker": {
"value": "#622018",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#622018",
"comment": "Accessible on white."
},
"name": "color-base-orange-darker",
"attributes": {
"category": "color",
"type": "base",
"item": "orange_darker"
},
"path": ["color", "base", "orange_darker"]
},
"gray_lighter": {
"value": "#f2f5f7",
"comment": "Accessible on -darker colors.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#f2f5f7",
"comment": "Accessible on -darker colors."
},
"name": "color-base-gray-lighter",
"attributes": {
"category": "color",
"type": "base",
"item": "gray_lighter"
},
"path": ["color", "base", "gray_lighter"]
},
"gray_light": {
"value": "#c0cfd8",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#c0cfd8"
},
"name": "color-base-gray-light",
"attributes": {
"category": "color",
"type": "base",
"item": "gray_light"
},
"path": ["color", "base", "gray_light"]
},
"gray": {
"value": "#738da0",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#738da0"
},
"name": "color-base-gray",
"attributes": {
"category": "color",
"type": "base",
"item": "gray"
},
"path": ["color", "base", "gray"]
},
"gray_dark": {
"value": "#485968",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#485968",
"comment": "Accessible on white."
},
"name": "color-base-gray-dark",
"attributes": {
"category": "color",
"type": "base",
"item": "gray_dark"
},
"path": ["color", "base", "gray_dark"]
},
"gray_darker": {
"value": "#252b32",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#252b32",
"comment": "Accessible on white."
},
"name": "color-base-gray-darker",
"attributes": {
"category": "color",
"type": "base",
"item": "gray_darker"
},
"path": ["color", "base", "gray_darker"]
},
"black": {
"value": "#000000",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#000"
},
"name": "color-base-black",
"attributes": {
"category": "color",
"type": "base",
"item": "black"
},
"path": ["color", "base", "black"]
},
"black_transparent_60": {
"value": "rgba(0, 0, 0, 0.6)",
"comment": "Intended for placeholder text in inputs. Use cautiously and always test combinations for contrast.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "rgba(0, 0, 0, 0.60)",
"comment": "Intended for placeholder text in inputs. Use cautiously and always test combinations for contrast."
},
"name": "color-base-black-transparent-60",
"attributes": {
"category": "color",
"type": "base",
"item": "black_transparent_60"
},
"path": ["color", "base", "black_transparent_60"]
},
"black_transparent_85": {
"value": "rgba(0, 0, 0, 0.85)",
"comment": "Accessible on white and lightest gray.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "rgba(0, 0, 0, 0.85)",
"comment": "Accessible on white and lightest gray."
},
"name": "color-base-black-transparent-85",
"attributes": {
"category": "color",
"type": "base",
"item": "black_transparent_85"
},
"path": ["color", "base", "black_transparent_85"]
},
"white": {
"value": "#ffffff",
"comment": "Accessible on primary brand color, useful for buttons and headings.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "#fff",
"comment": "Accessible on primary brand color, useful for buttons and headings."
},
"name": "color-base-white",
"attributes": {
"category": "color",
"type": "base",
"item": "white"
},
"path": ["color", "base", "white"]
},
"white_transparent_85": {
"value": "rgba(255, 255, 255, 0.85)",
"comment": "Accessible on primary brand color.",
"filePath": "src/tokens/color/base.json",
"isSource": true,
"original": {
"value": "rgba(255, 255, 255, 0.85)",
"comment": "Accessible on primary brand color."
},
"name": "color-base-white-transparent-85",
"attributes": {
"category": "color",
"type": "base",
"item": "white_transparent_85"
},
"path": ["color", "base", "white_transparent_85"]
}
},
"brand": {
"primary_lighter": {
"value": "#8abfff",
"comment": "Accessible on -darker colors.",
"filePath": "src/tokens/color/brand.js",
"isSource": true,
"original": {
"value": "{color.base.blue_lighter.value}",
"comment": "Accessible on -darker colors."
},
"name": "color-brand-primary-lighter",
"attributes": {
"category": "color",
"type": "brand",
"item": "primary_lighter"
},
"path": ["color", "brand", "primary_lighter"]
},
"primary_light": {
"value": "#3d84f5",
"filePath": "src/tokens/color/brand.js",
"isSource": true,
"original": {
"value": "{color.base.blue_light.value}"
},
"name": "color-brand-primary-light",
"attributes": {
"category": "color",
"type": "brand",
"item": "primary_light"
},
"path": ["color", "brand", "primary_light"]
},
"primary": {
"value": "#215cca",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/brand.js",
"isSource": true,
"original": {
"value": "{color.base.blue.value}",
"comment": "Accessible on white."
},
"name": "color-brand-primary",
"attributes": {
"category": "color",
"type": "brand",
"item": "primary"
},
"path": ["color", "brand", "primary"]
},
"primary_dark": {
"value": "#183889",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/brand.js",
"isSource": true,
"original": {
"value": "{color.base.blue_dark.value}",
"comment": "Accessible on white."
},
"name": "color-brand-primary-dark",
"attributes": {
"category": "color",
"type": "brand",
"item": "primary_dark"
},
"path": ["color", "brand", "primary_dark"]
},
"primary_darker": {
"value": "#0e1c43",
"comment": "Accessible on white.",
"filePath": "src/tokens/color/brand.js",
"isSource": true,
"original": {
"value": "{color.base.blue_darker.value}",
"comment": "Accessible on white."
},
"name": "color-brand-primary-darker",
"attributes": {
"category": "color",
"type": "brand",
"item": "primary_darker"
},
"path": ["color", "brand", "primary_darker"]
}
},
"status": {
"error_dark": {
"value": "#bc1919",
"filePath": "src/tokens/color/status.json",
"isSource": true,
"original": {
"value": "#bc1919"
},
"name": "color-status-error-dark",
"attributes": {
"category": "color",
"type": "status",
"item": "error_dark"
},
"path": ["color", "status", "error_dark"]
},
"error_light": {
"value": "#ffcaca",
"filePath": "src/tokens/color/status.json",
"isSource": true,
"original": {
"value": "#ffcaca"
},
"name": "color-status-error-light",
"attributes": {
"category": "color",
"type": "status",
"item": "error_light"
},
"path": ["color", "status", "error_light"]
}
},
"text": {
"dark": {
"value": "rgba(0, 0, 0, 0.85)",
"comment": "Accessible on white and lightest gray.",
"filePath": "src/tokens/color/text.json",
"isSource": true,
"original": {
"value": "{color.base.black_transparent_85.value}",
"comment": "Accessible on white and lightest gray."
},
"name": "color-text-dark",
"attributes": {
"category": "color",
"type": "text",
"item": "dark"
},
"path": ["color", "text", "dark"]
},
"dark_muted": {
"value": "rgba(0, 0, 0, 0.6)",
"comment": "Intended for placeholder text in inputs. Use cautiously and always test combinations for contrast.",
"filePath": "src/tokens/color/text.json",
"isSource": true,
"original": {
"value": "{color.base.black_transparent_60.value}",
"comment": "Intended for placeholder text in inputs. Use cautiously and always test combinations for contrast."
},
"name": "color-text-dark-muted",
"attributes": {
"category": "color",
"type": "text",
"item": "dark_muted"
},
"path": ["color", "text", "dark_muted"]
},
"light": {
"value": "rgba(255, 255, 255, 0.85)",
"comment": "Accessible on primary brand color.",
"filePath": "src/tokens/color/text.json",
"isSource": true,
"original": {
"value": "{color.base.white_transparent_85.value}",
"comment": "Accessible on primary brand color."
},
"name": "color-text-light",
"attributes": {
"category": "color",
"type": "text",
"item": "light"
},
"path": ["color", "text", "light"]
},
"light_emphasis": {
"value": "#ffffff",
"comment": "Accessible on primary brand color, useful for buttons and headings.",
"filePath": "src/tokens/color/text.json",
"isSource": true,
"original": {
"value": "{color.base.white.value}",
"comment": "Accessible on primary brand color, useful for buttons and headings."
},
"name": "color-text-light-emphasis",
"attributes": {
"category": "color",
"type": "text",
"item": "light_emphasis"
},
"path": ["color", "text", "light_emphasis"]
},
"action": {
"value": "#215cca",
"comment": "Accessible on white and lighter-gray.",
"filePath": "src/tokens/color/text.json",
"isSource": true,
"original": {
"value": "{color.base.blue.value}",
"comment": "Accessible on white and lighter-gray."
},
"name": "color-text-action",
"attributes": {
"category": "color",
"type": "text",
"item": "action"
},
"path": ["color", "text", "action"]
},
"code": {
"value": "rgba(202, 2, 129, 0.94)",
"comment": "Similar to the base fuchsia, but accessible on white and lighter-gray.",
"filePath": "src/tokens/color/text.json",
"isSource": true,
"original": {
"value": "hsla(322, 98%, 40%, 0.94)",
"comment": "Similar to the base fuchsia, but accessible on white and lighter-gray."
},
"name": "color-text-code",
"attributes": {
"category": "color",
"type": "text",
"item": "code"
},
"path": ["color", "text", "code"]
}
}
},
"ease": {
"in_out": {
"value": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
"comment": "https://easings.net/en#easeInOutQuad",
"filePath": "src/tokens/ease/ease.js",
"isSource": true,
"original": {
"value": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
"comment": "https://easings.net/en#easeInOutQuad"
},
"name": "ease-in-out",
"attributes": {
"category": "ease",
"type": "in_out"
},
"path": ["ease", "in_out"]
},
"in": {
"value": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
"comment": "https://easings.net/en#easeInQuad",
"filePath": "src/tokens/ease/ease.js",
"isSource": true,
"original": {
"value": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
"comment": "https://easings.net/en#easeInQuad"
},
"name": "ease-in",
"attributes": {
"category": "ease",
"type": "in"
},
"path": ["ease", "in"]
},
"out": {
"value": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
"comment": "https://easings.net/en#easeOutQuad",
"filePath": "src/tokens/ease/ease.js",
"isSource": true,
"original": {
"value": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
"comment": "https://easings.net/en#easeOutQuad"
},
"name": "ease-out",
"attributes": {
"category": "ease",
"type": "out"
},
"path": ["ease", "out"]
},
"in_out_sine": {
"value": "cubic-bezier(0.37, 0, 0.63, 1)",
"comment": "https://easings.net/#easeInOutSine",
"filePath": "src/tokens/ease/ease.js",
"isSource": true,
"original": {
"value": "cubic-bezier(0.37, 0, 0.63, 1)",
"comment": "https://easings.net/#easeInOutSine"
},
"name": "ease-in-out-sine",
"attributes": {
"category": "ease",
"type": "in_out_sine"
},
"path": ["ease", "in_out_sine"]
},
"out_sine": {
"value": "cubic-bezier(0.61, 1, 0.88, 1)",
"comment": "https://easings.net/#easeOutSine",
"filePath": "src/tokens/ease/ease.js",
"isSource": true,
"original": {
"value": "cubic-bezier(0.61, 1, 0.88, 1)",
"comment": "https://easings.net/#easeOutSine"
},
"name": "ease-out-sine",
"attributes": {
"category": "ease",
"type": "out_sine"
},
"path": ["ease", "out_sine"]
}
},
"font": {
"family": {
"sans": {
"value": "'Source Sans Pro Variable', Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif",
"comment": "Variable font. Supports weights 100 through 900.",
"filePath": "src/tokens/font/family.json",
"isSource": true,
"original": {
"value": "'Source Sans Pro Variable', Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif",
"comment": "Variable font. Supports weights 100 through 900."
},
"name": "font-family-sans",
"attributes": {
"category": "font",
"type": "family",
"item": "sans"
},
"path": ["font", "family", "sans"]
},
"sans_fallback": {
"value": "'Source Sans Pro', Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif",
"comment": "When variable fonts are not supported. Only certain weights are available.",
"filePath": "src/tokens/font/family.json",
"isSource": true,
"original": {
"value": "'Source Sans Pro', Tahoma, 'Helvetica Neue', Helvetica, Arial, sans-serif",
"comment": "When variable fonts are not supported. Only certain weights are available."
},
"name": "font-family-sans-fallback",
"attributes": {
"category": "font",
"type": "family",
"item": "sans_fallback"
},
"path": ["font", "family", "sans_fallback"]
},
"mono": {
"value": "'Source Code Pro', Monaco, Consolas, 'Lucida Console', 'Andale Mono', monospace",
"comment": "For source code previews.",
"filePath": "src/tokens/font/family.json",
"isSource": true,
"original": {
"value": "'Source Code Pro', Monaco, Consolas, 'Lucida Console', 'Andale Mono', monospace",
"comment": "For source code previews."
},
"name": "font-family-mono",
"attributes": {
"category": "font",
"type": "family",
"item": "mono"
},
"path": ["font", "family", "mono"]
}
}
},
"number": {
"aspect_ratio": {
"square": {
"value": 1,
"filePath": "src/tokens/number/aspect-ratio.js",
"isSource": true,
"original": {
"value": 1
},
"name": "number-aspect-ratio-square",
"attributes": {
"category": "number",
"type": "aspect_ratio",
"item": "square"
},
"path": ["number", "aspect_ratio", "square"]
},
"full": {
"value": 1.3333333333333333,
"comment": "4:3 (\"fullscreen\")",
"filePath": "src/tokens/number/aspect-ratio.js",
"isSource": true,
"original": {
"value": 1.3333333333333333,
"comment": "4:3 (\"fullscreen\")"
},
"name": "number-aspect-ratio-full",
"attributes": {
"category": "number",
"type": "aspect_ratio",
"item": "full"
},
"path": ["number", "aspect_ratio", "full"]
},
"wide": {
"value": 1.7777777777777777,
"comment": "16:9 (\"widescreen\")",
"filePath": "src/tokens/number/aspect-ratio.js",
"isSource": true,
"original": {
"value": 1.7777777777777777,
"comment": "16:9 (\"widescreen\")"
},
"name": "number-aspect-ratio-wide",
"attributes": {
"category": "number",
"type": "aspect_ratio",
"item": "wide"
},
"path": ["number", "aspect_ratio", "wide"]
},
"cinema": {
"value": 2,
"filePath": "src/tokens/number/aspect-ratio.js",
"isSource": true,
"original": {
"value": 2
},
"name": "number-aspect-ratio-cinema",
"attributes": {
"category": "number",
"type": "aspect_ratio",
"item": "cinema"
},
"path": ["number", "aspect_ratio", "cinema"]
}
},
"brightness": {
"control": {
"brighten": {
"value": "110%",
"filePath": "src/tokens/number/brightness.json",
"isSource": true,
"original": {
"value": "110%"
},
"name": "number-brightness-control-brighten",
"attributes": {
"category": "number",
"type": "brightness",
"item": "control",
"subitem": "brighten"
},
"path": ["number", "brightness", "control", "brighten"]
},
"dim": {
"value": "80%",
"filePath": "src/tokens/number/brightness.json",
"isSource": true,
"original": {
"value": "80%"
},
"name": "number-brightness-control-dim",
"attributes": {
"category": "number",
"type": "brightness",
"item": "control",
"subitem": "dim"
},
"path": ["number", "brightness", "control", "dim"]
}
},
"image": {
"brighten": {
"value": "102.5%",
"filePath": "src/tokens/number/brightness.json",
"isSource": true,
"original": {
"value": "102.5%"
},
"name": "number-brightness-image-brighten",
"attributes": {
"category": "number",
"type": "brightness",
"item": "image",
"subitem": "brighten"
},
"path": ["number", "brightness", "image", "brighten"]
}
}
},
"font_weight": {
"light": {
"value": "300",
"filePath": "src/tokens/number/font-weight.json",
"isSource": true,
"original": {
"value": "300"
},
"name": "number-font-weight-light",
"attributes": {
"category": "number",
"type": "font_weight",
"item": "light"
},
"path": ["number", "font_weight", "light"]
},
"normal": {
"value": "400",
"filePath": "src/tokens/number/font-weight.json",
"isSource": true,
"original": {
"value": "400"
},
"name": "number-font-weight-normal",
"attributes": {
"category": "number",
"type": "font_weight",
"item": "normal"
},
"path": ["number", "font_weight", "normal"]
},
"medium": {
"value": "500",
"filePath": "src/tokens/number/font-weight.json",
"isSource": true,
"original": {
"value": "500"
},
"name": "number-font-weight-medium",
"attributes": {
"category": "number",
"type": "font_weight",
"item": "medium"
},
"path": ["number", "font_weight", "medium"]
},
"semibold": {
"value": "600",
"filePath": "src/tokens/number/font-weight.json",
"isSource": true,
"original": {
"value": "600"
},
"name": "number-font-weight-semibold",
"attributes": {
"category": "number",
"type": "font_weight",
"item": "semibold"
},
"path": ["number", "font_weight", "semibold"]
},
"bold": {
"value": "700",
"filePath": "src/tokens/number/font-weight.json",
"isSource": true,
"original": {
"value": "700"
},
"name": "number-font-weight-bold",
"attributes": {
"category": "number",
"type": "font_weight",
"item": "bold"
},
"path": ["number", "font_weight", "bold"]
},
"heavy": {
"value": "800",
"filePath": "src/tokens/number/font-weight.json",
"isSource": true,
"original": {
"value": "800"
},
"name": "number-font-weight-heavy",
"attributes": {
"category": "number",
"type": "font_weight",
"item": "heavy"
},
"path": ["number", "font_weight", "heavy"]
}
},
"line_height": {
"loose": {
"value": 1.5625,
"comment": "For multiline copy.",
"filePath": "src/tokens/number/line-height.js",
"isSource": true,
"original": {
"value": 1.5625,
"comment": "For multiline copy."
},
"name": "number-line-height-loose",
"attributes": {
"category": "number",
"type": "line_height",
"item": "loose"
},
"path": ["number", "line_height", "loose"]
},
"tight": {
"value": 1.25,
"comment": "For headings and single-line text.",
"filePath": "src/tokens/number/line-height.js",
"isSource": true,
"original": {
"value": 1.25,
"comment": "For headings and single-line text."
},
"name": "number-line-height-tight",
"attributes": {
"category": "number",
"type": "line_height",
"item": "tight"
},
"path": ["number", "line_height", "tight"]
},
"tighter": {
"value": 1,
"comment": "For very large headings or UI elements with built-in height or padding.",
"filePath"