Skip to content

Commit b166ff5

Browse files
PKulkoRaccoonGangviktorrusakov
PKulkoRaccoonGang
and
viktorrusakov
committed
[BD-46] feat: refactoring design tokens folders structure (openedx#2069)
* feat: refactoring design tokens folders structure * fix: add missing "type" attribute to tokens and consider token's theme in color-yiq function * docs: update docstring for colorYiq function --------- Co-authored-by: Viktor Rusakov <[email protected]>
1 parent 6a55c97 commit b166ff5

File tree

118 files changed

+1383
-1261
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+1383
-1261
lines changed

‎scss/core/css/utility-classes.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* IMPORTANT: This file is the result of assembling design tokens
33
* Do not edit directly
4-
* Generated on Thu, 16 Feb 2023 10:37:12 GMT
4+
* Generated on Fri, 24 Feb 2023 12:30:21 GMT
55
*/
66

77
.bg-dark {

‎scss/core/css/variables.css

+419-420
Large diffs are not rendered by default.

‎tokens/sass-helpers.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@ const chroma = require('chroma-js');
77
* based on contrast value of the input color
88
*
99
* @param color - chroma-js color instance
10-
* @param {String} [light] - light color variant, defaults to 'yiq-text-light' from ./src/global/other.json
11-
* @param {String} [dark] - dark color variant, defaults to 'yiq-text-dark' from ./src/global/other.json
12-
* @param {Number} [threshold] - contrast threshold, defaults to 'yiq-contrasted-threshold'
13-
* from ./src/global/other.json
10+
* @param {String} [themeVariant] - theme variant name that will be used to find default contrast colors
11+
* @param {String} [light] - light color variant from ./src/themes/{themeVariant}/global/other.json
12+
* @param {String} [dark] - dark color variant from ./src/themes/{themeVariant}/global/other.json
13+
* @param {Number} [threshold] - contrast threshold from ./src/core/global/other.json
1414
* @return chroma-js color instance (one of dark or light variants)
1515
*/
16-
function colorYiq(color, light, dark, threshold) {
17-
const defaultsFile = fs.readFileSync(path.resolve(__dirname, 'src', 'global', 'other.json'), 'utf8');
18-
const defaults = JSON.parse(defaultsFile);
16+
function colorYiq(color, light, dark, threshold, themeVariant = 'light') {
17+
const defaultThresholdFile = fs.readFileSync(path.resolve(__dirname, 'src/core/global', 'other.json'), 'utf8');
18+
const defaultThreshold = JSON.parse(defaultThresholdFile)['yiq-contrasted-threshold'];
1919

20+
const defaultColorsFile = fs.readFileSync(path.resolve(__dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8');
2021
const {
2122
'yiq-text-dark': defaultDark,
2223
'yiq-text-light': defaultLight,
23-
'yiq-contrasted-threshold': defaultThreshold,
24-
} = defaults;
24+
} = JSON.parse(defaultColorsFile);
2525

2626
const contrastThreshold = threshold || defaultThreshold;
2727
const lightColor = light || defaultLight;

‎tokens/src/alias/size.json ‎tokens/src/core/alias/size.json

File renamed without changes.

‎tokens/src/components/ActionRow.json ‎tokens/src/core/components/ActionRow.json

File renamed without changes.

‎tokens/src/core/components/Alert.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"spacing": {
3+
"alert": {
4+
"padding": {
5+
"y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" },
6+
"x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" }
7+
},
8+
"margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" },
9+
"actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" },
10+
"icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" }
11+
}
12+
},
13+
"typography": {
14+
"alert": {
15+
"font": {
16+
"weight-link": { "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" },
17+
"size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" }
18+
},
19+
"line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" }
20+
}
21+
},
22+
"size": {
23+
"alert": {
24+
"border": {
25+
"radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" },
26+
"width": { "value": "0", "type": "dimension", "source": "$alert-border-width" }
27+
}
28+
}
29+
}
30+
}

