Created
March 10, 2022 21:07
-
-
Save julrich/be06d74e49ecd835f0f7130243907133 to your computer and use it in GitHub Desktop.
Design Token Theme -> Tokens
This file contains hidden or 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
| { | |
| "color": { | |
| "primary": "#333", | |
| "background": "#fff", | |
| "foreground": "#000", | |
| "link": "#1c7ed6" | |
| }, | |
| "font": { | |
| "display": { | |
| "family": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif", | |
| "size": { | |
| "s": [14, 1.714], | |
| "m": [16, 1.75], | |
| "l": [18, 1.778], | |
| "xl": [24, 1.5], | |
| "xxl": [30, 1.333] | |
| }, | |
| "bp-factor": { | |
| "s": 1.167, | |
| "m": 1.333 | |
| } | |
| }, | |
| "copy": { | |
| "family": "'Helvetica Neue', Helvetica, Arial, sans-serif", | |
| "size": { | |
| "s": [14, 1.714], | |
| "m": [16, 1.75], | |
| "l": [18, 1.778] | |
| }, | |
| "bp-factor": { | |
| "s": 1, | |
| "m": 1.125 | |
| } | |
| }, | |
| "ui": { | |
| "family": "system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif", | |
| "size": { | |
| "xs": [12, 1.333], | |
| "s": [14, 1.714], | |
| "m": [16, 1.75], | |
| "l": [18, 1.778] | |
| }, | |
| "bp-factor": { | |
| "s": 1, | |
| "m": 1.125 | |
| } | |
| }, | |
| "mono": { | |
| "family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace", | |
| "size": { | |
| "s": [14, 1.714], | |
| "m": [16, 1.75], | |
| "l": [18, 1.778] | |
| }, | |
| "bp-factor": { | |
| "s": 1, | |
| "m": 1.125 | |
| } | |
| } | |
| }, | |
| "font-weight": { | |
| "light": 300, | |
| "regular": 400, | |
| "semi-bold": 600, | |
| "bold": 700 | |
| }, | |
| "spacing": { | |
| "base": 8, | |
| "scale-ratio": 1.414, | |
| "bp-ratio": 1.618 | |
| }, | |
| "breakpoints": { | |
| "s": 576, | |
| "m": 768, | |
| "l": 992, | |
| "xl": 1200 | |
| } | |
| } |
This file contains hidden or 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
| /** | |
| * Do not edit directly | |
| * Generated on Thu, 10 Mar 2022 16:25:14 GMT | |
| */ | |
| :root { | |
| --ks-breakpoint-xl: 75em; | |
| --ks-breakpoint-l: 62em; | |
| --ks-breakpoint-m: 48em; | |
| --ks-breakpoint-s: 36em; | |
| --ks-spacing-xxl-bp-factor-xl: 6.853526069776001; | |
| --ks-spacing-xxl-bp-factor-l: 4.235801032000001; | |
| --ks-spacing-xxl-bp-factor-m: 2.6179240000000004; | |
| --ks-spacing-xxl-bp-factor-s: 1.618; | |
| --ks-spacing-xxl-base: 1.4136rem; | |
| --ks-spacing-xl-bp-factor-xl: 6.853526069776001; | |
| --ks-spacing-xl-bp-factor-l: 4.235801032000001; | |
| --ks-spacing-xl-bp-factor-m: 2.6179240000000004; | |
| --ks-spacing-xl-bp-factor-s: 1.618; | |
| --ks-spacing-xl-base: 0.9997rem; | |
| --ks-spacing-l-bp-factor-xl: 6.853526069776001; | |
| --ks-spacing-l-bp-factor-l: 4.235801032000001; | |
| --ks-spacing-l-bp-factor-m: 2.6179240000000004; | |
| --ks-spacing-l-bp-factor-s: 1.618; | |
| --ks-spacing-l-base: 0.707rem; | |
| --ks-spacing-m-bp-factor-xl: 6.853526069776001; | |
| --ks-spacing-m-bp-factor-l: 4.235801032000001; | |
| --ks-spacing-m-bp-factor-m: 2.6179240000000004; | |
| --ks-spacing-m-bp-factor-s: 1.618; | |
| --ks-spacing-m-base: 0.5rem; | |
| --ks-spacing-s-bp-factor-xl: 6.853526069776001; | |
| --ks-spacing-s-bp-factor-l: 4.235801032000001; | |
| --ks-spacing-s-bp-factor-m: 2.6179240000000004; | |
| --ks-spacing-s-bp-factor-s: 1.618; | |
| --ks-spacing-s-base: 0.3536rem; | |
| --ks-spacing-xs-bp-factor-xl: 6.853526069776001; | |
| --ks-spacing-xs-bp-factor-l: 4.235801032000001; | |
| --ks-spacing-xs-bp-factor-m: 2.6179240000000004; | |
| --ks-spacing-xs-bp-factor-s: 1.618; | |
| --ks-spacing-xs-base: 0.2501rem; | |
| --ks-spacing-xxs-bp-factor-xl: 6.853526069776001; | |
| --ks-spacing-xxs-bp-factor-l: 4.235801032000001; | |
| --ks-spacing-xxs-bp-factor-m: 2.6179240000000004; | |
| --ks-spacing-xxs-bp-factor-s: 1.618; | |
| --ks-spacing-xxs-base: 0.1769rem; | |
| --ks-line-height-mono-l: 1.778; | |
| --ks-line-height-mono-m: 1.75; | |
| --ks-line-height-mono-s: 1.714; | |
| --ks-line-height-ui-l: 1.778; | |
| --ks-line-height-ui-m: 1.75; | |
| --ks-line-height-ui-s: 1.714; | |
| --ks-line-height-ui-xs: 1.333; | |
| --ks-line-height-copy-l: 1.778; | |
| --ks-line-height-copy-m: 1.75; | |
| --ks-line-height-copy-s: 1.714; | |
| --ks-line-height-display-xxl: 1.333; | |
| --ks-line-height-display-xl: 1.5; | |
| --ks-line-height-display-l: 1.778; | |
| --ks-line-height-display-m: 1.75; | |
| --ks-line-height-display-s: 1.714; | |
| --ks-font-size-mono-l-base: 1.125rem; | |
| --ks-font-size-mono-m-base: 1rem; | |
| --ks-font-size-mono-s-base: 0.875rem; | |
| --ks-font-size-mono-bp-factor-m: 1.125; | |
| --ks-font-size-mono-bp-factor-s: 1; | |
| --ks-font-size-ui-l-base: 1.125rem; | |
| --ks-font-size-ui-m-base: 1rem; | |
| --ks-font-size-ui-s-base: 0.875rem; | |
| --ks-font-size-ui-xs-base: 0.75rem; | |
| --ks-font-size-ui-bp-factor-m: 1.125; | |
| --ks-font-size-ui-bp-factor-s: 1; | |
| --ks-font-size-copy-l-base: 1.125rem; | |
| --ks-font-size-copy-m-base: 1rem; | |
| --ks-font-size-copy-s-base: 0.875rem; | |
| --ks-font-size-copy-bp-factor-m: 1.125; | |
| --ks-font-size-copy-bp-factor-s: 1; | |
| --ks-font-size-display-xxl-base: 1.875rem; | |
| --ks-font-size-display-xl-base: 1.5rem; | |
| --ks-font-size-display-l-base: 1.125rem; | |
| --ks-font-size-display-m-base: 1rem; | |
| --ks-font-size-display-s-base: 0.875rem; | |
| --ks-font-size-display-bp-factor-m: 1.333; | |
| --ks-font-size-display-bp-factor-s: 1.167; | |
| --ks-text-color-primray-interactive-visited: #333333; | |
| --ks-text-color-primray-interactive-active: #333333; | |
| --ks-text-color-primray-interactive-hover: #333333; | |
| --ks-text-color-primray-interactive: #333333; | |
| --ks-text-color-primray-inverted-interactive-active: #ffffff; | |
| --ks-text-color-primray-inverted-interactive-hover: #ffffff; | |
| --ks-text-color-primray-inverted-interactive: #ffffff; | |
| --ks-text-color-primray-inverted: #ffffff; | |
| --ks-text-color-primray: #333333; | |
| --ks-text-color-interface-interactive: #000000; | |
| --ks-text-color-interface: rgba(0, 0, 0, 0.8); | |
| --ks-text-color-default-inverted: #ffffff; | |
| --ks-text-color-default-interactive-visited: #1c7ed6; | |
| --ks-text-color-default-interactive-active: #1c7ed6; | |
| --ks-text-color-default-interactive-hover: #1c7ed6; | |
| --ks-text-color-default-interactive: #1c7ed6; | |
| --ks-text-color-default: #000000; | |
| --ks-background-color-primary-tbd-interactive: #000000; | |
| --ks-background-color-primary-tbd: rgba(51, 51, 51, 0.8); | |
| --ks-background-color-primary-inverted-interactive-active: #0a0a0a; | |
| --ks-background-color-primary-inverted-interactive-hover: #050505; | |
| --ks-background-color-primary-inverted-interactive: #000000; | |
| --ks-background-color-primary-inverted-tbd: rgba(255, 255, 255, 0.8); | |
| --ks-background-color-primary-interactive-active: #707070; | |
| --ks-background-color-primary-interactive-hover: #5c5c5c; | |
| --ks-background-color-primary-interactive: #333333; | |
| --ks-background-color-interface-interactive-disabled: rgba(0, 0, 0, 0.1); | |
| --ks-background-color-interface-interactive: rgba(0, 0, 0, 0); | |
| --ks-background-color-interface: rgba(0, 0, 0, 0.1); | |
| --ks-background-color-default-inverted: rgba(0, 0, 0, 0.7); | |
| --ks-background-color-default: #ffffff; | |
| --ks-background-color-clear-inverted-interactive-active: rgba(51, 51, 51, 0.3); | |
| --ks-background-color-clear-inverted-interactive-hover: rgba(51, 51, 51, 0.2); | |
| --ks-background-color-clear-inverted-interactive: rgba(255, 255, 255, 0); | |
| --ks-background-color-clear-interactive-active: rgba(51, 51, 51, 0.2); | |
| --ks-background-color-clear-interactive-hover: rgba(51, 51, 51, 0.1); | |
| --ks-background-color-clear-interactive: rgba(255, 255, 255, 0); | |
| --ks-background-color-accent: rgba(51, 51, 51, 0.1); | |
| } | |
| :root { | |
| --ks-font-size-display-s: calc(var(--ks-font-size-display-s-base) * var(--ks-font-size-display-bp-factor, 1)); | |
| --ks-font-display-s: var(--ks-font-size-display-s) / var(--ks-line-height-display-s) var(--ks-font-family-display); | |
| --ks-font-size-display-m: calc(var(--ks-font-size-display-m-base) * var(--ks-font-size-display-bp-factor, 1)); | |
| --ks-font-display-m: var(--ks-font-size-display-m) / var(--ks-line-height-display-m) var(--ks-font-family-display); | |
| --ks-font-size-display-l: calc(var(--ks-font-size-display-l-base) * var(--ks-font-size-display-bp-factor, 1)); | |
| --ks-font-display-l: var(--ks-font-size-display-l) / var(--ks-line-height-display-l) var(--ks-font-family-display); | |
| --ks-font-size-display-xl: calc(var(--ks-font-size-display-xl-base) * var(--ks-font-size-display-bp-factor, 1)); | |
| --ks-font-display-xl: var(--ks-font-size-display-xl) / var(--ks-line-height-display-xl) var(--ks-font-family-display); | |
| --ks-font-size-display-xxl: calc(var(--ks-font-size-display-xxl-base) * var(--ks-font-size-display-bp-factor, 1)); | |
| --ks-font-display-xxl: var(--ks-font-size-display-xxl) / var(--ks-line-height-display-xxl) var(--ks-font-family-display); | |
| --ks-font-size-copy-s: calc(var(--ks-font-size-copy-s-base) * var(--ks-font-size-copy-bp-factor, 1)); | |
| --ks-font-copy-s: var(--ks-font-size-copy-s) / var(--ks-line-height-copy-s) var(--ks-font-family-copy); | |
| --ks-font-size-copy-m: calc(var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-bp-factor, 1)); | |
| --ks-font-copy-m: var(--ks-font-size-copy-m) / var(--ks-line-height-copy-m) var(--ks-font-family-copy); | |
| --ks-font-size-copy-l: calc(var(--ks-font-size-copy-l-base) * var(--ks-font-size-copy-bp-factor, 1)); | |
| --ks-font-copy-l: var(--ks-font-size-copy-l) / var(--ks-line-height-copy-l) var(--ks-font-family-copy); | |
| --ks-font-size-ui-xs: calc(var(--ks-font-size-ui-xs-base) * var(--ks-font-size-ui-bp-factor, 1)); | |
| --ks-font-ui-xs: var(--ks-font-size-ui-xs) / var(--ks-line-height-ui-xs) var(--ks-font-family-ui); | |
| --ks-font-size-ui-s: calc(var(--ks-font-size-ui-s-base) * var(--ks-font-size-ui-bp-factor, 1)); | |
| --ks-font-ui-s: var(--ks-font-size-ui-s) / var(--ks-line-height-ui-s) var(--ks-font-family-ui); | |
| --ks-font-size-ui-m: calc(var(--ks-font-size-ui-m-base) * var(--ks-font-size-ui-bp-factor, 1)); | |
| --ks-font-ui-m: var(--ks-font-size-ui-m) / var(--ks-line-height-ui-m) var(--ks-font-family-ui); | |
| --ks-font-size-ui-l: calc(var(--ks-font-size-ui-l-base) * var(--ks-font-size-ui-bp-factor, 1)); | |
| --ks-font-ui-l: var(--ks-font-size-ui-l) / var(--ks-line-height-ui-l) var(--ks-font-family-ui); | |
| --ks-font-size-mono-s: calc(var(--ks-font-size-mono-s-base) * var(--ks-font-size-mono-bp-factor, 1)); | |
| --ks-font-mono-s: var(--ks-font-size-mono-s) / var(--ks-line-height-mono-s) var(--ks-font-family-mono); | |
| --ks-font-size-mono-m: calc(var(--ks-font-size-mono-m-base) * var(--ks-font-size-mono-bp-factor, 1)); | |
| --ks-font-mono-m: var(--ks-font-size-mono-m) / var(--ks-line-height-mono-m) var(--ks-font-family-mono); | |
| --ks-font-size-mono-l: calc(var(--ks-font-size-mono-l-base) * var(--ks-font-size-mono-bp-factor, 1)); | |
| --ks-font-mono-l: var(--ks-font-size-mono-l) / var(--ks-line-height-mono-l) var(--ks-font-family-mono); | |
| }:root { | |
| --ks-spacing-xxs: calc(var(--ks-spacing-xxs-base) * var(--ks-spacing-xxs-bp-factor, 1)); | |
| --ks-spacing-xs: calc(var(--ks-spacing-xs-base) * var(--ks-spacing-xs-bp-factor, 1)); | |
| --ks-spacing-s: calc(var(--ks-spacing-s-base) * var(--ks-spacing-s-bp-factor, 1)); | |
| --ks-spacing-m: calc(var(--ks-spacing-m-base) * var(--ks-spacing-m-bp-factor, 1)); | |
| --ks-spacing-l: calc(var(--ks-spacing-l-base) * var(--ks-spacing-l-bp-factor, 1)); | |
| --ks-spacing-xl: calc(var(--ks-spacing-xl-base) * var(--ks-spacing-xl-bp-factor, 1)); | |
| --ks-spacing-xxl: calc(var(--ks-spacing-xxl-base) * var(--ks-spacing-xxl-bp-factor, 1)); | |
| } | |
| @media (min-width: 36em) { | |
| :root { | |
| --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-s); | |
| --ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-s); | |
| --ks-font-size-ui-bp-factor: var(--ks-font-size-ui-bp-factor-s); | |
| --ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-s); | |
| --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-s); | |
| --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-s); | |
| --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-s); | |
| --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-s); | |
| --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-s); | |
| --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-s); | |
| --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-s); | |
| } | |
| } | |
| @media (min-width: 48em) { | |
| :root { | |
| --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-m); | |
| --ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-m); | |
| --ks-font-size-ui-bp-factor: var(--ks-font-size-ui-bp-factor-m); | |
| --ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-m); | |
| --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-m); | |
| --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-m); | |
| --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-m); | |
| --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-m); | |
| --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-m); | |
| --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-m); | |
| --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-m); | |
| } | |
| } | |
| @media (min-width: 62em) { | |
| :root { | |
| --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-l); | |
| --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-l); | |
| --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-l); | |
| --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-l); | |
| --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-l); | |
| --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-l); | |
| --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-l); | |
| } | |
| } | |
| @media (min-width: 75em) { | |
| :root { | |
| --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-xl); | |
| --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-xl); | |
| --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-xl); | |
| --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-xl); | |
| --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-xl); | |
| --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-xl); | |
| --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-xl); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment