From ba81acf4a2a2c9552eff8602b89ef6ef0ba9001a Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Tue, 8 Nov 2022 16:14:54 +0100 Subject: [PATCH 1/2] refactor: changed some variables to make the button great again --- package.json | 3 +- scripts/color-classes-generator.js | 27 +------ scripts/color-placeholders-generator.js | 98 ++++++++++++------------- scripts/scss-typography-generator.js | 43 ++++++++--- scss/_db-ui-base.scss | 61 +++++++++------ 5 files changed, 122 insertions(+), 110 deletions(-) diff --git a/package.json b/package.json index 37ec76181..7b81fcaed 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "build:style-dictionary": "node style-dictionary.js && npm run copy:scss", "build:patternlab-css": "sass source/css/patternlab.scss:out/css/patternlab.css --style=compressed --embed-sources --load-path=node_modules", "build:tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o", - "build-test:css": "sass build/scss/_db-ui-base.scss:build/css/db-ui-base.css --load-path=node_modules", + "build-test:base-css": "sass build/scss/_db-ui-base.scss:build/css/db-ui-base.css --load-path=node_modules", + "build-test:color-css": "sass build/scss/_color-classes.scss:build/css/color-classes.css --load-path=node_modules", "build": "npm-run-all copy:assets build:* pl:build", "clean": "rm -rf build", "lint": "npm-run-all -p lint:*", diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js index 565fcd160..d7cf58b9a 100644 --- a/scripts/color-classes-generator.js +++ b/scripts/color-classes-generator.js @@ -20,18 +20,8 @@ const generateBGVariants = (value, index) => { @extend %${prefix}-bg-${value}-${index}-ia; } - a { - @extend %${prefix}-bg-${value}-${index}-text-ia; - } - .db-weak { @extend %weak; - - &-ia, - &[data-variant="ia"], - a { - @extend %weak-ia; - } } } `; @@ -45,7 +35,7 @@ const generateBGVariants = (value, index) => { * @returns scss string */ exports.generateColorUtilitityClasses = (colorToken) => { - let output = ''; + let output = '@import "variables";\n@import "color-placeholder";\n'; for (const [, value] of Object.keys(colorToken).entries()) { output += `/** @@ -54,17 +44,6 @@ exports.generateColorUtilitityClasses = (colorToken) => { `; // Text colors with interactive variant, e.g. primary if (colorToken[value].enabled) { - output += ` -.${prefix}-text-${value} { - @extend %${prefix}-text-${value}; - - &-ia, - &[data-variant="ia"], - a { - @extend %${prefix}-text-${value}-ia; - } -}`; - output += ` .${prefix}-bg-${value} { @extend %${prefix}-bg-${value}; @@ -73,10 +52,6 @@ exports.generateColorUtilitityClasses = (colorToken) => { &[data-variant="ia"] { @extend %${prefix}-bg-${value}-ia; } - - a { - @extend %${prefix}-bg-${value}-text-ia; - } }`; } diff --git a/scripts/color-placeholders-generator.js b/scripts/color-placeholders-generator.js index f96029f47..46caf5000 100644 --- a/scripts/color-placeholders-generator.js +++ b/scripts/color-placeholders-generator.js @@ -7,12 +7,16 @@ const prefix = 'db'; const generateInteractiveVariants = (currentColorObject, cssProp) => { return ` - &:hover { - ${cssProp}: $${prefix}-${currentColorObject.hover.name}; - } + &:not(:disabled) { + &:hover { + ${cssProp}: $${prefix}-${currentColorObject.hover.name}; + --db-current-${cssProp}: #{$${prefix}-${currentColorObject.hover.name}}; + } - &:active { - ${cssProp}: $${prefix}-${currentColorObject.pressed.name}; + &:active { + ${cssProp}: $${prefix}-${currentColorObject.pressed.name}; + --db-current-${cssProp}: #{$${prefix}-${currentColorObject.pressed.name}}; + } } `; }; @@ -24,38 +28,54 @@ const generateInteractiveVariants = (currentColorObject, cssProp) => { const generateBGVariants = ( value, - index, + variant, currentColorObject, baseColorObject ) => { - return ` -%${prefix}-bg-${value}-${index} { + const placeholderName = `${prefix}-bg-${value}${ + variant ? `-${variant}` : '' + }`; + let result = ` +%${placeholderName}-ia-states { + ${generateInteractiveVariants(currentColorObject, 'background-color')} +} +%${placeholderName} { background-color: $${prefix}-${currentColorObject.enabled.name}; color: $${prefix}-${baseColorObject.enabled.name}; - &-ia, - &[data-variant="ia"] { - @extend %${prefix}-bg-${value}-${index}; - ${generateInteractiveVariants(currentColorObject, 'background-color')} + --db-current-background-color: #{$${prefix}-${ + currentColorObject.enabled.name + }}; + --db-current-color: #{$${prefix}-${baseColorObject.enabled.name}}; + + &-ia, &[data-variant="ia"] { + @extend %${placeholderName}; + @extend %${placeholderName}-ia-states; } - &-text-ia, - &[data-variant="text-ia"] { - color: $${prefix}-${baseColorObject.enabled.name}; - ${generateInteractiveVariants(baseColorObject, 'color')} + button { + @extend %${placeholderName}-ia-states; } + a { + ${generateInteractiveVariants(baseColorObject, 'color')} + } + +`; + if (baseColorObject.weak) { + result += ` %weak { color: $${prefix}-${baseColorObject.weak.enabled.name}; - &-ia, - &[data-variant="ia"] { - color: $${prefix}-${baseColorObject.weak.enabled.name}; - ${generateInteractiveVariants(baseColorObject.weak, 'color')} - } + a { + ${generateInteractiveVariants(baseColorObject.weak, 'color')} + } } -} `; + } + + result += `}`; + return result; }; /** @@ -75,35 +95,13 @@ exports.generateColorUtilitityPlaceholder = (colorToken) => { `; // Text colors with interactive variant, e.g. primary if (colorToken[value].enabled) { - output += `%${prefix}-text-${value} { - color: $${prefix}-${colorToken[value].enabled.name}; - - &-ia, - &[data-variant="ia"] { - color: $${prefix}-${colorToken[value].enabled.name}; - ${generateInteractiveVariants(colorToken[value], 'color')} - } -} -`; - // Text and background colors - output += ` -%${prefix}-bg-${value} { - background-color: $${prefix}-${colorToken[value].enabled.name}; - color: $${prefix}-${colorToken[value].on.enabled.name}; - - &-ia, - &[data-variant="ia"] { - @extend %${prefix}-bg-${value}; - ${generateInteractiveVariants(colorToken[value], 'background-color')} - } - - &-text-ia, - &[data-variant="text-ia"] { - color: $${prefix}-${colorToken[value].on.enabled.name}; - ${generateInteractiveVariants(colorToken[value].on, 'color')} - } -}`; + output += generateBGVariants( + value, + undefined, + colorToken[value], + colorToken[value].on + ); } for (const variant of Object.keys(colorToken[value].bg)) { diff --git a/scripts/scss-typography-generator.js b/scripts/scss-typography-generator.js index 4f4cdd172..44a12d77e 100644 --- a/scripts/scss-typography-generator.js +++ b/scripts/scss-typography-generator.js @@ -1,7 +1,7 @@ const prefix = 'db'; const fileHeader = - '\n' + + '@use "sass:math";\n' + '// Do not edit directly\n' + '// Generated on ' + new Date().toString() + @@ -54,8 +54,8 @@ const getUtilityClass = (utility, scale, textType, size) => { ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{ `; result += ` -\tline-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height; -\tfont-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size; + line-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height; + font-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size; `; if (isHeadline) { @@ -65,20 +65,41 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{ font-weight: 300; } `; + } else { + result += ` + --db-base-icon-font-size: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size}; + --db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size, 1rem) + * 16 * $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important; + `; } result += ` -\t@media only screen and (min-width: $db-screens-md) { -\t\tline-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height; -\t\tfont-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size; -\t}\n`; + @media only screen and (min-width: $db-screens-md) { + line-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height; + font-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size;`; + if (!isHeadline) { + result += ` + --db-base-icon-font-size: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size}; + --db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size, 1rem) + * 16 * $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important; + `; + } + + result += `}\n`; result += ` -\t@media only screen and (min-width: $db-screens-lg) { -\t\tline-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height; -\t\tfont-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size; -\t} + @media only screen and (min-width: $db-screens-lg) { + line-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height; + font-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size;`; + if (!isHeadline) { + result += ` + --db-base-icon-font-size: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size}; + --db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size, 1rem) + * 16 * $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important; `; + } + + result += `}`; result += ` } diff --git a/scss/_db-ui-base.scss b/scss/_db-ui-base.scss index 2c9745d1e..8e017015a 100644 --- a/scss/_db-ui-base.scss +++ b/scss/_db-ui-base.scss @@ -5,26 +5,7 @@ @import "color-placeholder"; :root { - @extend %db-scaling-normal; - - $db-sizing-xs: var(--db-sizing-xs); - $db-sizing-sm: var(--db-sizing-sm); - $db-sizing-md: var(--db-sizing-md); - $db-sizing-lg: var(--db-sizing-lg); - - $db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs); - $db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs); - $db-spacing-fixed-xs: var(--db-db-spacing-fixed-xs); - $db-spacing-fixed-sm: var(--db-db-spacing-fixed-sm); - $db-spacing-fixed-md: var(--db-spacing-fixed-md); - $db-spacing-fixed-lg: var(--db-spacing-fixed-lg); - $db-spacing-fixed-xl: var(--db-spacing-fixed-xl); - - $db-spacing-responsive-xs: var(--db-spacing-responsive-xs); - $db-spacing-responsive-sm: var(--db-spacing-responsive-sm); - $db-spacing-responsive-md: var(--db-spacing-responsive-md); - $db-spacing-responsive-lg: var(--db-spacing-responsive-lg); - $db-spacing-responsive-xl: var(--db-spacing-responsive-xl); + @extend %db-ui-normal; font-family: $db-font-family-sans; @@ -38,15 +19,51 @@ } } +$db-sizing-xs: var(--db-sizing-xs); +$db-sizing-sm: var(--db-sizing-sm); +$db-sizing-md: var(--db-sizing-md); +$db-sizing-lg: var(--db-sizing-lg); + +$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs); +$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs); +$db-spacing-fixed-xs: var(--db-spacing-fixed-xs); +$db-spacing-fixed-sm: var(--db-spacing-fixed-sm); +$db-spacing-fixed-md: var(--db-spacing-fixed-md); +$db-spacing-fixed-lg: var(--db-spacing-fixed-lg); +$db-spacing-fixed-xl: var(--db-spacing-fixed-xl); + +$db-spacing-responsive-xs: var(--db-spacing-responsive-xs); +$db-spacing-responsive-sm: var(--db-spacing-responsive-sm); +$db-spacing-responsive-md: var(--db-spacing-responsive-md); +$db-spacing-responsive-lg: var(--db-spacing-responsive-lg); +$db-spacing-responsive-xl: var(--db-spacing-responsive-xl); + +$db-type-font-size-lg: var(--db-type-body-lg); +$db-type-font-size-md: var(--db-type-body-md); +$db-type-font-size-sm: var(--db-type-body-sm); + @mixin styles($styles...) { @for $i from 0 to length($styles) { %db-ui-#{nth($styles, $i + 1)}, .db-ui-#{nth($styles, $i + 1)} { @extend %db-scaling-#{nth($styles, $i + 1)}; - @extend %db-#{nth($styles, $i + 1)}-body-md; + [data-size="large"] { + @extend %db-#{nth($styles, $i + 1)}-body-lg; + } + + body, + button, + input, + optgroup, + select, + textarea, + [data-size="medium"] { + @extend %db-#{nth($styles, $i + 1)}-body-md; + } - small { + small, + [data-size="small"] { @extend %db-#{nth($styles, $i + 1)}-body-sm; } From 95e5523686daf345b9702cfea659abdc942795ad Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Wed, 9 Nov 2022 09:01:09 +0100 Subject: [PATCH 2/2] fix: issue with build-test script in package.json --- package.json | 3 +-- scripts/scss-scaling-generator.js | 4 ++++ scripts/scss-typography-generator.js | 4 ++++ scss/{_db-ui-base.scss => db-ui-base.scss} | 0 style-dictionary.config.json | 6 +++--- 5 files changed, 12 insertions(+), 5 deletions(-) rename scss/{_db-ui-base.scss => db-ui-base.scss} (100%) diff --git a/package.json b/package.json index 7b81fcaed..4bcb6aaf4 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,7 @@ "build:style-dictionary": "node style-dictionary.js && npm run copy:scss", "build:patternlab-css": "sass source/css/patternlab.scss:out/css/patternlab.css --style=compressed --embed-sources --load-path=node_modules", "build:tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o", - "build-test:base-css": "sass build/scss/_db-ui-base.scss:build/css/db-ui-base.css --load-path=node_modules", - "build-test:color-css": "sass build/scss/_color-classes.scss:build/css/color-classes.css --load-path=node_modules", + "build-test:css": "sass build/scss/:build/css/ --load-path=node_modules", "build": "npm-run-all copy:assets build:* pl:build", "clean": "rm -rf build", "lint": "npm-run-all -p lint:*", diff --git a/scripts/scss-scaling-generator.js b/scripts/scss-scaling-generator.js index 68dcd4885..de186a056 100644 --- a/scripts/scss-scaling-generator.js +++ b/scripts/scss-scaling-generator.js @@ -8,6 +8,10 @@ const fileHeader = const generateSpacings = (utility) => { let allClasses = fileHeader; + if (utility) { + allClasses += `@import "variables";\n@import "scaling-placeholder";\n`; + } + const scaleTypeKey = ['normal', 'functional', 'expressive']; for (const scale of scaleTypeKey) { diff --git a/scripts/scss-typography-generator.js b/scripts/scss-typography-generator.js index 44a12d77e..e0cf8b771 100644 --- a/scripts/scss-typography-generator.js +++ b/scripts/scss-typography-generator.js @@ -111,6 +111,10 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{ const generateClasses = (typography, utility) => { let allClasses = fileHeader; + if (utility) { + allClasses += `@import "variables";\n@import "typography-placeholder";\n`; + } + // ScaleTypeKey = [normal, functional, expressive] for (const scaleTypeKey of Object.keys(typography)) { const scaleObject = typography[scaleTypeKey]; diff --git a/scss/_db-ui-base.scss b/scss/db-ui-base.scss similarity index 100% rename from scss/_db-ui-base.scss rename to scss/db-ui-base.scss diff --git a/style-dictionary.config.json b/style-dictionary.config.json index c5a1fc346..567a046b2 100644 --- a/style-dictionary.config.json +++ b/style-dictionary.config.json @@ -99,7 +99,7 @@ "buildPath": "build/scss/", "files": [ { - "destination": "_typography-classes.scss", + "destination": "typography-classes.scss", "format": "db-core-typography-classes" } ] @@ -119,7 +119,7 @@ "buildPath": "build/scss/", "files": [ { - "destination": "_scaling-classes.scss", + "destination": "scaling-classes.scss", "format": "db-core-scaling-classes" } ] @@ -149,7 +149,7 @@ "buildPath": "build/scss/", "files": [ { - "destination": "_color-classes.scss", + "destination": "color-classes.scss", "format": "db-core-color-classes" } ]