@skbkontur/colors 2.0.0 → 2.0.1

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 (29) hide show
  1. package/.gitignore +10 -0
  2. package/.npmignore +10 -0
  3. package/CHANGELOG.md +117 -0
  4. package/__docs__/Colors.docs.stories.tsx +1578 -0
  5. package/__docs__/Colors.mdx +228 -0
  6. package/__docs__/ColorsAPI.docs.stories.tsx +954 -0
  7. package/__docs__/ColorsAPI.mdx +133 -0
  8. package/__stories__/colors.stories.tsx +452 -0
  9. package/__tests__/convert-color.test.ts +23 -0
  10. package/__tests__/create-tokens-from-figma.test.ts +162 -0
  11. package/__tests__/format-variable.test.ts +16 -0
  12. package/__tests__/get-colors-base.test.ts +55 -0
  13. package/__tests__/get-colors.test.ts +75 -0
  14. package/__tests__/get-interactions.test.ts +37 -0
  15. package/__tests__/get-logo.test.ts +24 -0
  16. package/__tests__/get-palette.test.ts +43 -0
  17. package/__tests__/get-promo.test.ts +32 -0
  18. package/colors-default-dark.d.ts +319 -0
  19. package/colors-default-dark.js +319 -0
  20. package/colors-default-dark.ts +332 -0
  21. package/colors-default-light.d.ts +319 -0
  22. package/colors-default-light.js +319 -0
  23. package/colors-default-light.ts +336 -0
  24. package/package.json +25 -28
  25. package/scripts/create-tokens-files.ts +424 -0
  26. package/scripts/create-tokens-from-figma.ts +376 -0
  27. package/scripts/figma-tokens-base.json +3499 -0
  28. package/scripts/figma-tokens.json +710 -0
  29. package/tsconfig.json +8 -0
