@skbkontur/colors 1.1.2-34230.0 → 1.1.2-73aed.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 (125) hide show
  1. package/dist/cjs/get-base-tokens.d.ts +7 -5
  2. package/dist/cjs/get-base-tokens.js +35 -63
  3. package/dist/cjs/get-default-tokens.d.ts +8 -0
  4. package/dist/cjs/get-default-tokens.js +19 -11
  5. package/dist/cjs/helpers/get-palette.js +58 -64
  6. package/dist/cjs/helpers/get-promo.js +21 -27
  7. package/dist/cjs/types/base-tokens.d.ts +5 -6
  8. package/dist/cjs/utils/format-variable.d.ts +2 -0
  9. package/dist/cjs/utils/format-variable.js +11 -0
  10. package/dist/esm/get-base-tokens.d.ts +7 -5
  11. package/dist/esm/get-base-tokens.js +33 -58
  12. package/dist/esm/get-default-tokens.d.ts +8 -0
  13. package/dist/esm/get-default-tokens.js +19 -11
  14. package/dist/esm/helpers/get-palette.js +58 -64
  15. package/dist/esm/helpers/get-promo.js +21 -27
  16. package/dist/esm/types/base-tokens.d.ts +5 -6
  17. package/dist/esm/utils/format-variable.d.ts +2 -0
  18. package/dist/esm/utils/format-variable.js +6 -0
  19. package/dist/tokens/base/css/brand-blue-deep_accent-gray.css +1 -1
  20. package/dist/tokens/base/css/brand-blue_accent-gray.css +1 -1
  21. package/dist/tokens/base/css/brand-green_accent-gray.css +1 -1
  22. package/dist/tokens/base/css/brand-mint_accent-gray.css +1 -1
  23. package/dist/tokens/base/css/brand-orange_accent-gray.css +1 -1
  24. package/dist/tokens/base/css/brand-purple_accent-gray.css +1 -1
  25. package/dist/tokens/base/css/brand-red_accent-gray.css +1 -1
  26. package/dist/tokens/base/css/brand-violet_accent-gray.css +1 -1
  27. package/dist/tokens/base/js/brand-blue-deep_accent-gray.js +1 -0
  28. package/dist/tokens/base/js/brand-blue_accent-gray.js +1 -0
  29. package/dist/tokens/base/js/brand-green_accent-gray.js +1 -0
  30. package/dist/tokens/base/js/brand-mint_accent-gray.js +1 -0
  31. package/dist/tokens/base/js/brand-orange_accent-gray.js +1 -0
  32. package/dist/tokens/base/js/brand-purple_accent-gray.js +1 -0
  33. package/dist/tokens/base/js/brand-red_accent-gray.js +1 -0
  34. package/dist/tokens/base/js/brand-violet_accent-gray.js +1 -0
  35. package/dist/tokens/base/js-tree/brand-blue-deep_accent-gray.tree.js +1 -0
  36. package/dist/tokens/base/js-tree/brand-blue_accent-gray.tree.js +1 -0
  37. package/dist/tokens/base/js-tree/brand-green_accent-gray.tree.js +1 -0
  38. package/dist/tokens/base/js-tree/brand-mint_accent-gray.tree.js +1 -0
  39. package/dist/tokens/base/js-tree/brand-orange_accent-gray.tree.js +1 -0
  40. package/dist/tokens/base/js-tree/brand-purple_accent-gray.tree.js +1 -0
  41. package/dist/tokens/base/js-tree/brand-red_accent-gray.tree.js +1 -0
  42. package/dist/tokens/base/js-tree/brand-violet_accent-gray.tree.js +1 -0
  43. package/dist/tokens/base/json/brand-blue-deep_accent-gray.json +1 -0
  44. package/dist/tokens/base/json/brand-blue_accent-gray.json +1 -0
  45. package/dist/tokens/base/json/brand-green_accent-gray.json +1 -0
  46. package/dist/tokens/base/json/brand-mint_accent-gray.json +1 -0
  47. package/dist/tokens/base/json/brand-orange_accent-gray.json +1 -0
  48. package/dist/tokens/base/json/brand-purple_accent-gray.json +1 -0
  49. package/dist/tokens/base/json/brand-red_accent-gray.json +1 -0
  50. package/dist/tokens/base/json/brand-violet_accent-gray.json +1 -0
  51. package/dist/tokens/base/json-tree/brand-blue-deep_accent-gray.tree.json +1 -0
  52. package/dist/tokens/base/json-tree/brand-blue_accent-gray.tree.json +1 -0
  53. package/dist/tokens/base/json-tree/brand-green_accent-gray.tree.json +1 -0
  54. package/dist/tokens/base/json-tree/brand-mint_accent-gray.tree.json +1 -0
  55. package/dist/tokens/base/json-tree/brand-orange_accent-gray.tree.json +1 -0
  56. package/dist/tokens/base/json-tree/brand-purple_accent-gray.tree.json +1 -0
  57. package/dist/tokens/base/json-tree/brand-red_accent-gray.tree.json +1 -0
  58. package/dist/tokens/base/json-tree/brand-violet_accent-gray.tree.json +1 -0
  59. package/dist/tokens/base/less/brand-blue-deep_accent-gray.less +1 -1
  60. package/dist/tokens/base/less/brand-blue_accent-gray.less +1 -1
  61. package/dist/tokens/base/less/brand-green_accent-gray.less +1 -1
  62. package/dist/tokens/base/less/brand-mint_accent-gray.less +1 -1
  63. package/dist/tokens/base/less/brand-orange_accent-gray.less +1 -1
  64. package/dist/tokens/base/less/brand-purple_accent-gray.less +1 -1
  65. package/dist/tokens/base/less/brand-red_accent-gray.less +1 -1
  66. package/dist/tokens/base/less/brand-violet_accent-gray.less +1 -1
  67. package/dist/tokens/base/scss/brand-blue-deep_accent-gray.scss +1 -1
  68. package/dist/tokens/base/scss/brand-blue_accent-gray.scss +1 -1
  69. package/dist/tokens/base/scss/brand-green_accent-gray.scss +1 -1
  70. package/dist/tokens/base/scss/brand-mint_accent-gray.scss +1 -1
  71. package/dist/tokens/base/scss/brand-orange_accent-gray.scss +1 -1
  72. package/dist/tokens/base/scss/brand-purple_accent-gray.scss +1 -1
  73. package/dist/tokens/base/scss/brand-red_accent-gray.scss +1 -1
  74. package/dist/tokens/base/scss/brand-violet_accent-gray.scss +1 -1
  75. package/dist/tokens/semantic/css/brand-blue-deep_accent-brand.css +19 -11
  76. package/dist/tokens/semantic/css/brand-blue-deep_accent-gray.css +19 -11
  77. package/dist/tokens/semantic/css/brand-blue_accent-brand.css +19 -11
  78. package/dist/tokens/semantic/css/brand-blue_accent-gray.css +19 -11
  79. package/dist/tokens/semantic/css/brand-green_accent-brand.css +19 -11
  80. package/dist/tokens/semantic/css/brand-green_accent-gray.css +19 -11
  81. package/dist/tokens/semantic/css/brand-mint_accent-brand.css +19 -11
  82. package/dist/tokens/semantic/css/brand-mint_accent-gray.css +19 -11
  83. package/dist/tokens/semantic/css/brand-orange_accent-brand.css +19 -11
  84. package/dist/tokens/semantic/css/brand-orange_accent-gray.css +19 -11
  85. package/dist/tokens/semantic/css/brand-purple_accent-brand.css +19 -11
  86. package/dist/tokens/semantic/css/brand-purple_accent-gray.css +19 -11
  87. package/dist/tokens/semantic/css/brand-red_accent-brand.css +19 -11
  88. package/dist/tokens/semantic/css/brand-red_accent-gray.css +19 -11
  89. package/dist/tokens/semantic/css/brand-violet_accent-brand.css +19 -11
  90. package/dist/tokens/semantic/css/brand-violet_accent-gray.css +19 -11
  91. package/dist/tokens/semantic/js/brand-blue-deep_accent-brand.js +19 -11
  92. package/dist/tokens/semantic/js/brand-blue-deep_accent-gray.js +19 -11
  93. package/dist/tokens/semantic/js/brand-blue_accent-brand.js +19 -11
  94. package/dist/tokens/semantic/js/brand-blue_accent-gray.js +19 -11
  95. package/dist/tokens/semantic/js/brand-green_accent-brand.js +19 -11
  96. package/dist/tokens/semantic/js/brand-green_accent-gray.js +19 -11
  97. package/dist/tokens/semantic/js/brand-mint_accent-brand.js +19 -11
  98. package/dist/tokens/semantic/js/brand-mint_accent-gray.js +19 -11
  99. package/dist/tokens/semantic/js/brand-orange_accent-brand.js +19 -11
  100. package/dist/tokens/semantic/js/brand-orange_accent-gray.js +19 -11
  101. package/dist/tokens/semantic/js/brand-purple_accent-brand.js +19 -11
  102. package/dist/tokens/semantic/js/brand-purple_accent-gray.js +19 -11
  103. package/dist/tokens/semantic/js/brand-red_accent-brand.js +19 -11
  104. package/dist/tokens/semantic/js/brand-red_accent-gray.js +19 -11
  105. package/dist/tokens/semantic/js/brand-violet_accent-brand.js +19 -11
  106. package/dist/tokens/semantic/js/brand-violet_accent-gray.js +19 -11
  107. package/dist/tokens/semantic/json/brand-blue-deep_accent-brand.json +9 -1
  108. package/dist/tokens/semantic/json/brand-blue-deep_accent-gray.json +9 -1
  109. package/dist/tokens/semantic/json/brand-blue_accent-brand.json +9 -1
  110. package/dist/tokens/semantic/json/brand-blue_accent-gray.json +9 -1
  111. package/dist/tokens/semantic/json/brand-green_accent-brand.json +9 -1
  112. package/dist/tokens/semantic/json/brand-green_accent-gray.json +9 -1
  113. package/dist/tokens/semantic/json/brand-mint_accent-brand.json +9 -1
  114. package/dist/tokens/semantic/json/brand-mint_accent-gray.json +9 -1
  115. package/dist/tokens/semantic/json/brand-orange_accent-brand.json +9 -1
  116. package/dist/tokens/semantic/json/brand-orange_accent-gray.json +9 -1
  117. package/dist/tokens/semantic/json/brand-purple_accent-brand.json +9 -1
  118. package/dist/tokens/semantic/json/brand-purple_accent-gray.json +9 -1
  119. package/dist/tokens/semantic/json/brand-red_accent-brand.json +9 -1
  120. package/dist/tokens/semantic/json/brand-red_accent-gray.json +9 -1
  121. package/dist/tokens/semantic/json/brand-violet_accent-brand.json +9 -1
  122. package/dist/tokens/semantic/json/brand-violet_accent-gray.json +9 -1
  123. package/dist/tokens/semantic/less/semantic.less +4 -0
  124. package/dist/tokens/semantic/scss/semantic.scss +4 -0
  125. package/package.json +1 -1
