@salutejs/sdds-themes 0.86.0-next-sbcom.0 → 0.86.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 (17) hide show
  1. package/css/sdds_cs.module.css +72 -0
  2. package/css/sdds_cs__dark.css +36 -0
  3. package/css/sdds_cs__light.css +36 -0
  4. package/es/themes/sdds_cs__dark.js +1 -1
  5. package/es/themes/sdds_cs__dark.js.map +1 -1
  6. package/es/themes/sdds_cs__light.js +1 -1
  7. package/es/themes/sdds_cs__light.js.map +1 -1
  8. package/es/tokens/sdds_cs/index.js +74 -2
  9. package/es/tokens/sdds_cs/index.js.map +1 -1
  10. package/package.json +3 -3
  11. package/themes/sdds_cs__dark.js +1 -1
  12. package/themes/sdds_cs__dark.js.map +1 -1
  13. package/themes/sdds_cs__light.js +1 -1
  14. package/themes/sdds_cs__light.js.map +1 -1
  15. package/tokens/sdds_cs/index.d.ts +72 -0
  16. package/tokens/sdds_cs/index.js +84 -11
  17. package/tokens/sdds_cs/index.js.map +1 -1
package/css/sdds_cs.module.css CHANGED
@@ -127,6 +127,10 @@
127
127
  --surface-solid-default: #F7F9FB;
128
128
  --surface-solid-default-hover: #FFFFFFFF;
129
129
  --surface-solid-default-active: #F1F5F8FF;
130
+ --surface-transparent-primary-hover: #FFFFFFB8;
131
+ --surface-transparent-primary-active: #FFFFFF8A;
132
+ --surface-transparent-secondary-hover: #FFFFFF85;
133
+ --surface-transparent-secondary-active: #FFFFFF57;
130
134
  --surface-clear: #FFFFFF00;
131
135
  --surface-clear-hover: #FFFFFF00;
132
136
  --surface-clear-active: #FFFFFF00;
@@ -157,6 +161,8 @@
157
161
  --surface-info-minor: #0C283B;
158
162
  --surface-info-minor-hover: #10344CFF;
159
163
  --surface-info-minor-active: #0A2333FF;
164
+ --surface-transparent-secondary: #FFFFFF66;
165
+ --surface-transparent-primary: #FFFFFF99;
160
166
  --on-dark-surface-solid-primary: #13181B;
161
167
  --on-dark-surface-solid-primary-brightness: #212629FF;
162
168
  --on-dark-surface-solid-primary-hover: #171D21FF;
@@ -174,6 +180,10 @@
174
180
  --on-dark-surface-solid-default: #F7F9FB;
175
181
  --on-dark-surface-solid-default-hover: #FFFFFFFF;
176
182
  --on-dark-surface-solid-default-active: #F1F5F8FF;
183
+ --on-dark-surface-transparent-primary-hover: #FFFFFFB8;
184
+ --on-dark-surface-transparent-primary-active: #FFFFFF8A;
185
+ --on-dark-surface-transparent-secondary-hover: #FFFFFF85;
186
+ --on-dark-surface-transparent-secondary-active: #FFFFFF57;
177
187
  --on-dark-surface-clear: #FFFFFF00;
178
188
  --on-dark-surface-clear-hover: #FFFFFF00;
179
189
  --on-dark-surface-clear-active: #FFFFFF00;
@@ -207,6 +217,8 @@
207
217
  --on-dark-surface-info-minor: #0C283B;
208
218
  --on-dark-surface-info-minor-hover: #10344CFF;
209
219
  --on-dark-surface-info-minor-active: #0A2333FF;
220
+ --on-dark-surface-transparent-secondary: #FFFFFF66;
221
+ --on-dark-surface-transparent-primary: #FFFFFF99;
210
222
  --on-light-surface-solid-primary: #F2F5F8;
211
223
  --on-light-surface-solid-primary-brightness: #F3F6F8FF;
212
224
  --on-light-surface-solid-primary-hover: #F8FAFBFF;
@@ -224,6 +236,10 @@
224
236
  --on-light-surface-solid-default: #060A0C;
225
237
  --on-light-surface-solid-default-hover: #0A1114FF;
226
238
  --on-light-surface-solid-default-active: #030607FF;
239
+ --on-light-surface-transparent-primary-hover: #FFFFFFA8;
240
+ --on-light-surface-transparent-primary-active: #FFFFFFAD;
241
+ --on-light-surface-transparent-secondary-hover: #FFFFFF75;
242
+ --on-light-surface-transparent-secondary-active: #FFFFFF7A;
227
243
  --on-light-surface-clear: #FFFFFF00;
228
244
  --on-light-surface-clear-hover: #FFFFFF00;
229
245
  --on-light-surface-clear-active: #FFFFFF00;
@@ -254,6 +270,8 @@
254
270
  --on-light-surface-info-minor: #B0DFFF;
255
271
  --on-light-surface-info-minor-hover: #C7E9FFFF;
256
272
  --on-light-surface-info-minor-active: #A8DCFFFF;
