@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-purple_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: #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;
package/dist/tokens/semantic/css/brand-red_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: #fe4c4c;
250
252
  --k-illustrationComplement: #5d1d3c;
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: #5d1d3c;
@@ -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: #fe4c4c;
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: #5d1d3c;
565
573
  --k-illustrationPromo: #5d1d3c;
package/dist/tokens/semantic/css/brand-red_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: #fe4c4c;
250
252
  --k-illustrationComplement: #5d1d3c;
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: #5d1d3c;
@@ -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: #fe4c4c;
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: #5d1d3c;
565
573
  --k-illustrationPromo: #5d1d3c;
package/dist/tokens/semantic/css/brand-violet_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: #844bec;
250
252
  --k-illustrationComplement: #32205a;
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: #32205a;
@@ -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: #844bec;
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: #32205a;
565
573
  --k-illustrationPromo: #32205a;
package/dist/tokens/semantic/css/brand-violet_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: #844bec;
250
252
  --k-illustrationComplement: #32205a;
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: #32205a;
@@ -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: #844bec;
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: #32205a;
565
573
  --k-illustrationPromo: #32205a;
package/dist/tokens/semantic/js/brand-blue-deep_accent-brand.js CHANGED
@@ -84,13 +84,15 @@ export const SEMANTIC_TOKENS = {
84
84
  shapeHeavySuccess: '#0b4a1f',
85
85
  shapeHeavyWarning: '#543600',
86
86
  shapeOtherAccentBoldDisabled: 'rgba(0, 0, 0, 0.32)',
87
- shapeOtherBacklessHover: 'rgba(0, 0, 0, 0.08)',
88
- shapeOtherBacklessPressed: 'rgba(0, 0, 0, 0.12)',
87
+ shapeOtherBacklessHover: 'rgba(0, 0, 0, 0.06)',
88
+ shapeOtherBacklessPressed: 'rgba(0, 0, 0, 0.08)',
89
89
  shapeOtherBase: '#ffffff',
90
- shapeOtherBaseHover: 'rgba(255, 255, 255, 0.64)',
91
- shapeOtherBasePressed: 'rgba(255, 255, 255, 0.32)',
90
+ shapeOtherBaseHover: '#f2f2f2',
91
+ shapeOtherBasePressed: '#e4e4e4',
92
92
  shapeOtherDisabled: 'rgba(0, 0, 0, 0.06)',
93
93
  shapeOtherField: '#ffffff',
94
+ shapeOtherFieldHover: '#f2f2f2',
95
+ shapeOtherFieldPressed: '#e4e4e4',
94
96
  shapeOtherLow: 'rgba(0, 0, 0, 0.06)',
95
97
  shapeOtherLowHover: 'rgba(0, 0, 0, 0.08)',
96
98
  shapeOtherLowPressed: 'rgba(0, 0, 0, 0.12)',
@@ -139,7 +141,7 @@ export const SEMANTIC_TOKENS = {
139
141
  shapeSoftWarning: '#fcd35d',
140
142
  shapeSoftWarningHover: '#f4c359',
141
143
  shapeSoftWarningPressed: '#e5b566',
142
- shapeInvertedBacklessHover: 'rgba(255, 255, 255, 0.08)',
144
+ shapeInvertedBacklessHover: 'rgba(255, 255, 255, 0.06)',
143
145
  shapeInvertedBacklessPressed: 'rgba(255, 255, 255, 0.04)',
144
146
  shapeInvertedDisabled: 'rgba(255, 255, 255, 0.06)',
145
147
  shapeInvertedNeutralFaintAlpha: 'rgba(255, 255, 255, 0.06)',
@@ -249,6 +251,8 @@ export const SEMANTIC_TOKENS = {
249
251
  illustrationBlack: '#0d0d0d',
250
252
  illustrationBrand: '#366AF3',
251
253
  illustrationComplement: '#25255e',
254
+ illustrationInvertedNeutral: '#ffffff',
255
+ illustrationNeutral: '#000000',
252
256
  illustrationOnBrand: 'rgba(255, 255, 255, 1)',
253
257
  illustrationOnComplement: '#ffffff',
254
258
  illustrationPromo: '#25255e',
@@ -395,13 +399,15 @@ export const SEMANTIC_TOKENS = {
395
399
  shapeHeavySuccess: '#c3f3ca',
396
400
  shapeHeavyWarning: '#fbe48d',
397
401
  shapeOtherAccentBoldDisabled: 'rgba(255, 255, 255, 0.32)',
398
- shapeOtherBacklessHover: 'rgba(255, 255, 255, 0.08)',
402
+ shapeOtherBacklessHover: 'rgba(255, 255, 255, 0.06)',
399
403
  shapeOtherBacklessPressed: 'rgba(255, 255, 255, 0.04)',
400
- shapeOtherBase: 'rgba(255, 255, 255, 0.06)',
401
- shapeOtherBaseHover: 'rgba(255, 255, 255, 0.12)',
402
- shapeOtherBasePressed: 'rgba(255, 255, 255, 0.04)',
404
+ shapeOtherBase: '#333333',
405
+ shapeOtherBaseHover: '#3d3d3d',
406
+ shapeOtherBasePressed: '#292929',
403
407
  shapeOtherDisabled: 'rgba(255, 255, 255, 0.06)',
404
408
  shapeOtherField: 'rgba(0, 0, 0, 0.12)',
409
+ shapeOtherFieldHover: 'rgba(255, 255, 255, 0.04)',
410
+ shapeOtherFieldPressed: 'rgba(0, 0, 0, 0.24)',
405
411
  shapeOtherLow: 'rgba(0, 0, 0, 0.24)',
406
412
  shapeOtherLowHover: 'rgba(0, 0, 0, 0.16)',
407
413
  shapeOtherLowPressed: 'rgba(0, 0, 0, 0.32)',
@@ -450,8 +456,8 @@ export const SEMANTIC_TOKENS = {
450
456
  shapeSoftWarning: '#86612c',
451
457
  shapeSoftWarningHover: '#956c30',
452
458
  shapeSoftWarningPressed: '#775728',
453
- shapeInvertedBacklessHover: 'rgba(0, 0, 0, 0.08)',
454
- shapeInvertedBacklessPressed: 'rgba(0, 0, 0, 0.12)',
459
+ shapeInvertedBacklessHover: 'rgba(0, 0, 0, 0.06)',
460
+ shapeInvertedBacklessPressed: 'rgba(0, 0, 0, 0.08)',
455
461
  shapeInvertedDisabled: 'rgba(0, 0, 0, 0.06)',
456
462
  shapeInvertedNeutralFaintAlpha: 'rgba(0, 0, 0, 0.06)',
457
463
  shapeInvertedNeutralFaintAlphaHover: 'rgba(0, 0, 0, 0.08)',
@@ -560,6 +566,8 @@ export const SEMANTIC_TOKENS = {
560
566
  illustrationBlack: '#0d0d0d',
561
567
  illustrationBrand: '#366AF3',
562
568
  illustrationComplement: '#ffffff',
569
+ illustrationInvertedNeutral: '#000000',
570
+ illustrationNeutral: '#ffffff',
563
571
  illustrationOnBrand: 'rgba(255, 255, 255, 1)',
564
572
  illustrationOnComplement: '#25255e',
565
573
  illustrationPromo: '#25255e',
package/dist/tokens/semantic/js/brand-blue-deep_accent-gray.js CHANGED
@@ -84,13 +84,15 @@ export const SEMANTIC_TOKENS = {
84
84
  shapeHeavySuccess: '#0b4a1f',
85
85
  shapeHeavyWarning: '#543600',
86
86
  shapeOtherAccentBoldDisabled: 'rgba(0, 0, 0, 0.32)',
87
- shapeOtherBacklessHover: 'rgba(0, 0, 0, 0.08)',
88
- shapeOtherBacklessPressed: 'rgba(0, 0, 0, 0.12)',
87
+ shapeOtherBacklessHover: 'rgba(0, 0, 0, 0.06)',
88
+ shapeOtherBacklessPressed: 'rgba(0, 0, 0, 0.08)',
89
89
  shapeOtherBase: '#ffffff',
90
- shapeOtherBaseHover: 'rgba(255, 255, 255, 0.64)',
91
- shapeOtherBasePressed: 'rgba(255, 255, 255, 0.32)',
90
+ shapeOtherBaseHover: '#f2f2f2',
91
+ shapeOtherBasePressed: '#e4e4e4',
92
92
  shapeOtherDisabled: 'rgba(0, 0, 0, 0.06)',
93
93
  shapeOtherField: '#ffffff',
94
+ shapeOtherFieldHover: '#f2f2f2',
95
+ shapeOtherFieldPressed: '#e4e4e4',
94
96
  shapeOtherLow: 'rgba(0, 0, 0, 0.06)',
95
97
  shapeOtherLowHover: 'rgba(0, 0, 0, 0.08)',
96
98
  shapeOtherLowPressed: 'rgba(0, 0, 0, 0.12)',
@@ -139,7 +141,7 @@ export const SEMANTIC_TOKENS = {
139
141
  shapeSoftWarning: '#fcd35d',
140
142
  shapeSoftWarningHover: '#f4c359',
141
143
  shapeSoftWarningPressed: '#e5b566',
142
- shapeInvertedBacklessHover: 'rgba(255, 255, 255, 0.08)',
144
+ shapeInvertedBacklessHover: 'rgba(255, 255, 255, 0.06)',
143
145
  shapeInvertedBacklessPressed: 'rgba(255, 255, 255, 0.04)',
144
146
  shapeInvertedDisabled: 'rgba(255, 255, 255, 0.06)',
145
147
  shapeInvertedNeutralFaintAlpha: 'rgba(255, 255, 255, 0.06)',
@@ -249,6 +251,8 @@ export const SEMANTIC_TOKENS = {
249
251
  illustrationBlack: '#0d0d0d',
250
252
  illustrationBrand: '#366AF3',
251
253
  illustrationComplement: '#25255e',
254
+ illustrationInvertedNeutral: '#ffffff',
255
+ illustrationNeutral: '#000000',
252
256
  illustrationOnBrand: 'rgba(255, 255, 255, 1)',
253
257
  illustrationOnComplement: '#ffffff',
254
258
  illustrationPromo: '#25255e',
@@ -395,13 +399,15 @@ export const SEMANTIC_TOKENS = {
395
399
  shapeHeavySuccess: '#c3f3ca',
396
400
  shapeHeavyWarning: '#fbe48d',
397
401
  shapeOtherAccentBoldDisabled: 'rgba(255, 255, 255, 0.32)',
398
- shapeOtherBacklessHover: 'rgba(255, 255, 255, 0.08)',
402
+ shapeOtherBacklessHover: 'rgba(255, 255, 255, 0.06)',
399
403
  shapeOtherBacklessPressed: 'rgba(255, 255, 255, 0.04)',
400
- shapeOtherBase: 'rgba(255, 255, 255, 0.06)',
401
- shapeOtherBaseHover: 'rgba(255, 255, 255, 0.12)',
402
- shapeOtherBasePressed: 'rgba(255, 255, 255, 0.04)',
404
+ shapeOtherBase: '#333333',
405
+ shapeOtherBaseHover: '#3d3d3d',
406
+ shapeOtherBasePressed: '#292929',
403
407
  shapeOtherDisabled: 'rgba(255, 255, 255, 0.06)',
404
408
  shapeOtherField: 'rgba(0, 0, 0, 0.12)',
409
+ shapeOtherFieldHover: 'rgba(255, 255, 255, 0.04)',
410
+ shapeOtherFieldPressed: 'rgba(0, 0, 0, 0.24)',
405
411
  shapeOtherLow: 'rgba(0, 0, 0, 0.24)',
406
412
  shapeOtherLowHover: 'rgba(0, 0, 0, 0.16)',
407
413
  shapeOtherLowPressed: 'rgba(0, 0, 0, 0.32)',
@@ -450,8 +456,8 @@ export const SEMANTIC_TOKENS = {
450
456
  shapeSoftWarning: '#86612c',
451
457
  shapeSoftWarningHover: '#956c30',
452
458
  shapeSoftWarningPressed: '#775728',
453
- shapeInvertedBacklessHover: 'rgba(0, 0, 0, 0.08)',
454
- shapeInvertedBacklessPressed: 'rgba(0, 0, 0, 0.12)',
459
+ shapeInvertedBacklessHover: 'rgba(0, 0, 0, 0.06)',
460
+ shapeInvertedBacklessPressed: 'rgba(0, 0, 0, 0.08)',
455
461
  shapeInvertedDisabled: 'rgba(0, 0, 0, 0.06)',
456
462
  shapeInvertedNeutralFaintAlpha: 'rgba(0, 0, 0, 0.06)',
457
463
  shapeInvertedNeutralFaintAlphaHover: 'rgba(0, 0, 0, 0.08)',
@@ -560,6 +566,8 @@ export const SEMANTIC_TOKENS = {
560
566
  illustrationBlack: '#0d0d0d',
561
567
  illustrationBrand: '#366AF3',
562
568
  illustrationComplement: '#ffffff',
569
+ illustrationInvertedNeutral: '#000000',
570
+ illustrationNeutral: '#ffffff',
563
571
  illustrationOnBrand: 'rgba(255, 255, 255, 1)',
564
572
  illustrationOnComplement: '#25255e',
565
573
  illustrationPromo: '#25255e',
package/dist/tokens/semantic/js/brand-blue_accent-brand.js CHANGED
@@ -84,13 +84,15 @@ export const SEMANTIC_TOKENS = {
84
84
  shapeHeavySuccess: '#0b4a1f',
85
85
  shapeHeavyWarning: '#543600',
86
86
  shapeOtherAccentBoldDisabled: 'rgba(0, 0, 0, 0.32)',
87
- shapeOtherBacklessHover: 'rgba(0, 0, 0, 0.08)',
88
- shapeOtherBacklessPressed: 'rgba(0, 0, 0, 0.12)',
87
+ shapeOtherBacklessHover: 'rgba(0, 0, 0, 0.06)',
88
+ shapeOtherBacklessPressed: 'rgba(0, 0, 0, 0.08)',
89
89
  shapeOtherBase: '#ffffff',
90
- shapeOtherBaseHover: 'rgba(255, 255, 255, 0.64)',
91
- shapeOtherBasePressed: 'rgba(255, 255, 255, 0.32)',
90
+ shapeOtherBaseHover: '#f2f2f2',
91
+ shapeOtherBasePressed: '#e4e4e4',
92
92
  shapeOtherDisabled: 'rgba(0, 0, 0, 0.06)',
93
93
  shapeOtherField: '#ffffff',
94
+ shapeOtherFieldHover: '#f2f2f2',
95
+ shapeOtherFieldPressed: '#e4e4e4',
94
96
  shapeOtherLow: 'rgba(0, 0, 0, 0.06)',
95
97
  shapeOtherLowHover: 'rgba(0, 0, 0, 0.08)',
96
98
  shapeOtherLowPressed: 'rgba(0, 0, 0, 0.12)',
@@ -139,7 +141,7 @@ export const SEMANTIC_TOKENS = {
139
141
  shapeSoftWarning: '#fcd35d',
140
142
  shapeSoftWarningHover: '#f4c359',
141
143
  shapeSoftWarningPressed: '#e5b566',
142
- shapeInvertedBacklessHover: 'rgba(255, 255, 255, 0.08)',
144
+ shapeInvertedBacklessHover: 'rgba(255, 255, 255, 0.06)',
143
145
  shapeInvertedBacklessPressed: 'rgba(255, 255, 255, 0.04)',
144
146
  shapeInvertedDisabled: 'rgba(255, 255, 255, 0.06)',
145
147
  shapeInvertedNeutralFaintAlpha: 'rgba(255, 255, 255, 0.06)',
@@ -249,6 +251,8 @@ export const SEMANTIC_TOKENS = {
249
251
  illustrationBlack: '#0d0d0d',
250
252
  illustrationBrand: '#2291FF',
251
253
  illustrationComplement: '#1a3268',
254
+ illustrationInvertedNeutral: '#ffffff',
255
+ illustrationNeutral: '#000000',
252
256
  illustrationOnBrand: 'rgba(255, 255, 255, 1)',
253
257
  illustrationOnComplement: '#ffffff',
254
258
  illustrationPromo: '#1a3268',
@@ -395,13 +399,15 @@ export const SEMANTIC_TOKENS = {
395
399
  shapeHeavySuccess: '#c3f3ca',
396
400
  shapeHeavyWarning: '#fbe48d',
397
401
  shapeOtherAccentBoldDisabled: 'rgba(255, 255, 255, 0.32)',
398
- shapeOtherBacklessHover: 'rgba(255, 255, 255, 0.08)',
402
+ shapeOtherBacklessHover: 'rgba(255, 255, 255, 0.06)',
399
403
  shapeOtherBacklessPressed: 'rgba(255, 255, 255, 0.04)',
400
- shapeOtherBase: 'rgba(255, 255, 255, 0.06)',
401
- shapeOtherBaseHover: 'rgba(255, 255, 255, 0.12)',
402
- shapeOtherBasePressed: 'rgba(255, 255, 255, 0.04)',
404
+ shapeOtherBase: '#333333',
405
+ shapeOtherBaseHover: '#3d3d3d',
406
+ shapeOtherBasePressed: '#292929',
403
407
  shapeOtherDisabled: 'rgba(255, 255, 255, 0.06)',
404
408
  shapeOtherField: 'rgba(0, 0, 0, 0.12)',
409
+ shapeOtherFieldHover: 'rgba(255, 255, 255, 0.04)',
410
+ shapeOtherFieldPressed: 'rgba(0, 0, 0, 0.24)',
405
411
  shapeOtherLow: 'rgba(0, 0, 0, 0.24)',
406
412
  shapeOtherLowHover: 'rgba(0, 0, 0, 0.16)',
407
413
  shapeOtherLowPressed: 'rgba(0, 0, 0, 0.32)',
@@ -450,8 +456,8 @@ export const SEMANTIC_TOKENS = {
450
456
  shapeSoftWarning: '#86612c',
451
457
  shapeSoftWarningHover: '#956c30',
452
458
  shapeSoftWarningPressed: '#775728',
453
- shapeInvertedBacklessHover: 'rgba(0, 0, 0, 0.08)',
454
- shapeInvertedBacklessPressed: 'rgba(0, 0, 0, 0.12)',
459
+ shapeInvertedBacklessHover: 'rgba(0, 0, 0, 0.06)',
460
+ shapeInvertedBacklessPressed: 'rgba(0, 0, 0, 0.08)',
455
461
  shapeInvertedDisabled: 'rgba(0, 0, 0, 0.06)',
456
462
  shapeInvertedNeutralFaintAlpha: 'rgba(0, 0, 0, 0.06)',
457
463
  shapeInvertedNeutralFaintAlphaHover: 'rgba(0, 0, 0, 0.08)',
@@ -560,6 +566,8 @@ export const SEMANTIC_TOKENS = {
560
566
  illustrationBlack: '#0d0d0d',
561
567
  illustrationBrand: '#2291FF',
562
568
  illustrationComplement: '#ffffff',
569
+ illustrationInvertedNeutral: '#000000',
570
+ illustrationNeutral: '#ffffff',
563
571
  illustrationOnBrand: 'rgba(255, 255, 255, 1)',
564
572
  illustrationOnComplement: '#1a3268',
565
573
  illustrationPromo: '#1a3268',