package/dist/tokens/semantic/css/brand-blue_accent-gray.css CHANGED
@@ -83,13 +83,15 @@
83
83
  --k-shapeHeavySuccess: #0b4a1f;
84
84
  --k-shapeHeavyWarning: #543600;
85
85
  --k-shapeOtherAccentBoldDisabled: rgba(0, 0, 0, 0.32);
86
- --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.08);
87
- --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.12);
86
+ --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.06);
87
+ --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.08);
88
88
  --k-shapeOtherBase: #fff;
89
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.64);
90
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.32);
89
+ --k-shapeOtherBaseHover: #f2f2f2;
90
+ --k-shapeOtherBasePressed: #e4e4e4;
91
91
  --k-shapeOtherDisabled: rgba(0, 0, 0, 0.06);
92
92
  --k-shapeOtherField: #fff;
93
+ --k-shapeOtherFieldHover: #f2f2f2;
94
+ --k-shapeOtherFieldPressed: #e4e4e4;
93
95
  --k-shapeOtherLow: rgba(0, 0, 0, 0.06);
94
96
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.08);
95
97
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.12);
@@ -138,7 +140,7 @@
138
140
  --k-shapeSoftWarning: #fcd35d;
139
141
  --k-shapeSoftWarningHover: #f4c359;
