@carbon/themes 10.23.0-rc.0 → 10.23.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/docs/sass.md +130 -83
- package/es/index.js +23 -13
- package/lib/index.js +24 -13
- package/package.json +3 -3
- package/scss/generated/_mixins.scss +51 -33
- package/scss/generated/_themes.scss +26 -16
- package/scss/generated/_tokens.scss +31 -21
- package/src/g10.js +2 -2
- package/src/g100.js +2 -2
- package/src/g90.js +2 -2
- package/src/tokens.js +5 -5
- package/src/v9.js +2 -2
- package/src/white.js +2 -2
- package/umd/index.js +24 -13
package/docs/sass.md
CHANGED
|
@@ -64,10 +64,12 @@
|
|
|
64
64
|
- [✅hover-tertiary [variable]](#hover-tertiary-variable)
|
|
65
65
|
- [✅active-tertiary [variable]](#active-tertiary-variable)
|
|
66
66
|
- [✅hover-ui [variable]](#hover-ui-variable)
|
|
67
|
+
- [✅hover-light-ui [variable]](#hover-light-ui-variable)
|
|
68
|
+
- [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
|
|
67
69
|
- [✅active-ui [variable]](#active-ui-variable)
|
|
70
|
+
- [✅active-light-ui [variable]](#active-light-ui-variable)
|
|
68
71
|
- [✅selected-ui [variable]](#selected-ui-variable)
|
|
69
72
|
- [✅selected-light-ui [variable]](#selected-light-ui-variable)
|
|
70
|
-
- [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
|
|
71
73
|
- [✅inverse-hover-ui [variable]](#inverse-hover-ui-variable)
|
|
72
74
|
- [✅hover-danger [variable]](#hover-danger-variable)
|
|
73
75
|
- [✅active-danger [variable]](#active-danger-variable)
|
|
@@ -78,7 +80,6 @@
|
|
|
78
80
|
- [✅disabled-03 [variable]](#disabled-03-variable)
|
|
79
81
|
- [✅highlight [variable]](#highlight-variable)
|
|
80
82
|
- [✅decorative-01 [variable]](#decorative-01-variable)
|
|
81
|
-
- [✅hover-light-ui [variable]](#hover-light-ui-variable)
|
|
82
83
|
- [✅button-separator [variable]](#button-separator-variable)
|
|
83
84
|
- [✅skeleton-01 [variable]](#skeleton-01-variable)
|
|
84
85
|
- [✅skeleton-02 [variable]](#skeleton-02-variable)
|
|
@@ -273,10 +274,12 @@ Define theme variables from a map of tokens
|
|
|
273
274
|
$hover-tertiary: map-get($theme, 'hover-tertiary') !global;
|
|
274
275
|
$active-tertiary: map-get($theme, 'active-tertiary') !global;
|
|
275
276
|
$hover-ui: map-get($theme, 'hover-ui') !global;
|
|
277
|
+
$hover-light-ui: map-get($theme, 'hover-light-ui') !global;
|
|
278
|
+
$hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
|
|
276
279
|
$active-ui: map-get($theme, 'active-ui') !global;
|
|
280
|
+
$active-light-ui: map-get($theme, 'active-light-ui') !global;
|
|
277
281
|
$selected-ui: map-get($theme, 'selected-ui') !global;
|
|
278
282
|
$selected-light-ui: map-get($theme, 'selected-light-ui') !global;
|
|
279
|
-
$hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
|
|
280
283
|
$inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;
|
|
281
284
|
$hover-danger: map-get($theme, 'hover-danger') !global;
|
|
282
285
|
$active-danger: map-get($theme, 'active-danger') !global;
|
|
@@ -287,7 +290,6 @@ Define theme variables from a map of tokens
|
|
|
287
290
|
$disabled-03: map-get($theme, 'disabled-03') !global;
|
|
288
291
|
$highlight: map-get($theme, 'highlight') !global;
|
|
289
292
|
$decorative-01: map-get($theme, 'decorative-01') !global;
|
|
290
|
-
$hover-light-ui: map-get($theme, 'hover-light-ui') !global;
|
|
291
293
|
$button-separator: map-get($theme, 'button-separator') !global;
|
|
292
294
|
$skeleton-01: map-get($theme, 'skeleton-01') !global;
|
|
293
295
|
$skeleton-02: map-get($theme, 'skeleton-02') !global;
|
|
@@ -546,10 +548,22 @@ Define theme variables from a map of tokens
|
|
|
546
548
|
--#{$custom-property-prefix}-hover-ui,
|
|
547
549
|
map-get($theme, 'hover-ui')
|
|
548
550
|
) !global;
|
|
551
|
+
$hover-light-ui: var(
|
|
552
|
+
--#{$custom-property-prefix}-hover-light-ui,
|
|
553
|
+
map-get($theme, 'hover-light-ui')
|
|
554
|
+
) !global;
|
|
555
|
+
$hover-selected-ui: var(
|
|
556
|
+
--#{$custom-property-prefix}-hover-selected-ui,
|
|
557
|
+
map-get($theme, 'hover-selected-ui')
|
|
558
|
+
) !global;
|
|
549
559
|
$active-ui: var(
|
|
550
560
|
--#{$custom-property-prefix}-active-ui,
|
|
551
561
|
map-get($theme, 'active-ui')
|
|
552
562
|
) !global;
|
|
563
|
+
$active-light-ui: var(
|
|
564
|
+
--#{$custom-property-prefix}-active-light-ui,
|
|
565
|
+
map-get($theme, 'active-light-ui')
|
|
566
|
+
) !global;
|
|
553
567
|
$selected-ui: var(
|
|
554
568
|
--#{$custom-property-prefix}-selected-ui,
|
|
555
569
|
map-get($theme, 'selected-ui')
|
|
@@ -558,10 +572,6 @@ Define theme variables from a map of tokens
|
|
|
558
572
|
--#{$custom-property-prefix}-selected-light-ui,
|
|
559
573
|
map-get($theme, 'selected-light-ui')
|
|
560
574
|
) !global;
|
|
561
|
-
$hover-selected-ui: var(
|
|
562
|
-
--#{$custom-property-prefix}-hover-selected-ui,
|
|
563
|
-
map-get($theme, 'hover-selected-ui')
|
|
564
|
-
) !global;
|
|
565
575
|
$inverse-hover-ui: var(
|
|
566
576
|
--#{$custom-property-prefix}-inverse-hover-ui,
|
|
567
577
|
map-get($theme, 'inverse-hover-ui')
|
|
@@ -602,10 +612,6 @@ Define theme variables from a map of tokens
|
|
|
602
612
|
--#{$custom-property-prefix}-decorative-01,
|
|
603
613
|
map-get($theme, 'decorative-01')
|
|
604
614
|
) !global;
|
|
605
|
-
$hover-light-ui: var(
|
|
606
|
-
--#{$custom-property-prefix}-hover-light-ui,
|
|
607
|
-
map-get($theme, 'hover-light-ui')
|
|
608
|
-
) !global;
|
|
609
615
|
$button-separator: var(
|
|
610
616
|
--#{$custom-property-prefix}-button-separator,
|
|
611
617
|
map-get($theme, 'button-separator')
|
|
@@ -1160,44 +1166,70 @@ Define theme variables from a map of tokens
|
|
|
1160
1166
|
@include custom-property('hover-ui', map-get($theme, 'hover-ui'));
|
|
1161
1167
|
}
|
|
1162
1168
|
|
|
1163
|
-
@if should-emit(
|
|
1169
|
+
@if should-emit(
|
|
1170
|
+
$theme,
|
|
1171
|
+
$parent-carbon-theme,
|
|
1172
|
+
'hover-light-ui',
|
|
1173
|
+
$emit-difference
|
|
1174
|
+
)
|
|
1164
1175
|
{
|
|
1165
|
-
@include custom-property(
|
|
1176
|
+
@include custom-property(
|
|
1177
|
+
'hover-light-ui',
|
|
1178
|
+
map-get($theme, 'hover-light-ui')
|
|
1179
|
+
);
|
|
1166
1180
|
}
|
|
1167
1181
|
|
|
1168
1182
|
@if should-emit(
|
|
1169
1183
|
$theme,
|
|
1170
1184
|
$parent-carbon-theme,
|
|
1171
|
-
'selected-ui',
|
|
1185
|
+
'hover-selected-ui',
|
|
1172
1186
|
$emit-difference
|
|
1173
1187
|
)
|
|
1174
1188
|
{
|
|
1175
|
-
@include custom-property(
|
|
1189
|
+
@include custom-property(
|
|
1190
|
+
'hover-selected-ui',
|
|
1191
|
+
map-get($theme, 'hover-selected-ui')
|
|
1192
|
+
);
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
@if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
|
|
1196
|
+
{
|
|
1197
|
+
@include custom-property('active-ui', map-get($theme, 'active-ui'));
|
|
1176
1198
|
}
|
|
1177
1199
|
|
|
1178
1200
|
@if should-emit(
|
|
1179
1201
|
$theme,
|
|
1180
1202
|
$parent-carbon-theme,
|
|
1181
|
-
'
|
|
1203
|
+
'active-light-ui',
|
|
1182
1204
|
$emit-difference
|
|
1183
1205
|
)
|
|
1184
1206
|
{
|
|
1185
1207
|
@include custom-property(
|
|
1186
|
-
'
|
|
1187
|
-
map-get($theme, '
|
|
1208
|
+
'active-light-ui',
|
|
1209
|
+
map-get($theme, 'active-light-ui')
|
|
1188
1210
|
);
|
|
1189
1211
|
}
|
|
1190
1212
|
|
|
1191
1213
|
@if should-emit(
|
|
1192
1214
|
$theme,
|
|
1193
1215
|
$parent-carbon-theme,
|
|
1194
|
-
'
|
|
1216
|
+
'selected-ui',
|
|
1217
|
+
$emit-difference
|
|
1218
|
+
)
|
|
1219
|
+
{
|
|
1220
|
+
@include custom-property('selected-ui', map-get($theme, 'selected-ui'));
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
@if should-emit(
|
|
1224
|
+
$theme,
|
|
1225
|
+
$parent-carbon-theme,
|
|
1226
|
+
'selected-light-ui',
|
|
1195
1227
|
$emit-difference
|
|
1196
1228
|
)
|
|
1197
1229
|
{
|
|
1198
1230
|
@include custom-property(
|
|
1199
|
-
'
|
|
1200
|
-
map-get($theme, '
|
|
1231
|
+
'selected-light-ui',
|
|
1232
|
+
map-get($theme, 'selected-light-ui')
|
|
1201
1233
|
);
|
|
1202
1234
|
}
|
|
1203
1235
|
|
|
@@ -1300,19 +1332,6 @@ Define theme variables from a map of tokens
|
|
|
1300
1332
|
);
|
|
1301
1333
|
}
|
|
1302
1334
|
|
|
1303
|
-
@if should-emit(
|
|
1304
|
-
$theme,
|
|
1305
|
-
$parent-carbon-theme,
|
|
1306
|
-
'hover-light-ui',
|
|
1307
|
-
$emit-difference
|
|
1308
|
-
)
|
|
1309
|
-
{
|
|
1310
|
-
@include custom-property(
|
|
1311
|
-
'hover-light-ui',
|
|
1312
|
-
map-get($theme, 'hover-light-ui')
|
|
1313
|
-
);
|
|
1314
|
-
}
|
|
1315
|
-
|
|
1316
1335
|
@if should-emit(
|
|
1317
1336
|
$theme,
|
|
1318
1337
|
$parent-carbon-theme,
|
|
@@ -2099,10 +2118,12 @@ Define theme variables from a map of tokens
|
|
|
2099
2118
|
- [hover-tertiary [variable]](#hover-tertiary-variable)
|
|
2100
2119
|
- [active-tertiary [variable]](#active-tertiary-variable)
|
|
2101
2120
|
- [hover-ui [variable]](#hover-ui-variable)
|
|
2121
|
+
- [hover-light-ui [variable]](#hover-light-ui-variable)
|
|
2122
|
+
- [hover-selected-ui [variable]](#hover-selected-ui-variable)
|
|
2102
2123
|
- [active-ui [variable]](#active-ui-variable)
|
|
2124
|
+
- [active-light-ui [variable]](#active-light-ui-variable)
|
|
2103
2125
|
- [selected-ui [variable]](#selected-ui-variable)
|
|
2104
2126
|
- [selected-light-ui [variable]](#selected-light-ui-variable)
|
|
2105
|
-
- [hover-selected-ui [variable]](#hover-selected-ui-variable)
|
|
2106
2127
|
- [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
|
|
2107
2128
|
- [hover-danger [variable]](#hover-danger-variable)
|
|
2108
2129
|
- [active-danger [variable]](#active-danger-variable)
|
|
@@ -2113,7 +2134,6 @@ Define theme variables from a map of tokens
|
|
|
2113
2134
|
- [disabled-03 [variable]](#disabled-03-variable)
|
|
2114
2135
|
- [highlight [variable]](#highlight-variable)
|
|
2115
2136
|
- [decorative-01 [variable]](#decorative-01-variable)
|
|
2116
|
-
- [hover-light-ui [variable]](#hover-light-ui-variable)
|
|
2117
2137
|
- [button-separator [variable]](#button-separator-variable)
|
|
2118
2138
|
- [skeleton-01 [variable]](#skeleton-01-variable)
|
|
2119
2139
|
- [skeleton-02 [variable]](#skeleton-02-variable)
|
|
@@ -2261,7 +2281,9 @@ $carbon--theme--g90: map-merge(
|
|
|
2261
2281
|
hover-tertiary: #f4f4f4,
|
|
2262
2282
|
active-tertiary: #c6c6c6,
|
|
2263
2283
|
hover-ui: #4c4c4c,
|
|
2284
|
+
hover-light-ui: #656565,
|
|
2264
2285
|
active-ui: #6f6f6f,
|
|
2286
|
+
active-light-ui: #8d8d8d,
|
|
2265
2287
|
selected-ui: #525252,
|
|
2266
2288
|
selected-light-ui: #6f6f6f,
|
|
2267
2289
|
inverse-hover-ui: #e5e5e5,
|
|
@@ -2273,7 +2295,6 @@ $carbon--theme--g90: map-merge(
|
|
|
2273
2295
|
disabled-03: #a8a8a8,
|
|
2274
2296
|
highlight: #0043ce,
|
|
2275
2297
|
decorative-01: #6f6f6f,
|
|
2276
|
-
hover-light-ui: #6f6f6f,
|
|
2277
2298
|
button-separator: #161616,
|
|
2278
2299
|
skeleton-01: #353535,
|
|
2279
2300
|
skeleton-02: #525252,
|
|
@@ -2339,7 +2360,9 @@ $carbon--theme--g100: map-merge(
|
|
|
2339
2360
|
hover-tertiary: #f4f4f4,
|
|
2340
2361
|
active-tertiary: #c6c6c6,
|
|
2341
2362
|
hover-ui: #353535,
|
|
2363
|
+
hover-light-ui: #4c4c4c,
|
|
2342
2364
|
active-ui: #525252,
|
|
2365
|
+
active-light-ui: #6f6f6f,
|
|
2343
2366
|
selected-ui: #393939,
|
|
2344
2367
|
selected-light-ui: #525252,
|
|
2345
2368
|
inverse-hover-ui: #e5e5e5,
|
|
@@ -2350,7 +2373,6 @@ $carbon--theme--g100: map-merge(
|
|
|
2350
2373
|
disabled-02: #525252,
|
|
2351
2374
|
highlight: #002d9c,
|
|
2352
2375
|
decorative-01: #525252,
|
|
2353
|
-
hover-light-ui: #525252,
|
|
2354
2376
|
button-separator: #161616,
|
|
2355
2377
|
skeleton-01: #353535,
|
|
2356
2378
|
skeleton-02: #393939,
|
|
@@ -2419,7 +2441,9 @@ $carbon--theme--v9: map-merge(
|
|
|
2419
2441
|
hover-tertiary: #5a6872,
|
|
2420
2442
|
active-tertiary: #414f59,
|
|
2421
2443
|
hover-ui: #eef4fc,
|
|
2444
|
+
hover-light-ui: #eef4fc,
|
|
2422
2445
|
active-ui: #dfeafa,
|
|
2446
|
+
active-light-ui: #dfeafa,
|
|
2423
2447
|
selected-ui: #eef4fc,
|
|
2424
2448
|
selected-light-ui: #eef4fc,
|
|
2425
2449
|
hover-selected-ui: #dfeafa,
|
|
@@ -2432,7 +2456,6 @@ $carbon--theme--v9: map-merge(
|
|
|
2432
2456
|
disabled-03: #cdd1d4,
|
|
2433
2457
|
highlight: #f4f7fb,
|
|
2434
2458
|
decorative-01: #eef4fc,
|
|
2435
|
-
hover-light-ui: #eef4fc,
|
|
2436
2459
|
skeleton-01: rgba(61, 112, 178, 0.1),
|
|
2437
2460
|
skeleton-02: rgba(61, 112, 178, 0.1),
|
|
2438
2461
|
brand-01: #3d70b2,
|
|
@@ -2504,10 +2527,12 @@ $carbon--theme: (
|
|
|
2504
2527
|
hover-tertiary: if(global-variable-exists('hover-tertiary'), $hover-tertiary, map-get($carbon--theme--white, 'hover-tertiary')),
|
|
2505
2528
|
active-tertiary: if(global-variable-exists('active-tertiary'), $active-tertiary, map-get($carbon--theme--white, 'active-tertiary')),
|
|
2506
2529
|
hover-ui: if(global-variable-exists('hover-ui'), $hover-ui, map-get($carbon--theme--white, 'hover-ui')),
|
|
2530
|
+
hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
|
|
2531
|
+
hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
|
|
2507
2532
|
active-ui: if(global-variable-exists('active-ui'), $active-ui, map-get($carbon--theme--white, 'active-ui')),
|
|
2533
|
+
active-light-ui: if(global-variable-exists('active-light-ui'), $active-light-ui, map-get($carbon--theme--white, 'active-light-ui')),
|
|
2508
2534
|
selected-ui: if(global-variable-exists('selected-ui'), $selected-ui, map-get($carbon--theme--white, 'selected-ui')),
|
|
2509
2535
|
selected-light-ui: if(global-variable-exists('selected-light-ui'), $selected-light-ui, map-get($carbon--theme--white, 'selected-light-ui')),
|
|
2510
|
-
hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
|
|
2511
2536
|
inverse-hover-ui: if(global-variable-exists('inverse-hover-ui'), $inverse-hover-ui, map-get($carbon--theme--white, 'inverse-hover-ui')),
|
|
2512
2537
|
hover-danger: if(global-variable-exists('hover-danger'), $hover-danger, map-get($carbon--theme--white, 'hover-danger')),
|
|
2513
2538
|
active-danger: if(global-variable-exists('active-danger'), $active-danger, map-get($carbon--theme--white, 'active-danger')),
|
|
@@ -2518,7 +2543,6 @@ $carbon--theme: (
|
|
|
2518
2543
|
disabled-03: if(global-variable-exists('disabled-03'), $disabled-03, map-get($carbon--theme--white, 'disabled-03')),
|
|
2519
2544
|
highlight: if(global-variable-exists('highlight'), $highlight, map-get($carbon--theme--white, 'highlight')),
|
|
2520
2545
|
decorative-01: if(global-variable-exists('decorative-01'), $decorative-01, map-get($carbon--theme--white, 'decorative-01')),
|
|
2521
|
-
hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
|
|
2522
2546
|
button-separator: if(global-variable-exists('button-separator'), $button-separator, map-get($carbon--theme--white, 'button-separator')),
|
|
2523
2547
|
skeleton-01: if(global-variable-exists('skeleton-01'), $skeleton-01, map-get($carbon--theme--white, 'skeleton-01')),
|
|
2524
2548
|
skeleton-02: if(global-variable-exists('skeleton-02'), $skeleton-02, map-get($carbon--theme--white, 'skeleton-02')),
|
|
@@ -3745,6 +3769,54 @@ $hover-ui: if(
|
|
|
3745
3769
|
- **Used by**:
|
|
3746
3770
|
- [carbon--theme [mixin]](#carbon--theme-mixin)
|
|
3747
3771
|
|
|
3772
|
+
### ✅hover-light-ui [variable]
|
|
3773
|
+
|
|
3774
|
+
<details>
|
|
3775
|
+
<summary>Source code</summary>
|
|
3776
|
+
|
|
3777
|
+
```scss
|
|
3778
|
+
$hover-light-ui: if(
|
|
3779
|
+
global-variable-exists('carbon--theme') and map-has-key(
|
|
3780
|
+
$carbon--theme,
|
|
3781
|
+
'hover-light-ui'
|
|
3782
|
+
),
|
|
3783
|
+
map-get($carbon--theme, 'hover-light-ui'),
|
|
3784
|
+
#e5e5e5
|
|
3785
|
+
);
|
|
3786
|
+
```
|
|
3787
|
+
|
|
3788
|
+
</details>
|
|
3789
|
+
|
|
3790
|
+
- **Group**: [@carbon/themes](#carbonthemes)
|
|
3791
|
+
- **Type**: `{undefined}`
|
|
3792
|
+
- **Used by**:
|
|
3793
|
+
- [carbon--theme [mixin]](#carbon--theme-mixin)
|
|
3794
|
+
|
|
3795
|
+
### ✅hover-selected-ui [variable]
|
|
3796
|
+
|
|
3797
|
+
Data table selected row hover
|
|
3798
|
+
|
|
3799
|
+
<details>
|
|
3800
|
+
<summary>Source code</summary>
|
|
3801
|
+
|
|
3802
|
+
```scss
|
|
3803
|
+
$hover-selected-ui: if(
|
|
3804
|
+
global-variable-exists('carbon--theme') and map-has-key(
|
|
3805
|
+
$carbon--theme,
|
|
3806
|
+
'hover-selected-ui'
|
|
3807
|
+
),
|
|
3808
|
+
map-get($carbon--theme, 'hover-selected-ui'),
|
|
3809
|
+
#cacaca
|
|
3810
|
+
);
|
|
3811
|
+
```
|
|
3812
|
+
|
|
3813
|
+
</details>
|
|
3814
|
+
|
|
3815
|
+
- **Group**: [@carbon/themes](#carbonthemes)
|
|
3816
|
+
- **Type**: `{undefined}`
|
|
3817
|
+
- **Used by**:
|
|
3818
|
+
- [carbon--theme [mixin]](#carbon--theme-mixin)
|
|
3819
|
+
|
|
3748
3820
|
### ✅active-ui [variable]
|
|
3749
3821
|
|
|
3750
3822
|
`$ui-01` active; `$ui-02` active
|
|
@@ -3772,21 +3844,19 @@ $active-ui: if(
|
|
|
3772
3844
|
- **Used by**:
|
|
3773
3845
|
- [carbon--theme [mixin]](#carbon--theme-mixin)
|
|
3774
3846
|
|
|
3775
|
-
### ✅
|
|
3776
|
-
|
|
3777
|
-
Selected UI elements
|
|
3847
|
+
### ✅active-light-ui [variable]
|
|
3778
3848
|
|
|
3779
3849
|
<details>
|
|
3780
3850
|
<summary>Source code</summary>
|
|
3781
3851
|
|
|
3782
3852
|
```scss
|
|
3783
|
-
$
|
|
3853
|
+
$active-light-ui: if(
|
|
3784
3854
|
global-variable-exists('carbon--theme') and map-has-key(
|
|
3785
3855
|
$carbon--theme,
|
|
3786
|
-
'
|
|
3856
|
+
'active-light-ui'
|
|
3787
3857
|
),
|
|
3788
|
-
map-get($carbon--theme, '
|
|
3789
|
-
#
|
|
3858
|
+
map-get($carbon--theme, 'active-light-ui'),
|
|
3859
|
+
#c6c6c6
|
|
3790
3860
|
);
|
|
3791
3861
|
```
|
|
3792
3862
|
|
|
@@ -3797,18 +3867,20 @@ $selected-ui: if(
|
|
|
3797
3867
|
- **Used by**:
|
|
3798
3868
|
- [carbon--theme [mixin]](#carbon--theme-mixin)
|
|
3799
3869
|
|
|
3800
|
-
### ✅selected-
|
|
3870
|
+
### ✅selected-ui [variable]
|
|
3871
|
+
|
|
3872
|
+
Selected UI elements
|
|
3801
3873
|
|
|
3802
3874
|
<details>
|
|
3803
3875
|
<summary>Source code</summary>
|
|
3804
3876
|
|
|
3805
3877
|
```scss
|
|
3806
|
-
$selected-
|
|
3878
|
+
$selected-ui: if(
|
|
3807
3879
|
global-variable-exists('carbon--theme') and map-has-key(
|
|
3808
3880
|
$carbon--theme,
|
|
3809
|
-
'selected-
|
|
3881
|
+
'selected-ui'
|
|
3810
3882
|
),
|
|
3811
|
-
map-get($carbon--theme, 'selected-
|
|
3883
|
+
map-get($carbon--theme, 'selected-ui'),
|
|
3812
3884
|
#e0e0e0
|
|
3813
3885
|
);
|
|
3814
3886
|
```
|
|
@@ -3820,21 +3892,19 @@ $selected-light-ui: if(
|
|
|
3820
3892
|
- **Used by**:
|
|
3821
3893
|
- [carbon--theme [mixin]](#carbon--theme-mixin)
|
|
3822
3894
|
|
|
3823
|
-
### ✅
|
|
3824
|
-
|
|
3825
|
-
Data table selected row hover
|
|
3895
|
+
### ✅selected-light-ui [variable]
|
|
3826
3896
|
|
|
3827
3897
|
<details>
|
|
3828
3898
|
<summary>Source code</summary>
|
|
3829
3899
|
|
|
3830
3900
|
```scss
|
|
3831
|
-
$
|
|
3901
|
+
$selected-light-ui: if(
|
|
3832
3902
|
global-variable-exists('carbon--theme') and map-has-key(
|
|
3833
3903
|
$carbon--theme,
|
|
3834
|
-
'
|
|
3904
|
+
'selected-light-ui'
|
|
3835
3905
|
),
|
|
3836
|
-
map-get($carbon--theme, '
|
|
3837
|
-
#
|
|
3906
|
+
map-get($carbon--theme, 'selected-light-ui'),
|
|
3907
|
+
#e0e0e0
|
|
3838
3908
|
);
|
|
3839
3909
|
```
|
|
3840
3910
|
|
|
@@ -4087,29 +4157,6 @@ $decorative-01: if(
|
|
|
4087
4157
|
|
|
4088
4158
|
</details>
|
|
4089
4159
|
|
|
4090
|
-
- **Group**: [@carbon/themes](#carbonthemes)
|
|
4091
|
-
- **Type**: `{undefined}`
|
|
4092
|
-
- **Used by**:
|
|
4093
|
-
- [carbon--theme [mixin]](#carbon--theme-mixin)
|
|
4094
|
-
|
|
4095
|
-
### ✅hover-light-ui [variable]
|
|
4096
|
-
|
|
4097
|
-
<details>
|
|
4098
|
-
<summary>Source code</summary>
|
|
4099
|
-
|
|
4100
|
-
```scss
|
|
4101
|
-
$hover-light-ui: if(
|
|
4102
|
-
global-variable-exists('carbon--theme') and map-has-key(
|
|
4103
|
-
$carbon--theme,
|
|
4104
|
-
'hover-light-ui'
|
|
4105
|
-
),
|
|
4106
|
-
map-get($carbon--theme, 'hover-light-ui'),
|
|
4107
|
-
#e5e5e5
|
|
4108
|
-
);
|
|
4109
|
-
```
|
|
4110
|
-
|
|
4111
|
-
</details>
|
|
4112
|
-
|
|
4113
4160
|
- **Group**: [@carbon/themes](#carbonthemes)
|
|
4114
4161
|
- **Type**: `{undefined}`
|
|
4115
4162
|
- **Used by**:
|
package/es/index.js
CHANGED
|
@@ -124,7 +124,9 @@ var activeSecondary = gray60;
|
|
|
124
124
|
var hoverTertiary = '#0353e9';
|
|
125
125
|
var activeTertiary = blue80;
|
|
126
126
|
var hoverUI = '#e5e5e5';
|
|
127
|
+
var hoverLightUI = '#e5e5e5';
|
|
127
128
|
var activeUI = gray30;
|
|
129
|
+
var activeLightUI = gray30;
|
|
128
130
|
var selectedUI = gray20;
|
|
129
131
|
var selectedLightUI = gray20;
|
|
130
132
|
var inverseHoverUI = '#4c4c4c';
|
|
@@ -138,7 +140,6 @@ var disabled02 = gray30;
|
|
|
138
140
|
var disabled03 = gray50;
|
|
139
141
|
var highlight = blue20;
|
|
140
142
|
var decorative01 = gray20;
|
|
141
|
-
var hoverLightUI = '#e5e5e5';
|
|
142
143
|
var buttonSeparator = '#e0e0e0';
|
|
143
144
|
var skeleton01 = '#e5e5e5';
|
|
144
145
|
var skeleton02 = gray30; // Type
|
|
@@ -197,7 +198,9 @@ var white$1 = /*#__PURE__*/Object.freeze({
|
|
|
197
198
|
hoverTertiary: hoverTertiary,
|
|
198
199
|
activeTertiary: activeTertiary,
|
|
199
200
|
hoverUI: hoverUI,
|
|
201
|
+
hoverLightUI: hoverLightUI,
|
|
200
202
|
activeUI: activeUI,
|
|
203
|
+
activeLightUI: activeLightUI,
|
|
201
204
|
selectedUI: selectedUI,
|
|
202
205
|
selectedLightUI: selectedLightUI,
|
|
203
206
|
inverseHoverUI: inverseHoverUI,
|
|
@@ -211,7 +214,6 @@ var white$1 = /*#__PURE__*/Object.freeze({
|
|
|
211
214
|
disabled03: disabled03,
|
|
212
215
|
highlight: highlight,
|
|
213
216
|
decorative01: decorative01,
|
|
214
|
-
hoverLightUI: hoverLightUI,
|
|
215
217
|
buttonSeparator: buttonSeparator,
|
|
216
218
|
skeleton01: skeleton01,
|
|
217
219
|
skeleton02: skeleton02,
|
|
@@ -337,7 +339,9 @@ var activeSecondary$1 = gray60;
|
|
|
337
339
|
var hoverTertiary$1 = '#0353e9';
|
|
338
340
|
var activeTertiary$1 = blue80;
|
|
339
341
|
var hoverUI$1 = '#e5e5e5';
|
|
342
|
+
var hoverLightUI$1 = '#e5e5e5';
|
|
340
343
|
var activeUI$1 = gray30;
|
|
344
|
+
var activeLightUI$1 = gray30;
|
|
341
345
|
var selectedUI$1 = gray20;
|
|
342
346
|
var selectedLightUI$1 = gray20;
|
|
343
347
|
var inverseHoverUI$1 = '#4c4c4c';
|
|
@@ -351,7 +355,6 @@ var disabled02$1 = gray30;
|
|
|
351
355
|
var disabled03$1 = gray50;
|
|
352
356
|
var highlight$1 = blue10;
|
|
353
357
|
var decorative01$1 = gray20;
|
|
354
|
-
var hoverLightUI$1 = '#e5e5e5';
|
|
355
358
|
var buttonSeparator$1 = '#e0e0e0';
|
|
356
359
|
var skeleton01$1 = '#e5e5e5';
|
|
357
360
|
var skeleton02$1 = gray30;
|
|
@@ -410,7 +413,9 @@ var g10 = /*#__PURE__*/Object.freeze({
|
|
|
410
413
|
hoverTertiary: hoverTertiary$1,
|
|
411
414
|
activeTertiary: activeTertiary$1,
|
|
412
415
|
hoverUI: hoverUI$1,
|
|
416
|
+
hoverLightUI: hoverLightUI$1,
|
|
413
417
|
activeUI: activeUI$1,
|
|
418
|
+
activeLightUI: activeLightUI$1,
|
|
414
419
|
selectedUI: selectedUI$1,
|
|
415
420
|
selectedLightUI: selectedLightUI$1,
|
|
416
421
|
inverseHoverUI: inverseHoverUI$1,
|
|
@@ -424,7 +429,6 @@ var g10 = /*#__PURE__*/Object.freeze({
|
|
|
424
429
|
disabled03: disabled03$1,
|
|
425
430
|
highlight: highlight$1,
|
|
426
431
|
decorative01: decorative01$1,
|
|
427
|
-
hoverLightUI: hoverLightUI$1,
|
|
428
432
|
buttonSeparator: buttonSeparator$1,
|
|
429
433
|
skeleton01: skeleton01$1,
|
|
430
434
|
skeleton02: skeleton02$1,
|
|
@@ -550,7 +554,9 @@ var activeSecondary$2 = gray80;
|
|
|
550
554
|
var hoverTertiary$2 = gray10;
|
|
551
555
|
var activeTertiary$2 = gray30;
|
|
552
556
|
var hoverUI$2 = '#353535';
|
|
557
|
+
var hoverLightUI$2 = '#4c4c4c';
|
|
553
558
|
var activeUI$2 = gray70;
|
|
559
|
+
var activeLightUI$2 = gray60;
|
|
554
560
|
var selectedUI$2 = gray80;
|
|
555
561
|
var selectedLightUI$2 = gray70;
|
|
556
562
|
var inverseHoverUI$2 = '#e5e5e5';
|
|
@@ -564,7 +570,6 @@ var disabled02$2 = gray70;
|
|
|
564
570
|
var disabled03$2 = gray50;
|
|
565
571
|
var highlight$2 = blue80;
|
|
566
572
|
var decorative01$2 = gray70;
|
|
567
|
-
var hoverLightUI$2 = '#525252';
|
|
568
573
|
var buttonSeparator$2 = '#161616';
|
|
569
574
|
var skeleton01$2 = '#353535';
|
|
570
575
|
var skeleton02$2 = gray80;
|
|
@@ -623,7 +628,9 @@ var g100 = /*#__PURE__*/Object.freeze({
|
|
|
623
628
|
hoverTertiary: hoverTertiary$2,
|
|
624
629
|
activeTertiary: activeTertiary$2,
|
|
625
630
|
hoverUI: hoverUI$2,
|
|
631
|
+
hoverLightUI: hoverLightUI$2,
|
|
626
632
|
activeUI: activeUI$2,
|
|
633
|
+
activeLightUI: activeLightUI$2,
|
|
627
634
|
selectedUI: selectedUI$2,
|
|
628
635
|
selectedLightUI: selectedLightUI$2,
|
|
629
636
|
inverseHoverUI: inverseHoverUI$2,
|
|
@@ -637,7 +644,6 @@ var g100 = /*#__PURE__*/Object.freeze({
|
|
|
637
644
|
disabled03: disabled03$2,
|
|
638
645
|
highlight: highlight$2,
|
|
639
646
|
decorative01: decorative01$2,
|
|
640
|
-
hoverLightUI: hoverLightUI$2,
|
|
641
647
|
buttonSeparator: buttonSeparator$2,
|
|
642
648
|
skeleton01: skeleton01$2,
|
|
643
649
|
skeleton02: skeleton02$2,
|
|
@@ -763,7 +769,9 @@ var activeSecondary$3 = gray80;
|
|
|
763
769
|
var hoverTertiary$3 = gray10;
|
|
764
770
|
var activeTertiary$3 = gray30;
|
|
765
771
|
var hoverUI$3 = '#4c4c4c';
|
|
772
|
+
var hoverLightUI$3 = '#656565';
|
|
766
773
|
var activeUI$3 = gray60;
|
|
774
|
+
var activeLightUI$3 = gray50;
|
|
767
775
|
var selectedUI$3 = gray70;
|
|
768
776
|
var selectedLightUI$3 = gray60;
|
|
769
777
|
var inverseHoverUI$3 = '#e5e5e5';
|
|
@@ -777,7 +785,6 @@ var disabled02$3 = gray60;
|
|
|
777
785
|
var disabled03$3 = gray40;
|
|
778
786
|
var highlight$3 = blue70;
|
|
779
787
|
var decorative01$3 = gray60;
|
|
780
|
-
var hoverLightUI$3 = '#6f6f6f';
|
|
781
788
|
var buttonSeparator$3 = '#161616';
|
|
782
789
|
var skeleton01$3 = '#353535';
|
|
783
790
|
var skeleton02$3 = gray70;
|
|
@@ -836,7 +843,9 @@ var g90 = /*#__PURE__*/Object.freeze({
|
|
|
836
843
|
hoverTertiary: hoverTertiary$3,
|
|
837
844
|
activeTertiary: activeTertiary$3,
|
|
838
845
|
hoverUI: hoverUI$3,
|
|
846
|
+
hoverLightUI: hoverLightUI$3,
|
|
839
847
|
activeUI: activeUI$3,
|
|
848
|
+
activeLightUI: activeLightUI$3,
|
|
840
849
|
selectedUI: selectedUI$3,
|
|
841
850
|
selectedLightUI: selectedLightUI$3,
|
|
842
851
|
inverseHoverUI: inverseHoverUI$3,
|
|
@@ -850,7 +859,6 @@ var g90 = /*#__PURE__*/Object.freeze({
|
|
|
850
859
|
disabled03: disabled03$3,
|
|
851
860
|
highlight: highlight$3,
|
|
852
861
|
decorative01: decorative01$3,
|
|
853
|
-
hoverLightUI: hoverLightUI$3,
|
|
854
862
|
buttonSeparator: buttonSeparator$3,
|
|
855
863
|
skeleton01: skeleton01$3,
|
|
856
864
|
skeleton02: skeleton02$3,
|
|
@@ -976,7 +984,9 @@ var activeSecondary$4 = '#414f59';
|
|
|
976
984
|
var hoverTertiary$4 = '#5a6872';
|
|
977
985
|
var activeTertiary$4 = '#414f59';
|
|
978
986
|
var hoverUI$4 = '#EEF4FC';
|
|
987
|
+
var hoverLightUI$4 = '#EEF4FC';
|
|
979
988
|
var activeUI$4 = '#DFEAFA';
|
|
989
|
+
var activeLightUI$4 = '#DFEAFA';
|
|
980
990
|
var selectedUI$4 = '#EEF4FC';
|
|
981
991
|
var selectedLightUI$4 = '#EEF4FC';
|
|
982
992
|
var inverseHoverUI$4 = '#4c4c4c';
|
|
@@ -990,7 +1000,6 @@ var disabled02$4 = '#dfe3e6';
|
|
|
990
1000
|
var disabled03$4 = '#cdd1d4';
|
|
991
1001
|
var highlight$4 = '#f4f7fb';
|
|
992
1002
|
var decorative01$4 = '#EEF4FC';
|
|
993
|
-
var hoverLightUI$4 = '#EEF4FC';
|
|
994
1003
|
var buttonSeparator$4 = '#e0e0e0';
|
|
995
1004
|
var skeleton01$4 = 'rgba(61, 112, 178, .1)';
|
|
996
1005
|
var skeleton02$4 = 'rgba(61, 112, 178, .1)';
|
|
@@ -1049,7 +1058,9 @@ var v9 = /*#__PURE__*/Object.freeze({
|
|
|
1049
1058
|
hoverTertiary: hoverTertiary$4,
|
|
1050
1059
|
activeTertiary: activeTertiary$4,
|
|
1051
1060
|
hoverUI: hoverUI$4,
|
|
1061
|
+
hoverLightUI: hoverLightUI$4,
|
|
1052
1062
|
activeUI: activeUI$4,
|
|
1063
|
+
activeLightUI: activeLightUI$4,
|
|
1053
1064
|
selectedUI: selectedUI$4,
|
|
1054
1065
|
selectedLightUI: selectedLightUI$4,
|
|
1055
1066
|
inverseHoverUI: inverseHoverUI$4,
|
|
@@ -1063,7 +1074,6 @@ var v9 = /*#__PURE__*/Object.freeze({
|
|
|
1063
1074
|
disabled03: disabled03$4,
|
|
1064
1075
|
highlight: highlight$4,
|
|
1065
1076
|
decorative01: decorative01$4,
|
|
1066
|
-
hoverLightUI: hoverLightUI$4,
|
|
1067
1077
|
buttonSeparator: buttonSeparator$4,
|
|
1068
1078
|
skeleton01: skeleton01$4,
|
|
1069
1079
|
skeleton02: skeleton02$4,
|
|
@@ -1146,7 +1156,7 @@ var v9 = /*#__PURE__*/Object.freeze({
|
|
|
1146
1156
|
|
|
1147
1157
|
var colors = [// Core
|
|
1148
1158
|
'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
|
|
1149
|
-
'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', '
|
|
1159
|
+
'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
|
|
1150
1160
|
'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
|
|
1151
1161
|
var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
|
1152
1162
|
/**
|
|
@@ -1198,7 +1208,7 @@ var unstable__meta = {
|
|
|
1198
1208
|
tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
|
|
1199
1209
|
}, {
|
|
1200
1210
|
type: 'interactive',
|
|
1201
|
-
tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', '
|
|
1211
|
+
tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator']
|
|
1202
1212
|
}],
|
|
1203
1213
|
deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger']
|
|
1204
1214
|
};
|
|
@@ -1217,4 +1227,4 @@ var themes = {
|
|
|
1217
1227
|
v9: v9
|
|
1218
1228
|
};
|
|
1219
1229
|
|
|
1220
|
-
export { g10, g90, g100, white$1 as white, v9, tokens, formatTokenName, unstable__meta, themes, interactive01, interactive02, interactive03, interactive04, uiBackground, ui01, ui02, ui03, ui04, ui05, text01, text02, text03, text04, text05, textError, icon01, icon02, icon03, link01, inverseLink, field01, field02, inverse01, inverse02, support01, support02, support03, support04, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, overlay01, danger01, danger02, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, selectedLightUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, decorative01,
|
|
1230
|
+
export { g10, g90, g100, white$1 as white, v9, tokens, formatTokenName, unstable__meta, themes, interactive01, interactive02, interactive03, interactive04, uiBackground, ui01, ui02, ui03, ui04, ui05, text01, text02, text03, text04, text05, textError, icon01, icon02, icon03, link01, inverseLink, field01, field02, inverse01, inverse02, support01, support02, support03, support04, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, overlay01, danger01, danger02, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, hoverLightUI, activeUI, activeLightUI, selectedUI, selectedLightUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, decorative01, buttonSeparator, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField, danger };
|