@skbkontur/colors 0.5.1 → 1.1.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 (10) hide show
  1. package/README.md +90 -48
  2. package/colors.css +158 -158
  3. package/colors.less +158 -158
  4. package/colors.scss +158 -0
  5. package/dist/cjs/colors.d.ts +161 -161
  6. package/dist/cjs/colors.js +163 -163
  7. package/dist/esm/colors.d.ts +161 -161
  8. package/dist/esm/colors.js +160 -160
  9. package/package.json +3 -1
  10. package/CHANGELOG.md +0 -108
package/README.md CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  NPM-пакет для доступа к цветам из общей Figma-библиотеки [Kontur.Colors](https://www.figma.com/file/XuiIin3JAOEcHHPihtthOJ/%E2%9A%A1%EF%B8%8F-Kontur-Colors?node-id=0%3A1&t=pL38Ju5ZOo3VC6vt-0)
4
4
 
5
-
6
5
  ## Установка
7
6
 
8
7
  ```bash
@@ -11,9 +10,9 @@ npm i @skbkontur/colors
11
10
 
12
11
  ## Использование
13
12
 
14
- - JS/TS токены содержатся в объекте `KonturColors`
15
- - В Less виде препроцессорных `@переменных`
16
- - В CSS в виде глобальных `--css-переменных` в `:root { ... }`
13
+ - JS/TS токены содержатся в объекте `KonturColors.colorName`
14
+ - В CSS в виде глобальных переменных`--kontur-color-name` в `:root { ... }`
15
+ - В препроцессорах Less `@color-name` и SCSS `$color-name`
17
16
 
18
17
  #### JS/TS
19
18
 
@@ -29,8 +28,8 @@ const text = `<div style="color: ${KonturColors.blueDark90}">Цвет blueDark90
29
28
  import { KonturColors } from '@skbkontur/colors';
30
29
 
31
30
  const Component = () => {
32
- return <div style={{ color: KonturColors.blueDark90 }}>Цвет blueDark90</div>
33
- }
31
+ return <div style={{ color: KonturColors.blueDark90 }}>Цвет blueDark90</div>;
32
+ };
34
33
  ```
35
34
 
36
35
  #### CSS
@@ -39,7 +38,17 @@ const Component = () => {
39
38
  @import '@skbkontur/colors/colors.css';
40
39
 
41
40
  .class {
42
- color: var(--blueDark90);
41
+ color: var(--blue-dark-90);
42
+ }
43
+ ```
44
+
45
+ #### SCSS
46
+
47
+ ```scss
48
+ @import '@skbkontur/colors/colors.scss';
49
+
50
+ .class {
51
+ color: $blue-dark-90;
43
52
  }
44
53
  ```
45
54
 