140
142
  --k-shapeSoftWarningPressed: #e5b566;
141
- --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.08);
143
+ --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.06);
142
144
  --k-shapeInvertedBacklessPressed: rgba(255, 255, 255, 0.04);
143
145
  --k-shapeInvertedDisabled: rgba(255, 255, 255, 0.06);
144
146
  --k-shapeInvertedNeutralFaintAlpha: rgba(255, 255, 255, 0.06);
@@ -248,6 +250,8 @@
248
250
  --k-illustrationBlack: #0d0d0d;
249
251
  --k-illustrationBrand: #2291ff;
250
252
  --k-illustrationComplement: #1a3268;
253
+ --k-illustrationInvertedNeutral: #fff;
254
+ --k-illustrationNeutral: #000;
251
255
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
252
256
  --k-illustrationOnComplement: #fff;
253
257
  --k-illustrationPromo: #1a3268;
@@ -395,13 +399,15 @@
395
399
  --k-shapeHeavySuccess: #c3f3ca;
396
400
  --k-shapeHeavyWarning: #fbe48d;
397
401
  --k-shapeOtherAccentBoldDisabled: rgba(255, 255, 255, 0.32);
398
- --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.08);
402
+ --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.06);
399
403
  --k-shapeOtherBacklessPressed: rgba(255, 255, 255, 0.04);
400
- --k-shapeOtherBase: rgba(255, 255, 255, 0.06);
401
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.12);
402
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.04);
404
+ --k-shapeOtherBase: #333;
405
+ --k-shapeOtherBaseHover: #3d3d3d;
406
+ --k-shapeOtherBasePressed: #292929;
403
407
  --k-shapeOtherDisabled: rgba(255, 255, 255, 0.06);
404
408
  --k-shapeOtherField: rgba(0, 0, 0, 0.12);
409
+ --k-shapeOtherFieldHover: rgba(255, 255, 255, 0.04);
410
+ --k-shapeOtherFieldPressed: rgba(0, 0, 0, 0.24);
405
411
  --k-shapeOtherLow: rgba(0, 0, 0, 0.24);
406
412
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.16);
407
413
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.32);
@@ -450,8 +456,8 @@
450
456
  --k-shapeSoftWarning: #86612c;
451
457
  --k-shapeSoftWarningHover: #956c30;
452
458
  --k-shapeSoftWarningPressed: #775728;
453
- --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.08);
454
- --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.12);
459
+ --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.06);
460
+ --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.08);
455
461
  --k-shapeInvertedDisabled: rgba(0, 0, 0, 0.06);
456
462
  --k-shapeInvertedNeutralFaintAlpha: rgba(0, 0, 0, 0.06);
457
463
  --k-shapeInvertedNeutralFaintAlphaHover: rgba(0, 0, 0, 0.08);
@@ -560,6 +566,8 @@
560
566
  --k-illustrationBlack: #0d0d0d;
561
567
  --k-illustrationBrand: #2291ff;
562
568
  --k-illustrationComplement: #fff;
569
+ --k-illustrationInvertedNeutral: #000;
570
+ --k-illustrationNeutral: #fff;
563
571
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
564
572
  --k-illustrationOnComplement: #1a3268;
565
573
  --k-illustrationPromo: #1a3268;
package/dist/tokens/semantic/css/brand-green_accent-brand.css CHANGED
@@ -83,13 +83,15 @@
83
83
  --k-shapeHeavySuccess: #0b4a1f;
84
84
  --k-shapeHeavyWarning: #543600;
85
85
  --k-shapeOtherAccentBoldDisabled: rgba(0, 0, 0, 0.32);
86
- --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.08);
87
- --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.12);
86
+ --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.06);
87
+ --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.08);
88
88
  --k-shapeOtherBase: #fff;
89
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.64);
90
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.32);
89
+ --k-shapeOtherBaseHover: #f2f2f2;
90
+ --k-shapeOtherBasePressed: #e4e4e4;
91
91
  --k-shapeOtherDisabled: rgba(0, 0, 0, 0.06);
92
92
  --k-shapeOtherField: #fff;
93
+ --k-shapeOtherFieldHover: #f2f2f2;
94
+ --k-shapeOtherFieldPressed: #e4e4e4;
93
95
  --k-shapeOtherLow: rgba(0, 0, 0, 0.06);
94
96
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.08);
95
97
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.12);
@@ -138,7 +140,7 @@
138
140
  --k-shapeSoftWarning: #fcd35d;
139
141
  --k-shapeSoftWarningHover: #f4c359;
140
142
  --k-shapeSoftWarningPressed: #e5b566;
141
- --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.08);
143
+ --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.06);
142
144
  --k-shapeInvertedBacklessPressed: rgba(255, 255, 255, 0.04);
143
145
  --k-shapeInvertedDisabled: rgba(255, 255, 255, 0.06);
144
146
  --k-shapeInvertedNeutralFaintAlpha: rgba(255, 255, 255, 0.06);
@@ -248,6 +250,8 @@
248
250
  --k-illustrationBlack: #0d0d0d;
249
251
  --k-illustrationBrand: #26ad50;
250
252
  --k-illustrationComplement: #00413e;
253
+ --k-illustrationInvertedNeutral: #fff;
254
+ --k-illustrationNeutral: #000;
251
255
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
252
256
  --k-illustrationOnComplement: #fff;
253
257
  --k-illustrationPromo: #00413e;
@@ -395,13 +399,15 @@
395
399
  --k-shapeHeavySuccess: #c3f3ca;
