@carbon/elements 10.22.1 → 10.24.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/package.json CHANGED
@@ -1,11 +1,15 @@
1
1
  {
2
2
  "name": "@carbon/elements",
3
3
  "description": "A collection of design elements in code for the IBM Design Language",
4
- "version": "10.22.1",
4
+ "version": "10.24.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
8
- "repository": "https://github.com/carbon-design-system/carbon/tree/master/packages/elements",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/carbon-design-system/carbon.git",
11
+ "directory": "packages/elements"
12
+ },
9
13
  "bugs": "https://github.com/carbon-design-system/carbon/issues",
10
14
  "files": [
11
15
  "es",
@@ -31,21 +35,21 @@
31
35
  "clean": "rimraf es lib umd && node tasks/clean.js"
32
36
  },
33
37
  "dependencies": {
34
- "@carbon/colors": "^10.15.0",
35
- "@carbon/grid": "^10.16.0",
36
- "@carbon/icons": "^10.20.0",
37
- "@carbon/import-once": "^10.3.0",
38
- "@carbon/layout": "^10.14.0",
39
- "@carbon/motion": "^10.9.0",
40
- "@carbon/themes": "^10.22.1",
41
- "@carbon/type": "^10.17.0"
38
+ "@carbon/colors": "^10.17.0",
39
+ "@carbon/grid": "^10.17.0",
40
+ "@carbon/icons": "^10.22.0",
41
+ "@carbon/import-once": "^10.4.0",
42
+ "@carbon/layout": "^10.15.0",
43
+ "@carbon/motion": "^10.10.0",
44
+ "@carbon/themes": "^10.24.0",
45
+ "@carbon/type": "^10.18.0"
42
46
  },
43
47
  "devDependencies": {
44
- "@carbon/bundler": "^10.9.0",
48
+ "@carbon/bundler": "^10.10.0",
45
49
  "fs-extra": "^8.1.0",
46
50
  "klaw-sync": "^6.0.0",
47
51
  "replace-in-file": "^3.4.2",
48
52
  "rimraf": "^3.0.0"
49
53
  },
50
- "gitHead": "9159353b34ef5e1944536c1954ac6322b2ea5716"
54
+ "gitHead": "0797f3112f8a97636d05d81a3457482884364528"
51
55
  }
@@ -72,6 +72,8 @@
72
72
  $ibm-color__magenta-90: #510224 !default !global;
73
73
  $ibm-color__magenta-100: #2a0a18 !default !global;
74
74
  $ibm-color__orange-40: #ff832b !default !global;
75
+ $ibm-color__orange-60: #ba4e00 !default !global;
76
+ $ibm-color__orange-70: #8a3800 !default !global;
75
77
  $ibm-color__purple-10: #f6f2ff !default !global;
76
78
  $ibm-color__purple-20: #e8daff !default !global;
77
79
  $ibm-color__purple-30: #d4bbff !default !global;
@@ -115,6 +117,8 @@
115
117
  $ibm-color__white-0: #ffffff !default !global;
116
118
  $ibm-color__yellow-20: #fdd13a !default !global;
117
119
  $ibm-color__yellow-30: #f1c21b !default !global;
120
+ $ibm-color__yellow-40: #d2a106 !default !global;
121
+ $ibm-color__yellow-50: #b28600 !default !global;
118
122
  $ibm-color-map: (
119
123
  'black': (
120
124
  100: #000000,
@@ -205,6 +209,8 @@
205
209
  ),
206
210
  'orange': (
207
211
  40: #ff832b,
212
+ 60: #ba4e00,
213
+ 70: #8a3800,
208
214
  ),
209
215
  'purple': (
210
216
  10: #f6f2ff,
@@ -272,6 +278,8 @@
272
278
  'yellow': (
273
279
  20: #fdd13a,
274
280
  30: #f1c21b,
281
+ 40: #d2a106,
282
+ 50: #b28600,
275
283
  ),
276
284
  ) !default !global;
277
285
  }
@@ -341,6 +349,8 @@
341
349
  $carbon--magenta-90: #510224 !default !global;
342
350
  $carbon--magenta-100: #2a0a18 !default !global;
343
351
  $carbon--orange-40: #ff832b !default !global;
352
+ $carbon--orange-60: #ba4e00 !default !global;
353
+ $carbon--orange-70: #8a3800 !default !global;
344
354
  $carbon--purple-10: #f6f2ff !default !global;
345
355
  $carbon--purple-20: #e8daff !default !global;
