@cloudfour/patterns
Version:
Front-end patterns for cloudfour.com
3,620 lines • 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 sanity 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": "src/tokens/number/line-height.js",
"isSource": true,
"original": {
"value": 1,
"comment": "For very large headings or UI elements with built-in height or padding."
},
"name": "number-line-height-tighter",
"attributes": {
"category": "number",
"type": "line_height",
"item": "tighter"
},
"path": ["number", "line_height", "tighter"]
}
},
"opacity": {
"muted": {
"value": "0.65",
"filePath": "src/tokens/number/opacity.json",
"isSource": true,
"original": {
"value": "0.65"
},
"name": "number-opacity-muted",
"attributes": {
"category": "number",
"type": "opacity",
"item": "muted"
},
"path": ["number", "opacity", "muted"]
}
},
"scale": {
"effect": {
"grow": {
"value": "1.05",
"filePath": "src/tokens/number/scale-effect.json",
"isSource": true,
"original": {
"value": "1.05"
},
"name": "number-scale-effect-grow",
"attributes": {
"category": "number",
"type": "scale",
"item": "effect",
"subitem": "grow"
},
"path": ["number", "scale", "effect", "grow"]
},
"shrink": {
"value": "0.95",
"filePath": "src/tokens/number/scale-effect.json",
"isSource": true,
"original": {
"value": "0.95"
},
"name": "number-scale-effect-shrink",
"attributes": {
"category": "number",
"type": "scale",
"item": "effect",
"subitem": "shrink"
},
"path": ["number", "scale", "effect", "shrink"]
}
},
"modular": {
"ratio": {
"value": "1.25",
"filePath": "src/tokens/number/scale-modular.js",
"isSource": true,
"original": {
"value": "1.25"
},
"name": "number-scale-modular-ratio",
"attributes": {
"category": "number",
"type": "scale",
"item": "modular",
"subitem": "ratio"
},
"path": ["number", "scale", "modular", "ratio"]
},
"minimum_step": {
"value": "-6",
"filePath": "src/tokens/number/scale-modular.js",
"isSource": true,
"original": {
"value": "-6"
},
"name": "number-scale-modular-minimum-step",
"attributes": {
"category": "number",
"type": "scale",
"item": "modular",
"subitem": "minimum_step"
},
"path": ["number", "scale", "modular", "minimum_step"]
},
"maximum_step": {
"value": "10",
"filePath": "src/tokens/number/scale-modular.js",
"isSource": true,
"original": {
"value": "10"
},
"name": "number-scale-modular-maximum-step",
"attributes": {
"category": "number",
"type": "scale",
"item": "modular",
"subitem": "maximum_step"
},
"path": ["number", "scale", "modular", "maximum_step"]
}
}
},
"z_index": {
"alert": {
"value": 999,
"comment": "Intended to be used for alert messages that float above page content.",
"filePath": "src/tokens/number/z-index.json",
"isSource": true,
"original": {
"value": 999,
"comment": "Intended to be used for alert messages that float above page content."
},
"name": "number-z-index-alert",
"attributes": {
"category": "number",
"type": "z_index",
"item": "alert"
},
"path": ["number", "z_index", "alert"]
}
}
},
"size": {
"border": {
"radius": {
"small": {
"value": "0.125em",
"filePath": "src/tokens/size/border.json",
"isSource": true,
"original": {
"value": "0.125em"
},
"name": "size-border-radius-small",
"attributes": {
"category": "size",
"type": "border",
"item": "radius",
"subitem": "small"
},
"path": ["size", "border", "radius", "small"]
},
"medium": {
"value": "0.25em",
"filePath": "src/tokens/size/border.json",
"isSource": true,
"original": {
"value": "0.25em"
},
"name": "size-border-radius-medium",
"attributes": {
"category": "size",
"type": "border",
"item": "radius",
"subitem": "medium"
},
"path": ["size", "border", "radius", "medium"]
},
"large": {
"value": "0.5em",
"filePath": "src/tokens/size/border.json",
"isSource": true,
"original": {
"value": "0.5em"
},
"name": "size-border-radius-large",
"attributes": {
"category": "size",
"type": "border",
"item": "radius",
"subitem": "large"
},
"path": ["size", "border", "radius", "large"]
},
"card-contained": {
"value": "0.5em",
"filePath": "src/tokens/size/border.json",
"isSource": true,
"original": {
"value": "{size.border.radius.large.value}"
},
"name": "size-border-radius-card-contained",
"attributes": {
"category": "size",
"type": "border",
"item": "radius",
"subitem": "card-contained"
},
"path": ["size", "border", "radius", "card-contained"]
},
"full": {
"value": "9999px",
"comment": "A value of 50% would be more intuitive, but results in unexpectedly oblong rounding for non-square shapes. We use `px` to save the browser the trouble of recalculating the stupidly large value.",
"filePath": "src/tokens/size/border.json",
"isSource": true,
"original": {
"value": "9999px",
"comment": "A value of 50% would be more intuitive, but results in unexpectedly oblong rounding for non-square shapes. We use `px` to save the browser the trouble of recalculating the stupidly large value."
},
"name": "size-border-radius-full",
"attributes": {
"category": "size",
"type": "border",
"item": "radius",
"subitem": "full"
},
"path": ["size", "border", "radius", "full"]
}
},
"width": {
"blockquote": {
"value": "0.125rem",
"filePath": "src/tokens/size/border.json",
"isSource": true,
"original": {
"value": "{size.edge.medium.value}"
},
"name": "size-border-width-blockquote",
"attributes": {
"category": "size",
"type": "border",
"item": "width",
"subitem": "blockquote"
},
"path": ["size", "border", "width", "blockquote"]
}
}
},
"breakpoint": {
"xs": {
"value": "20em",
"filePath": "src/tokens/size/breakpoint.json",
"isSource": true,
"original": {
"value": "{size.xs.value}"
},
"name": "size-breakpoint-xs",
"attributes": {
"category": "size",
"type": "breakpoint",
"item": "xs"
},
"path": ["size", "breakpoint", "xs"]
},
"s": {
"value": "30em",
"filePath": "src/tokens/size/breakpoint.json",
"isSource": true,
"original": {
"value": "{size.s.value}"
},
"name": "size-breakpoint-s",
"attributes": {
"category": "size",
"type": "breakpoint",
"item": "s"
},
"path": ["size", "breakpoint", "s"]
},
"m": {
"value": "40em",
"filePath": "src/tokens/size/breakpoint.json",
"isSource": true,
"original": {
"value": "{size.m.value}"
},
"name": "size-breakpoint-m",
"attributes": {
"category": "size",
"type": "breakpoint",
"item": "m"
},
"path": ["size", "breakpoint", "m"]
},
"l": {
"value": "60em",
"filePath": "src/tokens/size/breakpoint.json",
"isSource": true,
"original": {
"value": "{size.l.value}"
},
"name": "size-breakpoint-l",
"attributes": {
"category": "size",
"type": "breakpoint",
"item": "l"
},
"path": ["size", "breakpoint", "l"]
},
"xl": {
"value": "72em",
"filePath": "src/tokens/size/breakpoint.json",
"isSource": true,
"original": {
"value": "{size.xl.value}"
},
"name": "size-breakpoint-xl",
"attributes": {
"category": "size",
"type": "breakpoint",
"item": "xl"
},
"path": ["size", "breakpoint", "xl"]
},
"xxl": {
"value": "84em",
"filePath": "src/tokens/size/breakpoint.json",
"isSource": true,
"original": {
"value": "{size.xxl.value}"
},
"name": "size-breakpoint-xxl",
"attributes": {
"category": "size",
"type": "breakpoint",
"item": "xxl"
},
"path": ["size", "breakpoint", "xxl"]
},
"xxxl": {
"value": "96em",
"filePath": "src/tokens/size/breakpoint.json",
"isSource": true,
"original": {
"value": "{size.xxxl.value}"
},
"name": "size-breakpoint-xxxl",
"attributes": {
"category": "size",
"type": "breakpoint",
"item": "xxxl"
},
"path": ["size", "breakpoint", "xxxl"]
}
},
"edge": {
"small": {
"value": "0.0625rem",
"filePath": "src/tokens/size/edge.json",
"isSource": true,
"original": {
"value": "0.0625rem"
},
"name": "size-edge-small",
"attributes": {
"category": "size",
"type": "edge",
"item": "small"
},
"path": ["size", "edge", "small"]
},
"medium": {
"value": "0.125rem",
"filePath": "src/tokens/size/edge.json",
"isSource": true,
"original": {
"value": "0.125rem"
},
"name": "size-edge-medium",
"attributes": {
"category": "size",
"type": "edge",
"item": "medium"
},
"path": ["size", "edge", "medium"]
},
"large": {
"value": "0.25rem",
"filePath": "src/tokens/size/edge.json",
"isSource": true,
"original": {
"value": "0.25rem"
},
"name": "size-edge-large",
"attributes": {
"category": "size",
"type": "edge",
"item": "large"
},
"path": ["size", "edge", "large"]
},
"control": {
"value": "0.125rem",
"filePath": "src/tokens/size/edge.json",
"isSource": true,
"original": {
"value": "{size.edge.medium.value}"
},
"name": "size-edge-control",
"attributes": {
"category": "size",
"type": "edge",
"item": "control"
},
"path": ["size", "edge", "control"]
}
},
"font": {
"big": {
"value": "1.25em",
"comment": "Slightly larger than normal. Good for short introductory sections or important actions.",
"filePath": "src/tokens/size/font.js",
"isSource": true,
"original": {
"value": "1.25em",
"comment": "Slightly larger than normal. Good for short introductory sections or important actions."
},
"name": "size-font-big",
"attributes": {
"category": "size",
"type": "font",
"item": "big"
},
"path": ["size", "font", "big"]
},
"small": {
"value": "0.8em",
"comment": "Slightly smaller than usual. Good for badges, captions or other space-constrained bits of copy.",
"filePath": "src/tokens/size/font.js",
"isSource": true,
"original": {
"value": "0.8em",
"comment": "Slightly smaller than usual. Good for badges, captions or other space-constrained bits of copy."
},
"name": "size-font-small",
"attributes": {
"category": "size",
"type": "font",
"item": "small"
},
"path": ["size", "font", "small"]
},
"heading_n2": {
"max": {
"value": "3.814697265625em",
"comment": "Maximum fluid size for heading level -2.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "3.814697265625em",
"comment": "Maximum fluid size for heading level -2."
},
"name": "size-font-heading-n2-max",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_n2",
"subitem": "max"
},
"path": ["size", "font", "heading_n2", "max"]
},
"min": {
"value": "3.0517578125em",
"comment": "Minimum fluid size for heading level -2.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "3.0517578125em",
"comment": "Minimum fluid size for heading level -2."
},
"name": "size-font-heading-n2-min",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_n2",
"subitem": "min"
},
"path": ["size", "font", "heading_n2", "min"]
}
},
"heading_n1": {
"max": {
"value": "3.0517578125em",
"comment": "Maximum fluid size for heading level -1.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "3.0517578125em",
"comment": "Maximum fluid size for heading level -1."
},
"name": "size-font-heading-n1-max",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_n1",
"subitem": "max"
},
"path": ["size", "font", "heading_n1", "max"]
},
"min": {
"value": "2.44140625em",
"comment": "Minimum fluid size for heading level -1.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "2.44140625em",
"comment": "Minimum fluid size for heading level -1."
},
"name": "size-font-heading-n1-min",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_n1",
"subitem": "min"
},
"path": ["size", "font", "heading_n1", "min"]
}
},
"heading_0": {
"max": {
"value": "2.44140625em",
"comment": "Maximum fluid size for heading level 0.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "2.44140625em",
"comment": "Maximum fluid size for heading level 0."
},
"name": "size-font-heading-0-max",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_0",
"subitem": "max"
},
"path": ["size", "font", "heading_0", "max"]
},
"min": {
"value": "1.953125em",
"comment": "Minimum fluid size for heading level 0.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "1.953125em",
"comment": "Minimum fluid size for heading level 0."
},
"name": "size-font-heading-0-min",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_0",
"subitem": "min"
},
"path": ["size", "font", "heading_0", "min"]
}
},
"heading_1": {
"max": {
"value": "1.953125em",
"comment": "Maximum fluid size for heading level 1.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "1.953125em",
"comment": "Maximum fluid size for heading level 1."
},
"name": "size-font-heading-1-max",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_1",
"subitem": "max"
},
"path": ["size", "font", "heading_1", "max"]
},
"min": {
"value": "1.5625em",
"comment": "Minimum fluid size for heading level 1.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "1.5625em",
"comment": "Minimum fluid size for heading level 1."
},
"name": "size-font-heading-1-min",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_1",
"subitem": "min"
},
"path": ["size", "font", "heading_1", "min"]
}
},
"heading_2": {
"max": {
"value": "1.5625em",
"comment": "Maximum fluid size for heading level 2.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "1.5625em",
"comment": "Maximum fluid size for heading level 2."
},
"name": "size-font-heading-2-max",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_2",
"subitem": "max"
},
"path": ["size", "font", "heading_2", "max"]
},
"min": {
"value": "1.25em",
"comment": "Minimum fluid size for heading level 2.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "1.25em",
"comment": "Minimum fluid size for heading level 2."
},
"name": "size-font-heading-2-min",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_2",
"subitem": "min"
},
"path": ["size", "font", "heading_2", "min"]
}
},
"heading_3": {
"max": {
"value": "1.25em",
"comment": "Maximum fluid size for heading level 3.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "1.25em",
"comment": "Maximum fluid size for heading level 3."
},
"name": "size-font-heading-3-max",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_3",
"subitem": "max"
},
"path": ["size", "font", "heading_3", "max"]
},
"min": {
"value": "1em",
"comment": "Minimum fluid size for heading level 3.",
"filePath": "src/tokens/size/heading.js",
"isSource": true,
"original": {
"value": "1em",
"comment": "Minimum fluid size for heading level 3."
},
"name": "size-font-heading-3-min",
"attributes": {
"category": "size",
"type": "font",
"item": "heading_3",
"subitem": "min"
},
"path": ["size", "font", "heading_3", "min"]
}
}
},
"max_width": {
"media_object": {
"value": "7em",
"filePath": "src/tokens/size/max-width.json",
"isSource": true,
"original": {
"value": "7em"
},
"name": "size-max-width-media-object",
"attributes": {
"category": "size",
"type": "max_width",
"item": "media_object"
},
"path": ["size", "max_width", "media_object"]
},
"prose": {
"value": "40em",
"filePath": "src/tokens/size/max-width.json",
"isSource": true,
"original": {
"value": "{size.m.value}"
},
"name": "size-max-width-prose",
"attributes": {
"category": "size",
"type": "max_width",
"item": "prose"
},
"path": ["size", "max_width", "prose"]
},
"spread": {
"value": "72em",
"filePath": "src/tokens/size/max-width.json",
"isSource": true,
"original": {
"value": "{size.xl.value}"
},
"name": "size-max-width-spread",
"attributes": {
"category": "size",
"type": "max_width",
"item": "spread"
},
"path": ["size", "max_width", "spread"]
}
},
"padding": {
"control": {
"horizontal": {
"value": "1.25em",
"filePath": "src/tokens/size/padding.js",
"isSource": true,
"original": {
"value": "1.25em"
},
"name": "size-padding-control-horizontal",
"attributes": {
"category": "size",
"type": "padding",
"item": "control",
"subitem": "horizontal"
},
"path": ["size", "padding", "control", "horizontal"]
},
"vertical": {
"value": "0.40959999999999996em",
"filePath": "src/tokens/size/padding.js",
"isSource": true,
"original": {
"value": "0.40959999999999996em"
},
"name": "size-padding-control-vertical",
"attributes": {
"category": "size",
"type": "padding",
"item": "control",
"subitem": "vertical"
},
"path": ["size", "padding", "control", "vertical"]
}
},
"cell": {
"horizontal": {
"value": "0.512em",
"comment": "Used for table cells or other repeating content rows.",
"filePath": "src/tokens/size/padding.js",
"isSource": true,
"original": {
"value": "0.512em",
"comment": "Used for table cells or other repeating content rows."
},
"name": "size-padding-cell-horizontal",
"attributes": {
"category": "size",
"type": "padding",
"item": "cell",
"subitem": "horizontal"
},
"path": ["size", "padding", "cell", "horizontal"]
},
"vertical": {
"value": "0.512em",
"comment": "Used for table cells or other repeating content rows.",
"filePath": "src/tokens/size/padding.js",
"isSource": true,
"original": {
"value": "0.512em",
"comment": "Used for table cells or other repeating content rows."
},
"name": "size-padding-cell-vertical",
"attributes": {
"category": "size",
"type": "padding",
"item": "cell",
"subitem": "vertical"
},
"path": ["size", "padding", "cell", "vertical"]
}
},
"container": {
"horizontal": {
"min": {
"value": "1.25rem",
"comment": "Minimum inline (horizontal) fluid padding for container objects.",
"filePath": "src/tokens/size/padding.js",
"isSource": true,
"original": {
"value": "1.25rem",
"comment": "Minimum inline (horizontal) fluid padding for container objects."
},
"name": "size-padding-container-horizontal-min",
"attributes": {
"category": "size",
"type": "padding",
"item": "container",
"subitem": "horizontal",
"state": "min"
},
"path": ["size", "padding", "container", "horizontal", "min"]
},
"max": {
"value": "3.0517578125rem",
"comment": "Maximum inline (horizontal) padding for container objects.",
"filePath": "src/tokens/size/padding.js",
"isSource": true,
"original": {
"value": "3.0517578125rem",
"comment": "Maximum inline (horizontal) padding for container objects."
},
"name": "size-padding-container-horizontal-max",
"attributes": {
"category": "size",
"type": "padding",
"item": "container",
"subitem": "horizontal",
"state": "max"
},
"path": ["size", "padding", "container", "horizontal", "max"]
}
},
"vertical": {
"min": {
"value": "1.953125rem",
"comment": "Minimum block (vertical) fluid padding for container objects.",
"filePath": "src/tokens/size/padding.js",
"isSource": true,
"original": {
"value": "1.953125rem",
"comment": "Minimum block (vertical) fluid padding for container objects."
},
"name": "size-padding-container-vertical-min",
"attributes": {
"category": "size",
"type": "padding",
"item": "container",
"subitem": "vertical",
"state": "min"
},
"path": ["size", "padding", "container", "vertical", "min"]
},
"max": {
"value": "3.814697265625rem",
"comment": "Maximum block (vertical) padding for container objects.",
"filePath": "src/tokens/size/padding.js",
"isSource": true,
"original": {
"value": "3.814697265625rem",
"comment": "Maximum block (vertical) padding for container objects."
},
"name": "size-padding-container-vertical-max",
"attributes": {
"category": "size",
"type": "padding",
"item": "container",
"subitem": "vertical",
"state": "max"
},
"path": ["size", "padding", "container", "vertical", "max"]
}
}
}
},
"rhythm": {
"compact": {
"value": "0.262144em",
"filePath": "src/tokens/size/rhythm.js",
"isSource": true,
"original": {
"value": "0.262144em"
},
"name": "size-rhythm-compact",
"attributes": {
"category": "size",
"type": "rhythm",
"item": "compact"
},
"path": ["size", "rhythm", "compact"]
},
"condensed": {
"value": "0.8em",
"filePath": "src/tokens/size/rhythm.js",
"isSource": true,
"original": {
"value": "0.8em"
},
"name": "size-rhythm-condensed",
"attributes": {
"category": "size",
"type": "rhythm",
"item": "condensed"
},
"path": ["size", "rhythm", "condensed"]
},
"default": {
"value": "1.25em",
"filePath": "src/tokens/size/rhythm.js",
"isSource": true,
"original": {
"value": "1.25em"
},
"name": "size-rhythm-default",
"attributes": {
"category": "size",
"type": "rhythm",
"item": "default"
},
"path": ["size", "rhythm", "default"]
},
"default_rem": {
"value": "1.25rem",
"filePath": "src/tokens/size/rhythm.js",
"isSource": true,
"original": {
"value": "1.25rem"
},
"name": "size-rhythm-default-rem",
"attributes": {
"category": "size",
"type": "rhythm",
"item": "default_rem"
},
"path": ["size", "rhythm", "default_rem"]
},
"generous": {
"value": "1.953125em",
"filePath": "src/tokens/size/rhythm.js",
"isSource": true,
"original": {
"value": "1.953125em"
},
"name": "size-rhythm-generous",
"attributes": {
"category": "size",
"type": "rhythm",
"item": "generous"
},
"path": ["size", "rhythm", "generous"]
}
},
"xs": {
"value": "20em",
"filePath": "src/tokens/size/shirts.json",
"isSource": true,
"original": {
"value": "20em"
},
"name": "size-xs",
"attributes": {
"category": "size",
"type": "xs"
},
"path": ["size", "xs"]
},
"s": {
"value": "30em",
"filePath": "src/tokens/size/shirts.json",
"isSource": true,
"original": {
"value": "30em"
},
"name": "size-s",
"attributes": {
"category": "size",
"type": "s"
},
"path": ["size", "s"]
},
"m": {
"value": "40em",
"filePath": "src/tokens/size/shirts.json",
"isSource": true,
"original": {
"value": "40em"
},
"name": "size-m",
"attributes": {
"category": "size",
"type": "m"
},
"path": ["size", "m"]
},
"l": {
"value": "60em",
"filePath": "src/tokens/size/shirts.json",
"isSource": true,
"original": {
"value": "60em"
},
"name": "size-l",
"attributes": {
"category": "size",
"type": "l"
},
"path": ["size", "l"]
},
"xl": {
"value": "72em",
"filePath": "src/tokens/size/shirts.json",
"isSource": true,
"original": {
"value": "72em"
},
"name": "size-xl",
"attributes": {
"category": "size",
"type": "xl"
},
"path": ["size", "xl"]
},
"xxl": {
"value": "84em",
"filePath": "src/tokens/size/shirts.json",
"isSource": true,
"original": {
"value": "84em"
},
"name": "size-xxl",
"attributes": {
"category": "size",
"type": "xxl"
},
"path": ["size", "xxl"]
},
"xxxl": {
"value": "96em",
"filePath": "src/tokens/size/shirts.json",
"isSource": true,
"original": {
"value": "96em"
},
"name": "size-xxxl",
"attributes": {
"category": "size",
"type": "xxxl"
},
"path": ["size", "xxxl"]
},
"height": {
"control": {
"default": {
"value": "2.44140625em",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "2.44140625em"
},
"name": "size-height-control-default",
"attributes": {
"category": "size",
"type": "height",
"item": "control",
"subitem": "default"
},
"path": ["size", "height", "control", "default"]
},
"multiline": {
"value": "3.814697265625em",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "3.814697265625em"
},
"name": "size-height-control-multiline",
"attributes": {
"category": "size",
"type": "height",
"item": "control",
"subitem": "multiline"
},
"path": ["size", "height", "control", "multiline"]
}
},
"logo": {
"default": {
"value": "1.953125em",
"comment": "Default height for the logo component, used to display client and project logos relative to case studies.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1.953125em",
"comment": "Default height for the logo component, used to display client and project logos relative to case studies."
},
"name": "size-height-logo-default",
"attributes": {
"category": "size",
"type": "height",
"item": "logo",
"subitem": "default"
},
"path": ["size", "height", "logo", "default"]
}
}
},
"icon": {
"default": {
"value": "1em",
"comment": "The default icon size.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1em",
"comment": "The default icon size."
},
"name": "size-icon-default",
"attributes": {
"category": "size",
"type": "icon",
"item": "default"
},
"path": ["size", "icon", "default"]
},
"medium": {
"value": "1.25em",
"comment": "The medium icon size.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1.25em",
"comment": "The medium icon size."
},
"name": "size-icon-medium",
"attributes": {
"category": "size",
"type": "icon",
"item": "medium"
},
"path": ["size", "icon", "medium"]
},
"large": {
"value": "1.5625em",
"comment": "The large icon size.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1.5625em",
"comment": "The large icon size."
},
"name": "size-icon-large",
"attributes": {
"category": "size",
"type": "icon",
"item": "large"
},
"path": ["size", "icon", "large"]
},
"x-large": {
"value": "3.0517578125em",
"comment": "The x-large icon size.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "3.0517578125em",
"comment": "The x-large icon size."
},
"name": "size-icon-x-large",
"attributes": {
"category": "size",
"type": "icon",
"item": "x-large"
},
"path": ["size", "icon", "x-large"]
}
},
"width": {
"card_column": {
"min": {
"value": "16em",
"comment": "The minimum space to display a default card in a grid.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "16em",
"comment": "The minimum space to display a default card in a grid."
},
"name": "size-width-card-column-min",
"attributes": {
"category": "size",
"type": "width",
"item": "card_column",
"subitem": "min"
},
"path": ["size", "width", "card_column", "min"]
}
},
"logo_group": {
"item_width": {
"value": "9em",
"comment": "The width of individual logos in the logo group.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "9em",
"comment": "The width of individual logos in the logo group."
},
"name": "size-width-logo-group-item-width",
"attributes": {
"category": "size",
"type": "width",
"item": "logo_group",
"subitem": "item_width"
},
"path": ["size", "width", "logo_group", "item_width"]
}
}
},
"square": {
"avatar": {
"small": {
"value": "1.953125em",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1.953125em"
},
"name": "size-square-avatar-small",
"attributes": {
"category": "size",
"type": "square",
"item": "avatar",
"subitem": "small"
},
"path": ["size", "square", "avatar", "small"]
},
"medium": {
"value": "3.0517578125em",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "3.0517578125em"
},
"name": "size-square-avatar-medium",
"attributes": {
"category": "size",
"type": "square",
"item": "avatar",
"subitem": "medium"
},
"path": ["size", "square", "avatar", "medium"]
},
"large": {
"value": "11.641532182693481em",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "11.641532182693481em"
},
"name": "size-square-avatar-large",
"attributes": {
"category": "size",
"type": "square",
"item": "avatar",
"subitem": "large"
},
"path": ["size", "square", "avatar", "large"]
},
"full": {
"value": "100%",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "100%"
},
"name": "size-square-avatar-full",
"attributes": {
"category": "size",
"type": "square",
"item": "avatar",
"subitem": "full"
},
"path": ["size", "square", "avatar", "full"]
}
},
"control": {
"icon": {
"value": "1em",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1em"
},
"name": "size-square-control-icon",
"attributes": {
"category": "size",
"type": "square",
"item": "control",
"subitem": "icon"
},
"path": ["size", "square", "control", "icon"]
}
},
"toggle": {
"medium": {
"value": "1.5625em",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1.5625em"
},
"name": "size-square-toggle-medium",
"attributes": {
"category": "size",
"type": "square",
"item": "toggle",
"subitem": "medium"
},
"path": ["size", "square", "toggle", "medium"]
}
},
"footnote_link": {
"value": "1.5625em",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1.5625em"
},
"name": "size-square-footnote-link",
"attributes": {
"category": "size",
"type": "square",
"item": "footnote_link"
},
"path": ["size", "square", "footnote_link"]
}
},
"overlap": {
"small": {
"value": "0.262144em",
"comment": "Small amount of overlap between adjacent items organized in a visual bunch.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "0.262144em",
"comment": "Small amount of overlap between adjacent items organized in a visual bunch."
},
"name": "size-overlap-small",
"attributes": {
"category": "size",
"type": "overlap",
"item": "small"
},
"path": ["size", "overlap", "small"]
},
"large": {
"value": "1.25em",
"comment": "Larger amount of overlap between adjacent items.",
"filePath": "src/tokens/size/sizing.js",
"isSource": true,
"original": {
"value": "1.25em",
"comment": "Larger amount of overlap between adjacent items."
},
"name": "size-overlap-large",
"attributes": {
"category": "size",
"type": "overlap",
"item": "large"
},
"path": ["size", "overlap", "large"]
}
},
"spacing": {
"gap": {
"button": {
"extra": {
"value": "0.40959999999999996em",
"comment": "Gap between button content and extra content.",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "0.40959999999999996em",
"comment": "Gap between button content and extra content."
},
"name": "size-spacing-gap-button-extra",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "button",
"state": "extra"
},
"path": ["size", "spacing", "gap", "button", "extra"]
}
},
"inline": {
"small": {
"value": "1em",
"comment": "Horizontal/column gap between media object and content, etc.",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "1em",
"comment": "Horizontal/column gap between media object and content, etc."
},
"name": "size-spacing-gap-inline-small",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "inline",
"state": "small"
},
"path": ["size", "spacing", "gap", "inline", "small"]
},
"medium": {
"value": "1.25em",
"comment": "Horizontal/column gap between cells in inline lists, event logs, etc.",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "1.25em",
"comment": "Horizontal/column gap between cells in inline lists, event logs, etc."
},
"name": "size-spacing-gap-inline-medium",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "inline",
"state": "medium"
},
"path": ["size", "spacing", "gap", "inline", "medium"]
}
},
"fluid": {
"min": {
"value": "1.953125em",
"comment": "Minimum size of a large content gap, for example gutters between cards.",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "1.953125em",
"comment": "Minimum size of a large content gap, for example gutters between cards."
},
"name": "size-spacing-gap-fluid-min",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "fluid",
"state": "min"
},
"path": ["size", "spacing", "gap", "fluid", "min"]
},
"max": {
"value": "3.814697265625em",
"comment": "Maximum size of a large content gap, for example gutters between cards.",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "3.814697265625em",
"comment": "Maximum size of a large content gap, for example gutters between cards."
},
"name": "size-spacing-gap-fluid-max",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "fluid",
"state": "max"
},
"path": ["size", "spacing", "gap", "fluid", "max"]
}
},
"button_group": {
"default": {
"value": "0.64em",
"comment": "The Button Group default gap spacing.",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "0.64em",
"comment": "The Button Group default gap spacing."
},
"name": "size-spacing-gap-button-group-default",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "button_group",
"state": "default"
},
"path": ["size", "spacing", "gap", "button_group", "default"]
}
},
"form_group": {
"default": {
"value": "0.32767999999999997em",
"comment": "The Form Group default gap spacing.",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "0.32767999999999997em",
"comment": "The Form Group default gap spacing."
},
"name": "size-spacing-gap-form-group-default",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "form_group",
"state": "default"
},
"path": ["size", "spacing", "gap", "form_group", "default"]
}
},
"logo_group": {
"value": "1.953125em",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "1.953125em"
},
"name": "size-spacing-gap-logo-group",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "logo_group"
},
"path": ["size", "spacing", "gap", "logo_group"]
},
"comment_form": {
"horizontal": {
"value": "2.44140625rem",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "2.44140625rem"
},
"name": "size-spacing-gap-comment-form-horizontal",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "comment_form",
"state": "horizontal"
},
"path": ["size", "spacing", "gap", "comment_form", "horizontal"]
},
"vertical": {
"value": "1.5625rem",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "1.5625rem"
},
"name": "size-spacing-gap-comment-form-vertical",
"attributes": {
"category": "size",
"type": "spacing",
"item": "gap",
"subitem": "comment_form",
"state": "vertical"
},
"path": ["size", "spacing", "gap", "comment_form", "vertical"]
}
}
},
"control": {
"text_inset": {
"value": "0.8em",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "0.8em"
},
"name": "size-spacing-control-text-inset",
"attributes": {
"category": "size",
"type": "spacing",
"item": "control",
"subitem": "text_inset"
},
"path": ["size", "spacing", "control", "text_inset"]
},
"icon_inset": {
"value": "0.512em",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "0.512em"
},
"name": "size-spacing-control-icon-inset",
"attributes": {
"category": "size",
"type": "spacing",
"item": "control",
"subitem": "icon_inset"
},
"path": ["size", "spacing", "control", "icon_inset"]
}
},
"type": {
"block_indent": {
"value": "1.25em",
"comment": "Shared indentation for lists, blockquotes, etc.",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "{size.spacing.gap.inline.medium.value}",
"comment": "Shared indentation for lists, blockquotes, etc."
},
"name": "size-spacing-type-block-indent",
"attributes": {
"category": "size",
"type": "spacing",
"item": "type",
"subitem": "block_indent"
},
"path": ["size", "spacing", "type", "block_indent"]
}
},
"list": {
"inline_gap": {
"value": "1.25em",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "{size.spacing.gap.inline.medium.value}"
},
"name": "size-spacing-list-inline-gap",
"attributes": {
"category": "size",
"type": "spacing",
"item": "list",
"subitem": "inline_gap"
},
"path": ["size", "spacing", "list", "inline_gap"]
}
},
"media": {
"gap": {
"value": "1em",
"filePath": "src/tokens/size/spacing.js",
"isSource": true,
"original": {
"value": "{size.spacing.gap.inline.small.value}"
},
"name": "size-spacing-media-gap",
"attributes": {
"category": "size",
"type": "spacing",
"item": "media",
"subitem": "gap"
},
"path": ["size", "spacing", "media", "gap"]
}
}
}
},
"time": {
"transition": {
"instant": {
"value": "0s",
"filePath": "src/tokens/time/transition.json",
"isSource": true,
"original": {
"value": "0s"
},
"name": "time-transition-instant",
"attributes": {
"category": "time",
"type": "transition",
"item": "instant"
},
"path": ["time", "transition", "instant"]
},
"immediate": {
"value": "0.1s",
"filePath": "src/tokens/time/transition.json",
"isSource": true,
"original": {
"value": "0.1s"
},
"name": "time-transition-immediate",
"attributes": {
"category": "time",
"type": "transition",
"item": "immediate"
},
"path": ["time", "transition", "immediate"]
},
"quick": {
"value": "0.2s",
"filePath": "src/tokens/time/transition.json",
"isSource": true,
"original": {
"value": "0.2s"
},
"name": "time-transition-quick",
"attributes": {
"category": "time",
"type": "transition",
"item": "quick"
},
"path": ["time", "transition", "quick"]
},
"prompt": {
"value": "0.3s",
"filePath": "src/tokens/time/transition.json",
"isSource": true,
"original": {
"value": "0.3s"
},
"name": "time-transition-prompt",
"attributes": {
"category": "time",
"type": "transition",
"item": "prompt"
},
"path": ["time", "transition", "prompt"]
},
"slow": {
"value": "0.4s",
"filePath": "src/tokens/time/transition.json",
"isSource": true,
"original": {
"value": "0.4s"
},
"name": "time-transition-slow",
"attributes": {
"category": "time",
"type": "transition",
"item": "slow"
},
"path": ["time", "transition", "slow"]
},
"glacial": {
"value": "0.6s",
"filePath": "src/tokens/time/transition.json",
"isSource": true,
"original": {
"value": "0.6s"
},
"name": "time-transition-glacial",
"attributes": {
"category": "time",
"type": "transition",
"item": "glacial"
},
"path": ["time", "transition", "glacial"]
}
}
}
};
/**
* Create Sky Nav Menu
*
* Adds an event listener to the toggle button of a Sky Nav component for click
* events, which runs the toggle command to show or hide the menu with animation.
* Responds to breakpoint changes to show or hide the nav for large and small
* screens. Returns an object containing a `destroy()` method to remove the
* event listener.
*
* @param navButton - the toggle button for the navigation
*/
const initSkyNav = navButton => {
const menu = navButton.nextElementSibling;
const navWrapper = navButton.closest('.js-sky-nav');
const largeScreenMediaQuery = window.matchMedia(`(min-width: ${tokens.size.breakpoint.m.value})`);
const reducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
// The Sky Nav component has inline synchronous JS logic to add an `is-loading`
// state to remove the layout shift at smaller viewports. That state no longer
// applies at this point since the Sky Nav JS has loaded & is ready to take over.
navWrapper.classList.remove('is-loading');
/**
* Update Menu Layout
* Sets visibility of menu & navButton for small vs large screen layouts.
*/
const update = () => {
const isLargeScreen = largeScreenMediaQuery.matches;
if (isLargeScreen) {
navButton.removeAttribute('aria-expanded');
menu.hidden = false;
} else {
navButton.setAttribute('aria-expanded', 'false');
menu.hidden = true;
}
};
let timeoutId = -1;
/**
* Toggle Menu State (expanded/closed)
* Sets aria-expanded & hidden attributes to show or hide the menu.
*/
const toggle = () => {
const isExpanded = navButton.getAttribute('aria-expanded') === 'true';
navButton.setAttribute('aria-expanded', String(!isExpanded));
if (reducedMotionMediaQuery.matches) {
menu.hidden = isExpanded;
return;
}
const duration = Number.parseFloat(tokens.time.transition.slow.value);
const transition = `transform ${duration}s ${tokens.ease.in_out.value}`;
clearTimeout(timeoutId);
menu.hidden = false;
const heightDiff = menu.getBoundingClientRect().height;
if (isExpanded) {
// Closing menu: slide the elements up before hiding the menu
document.body.style.setProperty('transition', transition);
document.body.style.setProperty('transform', `translateY(${-heightDiff}px)`);
timeoutId = setTimeout(() => {
menu.hidden = true;
document.body.style.removeProperty('transition');
document.body.style.removeProperty('transform');
}, duration * 1000);
} else {
// Opening menu: start the elements higher than their "resting position" and then slide them down
document.body.style.setProperty('transform', `translateY(${-heightDiff}px)`);
// Flush changes to the DOM
// eslint-disable-next-line @cloudfour/typescript-eslint/no-unused-expressions, mdx/no-unused-expressions
navWrapper.offsetWidth;
document.body.style.setProperty('transition', transition);
document.body.style.removeProperty('transform');
timeoutId = setTimeout(() => {
document.body.style.removeProperty('transition');
}, duration * 1000);
}
};
navButton.addEventListener('click', toggle);
// Run the update method when the media query status changes
largeScreenMediaQuery.addEventListener('change', update);
// Run the update method once to set the initial layout correctly
update();
/** Clean up event listeners */
const destroy = () => {
navButton.removeEventListener('click', toggle);
largeScreenMediaQuery.removeEventListener('change', update);
};
// Return a public API for consumers of this component
return {
destroy
};
};
/**
* Subscribe
*
* Progressively enhances the UX for the Subscribe component.
*
* Enhancements include:
* - A one second form hide delay is added when `:focus` is moved away from the
* Subscribe component elements
* - The form can be hidden by pressing the `Escape` key
*/
const createSubscribe = containerEl => {
const SHOW_FORM_CLASS = 'activate-form';
const BLUR_TIMEOUT = 1000; // Milliseconds
// Keeps track of active setTimeouts
let blurTimeoutId;
// Keeps the current state of the form
let isFormOpen = false;
// Query all the required elements
const getWeeklyDigestsBtn = containerEl.querySelector('.js-subscribe__get-weekly-digests-btn');
const formEl = containerEl.querySelector('form');
const formFocusableEls = containerEl.querySelectorAll('label, input, button');
const controlEls = containerEl.querySelectorAll('.js-subscribe__control');
const controlsUiWrapper = containerEl.querySelector('.js-subscribe__controls-ui');
// Confirm we have what we need to proceed
if (!getWeeklyDigestsBtn || !formEl || !controlsUiWrapper) {
return;
}
// Hide the form anytime a `js-subscribe__control` gets focus
const onControlFocus = () => {
clearTimeout(blurTimeoutId);
containerEl.classList.remove(SHOW_FORM_CLASS);
isFormOpen = false;
};
// Show the form anytime any form element gets focus
// The form is always accessible by keyboard, it's only visually hidden
const onFormFocus = () => {
clearTimeout(blurTimeoutId);
containerEl.classList.add(SHOW_FORM_CLASS);
isFormOpen = true;
};
// Hide the form after a delay anytime focus is removed from a form element
const onFormBlur = () => {
clearTimeout(blurTimeoutId);
blurTimeoutId = window.setTimeout(() => {
containerEl.classList.remove(SHOW_FORM_CLASS);
isFormOpen = false;
}, BLUR_TIMEOUT);
};
// Handler for the button click
const onGetWeeklyDigestsClick = event => {
event.preventDefault();
containerEl.classList.add(SHOW_FORM_CLASS);
isFormOpen = true;
// Jump the focus to the first input element
formEl.querySelector('input')?.focus();
};
// Handler for the Escape keydown event
const onKeydown = event => {
// We need to hide the form and reset the focus, we can get both by setting
// the focus back to the "Get Weekly Digests" link.
if (event.key === 'Escape' && isFormOpen) {
getWeeklyDigestsBtn.focus();
}
};
// We'll store any event listener cleanup callbacks in this array for later
const cleanupCallbacks = [];
const addEventListeners = () => {
getWeeklyDigestsBtn.addEventListener('click', onGetWeeklyDigestsClick);
cleanupCallbacks.push(() => getWeeklyDigestsBtn.removeEventListener('click', onGetWeeklyDigestsClick));
for (const formFocusableEl of formFocusableEls) {
formFocusableEl.addEventListener('blur', onFormBlur);
formFocusableEl.addEventListener('focus', onFormFocus);
cleanupCallbacks.push(() => {
formFocusableEl.removeEventListener('blur', onFormBlur);
formFocusableEl.removeEventListener('focus', onFormFocus);
});
}
for (const controlEl of controlEls) {
controlEl.addEventListener('focus', onControlFocus);
cleanupCallbacks.push(() => controlEl.removeEventListener('focus', onControlFocus));
}
document.addEventListener('keydown', onKeydown);
cleanupCallbacks.push(() => document.removeEventListener('keydown', onKeydown));
};
// Destroys the Subscribe component
// - clears existing timeouts
// - sets up the proper UI state
// - removes event listeners
const destroy = () => {
// Don't want this hanging around, it could end up in a confusing UI state
clearTimeout(blurTimeoutId);
// Remove all event listeners
for (const cleanup of cleanupCallbacks) cleanup();
// Hide the UI buttons so we can show the form
controlsUiWrapper.hidden = true;
// Show the form
containerEl.classList.add(SHOW_FORM_CLASS);
};
// Initializes the Subscribe component
// - clears existing state/timeouts
// - sets up the proper UI state
// - sets up event listeners
const init = () => {
// Perform a cleanup first
destroy();
// We want to make sure the UI buttons are visible on init
controlsUiWrapper.hidden = false;
addEventListeners();
// Make sure to show the button UI state (no form)
containerEl.classList.remove(SHOW_FORM_CLASS);
};
// Return a public API for consumers of this component
return {
init,
destroy
};
};
exports.createElasticTextArea = createElasticTextArea;
exports.createSubscribe = createSubscribe;
exports.defaultArgTypes = defaultArgTypes;
exports.defaultArgs = defaultArgs;
exports.generateGroundNavProps = generateGroundNavProps;
exports.initCommentReplyForm = initCommentReplyForm;
exports.initSkyNav = initSkyNav;
Object.defineProperty(exports, '__esModule', { value: true });
}));