396
400
  --k-shapeHeavyWarning: #fbe48d;
397
401
  --k-shapeOtherAccentBoldDisabled: rgba(255, 255, 255, 0.32);
398
- --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.08);
402
+ --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.06);
399
403
  --k-shapeOtherBacklessPressed: rgba(255, 255, 255, 0.04);
400
- --k-shapeOtherBase: rgba(255, 255, 255, 0.06);
401
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.12);
402
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.04);
404
+ --k-shapeOtherBase: #333;
405
+ --k-shapeOtherBaseHover: #3d3d3d;
406
+ --k-shapeOtherBasePressed: #292929;
403
407
  --k-shapeOtherDisabled: rgba(255, 255, 255, 0.06);
404
408
  --k-shapeOtherField: rgba(0, 0, 0, 0.12);
409
+ --k-shapeOtherFieldHover: rgba(255, 255, 255, 0.04);
410
+ --k-shapeOtherFieldPressed: rgba(0, 0, 0, 0.24);
405
411
  --k-shapeOtherLow: rgba(0, 0, 0, 0.24);
406
412
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.16);
407
413
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.32);
@@ -450,8 +456,8 @@
450
456
  --k-shapeSoftWarning: #86612c;
451
457
  --k-shapeSoftWarningHover: #956c30;
452
458
  --k-shapeSoftWarningPressed: #775728;
453
- --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.08);
454
- --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.12);
459
+ --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.06);
460
+ --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.08);
455
461
  --k-shapeInvertedDisabled: rgba(0, 0, 0, 0.06);
456
462
  --k-shapeInvertedNeutralFaintAlpha: rgba(0, 0, 0, 0.06);
457
463
  --k-shapeInvertedNeutralFaintAlphaHover: rgba(0, 0, 0, 0.08);
@@ -560,6 +566,8 @@
560
566
  --k-illustrationBlack: #0d0d0d;
561
567
  --k-illustrationBrand: #26ad50;
562
568
  --k-illustrationComplement: #fff;
569
+ --k-illustrationInvertedNeutral: #000;
570
+ --k-illustrationNeutral: #fff;
563
571
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
564
572
  --k-illustrationOnComplement: #00413e;
565
573
  --k-illustrationPromo: #00413e;
package/dist/tokens/semantic/css/brand-green_accent-gray.css CHANGED
@@ -83,13 +83,15 @@
83
83
  --k-shapeHeavySuccess: #0b4a1f;
84
84
  --k-shapeHeavyWarning: #543600;
85
85
  --k-shapeOtherAccentBoldDisabled: rgba(0, 0, 0, 0.32);
86
- --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.08);
87
- --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.12);
86
+ --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.06);
87
+ --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.08);
88
88
  --k-shapeOtherBase: #fff;
89
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.64);
90
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.32);
89
+ --k-shapeOtherBaseHover: #f2f2f2;
90
+ --k-shapeOtherBasePressed: #e4e4e4;
91
91
  --k-shapeOtherDisabled: rgba(0, 0, 0, 0.06);
92
92
  --k-shapeOtherField: #fff;
93
+ --k-shapeOtherFieldHover: #f2f2f2;
94
+ --k-shapeOtherFieldPressed: #e4e4e4;
93
95
  --k-shapeOtherLow: rgba(0, 0, 0, 0.06);
94
96
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.08);
95
97
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.12);
@@ -138,7 +140,7 @@
138
140
  --k-shapeSoftWarning: #fcd35d;
139
141
  --k-shapeSoftWarningHover: #f4c359;
140
142
  --k-shapeSoftWarningPressed: #e5b566;
141
- --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.08);
143
+ --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.06);
142
144
  --k-shapeInvertedBacklessPressed: rgba(255, 255, 255, 0.04);
143
145
  --k-shapeInvertedDisabled: rgba(255, 255, 255, 0.06);
144
146
  --k-shapeInvertedNeutralFaintAlpha: rgba(255, 255, 255, 0.06);
@@ -248,6 +250,8 @@
248
250
  --k-illustrationBlack: #0d0d0d;
249
251
  --k-illustrationBrand: #26ad50;
250
252
  --k-illustrationComplement: #00413e;
253
+ --k-illustrationInvertedNeutral: #fff;
254
+ --k-illustrationNeutral: #000;
251
255
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
252
256
  --k-illustrationOnComplement: #fff;
253
257
  --k-illustrationPromo: #00413e;
@@ -395,13 +399,15 @@
395
399
  --k-shapeHeavySuccess: #c3f3ca;
396
400
  --k-shapeHeavyWarning: #fbe48d;
397
401
  --k-shapeOtherAccentBoldDisabled: rgba(255, 255, 255, 0.32);
398
- --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.08);
402
+ --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.06);
399
403
  --k-shapeOtherBacklessPressed: rgba(255, 255, 255, 0.04);
400
- --k-shapeOtherBase: rgba(255, 255, 255, 0.06);
401
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.12);
402
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.04);
404
+ --k-shapeOtherBase: #333;
405
+ --k-shapeOtherBaseHover: #3d3d3d;
406
+ --k-shapeOtherBasePressed: #292929;
403
407
  --k-shapeOtherDisabled: rgba(255, 255, 255, 0.06);
404
408
  --k-shapeOtherField: rgba(0, 0, 0, 0.12);
409
+ --k-shapeOtherFieldHover: rgba(255, 255, 255, 0.04);
410
+ --k-shapeOtherFieldPressed: rgba(0, 0, 0, 0.24);
405
411
  --k-shapeOtherLow: rgba(0, 0, 0, 0.24);
406
412
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.16);
407
413
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.32);
@@ -450,8 +456,8 @@
450
456
  --k-shapeSoftWarning: #86612c;
451
457
  --k-shapeSoftWarningHover: #956c30;
452
458
  --k-shapeSoftWarningPressed: #775728;
453
- --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.08);
454
- --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.12);
459
+ --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.06);
460
+ --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.08);
455
461
  --k-shapeInvertedDisabled: rgba(0, 0, 0, 0.06);