273
+ --on-light-surface-transparent-secondary: #FFFFFF66;
274
+ --on-light-surface-transparent-primary: #FFFFFF99;
257
275
  --inverse-surface-solid-primary: #F2F5F8;
258
276
  --inverse-surface-solid-primary-brightness: #F3F6F8FF;
259
277
  --inverse-surface-solid-primary-hover: #F8FAFBFF;
@@ -271,6 +289,10 @@
271
289
  --inverse-surface-solid-default: #060A0C;
272
290
  --inverse-surface-solid-default-hover: #0A1114FF;
273
291
  --inverse-surface-solid-default-active: #030607FF;
292
+ --inverse-surface-transparent-primary-hover: #FFFFFFA8;
293
+ --inverse-surface-transparent-primary-active: #FFFFFFAD;
294
+ --inverse-surface-transparent-secondary-hover: #FFFFFF75;
295
+ --inverse-surface-transparent-secondary-active: #FFFFFF7A;
274
296
  --inverse-surface-clear: #FFFFFF00;
275
297
  --inverse-surface-clear-hover: #FFFFFF00;
276
298
  --inverse-surface-clear-active: #FFFFFF00;
@@ -301,6 +323,8 @@
301
323
  --inverse-surface-info-minor: #B0DFFF;
302
324
  --inverse-surface-info-minor-hover: #C7E9FFFF;
303
325
  --inverse-surface-info-minor-active: #A8DCFFFF;
326
+ --inverse-surface-transparent-secondary: #FFFFFF66;
327
+ --inverse-surface-transparent-primary: #FFFFFF99;
304
328
  --background-primary: #060A0C;
305
329
  --background-primary-brightness: #15191BFF;
306
330
  --dark-background-primary: #060A0C;
@@ -313,6 +337,8 @@
313
337
  --outline-solid-secondary: #30373C;
314
338
  --outline-solid-secondary-hover: #394147FF;
315
339
  --outline-solid-secondary-active: #2B3136FF;
340
+ --outline-transparent-primary-hover: #FFFFFF7A;
341
+ --outline-transparent-primary-active: #FFFFFF52;
316
342
  --outline-clear: #FFFFFF00;
317
343
  --outline-clear-hover: #FFFFFFFF;
318
344
  --outline-clear-active: #FFFFFFFF;
@@ -328,12 +354,15 @@
328
354
  --outline-info: #118CDF;
329
355
  --outline-info-hover: #1798EEFF;
330
356
  --outline-info-active: #1086D5FF;
357
+ --outline-transparent-primary: #FFFFFFCC;
331
358
  --on-dark-outline-solid-primary: #23292D;
332
359
  --on-dark-outline-solid-primary-hover: #2C343AFF;
333
360
  --on-dark-outline-solid-primary-active: #1F2528FF;
334
361
  --on-dark-outline-solid-secondary: #30373C;
335
362
  --on-dark-outline-solid-secondary-hover: #394147FF;
336
363
  --on-dark-outline-solid-secondary-active: #2B3136FF;
364
+ --on-dark-outline-transparent-primary-hover: #FFFFFF7A;
365
+ --on-dark-outline-transparent-primary-active: #FFFFFF52;
337
366
  --on-dark-outline-clear: #FFFFFF00;
338
367
  --on-dark-outline-clear-hover: #FFFFFFFF;
339
368
  --on-dark-outline-clear-active: #FFFFFFFF;
@@ -349,12 +378,15 @@
349
378
  --on-dark-outline-info: #118CDF;
350
379
  --on-dark-outline-info-hover: #1798EEFF;
351
380
  --on-dark-outline-info-active: #1086D5FF;
381
+ --on-dark-outline-transparent-primary: #FFFFFFCC;
352
382
  --on-light-outline-solid-primary: #D5DFE6;
353
383
  --on-light-outline-solid-primary-hover: #E2E9EEFF;
354
384
  --on-light-outline-solid-primary-active: #CFDAE2FF;
355
385
  --on-light-outline-solid-secondary: #ADB9C2;
356
386
  --on-light-outline-solid-secondary-hover: #B9C3CBFF;
357
387
  --on-light-outline-solid-secondary-active: #A7B4BEFF;
388
+ --on-light-outline-transparent-primary-hover: #FFFFFF66;
389
+ --on-light-outline-transparent-primary-active: #FFFFFFFF;
358
390
  --on-light-outline-clear: #FFFFFF00;
359
391
  --on-light-outline-clear-hover: #FFFFFFFF;
360
392
  --on-light-outline-clear-active: #FFFFFFFF;
@@ -370,12 +402,15 @@
370
402
  --on-light-outline-info: #0B7ECB;
371
403
  --on-light-outline-info-hover: #0C8ADFFF;
372
404
  --on-light-outline-info-active: #0A78C2FF;
405
+ --on-light-outline-transparent-primary: #FFFFFFCC;
373
406
  --inverse-outline-solid-primary: #D5DFE6;
374
407
  --inverse-outline-solid-primary-hover: #E2E9EEFF;
375
408
  --inverse-outline-solid-primary-active: #CFDAE2FF;
