@gitlab/ui 72.2.0 → 72.3.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.
Files changed (24) 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/dist/tokens/css/tokens.css +7 -1
  5. package/dist/tokens/css/tokens.dark.css +73 -67
  6. package/dist/tokens/js/tokens.dark.js +73 -67
  7. package/dist/tokens/js/tokens.js +7 -1
  8. package/dist/tokens/json/tokens.dark.grouped.json +72 -66
  9. package/dist/tokens/json/tokens.dark.json +252 -126
  10. package/dist/tokens/json/tokens.grouped.json +6 -0
  11. package/dist/tokens/json/tokens.json +126 -0
  12. package/dist/tokens/scss/_tokens.dark.scss +73 -67
  13. package/dist/tokens/scss/_tokens.scss +7 -1
  14. package/dist/utility_classes.css +1 -1
  15. package/dist/utility_classes.css.map +1 -1
  16. package/package.json +21 -21
  17. package/src/components/base/avatar/avatar.scss +1 -0
  18. package/src/components/base/avatar/avatar.stories.js +13 -0
  19. package/src/scss/utilities.scss +30 -0
  20. package/src/scss/utility-mixins/display.scss +12 -0
  21. package/src/scss/utility-mixins/image.scss +8 -0
  22. package/src/scss/utility-mixins/index.scss +1 -0
  23. package/src/tokens/color.theme.dark.tokens.json +102 -66
  24. package/src/tokens/color.theme.tokens.json +36 -0
package/dist/tokens/json/tokens.grouped.json CHANGED
@@ -55,6 +55,7 @@
55
55
  "data-viz-orange-800": "#6f3500",
56
56
  "data-viz-orange-900": "#5e2f05",
57
57
  "data-viz-orange-950": "#4b2707",
58
+ "theme-indigo-10": "#f8f8ff",
58
59
  "theme-indigo-50": "#f1f1ff",
59
60
  "theme-indigo-100": "#dbdbf8",
60
61
  "theme-indigo-200": "#c7c7f2",
@@ -66,6 +67,7 @@
66
67
  "theme-indigo-800": "#303083",
67
68
  "theme-indigo-900": "#222261",
68
69
  "theme-indigo-950": "#14143d",
70
+ "theme-blue-10": "#e6ecf0",
69
71
  "theme-blue-50": "#cdd8e3",
70
72
  "theme-blue-100": "#b9cadc",
71
73
  "theme-blue-200": "#a6bdd5",
@@ -77,6 +79,7 @@
77
79
  "theme-blue-800": "#153c63",
78
80
  "theme-blue-900": "#0b2640",
79
81
  "theme-blue-950": "#04101c",
82
+ "theme-light-blue-10": "#eef3f7",
80
83
  "theme-light-blue-50": "#dde6ee",
81
84
  "theme-light-blue-100": "#c1d4e6",
82
85
  "theme-light-blue-200": "#a0bedc",
@@ -88,6 +91,7 @@
88
91
  "theme-light-blue-800": "#0e4d8d",
89
92
  "theme-light-blue-900": "#0c4277",
90
93
  "theme-light-blue-950": "#0a3764",
94
+ "theme-green-10": "#eef4ef",
91
95
  "theme-green-50": "#dde9de",
92
96
  "theme-green-100": "#b1d6b5",
93
97
  "theme-green-200": "#8cc497",
@@ -99,6 +103,7 @@
99
103
  "theme-green-800": "#155635",
100
104
  "theme-green-900": "#0e4328",
101
105
  "theme-green-950": "#052e19",
106
+ "theme-red-10": "#faf4f3",
102
107
  "theme-red-50": "#f4e9e7",
103
108
  "theme-red-100": "#ecd3d0",
104
109
  "theme-red-200": "#e3bab5",
@@ -110,6 +115,7 @@
110
115
  "theme-red-800": "#761405",
111
116
  "theme-red-900": "#580d02",
112
117
  "theme-red-950": "#380700",
118
+ "theme-light-red-10": "#fdf9f8",
113
119
  "theme-light-red-50": "#faf2f1",
114
120
  "theme-light-red-100": "#f6d9d5",