456
462
  --k-shapeInvertedNeutralFaintAlpha: rgba(0, 0, 0, 0.06);
457
463
  --k-shapeInvertedNeutralFaintAlphaHover: rgba(0, 0, 0, 0.08);
@@ -560,6 +566,8 @@
560
566
  --k-illustrationBlack: #0d0d0d;
561
567
  --k-illustrationBrand: #26ad50;
562
568
  --k-illustrationComplement: #fff;
569
+ --k-illustrationInvertedNeutral: #000;
570
+ --k-illustrationNeutral: #fff;
563
571
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
564
572
  --k-illustrationOnComplement: #00413e;
565
573
  --k-illustrationPromo: #00413e;
package/dist/tokens/semantic/css/brand-mint_accent-brand.css CHANGED
@@ -83,13 +83,15 @@
83
83
  --k-shapeHeavySuccess: #0b4a1f;
84
84
  --k-shapeHeavyWarning: #543600;
85
85
  --k-shapeOtherAccentBoldDisabled: rgba(0, 0, 0, 0.32);
86
- --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.08);
87
- --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.12);
86
+ --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.06);
87
+ --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.08);
88
88
  --k-shapeOtherBase: #fff;
89
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.64);
90
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.32);
89
+ --k-shapeOtherBaseHover: #f2f2f2;
90
+ --k-shapeOtherBasePressed: #e4e4e4;
91
91
  --k-shapeOtherDisabled: rgba(0, 0, 0, 0.06);
92
92
  --k-shapeOtherField: #fff;
93
+ --k-shapeOtherFieldHover: #f2f2f2;
94
+ --k-shapeOtherFieldPressed: #e4e4e4;
93
95
  --k-shapeOtherLow: rgba(0, 0, 0, 0.06);
94
96
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.08);
95
97
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.12);
@@ -138,7 +140,7 @@
138
140
  --k-shapeSoftWarning: #fcd35d;
139
141
  --k-shapeSoftWarningHover: #f4c359;
140
142
  --k-shapeSoftWarningPressed: #e5b566;
141
- --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.08);
143
+ --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.06);
142
144
  --k-shapeInvertedBacklessPressed: rgba(255, 255, 255, 0.04);
143
145
  --k-shapeInvertedDisabled: rgba(255, 255, 255, 0.06);
144
146
  --k-shapeInvertedNeutralFaintAlpha: rgba(255, 255, 255, 0.06);
@@ -248,6 +250,8 @@
248
250
  --k-illustrationBlack: #0d0d0d;
249
251
  --k-illustrationBrand: #00bea2;
250
252
  --k-illustrationComplement: #003e53;
253
+ --k-illustrationInvertedNeutral: #fff;
254
+ --k-illustrationNeutral: #000;
251
255
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
252
256
  --k-illustrationOnComplement: #fff;
253
257
  --k-illustrationPromo: #003e53;
@@ -395,13 +399,15 @@
395
399
  --k-shapeHeavySuccess: #c3f3ca;
396
400
  --k-shapeHeavyWarning: #fbe48d;
397
401
  --k-shapeOtherAccentBoldDisabled: rgba(255, 255, 255, 0.32);
398
- --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.08);
402
+ --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.06);
399
403
  --k-shapeOtherBacklessPressed: rgba(255, 255, 255, 0.04);
400
- --k-shapeOtherBase: rgba(255, 255, 255, 0.06);
401
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.12);
402
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.04);
404
+ --k-shapeOtherBase: #333;
405
+ --k-shapeOtherBaseHover: #3d3d3d;
406
+ --k-shapeOtherBasePressed: #292929;
403
407
  --k-shapeOtherDisabled: rgba(255, 255, 255, 0.06);
404
408
  --k-shapeOtherField: rgba(0, 0, 0, 0.12);
409
+ --k-shapeOtherFieldHover: rgba(255, 255, 255, 0.04);
410
+ --k-shapeOtherFieldPressed: rgba(0, 0, 0, 0.24);
405
411
  --k-shapeOtherLow: rgba(0, 0, 0, 0.24);
406
412
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.16);
407
413
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.32);
@@ -450,8 +456,8 @@
450
456
  --k-shapeSoftWarning: #86612c;
451
457
  --k-shapeSoftWarningHover: #956c30;
452
458
  --k-shapeSoftWarningPressed: #775728;
453
- --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.08);
454
- --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.12);
459
+ --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.06);
460
+ --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.08);
455
461
  --k-shapeInvertedDisabled: rgba(0, 0, 0, 0.06);
456
462
  --k-shapeInvertedNeutralFaintAlpha: rgba(0, 0, 0, 0.06);
457
463
  --k-shapeInvertedNeutralFaintAlphaHover: rgba(0, 0, 0, 0.08);
@@ -560,6 +566,8 @@
560
566
  --k-illustrationBlack: #0d0d0d;
561
567
  --k-illustrationBrand: #00bea2;
562
568
  --k-illustrationComplement: #fff;
569
+ --k-illustrationInvertedNeutral: #000;
570
+ --k-illustrationNeutral: #fff;
563
571
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
564
572
  --k-illustrationOnComplement: #003e53;
565
573
  --k-illustrationPromo: #003e53;
package/dist/tokens/semantic/css/brand-mint_accent-gray.css CHANGED
@@ -83,13 +83,15 @@
83
83
  --k-shapeHeavySuccess: #0b4a1f;
84
84
  --k-shapeHeavyWarning: #543600;
85
85
  --k-shapeOtherAccentBoldDisabled: rgba(0, 0, 0, 0.32);
86
- --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.08);
87
- --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.12);
86
+ --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.06);
87
+ --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.08);
88
88
  --k-shapeOtherBase: #fff;
89
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.64);
90
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.32);
89
+ --k-shapeOtherBaseHover: #f2f2f2;
90
+ --k-shapeOtherBasePressed: #e4e4e4;
91
91
  --k-shapeOtherDisabled: rgba(0, 0, 0, 0.06);