‎tokens/src/core/components/Annotation.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"spacing": {
3+
"annotation": {
4+
"padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" },
5+
"arrow-side": {
6+
"margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" }
7+
}
8+
}
9+
},
10+
"typography": {
11+
"annotation": {
12+
"font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" },
13+
"line-height": { "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height" }
14+
}
15+
},
16+
"size": {
17+
"annotation": {
18+
"arrow-border": {
19+
"width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" }
20+
},
21+
"max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" },
22+
"border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" }
23+
}
24+
}
25+
}

‎tokens/src/components/Avatar.json ‎tokens/src/core/components/Avatar.json

-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
{
2-
"color": {
3-
"avatar": {
4-
"border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" }
5-
}
6-
},
72
"size": {
83
"avatar": {
94
"base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" },

‎tokens/src/components/AvatarButton.json ‎tokens/src/core/components/AvatarButton.json

File renamed without changes.

‎tokens/src/core/components/Badge.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"spacing": {
3+
"badge": {
4+
"padding": {
5+
"x": {
6+
"base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" },
7+
"pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" }
8+
},
9+
"y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" }
10+
}
11+
}
12+
},
13+
"typography": {
14+
"badge": {
15+
"font": {
16+
"size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" },
17+
"weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight" }
18+
}
19+
}
20+
},
21+
"size": {
22+
"badge": {
23+
"border-radius": {
24+
"base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" },
25+
"pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" }
26+
},
27+
"focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" }
28+
}
29+
},
30+
"transition": {
31+
"badge": { "value": "none", "type": "transition", "source": "$badge-transition" }
32+
}
33+
}

‎tokens/src/components/Breadcrumb.json ‎tokens/src/core/components/Breadcrumb.json

-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,4 @@
11
{
2-
"color": {
3-
"breadcrumb": {
4-
"bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
5-
"base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
6-
"divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" },
7-
"active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
8-
"inverse": {
9-
"base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
10-
"active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" },
11-
"spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" }
12-
}
13-
}
14-
},
152
"typography": {
163
"breadcrumb": {
174
"font-size": { "value": "inherit", "type": "dimension", "source": "$breadcrumb-font-size" }

‎tokens/src/core/components/Bubble.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"spacing": {
3+
"bubble": {
4+
"expandable-padding": {
5+
"y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" },
6+
"x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" }
7+
}
8+
}
9+
}
10+
}

‎tokens/src/components/Button/core.json ‎tokens/src/core/components/Button/core.json

-22
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
{
2-
"color": {
3-
"btn": {
4-
"disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" }
5-
}
6-
},
72
"spacing": {
83
"btn": {
94
"padding": {
@@ -80,23 +75,6 @@
8075
}
8176
}
8277
},
83-
"elevation": {
84-
"btn": {
85-
"box-shadow": {
86-
"base": {
87-
"value": "none",
88-
"type": "shadow",
89-
"source": "$btn-box-shadow"
90-
},
91-
"active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" }
92-
}
93-
}
94-
},
95-
"other": {
96-
"btn": {
97-
"disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" }
98-
}
99-
},
10078
"size": {
10179
"btn": {
10280
"border": {

‎tokens/src/components/Card.json ‎tokens/src/core/components/Card.json

-32
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,4 @@
11
{
2-
"color": {
3-
"card": {
4-
"base": { "value": "inherit", "type": "color", "source": "$card-color" },
5-
"bg": {
6-
"base": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" },
7-
"dark": { "value": "{color.primary.500}", "type": "color", "source": "$card-bg-dark" },
8-
"muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" }
9-
},
10-
"border": {
11-
"base": {
12-
"value": "{color.black}",
13-
"type": "color",
14-
"source": "$card-border-color",
15-
"modify": [{ "type": "alpha", "amount": 0.125 }]
16-
},
17-
"focus": {
18-
"base": {
19-
"value": "{color.black}",
20-
"type": "color",
21-
"source": "$card-border-focus-color",
22-
"modify": [{ "type": "alpha", "amount": 0.5 }]
23-
},
24-
"dark": {
25-
"value": "{color.theme.focus.primary}",
26-
"type": "color",
27-
"source": "$card-border-focus-color-dark"
28-
}
29-
}
30-
},
31-
"divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" }
32-
}
33-
},
342
"spacing": {
353
"card": {
364
"spacer": {

‎tokens/src/core/components/Carousel.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"size": {
3+
"carousel": {
4+
"control": {
5+
"width": {
6+
"base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" },
7+
"icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" }
8+
}
9+
},
10+
"indicator": {
11+
"width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
12+
"height": {
13+
"base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
14+
"area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
15+
}
16+
},
17+
"caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
18+
}
19+
},
20+
"spacing": {
21+
"carousel": {
22+
"indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" }
23+
}
24+
},
25+
"transition": {
26+
"carousel": {
27+
"base": {
28+
"value": "transform {transition.carousel.duration} ease-in-out",
29+
"type": "transition",
30+
"source": "$carousel-transition-duration"
31+
},
32+
"duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
33+
"indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
34+
"control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" }
35+
}
36+
}
37+
}