346
356
  $carbon--purple-30: #d4bbff !default !global;
@@ -384,6 +394,8 @@
384
394
  $carbon--white-0: #ffffff !default !global;
385
395
  $carbon--yellow-20: #fdd13a !default !global;
386
396
  $carbon--yellow-30: #f1c21b !default !global;
397
+ $carbon--yellow-40: #d2a106 !default !global;
398
+ $carbon--yellow-50: #b28600 !default !global;
387
399
  $black-100: #000000 !default !global;
388
400
  $blue-10: #edf5ff !default !global;
389
401
  $blue-20: #d0e2ff !default !global;
@@ -446,6 +458,8 @@
446
458
  $magenta-90: #510224 !default !global;
447
459
  $magenta-100: #2a0a18 !default !global;
448
460
  $orange-40: #ff832b !default !global;
461
+ $orange-60: #ba4e00 !default !global;
462
+ $orange-70: #8a3800 !default !global;
449
463
  $purple-10: #f6f2ff !default !global;
450
464
  $purple-20: #e8daff !default !global;
451
465
  $purple-30: #d4bbff !default !global;
@@ -489,6 +503,8 @@
489
503
  $white-0: #ffffff !default !global;
490
504
  $yellow-20: #fdd13a !default !global;
491
505
  $yellow-30: #f1c21b !default !global;
506
+ $yellow-40: #d2a106 !default !global;
507
+ $yellow-50: #b28600 !default !global;
492
508
  $carbon--colors: (
493
509
  'black': (
494
510
  100: #000000,
@@ -579,6 +595,8 @@
579
595
  ),
580
596
  'orange': (
581
597
  40: #ff832b,
598
+ 60: #ba4e00,
599
+ 70: #8a3800,
582
600
  ),
583
601
  'purple': (
584
602
  10: #f6f2ff,
@@ -646,6 +664,8 @@
646
664
  'yellow': (
647
665
  20: #fdd13a,
648
666
  30: #f1c21b,
667
+ 40: #d2a106,
668
+ 50: #b28600,
649
669
  ),
650
670
  ) !default !global;
651
671
  }
@@ -84,10 +84,12 @@
84
84
  $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
85
85
  $active-tertiary: map-get($theme, 'active-tertiary') !global;
86
86
  $hover-ui: map-get($theme, 'hover-ui') !global;
87
+ $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
88
+ $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
87
89
  $active-ui: map-get($theme, 'active-ui') !global;
90
+ $active-light-ui: map-get($theme, 'active-light-ui') !global;
88
91
  $selected-ui: map-get($theme, 'selected-ui') !global;
89
92
  $selected-light-ui: map-get($theme, 'selected-light-ui') !global;
90
- $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
91
93
  $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;
92
94
  $hover-danger: map-get($theme, 'hover-danger') !global;
93
95
  $active-danger: map-get($theme, 'active-danger') !global;
@@ -98,7 +100,6 @@
98
100
  $disabled-03: map-get($theme, 'disabled-03') !global;
99
101
  $highlight: map-get($theme, 'highlight') !global;
100
102
  $decorative-01: map-get($theme, 'decorative-01') !global;
101
- $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
102
103
  $button-separator: map-get($theme, 'button-separator') !global;
103
104
  $skeleton-01: map-get($theme, 'skeleton-01') !global;
104
105
  $skeleton-02: map-get($theme, 'skeleton-02') !global;
@@ -357,10 +358,22 @@
357
358
  --#{$custom-property-prefix}-hover-ui,
358
359
  map-get($theme, 'hover-ui')
359
360
  ) !global;
361
+ $hover-light-ui: var(
362
+ --#{$custom-property-prefix}-hover-light-ui,
363
+ map-get($theme, 'hover-light-ui')
364
+ ) !global;
365
+ $hover-selected-ui: var(
366
+ --#{$custom-property-prefix}-hover-selected-ui,
367
+ map-get($theme, 'hover-selected-ui')
368
+ ) !global;
360
369
  $active-ui: var(
361
370
  --#{$custom-property-prefix}-active-ui,
362
371
  map-get($theme, 'active-ui')
363
372
  ) !global;
373
+ $active-light-ui: var(
374
+ --#{$custom-property-prefix}-active-light-ui,
375
+ map-get($theme, 'active-light-ui')
376
+ ) !global;
364
377
  $selected-ui: var(
365
378
  --#{$custom-property-prefix}-selected-ui,
366
379
  map-get($theme, 'selected-ui')
@@ -369,10 +382,6 @@
369
382
  --#{$custom-property-prefix}-selected-light-ui,
370
383
  map-get($theme, 'selected-light-ui')
371
384
  ) !global;
