Created
April 25, 2023 14:31
-
-
Save kjgarza/31d4b8e8c9b5c7ba6e408bef67aadbaa to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "core": { | |
| "dimension": { | |
| "augmentedFourth": { | |
| "value": "1.414 * 1.414", | |
| "type": "dimension" | |
| }, | |
| "scale": { | |
| "value": "2", | |
| "type": "dimension" | |
| }, | |
| "xs": { | |
| "value": "{dimension.scale} * {dimension.augmentedFourth}", | |
| "type": "dimension" | |
| }, | |
| "sm": { | |
| "value": "{dimension.xs} * {dimension.scale}", | |
| "type": "dimension" | |
| }, | |
| "md": { | |
| "value": "{dimension.sm} * {dimension.scale}", | |
| "type": "dimension" | |
| }, | |
| "lg": { | |
| "value": "{dimension.md} * {dimension.scale}", | |
| "type": "dimension" | |
| }, | |
| "xl": { | |
| "value": "{dimension.lg} * {dimension.scale}", | |
| "type": "dimension" | |
| } | |
| }, | |
| "spacing": { | |
| "xs": { | |
| "value": "{dimension.xs}", | |
| "type": "spacing" | |
| }, | |
| "sm": { | |
| "value": "{dimension.sm}", | |
| "type": "spacing" | |
| }, | |
| "md": { | |
| "value": "{dimension.md}", | |
| "type": "spacing" | |
| }, | |
| "lg": { | |
| "value": "{dimension.lg}", | |
| "type": "spacing" | |
| }, | |
| "xl": { | |
| "value": "{dimension.xl}", | |
| "type": "spacing" | |
| }, | |
| "multi-value": { | |
| "value": "{dimension.sm} {dimension.xl}", | |
| "type": "spacing", | |
| "description": "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens" | |
| } | |
| }, | |
| "borderRadius": { | |
| "sm": { | |
| "value": "4", | |
| "type": "borderRadius" | |
| }, | |
| "lg": { | |
| "value": "{borderRadius.sm} * {dimension.augmentedFourth}", | |
| "type": "borderRadius" | |
| }, | |
| "xl": { | |
| "value": "{borderRadius.lg} * {dimension.augmentedFourth}", | |
| "type": "borderRadius" | |
| }, | |
| "multi-value": { | |
| "value": "{borderRadius.sm} {borderRadius.lg}", | |
| "type": "borderRadius", | |
| "description": "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values" | |
| } | |
| }, | |
| "colors": { | |
| "medium-blue": { | |
| "value": "#0D60D4", | |
| "type": "color" | |
| }, | |
| "dark-pink": { | |
| "value": "#BC2B66", | |
| "type": "color" | |
| }, | |
| "lime": { | |
| "value": "#E2E254", | |
| "type": "color" | |
| }, | |
| "datacite-grey": { | |
| "value": "#C0CED6", | |
| "type": "color" | |
| }, | |
| "light-blue": { | |
| "value": "#00B1E2", | |
| "type": "color" | |
| }, | |
| "dark-blue": { | |
| "value": "#243B54", | |
| "type": "color" | |
| }, | |
| "light-blue-black-60": { | |
| "value": "#00475A", | |
| "type": "color" | |
| }, | |
| "light-blue-white-90": { | |
| "value": "#D1F1FA", | |
| "type": "color" | |
| }, | |
| "success": { | |
| "value": "#46BCAB", | |
| "type": "color" | |
| }, | |
| "error": { | |
| "value": "#F07C73", | |
| "type": "color" | |
| }, | |
| "warning": { | |
| "value": "#FFA947", | |
| "type": "color" | |
| }, | |
| "black": { | |
| "value": "#000000", | |
| "type": "color" | |
| }, | |
| "white": { | |
| "value": "#ffffff", | |
| "type": "color" | |
| }, | |
| "gray": { | |
| "100": { | |
| "value": "#f7fafc", | |
| "type": "color" | |
| }, | |
| "200": { | |
| "value": "#edf2f7", | |
| "type": "color" | |
| }, | |
| "300": { | |
| "value": "#e2e8f0", | |
| "type": "color" | |
| }, | |
| "400": { | |
| "value": "#cbd5e0", | |
| "type": "color" | |
| }, | |
| "500": { | |
| "value": "#a0aec0", | |
| "type": "color" | |
| }, | |
| "600": { | |
| "value": "#718096", | |
| "type": "color" | |
| }, | |
| "700": { | |
| "value": "#4a5568", | |
| "type": "color" | |
| }, | |
| "800": { | |
| "value": "#2d3748", | |
| "type": "color" | |
| }, | |
| "900": { | |
| "value": "#1a202c", | |
| "type": "color" | |
| } | |
| }, | |
| "red": { | |
| "100": { | |
| "value": "#fff5f5", | |
| "type": "color" | |
| }, | |
| "200": { | |
| "value": "#fed7d7", | |
| "type": "color" | |
| }, | |
| "300": { | |
| "value": "#feb2b2", | |
| "type": "color" | |
| }, | |
| "400": { | |
| "value": "#fc8181", | |
| "type": "color" | |
| }, | |
| "500": { | |
| "value": "#f56565", | |
| "type": "color" | |
| }, | |
| "600": { | |
| "value": "#e53e3e", | |
| "type": "color" | |
| }, | |
| "700": { | |
| "value": "#c53030", | |
| "type": "color" | |
| }, | |
| "800": { | |
| "value": "#9b2c2c", | |
| "type": "color" | |
| }, | |
| "900": { | |
| "value": "#742a2a", | |
| "type": "color" | |
| } | |
| } | |
| }, | |
| "opacity": { | |
| "low": { | |
| "value": "10%", | |
| "type": "opacity" | |
| }, | |
| "md": { | |
| "value": "50%", | |
| "type": "opacity" | |
| }, | |
| "high": { | |
| "value": "90%", | |
| "type": "opacity" | |
| } | |
| }, | |
| "fontFamilies": { | |
| "heading": { | |
| "value": "DM Sans", | |
| "type": "fontFamilies" | |
| }, | |
| "body": { | |
| "value": "Barlow", | |
| "type": "fontFamilies" | |
| } | |
| }, | |
| "lineHeights": { | |
| "heading": { | |
| "value": "110%", | |
| "type": "lineHeights" | |
| }, | |
| "body": { | |
| "value": "140%", | |
| "type": "lineHeights" | |
| } | |
| }, | |
| "letterSpacing": { | |
| "default": { | |
| "value": "0", | |
| "type": "letterSpacing" | |
| }, | |
| "increased": { | |
| "value": "150%", | |
| "type": "letterSpacing" | |
| }, | |
| "decreased": { | |
| "value": "-5%", | |
| "type": "letterSpacing" | |
| } | |
| }, | |
| "paragraphSpacing": { | |
| "h1": { | |
| "value": "32", | |
| "type": "paragraphSpacing" | |
| }, | |
| "h2": { | |
| "value": "26", | |
| "type": "paragraphSpacing" | |
| } | |
| }, | |
| "fontWeights": { | |
| "headingRegular": { | |
| "value": "Regular", | |
| "type": "fontWeights" | |
| }, | |
| "headingBold": { | |
| "value": "Bold", | |
| "type": "fontWeights" | |
| }, | |
| "headingMedium": { | |
| "value": "Medium", | |
| "type": "fontWeights" | |
| }, | |
| "bodyRegular": { | |
| "value": "Regular", | |
| "type": "fontWeights" | |
| }, | |
| "bodyBold": { | |
| "value": "Bold", | |
| "type": "fontWeights" | |
| }, | |
| "captionMedium": { | |
| "value": "Medium", | |
| "type": "fontWeights" | |
| } | |
| }, | |
| "fontSizes": { | |
| "h1": { | |
| "value": "{fontSizes.h2} * 1.618", | |
| "type": "fontSizes" | |
| }, | |
| "h2": { | |
| "value": "{fontSizes.h3} * 1.333", | |
| "type": "fontSizes" | |
| }, | |
| "h3": { | |
| "value": "{fontSizes.h4} * 1.5", | |
| "type": "fontSizes" | |
| }, | |
| "h4": { | |
| "value": "{fontSizes.h5} * 1.25", | |
| "type": "fontSizes" | |
| }, | |
| "h5": { | |
| "value": "{fontSizes.body} * 1", | |
| "type": "fontSizes" | |
| }, | |
| "body-1": { | |
| "value": "20", | |
| "type": "fontSizes" | |
| }, | |
| "body-2": { | |
| "value": "18", | |
| "type": "fontSizes" | |
| }, | |
| "body": { | |
| "value": "16", | |
| "type": "fontSizes" | |
| }, | |
| "sm": { | |
| "value": "{fontSizes.body} * 0.85", | |
| "type": "fontSizes" | |
| }, | |
| "xs": { | |
| "value": "{fontSizes.body} * 0.65", | |
| "type": "fontSizes" | |
| } | |
| } | |
| }, | |
| "light": { | |
| "fg": { | |
| "default": { | |
| "value": "{colors.black}", | |
| "type": "color" | |
| }, | |
| "muted": { | |
| "value": "{colors.gray.700}", | |
| "type": "color" | |
| }, | |
| "subtle": { | |
| "value": "{colors.gray.500}", | |
| "type": "color" | |
| } | |
| }, | |
| "bg": { | |
| "default": { | |
| "value": "{colors.white}", | |
| "type": "color" | |
| }, | |
| "muted": { | |
| "value": "{colors.gray.100}", | |
| "type": "color" | |
| }, | |
| "subtle": { | |
| "value": "{colors.gray.200}", | |
| "type": "color" | |
| } | |
| }, | |
| "accent": { | |
| "default": { | |
| "value": "{colors.indigo.400}", | |
| "type": "color" | |
| }, | |
| "onAccent": { | |
| "value": "{colors.white}", | |
| "type": "color" | |
| }, | |
| "bg": { | |
| "value": "{colors.indigo.200}", | |
| "type": "color" | |
| } | |
| }, | |
| "shadows": { | |
| "default": { | |
| "value": "{colors.gray.900}", | |
| "type": "color" | |
| } | |
| } | |
| }, | |
| "dark": { | |
| "fg": { | |
| "default": { | |
| "value": "{colors.white}", | |
| "type": "color" | |
| }, | |
| "muted": { | |
| "value": "{colors.gray.300}", | |
| "type": "color" | |
| }, | |
| "subtle": { | |
| "value": "{colors.gray.500}", | |
| "type": "color" | |
| } | |
| }, | |
| "bg": { | |
| "default": { | |
| "value": "{colors.gray.900}", | |
| "type": "color" | |
| }, | |
| "muted": { | |
| "value": "{colors.gray.700}", | |
| "type": "color" | |
| }, | |
| "subtle": { | |
| "value": "{colors.gray.600}", | |
| "type": "color" | |
| } | |
| }, | |
| "accent": { | |
| "default": { | |
| "value": "{colors.indigo.600}", | |
| "type": "color" | |
| }, | |
| "onAccent": { | |
| "value": "{colors.white}", | |
| "type": "color" | |
| }, | |
| "bg": { | |
| "value": "{colors.indigo.800}", | |
| "type": "color" | |
| } | |
| }, | |
| "shadows": { | |
| "default": { | |
| "value": "rgba({colors.black}, 0.3)", | |
| "type": "color" | |
| } | |
| } | |
| }, | |
| "theme": { | |
| "button": { | |
| "primary": { | |
| "background": { | |
| "value": "{accent.default}", | |
| "type": "color" | |
| }, | |
| "text": { | |
| "value": "{accent.onAccent}", | |
| "type": "color" | |
| } | |
| }, | |
| "borderRadius": { | |
| "value": "{borderRadius.lg}", | |
| "type": "borderRadius" | |
| }, | |
| "borderWidth": { | |
| "value": "{dimension.sm}", | |
| "type": "borderWidth" | |
| } | |
| }, | |
| "card": { | |
| "borderRadius": { | |
| "value": "{borderRadius.lg}", | |
| "type": "borderRadius" | |
| }, | |
| "background": { | |
| "value": "{bg.default}", | |
| "type": "color" | |
| }, | |
| "padding": { | |
| "value": "{dimension.md}", | |
| "type": "dimension" | |
| } | |
| }, | |
| "boxShadow": { | |
| "default": { | |
| "value": [ | |
| { | |
| "x": 5, | |
| "y": 5, | |
| "spread": 3, | |
| "color": "rgba({shadows.default}, 0.15)", | |
| "blur": 5, | |
| "type": "dropShadow" | |
| }, | |
| { | |
| "x": 4, | |
| "y": 4, | |
| "spread": 6, | |
| "color": "#00000033", | |
| "blur": 5, | |
| "type": "innerShadow" | |
| } | |
| ], | |
| "type": "boxShadow" | |
| } | |
| }, | |
| "typography": { | |
| "H1": { | |
| "Bold": { | |
| "type": "typography", | |
| "value": { | |
| "fontFamily": "{fontFamilies.heading}", | |
| "fontWeight": "{fontWeights.headingBold}", | |
| "lineHeight": "{lineHeights.heading}", | |
| "fontSize": "{fontSizes.h1}", | |
| "paragraphSpacing": "{paragraphSpacing.h1}", | |
| "letterSpacing": "{letterSpacing.decreased}" | |
| } | |
| }, | |
| "Regular": { | |
| "type": "typography", | |
| "value": { | |
| "fontFamily": "{fontFamilies.heading}", | |
| "fontWeight": "{fontWeights.headingRegular}", | |
| "lineHeight": "{lineHeights.heading}", | |
| "fontSize": "{fontSizes.h1}", | |
| "paragraphSpacing": "{paragraphSpacing.h1}", | |
| "letterSpacing": "{letterSpacing.decreased}" | |
| } | |
| } | |
| }, | |
| "H2": { | |
| "Bold": { | |
| "type": "typography", | |
| "value": { | |
| "fontFamily": "{fontFamilies.heading}", | |
| "fontWeight": "{fontWeights.headingBold}", | |
| "lineHeight": "{lineHeights.heading}", | |
| "fontSize": "{fontSizes.h2}", | |
| "paragraphSpacing": "{paragraphSpacing.h2}", | |
| "letterSpacing": "{letterSpacing.decreased}" | |
| } | |
| }, | |
| "Regular": { | |
| "type": "typography", | |
| "value": { | |
| "fontFamily": "{fontFamilies.heading}", | |
| "fontWeight": "{fontWeights.headingRegular}", | |
| "lineHeight": "{lineHeights.heading}", | |
| "fontSize": "{fontSizes.h2}", | |
| "paragraphSpacing": "{paragraphSpacing.h2}", | |
| "letterSpacing": "{letterSpacing.decreased}" | |
| } | |
| } | |
| }, | |
| "Body": { | |
| "type": "typography", | |
| "value": { | |
| "fontFamily": "{fontFamilies.body}", | |
| "fontWeight": "{fontWeights.bodyRegular}", | |
| "lineHeight": "{lineHeights.heading}", | |
| "fontSize": "{fontSizes.body}", | |
| "paragraphSpacing": "{paragraphSpacing.h2}" | |
| } | |
| } | |
| } | |
| }, | |
| "$themes": [], | |
| "$metadata": { | |
| "tokenSetOrder": [ | |
| "core", | |
| "light", | |
| "dark", | |
| "theme" | |
| ] | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment