@gitlab/ui 66.10.0 → 66.10.1
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 +9 -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/dist/utils/charts/theme.js +2 -2
- package/package.json +1 -1
- package/src/scss/storybook_dark_mode.scss +8 -2
- package/src/utils/charts/theme.js +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [66.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.10.0...v66.10.1) (2023-09-19)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* adjust dark mode preview text color ([2196116](https://gitlab.com/gitlab-org/gitlab-ui/commit/2196116088f4d5100ae8095f4716f04417eac75f))
|
|
7
|
+
* use CSS variables instead of JS literals for axis color ([6bc13ca](https://gitlab.com/gitlab-org/gitlab-ui/commit/6bc13ca9eb0d901feb71a263a4b6107cf3f82e15))
|
|
8
|
+
* **GlChart:** make chart legend text visible in dark mode ([0ec9e7c](https://gitlab.com/gitlab-org/gitlab-ui/commit/0ec9e7cfbc387d5bcdbf490ebd3e51ff6fa666ef))
|
|
9
|
+
|
|
1
10
|
# [66.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.9.0...v66.10.0) (2023-09-19)
|
|
2
11
|
|
|
3
12
|
|
package/dist/tokens/js/tokens.js
CHANGED
|
@@ -24,7 +24,7 @@ const axes = {
|
|
|
24
24
|
axisLabel: {
|
|
25
25
|
margin: 8,
|
|
26
26
|
show: true,
|
|
27
|
-
color: GRAY_600
|
|
27
|
+
color: `var(--gray-600, ${GRAY_600})`,
|
|
28
28
|
hideOverlap: true
|
|
29
29
|
},
|
|
30
30
|
axisLine: {
|
|
@@ -69,7 +69,7 @@ const createTheme = function () {
|
|
|
69
69
|
color: colorPaletteDefault,
|
|
70
70
|
backgroundColor: 'transparent',
|
|
71
71
|
textStyle: {
|
|
72
|
-
color: GRAY_900
|
|
72
|
+
color: `var(--gl-text-color, ${GRAY_900})`
|
|
73
73
|
},
|
|
74
74
|
markLine: {
|
|
75
75
|
silent: true,
|
package/package.json
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import 'variables';
|
|
2
|
+
|
|
1
3
|
// conditional overrides for dark mode for use in storybook.
|
|
2
4
|
// Because we only use application.css from gitlab (and not
|
|
3
5
|
// application_dark), we need to override some base rules so
|
|
@@ -9,7 +11,11 @@
|
|
|
9
11
|
|
|
10
12
|
.gl-dark {
|
|
11
13
|
--color-body-bg: #1f1f1f;
|
|
12
|
-
|
|
14
|
+
|
|
15
|
+
// Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
|
|
16
|
+
// e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
|
|
17
|
+
--gl-text-color: #{$gray-50};
|
|
18
|
+
--gray-600: #{$gray-300};
|
|
13
19
|
|
|
14
20
|
color-scheme: dark;
|
|
15
21
|
|
|
@@ -18,6 +24,6 @@
|
|
|
18
24
|
// We can delete these once $body-bg and $body-color
|
|
19
25
|
// variables in variables.scss are updated to use CSS custom properties
|
|
20
26
|
background-color: var(--color-body-bg);
|
|
21
|
-
color: var(--
|
|
27
|
+
color: var(--gl-text-color);
|
|
22
28
|
}
|
|
23
29
|
}
|
|
@@ -162,7 +162,7 @@ const axes = {
|
|
|
162
162
|
axisLabel: {
|
|
163
163
|
margin: 8,
|
|
164
164
|
show: true,
|
|
165
|
-
color: GRAY_600
|
|
165
|
+
color: `var(--gray-600, ${GRAY_600})`,
|
|
166
166
|
hideOverlap: true,
|
|
167
167
|
},
|
|
168
168
|
axisLine: {
|
|
@@ -209,7 +209,7 @@ export const createTheme = (options = {}) => ({
|
|
|
209
209
|
color: colorPaletteDefault,
|
|
210
210
|
backgroundColor: 'transparent',
|
|
211
211
|
textStyle: {
|
|
212
|
-
color: GRAY_900
|
|
212
|
+
color: `var(--gl-text-color, ${GRAY_900})`,
|
|
213
213
|
},
|
|
214
214
|
markLine: {
|
|
215
215
|
silent: true,
|