package/colors-default-dark.js ADDED
@@ -0,0 +1,319 @@
1
+ export var textAccentHeavy = 'var(--k-color-text-accent-heavy, rgba(255, 255, 255, 0.96))';
2
+ export var textAccentHeavyHover = 'var(--k-color-text-accent-heavy-hover, #ffffff)';
3
+ export var textAccentHeavyPressed = 'var(--k-color-text-accent-heavy-pressed, #ffffff)';
4
+ export var textErrorHeavy = 'var(--k-color-text-error-heavy, #ff5352)';
5
+ export var textErrorHeavyHover = 'var(--k-color-text-error-heavy-hover, #ff726b)';
6
+ export var textErrorHeavyPressed = 'var(--k-color-text-error-heavy-pressed, #dd5d58)';
7
+ export var textInvertedAccentHeavy = 'var(--k-color-text-inverted-accent-heavy, rgba(0, 0, 0, 0.88))';
8
+ export var textInvertedAccentHeavyHover = 'var(--k-color-text-inverted-accent-heavy-hover, rgba(0, 0, 0, 0.96))';
9
+ export var textInvertedAccentHeavyPressed = 'var(--k-color-text-inverted-accent-heavy-pressed, rgba(0, 0, 0, 0.96))';
10
+ export var textInvertedErrorHeavy = 'var(--k-color-text-inverted-error-heavy, #c50220)';
11
+ export var textInvertedErrorHeavyHover = 'var(--k-color-text-inverted-error-heavy-hover, #e62b34)';
12
+ export var textInvertedErrorHeavyPressed = 'var(--k-color-text-inverted-error-heavy-pressed, #943e3b)';
13
+ export var textInvertedNeutralFaint = 'var(--k-color-text-inverted-neutral-faint, rgba(0, 0, 0, 0.32))';
14
+ export var textInvertedNeutralHeavy = 'var(--k-color-text-inverted-neutral-heavy, rgba(0, 0, 0, 0.88))';
15
+ export var textInvertedNeutralPale = 'var(--k-color-text-inverted-neutral-pale, rgba(0, 0, 0, 0.4))';
16
+ export var textInvertedNeutralSoft = 'var(--k-color-text-inverted-neutral-soft, rgba(0, 0, 0, 0.56))';
17
+ export var textInvertedSuccessHeavy = 'var(--k-color-text-inverted-success-heavy, #007f34)';
18
+ export var textInvertedSuccessHeavyHover = 'var(--k-color-text-inverted-success-heavy-hover, #009b41)';
19
+ export var textInvertedSuccessHeavyPressed = 'var(--k-color-text-inverted-success-heavy-pressed, #3a6a43)';
20
+ export var textInvertedWarningHeavy = 'var(--k-color-text-inverted-warning-heavy, #bc7d00)';
21
+ export var textInvertedWarningHeavyHover = 'var(--k-color-text-inverted-warning-heavy-hover, #db9400)';
22
+ export var textInvertedWarningHeavyPressed = 'var(--k-color-text-inverted-warning-heavy-pressed, #956c30)';
23
+ export var textLogo = 'var(--k-color-text-logo, #fe4c4c)';
24
+ export var textNeutralFaint = 'var(--k-color-text-neutral-faint, rgba(255, 255, 255, 0.4))';
25
+ export var textNeutralHeavy = 'var(--k-color-text-neutral-heavy, rgba(255, 255, 255, 0.96))';
26
+ export var textNeutralPale = 'var(--k-color-text-neutral-pale, rgba(255, 255, 255, 0.48))';
27
+ export var textNeutralSoft = 'var(--k-color-text-neutral-soft, rgba(255, 255, 255, 0.64))';
28
+ export var textSuccessHeavy = 'var(--k-color-text-success-heavy, #00c655)';
29
+ export var textSuccessHeavyHover = 'var(--k-color-text-success-heavy-hover, #4ede76)';
30
+ export var textSuccessHeavyPressed = 'var(--k-color-text-success-heavy-pressed, #4fa161)';
31
+ export var textWarningHeavy = 'var(--k-color-text-warning-heavy, #f8ae00)';
32
+ export var textWarningHeavyHover = 'var(--k-color-text-warning-heavy-hover, #ffbf0b)';
33
+ export var textWarningHeavyPressed = 'var(--k-color-text-warning-heavy-pressed, #cc9a51)';
34
+ export var textConstFaintBlack = 'var(--k-color-text-const-faint-black, rgba(0, 0, 0, 0.32))';
35
+ export var textConstFaintWhite = 'var(--k-color-text-const-faint-white, rgba(255, 255, 255, 0.4))';
36
+ export var textConstHeavyBlack = 'var(--k-color-text-const-heavy-black, rgba(0, 0, 0, 0.88))';
37
+ export var textConstHeavyWhite = 'var(--k-color-text-const-heavy-white, rgba(255, 255, 255, 0.96))';
38
+ export var textConstPaleBlack = 'var(--k-color-text-const-pale-black, rgba(0, 0, 0, 0.4))';
39
+ export var textConstPaleWhite = 'var(--k-color-text-const-pale-white, rgba(255, 255, 255, 0.48))';
40
+ export var textConstSoftBlack = 'var(--k-color-text-const-soft-black, rgba(0, 0, 0, 0.56))';
41
+ export var textConstSoftWhite = 'var(--k-color-text-const-soft-white, rgba(255, 255, 255, 0.64))';
42
+ export var textOnAccentBoldFaint = 'var(--k-color-text-on-accent-bold-faint, rgba(0, 0, 0, 0.32))';
43
+ export var textOnAccentBoldHeavy = 'var(--k-color-text-on-accent-bold-heavy, rgba(0, 0, 0, 0.88))';
44
+ export var textOnAccentBoldPale = 'var(--k-color-text-on-accent-bold-pale, rgba(0, 0, 0, 0.4))';
45
+ export var textOnAccentBoldSoft = 'var(--k-color-text-on-accent-bold-soft, rgba(0, 0, 0, 0.56))';
46
+ export var textOnBrandOriginalFaint = 'var(--k-color-text-on-brand-original-faint, rgba(255, 255, 255, 0.4))';
47
+ export var textOnBrandOriginalHeavy = 'var(--k-color-text-on-brand-original-heavy, rgba(255, 255, 255, 0.96))';
48
+ export var textOnBrandOriginalPale = 'var(--k-color-text-on-brand-original-pale, rgba(255, 255, 255, 0.48))';
49
+ export var textOnBrandOriginalSoft = 'var(--k-color-text-on-brand-original-soft, rgba(255, 255, 255, 0.64))';
50
+ export var shapeBoldAccent = 'var(--k-color-shape-bold-accent, #f2f2f2)';
51
+ export var shapeBoldAccentHover = 'var(--k-color-shape-bold-accent-hover, #ffffff)';
52
+ export var shapeBoldAccentPressed = 'var(--k-color-shape-bold-accent-pressed, #cacaca)';
53
+ export var shapeBoldBrandOriginal = 'var(--k-color-shape-bold-brand-original, #FE4C4C)';
54
+ export var shapeBoldBrandOriginalHover = 'var(--k-color-shape-bold-brand-original-hover, #ff5a58)';
55
+ export var shapeBoldBrandOriginalPressed = 'var(--k-color-shape-bold-brand-original-pressed, #d54141)';
56
+ export var shapeBoldError = 'var(--k-color-shape-bold-error, #de3c3e)';
57
+ export var shapeBoldErrorHover = 'var(--k-color-shape-bold-error-hover, #ee4948)';
58
+ export var shapeBoldErrorPressed = 'var(--k-color-shape-bold-error-pressed, #a74541)';
59
+ export var shapeBoldNeutral = 'var(--k-color-shape-bold-neutral, #bebebe)';
60
+ export var shapeBoldNeutralHover = 'var(--k-color-shape-bold-neutral-hover, #d7d7d7)';
61
+ export var shapeBoldNeutralPressed = 'var(--k-color-shape-bold-neutral-pressed, rgba(255, 255, 255, 0.56))';
62
+ export var shapeBoldSuccess = 'var(--k-color-shape-bold-success, #1d9946)';
63
+ export var shapeBoldSuccessHover = 'var(--k-color-shape-bold-success-hover, #2ca651)';
64
+ export var shapeBoldSuccessPressed = 'var(--k-color-shape-bold-success-pressed, #3f784b)';
65
+ export var shapeBoldWarning = 'var(--k-color-shape-bold-warning, #f1b03b)';
66
+ export var shapeBoldWarningHover = 'var(--k-color-shape-bold-warning-hover, #f4c359)';
67
+ export var shapeBoldWarningPressed = 'var(--k-color-shape-bold-warning-pressed, #cc9a51)';
68
+ export var shapeFaintAccent = 'var(--k-color-shape-faint-accent, rgba(255, 255, 255, 0.12))';
69
+ export var shapeFaintAccentHover = 'var(--k-color-shape-faint-accent-hover, rgba(255, 255, 255, 0.16))';
70
+ export var shapeFaintAccentPressed = 'var(--k-color-shape-faint-accent-pressed, rgba(255, 255, 255, 0.08))';
71
+ export var shapeFaintBrand = 'var(--k-color-shape-faint-brand, #502421)';
72
+ export var shapeFaintBrandHover = 'var(--k-color-shape-faint-brand-hover, #602a27)';
73
+ export var shapeFaintBrandPressed = 'var(--k-color-shape-faint-brand-pressed, #411c1a)';
74
+ export var shapeFaintError = 'var(--k-color-shape-faint-error, #502421)';
75
+ export var shapeFaintErrorHover = 'var(--k-color-shape-faint-error-hover, #602a27)';
76
+ export var shapeFaintErrorPressed = 'var(--k-color-shape-faint-error-pressed, #411c1a)';
77
+ export var shapeFaintNeutralAlpha = 'var(--k-color-shape-faint-neutral-alpha, rgba(255, 255, 255, 0.06))';
78
+ export var shapeFaintNeutralAlphaHover = 'var(--k-color-shape-faint-neutral-alpha-hover, rgba(255, 255, 255, 0.08))';
79
+ export var shapeFaintNeutralAlphaPressed = 'var(--k-color-shape-faint-neutral-alpha-pressed, rgba(255, 255, 255, 0.04))';
80
+ export var shapeFaintSuccess = 'var(--k-color-shape-faint-success, #213a25)';
81
+ export var shapeFaintSuccessHover = 'var(--k-color-shape-faint-success-hover, #27452d)';
82
+ export var shapeFaintSuccessPressed = 'var(--k-color-shape-faint-success-pressed, #1a2e1e)';
83
+ export var shapeFaintWarning = 'var(--k-color-shape-faint-warning, #402f18)';
84
+ export var shapeFaintWarningHover = 'var(--k-color-shape-faint-warning-hover, #4d391c)';
85
+ export var shapeFaintWarningPressed = 'var(--k-color-shape-faint-warning-pressed, #342614)';
86
+ export var shapeHeavyError = 'var(--k-color-shape-heavy-error, #ffdadd)';
87
+ export var shapeHeavyNeutral = 'var(--k-color-shape-heavy-neutral, #f2f2f2)';
88
+ export var shapeHeavySuccess = 'var(--k-color-shape-heavy-success, #c3f3ca)';
89
+ export var shapeHeavyWarning = 'var(--k-color-shape-heavy-warning, #fbe48d)';
90
+ export var shapeOtherAccentBoldDisabled = 'var(--k-color-shape-other-accent-bold-disabled, rgba(255, 255, 255, 0.32))';
91
+ export var shapeOtherBacklessHover = 'var(--k-color-shape-other-backless-hover, rgba(255, 255, 255, 0.06))';
92
+ export var shapeOtherBacklessPressed = 'var(--k-color-shape-other-backless-pressed, rgba(255, 255, 255, 0.04))';
93
+ export var shapeOtherBase = 'var(--k-color-shape-other-base, rgba(255, 255, 255, 0.06))';
94
+ export var shapeOtherBaseHover = 'var(--k-color-shape-other-base-hover, rgba(255, 255, 255, 0.08))';
95
+ export var shapeOtherBasePressed = 'var(--k-color-shape-other-base-pressed, rgba(255, 255, 255, 0.04))';
96
+ export var shapeOtherDisabled = 'var(--k-color-shape-other-disabled, rgba(255, 255, 255, 0.06))';
97
+ export var shapeOtherField = 'var(--k-color-shape-other-field, rgba(0, 0, 0, 0.16))';
98
+ export var shapeOtherFieldHover = 'var(--k-color-shape-other-field-hover, rgba(0, 0, 0, 0.04))';
99
+ export var shapeOtherFieldPressed = 'var(--k-color-shape-other-field-pressed, rgba(0, 0, 0, 0.12))';
100
+ export var shapeOtherLow = 'var(--k-color-shape-other-low, rgba(0, 0, 0, 0.24))';
101
+ export var shapeOtherLowHover = 'var(--k-color-shape-other-low-hover, rgba(0, 0, 0, 0.16))';
102
+ export var shapeOtherLowPressed = 'var(--k-color-shape-other-low-pressed, rgba(0, 0, 0, 0.32))';
103
+ export var shapeOtherNeutralFaintSolid = 'var(--k-color-shape-other-neutral-faint-solid, #333333)';
104
+ export var shapeOtherNeutralFaintSolidHover = 'var(--k-color-shape-other-neutral-faint-solid-hover, #3d3d3d)';
105
+ export var shapeOtherNeutralFaintSolidPressed = 'var(--k-color-shape-other-neutral-faint-solid-pressed, #333333)';
106
+ export var shapeOtherNeutralPaleSolid = 'var(--k-color-shape-other-neutral-pale-solid, #3d3d3d)';
107
+ export var shapeOtherNeutralPaleSolidHover = 'var(--k-color-shape-other-neutral-pale-solid-hover, #484848)';
108
+ export var shapeOtherNeutralPaleSolidPressed = 'var(--k-color-shape-other-neutral-pale-solid-pressed, #333333)';
109
+ export var shapeOtherNeutralSoftSolid = 'var(--k-color-shape-other-neutral-soft-solid, #484848)';
110
+ export var shapeOtherNeutralSoftSolidHover = 'var(--k-color-shape-other-neutral-soft-solid-hover, #5d5d5d)';
111
+ export var shapeOtherNeutralSoftSolidPressed = 'var(--k-color-shape-other-neutral-soft-solid-pressed, #3d3d3d)';
112
+ export var shapePaleAccent = 'var(--k-color-shape-pale-accent, rgba(255, 255, 255, 0.16))';
113
+ export var shapePaleAccentHover = 'var(--k-color-shape-pale-accent-hover, rgba(255, 255, 255, 0.24))';
114
+ export var shapePaleAccentPressed = 'var(--k-color-shape-pale-accent-pressed, rgba(255, 255, 255, 0.12))';
115
+ export var shapePaleBrand = 'var(--k-color-shape-pale-brand, #602a27)';
116
+ export var shapePaleBrandHover = 'var(--k-color-shape-pale-brand-hover, #71312e)';
117
+ export var shapePaleBrandPressed = 'var(--k-color-shape-pale-brand-pressed, #502421)';
118
+ export var shapePaleError = 'var(--k-color-shape-pale-error, #602a27)';
119
+ export var shapePaleErrorHover = 'var(--k-color-shape-pale-error-hover, #71312e)';
120
+ export var shapePaleErrorPressed = 'var(--k-color-shape-pale-error-pressed, #502421)';
121
+ export var shapePaleNeutralAlpha = 'var(--k-color-shape-pale-neutral-alpha, rgba(255, 255, 255, 0.12))';
122
+ export var shapePaleNeutralAlphaHover = 'var(--k-color-shape-pale-neutral-alpha-hover, rgba(255, 255, 255, 0.16))';
123
+ export var shapePaleNeutralAlphaPressed = 'var(--k-color-shape-pale-neutral-alpha-pressed, rgba(255, 255, 255, 0.06))';
124
+ export var shapePaleSuccess = 'var(--k-color-shape-pale-success, #27452d)';
125
+ export var shapePaleSuccessHover = 'var(--k-color-shape-pale-success-hover, #2d5134)';
126
+ export var shapePaleSuccessPressed = 'var(--k-color-shape-pale-success-pressed, #213a25)';
127
+ export var shapePaleWarning = 'var(--k-color-shape-pale-warning, #4d391c)';
128
+ export var shapePaleWarningHover = 'var(--k-color-shape-pale-warning-hover, #5b4320)';
129
+ export var shapePaleWarningPressed = 'var(--k-color-shape-pale-warning-pressed, #402f18)';
130
+ export var shapeSoftAccent = 'var(--k-color-shape-soft-accent, rgba(255, 255, 255, 0.32))';
131
+ export var shapeSoftAccentHover = 'var(--k-color-shape-soft-accent-hover, rgba(255, 255, 255, 0.4))';
132
+ export var shapeSoftAccentPressed = 'var(--k-color-shape-soft-accent-pressed, rgba(255, 255, 255, 0.24))';
133
+ export var shapeSoftBrand = 'var(--k-color-shape-soft-brand, #943e3b)';
134
+ export var shapeSoftBrandHover = 'var(--k-color-shape-soft-brand-hover, #a74541)';
135
+ export var shapeSoftBrandPressed = 'var(--k-color-shape-soft-brand-pressed, #823835)';
136
+ export var shapeSoftError = 'var(--k-color-shape-soft-error, #943e3b)';
137
+ export var shapeSoftErrorHover = 'var(--k-color-shape-soft-error-hover, #a74541)';
138
+ export var shapeSoftErrorPressed = 'var(--k-color-shape-soft-error-pressed, #823835)';
139
+ export var shapeSoftNeutralAlpha = 'var(--k-color-shape-soft-neutral-alpha, rgba(255, 255, 255, 0.16))';
140
+ export var shapeSoftNeutralAlphaHover = 'var(--k-color-shape-soft-neutral-alpha-hover, rgba(255, 255, 255, 0.24))';
141
+ export var shapeSoftNeutralAlphaPressed = 'var(--k-color-shape-soft-neutral-alpha-pressed, rgba(255, 255, 255, 0.08))';
142
+ export var shapeSoftSuccess = 'var(--k-color-shape-soft-success, #3a6a43)';
143
+ export var shapeSoftSuccessHover = 'var(--k-color-shape-soft-success-hover, #3f784b)';
144
+ export var shapeSoftSuccessPressed = 'var(--k-color-shape-soft-success-pressed, #345e3c)';
145
+ export var shapeSoftWarning = 'var(--k-color-shape-soft-warning, #86612c)';
146
+ export var shapeSoftWarningHover = 'var(--k-color-shape-soft-warning-hover, #956c30)';
147
+ export var shapeSoftWarningPressed = 'var(--k-color-shape-soft-warning-pressed, #775728)';
148
+ export var shapeInvertedBacklessHover = 'var(--k-color-shape-inverted-backless-hover, rgba(0, 0, 0, 0.06))';
149
+ export var shapeInvertedBacklessPressed = 'var(--k-color-shape-inverted-backless-pressed, rgba(0, 0, 0, 0.16))';
150
+ export var shapeInvertedDisabled = 'var(--k-color-shape-inverted-disabled, rgba(0, 0, 0, 0.06))';
151
+ export var shapeInvertedNeutralFaintAlpha = 'var(--k-color-shape-inverted-neutral-faint-alpha, rgba(0, 0, 0, 0.06))';
152
+ export var shapeInvertedNeutralFaintAlphaHover = 'var(--k-color-shape-inverted-neutral-faint-alpha-hover, rgba(0, 0, 0, 0.12))';
153
+ export var shapeInvertedNeutralFaintAlphaPressed = 'var(--k-color-shape-inverted-neutral-faint-alpha-pressed, rgba(0, 0, 0, 0.16))';
154
+ export var shapeInvertedNeutralHeavy = 'var(--k-color-shape-inverted-neutral-heavy, rgba(0, 0, 0, 0.8))';
155
+ export var shapeInvertedNeutralHeavyHover = 'var(--k-color-shape-inverted-neutral-heavy-hover, rgba(0, 0, 0, 0.88))';
156
+ export var shapeInvertedNeutralHeavyPressed = 'var(--k-color-shape-inverted-neutral-heavy-pressed, rgba(0, 0, 0, 0.72))';
157
+ export var shapeInvertedNeutralPaleAlpha = 'var(--k-color-shape-inverted-neutral-pale-alpha, rgba(0, 0, 0, 0.12))';
158
+ export var shapeInvertedNeutralPaleAlphaHover = 'var(--k-color-shape-inverted-neutral-pale-alpha-hover, rgba(0, 0, 0, 0.16))';
159
+ export var shapeInvertedNeutralPaleAlphaPressed = 'var(--k-color-shape-inverted-neutral-pale-alpha-pressed, rgba(0, 0, 0, 0.24))';
160
+ export var shapeInvertedNeutralSoftAlpha = 'var(--k-color-shape-inverted-neutral-soft-alpha, rgba(0, 0, 0, 0.16))';
161
+ export var shapeInvertedNeutralSoftAlphaHover = 'var(--k-color-shape-inverted-neutral-soft-alpha-hover, rgba(0, 0, 0, 0.24))';
162
+ export var shapeInvertedNeutralSoftAlphaPressed = 'var(--k-color-shape-inverted-neutral-soft-alpha-pressed, rgba(0, 0, 0, 0.32))';
163
+ export var shapeConstBacklessBlackHover = 'var(--k-color-shape-const-backless-black-hover, rgba(0, 0, 0, 0.12))';
164
+ export var shapeConstBacklessBlackPressed = 'var(--k-color-shape-const-backless-black-pressed, rgba(0, 0, 0, 0.16))';
165
+ export var shapeConstBacklessWhiteHover = 'var(--k-color-shape-const-backless-white-hover, rgba(255, 255, 255, 0.12))';
166
+ export var shapeConstBacklessWhitePressed = 'var(--k-color-shape-const-backless-white-pressed, rgba(255, 255, 255, 0.06))';
167
+ export var shapeConstDisabledBlack = 'var(--k-color-shape-const-disabled-black, rgba(0, 0, 0, 0.06))';
168
+ export var shapeConstDisabledWhite = 'var(--k-color-shape-const-disabled-white, rgba(255, 255, 255, 0.06))';
169
+ export var shapeConstFaintBlack = 'var(--k-color-shape-const-faint-black, rgba(0, 0, 0, 0.12))';
170
+ export var shapeConstFaintBlackHover = 'var(--k-color-shape-const-faint-black-hover, rgba(0, 0, 0, 0.16))';
171
+ export var shapeConstFaintBlackPressed = 'var(--k-color-shape-const-faint-black-pressed, rgba(0, 0, 0, 0.24))';
172
+ export var shapeConstFaintWhite = 'var(--k-color-shape-const-faint-white, rgba(255, 255, 255, 0.12))';
173
+ export var shapeConstFaintWhiteHover = 'var(--k-color-shape-const-faint-white-hover, rgba(255, 255, 255, 0.16))';
174
+ export var shapeConstFaintWhitePressed = 'var(--k-color-shape-const-faint-white-pressed, rgba(255, 255, 255, 0.08))';
175
+ export var shapeConstHeavyBlack = 'var(--k-color-shape-const-heavy-black, rgba(0, 0, 0, 0.8))';
176
+ export var shapeConstHeavyBlackHover = 'var(--k-color-shape-const-heavy-black-hover, rgba(0, 0, 0, 0.88))';
177
+ export var shapeConstHeavyBlackPressed = 'var(--k-color-shape-const-heavy-black-pressed, rgba(0, 0, 0, 0.64))';
178
+ export var shapeConstHeavyWhite = 'var(--k-color-shape-const-heavy-white, rgba(255, 255, 255, 0.96))';
179
+ export var shapeConstHeavyWhiteHover = 'var(--k-color-shape-const-heavy-white-hover, #ffffff)';
180
+ export var shapeConstHeavyWhitePressed = 'var(--k-color-shape-const-heavy-white-pressed, rgba(255, 255, 255, 0.64))';
181
+ export var shapeConstPaleBlack = 'var(--k-color-shape-const-pale-black, rgba(0, 0, 0, 0.16))';
182
+ export var shapeConstPaleBlackHover = 'var(--k-color-shape-const-pale-black-hover, rgba(0, 0, 0, 0.24))';
183
+ export var shapeConstPaleBlackPressed = 'var(--k-color-shape-const-pale-black-pressed, rgba(0, 0, 0, 0.32))';
184
+ export var shapeConstPaleWhite = 'var(--k-color-shape-const-pale-white, rgba(255, 255, 255, 0.16))';
185
+ export var shapeConstPaleWhiteHover = 'var(--k-color-shape-const-pale-white-hover, rgba(255, 255, 255, 0.24))';
186
+ export var shapeConstPaleWhitePressed = 'var(--k-color-shape-const-pale-white-pressed, rgba(255, 255, 255, 0.12))';
187
+ export var shapeConstPromo = 'var(--k-color-shape-const-promo, #5d1d3c)';
188
+ export var shapeConstSoftBlack = 'var(--k-color-shape-const-soft-black, rgba(0, 0, 0, 0.24))';
189
+ export var shapeConstSoftBlackHover = 'var(--k-color-shape-const-soft-black-hover, rgba(0, 0, 0, 0.32))';
190
+ export var shapeConstSoftBlackPressed = 'var(--k-color-shape-const-soft-black-pressed, rgba(0, 0, 0, 0.4))';
191
+ export var shapeConstSoftWhite = 'var(--k-color-shape-const-soft-white, rgba(255, 255, 255, 0.24))';
192
+ export var shapeConstSoftWhiteHover = 'var(--k-color-shape-const-soft-white-hover, rgba(255, 255, 255, 0.32))';
193
+ export var shapeConstSoftWhitePressed = 'var(--k-color-shape-const-soft-white-pressed, rgba(255, 255, 255, 0.24))';
194
+ export var lineAccentBold = 'var(--k-color-line-accent-bold, #d7d7d7)';
195
+ export var lineAccentBoldHover = 'var(--k-color-line-accent-bold-hover, #ffffff)';
196
+ export var lineAccentBoldPressed = 'var(--k-color-line-accent-bold-pressed, rgba(255, 255, 255, 0.64))';
197
+ export var lineAccentPale = 'var(--k-color-line-accent-pale, rgba(255, 255, 255, 0.24))';
198
+ export var lineAccentPaleHover = 'var(--k-color-line-accent-pale-hover, rgba(255, 255, 255, 0.32))';
199
+ export var lineAccentPalePressed = 'var(--k-color-line-accent-pale-pressed, rgba(255, 255, 255, 0.16))';
200
+ export var lineAccentSoft = 'var(--k-color-line-accent-soft, rgba(255, 255, 255, 0.48))';
201
+ export var lineAccentSoftHover = 'var(--k-color-line-accent-soft-hover, #ffffff)';
202
+ export var lineAccentSoftPressed = 'var(--k-color-line-accent-soft-pressed, #ffffff)';
203
+ export var lineBrandOriginal = 'var(--k-color-line-brand-original, #FE4C4C)';
204
+ export var lineErrorBold = 'var(--k-color-line-error-bold, #e62b34)';
205
+ export var lineErrorBoldHover = 'var(--k-color-line-error-bold-hover, #ff5352)';
206
+ export var lineErrorBoldPressed = 'var(--k-color-line-error-bold-pressed, #ba4b47)';
207
+ export var lineNeutralFaint = 'var(--k-color-line-neutral-faint, rgba(255, 255, 255, 0.08))';
208
+ export var lineNeutralPale = 'var(--k-color-line-neutral-pale, rgba(255, 255, 255, 0.16))';
209
+ export var lineNeutralPaleHover = 'var(--k-color-line-neutral-pale-hover, rgba(255, 255, 255, 0.24))';
210
+ export var lineNeutralPalePressed = 'var(--k-color-line-neutral-pale-pressed, rgba(255, 255, 255, 0.12))';
211
+ export var lineOnAccentBoldFaint = 'var(--k-color-line-on-accent-bold-faint, rgba(0, 0, 0, 0.12))';
212
+ export var lineOnAccentBoldPale = 'var(--k-color-line-on-accent-bold-pale, rgba(0, 0, 0, 0.24))';
213
+ export var lineOnBrandOriginalFaint = 'var(--k-color-line-on-brand-original-faint, rgba(255, 255, 255, 0.12))';
214
+ export var lineOnBrandOriginalPale = 'var(--k-color-line-on-brand-original-pale, rgba(255, 255, 255, 0.24))';
215
+ export var lineSuccessBold = 'var(--k-color-line-success-bold, #009b41)';
216
+ export var lineSuccessBoldHover = 'var(--k-color-line-success-bold-hover, #00b74e)';
217
+ export var lineSuccessBoldPressed = 'var(--k-color-line-success-bold-pressed, #458552)';
218
+ export var lineWarningBold = 'var(--k-color-line-warning-bold, #f8ae00)';
219
+ export var lineWarningBoldHover = 'var(--k-color-line-warning-bold-hover, #ffbf0b)';
220
+ export var lineWarningBoldPressed = 'var(--k-color-line-warning-bold-pressed, #cc9a51)';
221
+ export var lineInvertedAccentBold = 'var(--k-color-line-inverted-accent-bold, #525252)';
222
+ export var lineInvertedAccentBoldHover = 'var(--k-color-line-inverted-accent-bold-hover, #161616)';
223
+ export var lineInvertedAccentBoldPressed = 'var(--k-color-line-inverted-accent-bold-pressed, rgba(0, 0, 0, 0.64))';
224
+ export var lineInvertedAccentPale = 'var(--k-color-line-inverted-accent-pale, rgba(0, 0, 0, 0.24))';
225
+ export var lineInvertedAccentPaleHover = 'var(--k-color-line-inverted-accent-pale-hover, rgba(0, 0, 0, 0.32))';
226
+ export var lineInvertedAccentPalePressed = 'var(--k-color-line-inverted-accent-pale-pressed, rgba(0, 0, 0, 0.4))';
227
+ export var lineInvertedAccentSoft = 'var(--k-color-line-inverted-accent-soft, rgba(0, 0, 0, 0.48))';
228
+ export var lineInvertedAccentSoftHover = 'var(--k-color-line-inverted-accent-soft-hover, rgba(0, 0, 0, 0.96))';
229
+ export var lineInvertedAccentSoftPressed = 'var(--k-color-line-inverted-accent-soft-pressed, rgba(0, 0, 0, 0.96))';
230
+ export var lineInvertedErrorBold = 'var(--k-color-line-inverted-error-bold, #d6192a)';
231
+ export var lineInvertedErrorBoldHover = 'var(--k-color-line-inverted-error-bold-hover, #f63b40)';
232
+ export var lineInvertedErrorBoldPressed = 'var(--k-color-line-inverted-error-bold-pressed, #a74541)';
233
+ export var lineInvertedNeutralFaint = 'var(--k-color-line-inverted-neutral-faint, rgba(0, 0, 0, 0.08))';
234
+ export var lineInvertedNeutralPale = 'var(--k-color-line-inverted-neutral-pale, rgba(0, 0, 0, 0.16))';
235
+ export var lineInvertedNeutralPaleHover = 'var(--k-color-line-inverted-neutral-pale-hover, rgba(0, 0, 0, 0.24))';
236
+ export var lineInvertedNeutralPalePressed = 'var(--k-color-line-inverted-neutral-pale-pressed, rgba(0, 0, 0, 0.32))';
237
+ export var lineInvertedSuccessBold = 'var(--k-color-line-inverted-success-bold, #008d3a)';
238
+ export var lineInvertedSuccessBoldHover = 'var(--k-color-line-inverted-success-bold-hover, #00b74e)';
239
+ export var lineInvertedSuccessBoldPressed = 'var(--k-color-line-inverted-success-bold-pressed, #458552)';
240
+ export var lineInvertedWarningBold = 'var(--k-color-line-inverted-warning-bold, #f8ae00)';
241
+ export var lineInvertedWarningBoldHover = 'var(--k-color-line-inverted-warning-bold-hover, #db9400)';
242
+ export var lineInvertedWarningBoldPressed = 'var(--k-color-line-inverted-warning-bold-pressed, #bd8f4d)';
243
+ export var lineConstFaintBlack = 'var(--k-color-line-const-faint-black, rgba(0, 0, 0, 0.12))';
244
+ export var lineConstFaintWhite = 'var(--k-color-line-const-faint-white, rgba(255, 255, 255, 0.12))';
245
+ export var lineConstPaleBlack = 'var(--k-color-line-const-pale-black, rgba(0, 0, 0, 0.24))';
246
+ export var lineConstPaleBlackHover = 'var(--k-color-line-const-pale-black-hover, rgba(0, 0, 0, 0.32))';
247
+ export var lineConstPaleBlackPressed = 'var(--k-color-line-const-pale-black-pressed, rgba(0, 0, 0, 0.16))';
248
+ export var lineConstPaleWhite = 'var(--k-color-line-const-pale-white, rgba(255, 255, 255, 0.24))';
249
+ export var lineConstPaleWhiteHover = 'var(--k-color-line-const-pale-white-hover, rgba(255, 255, 255, 0.32))';
250
+ export var lineConstPaleWhitePressed = 'var(--k-color-line-const-pale-white-pressed, rgba(255, 255, 255, 0.16))';
251
+ export var surfaceBase = 'var(--k-color-surface-base, #292929)';
252
+ export var surfaceHigh = 'var(--k-color-surface-high, #333333)';
253
+ export var surfaceLow = 'var(--k-color-surface-low, #1f1f1f)';
254
+ export var surfaceModalBackdrop = 'var(--k-color-surface-modal-backdrop, rgba(0, 0, 0, 0.4))';
255
+ export var illustrationBlack = 'var(--k-color-illustration-black, #0d0d0d)';
256
+ export var illustrationBrand = 'var(--k-color-illustration-brand, #FE4C4C)';
257
+ export var illustrationComplement = 'var(--k-color-illustration-complement, #ffffff)';
258
+ export var illustrationInvertedNeutral = 'var(--k-color-illustration-inverted-neutral, #000000)';
259
+ export var illustrationNeutral = 'var(--k-color-illustration-neutral, #ffffff)';
260
+ export var illustrationOnBrand = 'var(--k-color-illustration-on-brand, rgba(255, 255, 255, 1))';
261
+ export var illustrationOnComplement = 'var(--k-color-illustration-on-complement, #5d1d3c)';
262
+ export var illustrationPromo = 'var(--k-color-illustration-promo, #5d1d3c)';
263
+ export var illustrationSymbol = 'var(--k-color-illustration-symbol, #fea09c)';
264
+ export var illustrationWhite = 'var(--k-color-illustration-white, #ffffff)';
265
+ export var customizableBoldBlack = 'var(--k-color-customizable-bold-black, #b1b1b1)';
266
+ export var customizableBoldBlue = 'var(--k-color-customizable-bold-blue, #2b8df2)';
267
+ export var customizableBoldBlueDeep = 'var(--k-color-customizable-bold-blue-deep, #3e72ff)';
268
+ export var customizableBoldGray = 'var(--k-color-customizable-bold-gray, #696969)';
269
+ export var customizableBoldGreen = 'var(--k-color-customizable-bold-green, #2ca651)';
270
+ export var customizableBoldMint = 'var(--k-color-customizable-bold-mint, #01b197)';
271
+ export var customizableBoldOrange = 'var(--k-color-customizable-bold-orange, #ed6d28)';
272
+ export var customizableBoldPurple = 'var(--k-color-customizable-bold-purple, #be5ad8)';
273
+ export var customizableBoldRed = 'var(--k-color-customizable-bold-red, #ee4948)';
274
+ export var customizableBoldViolet = 'var(--k-color-customizable-bold-violet, #956ef2)';
275
+ export var customizableBoldYellow = 'var(--k-color-customizable-bold-yellow, #dfa700)';
276
+ export var customizableFaintBlack = 'var(--k-color-customizable-faint-black, #484848)';
277
+ export var customizableFaintBlue = 'var(--k-color-customizable-faint-blue, #1f344d)';
278
+ export var customizableFaintBlueDeep = 'var(--k-color-customizable-faint-blue-deep, #1e305c)';
279
+ export var customizableFaintGray = 'var(--k-color-customizable-faint-gray, #333333)';
280
+ export var customizableFaintGreen = 'var(--k-color-customizable-faint-green, #213a25)';
281
+ export var customizableFaintMint = 'var(--k-color-customizable-faint-mint, #163a32)';
282
+ export var customizableFaintOrange = 'var(--k-color-customizable-faint-orange, #472b1e)';
283
+ export var customizableFaintPurple = 'var(--k-color-customizable-faint-purple, #44244c)';
284
+ export var customizableFaintRed = 'var(--k-color-customizable-faint-red, #502421)';
285
+ export var customizableFaintViolet = 'var(--k-color-customizable-faint-violet, #362958)';
286
+ export var customizableFaintYellow = 'var(--k-color-customizable-faint-yellow, #3e3117)';
287
+ export var customizableHeavyBlack = 'var(--k-color-customizable-heavy-black, #f2f2f2)';
288
+ export var customizableHeavyBlue = 'var(--k-color-customizable-heavy-blue, #80c5ff)';
289
+ export var customizableHeavyBlueDeep = 'var(--k-color-customizable-heavy-blue-deep, #88b0ff)';
290
+ export var customizableHeavyGray = 'var(--k-color-customizable-heavy-gray, #808080)';
291
+ export var customizableHeavyGreen = 'var(--k-color-customizable-heavy-green, #6fe98b)';
292
+ export var customizableHeavyMint = 'var(--k-color-customizable-heavy-mint, #4af6dd)';
293
+ export var customizableHeavyOrange = 'var(--k-color-customizable-heavy-orange, #ff8f4f)';
294
+ export var customizableHeavyPurple = 'var(--k-color-customizable-heavy-purple, #ea9aff)';
295
+ export var customizableHeavyRed = 'var(--k-color-customizable-heavy-red, #ff8a84)';
296
+ export var customizableHeavyViolet = 'var(--k-color-customizable-heavy-violet, #b69fff)';
297
+ export var customizableHeavyYellow = 'var(--k-color-customizable-heavy-yellow, #f6c405)';
298
+ export var customizablePaleBlack = 'var(--k-color-customizable-pale-black, #525252)';
299
+ export var customizablePaleBlue = 'var(--k-color-customizable-pale-blue, #253f5c)';
300
+ export var customizablePaleBlueDeep = 'var(--k-color-customizable-pale-blue-deep, #243a6e)';
301
+ export var customizablePaleGray = 'var(--k-color-customizable-pale-gray, #3d3d3d)';
302
+ export var customizablePaleGreen = 'var(--k-color-customizable-pale-green, #27452d)';
303
+ export var customizablePaleMint = 'var(--k-color-customizable-pale-mint, #19463d)';
304
+ export var customizablePaleOrange = 'var(--k-color-customizable-pale-orange, #563324)';
305
+ export var customizablePalePurple = 'var(--k-color-customizable-pale-purple, #522a5c)';
306
+ export var customizablePaleRed = 'var(--k-color-customizable-pale-red, #602a27)';
307
+ export var customizablePaleViolet = 'var(--k-color-customizable-pale-violet, #413169)';
308
+ export var customizablePaleYellow = 'var(--k-color-customizable-pale-yellow, #4b3a1b)';
309
+ export var customizableSoftBlack = 'var(--k-color-customizable-soft-black, #747474)';
310
+ export var customizableSoftBlue = 'var(--k-color-customizable-soft-blue, #37608e)';
311
+ export var customizableSoftBlueDeep = 'var(--k-color-customizable-soft-blue-deep, #3959a5)';
312
+ export var customizableSoftGray = 'var(--k-color-customizable-soft-gray, #525252)';
313
+ export var customizableSoftGreen = 'var(--k-color-customizable-soft-green, #3a6a43)';
314
+ export var customizableSoftMint = 'var(--k-color-customizable-soft-mint, #216c5d)';
315
+ export var customizableSoftOrange = 'var(--k-color-customizable-soft-orange, #844d34)';
316
+ export var customizableSoftPurple = 'var(--k-color-customizable-soft-purple, #7c428b)';
317
+ export var customizableSoftRed = 'var(--k-color-customizable-soft-red, #943e3b)';
318
+ export var customizableSoftViolet = 'var(--k-color-customizable-soft-violet, #634c9e)';
319
+ export var customizableSoftYellow = 'var(--k-color-customizable-soft-yellow, #81642a)';