376
409
  --inverse-outline-solid-secondary: #ADB9C2;
377
410
  --inverse-outline-solid-secondary-hover: #B9C3CBFF;
378
411
  --inverse-outline-solid-secondary-active: #A7B4BEFF;
412
+ --inverse-outline-transparent-primary-hover: #FFFFFF66;
413
+ --inverse-outline-transparent-primary-active: #FFFFFFFF;
379
414
  --inverse-outline-clear: #FFFFFF00;
380
415
  --inverse-outline-clear-hover: #FFFFFFFF;
381
416
  --inverse-outline-clear-active: #FFFFFFFF;
@@ -391,6 +426,7 @@
391
426
  --inverse-outline-info: #0B7ECB;
392
427
  --inverse-outline-info-hover: #0C8ADFFF;
393
428
  --inverse-outline-info-active: #0A78C2FF;
429
+ --inverse-outline-transparent-primary: #FFFFFFCC;
394
430
  --data-yellow: #F3A912;
395
431
  --data-yellow-hover: #F4B22FFF;
396
432
  --data-yellow-active: #EDA20CFF;
@@ -581,6 +617,10 @@
581
617
  --surface-solid-card-active: #FFFFFFFF;
582
618
  --surface-solid-default-hover: #7A8790FF;
583
619
  --surface-solid-default-active: #5D686FFF;
620
+ --surface-transparent-primary-hover: #FFFFFFA8;
621
+ --surface-transparent-primary-active: #FFFFFFAD;
622
+ --surface-transparent-secondary-hover: #FFFFFF75;
623
+ --surface-transparent-secondary-active: #FFFFFF7A;
584
624
  --surface-clear-hover: #FFFFFF00;
585
625
  --surface-clear-active: #FFFFFF00;
586
626
  --surface-accent-hover: #0DA00DFF;
@@ -618,6 +658,8 @@
618
658
  --surface-negative-minor: #FFF5F6;
619
659
  --surface-positive: #83C804;
620
660
  --surface-negative: #FF3D51;
661
+ --surface-transparent-primary: #FFFFFF99;
662
+ --surface-transparent-secondary: #FFFFFF66;
621
663
  --on-dark-surface-solid-primary-hover: #394147FF;
622
664
  --on-dark-surface-solid-primary-active: #272C30FF;
623
665
  --on-dark-surface-solid-secondary-hover: #5A656CFF;
@@ -628,6 +670,10 @@
628
670
  --on-dark-surface-solid-card-active: #0B0D0FFF;
629
671
  --on-dark-surface-solid-default-hover: #FFFFFFFF;
630
672
  --on-dark-surface-solid-default-active: #F1F5F8FF;
673
+ --on-dark-surface-transparent-primary-hover: #FFFFFFB8;
674
+ --on-dark-surface-transparent-primary-active: #FFFFFF8A;
675
+ --on-dark-surface-transparent-secondary-hover: #FFFFFF85;
676
+ --on-dark-surface-transparent-secondary-active: #FFFFFF57;
631
677
  --on-dark-surface-clear-hover: #FFFFFF00;
632
678
  --on-dark-surface-clear-active: #FFFFFF00;
633
679
  --on-dark-surface-accent-hover: #0DAF0DFF;
@@ -668,6 +714,8 @@
668
714
  --on-dark-surface-negative-minor: #4A0D13;
669
715
  --on-dark-surface-positive: #83C804;
670
716
  --on-dark-surface-negative: #FF3D51;
717
+ --on-dark-surface-transparent-primary: #FFFFFF99;
718
+ --on-dark-surface-transparent-secondary: #FFFFFF66;
671
719
  --on-light-surface-solid-primary-hover: #F8FAFBFF;
672
720
  --on-light-surface-solid-primary-active: #EBF0F4FF;
673
721
  --on-light-surface-solid-secondary-hover: #F5F8F9FF;
@@ -678,6 +726,10 @@
678
726
  --on-light-surface-solid-card-active: #FFFFFFFF;
679
727
  --on-light-surface-solid-default-hover: #7A8790FF;
680
728
  --on-light-surface-solid-default-active: #5D686FFF;
729
+ --on-light-surface-transparent-primary-hover: #FFFFFFA8;
730
+ --on-light-surface-transparent-primary-active: #FFFFFFAD;
731
+ --on-light-surface-transparent-secondary-hover: #FFFFFF75;
732
+ --on-light-surface-transparent-secondary-active: #FFFFFF7A;
681
733
  --on-light-surface-clear-hover: #FFFFFF00;
682
734
  --on-light-surface-clear-active: #FFFFFF00;
683
735
  --on-light-surface-accent-hover: #0DA00DFF;
@@ -715,6 +767,8 @@
715
767
  --on-light-surface-negative-minor: #FFF5F6;
716
768
  --on-light-surface-positive: #83C804;
717
769
  --on-light-surface-negative: #FF3D51;
770
+ --on-light-surface-transparent-primary: #FFFFFF99;
771
+ --on-light-surface-transparent-secondary: #FFFFFF66;
718
772
  --inverse-surface-solid-primary-hover: #394147FF;
