@cloudfour/patterns
Version:
Front-end patterns for cloudfour.com
1,904 lines • 97.7 kB
JavaScript
export default {
"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": {
"