@skbkontur/colors 0.4.4 → 0.5.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 (9) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +128 -75
  3. package/colors.css +72 -35
  4. package/colors.less +72 -35
  5. package/dist/cjs/colors.d.ts +60 -23
  6. package/dist/cjs/colors.js +72 -35
  7. package/dist/esm/colors.d.ts +60 -23
  8. package/dist/esm/colors.js +72 -35
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
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
+ ## [0.5.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.5.0...@skbkontur/colors@0.5.1) (2024-08-08)
7
+
8
+ **Note:** Version bump only for package @skbkontur/colors
9
+
10
+
11
+
12
+
13
+
14
+ # [0.5.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.4...@skbkontur/colors@0.5.0) (2024-06-25)
15
+
16
+
17
+ ### Features
18
+
19
+ * **colors:** update colors 2024 ([7020c9b](https://git.skbkontur.ru/ui/ui-parking/commits/7020c9b1311e4e37973847af70bad28cbbd2902d))
20
+
21
+
22
+ ### Reverts
23
+
24
+ * remove screenshots in ie11 and obsolete packages ([57a6e89](https://git.skbkontur.ru/ui/ui-parking/commits/57a6e8962089825b6c71c1b96f4d09bc8a5a4ef7))
25
+
26
+
27
+
28
+
29
+
6
30
  ## [0.4.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.3...@skbkontur/colors@0.4.4) (2023-08-11)
7
31
 
8
32
  **Note:** Version bump only for package @skbkontur/colors
package/README.md CHANGED
@@ -1,115 +1,168 @@
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
8
  ```bash
8
9
  npm i @skbkontur/colors
9
10
  ```
10
11
 
11
- Сейчас в библиотеке представлены расширения .less, .css, .ts (по запросу могут быть новые расширения)
12
+ ## Использование
12
13
 
13
- Названия цветов - это camelCase варианция названия из фигмы.
14
- Например, `Blue Dark / 30` из фигмы в библиотеке можно найти как:
15
- - `@blueDark30` для colors.less
16
- - `--blueDark30` для colors.css
17
- - `KonturColors.blueDark30` для colors.ts
14
+ - JS/TS токены содержатся в объекте `KonturColors`
15
+ - В Less виде препроцессорных `@переменных`
16
+ - В CSS в виде глобальных `--css-переменных` в `:root { ... }`
18
17
 
19
- Пример использования colors.less
18
+ #### JS/TS
20
19
 
21
- ```less
22
- // styles.less
20
+ ```js static
21
+ import { KonturColors } from '@skbkontur/colors';
23
22
 
24
- @import '@skbkontur/colors/colors.less';
23
+ const text = `<div style="color: ${KonturColors.blueDark90}">Цвет blueDark90</div>`;
24
+ ```
25
25
 
26
- .class {
27
- color: @blue10;
26
+ #### React
27
+
28
+ ```jsx static
29
+ import { KonturColors } from '@skbkontur/colors';
30
+
31
+ const Component = () => {
32
+ return <div style={{ color: KonturColors.blueDark90 }}>Цвет blueDark90</div>
28
33
  }
29
34
  ```
30
35
 
31
- Пример использования colors.css
36
+ #### CSS
32
37
 
33
38
  ```css
34
- // styles.css
35
-
36
39
  @import '@skbkontur/colors/colors.css';
37
40
 
38
41
  .class {
39
- color: var(--blue10);
42
+ color: var(--blueDark90);
40
43
  }
41
44
  ```
42
45
 
43
- Пример использования colors.ts
46
+ #### Less
44
47
 
45
- ```ts
46
- // styles.ts
47
-
48
- import { KonturColors } from '@skbkontur/colors';
48
+ ```less
49
+ @import '@skbkontur/colors/colors.less';
49
50
 
50
- someRenderMethod = () => {
51
- return (
52
- <div style={{color: KonturColors.blue10}}>some content</div>
53
- )
51
+ .class {
52
+ color: @blueDark90;
54
53
  }
55
54
  ```
56
55
 
57
-
58
- ## Как работает
59
- Все цвета описаны в файле `src/colors.ts`.
60
- В файле `generate.ts` живёт сам код генерации файлов, а запускается генерация командой `npm run build`
61
-
62
56
  ## Палитра
63
57
 
64
- ```
58
+ ```jsx
65
59
  import { KonturColors } from '@skbkontur/colors';
60
+ import { Toast } from '@skbkontur/react-ui';
61
+ import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
66
62
 
67
63
  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
- },
64
+ colors: css`
65
+ display: grid;
66
+ grid-template-columns: repeat(3, minmax(0, 1fr));
67
+ gap: 24px;
68
+ `,
69
+ colorGroup: css`
70
+ break-inside: avoid;
71
+ margin-bottom: 64px;
72
+ `,
73
+ colorBlock: css`
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 10px;
77
+ width: 100%;
78
+ border: none;
79
+ text-align: left;
80
+ background: none;
81
+ cursor: pointer;
82
+ padding: 8px;
83
+ border-radius: 8px;
84
+ transition: .1s ease;
85
+
86
+ &:hover {
87
+ background: rgba(0,0,0,.06);
88
+ }
89
+
90
+ &:active {
91
+ background: rgba(0,0,0,.1);
92
+ }
93
+ `,
94
+ colorTile: css`
95
+ display: block;
96
+ height: 32px;
97
+ width: 32px;
98
+ border: 1px solid rgba(0, 0, 0, 0.08);
99
+ border-radius: 8px;
100
+ flex-shrink: 0;
101
+ `,
102
+ groupTitle: css`
103
+ display: block;
104
+ font-size: 20px;
105
+ font-weight: 600;
106
+ margin: 0 8px 12px;
107
+ `,
108
+ title: css`
109
+ display: block;
110
+ padding: 1px 0 0 8px;
111
+ `,
112
+ colorName: css`
113
+ display: block;
114
+ font-size: 14px;
115
+ line-height: 1.2;
116
+ `,
117
+ colorValue: css`
118
+ display: block;
119
+ fontSize: 12px;
120
+ color: #8b8b8b;
121
+ }`
92
122
  };
93
123
 
94
- <div style={styles.storyWrapper}>
95
- {Object.keys(KonturColors).map((colorName) => {
96
- const colorValue = KonturColors[colorName];
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];
128
+
129
+ acc[firstWord] = { ...acc[firstWord], [colorKey]: colorValue };
130
+
131
+ return acc;
132
+ }, {});
133
+
134
+ <div className={styles.colors}>
135
+ {Object.entries(colorGroups).map(([group, colors]) => {
97
136
  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>
110
- </div>
111
- </>
112
- );
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
+ )
113
160
  })}