719
773
  --inverse-surface-solid-primary-active: #272C30FF;
720
774
  --inverse-surface-solid-secondary-hover: #5A656CFF;
@@ -725,6 +779,10 @@
725
779
  --inverse-surface-solid-card-active: #0B0D0FFF;
726
780
  --inverse-surface-solid-default-hover: #FFFFFFFF;
727
781
  --inverse-surface-solid-default-active: #F1F5F8FF;
782
+ --inverse-surface-transparent-primary-hover: #FFFFFFB8;
783
+ --inverse-surface-transparent-primary-active: #FFFFFF8A;
784
+ --inverse-surface-transparent-secondary-hover: #FFFFFF85;
785
+ --inverse-surface-transparent-secondary-active: #FFFFFF57;
728
786
  --inverse-surface-clear-hover: #FFFFFF00;
729
787
  --inverse-surface-clear-active: #FFFFFF00;
730
788
  --inverse-surface-accent-hover: #0DAF0DFF;
@@ -762,6 +820,8 @@
762
820
  --inverse-surface-solid-tertiary: #657179;
763
821
  --inverse-surface-positive: #83C804;
764
822
  --inverse-surface-negative: #FF3D51;
823
+ --inverse-surface-transparent-primary: #FFFFFF99;
824
+ --inverse-surface-transparent-secondary: #FFFFFF66;
765
825
  --background-primary-brightness: #F3F6F8FF;
766
826
  --background-primary: #F2F5F8;
767
827
  --dark-background-primary: #060A0C;
@@ -772,6 +832,8 @@
772
832
  --outline-solid-primary-active: #C9D5DEFF;
773
833
  --outline-solid-secondary-hover: #F5F8F9FF;
774
834
  --outline-solid-secondary-active: #E2E9EEFF;
835
+ --outline-transparent-primary-hover: #FFFFFF66;
836
+ --outline-transparent-primary-active: #FFFFFFFF;
775
837
  --outline-clear-hover: #FFFFFFFF;
776
838
  --outline-clear-active: #FFFFFFFF;
777
839
  --outline-accent-hover: #149F14FF;
@@ -789,10 +851,13 @@
789
851
  --outline-solid-secondary: #E8EEF2;
790
852
  --outline-clear: #FFFFFF00;
791
853
  --outline-info: #0C72B6;
854
+ --outline-transparent-primary: #FFFFFFCC;
792
855
  --on-dark-outline-solid-primary-hover: #394147FF;
793
856
  --on-dark-outline-solid-primary-active: #272C30FF;
794
857
  --on-dark-outline-solid-secondary-hover: #20282DFF;
795
858
  --on-dark-outline-solid-secondary-active: #0B0D0FFF;
859
+ --on-dark-outline-transparent-primary-hover: #FFFFFF7A;
860
+ --on-dark-outline-transparent-primary-active: #FFFFFF52;
796
861
  --on-dark-outline-clear-hover: #FFFFFFFF;
797
862
  --on-dark-outline-clear-active: #FFFFFFFF;
798
863
  --on-dark-outline-accent-hover: #0DAF0DFF;
@@ -810,10 +875,13 @@
810
875
  --on-dark-outline-solid-secondary: #13181B;
811
876
  --on-dark-outline-clear: #FFFFFF00;
812
877
  --on-dark-outline-info: #118CDF;
878
+ --on-dark-outline-transparent-primary: #FFFFFFCC;
813
879
  --on-light-outline-solid-primary-hover: #E2E9EEFF;
814
880
  --on-light-outline-solid-primary-active: #C9D5DEFF;
815
881
  --on-light-outline-solid-secondary-hover: #F5F8F9FF;
816
882
  --on-light-outline-solid-secondary-active: #E2E9EEFF;
883
+ --on-light-outline-transparent-primary-hover: #FFFFFF66;
884
+ --on-light-outline-transparent-primary-active: #FFFFFFFF;
817
885
  --on-light-outline-clear-hover: #FFFFFFFF;
818
886
  --on-light-outline-clear-active: #FFFFFFFF;
819
887
  --on-light-outline-accent-hover: #149F14FF;
@@ -831,10 +899,13 @@
831
899
  --on-light-outline-solid-secondary: #E8EEF2;
832
900
  --on-light-outline-clear: #FFFFFF00;
833
901
  --on-light-outline-info: #0C72B6;
902
+ --on-light-outline-transparent-primary: #FFFFFFCC;
834
903
  --inverse-outline-solid-primary-hover: #394147FF;
835
904
  --inverse-outline-solid-primary-active: #272C30FF;
836
905
  --inverse-outline-solid-secondary-hover: #FFFFFFFF;
837
906
  --inverse-outline-solid-secondary-active: #515B61FF;
907
+ --inverse-outline-transparent-primary-hover: #FFFFFF7A;
908
+ --inverse-outline-transparent-primary-active: #FFFFFF52;
838
909
  --inverse-outline-clear-hover: #FFFFFFFF;
839
910
  --inverse-outline-clear-active: #FFFFFFFF;
