@gitlab/ui 95.5.0 → 95.6.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/package.json +2 -2
  5. package/src/components/base/toggle/toggle.scss +60 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "95.5.0",
3
+ "version": "95.6.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -85,7 +85,6 @@
85
85
  "lodash": "^4.17.20",
86
86
  "marked": "^12.0.0",
87
87
  "marked-bidi": "^1.0.8",
88
- "merge-cobertura": "^1.0.2",
89
88
  "popper.js": "^1.16.1",
90
89
  "portal-vue": "^2.1.7",
91
90
  "vue-functional-data-merge": "^3.1.0",
@@ -169,6 +168,7 @@
169
168
  "jest-environment-jsdom": "29.7.0",
170
169
  "jest-image-snapshot": "^6.4.0",
171
170
  "markdownlint-cli": "^0.29.0",
171
+ "merge-cobertura": "^1.0.2",
172
172
  "mockdate": "^2.0.5",
173
173
  "module-alias": "^2.2.2",
174
174
  "npm-run-all": "^4.1.5",
package/src/components/base/toggle/toggle.scss CHANGED
@@ -54,10 +54,14 @@ $toggle-height: 2.5 * $grid-size;
54
54
  }
55
55
  }
56
56
 
57
+ .gl-description-label {
58
+ @apply gl-text-subtle;
59
+ }
60
+
57
61
  .gl-help-label {
58
62
  @apply gl-mt-3;
59
- @apply gl-text-gray-500;
60
63
  @apply gl-font-normal;
64
+ @apply gl-text-subtle;
61
65
  }
62
66
 
63
67
  .gl-toggle-label-inline {
@@ -78,6 +82,7 @@ $toggle-height: 2.5 * $grid-size;
78
82
 
79
83
  .gl-toggle-label {
80
84
  @apply gl-font-bold;
85
+ @apply gl-text-strong;
81
86
  }
82
87
 
83
88
  .gl-toggle {
@@ -86,7 +91,8 @@ $toggle-height: 2.5 * $grid-size;
86
91
  @apply gl-justify-center;
87
92
  @apply gl-border-0;
88
93
  @apply gl-cursor-pointer;
89
- @apply gl-bg-gray-600;
94
+ color: var(--gl-toggle-switch-icon-color-unchecked-default);
95
+ background-color: var(--gl-action-strong-neutral-background-color-default);
90
96
  position: relative;
91
97
  width: $toggle-width;
92
98
  height: $toggle-height;
@@ -102,11 +108,19 @@ $toggle-height: 2.5 * $grid-size;
102
108
  @apply gl-bg-transparent;
103
109
  }
104
110
 
105
- &:hover,
106
- &:active,
107
- &:focus,
108
- &:focus:active {
109
- @apply gl-bg-gray-700;
111
+ &:hover {
112
+ color: var(--gl-toggle-switch-icon-color-unchecked-hover);
113
+ background-color: var(--gl-action-strong-neutral-background-color-hover);
114
+ }
115
+
116
+ &:focus {
117
+ color: var(--gl-toggle-switch-icon-color-unchecked-focus);
118
+ background-color: var(--gl-action-strong-neutral-background-color-focus);
119
+ }
120
+
121
+ &:active {
122
+ color: var(--gl-toggle-switch-icon-color-unchecked-active);
123
+ background-color: var(--gl-action-strong-neutral-background-color-active);
110
124
  }
111
125
 
112
126
  &:active,
@@ -121,7 +135,6 @@ $toggle-height: 2.5 * $grid-size;
121
135
 
122
136
  .toggle-icon {
123
137
  @apply gl-rounded-full;
124
- @apply gl-bg-white;
125
138
  position: absolute;
126
139
  @apply gl-inline-flex;
127
140
  @apply gl-items-center;
@@ -130,30 +143,60 @@ $toggle-height: 2.5 * $grid-size;
130
143
  @apply gl-transition-all;
131
144
  @apply gl-justify-center;
132
145
  @apply gl-p-1;
146
+ background-color: var(--gl-action-strong-neutral-foreground-color-default);
147
+
148
+ &:hover {
149
+ background-color: var(--gl-action-strong-neutral-foreground-color-hover);
150
+ }
151
+
152
+ &:focus {
153
+ background-color: var(--gl-action-strong-neutral-foreground-color-focus);
154
+ }
155
+
156
+ &:active {
157
+ background-color: var(--gl-action-strong-neutral-foreground-color-active);
158
+ }
133
159
 
134
160
  > svg {
135
161
  @apply gl-w-4;
136
162
  @apply gl-h-4;
137
- @apply gl-fill-gray-600;
138
163
  @apply gl-align-baseline;
139
164
  }
140
165
  }
141
166
 
142
167
  &.is-checked {
143
- @apply gl-bg-blue-500;
168
+ color: var(--gl-toggle-switch-icon-color-checked-default);
169
+ background-color: var(--gl-action-strong-confirm-background-color-default);
144
170
 
145
- &:hover,
146
- &:active,
147
- &:focus,
148
- &:focus:active {
149
- @apply gl-bg-blue-600;
171
+ &:hover {
172
+ color: var(--gl-toggle-switch-icon-color-checked-hover);
173
+ background-color: var(--gl-action-strong-confirm-background-color-hover);
174
+ }
175
+
176
+ &:focus {
177
+ color: var(--gl-toggle-switch-icon-color-checked-focus);
178
+ background-color: var(--gl-action-strong-confirm-background-color-focus);
179
+ }
180
+
181
+ &:active {
182
+ color: var(--gl-toggle-switch-icon-color-checked-active);
183
+ background-color: var(--gl-action-strong-confirm-background-color-active);
150
184
  }
151
185
 
152
186
  .toggle-icon {
153
187
  transform: translateX($toggle-translate-width);
188
+ background-color: var(--gl-action-strong-confirm-foreground-color-default);
189
+
190
+ &:hover {
191
+ background-color: var(--gl-action-strong-confirm-foreground-color-hover);
192
+ }
193
+
194
+ &:focus {
195
+ background-color: var(--gl-action-strong-confirm-foreground-color-focus);
196
+ }
154
197
 
155
- > svg {
156
- @apply gl-fill-blue-500;
198
+ &:active {
199
+ background-color: var(--gl-action-strong-confirm-foreground-color-active);
157
200
  }
158
201
  }
159
202
  }