114
161
  </div>
115
162
  ```
163
+
164
+ ## Разработка
165
+
166
+ - Токены выгружаются в формате `camelCase`
167
+ - `src/colors.ts` — файл с токенами
168
+ - `npm run build` — сборка пакета в `/dist`
package/colors.css CHANGED
@@ -1,17 +1,18 @@
1
1
  :root {
2
- --red0: #f03b36;
3
- --red10: #ffddd6;
4
- --red20: #ffc8bf;
5
- --red30: #ffb2a9;
6
- --red40: #ff9d92;
7
- --redLightBasic50: #ff887b;
8
- --redBasic60: #ff5a49;
9
- --red70: #ee5042;
10
- --red80: #dd473b;
11
- --red90: #cb3d35;
12
- --red100: #ba342e;
13
- --red110: #a92a27;
14
- --orange0: #fc7630;
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;
15
16
  --orange10: #ffe0c3;
16
17
  --orange20: #ffd1a0;
17
18
  --orange30: #ffc17d;
@@ -23,7 +24,8 @@
23
24
  --orange90: #bf561e;
24
25
  --orange100: #a9471b;
25
26
  --orange110: #943817;
26
- --yellow0: #feca42;
27
+ --orangePromoAccent: #661429;
28
+ --yellow0Logo: #feca42;
27
29
  --yellow10: #ffeec2;
28
30
  --yellow20: #fde1a1;
29
31
  --yellow30: #fdd481;
@@ -35,19 +37,7 @@
35
37
  --yellow90: #e77e1b;
36
38
  --yellow100: #de711e;
37
39
  --yellow110: #d46421;
38
- --greenLite0: #64b419;
39
- --greenLite10: #d7f8ae;
40
- --greenLite20: #c8f18e;
41
- --greenLite30: #b9e96e;
42
- --greenLite40: #aae24d;
43
- --greenLiteLightBasic50: #9bdb2d;
44
- --greenLiteBasic60: #78bf2b;
45
- --greenLite70: #6cad26;
46
- --greenLite80: #5f9c20;
47
- --greenLite90: #538a1b;
48
- --greenLite100: #477916;
49
- --greenLite110: #3a6710;
50
- --green0: #26ad50;
40
+ --green0Logo: #26ad50;
51
41
  --green10: #c7f9cc;
52
42
  --green20: #a7eeb3;
53
43
  --green30: #87e39a;
@@ -59,7 +49,8 @@
59
49
  --green90: #1c8a3f;
60
50
  --green100: #197f39;
61
51
  --green110: #167333;
62
- --greenMint0: #00bea2;
52
+ --greenGreen: #144942;
53
+ --greenMint0Logo: #00bea2;
63
54
  --greenMint10: #c6f5ec;
64
55
  --greenMint20: #a8eee2;
65
56
  --greenMint30: #8be7d8;
@@ -71,7 +62,8 @@
71
62
  --greenMint90: #00957f;
72
63
  --greenMint100: #008571;
73
64
  --greenMint110: #007564;
74
- --blue0: #2291ff;
65
+ --greenMintPromoAccent: #013f54;
66
+ --blue0Logo: #2291ff;
75
67
  --blue10: #cdedff;
76
68
  --blue20: #aeddff;
77
69
  --blue30: #8fcdff;
@@ -83,7 +75,8 @@
83
75
  --blue90: #1874cf;
84
76
  --blue100: #156abe;
85
77
  --blue110: #1261ae;
86
- --blueDark0: #366af3;
78
+ --bluePromoAccent: #153177;
79
+ --blueDark0Logo: #366af3;
87
80
  --blueDark10: #dde6ff;
88
81
  --blueDark20: #becfff;
89
82
  --blueDark30: #9fb8ff;
@@ -95,7 +88,8 @@
95
88
  --blueDark90: #2e5ad1;
96
89
  --blueDark100: #2b55c5;
97
90
  --blueDark110: #2850ba;
98
- --purple0: #b750d1;
91
+ --blueDarkPromoAccent: #272567;
92
+ --purple0Logo: #b750d1;
99
93
  --purple10: #f7d7ff;
100
94
  --purple20: #eabdf6;
101
95
  --purple30: #dea3ec;
@@ -107,17 +101,60 @@
107
101
  --purple90: #913ca6;
108
102
  --purple100: #843698;
109
103
  --purple110: #782f8a;
110
- --grayscaleText: #222;
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;
111
118
  --grayscaleSecondaryText: #757575;
112
119
  --grayscaleDisabledText: #adadad;
113
120
  --grayscaleDarkBackground: #d6d6d6;
114
121
  --grayscaleBackground: #e6e6e6;
115
122
  --grayscaleLightBackground: #f0f0f0;
116
- --grayscaleWhite: #fff;
117
- --grayscale865Text: rgba(0, 0, 0, 0.865);
123
+ --grayscale87Text: rgba(0, 0, 0, 0.87);
118
124
  --grayscale54SecondaryText: rgba(0, 0, 0, 0.54);
119
125
  --grayscale32DisabledText: rgba(0, 0, 0, 0.32);
120
126
  --grayscale16DarkBackground: rgba(0, 0, 0, 0.16);
121
127
  --grayscale10Background: rgba(0, 0, 0, 0.1);
122
- --grayscale06LightBackground: rgba(0, 0, 0, 0.06);
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);
123
160
  }
package/colors.less CHANGED
@@ -1,16 +1,17 @@
1
- @red0: #f03b36;
2
- @red10: #ffddd6;
3
- @red20: #ffc8bf;
4
- @red30: #ffb2a9;
5
- @red40: #ff9d92;
6
- @redLightBasic50: #ff887b;
7
- @redBasic60: #ff5a49;
8
- @red70: #ee5042;
9
- @red80: #dd473b;
10
- @red90: #cb3d35;
11
- @red100: #ba342e;
12
- @red110: #a92a27;
13
- @orange0: #fc7630;
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;
14
15
  @orange10: #ffe0c3;
15
16
  @orange20: #ffd1a0;
16
17
  @orange30: #ffc17d;
@@ -22,7 +23,8 @@
22
23
  @orange90: #bf561e;
23
24
  @orange100: #a9471b;
24
25
  @orange110: #943817;
25
- @yellow0: #feca42;
26
+ @orangePromoAccent: #661429;
27
+ @yellow0Logo: #feca42;
26
28
  @yellow10: #ffeec2;
27
29
  @yellow20: #fde1a1;
28
30
  @yellow30: #fdd481;
@@ -34,19 +36,7 @@
34
36
  @yellow90: #e77e1b;
35
37
  @yellow100: #de711e;
36
38
  @yellow110: #d46421;
37
- @greenLite0: #64b419;
38
- @greenLite10: #d7f8ae;
39
- @greenLite20: #c8f18e;
40
- @greenLite30: #b9e96e;
41
- @greenLite40: #aae24d;
42
- @greenLiteLightBasic50: #9bdb2d;
43
- @greenLiteBasic60: #78bf2b;
44
- @greenLite70: #6cad26;
45
- @greenLite80: #5f9c20;
46
- @greenLite90: #538a1b;
47
- @greenLite100: #477916;
48
- @greenLite110: #3a6710;
49
- @green0: #26ad50;
39
+ @green0Logo: #26ad50;
50
40
  @green10: #c7f9cc;
51
41
  @green20: #a7eeb3;
52
42
  @green30: #87e39a;
@@ -58,7 +48,8 @@
58
48
  @green90: #1c8a3f;
59
49
  @green100: #197f39;
60
50
  @green110: #167333;
61
- @greenMint0: #00bea2;
51
+ @greenGreen: #144942;
52
+ @greenMint0Logo: #00bea2;
62
53
  @greenMint10: #c6f5ec;
63
54
  @greenMint20: #a8eee2;
64
55
  @greenMint30: #8be7d8;
@@ -70,7 +61,8 @@
70
61
  @greenMint90: #00957f;
71
62
  @greenMint100: #008571;
72
63
  @greenMint110: #007564;
73
- @blue0: #2291ff;
64
+ @greenMintPromoAccent: #013f54;
65
+ @blue0Logo: #2291ff;
74
66
  @blue10: #cdedff;
75
67
  @blue20: #aeddff;
76
68
  @blue30: #8fcdff;
@@ -82,7 +74,8 @@
82
74
  @blue90: #1874cf;
83
75
  @blue100: #156abe;
84
76
  @blue110: #1261ae;
85
- @blueDark0: #366af3;
77
+ @bluePromoAccent: #153177;
78
+ @blueDark0Logo: #366af3;
86
79
  @blueDark10: #dde6ff;
87
80
  @blueDark20: #becfff;
88
81
  @blueDark30: #9fb8ff;
@@ -94,7 +87,8 @@
94
87
  @blueDark90: #2e5ad1;
95
88
  @blueDark100: #2b55c5;
96
89
  @blueDark110: #2850ba;
97
- @purple0: #b750d1;
90
+ @blueDarkPromoAccent: #272567;
91
+ @purple0Logo: #b750d1;
98
92
  @purple10: #f7d7ff;
99
93
  @purple20: #eabdf6;
100
94
  @purple30: #dea3ec;
@@ -106,16 +100,59 @@
106
100
  @purple90: #913ca6;
107
101
  @purple100: #843698;
108
102
  @purple110: #782f8a;
109
- @grayscaleText: #222;
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;
110
117
  @grayscaleSecondaryText: #757575;
111
118
  @grayscaleDisabledText: #adadad;
112
119
  @grayscaleDarkBackground: #d6d6d6;
113
120
  @grayscaleBackground: #e6e6e6;
114
121
  @grayscaleLightBackground: #f0f0f0;
115
- @grayscaleWhite: #fff;
116
- @grayscale865Text: rgba(0, 0, 0, 0.865);
122
+ @grayscale87Text: rgba(0, 0, 0, 0.87);
117
123
  @grayscale54SecondaryText: rgba(0, 0, 0, 0.54);
118
124
  @grayscale32DisabledText: rgba(0, 0, 0, 0.32);
119
125
  @grayscale16DarkBackground: rgba(0, 0, 0, 0.16);
120
126
  @grayscale10Background: rgba(0, 0, 0, 0.1);
121
- @grayscale06LightBackground: rgba(0, 0, 0, 0.06);
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);
package/dist/cjs/colors.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const KonturColors: {
2
- red0: string;
2
+ red0Logo: string;
3
3
  red10: string;
4
4
  red20: string;
5
5
  red30: string;
@@ -11,7 +11,8 @@ export declare const KonturColors: {
11
11
  red90: string;
12
12
  red100: string;
13
13
  red110: string;
14
- orange0: string;
14
+ redPromoAccent: string;
15
+ orange0Logo: string;
15
16
  orange10: string;
16
17
  orange20: string;
17
18
  orange30: string;
@@ -23,7 +24,8 @@ export declare const KonturColors: {
23
24
  orange90: string;
24
25
  orange100: string;
25
26
  orange110: string;
26
- yellow0: string;
27
+ orangePromoAccent: string;
28
+ yellow0Logo: string;
27
29
  yellow10: string;
28
30
  yellow20: string;
29
31
  yellow30: string;
@@ -35,19 +37,7 @@ export declare const KonturColors: {
35
37
  yellow90: string;
36
38
  yellow100: string;
37
39
  yellow110: string;
38
- greenLite0: string;
39
- greenLite10: string;
40
- greenLite20: string;
41
- greenLite30: string;
42
- greenLite40: string;
43
- greenLiteLightBasic50: string;
44
- greenLiteBasic60: string;
45
- greenLite70: string;
46
- greenLite80: string;
47
- greenLite90: string;
48
- greenLite100: string;
49
- greenLite110: string;
50
- green0: string;
40
+ green0Logo: string;
51
41
  green10: string;
52
42
  green20: string;
53
43
  green30: string;
@@ -59,7 +49,8 @@ export declare const KonturColors: {
59
49
  green90: string;
60
50
  green100: string;
61
51
  green110: string;
62
- greenMint0: string;
52
+ greenGreen: string;
53
+ greenMint0Logo: string;
63
54
  greenMint10: string;
64
55
  greenMint20: string;
65
56
  greenMint30: string;
@@ -71,7 +62,8 @@ export declare const KonturColors: {
71
62
  greenMint90: string;
72
63
  greenMint100: string;
73
64
  greenMint110: string;
74
- blue0: string;
65
+ greenMintPromoAccent: string;
66
+ blue0Logo: string;
75
67
  blue10: string;
76
68
  blue20: string;
77
69
  blue30: string;
@@ -83,7 +75,8 @@ export declare const KonturColors: {
83
75
  blue90: string;
84
76
  blue100: string;
85
77
  blue110: string;
86
- blueDark0: string;
78
+ bluePromoAccent: string;
79
+ blueDark0Logo: string;
87
80
  blueDark10: string;
88
81
  blueDark20: string;
89
82
  blueDark30: string;
@@ -95,7 +88,8 @@ export declare const KonturColors: {
95
88
  blueDark90: string;
96
89
  blueDark100: string;
97
90
  blueDark110: string;
98
- purple0: string;
91
+ blueDarkPromoAccent: string;
92
+ purple0Logo: string;
99
93
  purple10: string;
100
94
  purple20: string;
101
95
  purple30: string;
@@ -107,18 +101,61 @@ export declare const KonturColors: {
107
101
  purple90: string;
108
102
  purple100: string;
109
103
  purple110: string;
104
+ purplePromoAccent: string;
105
+ mainLinkTextBlue90: string;
106
+ mainLinkShapeBlue60: string;
107
+ mainLinkBackgroundBlue10: string;
108
+ mainSuccessTextGreen90: string;
109
+ mainSuccessShapeGreen60: string;
110
+ mainSuccessBackgroundGreen10: string;
111
+ mainWarningTextYellow80: string;
112
+ mainWarningShapeYellow50: string;
113
+ mainWarningBackgroundYellow10: string;
114
+ mainErrorTextRed90: string;
115
+ mainErrorShapeRed60: string;
116
+ mainErrorBackgroundRed10: string;
110
117
  grayscaleText: string;
111
118
  grayscaleSecondaryText: string;
112
119
  grayscaleDisabledText: string;
113
120
  grayscaleDarkBackground: string;
114
121
  grayscaleBackground: string;
115
122
  grayscaleLightBackground: string;
116
- grayscaleWhite: string;
117
- grayscale865Text: string;
123
+ grayscale87Text: string;
118
124
  grayscale54SecondaryText: string;
119
125
  grayscale32DisabledText: string;
120
126
  grayscale16DarkBackground: string;
121
127
  grayscale10Background: string;
122
- grayscale06LightBackground: string;
128
+ grayscale6LightBackground: string;
129
+ grayscale87TextWhite: string;
130
+ grayscale54SecondaryWhite: string;
131
+ grayscale32DisabledWhite: string;
132
+ grayscale16White: string;
133
+ grayscale10White: string;
134
+ grayscale6White: string;
135
+ grayscaleBlack000: string;
136
+ grayscaleWhiteFFF: string;
137
+ primaryDefault: string;
138
+ primaryHover: string;
139
+ primaryPressed: string;
140
+ linkStatesTextHoverBlue100: string;
141
+ linkStatesTextPressedBlue110: string;
142
+ linkStatesShapeHoverBlue70: string;
143
+ linkStatesShapePressedBlue80: string;
144
+ successStatesTextHoverGreen100: string;
145
+ successStatesTextPressedGreen110: string;
146
+ successStatesShapeHoverGreen70: string;
147
+ successStatesShapePressedGreen80: string;
148
+ warningStatesTextHoverYellow90: string;
149
+ warningStatesTextPressedYellow100: string;
150
+ warningStatesShapeHoverYellow60: string;
151
+ warningStatesShapePressedYellow70: string;
152
+ errorStatesTextHoverRed100: string;
153
+ errorStatesTextPressedRed110: string;
154
+ errorStatesShapeHoverRed70: string;
155
+ errorStatesShapePressedRed80: string;
156
+ shade16Black: string;
157
+ shade80White: string;
158
+ elementsExceptionsHint: string;
159
+ elementsExceptionsToastRed: string;
123
160
  };
124
161
  export declare type TKonturColor = keyof typeof KonturColors;
package/dist/cjs/colors.js CHANGED
@@ -2,19 +2,20 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.KonturColors = void 0;
4
4
  exports.KonturColors = {
5
- red0: '#f03b36',
6
- red10: '#ffddd6',
7
- red20: '#ffc8bf',
8
- red30: '#ffb2a9',
9
- red40: '#ff9d92',
10
- redLightBasic50: '#ff887b',
11
- redBasic60: '#ff5a49',
12
- red70: '#ee5042',
13
- red80: '#dd473b',
14
- red90: '#cb3d35',
15
- red100: '#ba342e',
16
- red110: '#a92a27',
17
- orange0: '#fc7630',
5
+ red0Logo: '#fe4c4c',
6
+ red10: '#ffebeb',
7
+ red20: '#ffcbcb',
8
+ red30: '#ffabab',
9
+ red40: '#fe8c8c',
10
+ redLightBasic50: '#fe6c6c',
11
+ redBasic60: '#fe4c4c',
12
+ red70: '#ed3f3f',
13
+ red80: '#dd3333',
14
+ red90: '#cc2626',
15
+ red100: '#bb1919',
16
+ red110: '#ab0d0d',
17
+ redPromoAccent: '#6c1d45',
18
+ orange0Logo: '#fc7630',
18
19
  orange10: '#ffe0c3',
19
20
  orange20: '#ffd1a0',
20
21
  orange30: '#ffc17d',
@@ -26,7 +27,8 @@ exports.KonturColors = {
26
27
  orange90: '#bf561e',
27
28
  orange100: '#a9471b',
28
29
  orange110: '#943817',
29
- yellow0: '#feca42',
30
+ orangePromoAccent: '#661429',
31
+ yellow0Logo: '#feca42',
30
32
  yellow10: '#ffeec2',
31
33
  yellow20: '#fde1a1',
32
34
  yellow30: '#fdd481',
@@ -38,19 +40,7 @@ exports.KonturColors = {
38
40
  yellow90: '#e77e1b',
39
41
  yellow100: '#de711e',
40
42
  yellow110: '#d46421',
41
- greenLite0: '#64b419',
42
- greenLite10: '#d7f8ae',
43
- greenLite20: '#c8f18e',
44
- greenLite30: '#b9e96e',
45
- greenLite40: '#aae24d',
46
- greenLiteLightBasic50: '#9bdb2d',
47
- greenLiteBasic60: '#78bf2b',
48
- greenLite70: '#6cad26',
49
- greenLite80: '#5f9c20',
50
- greenLite90: '#538a1b',
51
- greenLite100: '#477916',
52
- greenLite110: '#3a6710',
53
- green0: '#26ad50',
43
+ green0Logo: '#26ad50',
54
44
  green10: '#c7f9cc',
55
45
  green20: '#a7eeb3',
56
46
  green30: '#87e39a',
@@ -62,7 +52,8 @@ exports.KonturColors = {
62
52
  green90: '#1c8a3f',
63
53
  green100: '#197f39',
64
54
  green110: '#167333',
65
- greenMint0: '#00bea2',
55
+ greenGreen: '#144942',
56
+ greenMint0Logo: '#00bea2',
66
57
  greenMint10: '#c6f5ec',
67
58
  greenMint20: '#a8eee2',
68
59
  greenMint30: '#8be7d8',
@@ -74,7 +65,8 @@ exports.KonturColors = {
74
65
  greenMint90: '#00957f',
75
66
  greenMint100: '#008571',
76
67
  greenMint110: '#007564',
77
- blue0: '#2291ff',
68
+ greenMintPromoAccent: '#013f54',
69
+ blue0Logo: '#2291ff',
78
70
  blue10: '#cdedff',
79
71
  blue20: '#aeddff',
80
72
  blue30: '#8fcdff',
@@ -86,7 +78,8 @@ exports.KonturColors = {
86
78
  blue90: '#1874cf',
87
79
  blue100: '#156abe',
88
80
  blue110: '#1261ae',
89
- blueDark0: '#366af3',
81
+ bluePromoAccent: '#153177',
82
+ blueDark0Logo: '#366af3',
90
83
  blueDark10: '#dde6ff',
91
84
  blueDark20: '#becfff',
92
85
  blueDark30: '#9fb8ff',
@@ -98,7 +91,8 @@ exports.KonturColors = {
98
91
  blueDark90: '#2e5ad1',
99
92
  blueDark100: '#2b55c5',
100
93
  blueDark110: '#2850ba',
101
- purple0: '#b750d1',
94
+ blueDarkPromoAccent: '#272567',
95
+ purple0Logo: '#b750d1',
102
96
  purple10: '#f7d7ff',
103
97
  purple20: '#eabdf6',
104
98
  purple30: '#dea3ec',
@@ -110,17 +104,60 @@ exports.KonturColors = {
110
104
  purple90: '#913ca6',
111
105
  purple100: '#843698',
112
106
  purple110: '#782f8a',
113
- grayscaleText: '#222',
107
+ purplePromoAccent: '#452a78',
108
+ mainLinkTextBlue90: '#1874cf',
109
+ mainLinkShapeBlue60: '#2291ff',
110
+ mainLinkBackgroundBlue10: '#cdedff',
111
+ mainSuccessTextGreen90: '#1c8a3f',
112
+ mainSuccessShapeGreen60: '#26ad50',
113
+ mainSuccessBackgroundGreen10: '#c7f9cc',
114
+ mainWarningTextYellow80: '#ef8b17',
115
+ mainWarningShapeYellow50: '#fcb73e',
116
+ mainWarningBackgroundYellow10: '#ffeec2',
117
+ mainErrorTextRed90: '#cc2626',
118
+ mainErrorShapeRed60: '#fe4c4c',
119
+ mainErrorBackgroundRed10: '#ffebeb',
120
+ grayscaleText: '#222222',
114
121
  grayscaleSecondaryText: '#757575',
115
122
  grayscaleDisabledText: '#adadad',
116
123
  grayscaleDarkBackground: '#d6d6d6',
117
124
  grayscaleBackground: '#e6e6e6',
118
125
  grayscaleLightBackground: '#f0f0f0',
119
- grayscaleWhite: '#fff',
120
- grayscale865Text: 'rgba(0, 0, 0, 0.865)',
126
+ grayscale87Text: 'rgba(0, 0, 0, 0.87)',
121
127
  grayscale54SecondaryText: 'rgba(0, 0, 0, 0.54)',
122
128
  grayscale32DisabledText: 'rgba(0, 0, 0, 0.32)',
123
129
  grayscale16DarkBackground: 'rgba(0, 0, 0, 0.16)',
124
130
  grayscale10Background: 'rgba(0, 0, 0, 0.1)',
125
- grayscale06LightBackground: 'rgba(0, 0, 0, 0.06)',
131
+ grayscale6LightBackground: 'rgba(0, 0, 0, 0.06)',
132
+ grayscale87TextWhite: 'rgba(255, 255, 255, 0.87)',
133
+ grayscale54SecondaryWhite: 'rgba(255, 255, 255, 0.54)',
134
+ grayscale32DisabledWhite: 'rgba(255, 255, 255, 0.32)',
135
+ grayscale16White: 'rgba(255, 255, 255, 0.16)',
136
+ grayscale10White: 'rgba(255, 255, 255, 0.1)',
137
+ grayscale6White: 'rgba(255, 255, 255, 0.06)',
138
+ grayscaleBlack000: '#000000',
139
+ grayscaleWhiteFFF: '#ffffff',
140
+ primaryDefault: '#3d3d3d',
141
+ primaryHover: '#292929',
142
+ primaryPressed: '#141414',
143
+ linkStatesTextHoverBlue100: '#156abe',
144
+ linkStatesTextPressedBlue110: '#1260ae',
145
+ linkStatesShapeHoverBlue70: '#1f87ef',
146
+ linkStatesShapePressedBlue80: '#1c7edf',
147
+ successStatesTextHoverGreen100: '#197f39',
148
+ successStatesTextPressedGreen110: '#167333',
149
+ successStatesShapeHoverGreen70: '#23a14a',
150
+ successStatesShapePressedGreen80: '#209644',
151
+ warningStatesTextHoverYellow90: '#e77e1b',
152
+ warningStatesTextPressedYellow100: '#de711e',
153
+ warningStatesShapeHoverYellow60: '#fda70c',
154
+ warningStatesShapePressedYellow70: '#f69912',
155
+ errorStatesTextHoverRed100: '#bb1919',
156
+ errorStatesTextPressedRed110: '#ab0d0d',
157
+ errorStatesShapeHoverRed70: '#ed3f3f',
158
+ errorStatesShapePressedRed80: '#dd3333',
159
+ shade16Black: 'rgba(0, 0, 0, 0.16)',
160
+ shade80White: 'rgba(255, 255, 255, 0.8)',
161
+ elementsExceptionsHint: 'rgba(0, 0, 0, 0.76)',
162
+ elementsExceptionsToastRed: 'rgba(210, 15, 0, 0.76)',
126
163
  };
package/dist/esm/colors.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const KonturColors: {
2
- red0: string;
2
+ red0Logo: string;
3
3
  red10: string;
4
4
  red20: string;
5
5
  red30: string;
@@ -11,7 +11,8 @@ export declare const KonturColors: {
11
11
  red90: string;
12
12
  red100: string;
13
13
  red110: string;
14
- orange0: string;
14
+ redPromoAccent: string;
15
+ orange0Logo: string;
15
16
  orange10: string;
16
17
  orange20: string;
17
18
  orange30: string;
@@ -23,7 +24,8 @@ export declare const KonturColors: {
23
24
  orange90: string;
24
25
  orange100: string;
25
26
  orange110: string;
26
- yellow0: string;
27
+ orangePromoAccent: string;
28
+ yellow0Logo: string;
27
29
  yellow10: string;
28
30
  yellow20: string;
29
31
  yellow30: string;
@@ -35,19 +37,7 @@ export declare const KonturColors: {
35
37
  yellow90: string;
36
38
  yellow100: string;
37
39
  yellow110: string;
38
- greenLite0: string;
39
- greenLite10: string;
40
- greenLite20: string;
41
- greenLite30: string;
42
- greenLite40: string;
43
- greenLiteLightBasic50: string;
44
- greenLiteBasic60: string;
45
- greenLite70: string;
46
- greenLite80: string;
47
- greenLite90: string;
48
- greenLite100: string;
49
- greenLite110: string;
50
- green0: string;
40
+ green0Logo: string;
51
41
  green10: string;
52
42
  green20: string;
53
43
  green30: string;
@@ -59,7 +49,8 @@ export declare const KonturColors: {
59
49
  green90: string;
60
50
  green100: string;
61
51
  green110: string;
62
- greenMint0: string;
52
+ greenGreen: string;
53
+ greenMint0Logo: string;
63
54
  greenMint10: string;
64
55
  greenMint20: string;
65
56
  greenMint30: string;
@@ -71,7 +62,8 @@ export declare const KonturColors: {
71
62
  greenMint90: string;
72
63
  greenMint100: string;
73
64
  greenMint110: string;
74
- blue0: string;
65
+ greenMintPromoAccent: string;
66
+ blue0Logo: string;
75
67
  blue10: string;
76
68
  blue20: string;
77
69
  blue30: string;
@@ -83,7 +75,8 @@ export declare const KonturColors: {
83
75
  blue90: string;
84
76
  blue100: string;
85
77
  blue110: string;
86
- blueDark0: string;
78
+ bluePromoAccent: string;
79
+ blueDark0Logo: string;
87
80
  blueDark10: string;
88
81
  blueDark20: string;
89
82
  blueDark30: string;
@@ -95,7 +88,8 @@ export declare const KonturColors: {
95
88
  blueDark90: string;
96
89
  blueDark100: string;
97
90
  blueDark110: string;
98
- purple0: string;
91
+ blueDarkPromoAccent: string;
92
+ purple0Logo: string;
99
93
  purple10: string;
100
94
  purple20: string;
101
95
  purple30: string;
@@ -107,18 +101,61 @@ export declare const KonturColors: {
107
101
  purple90: string;
108
102
  purple100: string;
109
103
  purple110: string;
104
+ purplePromoAccent: string;
105
+ mainLinkTextBlue90: string;
106
+ mainLinkShapeBlue60: string;
107
+ mainLinkBackgroundBlue10: string;
108
+ mainSuccessTextGreen90: string;
109
+ mainSuccessShapeGreen60: string;
110
+ mainSuccessBackgroundGreen10: string;
111
+ mainWarningTextYellow80: string;
112
+ mainWarningShapeYellow50: string;
113
+ mainWarningBackgroundYellow10: string;
114
+ mainErrorTextRed90: string;
115
+ mainErrorShapeRed60: string;
116
+ mainErrorBackgroundRed10: string;
110
117
  grayscaleText: string;
111
118
  grayscaleSecondaryText: string;
112
119
  grayscaleDisabledText: string;
113
120
  grayscaleDarkBackground: string;
114
121
  grayscaleBackground: string;
115
122
  grayscaleLightBackground: string;
116
- grayscaleWhite: string;
117
- grayscale865Text: string;
123
+ grayscale87Text: string;
118
124
  grayscale54SecondaryText: string;
119
125
  grayscale32DisabledText: string;
120
126
  grayscale16DarkBackground: string;
121
127
  grayscale10Background: string;
122
- grayscale06LightBackground: string;
128
+ grayscale6LightBackground: string;
129
+ grayscale87TextWhite: string;
130
+ grayscale54SecondaryWhite: string;
131
+ grayscale32DisabledWhite: string;
132
+ grayscale16White: string;
133
+ grayscale10White: string;
134
+ grayscale6White: string;
135
+ grayscaleBlack000: string;
136
+ grayscaleWhiteFFF: string;
137
+ primaryDefault: string;
138
+ primaryHover: string;
139
+ primaryPressed: string;
140
+ linkStatesTextHoverBlue100: string;
141
+ linkStatesTextPressedBlue110: string;
142
+ linkStatesShapeHoverBlue70: string;
143
+ linkStatesShapePressedBlue80: string;
144
+ successStatesTextHoverGreen100: string;
145
+ successStatesTextPressedGreen110: string;
146
+ successStatesShapeHoverGreen70: string;
147
+ successStatesShapePressedGreen80: string;
148
+ warningStatesTextHoverYellow90: string;
149
+ warningStatesTextPressedYellow100: string;
150
+ warningStatesShapeHoverYellow60: string;
151
+ warningStatesShapePressedYellow70: string;
152
+ errorStatesTextHoverRed100: string;
153
+ errorStatesTextPressedRed110: string;
154
+ errorStatesShapeHoverRed70: string;
155
+ errorStatesShapePressedRed80: string;
156
+ shade16Black: string;
157
+ shade80White: string;
158
+ elementsExceptionsHint: string;
159
+ elementsExceptionsToastRed: string;
123
160
  };
124
161
  export declare type TKonturColor = keyof typeof KonturColors;
package/dist/esm/colors.js CHANGED
@@ -1,17 +1,18 @@
1
1
  export var KonturColors = {
2
- red0: '#f03b36',
3
- red10: '#ffddd6',
4
- red20: '#ffc8bf',
5
- red30: '#ffb2a9',
6
- red40: '#ff9d92',
7
- redLightBasic50: '#ff887b',
8
- redBasic60: '#ff5a49',
9
- red70: '#ee5042',
10
- red80: '#dd473b',
11
- red90: '#cb3d35',
12
- red100: '#ba342e',
13
- red110: '#a92a27',
14
- orange0: '#fc7630',
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',
15
16
  orange10: '#ffe0c3',
16
17
  orange20: '#ffd1a0',
17
18
  orange30: '#ffc17d',
@@ -23,7 +24,8 @@ export var KonturColors = {
23
24
  orange90: '#bf561e',
24
25
  orange100: '#a9471b',
25
26
  orange110: '#943817',
26
- yellow0: '#feca42',
27
+ orangePromoAccent: '#661429',
28
+ yellow0Logo: '#feca42',
27
29
  yellow10: '#ffeec2',
28
30
  yellow20: '#fde1a1',
29
31
  yellow30: '#fdd481',
@@ -35,19 +37,7 @@ export var KonturColors = {
35
37
  yellow90: '#e77e1b',
36
38
  yellow100: '#de711e',
37
39
  yellow110: '#d46421',
38
- greenLite0: '#64b419',
39
- greenLite10: '#d7f8ae',
40
- greenLite20: '#c8f18e',
41
- greenLite30: '#b9e96e',
42
- greenLite40: '#aae24d',
43
- greenLiteLightBasic50: '#9bdb2d',
44
- greenLiteBasic60: '#78bf2b',
45
- greenLite70: '#6cad26',
46
- greenLite80: '#5f9c20',
47
- greenLite90: '#538a1b',
48
- greenLite100: '#477916',
49
- greenLite110: '#3a6710',
50
- green0: '#26ad50',
40
+ green0Logo: '#26ad50',
51
41
  green10: '#c7f9cc',
52
42
  green20: '#a7eeb3',
53
43
  green30: '#87e39a',
@@ -59,7 +49,8 @@ export var KonturColors = {
59
49
  green90: '#1c8a3f',
60
50
  green100: '#197f39',
61
51
  green110: '#167333',
62
- greenMint0: '#00bea2',
52
+ greenGreen: '#144942',
53
+ greenMint0Logo: '#00bea2',
63
54
  greenMint10: '#c6f5ec',
64
55
  greenMint20: '#a8eee2',
65
56
  greenMint30: '#8be7d8',
@@ -71,7 +62,8 @@ export var KonturColors = {
71
62
  greenMint90: '#00957f',
72
63
  greenMint100: '#008571',
73
64
  greenMint110: '#007564',
74
- blue0: '#2291ff',
65
+ greenMintPromoAccent: '#013f54',
66
+ blue0Logo: '#2291ff',
75
67
  blue10: '#cdedff',
76
68
  blue20: '#aeddff',
77
69
  blue30: '#8fcdff',
@@ -83,7 +75,8 @@ export var KonturColors = {
83
75
  blue90: '#1874cf',
84
76
  blue100: '#156abe',
85
77
  blue110: '#1261ae',
86
- blueDark0: '#366af3',
78
+ bluePromoAccent: '#153177',
79
+ blueDark0Logo: '#366af3',
87
80
  blueDark10: '#dde6ff',
88
81
  blueDark20: '#becfff',
89
82
  blueDark30: '#9fb8ff',
@@ -95,7 +88,8 @@ export var KonturColors = {
95
88
  blueDark90: '#2e5ad1',
96
89
  blueDark100: '#2b55c5',
97
90
  blueDark110: '#2850ba',
98
- purple0: '#b750d1',
91
+ blueDarkPromoAccent: '#272567',
92
+ purple0Logo: '#b750d1',
99
93
  purple10: '#f7d7ff',
100
94
  purple20: '#eabdf6',
101
95
  purple30: '#dea3ec',
@@ -107,17 +101,60 @@ export var KonturColors = {
107
101
  purple90: '#913ca6',
108
102
  purple100: '#843698',
109
103
  purple110: '#782f8a',
110
- grayscaleText: '#222',
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',
111
118
  grayscaleSecondaryText: '#757575',
112
119
  grayscaleDisabledText: '#adadad',
113
120
  grayscaleDarkBackground: '#d6d6d6',
114
121
  grayscaleBackground: '#e6e6e6',
115
122
  grayscaleLightBackground: '#f0f0f0',
116
- grayscaleWhite: '#fff',
117
- grayscale865Text: 'rgba(0, 0, 0, 0.865)',
123
+ grayscale87Text: 'rgba(0, 0, 0, 0.87)',
118
124
  grayscale54SecondaryText: 'rgba(0, 0, 0, 0.54)',
119
125
  grayscale32DisabledText: 'rgba(0, 0, 0, 0.32)',
120
126
  grayscale16DarkBackground: 'rgba(0, 0, 0, 0.16)',
121
127
  grayscale10Background: 'rgba(0, 0, 0, 0.1)',
122
- grayscale06LightBackground: 'rgba(0, 0, 0, 0.06)',
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)',
123
160
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/colors",
3
- "version": "0.4.4",
3
+ "version": "0.5.1",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"