Skip to content

Commit b422057

Browse files
annschannsch
authored
feat: generate color utilities (#51)
* feat: generate color utilities * feat: utilities for neutral variants * feat: generate color utilities * feat: utilities for neutral variants * refactor: removed unused properties * fix: add color for child elements * feat: color utilities generator * fix: remove console logs * fix: removed comments * fix: included pr feedback
1 parent 7934715 commit b422057

File tree

11 files changed

+1344
-388
lines changed

11 files changed

+1344
-388
lines changed

‎helpers/flat-colors.js‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -141,17 +141,20 @@ module.exports = function (Handlebars) {
141141
let resultString = '';
142142

143143
Object.keys(context.data.root.colors).forEach((header) => {
144-
resultString += `<h2>${header}</h2>`;
144+
resultString += `<h2>${header}</h2>`; // e.g. neutral, primary
145145
const headerObject = context.data.root.colors[header];
146146
if (headerObject) {
147147
const headerObjKeysRest = Object.keys(headerObject).filter(
148148
(k) => k !== 'bg'
149149
);
150-
resultString += addList(
151-
header,
152-
headerObject,
153-
headerObjKeysRest
154-
);
150+
// neutral has no enabled color
151+
if (context.data.root.colors[header].enabled) {
152+
resultString += addList(
153+
header,
154+
headerObject,
155+
headerObjKeysRest
156+
);
157+
}
155158
const onBgObject = headerObject['on'];
156159
const bgObject = headerObject['bg'];
157160
if (bgObject) {
@@ -162,10 +165,28 @@ module.exports = function (Handlebars) {
162165
} else {
163166
// Only happens in neutral colors
164167
bgKeys.forEach((bgKey) => {
165-
bgObject[bgKey] = {
166-
...bgObject[bgKey],
167-
on: onBgObject['bg']
168-
};
168+
if (
169+
Object.keys(bgObject[bgKey]).find(
170+
(key) => key === 'enabled'
171+
)
172+
) {
173+
bgObject[bgKey] = {
174+
...bgObject[bgKey],
175+
on: onBgObject['bg']
176+
};
177+
} else {
178+
Object.keys(bgObject[bgKey]).forEach(
179+
(bgChildKey) => {
180+
bgObject[`${bgKey}-${bgChildKey}`] =
181+
{
182+
...bgObject[bgKey][
183+
bgChildKey
184+
],
185+
on: onBgObject['bg']
186+
};
187+
}
188+
);
189+
}
169190
});
170191
}
171192
}
@@ -174,7 +195,7 @@ module.exports = function (Handlebars) {
174195
const otherChildren = bgKeys.filter(
175196
(key) => !isDefaultChild(key)
176197
);
177-
resultString += `<h3>${header} backgrounds light (only)</h3>`;
198+
resultString += `<h3>${header} backgrounds</h3>`;
178199
resultString += addList(
179200
`${header}-bg`,
180201
bgObject,

‎scripts/color-classes-generator.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* Generate Color Utilities (Classes and SCSS Placeholders) for color dependencies
3+
* according to definitions made by DB UI v3
4+
*/
5+
6+
const prefix = 'db';
7+
8+
/**
9+
* backgrounds have more than one variant with the same color for text (on-color)
10+
* e.g. neutral with variants 1-6 or transparent-full and transparent-semi
11+
*/
12+
13+
const generateBGVariants = (value, index) => {
14+
return `
15+
.${prefix}-bg-${value}-${index} {
16+
@extend %${prefix}-bg-${value}-${index};
17+
18+
&-ia,
19+
&[data-variant="ia"] {
20+
@extend %${prefix}-bg-${value}-${index}-ia;
21+
}
22+
23+
a {
24+
@extend %${prefix}-bg-${value}-${index}-text-ia;
25+
}
26+
27+
.db-weak {
28+
@extend %weak;
29+
30+
&-ia,
31+
&[data-variant="ia"],
32+
a {
33+
@extend %weak-ia;
34+
}
35+
}
36+
}
37+
`;
38+
};
39+
40+
/**
41+
* generates color utility classes and scss placeholders for non-interactive and interactive variants
42+
* of color combination (background-color and color) based on definitions made by DB UI v3
43+
*
44+
* @param {*} colorToken scss transform obj generated by styleDictionary
45+
* @returns scss string
46+
*/
47+
exports.generateColorUtilitityClasses = (colorToken) => {
48+
let output = '';
49+
50+
Object.keys(colorToken).forEach((value, index) => {
51+
output += `/**
52+
* ${value.toUpperCase()} - Utility Classes
53+
**/
54+
`;
55+
// text colors with interactive variant, e.g. primary
56+
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+
68+
output += `
69+
.${prefix}-bg-${value} {
70+
@extend %${prefix}-bg-${value};
71+
72+
&-ia,
73+
&[data-variant="ia"] {
74+
@extend %${prefix}-bg-${value}-ia;
75+
}
76+
77+
a {
78+
@extend %${prefix}-bg-${value}-text-ia;
79+
}
80+
}`;
81+
}
82+
83+
Object.keys(colorToken[value].bg).forEach((variant) => {
84+
if (colorToken[value].bg[variant].enabled) {
85+
output += generateBGVariants(value, variant);
86+
} else {
87+
Object.keys(colorToken[value].bg[variant]).forEach(
88+
(childVariant) => {
89+
output += generateBGVariants(
90+
value,
91+
variant + '-' + childVariant
92+
);
93+
}
94+
);
95+
}
96+
});
97+
});
98+
99+
return output;
100+
};

‎scripts/color-placeholders-generator.js‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/**
2+
* Generate Color Utilities (Classes and SCSS Placeholders) for color dependencies
3+
* according to definitions made by DB UI v3
4+
*/
5+
6+
const prefix = 'db';
7+
8+
const generateInteractiveVariants = (currentColorObj, cssProp) => {
9+
return `
10+
&:hover {
11+
${cssProp}: $${prefix}-${currentColorObj.hover.name};
12+
}
13+
14+
&:active {
15+
${cssProp}: $${prefix}-${currentColorObj.pressed.name};
16+
}
17+
`;
18+
};
19+
20+
/**
21+
* backgrounds have more than one variant with the same color for text (on-color)
22+
* e.g. neutral with variants 1-6 or transparent-full or transparent-semi
23+
*/
24+
25+
const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
26+
return `
27+
%${prefix}-bg-${value}-${index} {
28+
background-color: $${prefix}-${currentColorObj.enabled.name};
29+
color: $${prefix}-${baseColorObj.enabled.name};
30+
31+
&-ia,
32+
&[data-variant="ia"] {
33+
@extend %${prefix}-bg-${value}-${index};
34+
${generateInteractiveVariants(currentColorObj, 'background-color')}
35+
}
36+
37+
&-text-ia,
38+
&[data-variant="text-ia"] {
39+
color: $${prefix}-${baseColorObj.enabled.name};
40+
${generateInteractiveVariants(baseColorObj, 'color')}
41+
}
42+
43+
%weak {
44+
color: $${prefix}-${baseColorObj.weak.enabled.name};
45+
46+
&-ia,
47+
&[data-variant="ia"] {
48+
color: $${prefix}-${baseColorObj.weak.enabled.name};
49+
${generateInteractiveVariants(baseColorObj.weak, 'color')}
50+
}
51+
}
52+
}
53+
`;
54+
};
55+
56+
/**
57+
* generates color utility classes and scss placeholders for non-interactive and interactive variants
58+
* of color combination (background-color and color) based on definitions made by DB UI v3
59+
*
60+
* @param {*} colorToken scss transform obj generated by styleDictionary
61+
* @returns scss string
62+
*/
63+
exports.generateColorUtilitityPlaceholder = (colorToken) => {
64+
let output = '';
65+
66+
Object.keys(colorToken).forEach((value, index) => {
67+
output += `/**
68+
* ${value.toUpperCase()} - Placeholder Utilities
69+
**/
70+
`;
71+
// text colors with interactive variant, e.g. primary
72+
if (colorToken[value].enabled) {
73+
output += `%${prefix}-text-${value} {
74+
color: $${prefix}-${colorToken[value].enabled.name};
75+
76+
&-ia,
77+
&[data-variant="ia"] {
78+
color: $${prefix}-${colorToken[value].enabled.name};
79+
${generateInteractiveVariants(colorToken[value], 'color')}
80+
}
81+
}
82+
`;
83+
84+
// text and background colors
85+
output += `
86+
%${prefix}-bg-${value} {
87+
background-color: $${prefix}-${colorToken[value].enabled.name};
88+
color: $${prefix}-${colorToken[value].on.enabled.name};
89+
90+
&-ia,
91+
&[data-variant="ia"] {
92+
@extend %${prefix}-bg-${value};
93+
${generateInteractiveVariants(colorToken[value], 'background-color')}
94+
}
95+
96+
&-text-ia,
97+
&[data-variant="text-ia"] {
98+
color: $${prefix}-${colorToken[value].on.enabled.name};
99+
${generateInteractiveVariants(colorToken[value].on, 'color')}
100+
}
101+
}`;
102+
}
103+
104+
Object.keys(colorToken[value].bg).forEach((variant) => {
105+
if (colorToken[value].bg[variant].enabled) {
106+
output += generateBGVariants(
107+
value,
108+
variant,
109+
colorToken[value].bg[variant],
110+
colorToken[value].on.bg
111+
);
112+
} else {
113+
Object.keys(colorToken[value].bg[variant]).forEach(
114+
(childVariant) => {
115+
output += generateBGVariants(
116+
value,
117+
variant + '-' + childVariant,
118+
colorToken[value].bg[variant][childVariant],
119+
colorToken[value].on.bg
120+
);
121+
}
122+
);
123+
}
124+
});
125+
});
126+
127+
return output;
128+
};

‎scripts/zeplin-styleguide.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const correctColor = (key) => {
3131
) {
3232
correctKey = `${correctKey}-enabled`;
3333
}
34-
return correctKey.replace('backgroundonly', 'bg');
34+
return correctKey.replace('background', 'bg');
3535
};
3636

3737
const combineDataRecursive = (data, currentKey, keyArray, value) => {

‎source/_patterns/logo/_examples.demonstration.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-red {
2222
background-color: $db-colors-primary-enabled;
2323

24-
--db-logo-color: #{$db-colors-neutral-enabled};
24+
--db-logo-color: #{$db-colors-neutral-bg-0-enabled};
2525
}
2626
&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-image {
2727
background-image: url(https://marketingportal.extranet.deutschebahn.com/sites/default/files/2021-12-13/Ausn01.png);
@@ -36,7 +36,7 @@
3636
width: 600px;
3737
height: 340px;
3838

39-
--db-logo-backgroundcolor: #{$db-colors-neutral-enabled};
39+
--db-logo-backgroundcolor: #{$db-colors-neutral-bg-0-enabled};
4040
}
4141
}
4242
}

‎source/_patterns/spacings/_examples.demonstration.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.DO-NOT-COPY-THIS-CLASS-example-spacing {
22
height: 8px;
3-
background-color: $db-colors-primary-bg-enabled;
3+
background-color: $db-colors-primary-bg-light-enabled;
44
}

‎source/css/db-ui-base.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
@import "../../build/scss/variables";
22
@import "../../build/scss/font-faces";
33
@import "../../build/scss/typography-classes";
4+
@import "../../build/scss/color-placeholder";
5+
@import "../../build/scss/color-classes";
46

7+
/* body {
8+
font-family: var(--asset-font-db-screensans-regular-name);
9+
} */
510
body,
611
button,
712
input,

‎source/css/pattern-scaffolding.css‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
.sg-colors {
3232
display: grid;
3333
grid-gap: var(--pl-grid-gap);
34-
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
34+
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
3535
list-style: none !important;
36-
margin: 0 !important;
36+
margin: 0.75rem 0 2 rem;
3737
padding: 0 !important;
3838
}
3939

@@ -44,13 +44,15 @@
4444
flex: auto;
4545
flex: auto;
4646
margin: 0 0.5em 0.5em 0;
47-
max-width: 14em;
47+
max-width: 20em;
4848
min-width: 5em;
49-
padding: 0.3em;
49+
padding: 0.75em;
50+
font-size: 16px;
51+
line-height: 1rem;
5052
}
5153

5254
.sg-swatch {
53-
border: #000 dashed 1px;
55+
border: rgba(0, 0, 0, 0.06) solid 1px;
5456
border-radius: 5px;
5557
display: flex;
5658
margin-bottom: 0.3em;
@@ -59,12 +61,15 @@
5961
}
6062

6163
.sg-label {
62-
font-size: 90%;
63-
line-height: 1;
64+
font-size: 0.75rem;
65+
}
66+
67+
.sg-label strong {
68+
font-size: 1.2em;
6469
}
6570

6671
.sg-swatch .sg-label {
67-
font-size: 80%;
72+
font-size: 0.7rem;
6873
margin: auto;
6974
}
7075

0 commit comments

Comments
 (0)