840
911
  --inverse-outline-accent-hover: #0DAF0DFF;
@@ -852,6 +923,7 @@
852
923
  --inverse-outline-clear: #FFFFFF00;
853
924
  --inverse-outline-info: #118CDF;
854
925
  --inverse-outline-solid-secondary: #657179;
926
+ --inverse-outline-transparent-primary: #FFFFFFCC;
855
927
  --data-yellow: #F3A912;
856
928
  --data-yellow-hover: #F5B638FF;
857
929
  --data-yellow-active: #E49C0CFF;
package/css/sdds_cs__dark.css CHANGED
@@ -127,6 +127,10 @@
127
127
  --surface-solid-default: #F7F9FB;
128
128
  --surface-solid-default-hover: #FFFFFFFF;
129
129
  --surface-solid-default-active: #F1F5F8FF;
130
+ --surface-transparent-primary-hover: #FFFFFFB8;
131
+ --surface-transparent-primary-active: #FFFFFF8A;
132
+ --surface-transparent-secondary-hover: #FFFFFF85;
133
+ --surface-transparent-secondary-active: #FFFFFF57;
130
134
  --surface-clear: #FFFFFF00;
131
135
  --surface-clear-hover: #FFFFFF00;
132
136
  --surface-clear-active: #FFFFFF00;
@@ -157,6 +161,8 @@
157
161
  --surface-info-minor: #0C283B;
158
162
  --surface-info-minor-hover: #10344CFF;
159
163
  --surface-info-minor-active: #0A2333FF;
164
+ --surface-transparent-secondary: #FFFFFF66;
165
+ --surface-transparent-primary: #FFFFFF99;
160
166
  --on-dark-surface-solid-primary: #13181B;
161
167
  --on-dark-surface-solid-primary-brightness: #212629FF;
162
168
  --on-dark-surface-solid-primary-hover: #171D21FF;
@@ -174,6 +180,10 @@
174
180
  --on-dark-surface-solid-default: #F7F9FB;
175
181
  --on-dark-surface-solid-default-hover: #FFFFFFFF;
176
182
  --on-dark-surface-solid-default-active: #F1F5F8FF;
183
+ --on-dark-surface-transparent-primary-hover: #FFFFFFB8;
184
+ --on-dark-surface-transparent-primary-active: #FFFFFF8A;
185
+ --on-dark-surface-transparent-secondary-hover: #FFFFFF85;
186
+ --on-dark-surface-transparent-secondary-active: #FFFFFF57;
177
187
  --on-dark-surface-clear: #FFFFFF00;
178
188
  --on-dark-surface-clear-hover: #FFFFFF00;
179
189
  --on-dark-surface-clear-active: #FFFFFF00;
@@ -207,6 +217,8 @@
207
217
  --on-dark-surface-info-minor: #0C283B;
208
218
  --on-dark-surface-info-minor-hover: #10344CFF;
209
219
  --on-dark-surface-info-minor-active: #0A2333FF;
220
+ --on-dark-surface-transparent-secondary: #FFFFFF66;
221
+ --on-dark-surface-transparent-primary: #FFFFFF99;
210
222
  --on-light-surface-solid-primary: #F2F5F8;
211
223
  --on-light-surface-solid-primary-brightness: #F3F6F8FF;
212
224
  --on-light-surface-solid-primary-hover: #F8FAFBFF;
@@ -224,6 +236,10 @@
224
236
  --on-light-surface-solid-default: #060A0C;
225
237
  --on-light-surface-solid-default-hover: #0A1114FF;
226
238
  --on-light-surface-solid-default-active: #030607FF;
239
+ --on-light-surface-transparent-primary-hover: #FFFFFFA8;
240
+ --on-light-surface-transparent-primary-active: #FFFFFFAD;
241
+ --on-light-surface-transparent-secondary-hover: #FFFFFF75;
242
+ --on-light-surface-transparent-secondary-active: #FFFFFF7A;
227
243
  --on-light-surface-clear: #FFFFFF00;
228
244
  --on-light-surface-clear-hover: #FFFFFF00;
229
245
  --on-light-surface-clear-active: #FFFFFF00;
@@ -254,6 +270,8 @@
254
270
  --on-light-surface-info-minor: #B0DFFF;
255
271
  --on-light-surface-info-minor-hover: #C7E9FFFF;
256
272
  --on-light-surface-info-minor-active: #A8DCFFFF;
273
+ --on-light-surface-transparent-secondary: #FFFFFF66;
274
+ --on-light-surface-transparent-primary: #FFFFFF99;
257
275
  --inverse-surface-solid-primary: #F2F5F8;
258
276
  --inverse-surface-solid-primary-brightness: #F3F6F8FF;
259
277
  --inverse-surface-solid-primary-hover: #F8FAFBFF;
@@ -271,6 +289,10 @@
271
289
  --inverse-surface-solid-default: #060A0C;
272
290
  --inverse-surface-solid-default-hover: #0A1114FF;
273
291
  --inverse-surface-solid-default-active: #030607FF;