92
92
  --k-shapeOtherField: #fff;
93
+ --k-shapeOtherFieldHover: #f2f2f2;
94
+ --k-shapeOtherFieldPressed: #e4e4e4;
93
95
  --k-shapeOtherLow: rgba(0, 0, 0, 0.06);
94
96
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.08);
95
97
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.12);
@@ -138,7 +140,7 @@
138
140
  --k-shapeSoftWarning: #fcd35d;
139
141
  --k-shapeSoftWarningHover: #f4c359;
140
142
  --k-shapeSoftWarningPressed: #e5b566;
141
- --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.08);
143
+ --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.06);
142
144
  --k-shapeInvertedBacklessPressed: rgba(255, 255, 255, 0.04);
143
145
  --k-shapeInvertedDisabled: rgba(255, 255, 255, 0.06);
144
146
  --k-shapeInvertedNeutralFaintAlpha: rgba(255, 255, 255, 0.06);
@@ -248,6 +250,8 @@
248
250
  --k-illustrationBlack: #0d0d0d;
249
251
  --k-illustrationBrand: #00bea2;
250
252
  --k-illustrationComplement: #003e53;
253
+ --k-illustrationInvertedNeutral: #fff;
254
+ --k-illustrationNeutral: #000;
251
255
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
252
256
  --k-illustrationOnComplement: #fff;
253
257
  --k-illustrationPromo: #003e53;
@@ -395,13 +399,15 @@
395
399
  --k-shapeHeavySuccess: #c3f3ca;
396
400
  --k-shapeHeavyWarning: #fbe48d;
397
401
  --k-shapeOtherAccentBoldDisabled: rgba(255, 255, 255, 0.32);
398
- --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.08);
402
+ --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.06);
399
403
  --k-shapeOtherBacklessPressed: rgba(255, 255, 255, 0.04);
400
- --k-shapeOtherBase: rgba(255, 255, 255, 0.06);
401
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.12);
402
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.04);
404
+ --k-shapeOtherBase: #333;
405
+ --k-shapeOtherBaseHover: #3d3d3d;
406
+ --k-shapeOtherBasePressed: #292929;
403
407
  --k-shapeOtherDisabled: rgba(255, 255, 255, 0.06);
404
408
  --k-shapeOtherField: rgba(0, 0, 0, 0.12);
409
+ --k-shapeOtherFieldHover: rgba(255, 255, 255, 0.04);
410
+ --k-shapeOtherFieldPressed: rgba(0, 0, 0, 0.24);
405
411
  --k-shapeOtherLow: rgba(0, 0, 0, 0.24);
406
412
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.16);
407
413
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.32);
@@ -450,8 +456,8 @@
450
456
  --k-shapeSoftWarning: #86612c;
451
457
  --k-shapeSoftWarningHover: #956c30;
452
458
  --k-shapeSoftWarningPressed: #775728;
453
- --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.08);
454
- --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.12);
459
+ --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.06);
460
+ --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.08);
455
461
  --k-shapeInvertedDisabled: rgba(0, 0, 0, 0.06);
456
462
  --k-shapeInvertedNeutralFaintAlpha: rgba(0, 0, 0, 0.06);
457
463
  --k-shapeInvertedNeutralFaintAlphaHover: rgba(0, 0, 0, 0.08);
@@ -560,6 +566,8 @@
560
566
  --k-illustrationBlack: #0d0d0d;
561
567
  --k-illustrationBrand: #00bea2;
562
568
  --k-illustrationComplement: #fff;
569
+ --k-illustrationInvertedNeutral: #000;
570
+ --k-illustrationNeutral: #fff;
563
571
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
564
572
  --k-illustrationOnComplement: #003e53;
565
573
  --k-illustrationPromo: #003e53;
package/dist/tokens/semantic/css/brand-orange_accent-brand.css CHANGED
@@ -83,13 +83,15 @@
83
83
  --k-shapeHeavySuccess: #0b4a1f;
84
84
  --k-shapeHeavyWarning: #543600;
85
85
  --k-shapeOtherAccentBoldDisabled: rgba(0, 0, 0, 0.32);
86
- --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.08);
87
- --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.12);
86
+ --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.06);
87
+ --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.08);
88
88
  --k-shapeOtherBase: #fff;
89
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.64);
90
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.32);
89
+ --k-shapeOtherBaseHover: #f2f2f2;
90
+ --k-shapeOtherBasePressed: #e4e4e4;
91
91
  --k-shapeOtherDisabled: rgba(0, 0, 0, 0.06);
92
92
  --k-shapeOtherField: #fff;
93
+ --k-shapeOtherFieldHover: #f2f2f2;
94
+ --k-shapeOtherFieldPressed: #e4e4e4;
93
95
  --k-shapeOtherLow: rgba(0, 0, 0, 0.06);
94
96
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.08);
95
97
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.12);
@@ -138,7 +140,7 @@
138
140
  --k-shapeSoftWarning: #fcd35d;
139
141
  --k-shapeSoftWarningHover: #f4c359;
140
142
  --k-shapeSoftWarningPressed: #e5b566;
141
- --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.08);
143
+ --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.06);
142
144
  --k-shapeInvertedBacklessPressed: rgba(255, 255, 255, 0.04);
143
145
  --k-shapeInvertedDisabled: rgba(255, 255, 255, 0.06);
144
146
  --k-shapeInvertedNeutralFaintAlpha: rgba(255, 255, 255, 0.06);
@@ -248,6 +250,8 @@
248
250
  --k-illustrationBlack: #0d0d0d;
249
251
  --k-illustrationBrand: #fc7630;
250
252
  --k-illustrationComplement: #601c2c;
253
+ --k-illustrationInvertedNeutral: #fff;
254
+ --k-illustrationNeutral: #000;
251
255
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
252
256
  --k-illustrationOnComplement: #fff;
253
257
  --k-illustrationPromo: #601c2c;
@@ -395,13 +399,15 @@
395
399
  --k-shapeHeavySuccess: #c3f3ca;
