@gitlab/ui 72.0.0 → 72.2.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 +15 -0
- package/dist/tokens/common_story_options.js +80 -4
- 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/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/package.json +17 -17
- package/src/components/base/alert/alert.stories.js +1 -1
- package/src/scss/utilities.scss +32 -0
- package/src/scss/utility-mixins/box-shadow.scss +4 -0
- package/src/scss/utility-mixins/color.scss +4 -0
- package/src/scss/utility-mixins/flex.scss +4 -0
- package/src/scss/utility-mixins/sizing.scss +4 -0
- package/src/tokens/common_story_options.js +81 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
# [72.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.1.0...v72.2.0) (2023-12-21)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **DesignTokens:** add color contrast score and level to stories ([f75751b](https://gitlab.com/gitlab-org/gitlab-ui/commit/f75751ba1bcfd0da6c5672483678f598d14b4041))
|
|
7
|
+
|
|
8
|
+
# [72.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.0.0...v72.1.0) (2023-12-18)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **css:** Add gl-align-self-baseline utility class ([7291f50](https://gitlab.com/gitlab-org/gitlab-ui/commit/7291f50cac7a4f9a2ca5e43390fad6896906022a))
|
|
14
|
+
* **CSS:** add `gl-h-10` utility CSS class ([75c253a](https://gitlab.com/gitlab-org/gitlab-ui/commit/75c253abc389a126e9ffa37ec4d64a6c87ffc807))
|
|
15
|
+
|
|
1
16
|
# [72.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.11.1...v72.0.0) (2023-12-18)
|
|
2
17
|
|
|
3
18
|
|
|
@@ -1,16 +1,74 @@
|
|
|
1
|
-
import { colorFromBackground } from '../utils/utils';
|
|
1
|
+
import { colorFromBackground, relativeLuminance, rgbFromHex } from '../utils/utils';
|
|
2
|
+
import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
|
|
2
3
|
|
|
4
|
+
const CONTRAST_LEVELS = [{
|
|
5
|
+
grade: 'F',
|
|
6
|
+
min: 0,
|
|
7
|
+
max: 3
|
|
8
|
+
}, {
|
|
9
|
+
grade: 'AA+',
|
|
10
|
+
min: 3,
|
|
11
|
+
max: 4.5
|
|
12
|
+
}, {
|
|
13
|
+
grade: 'AA',
|
|
14
|
+
min: 4.5,
|
|
15
|
+
max: 7
|
|
16
|
+
}, {
|
|
17
|
+
grade: 'AAA',
|
|
18
|
+
min: 7,
|
|
19
|
+
max: 22
|
|
20
|
+
}];
|
|
3
21
|
const methods = {
|
|
22
|
+
isAlpha(value) {
|
|
23
|
+
return value.startsWith('rgba(');
|
|
24
|
+
},
|
|
4
25
|
getTokenName(name, key) {
|
|
5
26
|
return [name, key].filter(Boolean).join('.');
|
|
6
27
|
},
|
|
7
28
|
getTextColorClass(value) {
|
|
8
|
-
if (
|
|
29
|
+
if (this.isAlpha(value)) return '';
|
|
9
30
|
const textColorVariant = colorFromBackground(value, 4.5);
|
|
10
31
|
return {
|
|
11
32
|
'gl-text-gray-950': textColorVariant === 'dark',
|
|
12
33
|
'gl-text-white': textColorVariant === 'light'
|
|
13
34
|
};
|
|
35
|
+
},
|
|
36
|
+
getColorContrast() {
|
|
37
|
+
let foreground = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
|
|
38
|
+
let background = arguments.length > 1 ? arguments[1] : undefined;
|
|
39
|
+
const foregroundColor = {
|
|
40
|
+
light: WHITE,
|
|
41
|
+
dark: GRAY_950
|
|
42
|
+
};
|
|
43
|
+
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
|
|
44
|
+
const foregroundLuminance = relativeLuminance(rgbFromHex(foregroundColor[foreground])) + 0.05;
|
|
45
|
+
const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
|
|
46
|
+
let score = foregroundLuminance / backgroundLuminance;
|
|
47
|
+
if (backgroundLuminance > foregroundLuminance) {
|
|
48
|
+
score = 1 / score;
|
|
49
|
+
}
|
|
50
|
+
const level = CONTRAST_LEVELS.find(_ref => {
|
|
51
|
+
let {
|
|
52
|
+
min,
|
|
53
|
+
max
|
|
54
|
+
} = _ref;
|
|
55
|
+
return score >= min && score < max;
|
|
56
|
+
});
|
|
57
|
+
return {
|
|
58
|
+
score: (Math.round(score * 10) / 10).toFixed(1),
|
|
59
|
+
level
|
|
60
|
+
};
|
|
61
|
+
},
|
|
62
|
+
getColorContrastClass(foreground, background) {
|
|
63
|
+
const {
|
|
64
|
+
grade
|
|
65
|
+
} = this.getColorContrast(foreground, background).level;
|
|
66
|
+
const isFail = grade === 'F';
|
|
67
|
+
const classes = {
|
|
68
|
+
light: isFail ? 'gl-inset-border-1-red-500 gl-text-red-500' : 'gl-text-gray-950',
|
|
69
|
+
dark: isFail ? 'gl-inset-border-1-red-300 gl-text-red-300' : 'gl-text-white'
|
|
70
|
+
};
|
|
71
|
+
return classes[foreground];
|
|
14
72
|
}
|
|
15
73
|
};
|
|
16
74
|
const template = `
|
|
@@ -20,12 +78,30 @@ const template = `
|
|
|
20
78
|
<li
|
|
21
79
|
v-for="(token, key) in tokens"
|
|
22
80
|
:key="key"
|
|
23
|
-
class="gl-display-flex gl-justify-content-space-between gl-gap-3 gl-p-3"
|
|
81
|
+
class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
|
|
24
82
|
:class="getTextColorClass(token.$value)"
|
|
25
83
|
:style="{ backgroundColor: token.$value }"
|
|
26
84
|
>
|
|
27
85
|
<code class="gl-reset-color">{{ getTokenName(name, key) }}</code>
|
|
28
|
-
<
|
|
86
|
+
<div class="gl-display-flex gl-align-items-center gl-gap-3">
|
|
87
|
+
<code class="gl-reset-color">{{ token.$value }}</code>
|
|
88
|
+
<code
|
|
89
|
+
v-if="!isAlpha(token.$value)"
|
|
90
|
+
class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-gray-900"
|
|
91
|
+
:class="getColorContrastClass('dark', token.$value)"
|
|
92
|
+
>
|
|
93
|
+
{{ getColorContrast('dark', token.$value).level.grade }}
|
|
94
|
+
{{ getColorContrast('dark', token.$value).score }}
|
|
95
|
+
</code>
|
|
96
|
+
<code
|
|
97
|
+
v-if="!isAlpha(token.$value)"
|
|
98
|
+
class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-white"
|
|
99
|
+
:class="getColorContrastClass('light', token.$value)"
|
|
100
|
+
>
|
|
101
|
+
{{ getColorContrast('light', token.$value).level.grade }}
|
|
102
|
+
{{ getColorContrast('light', token.$value).score }}
|
|
103
|
+
</code>
|
|
104
|
+
</div>
|
|
29
105
|
</li>
|
|
30
106
|
</ul>
|
|
31
107
|
`;
|
package/dist/tokens/js/tokens.js
CHANGED