292
+ --inverse-surface-transparent-primary-hover: #FFFFFFA8;
293
+ --inverse-surface-transparent-primary-active: #FFFFFFAD;
294
+ --inverse-surface-transparent-secondary-hover: #FFFFFF75;
295
+ --inverse-surface-transparent-secondary-active: #FFFFFF7A;
274
296
  --inverse-surface-clear: #FFFFFF00;
275
297
  --inverse-surface-clear-hover: #FFFFFF00;
276
298
  --inverse-surface-clear-active: #FFFFFF00;
@@ -301,6 +323,8 @@
301
323
  --inverse-surface-info-minor: #B0DFFF;
302
324
  --inverse-surface-info-minor-hover: #C7E9FFFF;
303
325
  --inverse-surface-info-minor-active: #A8DCFFFF;
326
+ --inverse-surface-transparent-secondary: #FFFFFF66;
327
+ --inverse-surface-transparent-primary: #FFFFFF99;
304
328
  --background-primary: #060A0C;
305
329
  --background-primary-brightness: #15191BFF;
306
330
  --dark-background-primary: #060A0C;
@@ -313,6 +337,8 @@
313
337
  --outline-solid-secondary: #30373C;
314
338
  --outline-solid-secondary-hover: #394147FF;
315
339
  --outline-solid-secondary-active: #2B3136FF;
340
+ --outline-transparent-primary-hover: #FFFFFF7A;
341
+ --outline-transparent-primary-active: #FFFFFF52;
316
342
  --outline-clear: #FFFFFF00;
317
343
  --outline-clear-hover: #FFFFFFFF;
318
344
  --outline-clear-active: #FFFFFFFF;
@@ -328,12 +354,15 @@
328
354
  --outline-info: #118CDF;
329
355
  --outline-info-hover: #1798EEFF;
330
356
  --outline-info-active: #1086D5FF;
357
+ --outline-transparent-primary: #FFFFFFCC;
331
358
  --on-dark-outline-solid-primary: #23292D;
332
359
  --on-dark-outline-solid-primary-hover: #2C343AFF;
333
360
  --on-dark-outline-solid-primary-active: #1F2528FF;
334
361
  --on-dark-outline-solid-secondary: #30373C;
335
362
  --on-dark-outline-solid-secondary-hover: #394147FF;
336
363
  --on-dark-outline-solid-secondary-active: #2B3136FF;
364
+ --on-dark-outline-transparent-primary-hover: #FFFFFF7A;
365
+ --on-dark-outline-transparent-primary-active: #FFFFFF52;
337
366
  --on-dark-outline-clear: #FFFFFF00;
338
367
  --on-dark-outline-clear-hover: #FFFFFFFF;
339
368
  --on-dark-outline-clear-active: #FFFFFFFF;
@@ -349,12 +378,15 @@
349
378
  --on-dark-outline-info: #118CDF;
350
379
  --on-dark-outline-info-hover: #1798EEFF;
351
380
  --on-dark-outline-info-active: #1086D5FF;
381
+ --on-dark-outline-transparent-primary: #FFFFFFCC;
352
382
  --on-light-outline-solid-primary: #D5DFE6;
353
383
  --on-light-outline-solid-primary-hover: #E2E9EEFF;
354
384
  --on-light-outline-solid-primary-active: #CFDAE2FF;
355
385
  --on-light-outline-solid-secondary: #ADB9C2;
356
386
  --on-light-outline-solid-secondary-hover: #B9C3CBFF;
357
387
  --on-light-outline-solid-secondary-active: #A7B4BEFF;
388
+ --on-light-outline-transparent-primary-hover: #FFFFFF66;
389
+ --on-light-outline-transparent-primary-active: #FFFFFFFF;
358
390
  --on-light-outline-clear: #FFFFFF00;
359
391
  --on-light-outline-clear-hover: #FFFFFFFF;
360
392
  --on-light-outline-clear-active: #FFFFFFFF;
@@ -370,12 +402,15 @@
370
402
  --on-light-outline-info: #0B7ECB;
371
403
  --on-light-outline-info-hover: #0C8ADFFF;
372
404
  --on-light-outline-info-active: #0A78C2FF;
405
+ --on-light-outline-transparent-primary: #FFFFFFCC;
373
406
  --inverse-outline-solid-primary: #D5DFE6;
374
407
  --inverse-outline-solid-primary-hover: #E2E9EEFF;
375
408
  --inverse-outline-solid-primary-active: #CFDAE2FF;
376
409
  --inverse-outline-solid-secondary: #ADB9C2;
377
410
  --inverse-outline-solid-secondary-hover: #B9C3CBFF;
378
411
  --inverse-outline-solid-secondary-active: #A7B4BEFF;
412
+ --inverse-outline-transparent-primary-hover: #FFFFFF66;
413
+ --inverse-outline-transparent-primary-active: #FFFFFFFF;
379
414
  --inverse-outline-clear: #FFFFFF00;
380
415
  --inverse-outline-clear-hover: #FFFFFFFF;
381
416
  --inverse-outline-clear-active: #FFFFFFFF;