@@ -49,15 +58,24 @@ const Component = () => {
49
58
  @import '@skbkontur/colors/colors.less';
50
59
 
51
60
  .class {
52
- color: @blueDark90;
61
+ color: @blue-dark-90;
53
62
  }
54
63
  ```
55
64
 
56
65
  ## Палитра
57
66
 
58
- ```jsx
67
+ ```jsx harmony
59
68
  import { KonturColors } from '@skbkontur/colors';
60
- import { Toast } from '@skbkontur/react-ui';
69
+ import {
70
+ Toast,
71
+ DropdownMenu,
72
+ MenuHeader,
73
+ MenuItem,
74
+ ThemeContext,
75
+ ThemeFactory,
76
+ THEME_2022_UPDATE_2024,
77
+ } from '@skbkontur/react-ui';
78
+
61
79
  import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
62
80
 
63
81
  const styles = {
@@ -81,14 +99,14 @@ const styles = {
81
99
  cursor: pointer;
82
100
  padding: 8px;
83
101
  border-radius: 8px;
84
- transition: .1s ease;
102
+ transition: 0.1s ease;
85
103
 
86
104
  &:hover {
87
- background: rgba(0,0,0,.06);
105
+ background: rgba(0, 0, 0, 0.06);
88
106
  }
89
107
 
90
108
  &:active {
91
- background: rgba(0,0,0,.1);
109
+ background: rgba(0, 0, 0, 0.1);
92
110
  }
93
111
  `,
94
112
  colorTile: css`
@@ -118,47 +136,71 @@ const styles = {
118
136
  display: block;
119
137
  fontSize: 12px;
120
138
  color: #8b8b8b;
121
- }`
139
+ }`,
122
140
  };
123
141
 
124
- const colorGroups = Object.entries(KonturColors)
125
- .reduce((acc, [colorKey, colorValue]) => {
126
- const firstWord =
127
- ['greenMint', 'blueDark'].find((color) => colorKey.match(color)) || colorKey.match(/^[a-z]+/)[0];
142
+ const colorGroups = Object.entries(KonturColors).reduce((acc, [colorKey, colorValue]) => {
143
+ const firstWord = ['greenMint', 'blueDark'].find((color) => colorKey.match(color)) || colorKey.match(/^[a-z]+/)[0];
144
+
145
+ acc[firstWord] = { ...acc[firstWord], [colorKey]: colorValue };
146
+
147
+ return acc;
148
+ }, {});
128
149
 
129
- acc[firstWord] = { ...acc[firstWord], [colorKey]: colorValue };
150
+ const getColors = (color) => {
151
+ const colorDashCase = color
152
+ .replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())
153
+ .replace(/\d/, (m) => `-${m}`)
154
+ .replace('f-f-f', 'fff');
130
155
 
131
- return acc;
132
- }, {});
156
+ return {
157
+ 'JavaScript / TypeScript': `KonturColors.${color}`,
158
+ CSS: `var(--kontur-${colorDashCase})`,
159
+ SCSS: `$${colorDashCase}`,
160
+ Less: `@${colorDashCase}`,
161
+ };
162
+ };
163
+
164
+ const copyColor = (color) => {
165
+ navigator.clipboard.writeText(color);
166
+ Toast.push('Цвет скопирован', null, 1000);
167
+ };
133
168
 
134
169
  <div className={styles.colors}>
135
- {Object.entries(colorGroups).map(([group, colors]) => {
136
- return (
137
- <div className={styles.colorGroup}>
138
- <div className={styles.groupTitle}>{group}</div>
139
-
140
- {Object.keys(colors).map((colorName) => {
141
- const colorValue = KonturColors[colorName];
142
- return (
143
- <button
144
- className={styles.colorBlock}
145
- onClick={() => {
146
- navigator.clipboard.writeText(colorName)
147
- Toast.push('Цвет скопирован', null, 1000);
148
- }}
149
- >
150
- <span className={styles.colorTile} style={{ backgroundColor: colorValue }} />
151
- <span>
152
- <span className={styles.colorName}>{colorName}</span>
153
- <span className={styles.colorValue}>{colorValue}</span>
154
- </span>
155
- </button>
156
- );
157
- })}
158
- </div>
159
- )
160
- })}
161
- </div>
170
+ <ThemeContext.Provider value={THEME_2022_UPDATE_2024}>
171
+ {Object.entries(colorGroups).map(([group, colors]) => {
172
+ return (
173
+ <div className={styles.colorGroup}>
174
+ <div className={styles.groupTitle}>{group}</div>
175
+ {Object.keys(colors).map((colorName) => {
176
+ const colorValue = KonturColors[colorName];
177
+ const colorTile = (
178
+ <div className={styles.colorBlock}>
179
+ <span className={styles.colorTile} style={{ backgroundColor: colorValue }} />
180
+ <span>
181
+ <span className={styles.colorName}>{colorName}</span>
182
+ <span className={styles.colorValue}>{colorValue}</span>
183
+ </span>
184
+ </div>
185
+ );
186
+ return (
187
+ <div>
188
+ <DropdownMenu caption={colorTile} width="300">
189
+ <MenuHeader>Скопировать переменную</MenuHeader>
190
+ {Object.entries(getColors(colorName)).map(([lang, color]) => (
191
+ <MenuItem onClick={() => copyColor(color)} comment={lang}>
192
+ <div style={{ minWidth: 270 }}>{color}</div>
193
+ </MenuItem>
194
+ ))}
195
+ </DropdownMenu>
196
+ </div>
197
+ );
198
+ })}
199
+ </div>
200
+ );
201
+ })}
202
+ </ThemeContext.Provider>
203
+ </div>;
162
204
  ```
163
205
 
164
206
  ## Разработка