396
400
  --k-shapeHeavyWarning: #fbe48d;
397
401
  --k-shapeOtherAccentBoldDisabled: rgba(255, 255, 255, 0.32);
398
- --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.08);
402
+ --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.06);
399
403
  --k-shapeOtherBacklessPressed: rgba(255, 255, 255, 0.04);
400
- --k-shapeOtherBase: rgba(255, 255, 255, 0.06);
401
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.12);
402
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.04);
404
+ --k-shapeOtherBase: #333;
405
+ --k-shapeOtherBaseHover: #3d3d3d;
406
+ --k-shapeOtherBasePressed: #292929;
403
407
  --k-shapeOtherDisabled: rgba(255, 255, 255, 0.06);
404
408
  --k-shapeOtherField: rgba(0, 0, 0, 0.12);
409
+ --k-shapeOtherFieldHover: rgba(255, 255, 255, 0.04);
410
+ --k-shapeOtherFieldPressed: rgba(0, 0, 0, 0.24);
405
411
  --k-shapeOtherLow: rgba(0, 0, 0, 0.24);
406
412
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.16);
407
413
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.32);
@@ -450,8 +456,8 @@
450
456
  --k-shapeSoftWarning: #86612c;
451
457
  --k-shapeSoftWarningHover: #956c30;
452
458
  --k-shapeSoftWarningPressed: #775728;
453
- --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.08);
454
- --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.12);
459
+ --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.06);
460
+ --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.08);
455
461
  --k-shapeInvertedDisabled: rgba(0, 0, 0, 0.06);
456
462
  --k-shapeInvertedNeutralFaintAlpha: rgba(0, 0, 0, 0.06);
457
463
  --k-shapeInvertedNeutralFaintAlphaHover: rgba(0, 0, 0, 0.08);
@@ -560,6 +566,8 @@
560
566
  --k-illustrationBlack: #0d0d0d;
561
567
  --k-illustrationBrand: #fc7630;
562
568
  --k-illustrationComplement: #fff;
569
+ --k-illustrationInvertedNeutral: #000;
570
+ --k-illustrationNeutral: #fff;
563
571
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
564
572
  --k-illustrationOnComplement: #601c2c;
565
573
  --k-illustrationPromo: #601c2c;
package/dist/tokens/semantic/css/brand-orange_accent-gray.css CHANGED
@@ -83,13 +83,15 @@
83
83
  --k-shapeHeavySuccess: #0b4a1f;
84
84
  --k-shapeHeavyWarning: #543600;
85
85
  --k-shapeOtherAccentBoldDisabled: rgba(0, 0, 0, 0.32);
86
- --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.08);
87
- --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.12);
86
+ --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.06);
87
+ --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.08);
88
88
  --k-shapeOtherBase: #fff;
89
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.64);
90
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.32);
89
+ --k-shapeOtherBaseHover: #f2f2f2;
90
+ --k-shapeOtherBasePressed: #e4e4e4;
91
91
  --k-shapeOtherDisabled: rgba(0, 0, 0, 0.06);
92
92
  --k-shapeOtherField: #fff;
93
+ --k-shapeOtherFieldHover: #f2f2f2;
94
+ --k-shapeOtherFieldPressed: #e4e4e4;
93
95
  --k-shapeOtherLow: rgba(0, 0, 0, 0.06);
94
96
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.08);
95
97
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.12);
@@ -138,7 +140,7 @@
138
140
  --k-shapeSoftWarning: #fcd35d;
139
141
  --k-shapeSoftWarningHover: #f4c359;
140
142
  --k-shapeSoftWarningPressed: #e5b566;
141
- --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.08);
143
+ --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.06);
142
144
  --k-shapeInvertedBacklessPressed: rgba(255, 255, 255, 0.04);
143
145
  --k-shapeInvertedDisabled: rgba(255, 255, 255, 0.06);
144
146
  --k-shapeInvertedNeutralFaintAlpha: rgba(255, 255, 255, 0.06);
@@ -248,6 +250,8 @@
248
250
  --k-illustrationBlack: #0d0d0d;
249
251
  --k-illustrationBrand: #fc7630;
250
252
  --k-illustrationComplement: #601c2c;
253
+ --k-illustrationInvertedNeutral: #fff;
254
+ --k-illustrationNeutral: #000;
251
255
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
252
256
  --k-illustrationOnComplement: #fff;
253
257
  --k-illustrationPromo: #601c2c;
@@ -395,13 +399,15 @@
395
399
  --k-shapeHeavySuccess: #c3f3ca;
396
400
  --k-shapeHeavyWarning: #fbe48d;
397
401
  --k-shapeOtherAccentBoldDisabled: rgba(255, 255, 255, 0.32);
398
- --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.08);
402
+ --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.06);
399
403
  --k-shapeOtherBacklessPressed: rgba(255, 255, 255, 0.04);
400
- --k-shapeOtherBase: rgba(255, 255, 255, 0.06);
401
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.12);
402
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.04);
404
+ --k-shapeOtherBase: #333;
405
+ --k-shapeOtherBaseHover: #3d3d3d;
406
+ --k-shapeOtherBasePressed: #292929;
403
407
  --k-shapeOtherDisabled: rgba(255, 255, 255, 0.06);
404
408
  --k-shapeOtherField: rgba(0, 0, 0, 0.12);
409
+ --k-shapeOtherFieldHover: rgba(255, 255, 255, 0.04);
410
+ --k-shapeOtherFieldPressed: rgba(0, 0, 0, 0.24);
405
411
  --k-shapeOtherLow: rgba(0, 0, 0, 0.24);
406
412
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.16);
407
413
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.32);
@@ -450,8 +456,8 @@
450
456
  --k-shapeSoftWarning: #86612c;
451
457
  --k-shapeSoftWarningHover: #956c30;
452
458
  --k-shapeSoftWarningPressed: #775728;
453
- --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.08);
454
- --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.12);
459
+ --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.06);
460
+ --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.08);
455
461
  --k-shapeInvertedDisabled: rgba(0, 0, 0, 0.06);
