Skip to content

Commit ab151c2

Browse files
nmergetnmerget
authored
refactor: changed some variables to make the button great again (#122)
* refactor: changed some variables to make the button great again
1 parent 794c2f8 commit ab151c2

8 files changed

+190
-171
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"build:style-dictionary": "node style-dictionary.js && npm run copy:scss",
1818
"build:patternlab-css": "sass source/css/patternlab.scss:out/css/patternlab.css --style=compressed --embed-sources --load-path=node_modules",
1919
"build:tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o",
20-
"build-test:css": "sass build/scss/_db-ui-base.scss:build/css/db-ui-base.css --load-path=node_modules",
20+
"build-test:css": "sass build/scss/:build/css/ --load-path=node_modules",
2121
"build": "npm-run-all copy:assets build:* pl:build",
2222
"clean": "rm -rf build",
2323
"lint": "npm-run-all -p lint:*",

‎scripts/color-classes-generator.js

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,8 @@ const generateBGVariants = (value, index) => {
2020
@extend %${prefix}-bg-${value}-${index}-ia;
2121
}
2222
23-
a {
24-
@extend %${prefix}-bg-${value}-${index}-text-ia;
25-
}
26-
2723
.db-weak {
2824
@extend %weak;
29-
30-
&-ia,
31-
&[data-variant="ia"],
32-
a {
33-
@extend %weak-ia;
34-
}
3525
}
3626
}
3727
`;
@@ -45,7 +35,7 @@ const generateBGVariants = (value, index) => {
4535
* @returns scss string
4636
*/
4737
exports.generateColorUtilitityClasses = (colorToken) => {
48-
let output = '';
38+
let output = '@import "variables";\n@import "color-placeholder";\n';
4939

5040
for (const [, value] of Object.keys(colorToken).entries()) {
5141
output += `/**
@@ -54,17 +44,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
5444
`;
5545
// Text colors with interactive variant, e.g. primary
5646
if (colorToken[value].enabled) {
57-
output += `
58-
.${prefix}-text-${value} {
59-
@extend %${prefix}-text-${value};
60-
61-
&-ia,
62-
&[data-variant="ia"],
63-
a {
64-
@extend %${prefix}-text-${value}-ia;
65-
}
66-
}`;
67-
6847
output += `
6948
.${prefix}-bg-${value} {
7049
@extend %${prefix}-bg-${value};
@@ -73,10 +52,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
7352
&[data-variant="ia"] {
7453
@extend %${prefix}-bg-${value}-ia;
7554
}
76-
77-
a {
78-
@extend %${prefix}-bg-${value}-text-ia;
79-
}
8055
}`;
8156
}
8257

‎scripts/color-placeholders-generator.js

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,16 @@ const prefix = 'db';
77

88
const generateInteractiveVariants = (currentColorObject, cssProp) => {
99
return `
10-
&:hover {
11-
${cssProp}: $${prefix}-${currentColorObject.hover.name};
12-
}
10+
&:not(:disabled) {
11+
&:hover {
12+
${cssProp}: $${prefix}-${currentColorObject.hover.name};
13+
--db-current-${cssProp}: #{$${prefix}-${currentColorObject.hover.name}};
14+
}
1315
14-
&:active {
15-
${cssProp}: $${prefix}-${currentColorObject.pressed.name};
16+
&:active {
17+
${cssProp}: $${prefix}-${currentColorObject.pressed.name};
18+
--db-current-${cssProp}: #{$${prefix}-${currentColorObject.pressed.name}};
19+
}
1620
}
1721
`;
1822
};
@@ -24,38 +28,54 @@ const generateInteractiveVariants = (currentColorObject, cssProp) => {
2428

2529
const generateBGVariants = (
2630
value,
27-
index,
31+
variant,
2832
currentColorObject,
2933
baseColorObject
3034
) => {
31-
return `
32-
%${prefix}-bg-${value}-${index} {
35+
const placeholderName = `${prefix}-bg-${value}${
36+
variant ? `-${variant}` : ''
37+
}`;
38+
let result = `
39+
%${placeholderName}-ia-states {
40+
${generateInteractiveVariants(currentColorObject, 'background-color')}
41+
}
42+
%${placeholderName} {
3343
background-color: $${prefix}-${currentColorObject.enabled.name};
3444
color: $${prefix}-${baseColorObject.enabled.name};
3545
36-
&-ia,
37-
&[data-variant="ia"] {
38-
@extend %${prefix}-bg-${value}-${index};
39-
${generateInteractiveVariants(currentColorObject, 'background-color')}
46+
--db-current-background-color: #{$${prefix}-${
47+
currentColorObject.enabled.name
48+
}};
49+
--db-current-color: #{$${prefix}-${baseColorObject.enabled.name}};
50+
51+
&-ia, &[data-variant="ia"] {
52+
@extend %${placeholderName};
53+
@extend %${placeholderName}-ia-states;
4054
}
4155
42-
&-text-ia,
43-
&[data-variant="text-ia"] {
44-
color: $${prefix}-${baseColorObject.enabled.name};
45-
${generateInteractiveVariants(baseColorObject, 'color')}
56+
button {
57+
@extend %${placeholderName}-ia-states;
4658
}
4759
60+
a {
61+
${generateInteractiveVariants(baseColorObject, 'color')}
62+
}
63+
64+
`;
65+
if (baseColorObject.weak) {
66+
result += `
4867
%weak {
4968
color: $${prefix}-${baseColorObject.weak.enabled.name};
5069
51-
&-ia,
52-
&[data-variant="ia"] {
53-
color: $${prefix}-${baseColorObject.weak.enabled.name};
54-
${generateInteractiveVariants(baseColorObject.weak, 'color')}
55-
}
70+
a {
71+
${generateInteractiveVariants(baseColorObject.weak, 'color')}
72+
}
5673
}
57-
}
5874
`;
75+
}
76+
77+
result += `}`;
78+
return result;
5979
};
6080

6181
/**
@@ -75,35 +95,13 @@ exports.generateColorUtilitityPlaceholder = (colorToken) => {
7595
`;
7696
// Text colors with interactive variant, e.g. primary
7797
if (colorToken[value].enabled) {
78-
output += `%${prefix}-text-${value} {
79-
color: $${prefix}-${colorToken[value].enabled.name};
80-
81-
&-ia,
82-
&[data-variant="ia"] {
83-
color: $${prefix}-${colorToken[value].enabled.name};
84-
${generateInteractiveVariants(colorToken[value], 'color')}
85-
}
86-
}
87-
`;
88-
8998
// Text and background colors
90-
output += `
91-
%${prefix}-bg-${value} {
92-
background-color: $${prefix}-${colorToken[value].enabled.name};
93-
color: $${prefix}-${colorToken[value].on.enabled.name};
94-
95-
&-ia,
96-
&[data-variant="ia"] {
97-
@extend %${prefix}-bg-${value};
98-
${generateInteractiveVariants(colorToken[value], 'background-color')}
99-
}
100-
101-
&-text-ia,
102-
&[data-variant="text-ia"] {
103-
color: $${prefix}-${colorToken[value].on.enabled.name};
104-
${generateInteractiveVariants(colorToken[value].on, 'color')}
105-
}
106-
}`;
99+
output += generateBGVariants(
100+
value,
101+
undefined,
102+
colorToken[value],
103+
colorToken[value].on
104+
);
107105
}
108106

109107
for (const variant of Object.keys(colorToken[value].bg)) {

‎scripts/scss-scaling-generator.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ const fileHeader =
88
const generateSpacings = (utility) => {
99
let allClasses = fileHeader;
1010

11+
if (utility) {
12+
allClasses += `@import "variables";\n@import "scaling-placeholder";\n`;
13+
}
14+
1115
const scaleTypeKey = ['normal', 'functional', 'expressive'];
1216

1317
for (const scale of scaleTypeKey) {

‎scripts/scss-typography-generator.js

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const prefix = 'db';
22

33
const fileHeader =
4-
'\n' +
4+
'@use "sass:math";\n' +
55
'// Do not edit directly\n' +
66
'// Generated on ' +
77
new Date().toString() +
@@ -54,8 +54,8 @@ const getUtilityClass = (utility, scale, textType, size) => {
5454
${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
5555
`;
5656
result += `
57-
\tline-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height;
58-
\tfont-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size;
57+
line-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height;
58+
font-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size;
5959
`;
6060

6161
if (isHeadline) {
@@ -65,20 +65,41 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
6565
font-weight: 300;
6666
}
6767
`;
68+
} else {
69+
result += `
70+
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size};
71+
--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size, 1rem)
72+
* 16 * $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
73+
`;
6874
}
6975

7076
result += `
71-
\t@media only screen and (min-width: $db-screens-md) {
72-
\t\tline-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height;
73-
\t\tfont-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size;
74-
\t}\n`;
77+
@media only screen and (min-width: $db-screens-md) {
78+
line-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height;
79+
font-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size;`;
80+
if (!isHeadline) {
81+
result += `
82+
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size};
83+
--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size, 1rem)
84+
* 16 * $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
85+
`;
86+
}
87+
88+
result += `}\n`;
7589

7690
result += `
77-
\t@media only screen and (min-width: $db-screens-lg) {
78-
\t\tline-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height;
79-
\t\tfont-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size;
80-
\t}
91+
@media only screen and (min-width: $db-screens-lg) {
92+
line-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height;
93+
font-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size;`;
94+
if (!isHeadline) {
95+
result += `
96+
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size};
97+
--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size, 1rem)
98+
* 16 * $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
8199
`;
100+
}
101+
102+
result += `}`;
82103

83104
result += `
84105
}
@@ -90,6 +111,10 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
90111
const generateClasses = (typography, utility) => {
91112
let allClasses = fileHeader;
92113

114+
if (utility) {
115+
allClasses += `@import "variables";\n@import "typography-placeholder";\n`;
116+
}
117+
93118
// ScaleTypeKey = [normal, functional, expressive]
94119
for (const scaleTypeKey of Object.keys(typography)) {
95120
const scaleObject = typography[scaleTypeKey];

‎scss/_db-ui-base.scss

Lines changed: 0 additions & 80 deletions
This file was deleted.

0 commit comments

Comments
 (0)