‎tokens/src/components/Chip.json ‎tokens/src/core/components/Chip.json

-17
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,4 @@
11
{
2-
"color": {
3-
"chip": {
4-
"text": {
5-
"light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" },
6-
"dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" }
7-
},
8-
"bg": {
9-
"light": { "value": "{color.light.500}", "type": "color", "source": "$chip-light-bg" },
10-
"dark": { "value": "{color.dark.200}", "type": "color", "source": "$chip-dark-bg" }
11-
}
12-
}
13-
},
142
"spacing": {
153
"chip": {
164
"margin": { "value": ".125rem", "type": "dimension", "source": "$chip-margin" },
@@ -22,11 +10,6 @@
2210
}
2311
}
2412
},
25-
"other": {
26-
"chip": {
27-
"opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" }
28-
}
29-
},
3013
"size": {
3114
"chip": {
3215
"border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" },

‎tokens/src/components/CloseButton.json ‎tokens/src/core/components/CloseButton.json

-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
{
2-
"color": {
3-
"close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" }
4-
},
52
"typography": {
63
"close-button": {
74
"font": {
@@ -13,10 +10,5 @@
1310
}
1411
}
1512
}
16-
},
17-
"elevation": {
18-
"close-button": {
19-
"text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" }
20-
}
2113
}
2214
}

‎tokens/src/components/Code.json ‎tokens/src/core/components/Code.json

-21
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
11
{
2-
"color": {
3-
"code": {
4-
"base": { "value": "#E83E8C", "type": "color", "source": "$code-color" },
5-
"kbd": {
6-
"base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" },
7-
"bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" }
8-
},
9-
"pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" }
10-
}
11-
},
122
"typography": {
133
"code": {
144
"font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" },
@@ -40,16 +30,5 @@
4030
}
4131
}
4232
}
43-
},
44-
"elevation": {
45-
"code": {
46-
"kbd": {
47-
"box-shadow": {
48-
"value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)",
49-
"type": "shadow",
50-
"source": "$kbd-box-shadow"
51-
}
52-
}
53-
}
5433
}
5534
}

‎tokens/src/components/Collapsible.json ‎tokens/src/core/components/Collapsible.json

File renamed without changes.

‎tokens/src/components/Container.json ‎tokens/src/core/components/Container.json

File renamed without changes.

‎tokens/src/components/DataTable.json ‎tokens/src/core/components/DataTable.json

-19
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,4 @@
11
{
2-
"color": {
3-
"data-table": {
4-
"bg": {
5-
"base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" },
6-
"is-loading": {
7-
"value": "{color.white}",
8-
"type": "color",
9-
"source": "$data-table-is-loading-bg",
10-
"modify": [{ "type": "alpha", "amount": 0.7 }]
11-
}
12-
},
13-
"border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
14-
}
15-
},
16-
"elevation": {
17-
"data-table": {
18-
"box-shadow": { "value": "{elevation.box-shadow.sm}", "source": "$data-table-box-shadow", "type": "shadow" }
19-
}
20-
},
212
"size": {
223
"data-table": {
234
"border": { "value": "1px", "type": "dimension", "source": "$data-table-border" },

0 commit comments

Comments
 (0)