@skbkontur/colors 0.5.0 → 1.0.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 (6) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +171 -76
  3. package/colors.css +158 -158
  4. package/colors.less +158 -158
  5. package/colors.scss +158 -0
  6. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,32 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.0.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.5.1...@skbkontur/colors@1.0.0) (2024-08-08)
7
+
8
+
9
+ ### Features
10
+
11
+ * **colors:** add scss and change naming ([ef3345f](https://git.skbkontur.ru/ui/ui-parking/commits/ef3345f5f54be830f284c9a2a53991e117b8ba0b))
12
+ * **colors:** add scss and change naming ([78b32b7](https://git.skbkontur.ru/ui/ui-parking/commits/78b32b7a22d260baf166195e7eb1adeea5b2c9f7))
13
+
14
+
15
+ ### BREAKING CHANGES
16
+
17
+ * **colors:** change naming from camelCase to dash-case
18
+ * **colors:** change naming from camelCase to dash-case
19
+
20
+
21
+
22
+
23
+
24
+ ## [0.5.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.5.0...@skbkontur/colors@0.5.1) (2024-08-08)
25
+
26
+ **Note:** Version bump only for package @skbkontur/colors
27
+
28
+
29
+
30
+
31
+
6
32
  # [0.5.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.4...@skbkontur/colors@0.5.0) (2024-06-25)
7
33
 
8
34
 
package/README.md CHANGED
@@ -1,115 +1,210 @@
1
1
  # Библиотека цветов
2
2
 
3
- В этой библиотеке собраны основные цвета, используемые в интерфейсах Контура. Вся палитра собрана [тут](https://www.figma.com/file/XuiIin3JAOEcHHPihtthOJ/%E2%9A%A1%EF%B8%8F-Kontur-Colors?node-id=0%3A1&t=pL38Ju5ZOo3VC6vt-0).
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
- Установить библиотеку можно командой:
5
+ ## Установка
6
6
 
7
7
  ```bash
8
8
  npm i @skbkontur/colors
9
9
  ```
10
10
 
11
- Сейчас в библиотеке представлены расширения .less, .css, .ts (по запросу могут быть новые расширения)
11
+ ## Использование
12
12
 
13
- Названия цветов - это camelCase варианция названия из фигмы.
14
- Например, `Blue Dark / 30` из фигмы в библиотеке можно найти как:
15
- - `@blueDark30` для colors.less
16
- - `--blueDark30` для colors.css
17
- - `KonturColors.blueDark30` для colors.ts
13
+ - JS/TS токены содержатся в объекте `KonturColors.colorName`
14
+ - В CSS в виде глобальных переменных`--kontur-color-name` в `:root { ... }`
15
+ - В препроцессорах Less `@color-name` и SCSS `$color-name`
18
16
 
19
- Пример использования colors.less
17
+ #### JS/TS
20
18
 
21
- ```less
22
- // styles.less
19
+ ```js static
20
+ import { KonturColors } from '@skbkontur/colors';
23
21
 
24
- @import '@skbkontur/colors/colors.less';
22
+ const text = `<div style="color: ${KonturColors.blueDark90}">Цвет blueDark90</div>`;
23
+ ```
25
24
 
26
- .class {
27
- color: @blue10;
28
- }
25
+ #### React
26
+
27
+ ```jsx static
28
+ import { KonturColors } from '@skbkontur/colors';
29
+
30
+ const Component = () => {
31
+ return <div style={{ color: KonturColors.blueDark90 }}>Цвет blueDark90</div>;
32
+ };
29
33
  ```
30
34
 
31
- Пример использования colors.css
35
+ #### CSS
32
36
 
33
37
  ```css
34
- // styles.css
35
-
36
38
  @import '@skbkontur/colors/colors.css';
37
39
 
38
40
  .class {
39
- color: var(--blue10);
41
+ color: var(--blue-dark-90);
40
42
  }
41
43
  ```
42
44
 
43
- Пример использования colors.ts
44
-
45
- ```ts
46
- // styles.ts
45
+ #### SCSS
47
46
 
48
- import { KonturColors } from '@skbkontur/colors';
47
+ ```scss
48
+ @import '@skbkontur/colors/colors.scss';
49
49
 
50
- someRenderMethod = () => {
51
- return (
52
- <div style={{color: KonturColors.blue10}}>some content</div>
53
- )
50
+ .class {
51
+ color: $blue-dark-90;
54
52
  }
55
53
  ```
56
54
 
55
+ #### Less
57
56
 
58
- ## Как работает
59
- Все цвета описаны в файле `src/colors.ts`.
60
- В файле `generate.ts` живёт сам код генерации файлов, а запускается генерация командой `npm run build`
57
+ ```less
58
+ @import '@skbkontur/colors/colors.less';
59
+
60
+ .class {
61
+ color: @blue-dark-90;
62
+ }
63
+ ```
61
64
 
62
65
  ## Палитра
63
66
 
64
- ```
67
+ ```jsx harmony
65
68
  import { KonturColors } from '@skbkontur/colors';
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
+
79
+ import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
66
80
 
67
81
  const styles = {
68
- storyWrapper: {
69
- display: 'flex',
70
- flexWrap: 'wrap',
71
- justifyContent: 'space-between',
72
- fontSize: '12px',
73
- },
74
- colorBlock: {
75
- width: '22%',
76
- alignItems: 'center',
77
- margin: '10px',
78
- },
79
- colorTile: {
80
- width: '100%',
81
- height: '30px',
82
- marginRight: '10px',
83
- border: '1px #000 solid',
84
- },
85
- wordBreak: {
86
- wordBreak: 'break-word',
87
- },
88
- title: {
89
- display: 'flex',
90
- justifyContent: 'space-between',
91
- },
82
+ colors: css`
83
+ display: grid;
84
+ grid-template-columns: repeat(3, minmax(0, 1fr));
85
+ gap: 24px;
86
+ `,
87
+ colorGroup: css`
88
+ break-inside: avoid;
89
+ margin-bottom: 64px;
90
+ `,
91
+ colorBlock: css`
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 10px;
95
+ width: 100%;
96
+ border: none;
97
+ text-align: left;
98
+ background: none;
99
+ cursor: pointer;
100
+ padding: 8px;
101
+ border-radius: 8px;
102
+ transition: 0.1s ease;
103
+
104
+ &:hover {
105
+ background: rgba(0, 0, 0, 0.06);
106
+ }
107
+
108
+ &:active {
109
+ background: rgba(0, 0, 0, 0.1);
110
+ }
111
+ `,
112
+ colorTile: css`
113
+ display: block;
114
+ height: 32px;
115
+ width: 32px;
116
+ border: 1px solid rgba(0, 0, 0, 0.08);
117
+ border-radius: 8px;
118
+ flex-shrink: 0;
119
+ `,
120
+ groupTitle: css`
121
+ display: block;
122
+ font-size: 20px;
123
+ font-weight: 600;
124
+ margin: 0 8px 12px;
125
+ `,
126
+ title: css`
127
+ display: block;
128
+ padding: 1px 0 0 8px;
129
+ `,
130
+ colorName: css`
131
+ display: block;
132
+ font-size: 14px;
133
+ line-height: 1.2;
134
+ `,
135
+ colorValue: css`
136
+ display: block;
137
+ fontSize: 12px;
138
+ color: #8b8b8b;
139
+ }`,
92
140
  };
93
141
 
94
- <div style={styles.storyWrapper}>
95
- {Object.keys(KonturColors).map((colorName) => {
96
- const colorValue = KonturColors[colorName];
97
- return (
98
- <>
99
- <div style={styles.colorBlock}>
100
- <div
101
- style={{
102
- ...styles.colorTile,
103
- backgroundColor: colorValue,
104
- }}
105
- />
106
- <div style={styles.title}>
107
- <div style={styles.wordBreak}>{colorName}</div>
108
- <div style={styles.wordBreak}>{colorValue}</div>
109
- </div>
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
+ }, {});
149
+
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');
155
+
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
+ };
168
+
169
+ <div className={styles.colors}>
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
+ })}
110
199
  </div>
111
- </>
112
- );
113
- })}
114
- </div>
200
+ );
201
+ })}
202
+ </ThemeContext.Provider>
203
+ </div>;
115
204
  ```
205
+
206
+ ## Разработка
207
+
208
+ - Токены выгружаются в формате `camelCase`
209
+ - `src/colors.ts` — файл с токенами
210
+ - `npm run build` — сборка пакета в `/dist`
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
  }
package/colors.less CHANGED
@@ -1,158 +1,158 @@
1
- @red0Logo: #fe4c4c;
2
- @red10: #ffebeb;
3
- @red20: #ffcbcb;
4
- @red30: #ffabab;
5
- @red40: #fe8c8c;
6
- @redLightBasic50: #fe6c6c;
7
- @redBasic60: #fe4c4c;
8
- @red70: #ed3f3f;
9
- @red80: #dd3333;
10
- @red90: #cc2626;
11
- @red100: #bb1919;
12
- @red110: #ab0d0d;
13
- @redPromoAccent: #6c1d45;
14
- @orange0Logo: #fc7630;
15
- @orange10: #ffe0c3;
16
- @orange20: #ffd1a0;
17
- @orange30: #ffc17d;
18
- @orange40: #ffb259;
19
- @orangeLightBasic50: #ffa236;
20
- @orangeBasic60: #ff8227;
21
- @orange70: #ea7324;
22
- @orange80: #d46421;
23
- @orange90: #bf561e;
24
- @orange100: #a9471b;
25
- @orange110: #943817;
26
- @orangePromoAccent: #661429;
27
- @yellow0Logo: #feca42;
28
- @yellow10: #ffeec2;
29
- @yellow20: #fde1a1;
30
- @yellow30: #fdd481;
31
- @yellow40: #fcc660;
32
- @yellowLightBasic50: #fcb73e;
33
- @yellowBasic60: #fda70c;
34
- @yellow70: #f69912;
35
- @yellow80: #ef8b17;
36
- @yellow90: #e77e1b;
37
- @yellow100: #de711e;
38
- @yellow110: #d46421;
39
- @green0Logo: #26ad50;
40
- @green10: #c7f9cc;
41
- @green20: #a7eeb3;
42
- @green30: #87e39a;
43
- @green40: #67d881;
44
- @greenLightBasic50: #46cd68;
45
- @greenBasic60: #26ad50;
46
- @green70: #23a14a;
47
- @green80: #209644;
48
- @green90: #1c8a3f;
49
- @green100: #197f39;
50
- @green110: #167333;
51
- @greenGreen: #144942;
52
- @greenMint0Logo: #00bea2;
53
- @greenMint10: #c6f5ec;
54
- @greenMint20: #a8eee2;
55
- @greenMint30: #8be7d8;
56
- @greenMint40: #6ddfcd;
57
- @greenMintLightBasic50: #4fd8c3;
58
- @greenMintBasic60: #00c5a8;
59
- @greenMint70: #00b59a;
60
- @greenMint80: #00a58d;
61
- @greenMint90: #00957f;
62
- @greenMint100: #008571;
63
- @greenMint110: #007564;
64
- @greenMintPromoAccent: #013f54;
65
- @blue0Logo: #2291ff;
66
- @blue10: #cdedff;
67
- @blue20: #aeddff;
68
- @blue30: #8fcdff;
69
- @blue40: #70bdff;
70
- @blueLightBasic50: #51adff;
71
- @blueBasic60: #2291ff;
72
- @blue70: #1f87ef;
73
- @blue80: #1c7edf;
74
- @blue90: #1874cf;
75
- @blue100: #156abe;
76
- @blue110: #1261ae;
77
- @bluePromoAccent: #153177;
78
- @blueDark0Logo: #366af3;
79
- @blueDark10: #dde6ff;
80
- @blueDark20: #becfff;
81
- @blueDark30: #9fb8ff;
82
- @blueDark40: #80a1ff;
83
- @blueDarkLightBasic50: #618aff;
84
- @blueDarkBasic60: #366af3;
85
- @blueDark70: #3365e8;
86
- @blueDark80: #3060dc;
87
- @blueDark90: #2e5ad1;
88
- @blueDark100: #2b55c5;
89
- @blueDark110: #2850ba;
90
- @blueDarkPromoAccent: #272567;
91
- @purple0Logo: #b750d1;
92
- @purple10: #f7d7ff;
93
- @purple20: #eabdf6;
94
- @purple30: #dea3ec;
95
- @purple40: #d189e3;
96
- @purpleLightBasic50: #c56fda;
97
- @purpleBasic60: #b750d1;
98
- @purple70: #aa49c3;
99
- @purple80: #9e43b5;
100
- @purple90: #913ca6;
101
- @purple100: #843698;
102
- @purple110: #782f8a;
103
- @purplePromoAccent: #452a78;
104
- @mainLinkTextBlue90: #1874cf;
105
- @mainLinkShapeBlue60: #2291ff;
106
- @mainLinkBackgroundBlue10: #cdedff;
107
- @mainSuccessTextGreen90: #1c8a3f;
108
- @mainSuccessShapeGreen60: #26ad50;
109
- @mainSuccessBackgroundGreen10: #c7f9cc;
110
- @mainWarningTextYellow80: #ef8b17;
111
- @mainWarningShapeYellow50: #fcb73e;
112
- @mainWarningBackgroundYellow10: #ffeec2;
113
- @mainErrorTextRed90: #cc2626;
114
- @mainErrorShapeRed60: #fe4c4c;
115
- @mainErrorBackgroundRed10: #ffebeb;
116
- @grayscaleText: #222222;
117
- @grayscaleSecondaryText: #757575;
118
- @grayscaleDisabledText: #adadad;
119
- @grayscaleDarkBackground: #d6d6d6;
120
- @grayscaleBackground: #e6e6e6;
121
- @grayscaleLightBackground: #f0f0f0;
122
- @grayscale87Text: rgba(0, 0, 0, 0.87);
123
- @grayscale54SecondaryText: rgba(0, 0, 0, 0.54);
124
- @grayscale32DisabledText: rgba(0, 0, 0, 0.32);
125
- @grayscale16DarkBackground: rgba(0, 0, 0, 0.16);
126
- @grayscale10Background: rgba(0, 0, 0, 0.1);
127
- @grayscale6LightBackground: rgba(0, 0, 0, 0.06);
128
- @grayscale87TextWhite: rgba(255, 255, 255, 0.87);
129
- @grayscale54SecondaryWhite: rgba(255, 255, 255, 0.54);
130
- @grayscale32DisabledWhite: rgba(255, 255, 255, 0.32);
131
- @grayscale16White: rgba(255, 255, 255, 0.16);
132
- @grayscale10White: rgba(255, 255, 255, 0.1);
133
- @grayscale6White: rgba(255, 255, 255, 0.06);
134
- @grayscaleBlack000: #000000;
135
- @grayscaleWhiteFFF: #ffffff;
136
- @primaryDefault: #3d3d3d;
137
- @primaryHover: #292929;
138
- @primaryPressed: #141414;
139
- @linkStatesTextHoverBlue100: #156abe;
140
- @linkStatesTextPressedBlue110: #1260ae;
141
- @linkStatesShapeHoverBlue70: #1f87ef;
142
- @linkStatesShapePressedBlue80: #1c7edf;
143
- @successStatesTextHoverGreen100: #197f39;
144
- @successStatesTextPressedGreen110: #167333;
145
- @successStatesShapeHoverGreen70: #23a14a;
146
- @successStatesShapePressedGreen80: #209644;
147
- @warningStatesTextHoverYellow90: #e77e1b;
148
- @warningStatesTextPressedYellow100: #de711e;
149
- @warningStatesShapeHoverYellow60: #fda70c;
150
- @warningStatesShapePressedYellow70: #f69912;
151
- @errorStatesTextHoverRed100: #bb1919;
152
- @errorStatesTextPressedRed110: #ab0d0d;
153
- @errorStatesShapeHoverRed70: #ed3f3f;
154
- @errorStatesShapePressedRed80: #dd3333;
155
- @shade16Black: rgba(0, 0, 0, 0.16);
156
- @shade80White: rgba(255, 255, 255, 0.8);
157
- @elementsExceptionsHint: rgba(0, 0, 0, 0.76);
158
- @elementsExceptionsToastRed: rgba(210, 15, 0, 0.76);
1
+ @red-0-logo: #fe4c4c;
2
+ @red-10: #ffebeb;
3
+ @red-20: #ffcbcb;
4
+ @red-30: #ffabab;
5
+ @red-40: #fe8c8c;
6
+ @red-light-basic-50: #fe6c6c;
7
+ @red-basic-60: #fe4c4c;
8
+ @red-70: #ed3f3f;
9
+ @red-80: #dd3333;
10
+ @red-90: #cc2626;
11
+ @red-100: #bb1919;
12
+ @red-110: #ab0d0d;
13
+ @red-promo-accent: #6c1d45;
14
+ @orange-0-logo: #fc7630;
15
+ @orange-10: #ffe0c3;
16
+ @orange-20: #ffd1a0;
17
+ @orange-30: #ffc17d;
18
+ @orange-40: #ffb259;
19
+ @orange-light-basic-50: #ffa236;
20
+ @orange-basic-60: #ff8227;
21
+ @orange-70: #ea7324;
22
+ @orange-80: #d46421;
23
+ @orange-90: #bf561e;
24
+ @orange-100: #a9471b;
25
+ @orange-110: #943817;
26
+ @orange-promo-accent: #661429;
27
+ @yellow-0-logo: #feca42;
28
+ @yellow-10: #ffeec2;
29
+ @yellow-20: #fde1a1;
30
+ @yellow-30: #fdd481;
31
+ @yellow-40: #fcc660;
32
+ @yellow-light-basic-50: #fcb73e;
33
+ @yellow-basic-60: #fda70c;
34
+ @yellow-70: #f69912;
35
+ @yellow-80: #ef8b17;
36
+ @yellow-90: #e77e1b;
37
+ @yellow-100: #de711e;
38
+ @yellow-110: #d46421;
39
+ @green-0-logo: #26ad50;
40
+ @green-10: #c7f9cc;
41
+ @green-20: #a7eeb3;
42
+ @green-30: #87e39a;
43
+ @green-40: #67d881;
44
+ @green-light-basic-50: #46cd68;
45
+ @green-basic-60: #26ad50;
46
+ @green-70: #23a14a;
47
+ @green-80: #209644;
48
+ @green-90: #1c8a3f;
49
+ @green-100: #197f39;
50
+ @green-110: #167333;
51
+ @green-green: #144942;
52
+ @green-mint-0-logo: #00bea2;
53
+ @green-mint-10: #c6f5ec;
54
+ @green-mint-20: #a8eee2;
55
+ @green-mint-30: #8be7d8;
56
+ @green-mint-40: #6ddfcd;
57
+ @green-mint-light-basic-50: #4fd8c3;
58
+ @green-mint-basic-60: #00c5a8;
59
+ @green-mint-70: #00b59a;
60
+ @green-mint-80: #00a58d;
61
+ @green-mint-90: #00957f;
62
+ @green-mint-100: #008571;
63
+ @green-mint-110: #007564;
64
+ @green-mint-promo-accent: #013f54;
65
+ @blue-0-logo: #2291ff;
66
+ @blue-10: #cdedff;
67
+ @blue-20: #aeddff;
68
+ @blue-30: #8fcdff;
69
+ @blue-40: #70bdff;
70
+ @blue-light-basic-50: #51adff;
71
+ @blue-basic-60: #2291ff;
72
+ @blue-70: #1f87ef;
73
+ @blue-80: #1c7edf;
74
+ @blue-90: #1874cf;
75
+ @blue-100: #156abe;
76
+ @blue-110: #1261ae;
77
+ @blue-promo-accent: #153177;
78
+ @blue-dark-0-logo: #366af3;
79
+ @blue-dark-10: #dde6ff;
80
+ @blue-dark-20: #becfff;
81
+ @blue-dark-30: #9fb8ff;
82
+ @blue-dark-40: #80a1ff;
83
+ @blue-dark-light-basic-50: #618aff;
84
+ @blue-dark-basic-60: #366af3;
85
+ @blue-dark-70: #3365e8;
86
+ @blue-dark-80: #3060dc;
87
+ @blue-dark-90: #2e5ad1;
88
+ @blue-dark-100: #2b55c5;
89
+ @blue-dark-110: #2850ba;
90
+ @blue-dark-promo-accent: #272567;
91
+ @purple-0-logo: #b750d1;
92
+ @purple-10: #f7d7ff;
93
+ @purple-20: #eabdf6;
94
+ @purple-30: #dea3ec;
95
+ @purple-40: #d189e3;
96
+ @purple-light-basic-50: #c56fda;
97
+ @purple-basic-60: #b750d1;
98
+ @purple-70: #aa49c3;
99
+ @purple-80: #9e43b5;
100
+ @purple-90: #913ca6;
101
+ @purple-100: #843698;
102
+ @purple-110: #782f8a;
103
+ @purple-promo-accent: #452a78;
104
+ @main-link-text-blue-90: #1874cf;
105
+ @main-link-shape-blue-60: #2291ff;
106
+ @main-link-background-blue-10: #cdedff;
107
+ @main-success-text-green-90: #1c8a3f;
108
+ @main-success-shape-green-60: #26ad50;
109
+ @main-success-background-green-10: #c7f9cc;
110
+ @main-warning-text-yellow-80: #ef8b17;
111
+ @main-warning-shape-yellow-50: #fcb73e;
112
+ @main-warning-background-yellow-10: #ffeec2;
113
+ @main-error-text-red-90: #cc2626;
114
+ @main-error-shape-red-60: #fe4c4c;
115
+ @main-error-background-red-10: #ffebeb;
116
+ @grayscale-text: #222222;
117
+ @grayscale-secondary-text: #757575;
118
+ @grayscale-disabled-text: #adadad;
119
+ @grayscale-dark-background: #d6d6d6;
120
+ @grayscale-background: #e6e6e6;
121
+ @grayscale-light-background: #f0f0f0;
122
+ @grayscale-87-text: rgba(0, 0, 0, 0.87);
123
+ @grayscale-54-secondary-text: rgba(0, 0, 0, 0.54);
124
+ @grayscale-32-disabled-text: rgba(0, 0, 0, 0.32);
125
+ @grayscale-16-dark-background: rgba(0, 0, 0, 0.16);
126
+ @grayscale-10-background: rgba(0, 0, 0, 0.1);
127
+ @grayscale-6-light-background: rgba(0, 0, 0, 0.06);
128
+ @grayscale-87-text-white: rgba(255, 255, 255, 0.87);
129
+ @grayscale-54-secondary-white: rgba(255, 255, 255, 0.54);
130
+ @grayscale-32-disabled-white: rgba(255, 255, 255, 0.32);
131
+ @grayscale-16-white: rgba(255, 255, 255, 0.16);
132
+ @grayscale-10-white: rgba(255, 255, 255, 0.1);
133
+ @grayscale-6-white: rgba(255, 255, 255, 0.06);
134
+ @grayscale-black-000: #000000;
135
+ @grayscale-white-fff: #ffffff;
136
+ @primary-default: #3d3d3d;
137
+ @primary-hover: #292929;
138
+ @primary-pressed: #141414;
139
+ @link-states-text-hover-blue-100: #156abe;
140
+ @link-states-text-pressed-blue-110: #1260ae;
141
+ @link-states-shape-hover-blue-70: #1f87ef;
142
+ @link-states-shape-pressed-blue-80: #1c7edf;
143
+ @success-states-text-hover-green-100: #197f39;
144
+ @success-states-text-pressed-green-110: #167333;
145
+ @success-states-shape-hover-green-70: #23a14a;
146
+ @success-states-shape-pressed-green-80: #209644;
147
+ @warning-states-text-hover-yellow-90: #e77e1b;
148
+ @warning-states-text-pressed-yellow-100: #de711e;
149
+ @warning-states-shape-hover-yellow-60: #fda70c;
150
+ @warning-states-shape-pressed-yellow-70: #f69912;
151
+ @error-states-text-hover-red-100: #bb1919;
152
+ @error-states-text-pressed-red-110: #ab0d0d;
153
+ @error-states-shape-hover-red-70: #ed3f3f;
154
+ @error-states-shape-pressed-red-80: #dd3333;
155
+ @shade-16-black: rgba(0, 0, 0, 0.16);
156
+ @shade-80-white: rgba(255, 255, 255, 0.8);
157
+ @elements-exceptions-hint: rgba(0, 0, 0, 0.76);
158
+ @elements-exceptions-toast-red: rgba(210, 15, 0, 0.76);
package/colors.scss ADDED
@@ -0,0 +1,158 @@
1
+ $red-0-logo: #fe4c4c;
2
+ $red-10: #ffebeb;
3
+ $red-20: #ffcbcb;
4
+ $red-30: #ffabab;
5
+ $red-40: #fe8c8c;
6
+ $red-light-basic-50: #fe6c6c;
7
+ $red-basic-60: #fe4c4c;
8
+ $red-70: #ed3f3f;
9
+ $red-80: #dd3333;
10
+ $red-90: #cc2626;
11
+ $red-100: #bb1919;
12
+ $red-110: #ab0d0d;
13
+ $red-promo-accent: #6c1d45;
14
+ $orange-0-logo: #fc7630;
15
+ $orange-10: #ffe0c3;
16
+ $orange-20: #ffd1a0;
17
+ $orange-30: #ffc17d;
18
+ $orange-40: #ffb259;
19
+ $orange-light-basic-50: #ffa236;
20
+ $orange-basic-60: #ff8227;
21
+ $orange-70: #ea7324;
22
+ $orange-80: #d46421;
23
+ $orange-90: #bf561e;
24
+ $orange-100: #a9471b;
25
+ $orange-110: #943817;
26
+ $orange-promo-accent: #661429;
27
+ $yellow-0-logo: #feca42;
28
+ $yellow-10: #ffeec2;
29
+ $yellow-20: #fde1a1;
30
+ $yellow-30: #fdd481;
31
+ $yellow-40: #fcc660;
32
+ $yellow-light-basic-50: #fcb73e;
33
+ $yellow-basic-60: #fda70c;
34
+ $yellow-70: #f69912;
35
+ $yellow-80: #ef8b17;
36
+ $yellow-90: #e77e1b;
37
+ $yellow-100: #de711e;
38
+ $yellow-110: #d46421;
39
+ $green-0-logo: #26ad50;
40
+ $green-10: #c7f9cc;
41
+ $green-20: #a7eeb3;
42
+ $green-30: #87e39a;
43
+ $green-40: #67d881;
44
+ $green-light-basic-50: #46cd68;
45
+ $green-basic-60: #26ad50;
46
+ $green-70: #23a14a;
47
+ $green-80: #209644;
48
+ $green-90: #1c8a3f;
49
+ $green-100: #197f39;
50
+ $green-110: #167333;
51
+ $green-green: #144942;
52
+ $green-mint-0-logo: #00bea2;
53
+ $green-mint-10: #c6f5ec;
54
+ $green-mint-20: #a8eee2;
55
+ $green-mint-30: #8be7d8;
56
+ $green-mint-40: #6ddfcd;
57
+ $green-mint-light-basic-50: #4fd8c3;
58
+ $green-mint-basic-60: #00c5a8;
59
+ $green-mint-70: #00b59a;
60
+ $green-mint-80: #00a58d;
61
+ $green-mint-90: #00957f;
62
+ $green-mint-100: #008571;
63
+ $green-mint-110: #007564;
64
+ $green-mint-promo-accent: #013f54;
65
+ $blue-0-logo: #2291ff;
66
+ $blue-10: #cdedff;
67
+ $blue-20: #aeddff;
68
+ $blue-30: #8fcdff;
69
+ $blue-40: #70bdff;
70
+ $blue-light-basic-50: #51adff;
71
+ $blue-basic-60: #2291ff;
72
+ $blue-70: #1f87ef;
73
+ $blue-80: #1c7edf;
74
+ $blue-90: #1874cf;
75
+ $blue-100: #156abe;
76
+ $blue-110: #1261ae;
77
+ $blue-promo-accent: #153177;
78
+ $blue-dark-0-logo: #366af3;
79
+ $blue-dark-10: #dde6ff;
80
+ $blue-dark-20: #becfff;
81
+ $blue-dark-30: #9fb8ff;
82
+ $blue-dark-40: #80a1ff;
83
+ $blue-dark-light-basic-50: #618aff;
84
+ $blue-dark-basic-60: #366af3;
85
+ $blue-dark-70: #3365e8;
86
+ $blue-dark-80: #3060dc;
87
+ $blue-dark-90: #2e5ad1;
88
+ $blue-dark-100: #2b55c5;
89
+ $blue-dark-110: #2850ba;
90
+ $blue-dark-promo-accent: #272567;
91
+ $purple-0-logo: #b750d1;
92
+ $purple-10: #f7d7ff;
93
+ $purple-20: #eabdf6;
94
+ $purple-30: #dea3ec;
95
+ $purple-40: #d189e3;
96
+ $purple-light-basic-50: #c56fda;
97
+ $purple-basic-60: #b750d1;
98
+ $purple-70: #aa49c3;
99
+ $purple-80: #9e43b5;
100
+ $purple-90: #913ca6;
101
+ $purple-100: #843698;
102
+ $purple-110: #782f8a;
103
+ $purple-promo-accent: #452a78;
104
+ $main-link-text-blue-90: #1874cf;
105
+ $main-link-shape-blue-60: #2291ff;
106
+ $main-link-background-blue-10: #cdedff;
107
+ $main-success-text-green-90: #1c8a3f;
108
+ $main-success-shape-green-60: #26ad50;
109
+ $main-success-background-green-10: #c7f9cc;
110
+ $main-warning-text-yellow-80: #ef8b17;
111
+ $main-warning-shape-yellow-50: #fcb73e;
112
+ $main-warning-background-yellow-10: #ffeec2;
113
+ $main-error-text-red-90: #cc2626;
114
+ $main-error-shape-red-60: #fe4c4c;
115
+ $main-error-background-red-10: #ffebeb;
116
+ $grayscale-text: #222222;
117
+ $grayscale-secondary-text: #757575;
118
+ $grayscale-disabled-text: #adadad;
119
+ $grayscale-dark-background: #d6d6d6;
120
+ $grayscale-background: #e6e6e6;
121
+ $grayscale-light-background: #f0f0f0;
122
+ $grayscale-87-text: rgba(0, 0, 0, 0.87);
123
+ $grayscale-54-secondary-text: rgba(0, 0, 0, 0.54);
124
+ $grayscale-32-disabled-text: rgba(0, 0, 0, 0.32);
125
+ $grayscale-16-dark-background: rgba(0, 0, 0, 0.16);
126
+ $grayscale-10-background: rgba(0, 0, 0, 0.1);
127
+ $grayscale-6-light-background: rgba(0, 0, 0, 0.06);
128
+ $grayscale-87-text-white: rgba(255, 255, 255, 0.87);
129
+ $grayscale-54-secondary-white: rgba(255, 255, 255, 0.54);
130
+ $grayscale-32-disabled-white: rgba(255, 255, 255, 0.32);
131
+ $grayscale-16-white: rgba(255, 255, 255, 0.16);
132
+ $grayscale-10-white: rgba(255, 255, 255, 0.1);
133
+ $grayscale-6-white: rgba(255, 255, 255, 0.06);
134
+ $grayscale-black-000: #000000;
135
+ $grayscale-white-fff: #ffffff;
136
+ $primary-default: #3d3d3d;
137
+ $primary-hover: #292929;
138
+ $primary-pressed: #141414;
139
+ $link-states-text-hover-blue-100: #156abe;
140
+ $link-states-text-pressed-blue-110: #1260ae;
141
+ $link-states-shape-hover-blue-70: #1f87ef;
142
+ $link-states-shape-pressed-blue-80: #1c7edf;
143
+ $success-states-text-hover-green-100: #197f39;
144
+ $success-states-text-pressed-green-110: #167333;
145
+ $success-states-shape-hover-green-70: #23a14a;
146
+ $success-states-shape-pressed-green-80: #209644;
147
+ $warning-states-text-hover-yellow-90: #e77e1b;
148
+ $warning-states-text-pressed-yellow-100: #de711e;
149
+ $warning-states-shape-hover-yellow-60: #fda70c;
150
+ $warning-states-shape-pressed-yellow-70: #f69912;
151
+ $error-states-text-hover-red-100: #bb1919;
152
+ $error-states-text-pressed-red-110: #ab0d0d;
153
+ $error-states-shape-hover-red-70: #ed3f3f;
154
+ $error-states-shape-pressed-red-80: #dd3333;
155
+ $shade-16-black: rgba(0, 0, 0, 0.16);
156
+ $shade-80-white: rgba(255, 255, 255, 0.8);
157
+ $elements-exceptions-hint: rgba(0, 0, 0, 0.76);
158
+ $elements-exceptions-toast-red: rgba(210, 15, 0, 0.76);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/colors",
3
- "version": "0.5.0",
3
+ "version": "1.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,6 +24,7 @@
24
24
  "devDependencies": {
25
25
  "@babel/preset-typescript": "7.22.5",
26
26
  "@babel/register": "7.22.5",
27
+ "@skbkontur/react-ui": "4.25.2",
27
28
  "rimraf": "^4.1.2"
28
29
  }
29
30
  }