From b908136224d17355827a9f264451d49b839b8eed Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Thu, 19 Jan 2023 15:30:23 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(tokens)=20generate=20css=20utility=20?= =?UTF-8?q?classes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit These were the missing parts in order to use every design tokens of Cunningham. Including: spacing, font weight, size, family, and colors. In order to be really versatile and to allow users to define new design tokens I had to re-organize the way those tokens are sub divided in sub objects in cunningham.ts file. That's why sub division are created for theme.typ.sizes for instance. --- CHANGELOG.md | 1 + apps/demo/src/cunningham-tokens.css | 216 +++++++++++++++-- apps/demo/src/cunningham-tokens.ts | 2 +- .../react/src/components/Button/tokens.ts | 4 +- packages/react/src/cunningham-tokens.css | 218 ++++++++++++++++-- packages/react/src/cunningham-tokens.js | 1 + packages/react/src/cunningham-tokens.ts | 2 +- packages/react/src/docs/typo.stories.mdx | 135 +++++++++++ packages/react/src/index.scss | 2 +- .../src/bin/Generators/CssGenerator.spec.ts | 18 +- .../tokens/src/bin/Generators/CssGenerator.ts | 129 ++++++++++- .../src/bin/Generators/JsGenerator.spec.ts | 2 +- .../src/bin/Generators/TsGenerator.spec.ts | 2 +- packages/tokens/src/bin/TokensGenerator.ts | 12 +- .../tokens/src/bin/__mocks__/cunningham.ts | 14 ++ packages/tokens/src/bin/cunningham.ts | 30 +-- .../tokens/src/bin/tests/Cunningham.spec.ts | 45 +++- .../expected-default-cunningham-tokens.css | 16 ++ .../assets/expected-js-cunningham-tokens.css | 16 ++ packages/tokens/src/lib/cunningham-tokens.ts | 2 +- 20 files changed, 769 insertions(+), 98 deletions(-) create mode 100644 packages/react/src/cunningham-tokens.js create mode 100644 packages/react/src/docs/typo.stories.mdx create mode 100644 packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css create mode 100644 packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ff756f..cfc3725 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to ### Added +- Add utility classes - Add official design tokens - Add component's tokens handling - Setup Turborepo and package.json diff --git a/apps/demo/src/cunningham-tokens.css b/apps/demo/src/cunningham-tokens.css index 7edf9b5..4505500 100644 --- a/apps/demo/src/cunningham-tokens.css +++ b/apps/demo/src/cunningham-tokens.css @@ -69,32 +69,200 @@ --c--theme--colors--danger-700: #9B0000; --c--theme--colors--danger-800: #780000; --c--theme--colors--danger-900: #5C0000; - --c--theme--typo--h1: 1.75rem; - --c--theme--typo--h2: 1.375rem; - --c--theme--typo--h3: 1.125rem;; - --c--theme--typo--h4: 0.8125rem; - --c--theme--typo--h5: 0.625rem; - --c--theme--typo--h6: 0.5rem; - --c--theme--typo--l: 1rem; - --c--theme--typo--m: 0.8125rem; - --c--theme--typo--s: 0.6875rem; - --c--theme--typo--thin: 100; - --c--theme--typo--regular: 300; - --c--theme--typo--medium: 400; - --c--theme--typo--bold: 500; - --c--theme--typo--extrabold: 700; - --c--theme--typo--black: 900; - --c--theme--typo--font-base: Roboto; - --c--theme--typo--font-accent: Roboto; - --c--theme--spacings--xl: 64px; - --c--theme--spacings--l: 48px; - --c--theme--spacings--b: 24px; - --c--theme--spacings--s: 16px; - --c--theme--spacings--t: 8px; - --c--theme--spacings--st: 4px; + --c--theme--font--sizes--h1: 1.75rem; + --c--theme--font--sizes--h2: 1.375rem; + --c--theme--font--sizes--h3: 1.125rem;; + --c--theme--font--sizes--h4: 0.8125rem; + --c--theme--font--sizes--h5: 0.625rem; + --c--theme--font--sizes--h6: 0.5rem; + --c--theme--font--sizes--l: 1rem; + --c--theme--font--sizes--m: 0.8125rem; + --c--theme--font--sizes--s: 0.6875rem; + --c--theme--font--weights--thin: 100; + --c--theme--font--weights--regular: 300; + --c--theme--font--weights--medium: 400; + --c--theme--font--weights--bold: 500; + --c--theme--font--weights--extrabold: 700; + --c--theme--font--weights--black: 900; + --c--theme--font--families--base: Roboto; + --c--theme--font--families--accent: Roboto; + --c--theme--spacings--xl: 4rem; + --c--theme--spacings--l: 3rem; + --c--theme--spacings--b: 1.625rem; + --c--theme--spacings--s: 1rem; + --c--theme--spacings--t: 0.5rem; + --c--theme--spacings--st: 0.25rem; --c--theme--transitions--ease-in: cubic-bezier(0.5, 0, 0.75, 0); --c--theme--transitions--ease-out: cubic-bezier(0.25, 1, 0.5, 1); --c--theme--transitions--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); --c--theme--transitions--duration: 200ms; --c--components--button--border-radius: 30px; -} \ No newline at end of file +} .clr-primary-text { color: var(--c--theme--colors--primary-text); } +.clr-primary-100 { color: var(--c--theme--colors--primary-100); } +.clr-primary-200 { color: var(--c--theme--colors--primary-200); } +.clr-primary-300 { color: var(--c--theme--colors--primary-300); } +.clr-primary-400 { color: var(--c--theme--colors--primary-400); } +.clr-primary-500 { color: var(--c--theme--colors--primary-500); } +.clr-primary-600 { color: var(--c--theme--colors--primary-600); } +.clr-primary-700 { color: var(--c--theme--colors--primary-700); } +.clr-primary-800 { color: var(--c--theme--colors--primary-800); } +.clr-primary-900 { color: var(--c--theme--colors--primary-900); } +.clr-secondary-text { color: var(--c--theme--colors--secondary-text); } +.clr-secondary-100 { color: var(--c--theme--colors--secondary-100); } +.clr-secondary-200 { color: var(--c--theme--colors--secondary-200); } +.clr-secondary-300 { color: var(--c--theme--colors--secondary-300); } +.clr-secondary-400 { color: var(--c--theme--colors--secondary-400); } +.clr-secondary-500 { color: var(--c--theme--colors--secondary-500); } +.clr-secondary-600 { color: var(--c--theme--colors--secondary-600); } +.clr-secondary-700 { color: var(--c--theme--colors--secondary-700); } +.clr-secondary-800 { color: var(--c--theme--colors--secondary-800); } +.clr-secondary-900 { color: var(--c--theme--colors--secondary-900); } +.clr-greyscale-000 { color: var(--c--theme--colors--greyscale-000); } +.clr-greyscale-100 { color: var(--c--theme--colors--greyscale-100); } +.clr-greyscale-200 { color: var(--c--theme--colors--greyscale-200); } +.clr-greyscale-300 { color: var(--c--theme--colors--greyscale-300); } +.clr-greyscale-400 { color: var(--c--theme--colors--greyscale-400); } +.clr-greyscale-500 { color: var(--c--theme--colors--greyscale-500); } +.clr-greyscale-600 { color: var(--c--theme--colors--greyscale-600); } +.clr-greyscale-700 { color: var(--c--theme--colors--greyscale-700); } +.clr-greyscale-800 { color: var(--c--theme--colors--greyscale-800); } +.clr-greyscale-900 { color: var(--c--theme--colors--greyscale-900); } +.clr-success-text { color: var(--c--theme--colors--success-text); } +.clr-success-100 { color: var(--c--theme--colors--success-100); } +.clr-success-200 { color: var(--c--theme--colors--success-200); } +.clr-success-300 { color: var(--c--theme--colors--success-300); } +.clr-success-400 { color: var(--c--theme--colors--success-400); } +.clr-success-500 { color: var(--c--theme--colors--success-500); } +.clr-success-600 { color: var(--c--theme--colors--success-600); } +.clr-success-700 { color: var(--c--theme--colors--success-700); } +.clr-success-800 { color: var(--c--theme--colors--success-800); } +.clr-success-900 { color: var(--c--theme--colors--success-900); } +.clr-info-text { color: var(--c--theme--colors--info-text); } +.clr-info-100 { color: var(--c--theme--colors--info-100); } +.clr-info-200 { color: var(--c--theme--colors--info-200); } +.clr-info-300 { color: var(--c--theme--colors--info-300); } +.clr-info-400 { color: var(--c--theme--colors--info-400); } +.clr-info-500 { color: var(--c--theme--colors--info-500); } +.clr-info-600 { color: var(--c--theme--colors--info-600); } +.clr-info-700 { color: var(--c--theme--colors--info-700); } +.clr-info-800 { color: var(--c--theme--colors--info-800); } +.clr-info-900 { color: var(--c--theme--colors--info-900); } +.clr-warning-text { color: var(--c--theme--colors--warning-text); } +.clr-warning-100 { color: var(--c--theme--colors--warning-100); } +.clr-warning-200 { color: var(--c--theme--colors--warning-200); } +.clr-warning-300 { color: var(--c--theme--colors--warning-300); } +.clr-warning-400 { color: var(--c--theme--colors--warning-400); } +.clr-warning-500 { color: var(--c--theme--colors--warning-500); } +.clr-warning-600 { color: var(--c--theme--colors--warning-600); } +.clr-warning-700 { color: var(--c--theme--colors--warning-700); } +.clr-warning-800 { color: var(--c--theme--colors--warning-800); } +.clr-warning-900 { color: var(--c--theme--colors--warning-900); } +.clr-danger-text { color: var(--c--theme--colors--danger-text); } +.clr-danger-100 { color: var(--c--theme--colors--danger-100); } +.clr-danger-200 { color: var(--c--theme--colors--danger-200); } +.clr-danger-300 { color: var(--c--theme--colors--danger-300); } +.clr-danger-400 { color: var(--c--theme--colors--danger-400); } +.clr-danger-500 { color: var(--c--theme--colors--danger-500); } +.clr-danger-600 { color: var(--c--theme--colors--danger-600); } +.clr-danger-700 { color: var(--c--theme--colors--danger-700); } +.clr-danger-800 { color: var(--c--theme--colors--danger-800); } +.clr-danger-900 { color: var(--c--theme--colors--danger-900); } +.bg-primary-text { background-color: var(--c--theme--colors--primary-text); } +.bg-primary-100 { background-color: var(--c--theme--colors--primary-100); } +.bg-primary-200 { background-color: var(--c--theme--colors--primary-200); } +.bg-primary-300 { background-color: var(--c--theme--colors--primary-300); } +.bg-primary-400 { background-color: var(--c--theme--colors--primary-400); } +.bg-primary-500 { background-color: var(--c--theme--colors--primary-500); } +.bg-primary-600 { background-color: var(--c--theme--colors--primary-600); } +.bg-primary-700 { background-color: var(--c--theme--colors--primary-700); } +.bg-primary-800 { background-color: var(--c--theme--colors--primary-800); } +.bg-primary-900 { background-color: var(--c--theme--colors--primary-900); } +.bg-secondary-text { background-color: var(--c--theme--colors--secondary-text); } +.bg-secondary-100 { background-color: var(--c--theme--colors--secondary-100); } +.bg-secondary-200 { background-color: var(--c--theme--colors--secondary-200); } +.bg-secondary-300 { background-color: var(--c--theme--colors--secondary-300); } +.bg-secondary-400 { background-color: var(--c--theme--colors--secondary-400); } +.bg-secondary-500 { background-color: var(--c--theme--colors--secondary-500); } +.bg-secondary-600 { background-color: var(--c--theme--colors--secondary-600); } +.bg-secondary-700 { background-color: var(--c--theme--colors--secondary-700); } +.bg-secondary-800 { background-color: var(--c--theme--colors--secondary-800); } +.bg-secondary-900 { background-color: var(--c--theme--colors--secondary-900); } +.bg-greyscale-000 { background-color: var(--c--theme--colors--greyscale-000); } +.bg-greyscale-100 { background-color: var(--c--theme--colors--greyscale-100); } +.bg-greyscale-200 { background-color: var(--c--theme--colors--greyscale-200); } +.bg-greyscale-300 { background-color: var(--c--theme--colors--greyscale-300); } +.bg-greyscale-400 { background-color: var(--c--theme--colors--greyscale-400); } +.bg-greyscale-500 { background-color: var(--c--theme--colors--greyscale-500); } +.bg-greyscale-600 { background-color: var(--c--theme--colors--greyscale-600); } +.bg-greyscale-700 { background-color: var(--c--theme--colors--greyscale-700); } +.bg-greyscale-800 { background-color: var(--c--theme--colors--greyscale-800); } +.bg-greyscale-900 { background-color: var(--c--theme--colors--greyscale-900); } +.bg-success-text { background-color: var(--c--theme--colors--success-text); } +.bg-success-100 { background-color: var(--c--theme--colors--success-100); } +.bg-success-200 { background-color: var(--c--theme--colors--success-200); } +.bg-success-300 { background-color: var(--c--theme--colors--success-300); } +.bg-success-400 { background-color: var(--c--theme--colors--success-400); } +.bg-success-500 { background-color: var(--c--theme--colors--success-500); } +.bg-success-600 { background-color: var(--c--theme--colors--success-600); } +.bg-success-700 { background-color: var(--c--theme--colors--success-700); } +.bg-success-800 { background-color: var(--c--theme--colors--success-800); } +.bg-success-900 { background-color: var(--c--theme--colors--success-900); } +.bg-info-text { background-color: var(--c--theme--colors--info-text); } +.bg-info-100 { background-color: var(--c--theme--colors--info-100); } +.bg-info-200 { background-color: var(--c--theme--colors--info-200); } +.bg-info-300 { background-color: var(--c--theme--colors--info-300); } +.bg-info-400 { background-color: var(--c--theme--colors--info-400); } +.bg-info-500 { background-color: var(--c--theme--colors--info-500); } +.bg-info-600 { background-color: var(--c--theme--colors--info-600); } +.bg-info-700 { background-color: var(--c--theme--colors--info-700); } +.bg-info-800 { background-color: var(--c--theme--colors--info-800); } +.bg-info-900 { background-color: var(--c--theme--colors--info-900); } +.bg-warning-text { background-color: var(--c--theme--colors--warning-text); } +.bg-warning-100 { background-color: var(--c--theme--colors--warning-100); } +.bg-warning-200 { background-color: var(--c--theme--colors--warning-200); } +.bg-warning-300 { background-color: var(--c--theme--colors--warning-300); } +.bg-warning-400 { background-color: var(--c--theme--colors--warning-400); } +.bg-warning-500 { background-color: var(--c--theme--colors--warning-500); } +.bg-warning-600 { background-color: var(--c--theme--colors--warning-600); } +.bg-warning-700 { background-color: var(--c--theme--colors--warning-700); } +.bg-warning-800 { background-color: var(--c--theme--colors--warning-800); } +.bg-warning-900 { background-color: var(--c--theme--colors--warning-900); } +.bg-danger-text { background-color: var(--c--theme--colors--danger-text); } +.bg-danger-100 { background-color: var(--c--theme--colors--danger-100); } +.bg-danger-200 { background-color: var(--c--theme--colors--danger-200); } +.bg-danger-300 { background-color: var(--c--theme--colors--danger-300); } +.bg-danger-400 { background-color: var(--c--theme--colors--danger-400); } +.bg-danger-500 { background-color: var(--c--theme--colors--danger-500); } +.bg-danger-600 { background-color: var(--c--theme--colors--danger-600); } +.bg-danger-700 { background-color: var(--c--theme--colors--danger-700); } +.bg-danger-800 { background-color: var(--c--theme--colors--danger-800); } +.bg-danger-900 { background-color: var(--c--theme--colors--danger-900); } +.fw-thin { font-weight: var(--c--theme--font--weights--thin); } +.fw-regular { font-weight: var(--c--theme--font--weights--regular); } +.fw-medium { font-weight: var(--c--theme--font--weights--medium); } +.fw-bold { font-weight: var(--c--theme--font--weights--bold); } +.fw-extrabold { font-weight: var(--c--theme--font--weights--extrabold); } +.fw-black { font-weight: var(--c--theme--font--weights--black); } +.fs-h1 { font-size: var(--c--theme--font--sizes--h1); } +.fs-h2 { font-size: var(--c--theme--font--sizes--h2); } +.fs-h3 { font-size: var(--c--theme--font--sizes--h3); } +.fs-h4 { font-size: var(--c--theme--font--sizes--h4); } +.fs-h5 { font-size: var(--c--theme--font--sizes--h5); } +.fs-h6 { font-size: var(--c--theme--font--sizes--h6); } +.fs-l { font-size: var(--c--theme--font--sizes--l); } +.fs-m { font-size: var(--c--theme--font--sizes--m); } +.fs-s { font-size: var(--c--theme--font--sizes--s); } +.f-base { font-family: var(--c--theme--font--families--base); } +.f-accent { font-family: var(--c--theme--font--families--accent); } +.m-xl { margin: var(--c--theme--spacings--xl); }.mb-xl { margin-bottom: var(--c--theme--spacings--xl); }.mt-xl { margin-top: var(--c--theme--spacings--xl); }.ml-xl { margin-left: var(--c--theme--spacings--xl); }.mr-xl { margin-right: var(--c--theme--spacings--xl); } +.m-l { margin: var(--c--theme--spacings--l); }.mb-l { margin-bottom: var(--c--theme--spacings--l); }.mt-l { margin-top: var(--c--theme--spacings--l); }.ml-l { margin-left: var(--c--theme--spacings--l); }.mr-l { margin-right: var(--c--theme--spacings--l); } +.m-b { margin: var(--c--theme--spacings--b); }.mb-b { margin-bottom: var(--c--theme--spacings--b); }.mt-b { margin-top: var(--c--theme--spacings--b); }.ml-b { margin-left: var(--c--theme--spacings--b); }.mr-b { margin-right: var(--c--theme--spacings--b); } +.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); } +.m-t { margin: var(--c--theme--spacings--t); }.mb-t { margin-bottom: var(--c--theme--spacings--t); }.mt-t { margin-top: var(--c--theme--spacings--t); }.ml-t { margin-left: var(--c--theme--spacings--t); }.mr-t { margin-right: var(--c--theme--spacings--t); } +.m-st { margin: var(--c--theme--spacings--st); }.mb-st { margin-bottom: var(--c--theme--spacings--st); }.mt-st { margin-top: var(--c--theme--spacings--st); }.ml-st { margin-left: var(--c--theme--spacings--st); }.mr-st { margin-right: var(--c--theme--spacings--st); } +.p-xl { padding: var(--c--theme--spacings--xl); }.pb-xl { padding-bottom: var(--c--theme--spacings--xl); }.pt-xl { padding-top: var(--c--theme--spacings--xl); }.pl-xl { padding-left: var(--c--theme--spacings--xl); }.pr-xl { padding-right: var(--c--theme--spacings--xl); } +.p-l { padding: var(--c--theme--spacings--l); }.pb-l { padding-bottom: var(--c--theme--spacings--l); }.pt-l { padding-top: var(--c--theme--spacings--l); }.pl-l { padding-left: var(--c--theme--spacings--l); }.pr-l { padding-right: var(--c--theme--spacings--l); } +.p-b { padding: var(--c--theme--spacings--b); }.pb-b { padding-bottom: var(--c--theme--spacings--b); }.pt-b { padding-top: var(--c--theme--spacings--b); }.pl-b { padding-left: var(--c--theme--spacings--b); }.pr-b { padding-right: var(--c--theme--spacings--b); } +.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); } +.p-t { padding: var(--c--theme--spacings--t); }.pb-t { padding-bottom: var(--c--theme--spacings--t); }.pt-t { padding-top: var(--c--theme--spacings--t); }.pl-t { padding-left: var(--c--theme--spacings--t); }.pr-t { padding-right: var(--c--theme--spacings--t); } +.p-st { padding: var(--c--theme--spacings--st); }.pb-st { padding-bottom: var(--c--theme--spacings--st); }.pt-st { padding-top: var(--c--theme--spacings--st); }.pl-st { padding-left: var(--c--theme--spacings--st); }.pr-st { padding-right: var(--c--theme--spacings--st); } \ No newline at end of file diff --git a/apps/demo/src/cunningham-tokens.ts b/apps/demo/src/cunningham-tokens.ts index 855533a..05a6141 100644 --- a/apps/demo/src/cunningham-tokens.ts +++ b/apps/demo/src/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"purple","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"typo":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem;","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem","thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900,"font-base":"Roboto","font-accent":"Roboto"},"spacings":{"xl":"64px","l":"48px","b":"24px","s":"16px","t":"8px","st":"4px"},"transitions":{"ease-in":"cubic-bezier(0.5, 0, 0.75, 0)","ease-out":"cubic-bezier(0.25, 1, 0.5, 1)","ease-in-out":"cubic-bezier(0.76, 0, 0.24, 1)","duration":"200ms"}},"components":{"button":{"border-radius":"30px"}}}; \ No newline at end of file +export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"purple","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem;","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900},"families":{"base":"Roboto","accent":"Roboto"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.5, 0, 0.75, 0)","ease-out":"cubic-bezier(0.25, 1, 0.5, 1)","ease-in-out":"cubic-bezier(0.76, 0, 0.24, 1)","duration":"200ms"}},"components":{"button":{"border-radius":"30px"}}}; \ No newline at end of file diff --git a/packages/react/src/components/Button/tokens.ts b/packages/react/src/components/Button/tokens.ts index cc1eadb..6c37c03 100644 --- a/packages/react/src/components/Button/tokens.ts +++ b/packages/react/src/components/Button/tokens.ts @@ -4,7 +4,7 @@ export const tokens = (defaults: DefaultTokens) => { return { "border-radius": "2px", height: "48px", - "font-size": defaults.theme.typo.l, - "font-weight": defaults.theme.typo.medium, + "font-size": defaults.theme.font.sizes.l, + "font-weight": defaults.theme.font.weights.medium, }; }; diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css index e3e15be..a71cc69 100644 --- a/packages/react/src/cunningham-tokens.css +++ b/packages/react/src/cunningham-tokens.css @@ -1,4 +1,4 @@ -html { +:root { --c--theme--colors--primary-text: #FFFFFF; --c--theme--colors--primary-100: #EBF2FC; --c--theme--colors--primary-200: #8CB5EA; @@ -69,29 +69,29 @@ html { --c--theme--colors--danger-700: #9B0000; --c--theme--colors--danger-800: #780000; --c--theme--colors--danger-900: #5C0000; - --c--theme--typo--h1: 1.75rem; - --c--theme--typo--h2: 1.375rem; - --c--theme--typo--h3: 1.125rem;; - --c--theme--typo--h4: 0.8125rem; - --c--theme--typo--h5: 0.625rem; - --c--theme--typo--h6: 0.5rem; - --c--theme--typo--l: 1rem; - --c--theme--typo--m: 0.8125rem; - --c--theme--typo--s: 0.6875rem; - --c--theme--typo--thin: 100; - --c--theme--typo--regular: 300; - --c--theme--typo--medium: 400; - --c--theme--typo--bold: 500; - --c--theme--typo--extrabold: 700; - --c--theme--typo--black: 900; - --c--theme--typo--font-base: Roboto; - --c--theme--typo--font-accent: Roboto; - --c--theme--spacings--xl: 64px; - --c--theme--spacings--l: 48px; - --c--theme--spacings--b: 24px; - --c--theme--spacings--s: 16px; - --c--theme--spacings--t: 8px; - --c--theme--spacings--st: 4px; + --c--theme--font--sizes--h1: 1.75rem; + --c--theme--font--sizes--h2: 1.375rem; + --c--theme--font--sizes--h3: 1.125rem;; + --c--theme--font--sizes--h4: 0.8125rem; + --c--theme--font--sizes--h5: 0.625rem; + --c--theme--font--sizes--h6: 0.5rem; + --c--theme--font--sizes--l: 1rem; + --c--theme--font--sizes--m: 0.8125rem; + --c--theme--font--sizes--s: 0.6875rem; + --c--theme--font--weights--thin: 100; + --c--theme--font--weights--regular: 300; + --c--theme--font--weights--medium: 400; + --c--theme--font--weights--bold: 500; + --c--theme--font--weights--extrabold: 700; + --c--theme--font--weights--black: 900; + --c--theme--font--families--base: Roboto; + --c--theme--font--families--accent: Roboto; + --c--theme--spacings--xl: 4rem; + --c--theme--spacings--l: 3rem; + --c--theme--spacings--b: 1.625rem; + --c--theme--spacings--s: 1rem; + --c--theme--spacings--t: 0.5rem; + --c--theme--spacings--st: 0.25rem; --c--theme--transitions--ease-in: cubic-bezier(0.5, 0, 0.75, 0); --c--theme--transitions--ease-out: cubic-bezier(0.25, 1, 0.5, 1); --c--theme--transitions--ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); @@ -100,4 +100,172 @@ html { --c--components--button--height: 48px; --c--components--button--font-size: 1rem; --c--components--button--font-weight: 400; -} \ No newline at end of file +} .clr-primary-text { color: var(--c--theme--colors--primary-text); } +.clr-primary-100 { color: var(--c--theme--colors--primary-100); } +.clr-primary-200 { color: var(--c--theme--colors--primary-200); } +.clr-primary-300 { color: var(--c--theme--colors--primary-300); } +.clr-primary-400 { color: var(--c--theme--colors--primary-400); } +.clr-primary-500 { color: var(--c--theme--colors--primary-500); } +.clr-primary-600 { color: var(--c--theme--colors--primary-600); } +.clr-primary-700 { color: var(--c--theme--colors--primary-700); } +.clr-primary-800 { color: var(--c--theme--colors--primary-800); } +.clr-primary-900 { color: var(--c--theme--colors--primary-900); } +.clr-secondary-text { color: var(--c--theme--colors--secondary-text); } +.clr-secondary-100 { color: var(--c--theme--colors--secondary-100); } +.clr-secondary-200 { color: var(--c--theme--colors--secondary-200); } +.clr-secondary-300 { color: var(--c--theme--colors--secondary-300); } +.clr-secondary-400 { color: var(--c--theme--colors--secondary-400); } +.clr-secondary-500 { color: var(--c--theme--colors--secondary-500); } +.clr-secondary-600 { color: var(--c--theme--colors--secondary-600); } +.clr-secondary-700 { color: var(--c--theme--colors--secondary-700); } +.clr-secondary-800 { color: var(--c--theme--colors--secondary-800); } +.clr-secondary-900 { color: var(--c--theme--colors--secondary-900); } +.clr-greyscale-000 { color: var(--c--theme--colors--greyscale-000); } +.clr-greyscale-100 { color: var(--c--theme--colors--greyscale-100); } +.clr-greyscale-200 { color: var(--c--theme--colors--greyscale-200); } +.clr-greyscale-300 { color: var(--c--theme--colors--greyscale-300); } +.clr-greyscale-400 { color: var(--c--theme--colors--greyscale-400); } +.clr-greyscale-500 { color: var(--c--theme--colors--greyscale-500); } +.clr-greyscale-600 { color: var(--c--theme--colors--greyscale-600); } +.clr-greyscale-700 { color: var(--c--theme--colors--greyscale-700); } +.clr-greyscale-800 { color: var(--c--theme--colors--greyscale-800); } +.clr-greyscale-900 { color: var(--c--theme--colors--greyscale-900); } +.clr-success-text { color: var(--c--theme--colors--success-text); } +.clr-success-100 { color: var(--c--theme--colors--success-100); } +.clr-success-200 { color: var(--c--theme--colors--success-200); } +.clr-success-300 { color: var(--c--theme--colors--success-300); } +.clr-success-400 { color: var(--c--theme--colors--success-400); } +.clr-success-500 { color: var(--c--theme--colors--success-500); } +.clr-success-600 { color: var(--c--theme--colors--success-600); } +.clr-success-700 { color: var(--c--theme--colors--success-700); } +.clr-success-800 { color: var(--c--theme--colors--success-800); } +.clr-success-900 { color: var(--c--theme--colors--success-900); } +.clr-info-text { color: var(--c--theme--colors--info-text); } +.clr-info-100 { color: var(--c--theme--colors--info-100); } +.clr-info-200 { color: var(--c--theme--colors--info-200); } +.clr-info-300 { color: var(--c--theme--colors--info-300); } +.clr-info-400 { color: var(--c--theme--colors--info-400); } +.clr-info-500 { color: var(--c--theme--colors--info-500); } +.clr-info-600 { color: var(--c--theme--colors--info-600); } +.clr-info-700 { color: var(--c--theme--colors--info-700); } +.clr-info-800 { color: var(--c--theme--colors--info-800); } +.clr-info-900 { color: var(--c--theme--colors--info-900); } +.clr-warning-text { color: var(--c--theme--colors--warning-text); } +.clr-warning-100 { color: var(--c--theme--colors--warning-100); } +.clr-warning-200 { color: var(--c--theme--colors--warning-200); } +.clr-warning-300 { color: var(--c--theme--colors--warning-300); } +.clr-warning-400 { color: var(--c--theme--colors--warning-400); } +.clr-warning-500 { color: var(--c--theme--colors--warning-500); } +.clr-warning-600 { color: var(--c--theme--colors--warning-600); } +.clr-warning-700 { color: var(--c--theme--colors--warning-700); } +.clr-warning-800 { color: var(--c--theme--colors--warning-800); } +.clr-warning-900 { color: var(--c--theme--colors--warning-900); } +.clr-danger-text { color: var(--c--theme--colors--danger-text); } +.clr-danger-100 { color: var(--c--theme--colors--danger-100); } +.clr-danger-200 { color: var(--c--theme--colors--danger-200); } +.clr-danger-300 { color: var(--c--theme--colors--danger-300); } +.clr-danger-400 { color: var(--c--theme--colors--danger-400); } +.clr-danger-500 { color: var(--c--theme--colors--danger-500); } +.clr-danger-600 { color: var(--c--theme--colors--danger-600); } +.clr-danger-700 { color: var(--c--theme--colors--danger-700); } +.clr-danger-800 { color: var(--c--theme--colors--danger-800); } +.clr-danger-900 { color: var(--c--theme--colors--danger-900); } +.bg-primary-text { background-color: var(--c--theme--colors--primary-text); } +.bg-primary-100 { background-color: var(--c--theme--colors--primary-100); } +.bg-primary-200 { background-color: var(--c--theme--colors--primary-200); } +.bg-primary-300 { background-color: var(--c--theme--colors--primary-300); } +.bg-primary-400 { background-color: var(--c--theme--colors--primary-400); } +.bg-primary-500 { background-color: var(--c--theme--colors--primary-500); } +.bg-primary-600 { background-color: var(--c--theme--colors--primary-600); } +.bg-primary-700 { background-color: var(--c--theme--colors--primary-700); } +.bg-primary-800 { background-color: var(--c--theme--colors--primary-800); } +.bg-primary-900 { background-color: var(--c--theme--colors--primary-900); } +.bg-secondary-text { background-color: var(--c--theme--colors--secondary-text); } +.bg-secondary-100 { background-color: var(--c--theme--colors--secondary-100); } +.bg-secondary-200 { background-color: var(--c--theme--colors--secondary-200); } +.bg-secondary-300 { background-color: var(--c--theme--colors--secondary-300); } +.bg-secondary-400 { background-color: var(--c--theme--colors--secondary-400); } +.bg-secondary-500 { background-color: var(--c--theme--colors--secondary-500); } +.bg-secondary-600 { background-color: var(--c--theme--colors--secondary-600); } +.bg-secondary-700 { background-color: var(--c--theme--colors--secondary-700); } +.bg-secondary-800 { background-color: var(--c--theme--colors--secondary-800); } +.bg-secondary-900 { background-color: var(--c--theme--colors--secondary-900); } +.bg-greyscale-000 { background-color: var(--c--theme--colors--greyscale-000); } +.bg-greyscale-100 { background-color: var(--c--theme--colors--greyscale-100); } +.bg-greyscale-200 { background-color: var(--c--theme--colors--greyscale-200); } +.bg-greyscale-300 { background-color: var(--c--theme--colors--greyscale-300); } +.bg-greyscale-400 { background-color: var(--c--theme--colors--greyscale-400); } +.bg-greyscale-500 { background-color: var(--c--theme--colors--greyscale-500); } +.bg-greyscale-600 { background-color: var(--c--theme--colors--greyscale-600); } +.bg-greyscale-700 { background-color: var(--c--theme--colors--greyscale-700); } +.bg-greyscale-800 { background-color: var(--c--theme--colors--greyscale-800); } +.bg-greyscale-900 { background-color: var(--c--theme--colors--greyscale-900); } +.bg-success-text { background-color: var(--c--theme--colors--success-text); } +.bg-success-100 { background-color: var(--c--theme--colors--success-100); } +.bg-success-200 { background-color: var(--c--theme--colors--success-200); } +.bg-success-300 { background-color: var(--c--theme--colors--success-300); } +.bg-success-400 { background-color: var(--c--theme--colors--success-400); } +.bg-success-500 { background-color: var(--c--theme--colors--success-500); } +.bg-success-600 { background-color: var(--c--theme--colors--success-600); } +.bg-success-700 { background-color: var(--c--theme--colors--success-700); } +.bg-success-800 { background-color: var(--c--theme--colors--success-800); } +.bg-success-900 { background-color: var(--c--theme--colors--success-900); } +.bg-info-text { background-color: var(--c--theme--colors--info-text); } +.bg-info-100 { background-color: var(--c--theme--colors--info-100); } +.bg-info-200 { background-color: var(--c--theme--colors--info-200); } +.bg-info-300 { background-color: var(--c--theme--colors--info-300); } +.bg-info-400 { background-color: var(--c--theme--colors--info-400); } +.bg-info-500 { background-color: var(--c--theme--colors--info-500); } +.bg-info-600 { background-color: var(--c--theme--colors--info-600); } +.bg-info-700 { background-color: var(--c--theme--colors--info-700); } +.bg-info-800 { background-color: var(--c--theme--colors--info-800); } +.bg-info-900 { background-color: var(--c--theme--colors--info-900); } +.bg-warning-text { background-color: var(--c--theme--colors--warning-text); } +.bg-warning-100 { background-color: var(--c--theme--colors--warning-100); } +.bg-warning-200 { background-color: var(--c--theme--colors--warning-200); } +.bg-warning-300 { background-color: var(--c--theme--colors--warning-300); } +.bg-warning-400 { background-color: var(--c--theme--colors--warning-400); } +.bg-warning-500 { background-color: var(--c--theme--colors--warning-500); } +.bg-warning-600 { background-color: var(--c--theme--colors--warning-600); } +.bg-warning-700 { background-color: var(--c--theme--colors--warning-700); } +.bg-warning-800 { background-color: var(--c--theme--colors--warning-800); } +.bg-warning-900 { background-color: var(--c--theme--colors--warning-900); } +.bg-danger-text { background-color: var(--c--theme--colors--danger-text); } +.bg-danger-100 { background-color: var(--c--theme--colors--danger-100); } +.bg-danger-200 { background-color: var(--c--theme--colors--danger-200); } +.bg-danger-300 { background-color: var(--c--theme--colors--danger-300); } +.bg-danger-400 { background-color: var(--c--theme--colors--danger-400); } +.bg-danger-500 { background-color: var(--c--theme--colors--danger-500); } +.bg-danger-600 { background-color: var(--c--theme--colors--danger-600); } +.bg-danger-700 { background-color: var(--c--theme--colors--danger-700); } +.bg-danger-800 { background-color: var(--c--theme--colors--danger-800); } +.bg-danger-900 { background-color: var(--c--theme--colors--danger-900); } +.fw-thin { font-weight: var(--c--theme--font--weights--thin); } +.fw-regular { font-weight: var(--c--theme--font--weights--regular); } +.fw-medium { font-weight: var(--c--theme--font--weights--medium); } +.fw-bold { font-weight: var(--c--theme--font--weights--bold); } +.fw-extrabold { font-weight: var(--c--theme--font--weights--extrabold); } +.fw-black { font-weight: var(--c--theme--font--weights--black); } +.fs-h1 { font-size: var(--c--theme--font--sizes--h1); } +.fs-h2 { font-size: var(--c--theme--font--sizes--h2); } +.fs-h3 { font-size: var(--c--theme--font--sizes--h3); } +.fs-h4 { font-size: var(--c--theme--font--sizes--h4); } +.fs-h5 { font-size: var(--c--theme--font--sizes--h5); } +.fs-h6 { font-size: var(--c--theme--font--sizes--h6); } +.fs-l { font-size: var(--c--theme--font--sizes--l); } +.fs-m { font-size: var(--c--theme--font--sizes--m); } +.fs-s { font-size: var(--c--theme--font--sizes--s); } +.f-base { font-family: var(--c--theme--font--families--base); } +.f-accent { font-family: var(--c--theme--font--families--accent); } +.m-xl { margin: var(--c--theme--spacings--xl); }.mb-xl { margin-bottom: var(--c--theme--spacings--xl); }.mt-xl { margin-top: var(--c--theme--spacings--xl); }.ml-xl { margin-left: var(--c--theme--spacings--xl); }.mr-xl { margin-right: var(--c--theme--spacings--xl); } +.m-l { margin: var(--c--theme--spacings--l); }.mb-l { margin-bottom: var(--c--theme--spacings--l); }.mt-l { margin-top: var(--c--theme--spacings--l); }.ml-l { margin-left: var(--c--theme--spacings--l); }.mr-l { margin-right: var(--c--theme--spacings--l); } +.m-b { margin: var(--c--theme--spacings--b); }.mb-b { margin-bottom: var(--c--theme--spacings--b); }.mt-b { margin-top: var(--c--theme--spacings--b); }.ml-b { margin-left: var(--c--theme--spacings--b); }.mr-b { margin-right: var(--c--theme--spacings--b); } +.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); } +.m-t { margin: var(--c--theme--spacings--t); }.mb-t { margin-bottom: var(--c--theme--spacings--t); }.mt-t { margin-top: var(--c--theme--spacings--t); }.ml-t { margin-left: var(--c--theme--spacings--t); }.mr-t { margin-right: var(--c--theme--spacings--t); } +.m-st { margin: var(--c--theme--spacings--st); }.mb-st { margin-bottom: var(--c--theme--spacings--st); }.mt-st { margin-top: var(--c--theme--spacings--st); }.ml-st { margin-left: var(--c--theme--spacings--st); }.mr-st { margin-right: var(--c--theme--spacings--st); } +.p-xl { padding: var(--c--theme--spacings--xl); }.pb-xl { padding-bottom: var(--c--theme--spacings--xl); }.pt-xl { padding-top: var(--c--theme--spacings--xl); }.pl-xl { padding-left: var(--c--theme--spacings--xl); }.pr-xl { padding-right: var(--c--theme--spacings--xl); } +.p-l { padding: var(--c--theme--spacings--l); }.pb-l { padding-bottom: var(--c--theme--spacings--l); }.pt-l { padding-top: var(--c--theme--spacings--l); }.pl-l { padding-left: var(--c--theme--spacings--l); }.pr-l { padding-right: var(--c--theme--spacings--l); } +.p-b { padding: var(--c--theme--spacings--b); }.pb-b { padding-bottom: var(--c--theme--spacings--b); }.pt-b { padding-top: var(--c--theme--spacings--b); }.pl-b { padding-left: var(--c--theme--spacings--b); }.pr-b { padding-right: var(--c--theme--spacings--b); } +.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); } +.p-t { padding: var(--c--theme--spacings--t); }.pb-t { padding-bottom: var(--c--theme--spacings--t); }.pt-t { padding-top: var(--c--theme--spacings--t); }.pl-t { padding-left: var(--c--theme--spacings--t); }.pr-t { padding-right: var(--c--theme--spacings--t); } +.p-st { padding: var(--c--theme--spacings--st); }.pb-st { padding-bottom: var(--c--theme--spacings--st); }.pt-st { padding-top: var(--c--theme--spacings--st); }.pl-st { padding-left: var(--c--theme--spacings--st); }.pr-st { padding-right: var(--c--theme--spacings--st); } \ No newline at end of file diff --git a/packages/react/src/cunningham-tokens.js b/packages/react/src/cunningham-tokens.js new file mode 100644 index 0000000..1e2d2a4 --- /dev/null +++ b/packages/react/src/cunningham-tokens.js @@ -0,0 +1 @@ +export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem;","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900},"families":{"base":"Roboto","accent":"Roboto"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.5, 0, 0.75, 0)","ease-out":"cubic-bezier(0.25, 1, 0.5, 1)","ease-in-out":"cubic-bezier(0.76, 0, 0.24, 1)","duration":"200ms"}},"components":{"button":{"border-radius":"2px","height":"48px","font-size":"1rem","font-weight":400}}}; \ No newline at end of file diff --git a/packages/react/src/cunningham-tokens.ts b/packages/react/src/cunningham-tokens.ts index 54178e4..1e2d2a4 100644 --- a/packages/react/src/cunningham-tokens.ts +++ b/packages/react/src/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"typo":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem;","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem","thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900,"font-base":"Roboto","font-accent":"Roboto"},"spacings":{"xl":"64px","l":"48px","b":"24px","s":"16px","t":"8px","st":"4px"},"transitions":{"ease-in":"cubic-bezier(0.5, 0, 0.75, 0)","ease-out":"cubic-bezier(0.25, 1, 0.5, 1)","ease-in-out":"cubic-bezier(0.76, 0, 0.24, 1)","duration":"200ms"}},"components":{"button":{"border-radius":"2px","height":"48px","font-size":"1rem","font-weight":400}}}; \ No newline at end of file +export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem;","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900},"families":{"base":"Roboto","accent":"Roboto"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.5, 0, 0.75, 0)","ease-out":"cubic-bezier(0.25, 1, 0.5, 1)","ease-in-out":"cubic-bezier(0.76, 0, 0.24, 1)","duration":"200ms"}},"components":{"button":{"border-radius":"2px","height":"48px","font-size":"1rem","font-weight":400}}}; \ No newline at end of file diff --git a/packages/react/src/docs/typo.stories.mdx b/packages/react/src/docs/typo.stories.mdx new file mode 100644 index 0000000..769b352 --- /dev/null +++ b/packages/react/src/docs/typo.stories.mdx @@ -0,0 +1,135 @@ +import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'; +import { tokens } from '../cunningham-tokens'; + + + +# Typo + +Cunningham comes with an existing toolkit to deal with typography, and it's easy. 🖋️ + +## Sizes + +You can use custom utility classes to set the font size of an element. These classes are named using the format `.fs-{size}`. + +Medium text + `} +/> + + + {Object.keys(tokens.theme.font.sizes).map(key => ( +
Using the fs-{key} class
+ ))} + + +You can customize the values of the font size design tokens with the configuration file this way: + + + +## Weights + +You can use custom utility classes to set the font weight of an element. These classes are named using the format `.fw-{weight}`. + +Large size bold text + `} +/> + + + {Object.keys(tokens.theme.font.weights).map(key => ( +
Using the fw-{key} class
+ ))} + + +You can customize the values of the font weight design tokens with the configuration file this way: + + + +## Families + +You can use custom utility classes to set the font family of an element. These classes are named using the format `.f-{family}`. +For now, the design system only relies on `Roboto` font-family for both `base` and `accent` variations. But you can customize it. + +The font associated with `f-base` is the default font for the whole application, so there is no need to use the `f-base` +class on every dom element. + +Accent text + `} +/> + + + {Object.keys(tokens.theme.font.families).map(key => ( +
Using the f-{key} class
+ ))} + + +You can customize the values of the font family design tokens with the configuration file this way: + + \ No newline at end of file diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss index d6dbb10..6126add 100644 --- a/packages/react/src/index.scss +++ b/packages/react/src/index.scss @@ -9,5 +9,5 @@ @import './components/Button'; * { - font-family: var(--c--theme--typo--font-base); + font-family: var(--c--theme--font--families--base); } \ No newline at end of file diff --git a/packages/tokens/src/bin/Generators/CssGenerator.spec.ts b/packages/tokens/src/bin/Generators/CssGenerator.spec.ts index 38cf66e..d14a8d3 100644 --- a/packages/tokens/src/bin/Generators/CssGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/CssGenerator.spec.ts @@ -23,10 +23,20 @@ describe("CssGenerator", () => { expect(fs.existsSync(cssTokensFile)).toEqual(false); await run(["", "", "-g", "css", opt, "html"]); expect(fs.existsSync(cssTokensFile)).toEqual(true); - expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`html { -\t--c--theme--colors--primary: #055FD2; -\t--c--theme--colors--secondary: #DA0000; -}`); + expect(fs.readFileSync(cssTokensFile).toString()).toEqual( + fs + .readFileSync( + path.join( + __dirname, + "..", + "tests", + "assets", + "expected-default-" + Config.tokenFilename + ".css" + ) + ) + .toString() + .replace(":root", "html") + ); }; it("Runs with -s options.", async () => { diff --git a/packages/tokens/src/bin/Generators/CssGenerator.ts b/packages/tokens/src/bin/Generators/CssGenerator.ts index 5ae1601..600ac3b 100644 --- a/packages/tokens/src/bin/Generators/CssGenerator.ts +++ b/packages/tokens/src/bin/Generators/CssGenerator.ts @@ -3,6 +3,7 @@ import { flatify } from "Utils/Flatify"; import Config from "Config"; import { Generator } from "Generators/index"; import { put } from "Utils/Files"; +import { Tokens } from "TokensGenerator"; export const cssGenerator: Generator = async (tokens, opts) => { const flatTokens = flatify(tokens, Config.sass.varSeparator); @@ -11,8 +12,134 @@ export const cssGenerator: Generator = async (tokens, opts) => { acc + `\t--${Config.sass.varPrefix}${token}: ${flatTokens[token]};\n` ); }, ""); - const cssContent = `${opts.selector} {\n${cssVars}}`; + const cssContent = `${opts.selector} {\n${cssVars}} ${generateClasses( + tokens + )}`; + const dest = path.join(opts.path, Config.tokenFilename + ".css"); put(dest, cssContent); }; + +function generateClasses(tokens: Tokens) { + return [ + ...generateColorClasses(tokens), + ...generateFontClasses(tokens), + ...generateSpacingClasses(tokens), + ].join("\n"); +} + +function generateColorClasses(tokens: Tokens) { + return [...generateClrClasses(tokens), ...generateBgClasses(tokens)]; +} + +/** + * Generate background color classes. + * Example: .bg-primary-500 + * + * @param tokens + */ +function generateBgClasses(tokens: Tokens) { + return Object.keys(tokens.theme.colors).map( + (key) => + `.bg-${key} { background-color: var(--${Config.sass.varPrefix}theme--colors--${key}); }` + ); +} + +/** + * Generate color classes. + * Example: .clr-primary-500 + * + * @param tokens + */ +function generateClrClasses(tokens: Tokens) { + return Object.keys(tokens.theme.colors).map( + (key) => + `.clr-${key} { color: var(--${Config.sass.varPrefix}theme--colors--${key}); }` + ); +} + +function generateFontClasses(tokens: Tokens) { + return [ + ...generateFwClasses(tokens), + ...generateFsClasses(tokens), + ...generateFClasses(tokens), + ]; +} + +/** + * Generate font weight classes. + * Example: fw-bold + * + * @param tokens + */ +function generateFwClasses(tokens: Tokens) { + return Object.keys(tokens.theme.font.weights).map( + (key) => + `.fw-${key} { font-weight: var(--${Config.sass.varPrefix}theme--font--weights--${key}); }` + ); +} + +/** + * Generate font size classes. + * Example: fs-m + * + * @param tokens + */ +function generateFsClasses(tokens: Tokens) { + return Object.keys(tokens.theme.font.sizes).map( + (key) => + `.fs-${key} { font-size: var(--${Config.sass.varPrefix}theme--font--sizes--${key}); }` + ); +} + +/** + * Generate font family classes. + * Example: f-base + * + * @param tokens + */ +function generateFClasses(tokens: Tokens) { + return Object.keys(tokens.theme.font.families).map( + (key) => + `.f-${key} { font-family: var(--${Config.sass.varPrefix}theme--font--families--${key}); }` + ); +} + +function generateSpacingClasses(tokens: Tokens) { + return [...generateMarginClasses(tokens), ...generatePaddingClasses(tokens)]; +} + +/** + * Generate margins classes. + * Example: m-l, mr-l, mb-l, ml-l, mt-l + * + * @param tokens + */ +function generateMarginClasses(tokens: Tokens) { + return Object.keys(tokens.theme.spacings).map( + (key) => + `.m-${key} { margin: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + + `.mb-${key} { margin-bottom: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + + `.mt-${key} { margin-top: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + + `.ml-${key} { margin-left: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + + `.mr-${key} { margin-right: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + ); +} + +/** + * Generate paddings classes. + * Example: p-l, pr-l, pb-l, pl-l, pt-l + * + * @param tokens + */ +function generatePaddingClasses(tokens: Tokens) { + return Object.keys(tokens.theme.spacings).map( + (key) => + `.p-${key} { padding: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + + `.pb-${key} { padding-bottom: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + + `.pt-${key} { padding-top: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + + `.pl-${key} { padding-left: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + + `.pr-${key} { padding-right: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` + ); +} diff --git a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts index e6afa21..ac190c8 100644 --- a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts @@ -24,7 +24,7 @@ describe("JsGenerator", () => { await run(["", "", "-g", "js"]); expect(fs.existsSync(tokensFile)).toEqual(true); expect(fs.readFileSync(tokensFile).toString()).toEqual( - `export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"}}};` + `export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"}}};` ); }); }); diff --git a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts index 6547e02..5a7732f 100644 --- a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts @@ -24,7 +24,7 @@ describe("TsGenerator", () => { await run(["", "", "-g", "ts"]); expect(fs.existsSync(tokensFile)).toEqual(true); expect(fs.readFileSync(tokensFile).toString()).toEqual( - `export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"}}};` + `export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"}}};` ); }); }); diff --git a/packages/tokens/src/bin/TokensGenerator.ts b/packages/tokens/src/bin/TokensGenerator.ts index 0a0d7de..4aa2745 100644 --- a/packages/tokens/src/bin/TokensGenerator.ts +++ b/packages/tokens/src/bin/TokensGenerator.ts @@ -1,14 +1,8 @@ -interface ThemeShape { - colors: { - [key: string]: string; - }; -} +import cunningham from "cunningham"; -export interface ConfigShape { - theme: ThemeShape; -} +export type ConfigShape = typeof cunningham; -export type Tokens = Record; +export type Tokens = Record & ConfigShape; export const tokensGenerator = (config: ConfigShape): Tokens => { return { diff --git a/packages/tokens/src/bin/__mocks__/cunningham.ts b/packages/tokens/src/bin/__mocks__/cunningham.ts index 575f5ad..73a7980 100644 --- a/packages/tokens/src/bin/__mocks__/cunningham.ts +++ b/packages/tokens/src/bin/__mocks__/cunningham.ts @@ -4,5 +4,19 @@ module.exports = { primary: "#055FD2", secondary: "#DA0000", }, + font: { + sizes: { + m: "1rem", + }, + weights: { + medium: 400, + }, + families: { + base: "Roboto", + }, + }, + spacings: { + s: "1rem", + }, }, }; diff --git a/packages/tokens/src/bin/cunningham.ts b/packages/tokens/src/bin/cunningham.ts index 4441580..8ca42cf 100644 --- a/packages/tokens/src/bin/cunningham.ts +++ b/packages/tokens/src/bin/cunningham.ts @@ -89,7 +89,7 @@ const colorsDanger = { "danger-900": "#5C0000", }; -const typoSizes = { +const fontSizes = { h1: "1.75rem", h2: "1.375rem", h3: "1.125rem;", @@ -101,7 +101,7 @@ const typoSizes = { s: "0.6875rem", }; -const typoWeights = { +const fontWeights = { thin: 100, regular: 300, medium: 400, @@ -110,18 +110,18 @@ const typoWeights = { black: 900, }; -const typeFamilies = { - "font-base": "Roboto", - "font-accent": "Roboto", +const fontFamilies = { + base: "Roboto", + accent: "Roboto", }; const spacings = { - xl: "64px", - l: "48px", - b: "24px", - s: "16px", - t: "8px", - st: "4px", + xl: "4rem", + l: "3rem", + b: "1.625rem", + s: "1rem", + t: "0.5rem", + st: "0.25rem", }; const transitions = { @@ -142,10 +142,10 @@ export default { ...colorsWarning, ...colorsDanger, }, - typo: { - ...typoSizes, - ...typoWeights, - ...typeFamilies, + font: { + sizes: fontSizes, + weights: fontWeights, + families: fontFamilies, }, spacings, transitions, diff --git a/packages/tokens/src/bin/tests/Cunningham.spec.ts b/packages/tokens/src/bin/tests/Cunningham.spec.ts index a175fda..f7b4a3e 100644 --- a/packages/tokens/src/bin/tests/Cunningham.spec.ts +++ b/packages/tokens/src/bin/tests/Cunningham.spec.ts @@ -55,10 +55,17 @@ describe("Cunningham Bin", () => { expect(fs.existsSync(cssTokensFile)).toEqual(false); await run(["", "", "-g", "css"]); expect(fs.existsSync(cssTokensFile)).toEqual(true); - expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`:root { -\t--c--theme--colors--primary: #055FD2; -\t--c--theme--colors--secondary: #DA0000; -}`); + expect(fs.readFileSync(cssTokensFile).toString()).toEqual( + fs + .readFileSync( + path.join( + __dirname, + "assets", + "expected-default-" + Config.tokenFilename + ".css" + ) + ) + .toString() + ); }); it("Runs with existing JS config file using local values.", async () => { @@ -76,10 +83,17 @@ describe("Cunningham Bin", () => { await run(["", "", "-g", "css"]); expect(fs.existsSync(cssTokensFile)).toEqual(true); - expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`:root { -\t--c--theme--colors--primary: AntiqueWhite; -\t--c--theme--colors--secondary: #DA0000; -}`); + expect(fs.readFileSync(cssTokensFile).toString()).toEqual( + fs + .readFileSync( + path.join( + __dirname, + "assets", + "expected-js-" + Config.tokenFilename + ".css" + ) + ) + .toString() + ); }); it("Runs with existing TS config file using local values.", async () => { @@ -111,10 +125,17 @@ describe("Cunningham Bin", () => { expect(fs.existsSync(cssTokensFile)).toEqual(false); await run(["", "", "-g", "css", opt, outputDir]); expect(fs.existsSync(cssTokensFile)).toEqual(true); - expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`:root { -\t--c--theme--colors--primary: #055FD2; -\t--c--theme--colors--secondary: #DA0000; -}`); + expect(fs.readFileSync(cssTokensFile).toString()).toEqual( + fs + .readFileSync( + path.join( + __dirname, + "assets", + "expected-default-" + Config.tokenFilename + ".css" + ) + ) + .toString() + ); }; it("Runs with -o options.", async () => { diff --git a/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css new file mode 100644 index 0000000..1f833ad --- /dev/null +++ b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css @@ -0,0 +1,16 @@ +:root { + --c--theme--colors--primary: #055FD2; + --c--theme--colors--secondary: #DA0000; + --c--theme--font--sizes--m: 1rem; + --c--theme--font--weights--medium: 400; + --c--theme--font--families--base: Roboto; + --c--theme--spacings--s: 1rem; +} .clr-primary { color: var(--c--theme--colors--primary); } +.clr-secondary { color: var(--c--theme--colors--secondary); } +.bg-primary { background-color: var(--c--theme--colors--primary); } +.bg-secondary { background-color: var(--c--theme--colors--secondary); } +.fw-medium { font-weight: var(--c--theme--font--weights--medium); } +.fs-m { font-size: var(--c--theme--font--sizes--m); } +.f-base { font-family: var(--c--theme--font--families--base); } +.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); } +.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); } \ No newline at end of file diff --git a/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css new file mode 100644 index 0000000..f78e8c9 --- /dev/null +++ b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css @@ -0,0 +1,16 @@ +:root { + --c--theme--colors--primary: AntiqueWhite; + --c--theme--colors--secondary: #DA0000; + --c--theme--font--sizes--m: 1rem; + --c--theme--font--weights--medium: 400; + --c--theme--font--families--base: Roboto; + --c--theme--spacings--s: 1rem; +} .clr-primary { color: var(--c--theme--colors--primary); } +.clr-secondary { color: var(--c--theme--colors--secondary); } +.bg-primary { background-color: var(--c--theme--colors--primary); } +.bg-secondary { background-color: var(--c--theme--colors--secondary); } +.fw-medium { font-weight: var(--c--theme--font--weights--medium); } +.fs-m { font-size: var(--c--theme--font--sizes--m); } +.f-base { font-family: var(--c--theme--font--families--base); } +.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); } +.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); } \ No newline at end of file diff --git a/packages/tokens/src/lib/cunningham-tokens.ts b/packages/tokens/src/lib/cunningham-tokens.ts index 2b0ba99..84e209d 100644 --- a/packages/tokens/src/lib/cunningham-tokens.ts +++ b/packages/tokens/src/lib/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"typo":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem;","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem","thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900,"font-base":"Roboto","font-accent":"Roboto"},"spacings":{"xl":"64px","l":"48px","b":"24px","s":"16px","t":"8px","st":"4px"},"transitions":{"ease-in":"cubic-bezier(0.5, 0, 0.75, 0)","ease-out":"cubic-bezier(0.25, 1, 0.5, 1)","ease-in-out":"cubic-bezier(0.76, 0, 0.24, 1)","duration":"200ms"}}}; \ No newline at end of file +export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem;","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900},"families":{"base":"Roboto","accent":"Roboto"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.5, 0, 0.75, 0)","ease-out":"cubic-bezier(0.25, 1, 0.5, 1)","ease-in-out":"cubic-bezier(0.76, 0, 0.24, 1)","duration":"200ms"}}}; \ No newline at end of file