@gitlab/ui 128.14.3 → 128.15.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/dist/components/base/form/form_checkbox/form_checkbox.js +15 -1
- package/dist/components/base/form/form_checkbox/form_checkbox_group.js +5 -0
- package/dist/components/base/new_dropdowns/listbox/listbox.js +43 -24
- package/dist/components/base/new_dropdowns/listbox/listbox_item.js +17 -1
- package/dist/components/base/new_dropdowns/listbox/mock_data.js +15 -5
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.js +1 -1
- package/package.json +3 -3
- package/src/components/base/form/form_checkbox/form_checkbox.vue +17 -1
- package/src/components/base/form/form_checkbox/form_checkbox_group.vue +7 -0
- package/src/components/base/new_dropdowns/dropdown_item.scss +31 -11
- package/src/components/base/new_dropdowns/listbox/listbox.vue +46 -20
- package/src/components/base/new_dropdowns/listbox/listbox_item.vue +20 -1
- package/src/components/base/new_dropdowns/listbox/mock_data.js +11 -0
- package/src/tokens/build/css/tokens.css +1 -1
- package/src/tokens/build/css/tokens.dark.css +1 -1
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +3 -3
- package/src/tokens/build/docs/tokens-tailwind-docs.json +4 -4
- package/src/tokens/build/figma/constants.dark.json +1 -1
- package/src/tokens/build/figma/constants.json +1 -1
- package/src/tokens/build/figma/mode.dark.json +4 -2
- package/src/tokens/build/figma/mode.json +4 -2
- package/src/tokens/build/js/tokens.js +1 -1
- package/src/tokens/build/json/tokens.dark.json +9 -5
- package/src/tokens/build/json/tokens.json +10 -6
- package/src/tokens/build/scss/_tokens.dark.scss +1 -1
- package/src/tokens/build/scss/_tokens.scss +1 -1
- package/src/tokens/constant/border.tokens.json +1 -1
- package/src/tokens/semantic/control.tokens.json +4 -1
- package/src/tokens/semantic/heading.tokens.json +3 -1
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
9
9
|
"$extensions": {
|
|
10
10
|
"com.figma.scopes": [
|
|
11
|
-
"
|
|
11
|
+
"STROKE_COLOR"
|
|
12
12
|
]
|
|
13
13
|
},
|
|
14
14
|
"filePath": "src/tokens/constant/border.tokens.json",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"$description": "Used when a border needs to be present, but not visibly perceived.",
|
|
20
20
|
"$extensions": {
|
|
21
21
|
"com.figma.scopes": [
|
|
22
|
-
"
|
|
22
|
+
"STROKE_COLOR"
|
|
23
23
|
]
|
|
24
24
|
},
|
|
25
25
|
"key": "{border.color.transparent}"
|
|
@@ -7871,7 +7871,9 @@
|
|
|
7871
7871
|
"$value": "1rem",
|
|
7872
7872
|
"$type": "dimension",
|
|
7873
7873
|
"$extensions": {
|
|
7874
|
-
"com.figma.scopes": [
|
|
7874
|
+
"com.figma.scopes": [
|
|
7875
|
+
"PARAGRAPH_SPACING"
|
|
7876
|
+
]
|
|
7875
7877
|
},
|
|
7876
7878
|
"filePath": "src/tokens/semantic/heading.tokens.json",
|
|
7877
7879
|
"isSource": true,
|
|
@@ -7879,7 +7881,9 @@
|
|
|
7879
7881
|
"$value": "{spacing-scale.5}",
|
|
7880
7882
|
"$type": "dimension",
|
|
7881
7883
|
"$extensions": {
|
|
7882
|
-
"com.figma.scopes": [
|
|
7884
|
+
"com.figma.scopes": [
|
|
7885
|
+
"PARAGRAPH_SPACING"
|
|
7886
|
+
]
|
|
7883
7887
|
},
|
|
7884
7888
|
"key": "{heading.default.margin.bottom}"
|
|
7885
7889
|
},
|
|
@@ -35693,7 +35697,7 @@
|
|
|
35693
35697
|
"placeholder": {
|
|
35694
35698
|
"color": {
|
|
35695
35699
|
"key": "{control.placeholder.color}",
|
|
35696
|
-
"$value": "#
|
|
35700
|
+
"$value": "#737278",
|
|
35697
35701
|
"$type": "color",
|
|
35698
35702
|
"$description": "Used for placeholder text within inputs.",
|
|
35699
35703
|
"$extensions": {
|
|
@@ -35704,7 +35708,7 @@
|
|
|
35704
35708
|
"filePath": "src/tokens/semantic/control.tokens.json",
|
|
35705
35709
|
"isSource": true,
|
|
35706
35710
|
"original": {
|
|
35707
|
-
"$value": "{
|
|
35711
|
+
"$value": "{color.neutral.500}",
|
|
35708
35712
|
"$type": "color",
|
|
35709
35713
|
"$description": "Used for placeholder text within inputs.",
|
|
35710
35714
|
"$extensions": {
|
|
@@ -934,6 +934,7 @@ $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled f
|
|
|
934
934
|
$gl-control-border-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
|
|
935
935
|
$gl-control-border-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
|
|
936
936
|
$gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
|
|
937
|
+
$gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
|
|
937
938
|
$gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators.
|
|
938
939
|
$gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
|
|
939
940
|
$gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
|
|
@@ -1194,7 +1195,6 @@ $gl-control-border-color-error: $gl-feedback-danger-border-color; // Used for in
|
|
|
1194
1195
|
$gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
|
|
1195
1196
|
$gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
|
|
1196
1197
|
$gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
|
|
1197
|
-
$gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
|
|
1198
1198
|
$gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
|
|
1199
1199
|
$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
|
|
1200
1200
|
$gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
|
|
@@ -917,6 +917,7 @@ $gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled f
|
|
|
917
917
|
$gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
|
|
918
918
|
$gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
|
|
919
919
|
$gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
|
|
920
|
+
$gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
|
|
920
921
|
$gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
|
|
921
922
|
$gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
|
|
922
923
|
$gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
|
|
@@ -1188,7 +1189,6 @@ $gl-control-border-color-error: $gl-feedback-danger-border-color; // Used for in
|
|
|
1188
1189
|
$gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
|
|
1189
1190
|
$gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
|
|
1190
1191
|
$gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
|
|
1191
|
-
$gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
|
|
1192
1192
|
$gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
|
|
1193
1193
|
$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
|
|
1194
1194
|
$gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
|
|
@@ -247,7 +247,10 @@
|
|
|
247
247
|
},
|
|
248
248
|
"placeholder": {
|
|
249
249
|
"color": {
|
|
250
|
-
"$value":
|
|
250
|
+
"$value": {
|
|
251
|
+
"default": "{color.neutral.500}",
|
|
252
|
+
"dark": "{color.neutral.400}"
|
|
253
|
+
},
|
|
251
254
|
"$type": "color",
|
|
252
255
|
"$description": "Used for placeholder text within inputs.",
|
|
253
256
|
"$extensions": {
|