372
- $hover-selected-ui: var(
373
- --#{$custom-property-prefix}-hover-selected-ui,
374
- map-get($theme, 'hover-selected-ui')
375
- ) !global;
376
385
  $inverse-hover-ui: var(
377
386
  --#{$custom-property-prefix}-inverse-hover-ui,
378
387
  map-get($theme, 'inverse-hover-ui')
@@ -413,10 +422,6 @@
413
422
  --#{$custom-property-prefix}-decorative-01,
414
423
  map-get($theme, 'decorative-01')
415
424
  ) !global;
416
- $hover-light-ui: var(
417
- --#{$custom-property-prefix}-hover-light-ui,
418
- map-get($theme, 'hover-light-ui')
419
- ) !global;
420
425
  $button-separator: var(
421
426
  --#{$custom-property-prefix}-button-separator,
422
427
  map-get($theme, 'button-separator')
@@ -971,44 +976,70 @@
971
976
  @include custom-property('hover-ui', map-get($theme, 'hover-ui'));
972
977
  }
973
978
 
974
- @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
979
+ @if should-emit(
980
+ $theme,
981
+ $parent-carbon-theme,
982
+ 'hover-light-ui',
983
+ $emit-difference
984
+ )
975
985
  {
976
- @include custom-property('active-ui', map-get($theme, 'active-ui'));
986
+ @include custom-property(
987
+ 'hover-light-ui',
988
+ map-get($theme, 'hover-light-ui')
989
+ );
977
990
  }
978
991
 
979
992
  @if should-emit(
980
993
  $theme,
981
994
  $parent-carbon-theme,
982
- 'selected-ui',
995
+ 'hover-selected-ui',
983
996
  $emit-difference
984
997
  )
985
998
  {
986
- @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
999
+ @include custom-property(
1000
+ 'hover-selected-ui',
1001
+ map-get($theme, 'hover-selected-ui')
1002
+ );
1003
+ }
1004
+
1005
+ @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
1006
+ {
1007
+ @include custom-property('active-ui', map-get($theme, 'active-ui'));
987
1008
  }
988
1009
 
989
1010
  @if should-emit(
990
1011
  $theme,
991
1012
  $parent-carbon-theme,
992
- 'selected-light-ui',
1013
+ 'active-light-ui',
993
1014
  $emit-difference
994
1015
  )
995
1016
  {
996
1017
  @include custom-property(
997
- 'selected-light-ui',
998
- map-get($theme, 'selected-light-ui')
1018
+ 'active-light-ui',
1019
+ map-get($theme, 'active-light-ui')
999
1020
  );
1000
1021
  }
1001
1022
 
1002
1023
  @if should-emit(
1003
1024
  $theme,
1004
1025
  $parent-carbon-theme,
1005
- 'hover-selected-ui',
1026
+ 'selected-ui',
1027
+ $emit-difference
1028
+ )
1029
+ {
1030
+ @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
1031
+ }
1032
+
1033
+ @if should-emit(
1034
+ $theme,
1035
+ $parent-carbon-theme,
1036
+ 'selected-light-ui',
1006
1037
  $emit-difference
1007
1038
  )
1008
1039
  {
1009
1040
  @include custom-property(
1010
- 'hover-selected-ui',
1011
- map-get($theme, 'hover-selected-ui')
1041
+ 'selected-light-ui',
1042
+ map-get($theme, 'selected-light-ui')
1012
1043
  );
1013
1044
  }
1014
1045
 
@@ -1111,19 +1142,6 @@
1111
1142
  );
1112
1143
  }
1113
1144
 
