studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(react) make use of tokens references

Browse Source 
We want to leverage the use of references inside our tokens definitions.
This commit is contained in:
Nathan Vasse
2023-06-29 16:38:31 +02:00
committed by NathanVss
parent f36cc07f1b
commit 672f4be4d4
5 changed files with 61 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/purple-planes-mate.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": minor
---
make use of tokens references

4
packages/react/cunningham.ts
View File

@@ -1,4 +1,4 @@
import { defaultTokens } from "@openfun/cunningham-tokens";
import { defaultTokenRefs } from "@openfun/cunningham-tokens";
import { globSync } from "glob";
/**
@@ -25,7 +25,7 @@ files.forEach((file) => {
}
componentName = componentName.replace("/", "-");
components[componentName] = res.tokens(defaultTokens);
components[componentName] = res.tokens(defaultTokenRefs);
});
export default {

115
packages/react/src/cunningham-tokens.css
View File

@@ -78,13 +78,6 @@
--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: 200;
--c--theme--font--weights--light: 300;
--c--theme--font--weights--regular: 400;
--c--theme--font--weights--medium: 500;
--c--theme--font--weights--bold: 600;
--c--theme--font--weights--extrabold: 700;
--c--theme--font--weights--black: 800;
--c--theme--font--families--base: "Roboto Flex Variable", sans-serif;
--c--theme--font--families--accent: "Roboto Flex Variable", sans-serif;
--c--theme--spacings--xl: 4rem;
@@ -97,107 +90,103 @@
--c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
--c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--c--theme--transitions--duration: 250ms;
--c--components--forms-switch--accent-color: #419A14;
--c--components--forms-switch--rail-background-color: #9EA3AA;
--c--components--forms-switch--rail-background-color--disabled: #C2C6CA;
--c--components--forms-switch--accent-color: var(--c--theme--colors--success-700);
--c--components--forms-switch--rail-background-color: var(--c--theme--colors--greyscale-500);
--c--components--forms-switch--rail-background-color--disabled: var(--c--theme--colors--greyscale-400);
--c--components--forms-switch--rail-border-radius: 50vw;
--c--components--forms-switch--handle-background-color: white;
--c--components--forms-switch--handle-background-color--disabled: #F3F4F4;
--c--components--forms-switch--handle-background-color--disabled: var(--c--theme--colors--greyscale-200);
--c--components--forms-switch--handle-border-radius: 50%;
--c--components--forms-select--border-color: #E7E8EA;
--c--components--forms-select--border-color--focus: #0556BF;
--c--components--forms-select--border-color--hover: #9EA3AA;
--c--components--forms-select--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-select--border-color--focus: var(--c--theme--colors--primary-600);
--c--components--forms-select--border-color--hover: var(--c--theme--colors--greyscale-500);
--c--components--forms-select--border-radius: 8px;
--c--components--forms-select--border-radius--focus: 2px;
--c--components--forms-select--border-radius--hover: 2px;
--c--components--forms-select--border-style: solid;
--c--components--forms-select--border-width: 1px;
--c--components--forms-select--color: #303C4B;
--c--components--forms-select--font-size: 1rem;
--c--components--forms-select--color: var(--c--theme--colors--greyscale-800);
--c--components--forms-select--font-size: var(--c--theme--font--sizes--l);
--c--components--forms-select--height: 3.5rem;
--c--components--forms-select--item-background-color--hover: #F3F4F4;
--c--components--forms-select--item-background-color--selected: #EBF2FC;
--c--components--forms-select--item-color: #303C4B;
--c--components--forms-select--item-color--disabled: #9EA3AA;
--c--components--forms-select--item-font-size: 1rem;
--c--components--forms-select--item-background-color--hover: var(--c--theme--colors--greyscale-200);
--c--components--forms-select--item-background-color--selected: var(--c--theme--colors--primary-100);
--c--components--forms-select--item-color: var(--c--theme--colors--greyscale-800);
--c--components--forms-select--item-color--disabled: var(--c--theme--colors--greyscale-500);
--c--components--forms-select--item-font-size: var(--c--theme--font--sizes--l);
--c--components--forms-select--background-color: white;
--c--components--forms-select--menu-background-color: white;
--c--components--forms-select--label-color--focus: #0556BF;
--c--components--forms-select--multi-pill-background-color: #F3F4F4;
--c--components--forms-select--label-color--focus: var(--c--theme--colors--primary-600);
--c--components--forms-select--multi-pill-background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-select--multi-pill-border-radius: 2px;
--c--components--forms-select--multi-pill-max-width: 68%;
--c--components--forms-radio--border-color: #E7E8EA;
--c--components--forms-radio--accent-color: #419A14;
--c--components--forms-radio--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-radio--accent-color: var(--c--theme--colors--success-700);
--c--components--forms-radio--background-color: white;
--c--components--forms-input--font-weight: 400;
--c--components--forms-input--font-size: 1rem;
--c--components--forms-input--font-size: var(--c--theme--font--sizes--l);
--c--components--forms-input--border-radius: 8px;
--c--components--forms-input--border-radius--hover: 2px;
--c--components--forms-input--border-radius--focus: 2px;
--c--components--forms-input--border-width: 1px;
--c--components--forms-input--border-color: #E7E8EA;
--c--components--forms-input--border-color--hover: #9EA3AA;
--c--components--forms-input--border-color--focus: #0556BF;
--c--components--forms-input--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-input--border-color--hover: var(--c--theme--colors--greyscale-500);
--c--components--forms-input--border-color--focus: var(--c--theme--colors--primary-600);
--c--components--forms-input--border-style: solid;
--c--components--forms-input--color: #303C4B;
--c--components--forms-input--label-color--focus: #0556BF;
--c--components--forms-input--color: var(--c--theme--colors--greyscale-800);
--c--components--forms-input--label-color--focus: var(--c--theme--colors--primary-600);
--c--components--forms-input--background-color: white;
--c--components--forms-fileuploader--background-color: white;
--c--components--forms-fileuploader--border-color: #E7E8EA;
--c--components--forms-fileuploader--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-fileuploader--border-radius: 0.5rem;
--c--components--forms-fileuploader--border-width: 1px;
--c--components--forms-fileuploader--border-style: dotted;
--c--components--forms-fileuploader--background-color--active: #EBF2FC;
--c--components--forms-fileuploader--color: #0C1A2B;
--c--components--forms-fileuploader--background-color--active: var(--c--theme--colors--primary-100);
--c--components--forms-fileuploader--color: var(--c--theme--colors--greyscale-900);
--c--components--forms-fileuploader--padding: 1rem;
--c--components--forms-fileuploader--accent-color: #0556BF;
--c--components--forms-fileuploader--text-color: #79818A;
--c--components--forms-fileuploader--accent-color: var(--c--theme--colors--primary-600);
--c--components--forms-fileuploader--text-color: var(--c--theme--colors--greyscale-600);
--c--components--forms-fileuploader--text-size: 0.6875rem;
--c--components--forms-fileuploader--file-text-size: 0.8125rem;
--c--components--forms-fileuploader--file-text-color: #0C1A2B;
--c--components--forms-fileuploader--file-text-weight: 300;
--c--components--forms-fileuploader--file-border-color: #E7E8EA;
--c--components--forms-fileuploader--file-text-color: var(--c--theme--colors--greyscale-900);
--c--components--forms-fileuploader--file-border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-fileuploader--file-border-width: 1px;
--c--components--forms-fileuploader--file-border-radius: 0.5rem;
--c--components--forms-fileuploader--file-background-color: white;
--c--components--forms-fileuploader--file-specs-size: 0.6875rem;
--c--components--forms-fileuploader--file-specs-color: #79818A;
--c--components--forms-fileuploader--file-specs-color: var(--c--theme--colors--greyscale-600);
--c--components--forms-field--width: 292px;
--c--components--forms-field--font-size: 0.6875rem;
--c--components--forms-field--color: #79818A;
--c--components--forms-datepicker--border-color: #E7E8EA;
--c--components--forms-datepicker--border-color--focus: #0556BF;
--c--components--forms-datepicker--border-color--hover: #9EA3AA;
--c--components--forms-field--font-size: var(--c--theme--font--sizes--s);
--c--components--forms-field--color: var(--c--theme--colors--greyscale-600);
--c--components--forms-datepicker--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-datepicker--border-color--focus: var(--c--theme--colors--primary-600);
--c--components--forms-datepicker--border-color--hover: var(--c--theme--colors--greyscale-500);
--c--components--forms-datepicker--border-radius: 8px;
--c--components--forms-datepicker--border-radius--focus: 2px;
--c--components--forms-datepicker--border-radius--hover: 2px;
--c--components--forms-datepicker--border-style: solid;
--c--components--forms-datepicker--border-width: 1px;
--c--components--forms-datepicker--color: #303C4B;
--c--components--forms-datepicker--font-size: 1rem;
--c--components--forms-datepicker--color: var(--c--theme--colors--greyscale-800);
--c--components--forms-datepicker--font-size: var(--c--theme--font--sizes--l);
--c--components--forms-datepicker--height: 3.5rem;
--c--components--forms-datepicker--item-background-color--hover: #F3F4F4;
--c--components--forms-datepicker--item-background-color--selected: #EBF2FC;
--c--components--forms-datepicker--item-color: #303C4B;
--c--components--forms-datepicker--item-font-size: 1rem;
--c--components--forms-datepicker--item-background-color--hover: var(--c--theme--colors--greyscale-200);
--c--components--forms-datepicker--item-background-color--selected: var(--c--theme--colors--primary-100);
--c--components--forms-datepicker--item-color: var(--c--theme--colors--greyscale-800);
--c--components--forms-datepicker--item-font-size: var(--c--theme--font--sizes--l);
--c--components--forms-datepicker--background-color: white;
--c--components--forms-datepicker--menu-background-color: white;
--c--components--forms-datepicker--grid-cell--border-color--today: #0556BF;
--c--components--forms-datepicker--grid-cell--color--today: #0556BF;
--c--components--forms-checkbox--background-color--hover: #F3F4F4;
--c--components--forms-datepicker--grid-cell--border-color--today: var(--c--theme--colors--primary-600);
--c--components--forms-datepicker--grid-cell--color--today: var(--c--theme--colors--primary-600);
--c--components--forms-checkbox--background-color--hover: var(--c--theme--colors--greyscale-200);
--c--components--forms-checkbox--background-color: white;
--c--components--forms-checkbox--font-size: 0.8125rem;
--c--components--forms-checkbox--font-weight: 500;
--c--components--forms-checkbox--color: #0C1A2B;
--c--components--forms-checkbox--border-color: #E7E8EA;
--c--components--forms-checkbox--font-size: var(--c--theme--font--sizes--m);
--c--components--forms-checkbox--color: var(--c--theme--colors--greyscale-900);
--c--components--forms-checkbox--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-checkbox--border-radius: 2px;
--c--components--forms-checkbox--accent-color: #419A14;
--c--components--forms-checkbox--accent-color: var(--c--theme--colors--success-700);
--c--components--forms-checkbox--size: 1.5rem;
--c--components--button--border-radius: 8px;
--c--components--button--border-radius--active: 2px;
--c--components--button--medium-height: 48px;
--c--components--button--small-height: 32px;
--c--components--button--medium-font-size: 1rem;
--c--components--button--small-font-size: 0.8125rem;
--c--components--button--font-weight: 400;
--c--components--button--medium-font-size: var(--c--theme--font--sizes--l);
--c--components--button--small-font-size: var(--c--theme--font--sizes--m);
}

2
packages/react/src/cunningham-tokens.js
View File

File diff suppressed because one or more lines are too long

2
packages/react/src/cunningham-tokens.ts
View File

File diff suppressed because one or more lines are too long