456
462
  --k-shapeInvertedNeutralFaintAlpha: rgba(0, 0, 0, 0.06);
457
463
  --k-shapeInvertedNeutralFaintAlphaHover: rgba(0, 0, 0, 0.08);
@@ -560,6 +566,8 @@
560
566
  --k-illustrationBlack: #0d0d0d;
561
567
  --k-illustrationBrand: #fc7630;
562
568
  --k-illustrationComplement: #fff;
569
+ --k-illustrationInvertedNeutral: #000;
570
+ --k-illustrationNeutral: #fff;
563
571
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
564
572
  --k-illustrationOnComplement: #601c2c;
565
573
  --k-illustrationPromo: #601c2c;
package/dist/tokens/semantic/css/brand-purple_accent-brand.css CHANGED
@@ -83,13 +83,15 @@
83
83
  --k-shapeHeavySuccess: #0b4a1f;
84
84
  --k-shapeHeavyWarning: #543600;
85
85
  --k-shapeOtherAccentBoldDisabled: rgba(0, 0, 0, 0.32);
86
- --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.08);
87
- --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.12);
86
+ --k-shapeOtherBacklessHover: rgba(0, 0, 0, 0.06);
87
+ --k-shapeOtherBacklessPressed: rgba(0, 0, 0, 0.08);
88
88
  --k-shapeOtherBase: #fff;
89
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.64);
90
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.32);
89
+ --k-shapeOtherBaseHover: #f2f2f2;
90
+ --k-shapeOtherBasePressed: #e4e4e4;
91
91
  --k-shapeOtherDisabled: rgba(0, 0, 0, 0.06);
92
92
  --k-shapeOtherField: #fff;
93
+ --k-shapeOtherFieldHover: #f2f2f2;
94
+ --k-shapeOtherFieldPressed: #e4e4e4;
93
95
  --k-shapeOtherLow: rgba(0, 0, 0, 0.06);
94
96
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.08);
95
97
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.12);
@@ -138,7 +140,7 @@
138
140
  --k-shapeSoftWarning: #fcd35d;
139
141
  --k-shapeSoftWarningHover: #f4c359;
140
142
  --k-shapeSoftWarningPressed: #e5b566;
141
- --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.08);
143
+ --k-shapeInvertedBacklessHover: rgba(255, 255, 255, 0.06);
142
144
  --k-shapeInvertedBacklessPressed: rgba(255, 255, 255, 0.04);
143
145
  --k-shapeInvertedDisabled: rgba(255, 255, 255, 0.06);
144
146
  --k-shapeInvertedNeutralFaintAlpha: rgba(255, 255, 255, 0.06);
@@ -248,6 +250,8 @@
248
250
  --k-illustrationBlack: #0d0d0d;
249
251
  --k-illustrationBrand: #b750d1;
250
252
  --k-illustrationComplement: #331f5a;
253
+ --k-illustrationInvertedNeutral: #fff;
254
+ --k-illustrationNeutral: #000;
251
255
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
252
256
  --k-illustrationOnComplement: #fff;
253
257
  --k-illustrationPromo: #331f5a;
@@ -395,13 +399,15 @@
395
399
  --k-shapeHeavySuccess: #c3f3ca;
396
400
  --k-shapeHeavyWarning: #fbe48d;
397
401
  --k-shapeOtherAccentBoldDisabled: rgba(255, 255, 255, 0.32);
398
- --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.08);
402
+ --k-shapeOtherBacklessHover: rgba(255, 255, 255, 0.06);
399
403
  --k-shapeOtherBacklessPressed: rgba(255, 255, 255, 0.04);
400
- --k-shapeOtherBase: rgba(255, 255, 255, 0.06);
401
- --k-shapeOtherBaseHover: rgba(255, 255, 255, 0.12);
402
- --k-shapeOtherBasePressed: rgba(255, 255, 255, 0.04);
404
+ --k-shapeOtherBase: #333;
405
+ --k-shapeOtherBaseHover: #3d3d3d;
406
+ --k-shapeOtherBasePressed: #292929;
403
407
  --k-shapeOtherDisabled: rgba(255, 255, 255, 0.06);
404
408
  --k-shapeOtherField: rgba(0, 0, 0, 0.12);
409
+ --k-shapeOtherFieldHover: rgba(255, 255, 255, 0.04);
410
+ --k-shapeOtherFieldPressed: rgba(0, 0, 0, 0.24);
405
411
  --k-shapeOtherLow: rgba(0, 0, 0, 0.24);
406
412
  --k-shapeOtherLowHover: rgba(0, 0, 0, 0.16);
407
413
  --k-shapeOtherLowPressed: rgba(0, 0, 0, 0.32);
@@ -450,8 +456,8 @@
450
456
  --k-shapeSoftWarning: #86612c;
451
457
  --k-shapeSoftWarningHover: #956c30;
452
458
  --k-shapeSoftWarningPressed: #775728;
453
- --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.08);
454
- --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.12);
459
+ --k-shapeInvertedBacklessHover: rgba(0, 0, 0, 0.06);
460
+ --k-shapeInvertedBacklessPressed: rgba(0, 0, 0, 0.08);
455
461
  --k-shapeInvertedDisabled: rgba(0, 0, 0, 0.06);
456
462
  --k-shapeInvertedNeutralFaintAlpha: rgba(0, 0, 0, 0.06);
457
463
  --k-shapeInvertedNeutralFaintAlphaHover: rgba(0, 0, 0, 0.08);
@@ -560,6 +566,8 @@
560
566
  --k-illustrationBlack: #0d0d0d;
561
567
  --k-illustrationBrand: #b750d1;
562
568
  --k-illustrationComplement: #fff;
569
+ --k-illustrationInvertedNeutral: #000;
570
+ --k-illustrationNeutral: #fff;
563
571
  --k-illustrationOnBrand: rgba(255, 255, 255, 1);
564
572
  --k-illustrationOnComplement: #331f5a;
565
573
  --k-illustrationPromo: #331f5a;