1114
- @if should-emit(
1115
- $theme,
1116
- $parent-carbon-theme,
1117
- 'hover-light-ui',
1118
- $emit-difference
1119
- )
1120
- {
1121
- @include custom-property(
1122
- 'hover-light-ui',
1123
- map-get($theme, 'hover-light-ui')
1124
- );
1125
- }
1126
-
1127
1145
  @if should-emit(
1128
1146
  $theme,
1129
1147
  $parent-carbon-theme,
@@ -53,7 +53,9 @@ $carbon--theme--white: (
53
53
  hover-tertiary: #0353e9,
54
54
  active-tertiary: #002d9c,
55
55
  hover-ui: #e5e5e5,
56
+ hover-light-ui: #e5e5e5,
56
57
  active-ui: #c6c6c6,
58
+ active-light-ui: #c6c6c6,
57
59
  selected-ui: #e0e0e0,
58
60
  selected-light-ui: #e0e0e0,
59
61
  inverse-hover-ui: #4c4c4c,
@@ -67,7 +69,6 @@ $carbon--theme--white: (
67
69
  disabled-03: #8d8d8d,
68
70
  highlight: #d0e2ff,
69
71
  decorative-01: #e0e0e0,
70
- hover-light-ui: #e5e5e5,
71
72
  button-separator: #e0e0e0,
72
73
  skeleton-01: #e5e5e5,
73
74
  skeleton-02: #c6c6c6,
@@ -555,7 +556,9 @@ $carbon--theme--g90: map-merge(
555
556
  hover-tertiary: #f4f4f4,
556
557
  active-tertiary: #c6c6c6,
557
558
  hover-ui: #4c4c4c,
559
+ hover-light-ui: #656565,
558
560
  active-ui: #6f6f6f,
561
+ active-light-ui: #8d8d8d,
559
562
  selected-ui: #525252,
560
563
  selected-light-ui: #6f6f6f,
561
564
  inverse-hover-ui: #e5e5e5,
@@ -567,7 +570,6 @@ $carbon--theme--g90: map-merge(
567
570
  disabled-03: #a8a8a8,
568
571
  highlight: #0043ce,
569
572
  decorative-01: #6f6f6f,
570
- hover-light-ui: #6f6f6f,
571
573
  button-separator: #161616,
572
574
  skeleton-01: #353535,
573
575
  skeleton-02: #525252,
@@ -623,7 +625,9 @@ $carbon--theme--g100: map-merge(
623
625
  hover-tertiary: #f4f4f4,
624
626
  active-tertiary: #c6c6c6,
625
627
  hover-ui: #353535,
628
+ hover-light-ui: #4c4c4c,
626
629
  active-ui: #525252,
630
+ active-light-ui: #6f6f6f,
627
631
  selected-ui: #393939,
628
632
  selected-light-ui: #525252,
629
633
  inverse-hover-ui: #e5e5e5,
@@ -634,7 +638,6 @@ $carbon--theme--g100: map-merge(
634
638
  disabled-02: #525252,
635
639
  highlight: #002d9c,
636
640
  decorative-01: #525252,
637
- hover-light-ui: #525252,
638
641
  button-separator: #161616,
639
642
  skeleton-01: #353535,
640
643
  skeleton-02: #393939,
@@ -693,7 +696,9 @@ $carbon--theme--v9: map-merge(
693
696
  hover-tertiary: #5a6872,
694
697
  active-tertiary: #414f59,
695
698
  hover-ui: #eef4fc,
699
+ hover-light-ui: #eef4fc,
696
700
  active-ui: #dfeafa,
701
+ active-light-ui: #dfeafa,
697
702
  selected-ui: #eef4fc,
698
703
  selected-light-ui: #eef4fc,
699
704
  hover-selected-ui: #dfeafa,
@@ -706,7 +711,6 @@ $carbon--theme--v9: map-merge(
706
711
  disabled-03: #cdd1d4,
707
712
  highlight: #f4f7fb,
708
713
  decorative-01: #eef4fc,
709
- hover-light-ui: #eef4fc,
710
714
  skeleton-01: rgba(61, 112, 178, 0.1),
711
715
  skeleton-02: rgba(61, 112, 178, 0.1),
712
716
  brand-01: #3d70b2,
@@ -999,12 +1003,30 @@ $carbon--theme: (
999
1003
  $hover-ui,
1000
1004
  map-get($carbon--theme--white, 'hover-ui')
1001
1005
  ),
1006
+ hover-light-ui:
1007
+ if(
1008
+ global-variable-exists('hover-light-ui'),
1009
+ $hover-light-ui,
1010
+ map-get($carbon--theme--white, 'hover-light-ui')
1011
+ ),
1012
+ hover-selected-ui:
1013
+ if(
1014
+ global-variable-exists('hover-selected-ui'),
1015
+ $hover-selected-ui,
1016
+ map-get($carbon--theme--white, 'hover-selected-ui')
1017
+ ),
1002
1018
  active-ui:
1003
1019
  if(
1004
1020
  global-variable-exists('active-ui'),
1005
1021
  $active-ui,
1006
1022
  map-get($carbon--theme--white, 'active-ui')
1007
1023
  ),
1024
+ active-light-ui:
1025
+ if(
1026
+ global-variable-exists('active-light-ui'),
1027
+ $active-light-ui,
1028
+ map-get($carbon--theme--white, 'active-light-ui')
1029
+ ),
1008
1030
  selected-ui:
1009
1031
  if(
1010
1032
  global-variable-exists('selected-ui'),
@@ -1017,12 +1039,6 @@ $carbon--theme: (
1017
1039
  $selected-light-ui,
1018
1040
  map-get($carbon--theme--white, 'selected-light-ui')
1019
1041
  ),
1020
- hover-selected-ui:
1021
- if(
1022
- global-variable-exists('hover-selected-ui'),
1023
- $hover-selected-ui,
1024
- map-get($carbon--theme--white, 'hover-selected-ui')
1025
- ),
1026
1042
  inverse-hover-ui:
1027
1043
  if(
1028
1044
  global-variable-exists('inverse-hover-ui'),
@@ -1083,12 +1099,6 @@ $carbon--theme: (
1083
1099
  $decorative-01,
1084
1100
  map-get($carbon--theme--white, 'decorative-01')
1085
1101
  ),
1086
- hover-light-ui:
1087
- if(
1088
- global-variable-exists('hover-light-ui'),
1089
- $hover-light-ui,
1090
- map-get($carbon--theme--white, 'hover-light-ui')
1091
- ),
1092
1102
  button-separator:
1093
1103
  if(
1094
1104
  global-variable-exists('button-separator'),
@@ -506,6 +506,27 @@ $hover-ui: if(
506
506
  #e5e5e5
507
507
  ) !default;
508
508
 
509
+ /// @type {undefined}
510
+ /// @access public
511
+ /// @group @carbon/themes
512
+ $hover-light-ui: if(
513
+ global-variable-exists('carbon--theme') and
514
+ map-has-key($carbon--theme, 'hover-light-ui'),
515
+ map-get($carbon--theme, 'hover-light-ui'),
516
+ #e5e5e5
517
+ ) !default;
518
+
519
+ /// Data table selected row hover
520
+ /// @type {undefined}
521
+ /// @access public
522
+ /// @group @carbon/themes
523
+ $hover-selected-ui: if(
524
+ global-variable-exists('carbon--theme') and
525
+ map-has-key($carbon--theme, 'hover-selected-ui'),
526
+ map-get($carbon--theme, 'hover-selected-ui'),
527
+ #cacaca
528
+ ) !default;
529
+
509
530
  /// `$ui-01` active; `$ui-02` active
510
531
  /// @type {undefined}
511
532
  /// @access public
@@ -517,6 +538,16 @@ $active-ui: if(
517
538
  #c6c6c6
518
539
  ) !default;
519
540
 
541
+ /// @type {undefined}
542
+ /// @access public
543
+ /// @group @carbon/themes
544
+ $active-light-ui: if(
545
+ global-variable-exists('carbon--theme') and
546
+ map-has-key($carbon--theme, 'active-light-ui'),
547
+ map-get($carbon--theme, 'active-light-ui'),
548
+ #c6c6c6
549
+ ) !default;
550
+
520
551
  /// Selected UI elements
521
552
  /// @type {undefined}
522
553
  /// @access public
@@ -538,17 +569,6 @@ $selected-light-ui: if(
538
569
  #e0e0e0
539
570
  ) !default;
540
571
 
541
- /// Data table selected row hover
542
- /// @type {undefined}
543
- /// @access public
544
- /// @group @carbon/themes
545
- $hover-selected-ui: if(
546
- global-variable-exists('carbon--theme') and
547
- map-has-key($carbon--theme, 'hover-selected-ui'),
548
- map-get($carbon--theme, 'hover-selected-ui'),
549
- #cacaca
550
- ) !default;
551
-
552
572
  /// @type {undefined}
553
573
  /// @access public
554
574
  /// @group @carbon/themes
@@ -657,16 +677,6 @@ $decorative-01: if(
657
677
  #e0e0e0
658
678
  ) !default;
659
679
 
660
- /// @type {undefined}
661
- /// @access public
662
- /// @group @carbon/themes
663
- $hover-light-ui: if(
664
- global-variable-exists('carbon--theme') and
665
- map-has-key($carbon--theme, 'hover-light-ui'),
666
- map-get($carbon--theme, 'hover-light-ui'),
667
- #e5e5e5
668
- ) !default;
669
-
670
680
  /// @type {undefined}
671
681
  /// @access public
672
682
  /// @group @carbon/themes