@@ -391,6 +426,7 @@
391
426
  --inverse-outline-info: #0B7ECB;
392
427
  --inverse-outline-info-hover: #0C8ADFFF;
393
428
  --inverse-outline-info-active: #0A78C2FF;
429
+ --inverse-outline-transparent-primary: #FFFFFFCC;
394
430
  --data-yellow: #F3A912;
395
431
  --data-yellow-hover: #F4B22FFF;
396
432
  --data-yellow-active: #EDA20CFF;
package/css/sdds_cs__light.css CHANGED
@@ -120,6 +120,10 @@
120
120
  --surface-solid-card-active: #FFFFFFFF;
121
121
  --surface-solid-default-hover: #7A8790FF;
122
122
  --surface-solid-default-active: #5D686FFF;
123
+ --surface-transparent-primary-hover: #FFFFFFA8;
124
+ --surface-transparent-primary-active: #FFFFFFAD;
125
+ --surface-transparent-secondary-hover: #FFFFFF75;
126
+ --surface-transparent-secondary-active: #FFFFFF7A;
123
127
  --surface-clear-hover: #FFFFFF00;
124
128
  --surface-clear-active: #FFFFFF00;
125
129
  --surface-accent-hover: #0DA00DFF;
@@ -157,6 +161,8 @@
157
161
  --surface-negative-minor: #FFF5F6;
158
162
  --surface-positive: #83C804;
159
163
  --surface-negative: #FF3D51;
164
+ --surface-transparent-primary: #FFFFFF99;
165
+ --surface-transparent-secondary: #FFFFFF66;
160
166
  --on-dark-surface-solid-primary-hover: #394147FF;
161
167
  --on-dark-surface-solid-primary-active: #272C30FF;
162
168
  --on-dark-surface-solid-secondary-hover: #5A656CFF;
@@ -167,6 +173,10 @@
167
173
  --on-dark-surface-solid-card-active: #0B0D0FFF;
168
174
  --on-dark-surface-solid-default-hover: #FFFFFFFF;
169
175
  --on-dark-surface-solid-default-active: #F1F5F8FF;
176
+ --on-dark-surface-transparent-primary-hover: #FFFFFFB8;
177
+ --on-dark-surface-transparent-primary-active: #FFFFFF8A;
178
+ --on-dark-surface-transparent-secondary-hover: #FFFFFF85;
179
+ --on-dark-surface-transparent-secondary-active: #FFFFFF57;
170
180
  --on-dark-surface-clear-hover: #FFFFFF00;
171
181
  --on-dark-surface-clear-active: #FFFFFF00;
172
182
  --on-dark-surface-accent-hover: #0DAF0DFF;
@@ -207,6 +217,8 @@
207
217
  --on-dark-surface-negative-minor: #4A0D13;
208
218
  --on-dark-surface-positive: #83C804;
209
219
  --on-dark-surface-negative: #FF3D51;
220
+ --on-dark-surface-transparent-primary: #FFFFFF99;
221
+ --on-dark-surface-transparent-secondary: #FFFFFF66;
210
222
  --on-light-surface-solid-primary-hover: #F8FAFBFF;
211
223
  --on-light-surface-solid-primary-active: #EBF0F4FF;
212
224
  --on-light-surface-solid-secondary-hover: #F5F8F9FF;
@@ -217,6 +229,10 @@
217
229
  --on-light-surface-solid-card-active: #FFFFFFFF;
218
230
  --on-light-surface-solid-default-hover: #7A8790FF;
219
231
  --on-light-surface-solid-default-active: #5D686FFF;
232
+ --on-light-surface-transparent-primary-hover: #FFFFFFA8;
233
+ --on-light-surface-transparent-primary-active: #FFFFFFAD;
234
+ --on-light-surface-transparent-secondary-hover: #FFFFFF75;
235
+ --on-light-surface-transparent-secondary-active: #FFFFFF7A;
220
236
  --on-light-surface-clear-hover: #FFFFFF00;
221
237
  --on-light-surface-clear-active: #FFFFFF00;
222
238
  --on-light-surface-accent-hover: #0DA00DFF;
@@ -254,6 +270,8 @@
254
270
  --on-light-surface-negative-minor: #FFF5F6;
255
271
  --on-light-surface-positive: #83C804;
256
272
  --on-light-surface-negative: #FF3D51;
273
+ --on-light-surface-transparent-primary: #FFFFFF99;
274
+ --on-light-surface-transparent-secondary: #FFFFFF66;
257
275
  --inverse-surface-solid-primary-hover: #394147FF;
258
276
  --inverse-surface-solid-primary-active: #272C30FF;
259
277
  --inverse-surface-solid-secondary-hover: #5A656CFF;
@@ -264,6 +282,10 @@
264
282
  --inverse-surface-solid-card-active: #0B0D0FFF;
265
283
  --inverse-surface-solid-default-hover: #FFFFFFFF;
266
284
  --inverse-surface-solid-default-active: #F1F5F8FF;