package/colors.css CHANGED
@@ -1,160 +1,160 @@
1
1
  :root {
2
- --red0Logo: #fe4c4c;
3
- --red10: #ffebeb;
4
- --red20: #ffcbcb;
5
- --red30: #ffabab;
6
- --red40: #fe8c8c;
7
- --redLightBasic50: #fe6c6c;
8
- --redBasic60: #fe4c4c;
9
- --red70: #ed3f3f;
10
- --red80: #dd3333;
11
- --red90: #cc2626;
12
- --red100: #bb1919;
13
- --red110: #ab0d0d;
14
- --redPromoAccent: #6c1d45;
15
- --orange0Logo: #fc7630;
16
- --orange10: #ffe0c3;
17
- --orange20: #ffd1a0;
18
- --orange30: #ffc17d;
19
- --orange40: #ffb259;
20
- --orangeLightBasic50: #ffa236;
21
- --orangeBasic60: #ff8227;
22
- --orange70: #ea7324;
23
- --orange80: #d46421;
24
- --orange90: #bf561e;
25
- --orange100: #a9471b;
26
- --orange110: #943817;
27
- --orangePromoAccent: #661429;
28
- --yellow0Logo: #feca42;
29
- --yellow10: #ffeec2;
30
- --yellow20: #fde1a1;
31
- --yellow30: #fdd481;
32
- --yellow40: #fcc660;
33
- --yellowLightBasic50: #fcb73e;
34
- --yellowBasic60: #fda70c;
35
- --yellow70: #f69912;
36
- --yellow80: #ef8b17;
37
- --yellow90: #e77e1b;
38
- --yellow100: #de711e;
39
- --yellow110: #d46421;
40
- --green0Logo: #26ad50;
41
- --green10: #c7f9cc;
42
- --green20: #a7eeb3;
43
- --green30: #87e39a;
44
- --green40: #67d881;
45
- --greenLightBasic50: #46cd68;
46
- --greenBasic60: #26ad50;
47
- --green70: #23a14a;
48
- --green80: #209644;
49
- --green90: #1c8a3f;
50
- --green100: #197f39;
51
- --green110: #167333;
52
- --greenGreen: #144942;
53
- --greenMint0Logo: #00bea2;
54
- --greenMint10: #c6f5ec;
55
- --greenMint20: #a8eee2;
56
- --greenMint30: #8be7d8;
57
- --greenMint40: #6ddfcd;
58
- --greenMintLightBasic50: #4fd8c3;
59
- --greenMintBasic60: #00c5a8;
60
- --greenMint70: #00b59a;
61
- --greenMint80: #00a58d;
62
- --greenMint90: #00957f;
63
- --greenMint100: #008571;
64
- --greenMint110: #007564;
65
- --greenMintPromoAccent: #013f54;
66
- --blue0Logo: #2291ff;
67
- --blue10: #cdedff;
68
- --blue20: #aeddff;
69
- --blue30: #8fcdff;
70
- --blue40: #70bdff;
71
- --blueLightBasic50: #51adff;
72
- --blueBasic60: #2291ff;
73
- --blue70: #1f87ef;
74
- --blue80: #1c7edf;
75
- --blue90: #1874cf;
76
- --blue100: #156abe;
77
- --blue110: #1261ae;
78
- --bluePromoAccent: #153177;
79
- --blueDark0Logo: #366af3;
80
- --blueDark10: #dde6ff;
81
- --blueDark20: #becfff;
82
- --blueDark30: #9fb8ff;
83
- --blueDark40: #80a1ff;
84
- --blueDarkLightBasic50: #618aff;
85
- --blueDarkBasic60: #366af3;
86
- --blueDark70: #3365e8;
87
- --blueDark80: #3060dc;
88
- --blueDark90: #2e5ad1;
89
- --blueDark100: #2b55c5;
90
- --blueDark110: #2850ba;
91
- --blueDarkPromoAccent: #272567;
92
- --purple0Logo: #b750d1;
93
- --purple10: #f7d7ff;
94
- --purple20: #eabdf6;
95
- --purple30: #dea3ec;
96
- --purple40: #d189e3;
97
- --purpleLightBasic50: #c56fda;
98
- --purpleBasic60: #b750d1;
99
- --purple70: #aa49c3;
100
- --purple80: #9e43b5;
101
- --purple90: #913ca6;
102
- --purple100: #843698;
103
- --purple110: #782f8a;
104
- --purplePromoAccent: #452a78;
105
- --mainLinkTextBlue90: #1874cf;
106
- --mainLinkShapeBlue60: #2291ff;
107
- --mainLinkBackgroundBlue10: #cdedff;
108
- --mainSuccessTextGreen90: #1c8a3f;
109
- --mainSuccessShapeGreen60: #26ad50;
110
- --mainSuccessBackgroundGreen10: #c7f9cc;
111
- --mainWarningTextYellow80: #ef8b17;
112
- --mainWarningShapeYellow50: #fcb73e;
113
- --mainWarningBackgroundYellow10: #ffeec2;
114
- --mainErrorTextRed90: #cc2626;
115
- --mainErrorShapeRed60: #fe4c4c;
116
- --mainErrorBackgroundRed10: #ffebeb;
117
- --grayscaleText: #222222;
118
- --grayscaleSecondaryText: #757575;
119
- --grayscaleDisabledText: #adadad;
120
- --grayscaleDarkBackground: #d6d6d6;
121
- --grayscaleBackground: #e6e6e6;
122
- --grayscaleLightBackground: #f0f0f0;
123
- --grayscale87Text: rgba(0, 0, 0, 0.87);
124
- --grayscale54SecondaryText: rgba(0, 0, 0, 0.54);
125
- --grayscale32DisabledText: rgba(0, 0, 0, 0.32);
126
- --grayscale16DarkBackground: rgba(0, 0, 0, 0.16);
127
- --grayscale10Background: rgba(0, 0, 0, 0.1);
128
- --grayscale6LightBackground: rgba(0, 0, 0, 0.06);
129
- --grayscale87TextWhite: rgba(255, 255, 255, 0.87);
130
- --grayscale54SecondaryWhite: rgba(255, 255, 255, 0.54);
131
- --grayscale32DisabledWhite: rgba(255, 255, 255, 0.32);
132
- --grayscale16White: rgba(255, 255, 255, 0.16);
133
- --grayscale10White: rgba(255, 255, 255, 0.1);
134
- --grayscale6White: rgba(255, 255, 255, 0.06);
135
- --grayscaleBlack000: #000000;
136
- --grayscaleWhiteFFF: #ffffff;
137
- --primaryDefault: #3d3d3d;
138
- --primaryHover: #292929;
139
- --primaryPressed: #141414;
140
- --linkStatesTextHoverBlue100: #156abe;
141
- --linkStatesTextPressedBlue110: #1260ae;
142
- --linkStatesShapeHoverBlue70: #1f87ef;
143
- --linkStatesShapePressedBlue80: #1c7edf;
144
- --successStatesTextHoverGreen100: #197f39;
145
- --successStatesTextPressedGreen110: #167333;
146
- --successStatesShapeHoverGreen70: #23a14a;
147
- --successStatesShapePressedGreen80: #209644;
148
- --warningStatesTextHoverYellow90: #e77e1b;
149
- --warningStatesTextPressedYellow100: #de711e;
150
- --warningStatesShapeHoverYellow60: #fda70c;
151
- --warningStatesShapePressedYellow70: #f69912;
152
- --errorStatesTextHoverRed100: #bb1919;
153
- --errorStatesTextPressedRed110: #ab0d0d;
154
- --errorStatesShapeHoverRed70: #ed3f3f;
155
- --errorStatesShapePressedRed80: #dd3333;
156
- --shade16Black: rgba(0, 0, 0, 0.16);
157
- --shade80White: rgba(255, 255, 255, 0.8);
158
- --elementsExceptionsHint: rgba(0, 0, 0, 0.76);
159
- --elementsExceptionsToastRed: rgba(210, 15, 0, 0.76);
2
+ --kontur-red-0-logo: #fe4c4c;
3
+ --kontur-red-10: #ffebeb;
4
+ --kontur-red-20: #ffcbcb;
5
+ --kontur-red-30: #ffabab;
6
+ --kontur-red-40: #fe8c8c;
7
+ --kontur-red-light-basic-50: #fe6c6c;
8
+ --kontur-red-basic-60: #fe4c4c;
9
+ --kontur-red-70: #ed3f3f;
10
+ --kontur-red-80: #dd3333;
11
+ --kontur-red-90: #cc2626;
12
+ --kontur-red-100: #bb1919;
13
+ --kontur-red-110: #ab0d0d;
14
+ --kontur-red-promo-accent: #6c1d45;
15
+ --kontur-orange-0-logo: #fc7630;
16
+ --kontur-orange-10: #ffe0c3;
17
+ --kontur-orange-20: #ffd1a0;
18
+ --kontur-orange-30: #ffc17d;
19
+ --kontur-orange-40: #ffb259;
20
+ --kontur-orange-light-basic-50: #ffa236;
21
+ --kontur-orange-basic-60: #ff8227;
22
+ --kontur-orange-70: #ea7324;
23
+ --kontur-orange-80: #d46421;
24
+ --kontur-orange-90: #bf561e;
25
+ --kontur-orange-100: #a9471b;
26
+ --kontur-orange-110: #943817;
27
+ --kontur-orange-promo-accent: #661429;
28
+ --kontur-yellow-0-logo: #feca42;
29
+ --kontur-yellow-10: #ffeec2;
30
+ --kontur-yellow-20: #fde1a1;
31
+ --kontur-yellow-30: #fdd481;
32
+ --kontur-yellow-40: #fcc660;
33
+ --kontur-yellow-light-basic-50: #fcb73e;
34
+ --kontur-yellow-basic-60: #fda70c;
35
+ --kontur-yellow-70: #f69912;
36
+ --kontur-yellow-80: #ef8b17;
37
+ --kontur-yellow-90: #e77e1b;
38
+ --kontur-yellow-100: #de711e;
39
+ --kontur-yellow-110: #d46421;
40
+ --kontur-green-0-logo: #26ad50;
41
+ --kontur-green-10: #c7f9cc;
42
+ --kontur-green-20: #a7eeb3;
43
+ --kontur-green-30: #87e39a;
44
+ --kontur-green-40: #67d881;
45
+ --kontur-green-light-basic-50: #46cd68;
46
+ --kontur-green-basic-60: #26ad50;
47
+ --kontur-green-70: #23a14a;
48
+ --kontur-green-80: #209644;
49
+ --kontur-green-90: #1c8a3f;
50
+ --kontur-green-100: #197f39;
51
+ --kontur-green-110: #167333;
52
+ --kontur-green-green: #144942;
53
+ --kontur-green-mint-0-logo: #00bea2;
54
+ --kontur-green-mint-10: #c6f5ec;
55
+ --kontur-green-mint-20: #a8eee2;
56
+ --kontur-green-mint-30: #8be7d8;
57
+ --kontur-green-mint-40: #6ddfcd;
58
+ --kontur-green-mint-light-basic-50: #4fd8c3;
59
+ --kontur-green-mint-basic-60: #00c5a8;
60
+ --kontur-green-mint-70: #00b59a;
61
+ --kontur-green-mint-80: #00a58d;
62
+ --kontur-green-mint-90: #00957f;
63
+ --kontur-green-mint-100: #008571;
64
+ --kontur-green-mint-110: #007564;
65
+ --kontur-green-mint-promo-accent: #013f54;
66
+ --kontur-blue-0-logo: #2291ff;
67
+ --kontur-blue-10: #cdedff;
68
+ --kontur-blue-20: #aeddff;
69
+ --kontur-blue-30: #8fcdff;
70
+ --kontur-blue-40: #70bdff;
71
+ --kontur-blue-light-basic-50: #51adff;
72
+ --kontur-blue-basic-60: #2291ff;
73
+ --kontur-blue-70: #1f87ef;
74
+ --kontur-blue-80: #1c7edf;
75
+ --kontur-blue-90: #1874cf;
76
+ --kontur-blue-100: #156abe;
77
+ --kontur-blue-110: #1261ae;
78
+ --kontur-blue-promo-accent: #153177;
79
+ --kontur-blue-dark-0-logo: #366af3;
80
+ --kontur-blue-dark-10: #dde6ff;
81
+ --kontur-blue-dark-20: #becfff;
82
+ --kontur-blue-dark-30: #9fb8ff;
83
+ --kontur-blue-dark-40: #80a1ff;
84
+ --kontur-blue-dark-light-basic-50: #618aff;
85
+ --kontur-blue-dark-basic-60: #366af3;
86
+ --kontur-blue-dark-70: #3365e8;
87
+ --kontur-blue-dark-80: #3060dc;
88
+ --kontur-blue-dark-90: #2e5ad1;
89
+ --kontur-blue-dark-100: #2b55c5;
90
+ --kontur-blue-dark-110: #2850ba;
91
+ --kontur-blue-dark-promo-accent: #272567;
92
+ --kontur-purple-0-logo: #b750d1;
93
+ --kontur-purple-10: #f7d7ff;
94
+ --kontur-purple-20: #eabdf6;
95
+ --kontur-purple-30: #dea3ec;
96
+ --kontur-purple-40: #d189e3;
97
+ --kontur-purple-light-basic-50: #c56fda;
98
+ --kontur-purple-basic-60: #b750d1;
99
+ --kontur-purple-70: #aa49c3;
100
+ --kontur-purple-80: #9e43b5;
101
+ --kontur-purple-90: #913ca6;
102
+ --kontur-purple-100: #843698;
103
+ --kontur-purple-110: #782f8a;
104
+ --kontur-purple-promo-accent: #452a78;
105
+ --kontur-main-link-text-blue-90: #1874cf;
106
+ --kontur-main-link-shape-blue-60: #2291ff;
107
+ --kontur-main-link-background-blue-10: #cdedff;
108
+ --kontur-main-success-text-green-90: #1c8a3f;
109
+ --kontur-main-success-shape-green-60: #26ad50;
110
+ --kontur-main-success-background-green-10: #c7f9cc;
111
+ --kontur-main-warning-text-yellow-80: #ef8b17;
112
+ --kontur-main-warning-shape-yellow-50: #fcb73e;
113
+ --kontur-main-warning-background-yellow-10: #ffeec2;
114
+ --kontur-main-error-text-red-90: #cc2626;
115
+ --kontur-main-error-shape-red-60: #fe4c4c;
116
+ --kontur-main-error-background-red-10: #ffebeb;
117
+ --kontur-grayscale-text: #222222;
118
+ --kontur-grayscale-secondary-text: #757575;
119
+ --kontur-grayscale-disabled-text: #adadad;
120
+ --kontur-grayscale-dark-background: #d6d6d6;
121
+ --kontur-grayscale-background: #e6e6e6;
122
+ --kontur-grayscale-light-background: #f0f0f0;
123
+ --kontur-grayscale-87-text: rgba(0, 0, 0, 0.87);
124
+ --kontur-grayscale-54-secondary-text: rgba(0, 0, 0, 0.54);
125
+ --kontur-grayscale-32-disabled-text: rgba(0, 0, 0, 0.32);
126
+ --kontur-grayscale-16-dark-background: rgba(0, 0, 0, 0.16);
127
+ --kontur-grayscale-10-background: rgba(0, 0, 0, 0.1);
128
+ --kontur-grayscale-6-light-background: rgba(0, 0, 0, 0.06);
129
+ --kontur-grayscale-87-text-white: rgba(255, 255, 255, 0.87);
130
+ --kontur-grayscale-54-secondary-white: rgba(255, 255, 255, 0.54);
131
+ --kontur-grayscale-32-disabled-white: rgba(255, 255, 255, 0.32);
132
+ --kontur-grayscale-16-white: rgba(255, 255, 255, 0.16);
133
+ --kontur-grayscale-10-white: rgba(255, 255, 255, 0.1);
134
+ --kontur-grayscale-6-white: rgba(255, 255, 255, 0.06);
135
+ --kontur-grayscale-black-000: #000000;
136
+ --kontur-grayscale-white-fff: #ffffff;
137
+ --kontur-primary-default: #3d3d3d;
138
+ --kontur-primary-hover: #292929;
139
+ --kontur-primary-pressed: #141414;
140
+ --kontur-link-states-text-hover-blue-100: #156abe;
141
+ --kontur-link-states-text-pressed-blue-110: #1260ae;
142
+ --kontur-link-states-shape-hover-blue-70: #1f87ef;
143
+ --kontur-link-states-shape-pressed-blue-80: #1c7edf;
144
+ --kontur-success-states-text-hover-green-100: #197f39;
145
+ --kontur-success-states-text-pressed-green-110: #167333;
146
+ --kontur-success-states-shape-hover-green-70: #23a14a;
147
+ --kontur-success-states-shape-pressed-green-80: #209644;
148
+ --kontur-warning-states-text-hover-yellow-90: #e77e1b;
149
+ --kontur-warning-states-text-pressed-yellow-100: #de711e;
150
+ --kontur-warning-states-shape-hover-yellow-60: #fda70c;
151
+ --kontur-warning-states-shape-pressed-yellow-70: #f69912;
152
+ --kontur-error-states-text-hover-red-100: #bb1919;
153
+ --kontur-error-states-text-pressed-red-110: #ab0d0d;
154
+ --kontur-error-states-shape-hover-red-70: #ed3f3f;
155
+ --kontur-error-states-shape-pressed-red-80: #dd3333;
156
+ --kontur-shade-16-black: rgba(0, 0, 0, 0.16);
157
+ --kontur-shade-80-white: rgba(255, 255, 255, 0.8);
158
+ --kontur-elements-exceptions-hint: rgba(0, 0, 0, 0.76);
159
+ --kontur-elements-exceptions-toast-red: rgba(210, 15, 0, 0.76);
160
160
  }