From 2a5acea4a4f824ee5bca02bbb1320b8a8063304c Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Thu, 16 Feb 2023 17:06:33 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(tokens)=20css=20utility=20classes=20a?= =?UTF-8?q?re=20now=20optionnal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously, when using the cunningham bin to build tokens, the CSS file always included utility classes, resulting in duplicated CSS utility classes on the consumer side if no specific CSS optimizer is defined ( its local cunningham-tokens.css + the one from the react package ). Now, this new feature introduces a param named --utility-classes that must be provided to generate those classes. This params is henceforth only provided to the bin inside the tokens package. --- .changeset/sweet-socks-impress.md | 7 + apps/demo/src/cunningham-tokens.css | 170 +----------------- packages/react/src/cunningham-tokens.css | 170 +----------------- packages/tokens/package.json | 2 +- .../src/bin/Generators/CssGenerator.spec.ts | 20 +++ .../tokens/src/bin/Generators/CssGenerator.ts | 7 +- packages/tokens/src/bin/Generators/index.ts | 2 +- packages/tokens/src/bin/ThemeGenerator.ts | 2 + .../expected-default-cunningham-tokens.css | 10 +- .../assets/expected-js-cunningham-tokens.css | 10 +- ...with-utility-classes-cunningham-tokens.css | 16 ++ 11 files changed, 55 insertions(+), 361 deletions(-) create mode 100644 .changeset/sweet-socks-impress.md create mode 100644 packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css diff --git a/.changeset/sweet-socks-impress.md b/.changeset/sweet-socks-impress.md new file mode 100644 index 0000000..792b694 --- /dev/null +++ b/.changeset/sweet-socks-impress.md @@ -0,0 +1,7 @@ +--- +"@openfun/cunningham-tokens": patch +"@openfun/cunningham-react": patch +"cunningham-demo": patch +--- + +The CSS utility classes are no longer automatically included when using Cunningham bin. diff --git a/apps/demo/src/cunningham-tokens.css b/apps/demo/src/cunningham-tokens.css index 4505500..d6cea28 100644 --- a/apps/demo/src/cunningham-tokens.css +++ b/apps/demo/src/cunningham-tokens.css @@ -97,172 +97,4 @@ --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; -} .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 +} \ No newline at end of file diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css index a71cc69..db67267 100644 --- a/packages/react/src/cunningham-tokens.css +++ b/packages/react/src/cunningham-tokens.css @@ -100,172 +100,4 @@ --c--components--button--height: 48px; --c--components--button--font-size: 1rem; --c--components--button--font-weight: 400; -} .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 +} \ No newline at end of file diff --git a/packages/tokens/package.json b/packages/tokens/package.json index bea5d9f..79b4a36 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -28,7 +28,7 @@ "build-bin": "cd src/bin && tsc -p tsconfig.json && tsc-alias && chmod +x ../../dist/bin/Main.js", "build-lib": "cp dist/cunningham-tokens.ts src/lib && cd src/lib && tsc -p tsconfig.json", "build": "yarn build-bin && yarn build-default-theme && yarn build-lib && cd ../.. && ln -sf ../../packages/tokens/dist/bin/Main.js node_modules/.bin/cunningham", - "build-default-theme": "./dist/bin/Main.js -o dist -s html -g css,js,ts", + "build-default-theme": "./dist/bin/Main.js -o dist -s html -g css,js,ts --utility-classes", "test": "FORCE_COLOR=1 jest --runInBand --verbose src" }, "dependencies": { diff --git a/packages/tokens/src/bin/Generators/CssGenerator.spec.ts b/packages/tokens/src/bin/Generators/CssGenerator.spec.ts index d14a8d3..944ed91 100644 --- a/packages/tokens/src/bin/Generators/CssGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/CssGenerator.spec.ts @@ -45,4 +45,24 @@ describe("CssGenerator", () => { it("Runs with --selector options.", async () => { await testSelector("--selector"); }); + it("Runs with --utility-classes options.", async () => { + const cssTokensFile = path.join(__dirname, Config.tokenFilename + ".css"); + expect(fs.existsSync(cssTokensFile)).toEqual(false); + await run(["", "", "-g", "css", "-s", "html", "--utility-classes"]); + expect(fs.existsSync(cssTokensFile)).toEqual(true); + expect(fs.readFileSync(cssTokensFile).toString()).toEqual( + fs + .readFileSync( + path.join( + __dirname, + "..", + "tests", + "assets", + "expected-with-utility-classes-" + Config.tokenFilename + ".css" + ) + ) + .toString() + .replace(":root", "html") + ); + }); }); diff --git a/packages/tokens/src/bin/Generators/CssGenerator.ts b/packages/tokens/src/bin/Generators/CssGenerator.ts index 600ac3b..9fb5875 100644 --- a/packages/tokens/src/bin/Generators/CssGenerator.ts +++ b/packages/tokens/src/bin/Generators/CssGenerator.ts @@ -12,9 +12,10 @@ export const cssGenerator: Generator = async (tokens, opts) => { acc + `\t--${Config.sass.varPrefix}${token}: ${flatTokens[token]};\n` ); }, ""); - const cssContent = `${opts.selector} {\n${cssVars}} ${generateClasses( - tokens - )}`; + let cssContent = `${opts.selector} {\n${cssVars}}`; + if (opts.utilityClasses) { + cssContent += ` ${generateClasses(tokens)}`; + } const dest = path.join(opts.path, Config.tokenFilename + ".css"); diff --git a/packages/tokens/src/bin/Generators/index.ts b/packages/tokens/src/bin/Generators/index.ts index c5172a2..66d6a80 100644 --- a/packages/tokens/src/bin/Generators/index.ts +++ b/packages/tokens/src/bin/Generators/index.ts @@ -5,7 +5,7 @@ import { tsGenerator } from "Generators/TsGenerator"; export type Generator = ( tokens: Tokens, - opts: { path: string; selector: string } + opts: { path: string; selector: string; utilityClasses?: boolean } ) => Promise; export const Generators: Record = { diff --git a/packages/tokens/src/bin/ThemeGenerator.ts b/packages/tokens/src/bin/ThemeGenerator.ts index d93cddf..6f02e87 100644 --- a/packages/tokens/src/bin/ThemeGenerator.ts +++ b/packages/tokens/src/bin/ThemeGenerator.ts @@ -19,6 +19,7 @@ export const buildTheme = async () => { return Generators[generator](tokens, { path: options.output ?? workPath(), selector: options.selector, + utilityClasses: options.utilityClasses, }); }) ); @@ -48,6 +49,7 @@ export const run = async (args: string[]) => { "-o, --output ", "Specify the output dir of generated files." ) + .option("--utility-classes", "Generate CSS utility classes.") .requiredOption( "-g, --generators ", "Specify the generators to use.", 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 index 1f833ad..9dd9a57 100644 --- a/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css @@ -5,12 +5,4 @@ --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 +} \ 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 index f78e8c9..bee56ba 100644 --- a/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css @@ -5,12 +5,4 @@ --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 +} \ No newline at end of file diff --git a/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css new file mode 100644 index 0000000..1f833ad --- /dev/null +++ b/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-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