285
+ --inverse-surface-transparent-primary-hover: #FFFFFFB8;
286
+ --inverse-surface-transparent-primary-active: #FFFFFF8A;
287
+ --inverse-surface-transparent-secondary-hover: #FFFFFF85;
288
+ --inverse-surface-transparent-secondary-active: #FFFFFF57;
267
289
  --inverse-surface-clear-hover: #FFFFFF00;
268
290
  --inverse-surface-clear-active: #FFFFFF00;
269
291
  --inverse-surface-accent-hover: #0DAF0DFF;
@@ -301,6 +323,8 @@
301
323
  --inverse-surface-solid-tertiary: #657179;
302
324
  --inverse-surface-positive: #83C804;
303
325
  --inverse-surface-negative: #FF3D51;
326
+ --inverse-surface-transparent-primary: #FFFFFF99;
327
+ --inverse-surface-transparent-secondary: #FFFFFF66;
304
328
  --background-primary-brightness: #F3F6F8FF;
305
329
  --background-primary: #F2F5F8;
306
330
  --dark-background-primary: #060A0C;
@@ -311,6 +335,8 @@
311
335
  --outline-solid-primary-active: #C9D5DEFF;
312
336
  --outline-solid-secondary-hover: #F5F8F9FF;
313
337
  --outline-solid-secondary-active: #E2E9EEFF;
338
+ --outline-transparent-primary-hover: #FFFFFF66;
339
+ --outline-transparent-primary-active: #FFFFFFFF;
314
340
  --outline-clear-hover: #FFFFFFFF;
315
341
  --outline-clear-active: #FFFFFFFF;
316
342
  --outline-accent-hover: #149F14FF;
@@ -328,10 +354,13 @@
328
354
  --outline-solid-secondary: #E8EEF2;
329
355
  --outline-clear: #FFFFFF00;
330
356
  --outline-info: #0C72B6;
357
+ --outline-transparent-primary: #FFFFFFCC;
331
358
  --on-dark-outline-solid-primary-hover: #394147FF;
332
359
  --on-dark-outline-solid-primary-active: #272C30FF;
333
360
  --on-dark-outline-solid-secondary-hover: #20282DFF;
334
361
  --on-dark-outline-solid-secondary-active: #0B0D0FFF;
362
+ --on-dark-outline-transparent-primary-hover: #FFFFFF7A;
363
+ --on-dark-outline-transparent-primary-active: #FFFFFF52;
335
364
  --on-dark-outline-clear-hover: #FFFFFFFF;
336
365
  --on-dark-outline-clear-active: #FFFFFFFF;
337
366
  --on-dark-outline-accent-hover: #0DAF0DFF;
@@ -349,10 +378,13 @@
349
378
  --on-dark-outline-solid-secondary: #13181B;
350
379
  --on-dark-outline-clear: #FFFFFF00;
351
380
  --on-dark-outline-info: #118CDF;
381
+ --on-dark-outline-transparent-primary: #FFFFFFCC;
352
382
  --on-light-outline-solid-primary-hover: #E2E9EEFF;
353
383
  --on-light-outline-solid-primary-active: #C9D5DEFF;
354
384
  --on-light-outline-solid-secondary-hover: #F5F8F9FF;
355
385
  --on-light-outline-solid-secondary-active: #E2E9EEFF;
386
+ --on-light-outline-transparent-primary-hover: #FFFFFF66;
387
+ --on-light-outline-transparent-primary-active: #FFFFFFFF;
356
388
  --on-light-outline-clear-hover: #FFFFFFFF;
357
389
  --on-light-outline-clear-active: #FFFFFFFF;
358
390
  --on-light-outline-accent-hover: #149F14FF;
@@ -370,10 +402,13 @@
370
402
  --on-light-outline-solid-secondary: #E8EEF2;
371
403
  --on-light-outline-clear: #FFFFFF00;
372
404
  --on-light-outline-info: #0C72B6;
405
+ --on-light-outline-transparent-primary: #FFFFFFCC;
373
406
  --inverse-outline-solid-primary-hover: #394147FF;
374
407
  --inverse-outline-solid-primary-active: #272C30FF;
375
408
  --inverse-outline-solid-secondary-hover: #FFFFFFFF;
376
409
  --inverse-outline-solid-secondary-active: #515B61FF;
410
+ --inverse-outline-transparent-primary-hover: #FFFFFF7A;
411
+ --inverse-outline-transparent-primary-active: #FFFFFF52;
377
412
  --inverse-outline-clear-hover: #FFFFFFFF;
378
413
  --inverse-outline-clear-active: #FFFFFFFF;
379
414
  --inverse-outline-accent-hover: #0DAF0DFF;
@@ -391,6 +426,7 @@
391
426
  --inverse-outline-clear: #FFFFFF00;
392
427
  --inverse-outline-info: #118CDF;
393
428
  --inverse-outline-solid-secondary: #657179;
429
+ --inverse-outline-transparent-primary: #FFFFFFCC;
394
430
  --data-yellow: #F3A912;
395
431
  --data-yellow-hover: #F5B638FF;
396
432
  --data-yellow-active: #E49C0CFF;