@czi-sds/components 22.14.0 → 22.15.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 (9) hide show
  1. package/dist/index.cjs.d.ts +76 -6
  2. package/dist/index.cjs.js +2156 -1194
  3. package/dist/index.esm.d.ts +76 -6
  4. package/dist/index.esm.js +2156 -1194
  5. package/dist/tailwind.json +122 -66
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +136 -78
  8. package/dist/variables.scss +136 -78
  9. package/package.json +2 -2
package/dist/variables.css CHANGED
@@ -1,14 +1,15 @@
1
1
  @media (prefers-color-scheme: light) {
2
2
  :root {
3
- --sds-border-accent-default: 1px solid #1a6cef;
4
- --sds-border-accent-focused: 1px solid #1a6cef;
5
- --sds-border-accent-hover: 1px solid #0041b9;
6
- --sds-border-accent-open: 1px solid #1a6cef;
7
- --sds-border-accent-pressed: 1px solid #002d90;
8
- --sds-border-accent-selected: 1px solid #1a6cef;
3
+ --sds-border-accent-default: 1px solid #6e4ff9;
4
+ --sds-border-accent-focused: 1px solid #6e4ff9;
5
+ --sds-border-accent-hover: 1px solid #4e18cc;
6
+ --sds-border-accent-open: 1px solid #6e4ff9;
7
+ --sds-border-accent-pressed: 1px solid #330296;
8
+ --sds-border-accent-selected: 1px solid #6e4ff9;
9
9
  --sds-border-base-default: 1px solid #969696;
10
10
  --sds-border-base-disabled: 1px solid #c3c3c3;
11
11
  --sds-border-base-divider: 1px solid #dfdfdf;
12
+ --sds-border-base-divider-on-dark: 1px solid #3b3b3b;
12
13
  --sds-border-base-divider-inverse: 1px solid #767676;
13
14
  --sds-border-base-hover: 1px solid #000000;
14
15
  --sds-border-base-inverse: 1px solid #ffffff;
@@ -57,6 +58,14 @@
57
58
  --sds-color-primitive-gray-700: #3b3b3b;
58
59
  --sds-color-primitive-gray-800: #1b1b1b;
59
60
  --sds-color-primitive-gray-900: #000000;
61
+ --sds-color-primitive-indigo-100: #f1f0ff;
62
+ --sds-color-primitive-indigo-200: #dcd9ff;
63
+ --sds-color-primitive-indigo-300: #beb5ff;
64
+ --sds-color-primitive-indigo-400: #9d8bff;
65
+ --sds-color-primitive-indigo-500: #6e4ff9;
66
+ --sds-color-primitive-indigo-600: #4e18cc;
67
+ --sds-color-primitive-indigo-700: #330296;
68
+ --sds-color-primitive-indigo-800: #1d004d;
60
69
  --sds-color-primitive-green-100: #ebf9ed;
61
70
  --sds-color-primitive-green-200: #b9ecc3;
62
71
  --sds-color-primitive-green-300: #7fd693;
@@ -91,73 +100,93 @@
91
100
  --sds-color-primitive-yellow-800: #541700;
92
101
  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
93
102
  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
94
- --sds-color-semantic-accent-border: #1a6cef;
95
- --sds-color-semantic-accent-border-focus: #1a6cef;
96
- --sds-color-semantic-accent-border-hover: #0041b9;
97
- --sds-color-semantic-accent-border-open: #1a6cef;
98
- --sds-color-semantic-accent-border-pressed: #002d90;
99
- --sds-color-semantic-accent-border-selected: #1a6cef;
100
- --sds-color-semantic-accent-fill-hover: #0041b9;
101
- --sds-color-semantic-accent-fill-pressed: #002d90;
102
- --sds-color-semantic-accent-fill-primary: #1a6cef;
103
- --sds-color-semantic-accent-ornament: #1a6cef;
104
- --sds-color-semantic-accent-ornament-focus: #1a6cef;
105
- --sds-color-semantic-accent-ornament-hover: #0041b9;
106
- --sds-color-semantic-accent-ornament-open: #1a6cef;
107
- --sds-color-semantic-accent-ornament-pressed: #002d90;
108
- --sds-color-semantic-accent-ornament-selected: #1a6cef;
109
- --sds-color-semantic-accent-surface-primary: #1a6cef;
110
- --sds-color-semantic-accent-surface-secondary: #edf3fd;
111
- --sds-color-semantic-accent-text-action: #1a6cef;
112
- --sds-color-semantic-accent-text-action-hover: #0041b9;
113
- --sds-color-semantic-accent-text-action-pressed: #002d90;
103
+ --sds-color-semantic-accent-border: #6e4ff9;
104
+ --sds-color-semantic-accent-border-focus: #6e4ff9;
105
+ --sds-color-semantic-accent-border-hover: #4e18cc;
106
+ --sds-color-semantic-accent-border-open: #6e4ff9;
107
+ --sds-color-semantic-accent-border-pressed: #330296;
108
+ --sds-color-semantic-accent-border-selected: #6e4ff9;
109
+ --sds-color-semantic-accent-fill-hover: #4e18cc;
110
+ --sds-color-semantic-accent-fill-pressed: #330296;
111
+ --sds-color-semantic-accent-fill-primary: #6e4ff9;
112
+ --sds-color-semantic-accent-ornament: #6e4ff9;
113
+ --sds-color-semantic-accent-ornament-focus: #6e4ff9;
114
+ --sds-color-semantic-accent-ornament-hover: #4e18cc;
115
+ --sds-color-semantic-accent-ornament-open: #6e4ff9;
116
+ --sds-color-semantic-accent-ornament-pressed: #330296;
117
+ --sds-color-semantic-accent-ornament-selected: #6e4ff9;
118
+ --sds-color-semantic-accent-surface-primary: #6e4ff9;
119
+ --sds-color-semantic-accent-surface-secondary: #f1f0ff;
120
+ --sds-color-semantic-accent-text-action: #6e4ff9;
121
+ --sds-color-semantic-accent-text-action-hover: #4e18cc;
122
+ --sds-color-semantic-accent-text-action-pressed: #330296;
114
123
  --sds-color-semantic-base-background-primary: #ffffff;
124
+ --sds-color-semantic-base-background-primary-dark: #000000;
115
125
  --sds-color-semantic-base-background-primary-inverse: #000000;
116
- --sds-color-semantic-base-background-secondary: #f8f8f8;
126
+ --sds-color-semantic-base-background-secondary: #ededed66;
127
+ --sds-color-semantic-base-background-secondary-on-dark: #3b3b3b9E;
117
128
  --sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
118
129
  --sds-color-semantic-base-background-tertiary: #ededed;
119
130
  --sds-color-semantic-base-border-on-fill: #ffffff;
120
131
  --sds-color-semantic-base-border-primary: #767676;
121
132
  --sds-color-semantic-base-border-primary-disabled: #c3c3c3;
133
+ --sds-color-semantic-base-border-primary-disabled-on-dark: #767676;
122
134
  --sds-color-semantic-base-border-primary-disabled-inverse: #767676;
123
135
  --sds-color-semantic-base-border-primary-hover: #000000;
136
+ --sds-color-semantic-base-border-primary-hover-on-dark: #ffffff;
124
137
  --sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
138
+ --sds-color-semantic-base-border-primary-on-dark: #c3c3c3;
125
139
  --sds-color-semantic-base-border-primary-inverse: #c3c3c3;
126
140
  --sds-color-semantic-base-border-primary-pressed: #000000;
141
+ --sds-color-semantic-base-border-primary-pressed-on-dark: #ffffff;
127
142
  --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
128
143
  --sds-color-semantic-base-border-secondary: #c3c3c3;
129
144
  --sds-color-semantic-base-divider: #dfdfdf;
130
- --sds-color-semantic-base-divider-inverse: #767676;
145
+ --sds-color-semantic-base-divider-on-dark: #3b3b3b;
146
+ --sds-color-semantic-base-divider-inverse: #3b3b3b;
131
147
  --sds-color-semantic-base-fill-disabled: #dfdfdf;
132
148
  --sds-color-semantic-base-fill-hover: #c3c3c333;
149
+ --sds-color-semantic-base-fill-hover-on-dark: #c3c3c357;
133
150
  --sds-color-semantic-base-fill-hover-inverse: #c3c3c357;
134
151
  --sds-color-semantic-base-fill-open: #c3c3c333;
152
+ --sds-color-semantic-base-fill-open-on-dark: #c3c3c357;
135
153
  --sds-color-semantic-base-fill-open-inverse: #c3c3c357;
136
154
  --sds-color-semantic-base-fill-pressed: #c3c3c333;
155
+ --sds-color-semantic-base-fill-pressed-on-dark: #c3c3c357;
137
156
  --sds-color-semantic-base-fill-pressed-inverse: #c3c3c357;
138
157
  --sds-color-semantic-base-fill-primary: #ffffff;
139
158
  --sds-color-semantic-base-fill-selected: #000000;
140
159
  --sds-color-semantic-base-ornament-disabled: #c3c3c3;
160
+ --sds-color-semantic-base-ornament-disabled-on-dark: #767676;
141
161
  --sds-color-semantic-base-ornament-disabled-inverse: #767676;
142
162
  --sds-color-semantic-base-ornament-on-fill: #ffffff;
143
163
  --sds-color-semantic-base-ornament-primary: #000000;
164
+ --sds-color-semantic-base-ornament-primary-on-dark: #ffffff;
144
165
  --sds-color-semantic-base-ornament-primary-inverse: #ffffff;
145
166
  --sds-color-semantic-base-ornament-secondary: #767676;
146
167
  --sds-color-semantic-base-ornament-secondary-hover: #000000;
168
+ --sds-color-semantic-base-ornament-secondary-hover-on-dark: #ffffff;
147
169
  --sds-color-semantic-base-ornament-secondary-hover-inverse: #ffffff;
170
+ --sds-color-semantic-base-ornament-secondary-on-dark: #c3c3c3;
148
171
  --sds-color-semantic-base-ornament-secondary-inverse: #c3c3c3;
149
172
  --sds-color-semantic-base-ornament-secondary-pressed: #000000;
173
+ --sds-color-semantic-base-ornament-secondary-pressed-on-dark: #ffffff;
150
174
  --sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
151
175
  --sds-color-semantic-base-surface: #ffffff;
176
+ --sds-color-semantic-base-surface-on-dark: #000000;
152
177
  --sds-color-semantic-base-surface-inverse: #000000;
153
178
  --sds-color-semantic-base-text-disabled: #c3c3c3;
179
+ --sds-color-semantic-base-text-disabled-on-dark: #767676;
154
180
  --sds-color-semantic-base-text-disabled-inverse: #767676;
155
181
  --sds-color-semantic-base-text-on-fill: #ffffff;
156
182
  --sds-color-semantic-base-text-primary: #000000;
183
+ --sds-color-semantic-base-text-primary-on-dark: #ffffff;
157
184
  --sds-color-semantic-base-text-primary-inverse: #ffffff;
158
185
  --sds-color-semantic-base-text-secondary: #767676;
186
+ --sds-color-semantic-base-text-secondary-on-dark: #c3c3c3;
159
187
  --sds-color-semantic-base-text-secondary-inverse: #c3c3c3;
160
188
  --sds-color-semantic-base-text-tertiary: #a5a5a5;
189
+ --sds-color-semantic-base-text-tertiary-on-dark: #969696;
161
190
  --sds-color-semantic-base-text-tertiary-inverse: #969696;
162
191
  --sds-color-semantic-beta-border: #6526b5;
163
192
  --sds-color-semantic-beta-fill-hover: #6526b5;
@@ -647,15 +676,16 @@
647
676
 
648
677
  @media (prefers-color-scheme: dark) {
649
678
  :root {
650
- --sds-border-accent-default: 1px solid #a2c9ff;
651
- --sds-border-accent-focused: 1px solid #a2c9ff;
652
- --sds-border-accent-hover: 1px solid #cde3ff;
653
- --sds-border-accent-open: 1px solid #a2c9ff;
654
- --sds-border-accent-pressed: 1px solid #e2eeff;
655
- --sds-border-accent-selected: 1px solid #a2c9ff;
679
+ --sds-border-accent-default: 1px solid #beb5ff;
680
+ --sds-border-accent-focused: 1px solid #beb5ff;
681
+ --sds-border-accent-hover: 1px solid #dcd9ff;
682
+ --sds-border-accent-open: 1px solid #beb5ff;
683
+ --sds-border-accent-pressed: 1px solid #f1f0ff;
684
+ --sds-border-accent-selected: 1px solid #beb5ff;
656
685
  --sds-border-base-default: 1px solid #aaaaaa;
657
686
  --sds-border-base-disabled: 1px solid #696969;
658
687
  --sds-border-base-divider: 1px solid #494949;
688
+ --sds-border-base-divider-on-dark: 1px solid #494949;
659
689
  --sds-border-base-divider-inverse: 1px solid #cdcdcd;
660
690
  --sds-border-base-hover: 1px solid #ffffff;
661
691
  --sds-border-base-inverse: 1px solid #000000;
@@ -704,6 +734,14 @@
704
734
  --sds-color-primitive-gray-700: #ededed;
705
735
  --sds-color-primitive-gray-800: #fafafa;
706
736
  --sds-color-primitive-gray-900: #ffffff;
737
+ --sds-color-primitive-indigo-100: #1d004d;
738
+ --sds-color-primitive-indigo-200: #330296;
739
+ --sds-color-primitive-indigo-300: #521ec9;
740
+ --sds-color-primitive-indigo-400: #6e4ff9;
741
+ --sds-color-primitive-indigo-500: #9785ff;
742
+ --sds-color-primitive-indigo-600: #beb5ff;
743
+ --sds-color-primitive-indigo-700: #dcd9ff;
744
+ --sds-color-primitive-indigo-800: #f1f0ff;
707
745
  --sds-color-primitive-green-100: #082608;
708
746
  --sds-color-primitive-green-200: #063617;
709
747
  --sds-color-primitive-green-300: #10632e;
@@ -738,74 +776,94 @@
738
776
  --sds-color-primitive-yellow-800: #ffe6a8;
739
777
  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
740
778
  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
741
- --sds-color-semantic-accent-border: #a2c9ff;
742
- --sds-color-semantic-accent-border-focus: #a2c9ff;
743
- --sds-color-semantic-accent-border-hover: #cde3ff;
744
- --sds-color-semantic-accent-border-open: #a2c9ff;
745
- --sds-color-semantic-accent-border-pressed: #e2eeff;
746
- --sds-color-semantic-accent-border-selected: #a2c9ff;
747
- --sds-color-semantic-accent-fill-hover: #cde3ff;
748
- --sds-color-semantic-accent-fill-pressed: #e2eeff;
749
- --sds-color-semantic-accent-fill-primary: #2876f9;
750
- --sds-color-semantic-accent-ornament: #a2c9ff;
751
- --sds-color-semantic-accent-ornament-focus: #a2c9ff;
752
- --sds-color-semantic-accent-ornament-hover: #cde3ff;
753
- --sds-color-semantic-accent-ornament-open: #a2c9ff;
754
- --sds-color-semantic-accent-ornament-pressed: #e2eeff;
755
- --sds-color-semantic-accent-ornament-selected: #a2c9ff;
756
- --sds-color-semantic-accent-surface-primary: #2876f9;
757
- --sds-color-semantic-accent-surface-secondary: #0f1d4a;
758
- --sds-color-semantic-accent-text-action: #a2c9ff;
759
- --sds-color-semantic-accent-text-action-hover: #cde3ff;
760
- --sds-color-semantic-accent-text-action-pressed: #e2eeff;
779
+ --sds-color-semantic-accent-border: #beb5ff;
780
+ --sds-color-semantic-accent-border-focus: #beb5ff;
781
+ --sds-color-semantic-accent-border-hover: #dcd9ff;
782
+ --sds-color-semantic-accent-border-open: #beb5ff;
783
+ --sds-color-semantic-accent-border-pressed: #f1f0ff;
784
+ --sds-color-semantic-accent-border-selected: #beb5ff;
785
+ --sds-color-semantic-accent-fill-hover: #dcd9ff;
786
+ --sds-color-semantic-accent-fill-pressed: #f1f0ff;
787
+ --sds-color-semantic-accent-fill-primary: #6e4ff9;
788
+ --sds-color-semantic-accent-ornament: #beb5ff;
789
+ --sds-color-semantic-accent-ornament-focus: #beb5ff;
790
+ --sds-color-semantic-accent-ornament-hover: #dcd9ff;
791
+ --sds-color-semantic-accent-ornament-open: #beb5ff;
792
+ --sds-color-semantic-accent-ornament-pressed: #f1f0ff;
793
+ --sds-color-semantic-accent-ornament-selected: #beb5ff;
794
+ --sds-color-semantic-accent-surface-primary: #6e4ff9;
795
+ --sds-color-semantic-accent-surface-secondary: #1d004d;
796
+ --sds-color-semantic-accent-text-action: #beb5ff;
797
+ --sds-color-semantic-accent-text-action-hover: #dcd9ff;
798
+ --sds-color-semantic-accent-text-action-pressed: #f1f0ff;
761
799
  --sds-color-semantic-base-background-primary: #101010;
762
- --sds-color-semantic-base-background-primary-inverse: #ffffff;
763
- --sds-color-semantic-base-background-secondary: #333333;
764
- --sds-color-semantic-base-background-secondary-inverse: #ededed;
765
- --sds-color-semantic-base-background-tertiary: #494949;
766
- --sds-color-semantic-base-border-on-fill: #000000;
800
+ --sds-color-semantic-base-background-primary-dark: #101010;
801
+ --sds-color-semantic-base-background-primary-inverse: #101010;
802
+ --sds-color-semantic-base-background-secondary: #33333399;
803
+ --sds-color-semantic-base-background-secondary-on-dark: #33333399;
804
+ --sds-color-semantic-base-background-secondary-inverse: #33333399;
805
+ --sds-color-semantic-base-background-tertiary: #333333;
806
+ --sds-color-semantic-base-border-on-fill: #ffffff;
767
807
  --sds-color-semantic-base-border-primary: #cdcdcd;
768
808
  --sds-color-semantic-base-border-primary-disabled: #696969;
769
- --sds-color-semantic-base-border-primary-disabled-inverse: #cdcdcd;
809
+ --sds-color-semantic-base-border-primary-disabled-on-dark: #696969;
810
+ --sds-color-semantic-base-border-primary-disabled-inverse: #696969;
770
811
  --sds-color-semantic-base-border-primary-hover: #ffffff;
771
- --sds-color-semantic-base-border-primary-hover-inverse: #000000;
772
- --sds-color-semantic-base-border-primary-inverse: #696969;
812
+ --sds-color-semantic-base-border-primary-hover-on-dark: #ffffff;
813
+ --sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
814
+ --sds-color-semantic-base-border-primary-on-dark: #cdcdcd;
815
+ --sds-color-semantic-base-border-primary-inverse: #cdcdcd;
773
816
  --sds-color-semantic-base-border-primary-pressed: #ffffff;
774
- --sds-color-semantic-base-border-primary-pressed-inverse: #000000;
817
+ --sds-color-semantic-base-border-primary-pressed-on-dark: #ffffff;
818
+ --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
775
819
  --sds-color-semantic-base-border-secondary: #696969;
776
820
  --sds-color-semantic-base-divider: #494949;
777
- --sds-color-semantic-base-divider-inverse: #cdcdcd;
821
+ --sds-color-semantic-base-divider-on-dark: #494949;
822
+ --sds-color-semantic-base-divider-inverse: #494949;
778
823
  --sds-color-semantic-base-fill-disabled: #494949;
779
- --sds-color-semantic-base-fill-hover: #69696994;
780
- --sds-color-semantic-base-fill-hover-inverse: #69696914;
781
- --sds-color-semantic-base-fill-open: #69696994;
782
- --sds-color-semantic-base-fill-open-inverse: #69696914;
783
- --sds-color-semantic-base-fill-pressed: #69696994;
784
- --sds-color-semantic-base-fill-pressed-inverse: #69696914;
824
+ --sds-color-semantic-base-fill-hover: #69696952;
825
+ --sds-color-semantic-base-fill-hover-on-dark: #69696952;
826
+ --sds-color-semantic-base-fill-hover-inverse: #69696952;
827
+ --sds-color-semantic-base-fill-open: #69696952;
828
+ --sds-color-semantic-base-fill-open-on-dark: #69696952;
829
+ --sds-color-semantic-base-fill-open-inverse: #69696952;
830
+ --sds-color-semantic-base-fill-pressed: #69696952;
831
+ --sds-color-semantic-base-fill-pressed-on-dark: #69696952;
832
+ --sds-color-semantic-base-fill-pressed-inverse: #69696952;
785
833
  --sds-color-semantic-base-fill-primary: #333333;
786
834
  --sds-color-semantic-base-fill-selected: #ffffff;
787
835
  --sds-color-semantic-base-ornament-disabled: #696969;
788
- --sds-color-semantic-base-ornament-disabled-inverse: #cdcdcd;
836
+ --sds-color-semantic-base-ornament-disabled-on-dark: #696969;
837
+ --sds-color-semantic-base-ornament-disabled-inverse: #696969;
789
838
  --sds-color-semantic-base-ornament-on-fill: #ffffff;
790
839
  --sds-color-semantic-base-ornament-primary: #ffffff;
840
+ --sds-color-semantic-base-ornament-primary-on-dark: #ffffff;
791
841
  --sds-color-semantic-base-ornament-primary-inverse: #000000;
792
842
  --sds-color-semantic-base-ornament-secondary: #cdcdcd;
793
843
  --sds-color-semantic-base-ornament-secondary-hover: #ffffff;
794
- --sds-color-semantic-base-ornament-secondary-hover-inverse: #000000;
795
- --sds-color-semantic-base-ornament-secondary-inverse: #696969;
844
+ --sds-color-semantic-base-ornament-secondary-hover-on-dark: #ffffff;
845
+ --sds-color-semantic-base-ornament-secondary-hover-inverse: #ffffff;
846
+ --sds-color-semantic-base-ornament-secondary-on-dark: #cdcdcd;
847
+ --sds-color-semantic-base-ornament-secondary-inverse: #cdcdcd;
796
848
  --sds-color-semantic-base-ornament-secondary-pressed: #ffffff;
797
- --sds-color-semantic-base-ornament-secondary-pressed-inverse: #000000;
849
+ --sds-color-semantic-base-ornament-secondary-pressed-on-dark: #ffffff;
850
+ --sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
798
851
  --sds-color-semantic-base-surface: #333333;
799
- --sds-color-semantic-base-surface-inverse: #ededed;
852
+ --sds-color-semantic-base-surface-on-dark: #333333;
853
+ --sds-color-semantic-base-surface-inverse: #333333;
800
854
  --sds-color-semantic-base-text-disabled: #696969;
801
- --sds-color-semantic-base-text-disabled-inverse: #cdcdcd;
855
+ --sds-color-semantic-base-text-disabled-on-dark: #696969;
856
+ --sds-color-semantic-base-text-disabled-inverse: #696969;
802
857
  --sds-color-semantic-base-text-on-fill: #ffffff;
803
858
  --sds-color-semantic-base-text-primary: #ffffff;
859
+ --sds-color-semantic-base-text-primary-on-dark: #ffffff;
804
860
  --sds-color-semantic-base-text-primary-inverse: #000000;
805
861
  --sds-color-semantic-base-text-secondary: #cdcdcd;
806
- --sds-color-semantic-base-text-secondary-inverse: #696969;
862
+ --sds-color-semantic-base-text-secondary-on-dark: #cdcdcd;
863
+ --sds-color-semantic-base-text-secondary-inverse: #cdcdcd;
807
864
  --sds-color-semantic-base-text-tertiary: #949494;
808
- --sds-color-semantic-base-text-tertiary-inverse: #aaaaaa;
865
+ --sds-color-semantic-base-text-tertiary-on-dark: #949494;
866
+ --sds-color-semantic-base-text-tertiary-inverse: #949494;
809
867
  --sds-color-semantic-beta-border: #cebef8;
810
868
  --sds-color-semantic-beta-fill-hover: #e4dcfc;
811
869
  --sds-color-semantic-beta-fill-pressed: #f0ebfe;
package/dist/variables.scss CHANGED
@@ -1,21 +1,23 @@
1
- $sds-border-accent-default: 1px solid #1a6cef;
2
- $sds-border-accent-default-dark: 1px solid #a2c9ff;
3
- $sds-border-accent-focused: 1px solid #1a6cef;
4
- $sds-border-accent-focused-dark: 1px solid #a2c9ff;
5
- $sds-border-accent-hover: 1px solid #0041b9;
6
- $sds-border-accent-hover-dark: 1px solid #cde3ff;
7
- $sds-border-accent-open: 1px solid #1a6cef;
8
- $sds-border-accent-open-dark: 1px solid #a2c9ff;
9
- $sds-border-accent-pressed: 1px solid #002d90;
10
- $sds-border-accent-pressed-dark: 1px solid #e2eeff;
11
- $sds-border-accent-selected: 1px solid #1a6cef;
12
- $sds-border-accent-selected-dark: 1px solid #a2c9ff;
1
+ $sds-border-accent-default: 1px solid #6e4ff9;
2
+ $sds-border-accent-default-dark: 1px solid #beb5ff;
3
+ $sds-border-accent-focused: 1px solid #6e4ff9;
4
+ $sds-border-accent-focused-dark: 1px solid #beb5ff;
5
+ $sds-border-accent-hover: 1px solid #4e18cc;
6
+ $sds-border-accent-hover-dark: 1px solid #dcd9ff;
7
+ $sds-border-accent-open: 1px solid #6e4ff9;
8
+ $sds-border-accent-open-dark: 1px solid #beb5ff;
9
+ $sds-border-accent-pressed: 1px solid #330296;
10
+ $sds-border-accent-pressed-dark: 1px solid #f1f0ff;
11
+ $sds-border-accent-selected: 1px solid #6e4ff9;
12
+ $sds-border-accent-selected-dark: 1px solid #beb5ff;
13
13
  $sds-border-base-default: 1px solid #969696;
14
14
  $sds-border-base-default-dark: 1px solid #aaaaaa;
15
15
  $sds-border-base-disabled: 1px solid #c3c3c3;
16
16
  $sds-border-base-disabled-dark: 1px solid #696969;
17
17
  $sds-border-base-divider: 1px solid #dfdfdf;
18
18
  $sds-border-base-divider-dark: 1px solid #494949;
19
+ $sds-border-base-divider-on-dark: 1px solid #3b3b3b;
20
+ $sds-border-base-divider-on-dark-dark: 1px solid #494949;
19
21
  $sds-border-base-divider-inverse: 1px solid #767676;
20
22
  $sds-border-base-divider-inverse-dark: 1px solid #cdcdcd;
21
23
  $sds-border-base-hover: 1px solid #000000;
@@ -109,6 +111,22 @@ $sds-color-primitive-gray-800: #1b1b1b;
109
111
  $sds-color-primitive-gray-800-dark: #fafafa;
110
112
  $sds-color-primitive-gray-900: #000000;
111
113
  $sds-color-primitive-gray-900-dark: #ffffff;
114
+ $sds-color-primitive-indigo-100: #f1f0ff;
115
+ $sds-color-primitive-indigo-100-dark: #1d004d;
116
+ $sds-color-primitive-indigo-200: #dcd9ff;
117
+ $sds-color-primitive-indigo-200-dark: #330296;
118
+ $sds-color-primitive-indigo-300: #beb5ff;
119
+ $sds-color-primitive-indigo-300-dark: #521ec9;
120
+ $sds-color-primitive-indigo-400: #9d8bff;
121
+ $sds-color-primitive-indigo-400-dark: #6e4ff9;
122
+ $sds-color-primitive-indigo-500: #6e4ff9;
123
+ $sds-color-primitive-indigo-500-dark: #9785ff;
124
+ $sds-color-primitive-indigo-600: #4e18cc;
125
+ $sds-color-primitive-indigo-600-dark: #beb5ff;
126
+ $sds-color-primitive-indigo-700: #330296;
127
+ $sds-color-primitive-indigo-700-dark: #dcd9ff;
128
+ $sds-color-primitive-indigo-800: #1d004d;
129
+ $sds-color-primitive-indigo-800-dark: #f1f0ff;
112
130
  $sds-color-primitive-green-100: #ebf9ed;
113
131
  $sds-color-primitive-green-100-dark: #082608;
114
132
  $sds-color-primitive-green-200: #b9ecc3;
@@ -177,142 +195,182 @@ $sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
177
195
  $sds-color-primitive-overlay-100-dark: rgba(0, 0, 0, 0.08);
178
196
  $sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
179
197
  $sds-color-primitive-overlay-200-dark: rgba(0, 0, 0, 0.03);
180
- $sds-color-semantic-accent-border: #1a6cef;
181
- $sds-color-semantic-accent-border-dark: #a2c9ff;
182
- $sds-color-semantic-accent-border-focus: #1a6cef;
183
- $sds-color-semantic-accent-border-focus-dark: #a2c9ff;
184
- $sds-color-semantic-accent-border-hover: #0041b9;
185
- $sds-color-semantic-accent-border-hover-dark: #cde3ff;
186
- $sds-color-semantic-accent-border-open: #1a6cef;
187
- $sds-color-semantic-accent-border-open-dark: #a2c9ff;
188
- $sds-color-semantic-accent-border-pressed: #002d90;
189
- $sds-color-semantic-accent-border-pressed-dark: #e2eeff;
190
- $sds-color-semantic-accent-border-selected: #1a6cef;
191
- $sds-color-semantic-accent-border-selected-dark: #a2c9ff;
192
- $sds-color-semantic-accent-fill-hover: #0041b9;
193
- $sds-color-semantic-accent-fill-hover-dark: #cde3ff;
194
- $sds-color-semantic-accent-fill-pressed: #002d90;
195
- $sds-color-semantic-accent-fill-pressed-dark: #e2eeff;
196
- $sds-color-semantic-accent-fill-primary: #1a6cef;
197
- $sds-color-semantic-accent-fill-primary-dark: #2876f9;
198
- $sds-color-semantic-accent-ornament: #1a6cef;
199
- $sds-color-semantic-accent-ornament-dark: #a2c9ff;
200
- $sds-color-semantic-accent-ornament-focus: #1a6cef;
201
- $sds-color-semantic-accent-ornament-focus-dark: #a2c9ff;
202
- $sds-color-semantic-accent-ornament-hover: #0041b9;
203
- $sds-color-semantic-accent-ornament-hover-dark: #cde3ff;
204
- $sds-color-semantic-accent-ornament-open: #1a6cef;
205
- $sds-color-semantic-accent-ornament-open-dark: #a2c9ff;
206
- $sds-color-semantic-accent-ornament-pressed: #002d90;
207
- $sds-color-semantic-accent-ornament-pressed-dark: #e2eeff;
208
- $sds-color-semantic-accent-ornament-selected: #1a6cef;
209
- $sds-color-semantic-accent-ornament-selected-dark: #a2c9ff;
210
- $sds-color-semantic-accent-surface-primary: #1a6cef;
211
- $sds-color-semantic-accent-surface-primary-dark: #2876f9;
212
- $sds-color-semantic-accent-surface-secondary: #edf3fd;
213
- $sds-color-semantic-accent-surface-secondary-dark: #0f1d4a;
214
- $sds-color-semantic-accent-text-action: #1a6cef;
215
- $sds-color-semantic-accent-text-action-dark: #a2c9ff;
216
- $sds-color-semantic-accent-text-action-hover: #0041b9;
217
- $sds-color-semantic-accent-text-action-hover-dark: #cde3ff;
218
- $sds-color-semantic-accent-text-action-pressed: #002d90;
219
- $sds-color-semantic-accent-text-action-pressed-dark: #e2eeff;
198
+ $sds-color-semantic-accent-border: #6e4ff9;
199
+ $sds-color-semantic-accent-border-dark: #beb5ff;
200
+ $sds-color-semantic-accent-border-focus: #6e4ff9;
201
+ $sds-color-semantic-accent-border-focus-dark: #beb5ff;
202
+ $sds-color-semantic-accent-border-hover: #4e18cc;
203
+ $sds-color-semantic-accent-border-hover-dark: #dcd9ff;
204
+ $sds-color-semantic-accent-border-open: #6e4ff9;
205
+ $sds-color-semantic-accent-border-open-dark: #beb5ff;
206
+ $sds-color-semantic-accent-border-pressed: #330296;
207
+ $sds-color-semantic-accent-border-pressed-dark: #f1f0ff;
208
+ $sds-color-semantic-accent-border-selected: #6e4ff9;
209
+ $sds-color-semantic-accent-border-selected-dark: #beb5ff;
210
+ $sds-color-semantic-accent-fill-hover: #4e18cc;
211
+ $sds-color-semantic-accent-fill-hover-dark: #dcd9ff;
212
+ $sds-color-semantic-accent-fill-pressed: #330296;
213
+ $sds-color-semantic-accent-fill-pressed-dark: #f1f0ff;
214
+ $sds-color-semantic-accent-fill-primary: #6e4ff9;
215
+ $sds-color-semantic-accent-fill-primary-dark: #6e4ff9;
216
+ $sds-color-semantic-accent-ornament: #6e4ff9;
217
+ $sds-color-semantic-accent-ornament-dark: #beb5ff;
218
+ $sds-color-semantic-accent-ornament-focus: #6e4ff9;
219
+ $sds-color-semantic-accent-ornament-focus-dark: #beb5ff;
220
+ $sds-color-semantic-accent-ornament-hover: #4e18cc;
221
+ $sds-color-semantic-accent-ornament-hover-dark: #dcd9ff;
222
+ $sds-color-semantic-accent-ornament-open: #6e4ff9;
223
+ $sds-color-semantic-accent-ornament-open-dark: #beb5ff;
224
+ $sds-color-semantic-accent-ornament-pressed: #330296;
225
+ $sds-color-semantic-accent-ornament-pressed-dark: #f1f0ff;
226
+ $sds-color-semantic-accent-ornament-selected: #6e4ff9;
227
+ $sds-color-semantic-accent-ornament-selected-dark: #beb5ff;
228
+ $sds-color-semantic-accent-surface-primary: #6e4ff9;
229
+ $sds-color-semantic-accent-surface-primary-dark: #6e4ff9;
230
+ $sds-color-semantic-accent-surface-secondary: #f1f0ff;
231
+ $sds-color-semantic-accent-surface-secondary-dark: #1d004d;
232
+ $sds-color-semantic-accent-text-action: #6e4ff9;
233
+ $sds-color-semantic-accent-text-action-dark: #beb5ff;
234
+ $sds-color-semantic-accent-text-action-hover: #4e18cc;
235
+ $sds-color-semantic-accent-text-action-hover-dark: #dcd9ff;
236
+ $sds-color-semantic-accent-text-action-pressed: #330296;
237
+ $sds-color-semantic-accent-text-action-pressed-dark: #f1f0ff;
220
238
  $sds-color-semantic-base-background-primary: #ffffff;
221
239
  $sds-color-semantic-base-background-primary-dark: #101010;
240
+ $sds-color-semantic-base-background-primary-dark: #000000;
241
+ $sds-color-semantic-base-background-primary-dark-dark: #101010;
222
242
  $sds-color-semantic-base-background-primary-inverse: #000000;
223
- $sds-color-semantic-base-background-primary-inverse-dark: #ffffff;
224
- $sds-color-semantic-base-background-secondary: #f8f8f8;
225
- $sds-color-semantic-base-background-secondary-dark: #333333;
243
+ $sds-color-semantic-base-background-primary-inverse-dark: #101010;
244
+ $sds-color-semantic-base-background-secondary: #ededed66;
245
+ $sds-color-semantic-base-background-secondary-dark: #33333399;
246
+ $sds-color-semantic-base-background-secondary-on-dark: #3b3b3b9E;
247
+ $sds-color-semantic-base-background-secondary-on-dark-dark: #33333399;
226
248
  $sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
227
- $sds-color-semantic-base-background-secondary-inverse-dark: #ededed;
249
+ $sds-color-semantic-base-background-secondary-inverse-dark: #33333399;
228
250
  $sds-color-semantic-base-background-tertiary: #ededed;
229
- $sds-color-semantic-base-background-tertiary-dark: #494949;
251
+ $sds-color-semantic-base-background-tertiary-dark: #333333;
230
252
  $sds-color-semantic-base-border-on-fill: #ffffff;
231
- $sds-color-semantic-base-border-on-fill-dark: #000000;
253
+ $sds-color-semantic-base-border-on-fill-dark: #ffffff;
232
254
  $sds-color-semantic-base-border-primary: #767676;
233
255
  $sds-color-semantic-base-border-primary-dark: #cdcdcd;
234
256
  $sds-color-semantic-base-border-primary-disabled: #c3c3c3;
235
257
  $sds-color-semantic-base-border-primary-disabled-dark: #696969;
258
+ $sds-color-semantic-base-border-primary-disabled-on-dark: #767676;
259
+ $sds-color-semantic-base-border-primary-disabled-on-dark-dark: #696969;
236
260
  $sds-color-semantic-base-border-primary-disabled-inverse: #767676;
237
- $sds-color-semantic-base-border-primary-disabled-inverse-dark: #cdcdcd;
261
+ $sds-color-semantic-base-border-primary-disabled-inverse-dark: #696969;
238
262
  $sds-color-semantic-base-border-primary-hover: #000000;
239
263
  $sds-color-semantic-base-border-primary-hover-dark: #ffffff;
264
+ $sds-color-semantic-base-border-primary-hover-on-dark: #ffffff;
265
+ $sds-color-semantic-base-border-primary-hover-on-dark-dark: #ffffff;
240
266
  $sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
241
- $sds-color-semantic-base-border-primary-hover-inverse-dark: #000000;
267
+ $sds-color-semantic-base-border-primary-hover-inverse-dark: #ffffff;
268
+ $sds-color-semantic-base-border-primary-on-dark: #c3c3c3;
269
+ $sds-color-semantic-base-border-primary-on-dark-dark: #cdcdcd;
242
270
  $sds-color-semantic-base-border-primary-inverse: #c3c3c3;
243
- $sds-color-semantic-base-border-primary-inverse-dark: #696969;
271
+ $sds-color-semantic-base-border-primary-inverse-dark: #cdcdcd;
244
272
  $sds-color-semantic-base-border-primary-pressed: #000000;
245
273
  $sds-color-semantic-base-border-primary-pressed-dark: #ffffff;
274
+ $sds-color-semantic-base-border-primary-pressed-on-dark: #ffffff;
275
+ $sds-color-semantic-base-border-primary-pressed-on-dark-dark: #ffffff;
246
276
  $sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
247
- $sds-color-semantic-base-border-primary-pressed-inverse-dark: #000000;
277
+ $sds-color-semantic-base-border-primary-pressed-inverse-dark: #ffffff;
248
278
  $sds-color-semantic-base-border-secondary: #c3c3c3;
249
279
  $sds-color-semantic-base-border-secondary-dark: #696969;
250
280
  $sds-color-semantic-base-divider: #dfdfdf;
251
281
  $sds-color-semantic-base-divider-dark: #494949;
252
- $sds-color-semantic-base-divider-inverse: #767676;
253
- $sds-color-semantic-base-divider-inverse-dark: #cdcdcd;
282
+ $sds-color-semantic-base-divider-on-dark: #3b3b3b;
283
+ $sds-color-semantic-base-divider-on-dark-dark: #494949;
284
+ $sds-color-semantic-base-divider-inverse: #3b3b3b;
285
+ $sds-color-semantic-base-divider-inverse-dark: #494949;
254
286
  $sds-color-semantic-base-fill-disabled: #dfdfdf;
255
287
  $sds-color-semantic-base-fill-disabled-dark: #494949;
256
288
  $sds-color-semantic-base-fill-hover: #c3c3c333;
257
- $sds-color-semantic-base-fill-hover-dark: #69696994;
289
+ $sds-color-semantic-base-fill-hover-dark: #69696952;
290
+ $sds-color-semantic-base-fill-hover-on-dark: #c3c3c357;
291
+ $sds-color-semantic-base-fill-hover-on-dark-dark: #69696952;
258
292
  $sds-color-semantic-base-fill-hover-inverse: #c3c3c357;
259
- $sds-color-semantic-base-fill-hover-inverse-dark: #69696914;
293
+ $sds-color-semantic-base-fill-hover-inverse-dark: #69696952;
260
294
  $sds-color-semantic-base-fill-open: #c3c3c333;
261
- $sds-color-semantic-base-fill-open-dark: #69696994;
295
+ $sds-color-semantic-base-fill-open-dark: #69696952;
296
+ $sds-color-semantic-base-fill-open-on-dark: #c3c3c357;
297
+ $sds-color-semantic-base-fill-open-on-dark-dark: #69696952;
262
298
  $sds-color-semantic-base-fill-open-inverse: #c3c3c357;
263
- $sds-color-semantic-base-fill-open-inverse-dark: #69696914;
299
+ $sds-color-semantic-base-fill-open-inverse-dark: #69696952;
264
300
  $sds-color-semantic-base-fill-pressed: #c3c3c333;
265
- $sds-color-semantic-base-fill-pressed-dark: #69696994;
301
+ $sds-color-semantic-base-fill-pressed-dark: #69696952;
302
+ $sds-color-semantic-base-fill-pressed-on-dark: #c3c3c357;
303
+ $sds-color-semantic-base-fill-pressed-on-dark-dark: #69696952;
266
304
  $sds-color-semantic-base-fill-pressed-inverse: #c3c3c357;
267
- $sds-color-semantic-base-fill-pressed-inverse-dark: #69696914;
305
+ $sds-color-semantic-base-fill-pressed-inverse-dark: #69696952;
268
306
  $sds-color-semantic-base-fill-primary: #ffffff;
269
307
  $sds-color-semantic-base-fill-primary-dark: #333333;
270
308
  $sds-color-semantic-base-fill-selected: #000000;
271
309
  $sds-color-semantic-base-fill-selected-dark: #ffffff;
272
310
  $sds-color-semantic-base-ornament-disabled: #c3c3c3;
273
311
  $sds-color-semantic-base-ornament-disabled-dark: #696969;
312
+ $sds-color-semantic-base-ornament-disabled-on-dark: #767676;
313
+ $sds-color-semantic-base-ornament-disabled-on-dark-dark: #696969;
274
314
  $sds-color-semantic-base-ornament-disabled-inverse: #767676;
275
- $sds-color-semantic-base-ornament-disabled-inverse-dark: #cdcdcd;
315
+ $sds-color-semantic-base-ornament-disabled-inverse-dark: #696969;
276
316
  $sds-color-semantic-base-ornament-on-fill: #ffffff;
277
317
  $sds-color-semantic-base-ornament-on-fill-dark: #ffffff;
278
318
  $sds-color-semantic-base-ornament-primary: #000000;
279
319
  $sds-color-semantic-base-ornament-primary-dark: #ffffff;
320
+ $sds-color-semantic-base-ornament-primary-on-dark: #ffffff;
321
+ $sds-color-semantic-base-ornament-primary-on-dark-dark: #ffffff;
280
322
  $sds-color-semantic-base-ornament-primary-inverse: #ffffff;
281
323
  $sds-color-semantic-base-ornament-primary-inverse-dark: #000000;
282
324
  $sds-color-semantic-base-ornament-secondary: #767676;
283
325
  $sds-color-semantic-base-ornament-secondary-dark: #cdcdcd;
284
326
  $sds-color-semantic-base-ornament-secondary-hover: #000000;
285
327
  $sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff;
328
+ $sds-color-semantic-base-ornament-secondary-hover-on-dark: #ffffff;
329
+ $sds-color-semantic-base-ornament-secondary-hover-on-dark-dark: #ffffff;
286
330
  $sds-color-semantic-base-ornament-secondary-hover-inverse: #ffffff;
287
- $sds-color-semantic-base-ornament-secondary-hover-inverse-dark: #000000;
331
+ $sds-color-semantic-base-ornament-secondary-hover-inverse-dark: #ffffff;
332
+ $sds-color-semantic-base-ornament-secondary-on-dark: #c3c3c3;
333
+ $sds-color-semantic-base-ornament-secondary-on-dark-dark: #cdcdcd;
288
334
  $sds-color-semantic-base-ornament-secondary-inverse: #c3c3c3;
289
- $sds-color-semantic-base-ornament-secondary-inverse-dark: #696969;
335
+ $sds-color-semantic-base-ornament-secondary-inverse-dark: #cdcdcd;
290
336
  $sds-color-semantic-base-ornament-secondary-pressed: #000000;
291
337
  $sds-color-semantic-base-ornament-secondary-pressed-dark: #ffffff;
338
+ $sds-color-semantic-base-ornament-secondary-pressed-on-dark: #ffffff;
339
+ $sds-color-semantic-base-ornament-secondary-pressed-on-dark-dark: #ffffff;
292
340
  $sds-color-semantic-base-ornament-secondary-pressed-inverse: #ffffff;
293
- $sds-color-semantic-base-ornament-secondary-pressed-inverse-dark: #000000;
341
+ $sds-color-semantic-base-ornament-secondary-pressed-inverse-dark: #ffffff;
294
342
  $sds-color-semantic-base-surface: #ffffff;
295
343
  $sds-color-semantic-base-surface-dark: #333333;
344
+ $sds-color-semantic-base-surface-on-dark: #000000;
345
+ $sds-color-semantic-base-surface-on-dark-dark: #333333;
296
346
  $sds-color-semantic-base-surface-inverse: #000000;
297
- $sds-color-semantic-base-surface-inverse-dark: #ededed;
347
+ $sds-color-semantic-base-surface-inverse-dark: #333333;
298
348
  $sds-color-semantic-base-text-disabled: #c3c3c3;
299
349
  $sds-color-semantic-base-text-disabled-dark: #696969;
350
+ $sds-color-semantic-base-text-disabled-on-dark: #767676;
351
+ $sds-color-semantic-base-text-disabled-on-dark-dark: #696969;
300
352
  $sds-color-semantic-base-text-disabled-inverse: #767676;
301
- $sds-color-semantic-base-text-disabled-inverse-dark: #cdcdcd;
353
+ $sds-color-semantic-base-text-disabled-inverse-dark: #696969;
302
354
  $sds-color-semantic-base-text-on-fill: #ffffff;
303
355
  $sds-color-semantic-base-text-on-fill-dark: #ffffff;
304
356
  $sds-color-semantic-base-text-primary: #000000;
305
357
  $sds-color-semantic-base-text-primary-dark: #ffffff;
358
+ $sds-color-semantic-base-text-primary-on-dark: #ffffff;
359
+ $sds-color-semantic-base-text-primary-on-dark-dark: #ffffff;
306
360
  $sds-color-semantic-base-text-primary-inverse: #ffffff;
307
361
  $sds-color-semantic-base-text-primary-inverse-dark: #000000;
308
362
  $sds-color-semantic-base-text-secondary: #767676;
309
363
  $sds-color-semantic-base-text-secondary-dark: #cdcdcd;
364
+ $sds-color-semantic-base-text-secondary-on-dark: #c3c3c3;
365
+ $sds-color-semantic-base-text-secondary-on-dark-dark: #cdcdcd;
310
366
  $sds-color-semantic-base-text-secondary-inverse: #c3c3c3;
311
- $sds-color-semantic-base-text-secondary-inverse-dark: #696969;
367
+ $sds-color-semantic-base-text-secondary-inverse-dark: #cdcdcd;
312
368
  $sds-color-semantic-base-text-tertiary: #a5a5a5;
313
369
  $sds-color-semantic-base-text-tertiary-dark: #949494;
370
+ $sds-color-semantic-base-text-tertiary-on-dark: #969696;
371
+ $sds-color-semantic-base-text-tertiary-on-dark-dark: #949494;
314
372
  $sds-color-semantic-base-text-tertiary-inverse: #969696;
315
- $sds-color-semantic-base-text-tertiary-inverse-dark: #aaaaaa;
373
+ $sds-color-semantic-base-text-tertiary-inverse-dark: #949494;
316
374
  $sds-color-semantic-beta-border: #6526b5;
317
375
  $sds-color-semantic-beta-border-dark: #cebef8;
318
376
  $sds-color-semantic-beta-fill-hover: #6526b5;