From 5a76fac1bfe7362eb656c5b95c590ab7998b77b5 Mon Sep 17 00:00:00 2001 From: Justin Bennett Date: Thu, 3 Nov 2022 14:17:00 -0500 Subject: [PATCH 1/5] Reintroduce boxShadow tokens, tweak stylesheets --- scripts/convert-tokens.ts | 47 +++++++++++++++++++--------------- styles/dist/blue.css | 4 --- styles/dist/main.css | 8 ++++++ styles/dist/purple.css | 4 --- styles/dist/tailwind-tokens.js | 18 ------------- styles/dist/yellow.css | 4 --- styles/src/tokens.json | 2 +- 7 files changed, 36 insertions(+), 51 deletions(-) diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts index a944ed41..6c2e2337 100644 --- a/scripts/convert-tokens.ts +++ b/scripts/convert-tokens.ts @@ -93,6 +93,9 @@ const formatTypographyStyles = (name: string, value: any) => { StyleDictionary.registerFormat({ name: 'theme', formatter({ dictionary, options }) { + /** Used with the `??` operator when you only want to include styles on the root stylesheet */ + const root = options.selector === ':root' ? undefined : '' + return dedent` /* THIS FILE IS AUTOGENERATED, DO NOT EDIT */ @@ -141,12 +144,30 @@ StyleDictionary.registerFormat({ }) .join('\n')} - ${dictionary.allProperties - .filter((prop) => prop.type === 'borderRadius') - .map((prop) => { - return `--${prop.name}: ${prop.value};` - }) - .join('\n')} + ${ + root ?? + dictionary.allProperties + .filter((prop) => prop.type === 'borderRadius') + .map((prop) => { + return `--${prop.name}: ${prop.value};` + }) + .join('\n') + } + + ${ + root ?? + dictionary.allProperties + .filter((prop) => prop.type === 'boxShadow') + .map((prop) => { + return `--${prop.name}: ${[prop.value] + .flat() + .map((v) => + typeof v === 'object' ? `${v.x}px ${v.y}px ${v.blur}px ${v.color}` : v, + )};` + }) + .join('\n') + } + }\n` }, }) @@ -191,7 +212,6 @@ StyleDictionary.registerFormat({ const borderRadius = dictionary.allProperties.filter( (prop) => prop.type === 'borderRadius', ) - const boxShadow = dictionary.allProperties.filter((prop) => prop.type === 'boxShadow') return ` /* THIS FILE IS AUTOGENERATED, DO NOT EDIT */ @@ -234,19 +254,6 @@ StyleDictionary.registerFormat({ ].map((make) => make(colors))} } - module.exports.elevationUtilities = { - ${boxShadow.map( - ({ name, value }) => - `'.${name}': { - 'box-shadow': '${[value] - .flat() - .map((v) => - typeof v === 'object' ? `${v.x}px ${v.y}px ${v.blur}px ${v.color}` : v, - ) - .join(', ')}'}`, - )} - } - module.exports.borderRadiusTokens = { ${borderRadius .map( diff --git a/styles/dist/blue.css b/styles/dist/blue.css index b08fc70b..74333431 100644 --- a/styles/dist/blue.css +++ b/styles/dist/blue.css @@ -404,8 +404,4 @@ --theme-notice-800-rgb: var(--base-yellow-800-rgb); --theme-notice-800: rgb(var(--theme-notice-800-rgb)); - - --border-radius-sm: 0.125rem; - --border-radius: 0.1875rem; - --border-radius-full: 624.9375rem; } diff --git a/styles/dist/main.css b/styles/dist/main.css index d9111c4a..b48a55aa 100644 --- a/styles/dist/main.css +++ b/styles/dist/main.css @@ -561,4 +561,12 @@ --border-radius-sm: 0.125rem; --border-radius: 0.1875rem; --border-radius-full: 624.9375rem; + + --box-shadow-0: none; + --box-shadow-1: 0px 0.656px 4.625px #00000021, 0px 3px 13px #00000033, + 0px 7.594px 34.875px #00000045, 0px 15px 80px #00000066; + --box-shadow-2: 0px 2.188px 4.625px #00000021, 0px 10px 13px #00000033, + 0px 25.313px 34.875px #00000045, 0px 50px 80px #00000066; + --box-shadow-3: 0px 4.375px 4.625px #00000021, 0px 20px 13px #00000033, + 0px 50.625px 34.875px #00000045, 0px 100px 80px #00000066; } diff --git a/styles/dist/purple.css b/styles/dist/purple.css index ba0433db..69ceb9b3 100644 --- a/styles/dist/purple.css +++ b/styles/dist/purple.css @@ -404,8 +404,4 @@ --theme-notice-800-rgb: var(--base-yellow-800-rgb); --theme-notice-800: rgb(var(--theme-notice-800-rgb)); - - --border-radius-sm: 0.125rem; - --border-radius: 0.1875rem; - --border-radius-full: 624.9375rem; } diff --git a/styles/dist/tailwind-tokens.js b/styles/dist/tailwind-tokens.js index b672e168..1a4ff2c5 100644 --- a/styles/dist/tailwind-tokens.js +++ b/styles/dist/tailwind-tokens.js @@ -932,24 +932,6 @@ module.exports.colorUtilities = { }, } -module.exports.elevationUtilities = { - '.elevation-0': { - 'box-shadow': 'none', - }, - '.elevation-1': { - 'box-shadow': - '0px 0.656px 4.625px #00000021, 0px 3px 13px #00000033, 0px 7.594px 34.875px #00000045, 0px 15px 80px #00000066', - }, - '.elevation-2': { - 'box-shadow': - '0px 2.188px 4.625px #00000021, 0px 10px 13px #00000033, 0px 25.313px 34.875px #00000045, 0px 50px 80px #00000066', - }, - '.elevation-3': { - 'box-shadow': - '0px 4.375px 4.625px #00000021, 0px 20px 13px #00000033, 0px 50.625px 34.875px #00000045, 0px 100px 80px #00000066', - }, -} - module.exports.borderRadiusTokens = { sm: 'var(--border-radius-sm)', DEFAULT: 'var(--border-radius)', diff --git a/styles/dist/yellow.css b/styles/dist/yellow.css index cbea8e99..27da6e0d 100644 --- a/styles/dist/yellow.css +++ b/styles/dist/yellow.css @@ -404,8 +404,4 @@ --theme-notice-800-rgb: var(--base-yellow-800-rgb); --theme-notice-800: rgb(var(--theme-notice-800-rgb)); - - --border-radius-sm: 0.125rem; - --border-radius: 0.1875rem; - --border-radius-full: 624.9375rem; } diff --git a/styles/src/tokens.json b/styles/src/tokens.json index c2df98fc..f419bef7 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -661,7 +661,7 @@ } } }, - "elevation": { + "boxShadow": { "0": { "value": "none", "type": "boxShadow" From e2b1239ec3189350e2e62c0aa3c0c7d619fa255b Mon Sep 17 00:00:00 2001 From: Justin Bennett Date: Thu, 3 Nov 2022 14:37:44 -0500 Subject: [PATCH 2/5] Re-add elevation tokens --- scripts/convert-tokens.ts | 21 +++++++++++++++++++++ styles/dist/tailwind-tokens.js | 19 +++++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts index 6c2e2337..bac9c607 100644 --- a/scripts/convert-tokens.ts +++ b/scripts/convert-tokens.ts @@ -212,6 +212,7 @@ StyleDictionary.registerFormat({ const borderRadius = dictionary.allProperties.filter( (prop) => prop.type === 'borderRadius', ) + const boxShadow = dictionary.allProperties.filter((prop) => prop.type === 'boxShadow') return ` /* THIS FILE IS AUTOGENERATED, DO NOT EDIT */ @@ -254,6 +255,26 @@ StyleDictionary.registerFormat({ ].map((make) => make(colors))} } + module.exports.elevationUtilities = { + ${boxShadow + .map( + ({ name }, index) => + `'elevation-${index}': { + 'box-shadow': 'var(--${name})', + 'background-color': 'var(--surface-${ + index === 0 + ? 'default' + : index === 1 + ? 'hover' + : index === 2 + ? 'secondary' + : 'tertiary' + })', + }`, + ) + .join(',\n')} + } + module.exports.borderRadiusTokens = { ${borderRadius .map( diff --git a/styles/dist/tailwind-tokens.js b/styles/dist/tailwind-tokens.js index 1a4ff2c5..d7800394 100644 --- a/styles/dist/tailwind-tokens.js +++ b/styles/dist/tailwind-tokens.js @@ -932,6 +932,25 @@ module.exports.colorUtilities = { }, } +module.exports.elevationUtilities = { + 'elevation-0': { + 'box-shadow': 'var(--box-shadow-0)', + 'background-color': 'var(--surface-default)', + }, + 'elevation-1': { + 'box-shadow': 'var(--box-shadow-1)', + 'background-color': 'var(--surface-hover)', + }, + 'elevation-2': { + 'box-shadow': 'var(--box-shadow-2)', + 'background-color': 'var(--surface-secondary)', + }, + 'elevation-3': { + 'box-shadow': 'var(--box-shadow-3)', + 'background-color': 'var(--surface-tertiary)', + }, +} + module.exports.borderRadiusTokens = { sm: 'var(--border-radius-sm)', DEFAULT: 'var(--border-radius)', From 3f002a789e63c0e7b88cb3cd83f824e6a83cd86f Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Fri, 4 Nov 2022 16:05:10 +0000 Subject: [PATCH 3/5] Rename token, and move `boxShadow` into `global` --- styles/src/tokens.json | 121 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 119 insertions(+), 2 deletions(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index f419bef7..aa677456 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -1,6 +1,6 @@ { "global": { - "border-radius": { + "borderRadius": { "small": { "value": "2", "type": "borderRadius" @@ -266,6 +266,123 @@ "value": "underline", "type": "textDecoration" } + }, + "boxShadow": { + "0": { + "value": "none", + "type": "boxShadow" + }, + "1": { + "value": [ + { + "color": "#00000021", + "type": "dropShadow", + "x": "0", + "y": "0.65625", + "blur": "4.625", + "spread": "0" + }, + { + "color": "#00000033", + "type": "dropShadow", + "x": "0", + "y": "3", + "blur": "13", + "spread": "0" + }, + { + "color": "#00000045", + "type": "dropShadow", + "x": "0", + "y": "7.59375", + "blur": "34.875", + "spread": "0" + }, + { + "color": "#00000066", + "type": "dropShadow", + "x": "0", + "y": "15", + "blur": "80", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "2": { + "value": [ + { + "color": "#00000021", + "type": "dropShadow", + "x": "0", + "y": "2.1875", + "blur": "4.625", + "spread": "0" + }, + { + "color": "#00000033", + "type": "dropShadow", + "x": "0", + "y": "10", + "blur": "13", + "spread": "0" + }, + { + "color": "#00000045", + "type": "dropShadow", + "x": "0", + "y": "25.3125", + "blur": "34.875", + "spread": "0" + }, + { + "color": "#00000066", + "type": "dropShadow", + "x": "0", + "y": "50", + "blur": "80", + "spread": "0" + } + ], + "type": "boxShadow" + }, + "3": { + "value": [ + { + "color": "#00000021", + "type": "dropShadow", + "x": "0", + "y": "4.375", + "blur": "4.625", + "spread": "0" + }, + { + "color": "#00000033", + "type": "dropShadow", + "x": "0", + "y": "20", + "blur": "13", + "spread": "0" + }, + { + "color": "#00000045", + "type": "dropShadow", + "x": "0", + "y": "50.625", + "blur": "34.875", + "spread": "0" + }, + { + "color": "#00000066", + "type": "dropShadow", + "x": "0", + "y": "100", + "blur": "80", + "spread": "0" + } + ], + "type": "boxShadow" + } } }, "colors": { @@ -2286,4 +2403,4 @@ "main" ] } -} +} \ No newline at end of file From d9396a5486492d68ff45685249c17850d339bcea Mon Sep 17 00:00:00 2001 From: Justin Bennett Date: Fri, 4 Nov 2022 15:40:33 -0500 Subject: [PATCH 4/5] Drop old boxShadow definitions --- styles/src/tokens.json | 119 +---------------------------------------- 1 file changed, 1 insertion(+), 118 deletions(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index aa677456..c7b4b78e 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -777,123 +777,6 @@ "type": "color" } } - }, - "boxShadow": { - "0": { - "value": "none", - "type": "boxShadow" - }, - "1": { - "value": [ - { - "color": "#00000021", - "type": "dropShadow", - "x": "0", - "y": "0.65625", - "blur": "4.625", - "spread": "0" - }, - { - "color": "#00000033", - "type": "dropShadow", - "x": "0", - "y": "3", - "blur": "13", - "spread": "0" - }, - { - "color": "#00000045", - "type": "dropShadow", - "x": "0", - "y": "7.59375", - "blur": "34.875", - "spread": "0" - }, - { - "color": "#00000066", - "type": "dropShadow", - "x": "0", - "y": "15", - "blur": "80", - "spread": "0" - } - ], - "type": "boxShadow" - }, - "2": { - "value": [ - { - "color": "#00000021", - "type": "dropShadow", - "x": "0", - "y": "2.1875", - "blur": "4.625", - "spread": "0" - }, - { - "color": "#00000033", - "type": "dropShadow", - "x": "0", - "y": "10", - "blur": "13", - "spread": "0" - }, - { - "color": "#00000045", - "type": "dropShadow", - "x": "0", - "y": "25.3125", - "blur": "34.875", - "spread": "0" - }, - { - "color": "#00000066", - "type": "dropShadow", - "x": "0", - "y": "50", - "blur": "80", - "spread": "0" - } - ], - "type": "boxShadow" - }, - "3": { - "value": [ - { - "color": "#00000021", - "type": "dropShadow", - "x": "0", - "y": "4.375", - "blur": "4.625", - "spread": "0" - }, - { - "color": "#00000033", - "type": "dropShadow", - "x": "0", - "y": "20", - "blur": "13", - "spread": "0" - }, - { - "color": "#00000045", - "type": "dropShadow", - "x": "0", - "y": "50.625", - "blur": "34.875", - "spread": "0" - }, - { - "color": "#00000066", - "type": "dropShadow", - "x": "0", - "y": "100", - "blur": "80", - "spread": "0" - } - ], - "type": "boxShadow" - } } }, "yellow-accent": { @@ -2403,4 +2286,4 @@ "main" ] } -} \ No newline at end of file +} From 31cbf496388c4fca6583726533edf42e2eb65e3b Mon Sep 17 00:00:00 2001 From: Justin Bennett Date: Fri, 4 Nov 2022 16:15:35 -0500 Subject: [PATCH 5/5] Fix broken elevation class --- scripts/convert-tokens.ts | 2 +- styles/dist/tailwind-tokens.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts index bac9c607..a5a04494 100644 --- a/scripts/convert-tokens.ts +++ b/scripts/convert-tokens.ts @@ -259,7 +259,7 @@ StyleDictionary.registerFormat({ ${boxShadow .map( ({ name }, index) => - `'elevation-${index}': { + `'.elevation-${index}': { 'box-shadow': 'var(--${name})', 'background-color': 'var(--surface-${ index === 0 diff --git a/styles/dist/tailwind-tokens.js b/styles/dist/tailwind-tokens.js index d7800394..4ac314c6 100644 --- a/styles/dist/tailwind-tokens.js +++ b/styles/dist/tailwind-tokens.js @@ -933,19 +933,19 @@ module.exports.colorUtilities = { } module.exports.elevationUtilities = { - 'elevation-0': { + '.elevation-0': { 'box-shadow': 'var(--box-shadow-0)', 'background-color': 'var(--surface-default)', }, - 'elevation-1': { + '.elevation-1': { 'box-shadow': 'var(--box-shadow-1)', 'background-color': 'var(--surface-hover)', }, - 'elevation-2': { + '.elevation-2': { 'box-shadow': 'var(--box-shadow-2)', 'background-color': 'var(--surface-secondary)', }, - 'elevation-3': { + '.elevation-3': { 'box-shadow': 'var(--box-shadow-3)', 'background-color': 'var(--surface-tertiary)', },