@gitlab/ui 72.13.0 → 72.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +2 -2
- package/tailwind.defaults.js +64 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [72.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.13.0...v72.14.0) (2024-01-30)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **tailwindcss:** extend config with colors and spacing scale ([2c7a006](https://gitlab.com/gitlab-org/gitlab-ui/commit/2c7a006e4c605c58a753d8bfbc8ceb0bdc101cf8))
|
|
7
|
+
|
|
1
8
|
# [72.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.12.4...v72.13.0) (2024-01-30)
|
|
2
9
|
|
|
3
10
|
|
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "72.
|
|
3
|
+
"version": "72.14.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"build-tokens": "node ./bin/build_tokens.js",
|
|
31
31
|
"clean": "rm -r dist storybook src/scss/utilities.scss",
|
|
32
32
|
"cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
|
|
33
|
-
"cy:edge": "cypress run --browser edge --env grepTags=-@a11y",
|
|
33
|
+
"cy:edge": "cypress run --browser edge --env grepTags=-@a11y+-@storybook",
|
|
34
34
|
"cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
|
|
35
35
|
"start": "yarn storybook",
|
|
36
36
|
"storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
|
package/tailwind.defaults.js
CHANGED
|
@@ -1,5 +1,68 @@
|
|
|
1
|
+
const baseColorTokens = require('./src/tokens/color.tokens.json');
|
|
2
|
+
const themeColorTokens = require('./src/tokens/color.theme.tokens.json');
|
|
3
|
+
|
|
4
|
+
const baseColors = ['blue', 'gray', 'green', 'orange', 'purple', 'red'].reduce((acc, color) => {
|
|
5
|
+
acc[color] = {};
|
|
6
|
+
Object.entries(baseColorTokens[color]).forEach(([shade, { $value }]) => {
|
|
7
|
+
acc[color][shade] = $value;
|
|
8
|
+
});
|
|
9
|
+
return acc;
|
|
10
|
+
}, {});
|
|
11
|
+
|
|
12
|
+
const themeColors = Object.entries(themeColorTokens.theme).reduce((acc, [color, shades]) => {
|
|
13
|
+
const colorKey = `theme-${color}`;
|
|
14
|
+
acc[colorKey] = {};
|
|
15
|
+
Object.entries(shades).forEach(([shade, { $value }]) => {
|
|
16
|
+
acc[colorKey][shade] = $value;
|
|
17
|
+
});
|
|
18
|
+
return acc;
|
|
19
|
+
}, {});
|
|
20
|
+
|
|
21
|
+
const gridSize = 0.5; // rem
|
|
22
|
+
const spacing = Object.fromEntries(
|
|
23
|
+
Object.entries({
|
|
24
|
+
0: 0,
|
|
25
|
+
1: 0.25,
|
|
26
|
+
2: 0.5,
|
|
27
|
+
3: 1,
|
|
28
|
+
4: 1.5,
|
|
29
|
+
5: 2,
|
|
30
|
+
6: 3,
|
|
31
|
+
7: 4,
|
|
32
|
+
8: 5,
|
|
33
|
+
9: 6,
|
|
34
|
+
10: 7,
|
|
35
|
+
11: 8,
|
|
36
|
+
'11-5': 9,
|
|
37
|
+
12: 10,
|
|
38
|
+
13: 12,
|
|
39
|
+
15: 15,
|
|
40
|
+
20: 20,
|
|
41
|
+
26: 26,
|
|
42
|
+
28: 28,
|
|
43
|
+
30: 30,
|
|
44
|
+
31: 31,
|
|
45
|
+
34: 34,
|
|
46
|
+
48: 48,
|
|
47
|
+
62: 62,
|
|
48
|
+
75: 75,
|
|
49
|
+
80: 80,
|
|
50
|
+
88: 88,
|
|
51
|
+
}).map(([scale, factor]) => {
|
|
52
|
+
return [scale, `${factor * gridSize}rem`];
|
|
53
|
+
})
|
|
54
|
+
);
|
|
55
|
+
|
|
1
56
|
/** @type {import('tailwindcss').Config} */
|
|
2
57
|
module.exports = {
|
|
3
58
|
prefix: 'gl-',
|
|
4
|
-
|
|
59
|
+
theme: {
|
|
60
|
+
colors: {
|
|
61
|
+
white: baseColorTokens.white.$value,
|
|
62
|
+
black: baseColorTokens.black.$value,
|
|
63
|
+
...baseColors,
|
|
64
|
+
...themeColors,
|
|
65
|
+
},
|
|
66
|
+
spacing,
|
|
67
|
+
},
|
|
5
68
|
};
|