115
121
  "theme-light-red-200": "#ebada2",
package/dist/tokens/json/tokens.json CHANGED
@@ -1168,6 +1168,27 @@
1168
1168
  },
1169
1169
  "theme": {
1170
1170
  "indigo": {
1171
+ "10": {
1172
+ "value": "#f8f8ff",
1173
+ "$type": "color",
1174
+ "themeable": true,
1175
+ "prefix": false,
1176
+ "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.theme.tokens.json",
1177
+ "isSource": false,
1178
+ "original": {
1179
+ "value": "#f8f8ff",
1180
+ "$type": "color",
1181
+ "themeable": true,
1182
+ "prefix": false
1183
+ },
1184
+ "name": "ME_INDIGO_10",
1185
+ "attributes": {},
1186
+ "path": [
1187
+ "theme",
1188
+ "indigo",
1189
+ "10"
1190
+ ]
1191
+ },
1171
1192
  "50": {
1172
1193
  "value": "#f1f1ff",
1173
1194
  "$type": "color",
@@ -1401,6 +1422,27 @@
1401
1422
  }
1402
1423
  },
1403
1424
  "blue": {
1425
+ "10": {
1426
+ "value": "#e6ecf0",
1427
+ "$type": "color",
1428
+ "themeable": true,
1429
+ "prefix": false,
1430
+ "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.theme.tokens.json",
1431
+ "isSource": false,
1432
+ "original": {
1433
+ "value": "#e6ecf0",
1434
+ "$type": "color",
1435
+ "themeable": true,
1436
+ "prefix": false
1437
+ },
1438
+ "name": "ME_BLUE_10",
1439
+ "attributes": {},
1440
+ "path": [
1441
+ "theme",
1442
+ "blue",
1443
+ "10"
1444
+ ]
1445
+ },
1404
1446
  "50": {
1405
1447
  "value": "#cdd8e3",
1406
1448
  "$type": "color",
@@ -1634,6 +1676,27 @@
1634
1676
  }
1635
1677
  },
1636
1678
  "light-blue": {
1679
+ "10": {
1680
+ "value": "#eef3f7",
1681
+ "$type": "color",
1682
+ "themeable": true,
1683
+ "prefix": false,
1684
+ "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.theme.tokens.json",
1685
+ "isSource": false,
1686
+ "original": {
1687
+ "value": "#eef3f7",
1688
+ "$type": "color",
1689
+ "themeable": true,
1690
+ "prefix": false
1691
+ },
1692
+ "name": "ME_LIGHT_BLUE_10",
1693
+ "attributes": {},
1694
+ "path": [
1695
+ "theme",
1696
+ "light-blue",
1697
+ "10"
1698
+ ]
1699
+ },
1637
1700
  "50": {
1638
1701
  "value": "#dde6ee",
1639
1702
  "$type": "color",
@@ -1867,6 +1930,27 @@
1867
1930
  }
1868
1931
  },
1869
1932
  "green": {
1933
+ "10": {
1934
+ "value": "#eef4ef",
1935
+ "$type": "color",
1936
+ "themeable": true,
1937
+ "prefix": false,
1938
+ "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.theme.tokens.json",
1939
+ "isSource": false,
1940
+ "original": {
1941
+ "value": "#eef4ef",
1942
+ "$type": "color",
1943
+ "themeable": true,
1944
+ "prefix": false
1945
+ },
1946
+ "name": "ME_GREEN_10",
1947
+ "attributes": {},
1948
+ "path": [
1949
+ "theme",
1950
+ "green",
1951
+ "10"
1952
+ ]
1953
+ },
1870
1954
  "50": {
1871
1955
  "value": "#dde9de",
1872
1956
  "$type": "color",
@@ -2100,6 +2184,27 @@
2100
2184
  }
2101
2185
  },
2102
2186
  "red": {
2187
+ "10": {
2188
+ "value": "#faf4f3",
2189
+ "$type": "color",
2190
+ "themeable": true,
2191
+ "prefix": false,
2192
+ "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.theme.tokens.json",
2193
+ "isSource": false,
2194
+ "original": {
2195
+ "value": "#faf4f3",
2196
+ "$type": "color",
2197
+ "themeable": true,
2198
+ "prefix": false
2199
+ },
2200
+ "name": "ME_RED_10",
2201
+ "attributes": {},
2202
+ "path": [
2203
+ "theme",
2204
+ "red",
2205
+ "10"
2206
+ ]
2207
+ },
2103
2208
  "50": {
2104
2209
  "value": "#f4e9e7",
2105
2210
  "$type": "color",
@@ -2333,6 +2438,27 @@
2333
2438
  }
2334
2439
  },
2335
2440
  "light-red": {
2441
+ "10": {
2442
+ "value": "#fdf9f8",
2443
+ "$type": "color",
2444
+ "themeable": true,
2445
+ "prefix": false,
2446
+ "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/color.theme.tokens.json",
2447
+ "isSource": false,
2448
+ "original": {
2449
+ "value": "#fdf9f8",
2450
+ "$type": "color",
2451
+ "themeable": true,
2452
+ "prefix": false
2453
+ },
2454
+ "name": "ME_LIGHT_RED_10",
2455
+ "attributes": {},
2456
+ "path": [
2457
+ "theme",
2458
+ "light-red",
2459
+ "10"
2460
+ ]
2461
+ },
2336
2462
  "50": {
2337
2463
  "value": "#faf2f1",
2338
2464
  "$type": "color",
package/dist/tokens/scss/_tokens.dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 21 Dec 2023 09:11:13 GMT
3
+ // Generated on Wed, 03 Jan 2024 14:14:35 GMT
4
4
 
5
5
  $red-950: #fff4f3;
6
6
  $red-900: #fcf1ef;
@@ -71,72 +71,78 @@ $blue-100: #064787;
71
71
  $blue-50: #033464;
72
72
  $white: #333238;
73
73
  $black: #fff;
74
- $theme-light-red-950: #faf2f1;
75
- $theme-light-red-900: #f6d9d5;
76
- $theme-light-red-800: #ebada2;
77
- $theme-light-red-700: #e07f6f;
78
- $theme-light-red-600: #d36250;
79
- $theme-light-red-500: #c24b38;
80
- $theme-light-red-400: #b53a26;
81
- $theme-light-red-300: #a02e1c;
82
- $theme-light-red-200: #8b2212;
83
- $theme-light-red-100: #751709;
84
- $theme-light-red-50: #5c1105;
85
- $theme-red-950: #f4e9e7;
86
- $theme-red-900: #ecd3d0;
87
- $theme-red-800: #e3bab5;
88
- $theme-red-700: #d59086;
89
- $theme-red-600: #c66e60;
90
- $theme-red-500: #ad4a3b;
91
- $theme-red-400: #a13322;
92
- $theme-red-300: #8f2110;
93
- $theme-red-200: #761405;
94
- $theme-red-100: #580d02;
95
- $theme-red-50: #380700;
96
- $theme-green-950: #dde9de;
97
- $theme-green-900: #b1d6b5;
98
- $theme-green-800: #8cc497;
99
- $theme-green-700: #69af7d;
100
- $theme-green-600: #499767;
101
- $theme-green-500: #308258;
102
- $theme-green-400: #25744c;
103
- $theme-green-300: #1b653f;
104
- $theme-green-200: #155635;
105
- $theme-green-100: #0e4328;
106
- $theme-green-50: #052e19;
107
- $theme-light-blue-950: #dde6ee;
108
- $theme-light-blue-900: #c1d4e6;
109
- $theme-light-blue-800: #a0bedc;
110
- $theme-light-blue-700: #74a3d3;
111
- $theme-light-blue-600: #4f8bc7;
112
- $theme-light-blue-500: #3476b9;
113
- $theme-light-blue-400: #2268ae;
114
- $theme-light-blue-300: #145aa1;
115
- $theme-light-blue-200: #0e4d8d;
116
- $theme-light-blue-100: #0c4277;
117
- $theme-light-blue-50: #0a3764;
118
- $theme-blue-950: #cdd8e3;
119
- $theme-blue-900: #b9cadc;
120
- $theme-blue-800: #a6bdd5;
121
- $theme-blue-700: #81a5c9;
122
- $theme-blue-600: #628eb9;
123
- $theme-blue-500: #4977a5;
124
- $theme-blue-400: #346596;
125
- $theme-blue-300: #235180;
126
- $theme-blue-200: #153c63;
127
- $theme-blue-100: #0b2640;
128
- $theme-blue-50: #04101c;
129
- $theme-indigo-950: #f1f1ff;
130
- $theme-indigo-900: #dbdbf8;
131
- $theme-indigo-800: #c7c7f2;
132
- $theme-indigo-700: #a2a2e6;
133
- $theme-indigo-600: #8181d7;
134
- $theme-indigo-500: #6666c4;
135
- $theme-indigo-400: #5252b5;
136
- $theme-indigo-300: #41419f;
137
- $theme-indigo-200: #303083;
138
- $theme-indigo-100: #222261;
139
- $theme-indigo-50: #14143d;
74
+ $theme-light-red-950: #fdf9f8;
75
+ $theme-light-red-900: #faf2f1;
76
+ $theme-light-red-800: #f6d9d5;
77
+ $theme-light-red-700: #ebada2;
78
+ $theme-light-red-600: #e07f6f;
79
+ $theme-light-red-500: #d36250;
80
+ $theme-light-red-400: #c24b38;
81
+ $theme-light-red-300: #b53a26;
82
+ $theme-light-red-200: #a02e1c;
83
+ $theme-light-red-100: #8b2212;
84
+ $theme-light-red-50: #751709;
85
+ $theme-light-red-10: #5c1105;
86
+ $theme-red-950: #faf4f3;
87
+ $theme-red-900: #f4e9e7;
88
+ $theme-red-800: #ecd3d0;
89
+ $theme-red-700: #e3bab5;
90
+ $theme-red-600: #d59086;
91
+ $theme-red-500: #c66e60;
92
+ $theme-red-400: #ad4a3b;
93
+ $theme-red-300: #a13322;
94
+ $theme-red-200: #8f2110;
95
+ $theme-red-100: #761405;
96
+ $theme-red-50: #580d02;
97
+ $theme-red-10: #380700;
98
+ $theme-green-950: #eef4ef;
99
+ $theme-green-900: #dde9de;
100
+ $theme-green-800: #b1d6b5;
101
+ $theme-green-700: #8cc497;
102
+ $theme-green-600: #69af7d;
103
+ $theme-green-500: #499767;
104
+ $theme-green-400: #308258;
105
+ $theme-green-300: #25744c;
106
+ $theme-green-200: #1b653f;
107
+ $theme-green-100: #155635;
108
+ $theme-green-50: #0e4328;
109
+ $theme-green-10: #052e19;
110
+ $theme-light-blue-950: #eef3f7;
111
+ $theme-light-blue-900: #dde6ee;
112
+ $theme-light-blue-800: #c1d4e6;
113
+ $theme-light-blue-700: #a0bedc;
114
+ $theme-light-blue-600: #74a3d3;
115
+ $theme-light-blue-500: #4f8bc7;
116
+ $theme-light-blue-400: #3476b9;
117
+ $theme-light-blue-300: #2268ae;
118
+ $theme-light-blue-200: #145aa1;
119
+ $theme-light-blue-100: #0e4d8d;
120
+ $theme-light-blue-50: #0c4277;
121
+ $theme-light-blue-10: #0a3764;
122
+ $theme-blue-950: #e6ecf0;
123
+ $theme-blue-900: #cdd8e3;
124
+ $theme-blue-800: #b9cadc;
125
+ $theme-blue-700: #a6bdd5;
126
+ $theme-blue-600: #81a5c9;
127
+ $theme-blue-500: #628eb9;
128
+ $theme-blue-400: #4977a5;
129
+ $theme-blue-300: #346596;
130
+ $theme-blue-200: #235180;
131
+ $theme-blue-100: #153c63;
132
+ $theme-blue-50: #0b2640;
133
+ $theme-blue-10: #04101c;
134
+ $theme-indigo-950: #f8f8ff;
135
+ $theme-indigo-900: #f1f1ff;
136
+ $theme-indigo-800: #dbdbf8;
137
+ $theme-indigo-700: #c7c7f2;
138
+ $theme-indigo-600: #a2a2e6;
139
+ $theme-indigo-500: #8181d7;
140
+ $theme-indigo-400: #6666c4;
141
+ $theme-indigo-300: #5252b5;
142
+ $theme-indigo-200: #41419f;
143
+ $theme-indigo-100: #303083;
144
+ $theme-indigo-50: #222261;
145
+ $theme-indigo-10: #14143d;
140
146
  $data-viz-orange-950: #fae8d1;
141
147
  $data-viz-orange-900: #f5d6b3;
142
148
  $data-viz-orange-800: #eebd8c;
package/dist/tokens/scss/_tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 21 Dec 2023 09:11:13 GMT
3
+ // Generated on Wed, 03 Jan 2024 14:14:35 GMT
4
4
 
5
5
  $gl-line-height-52: 3.25rem;
6
6
  $gl-line-height-44: 2.75rem;
@@ -116,6 +116,7 @@ $theme-light-red-300: #e07f6f !default;
116
116
  $theme-light-red-200: #ebada2 !default;
117
117
  $theme-light-red-100: #f6d9d5 !default;
118
118
  $theme-light-red-50: #faf2f1 !default;
119
+ $theme-light-red-10: #fdf9f8 !default;
119
120
  $theme-red-950: #380700 !default;
120
121
  $theme-red-900: #580d02 !default;
121
122
  $theme-red-800: #761405 !default;
@@ -127,6 +128,7 @@ $theme-red-300: #d59086 !default;
127
128
  $theme-red-200: #e3bab5 !default;
128
129
  $theme-red-100: #ecd3d0 !default;
129
130
  $theme-red-50: #f4e9e7 !default;
131
+ $theme-red-10: #faf4f3 !default;
130
132
  $theme-green-950: #052e19 !default;
131
133
  $theme-green-900: #0e4328 !default;
132
134
  $theme-green-800: #155635 !default;
@@ -138,6 +140,7 @@ $theme-green-300: #69af7d !default;
138
140
  $theme-green-200: #8cc497 !default;
139
141
  $theme-green-100: #b1d6b5 !default;
140
142
  $theme-green-50: #dde9de !default;
143
+ $theme-green-10: #eef4ef !default;
141
144
  $theme-light-blue-950: #0a3764 !default;
142
145
  $theme-light-blue-900: #0c4277 !default;
143
146
  $theme-light-blue-800: #0e4d8d !default;
@@ -149,6 +152,7 @@ $theme-light-blue-300: #74a3d3 !default;
149
152
  $theme-light-blue-200: #a0bedc !default;
150
153
  $theme-light-blue-100: #c1d4e6 !default;
151
154
  $theme-light-blue-50: #dde6ee !default;
155
+ $theme-light-blue-10: #eef3f7 !default;
152
156
  $theme-blue-950: #04101c !default;
153
157
  $theme-blue-900: #0b2640 !default;
154
158
  $theme-blue-800: #153c63 !default;
@@ -160,6 +164,7 @@ $theme-blue-300: #81a5c9 !default;
160
164
  $theme-blue-200: #a6bdd5 !default;
161
165
  $theme-blue-100: #b9cadc !default;
162
166
  $theme-blue-50: #cdd8e3 !default;
167
+ $theme-blue-10: #e6ecf0 !default;
163
168
  $theme-indigo-950: #14143d !default;
164
169
  $theme-indigo-900: #222261 !default;
165
170
  $theme-indigo-800: #303083 !default;
@@ -171,6 +176,7 @@ $theme-indigo-300: #a2a2e6 !default;
171
176
  $theme-indigo-200: #c7c7f2 !default;
172
177
  $theme-indigo-100: #dbdbf8 !default;
173
178
  $theme-indigo-50: #f1f1ff !default;
179
+ $theme-indigo-10: #f8f8ff !default;
174
180
  $data-viz-orange-950: #4b2707 !default;
175
181
  $data-viz-orange-900: #5e2f05 !default;
176
182
  $data-viz-orange-800: #6f3500 !default;