@skbkontur/colors 0.4.4

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 +84 -0
  2. package/README.md +115 -0
  3. package/colors.css +123 -0
  4. package/colors.less +121 -0
  5. package/dist/cjs/colors.d.ts +124 -0
  6. package/dist/cjs/colors.js +126 -0
  7. package/dist/esm/colors.d.ts +124 -0
  8. package/dist/esm/colors.js +123 -0
  9. package/package.json +29 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,84 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ ## [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
+
8
+ **Note:** Version bump only for package @skbkontur/colors
9
+
10
+
11
+
12
+
13
+
14
+ ## [0.4.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.2...@skbkontur/colors@0.4.3) (2023-08-11)
15
+
16
+ **Note:** Version bump only for package @skbkontur/colors
17
+
18
+
19
+
20
+
21
+
22
+ ## [0.4.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.1...@skbkontur/colors@0.4.2) (2023-08-11)
23
+
24
+ **Note:** Version bump only for package @skbkontur/colors
25
+
26
+
27
+
28
+
29
+
30
+ ## [0.4.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.0...@skbkontur/colors@0.4.1) (2023-06-29)
31
+
32
+ **Note:** Version bump only for package @skbkontur/colors
33
+
34
+
35
+
36
+
37
+
38
+ # [0.4.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.3.0...@skbkontur/colors@0.4.0) (2023-05-22)
39
+
40
+
41
+ ### Features
42
+
43
+ * **colors:** обновление grayscaleSecondaryText с [#858585](https://git.skbkontur.ru/ui/ui-parking/issues/858585) на [#757575](https://git.skbkontur.ru/ui/ui-parking/issues/757575) ([8f27457](https://git.skbkontur.ru/ui/ui-parking/commits/8f27457477e25ecd52dfb7ab9b1f521145b25125))
44
+
45
+
46
+
47
+
48
+
49
+ # [0.3.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.1.1...@skbkontur/colors@0.3.0) (2023-05-12)
50
+
51
+
52
+ ### Features
53
+
54
+ * **colors:** добавила новые цвета с прозрачностью ([9cd91ef](https://git.skbkontur.ru/ui/ui-parking/commits/9cd91ef608a9f619d02cfb818cf2a4dc2c410929))
55
+
56
+
57
+
58
+
59
+
60
+ # [0.2.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.1.1...@skbkontur/colors@0.2.0) (2023-05-12)
61
+
62
+
63
+ ### Features
64
+
65
+ * **colors:** добавила новые цвета с прозрачностью ([9cd91ef](https://git.skbkontur.ru/ui/ui-parking/commits/9cd91ef608a9f619d02cfb818cf2a4dc2c410929))
66
+
67
+
68
+
69
+
70
+
71
+ ## [0.1.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.1.0...@skbkontur/colors@0.1.1) (2023-02-06)
72
+
73
+ **Note:** Version bump only for package @skbkontur/colors
74
+
75
+
76
+
77
+
78
+
79
+ # 0.1.0 (2023-02-03)
80
+
81
+
82
+ ### Features
83
+
84
+ * new package @skbkontur/colors ([e9e1a88](https://git.skbkontur.ru/ui/ui-parking/commits/e9e1a88b3f5cea124a770a9e18c5eef2524521dc))
package/README.md ADDED
@@ -0,0 +1,115 @@
1
+ # Библиотека цветов
2
+
3
+ В этой библиотеке собраны основные цвета, используемые в интерфейсах Контура. Вся палитра собрана [тут](https://www.figma.com/file/XuiIin3JAOEcHHPihtthOJ/%E2%9A%A1%EF%B8%8F-Kontur-Colors?node-id=0%3A1&t=pL38Ju5ZOo3VC6vt-0).
4
+
5
+ Установить библиотеку можно командой:
6
+
7
+ ```bash
8
+ npm i @skbkontur/colors
9
+ ```
10
+
11
+ Сейчас в библиотеке представлены расширения .less, .css, .ts (по запросу могут быть новые расширения)
12
+
13
+ Названия цветов - это camelCase варианция названия из фигмы.
14
+ Например, `Blue Dark / 30` из фигмы в библиотеке можно найти как:
15
+ - `@blueDark30` для colors.less
16
+ - `--blueDark30` для colors.css
17
+ - `KonturColors.blueDark30` для colors.ts
18
+
19
+ Пример использования colors.less
20
+
21
+ ```less
22
+ // styles.less
23
+
24
+ @import '@skbkontur/colors/colors.less';
25
+
26
+ .class {
27
+ color: @blue10;
28
+ }
29
+ ```
30
+
31
+ Пример использования colors.css
32
+
33
+ ```css
34
+ // styles.css
35
+
36
+ @import '@skbkontur/colors/colors.css';
37
+
38
+ .class {
39
+ color: var(--blue10);
40
+ }
41
+ ```
42
+
43
+ Пример использования colors.ts
44
+
45
+ ```ts
46
+ // styles.ts
47
+
48
+ import { KonturColors } from '@skbkontur/colors';
49
+
50
+ someRenderMethod = () => {
51
+ return (
52
+ <div style={{color: KonturColors.blue10}}>some content</div>
53
+ )
54
+ }
55
+ ```
56
+
57
+
58
+ ## Как работает
59
+ Все цвета описаны в файле `src/colors.ts`.
60
+ В файле `generate.ts` живёт сам код генерации файлов, а запускается генерация командой `npm run build`
61
+
62
+ ## Палитра
63
+
64
+ ```
65
+ import { KonturColors } from '@skbkontur/colors';
66
+
67
+ 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
+ },
92
+ };
93
+
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>
110
+ </div>
111
+ </>
112
+ );
113
+ })}
114
+ </div>
115
+ ```
package/colors.css ADDED
@@ -0,0 +1,123 @@
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;
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
+ --yellow0: #feca42;
27
+ --yellow10: #ffeec2;
28
+ --yellow20: #fde1a1;
29
+ --yellow30: #fdd481;
30
+ --yellow40: #fcc660;
31
+ --yellowLightBasic50: #fcb73e;
32
+ --yellowBasic60: #fda70c;
33
+ --yellow70: #f69912;
34
+ --yellow80: #ef8b17;
35
+ --yellow90: #e77e1b;
36
+ --yellow100: #de711e;
37
+ --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;
51
+ --green10: #c7f9cc;
52
+ --green20: #a7eeb3;
53
+ --green30: #87e39a;
54
+ --green40: #67d881;
55
+ --greenLightBasic50: #46cd68;
56
+ --greenBasic60: #26ad50;
57
+ --green70: #23a14a;
58
+ --green80: #209644;
59
+ --green90: #1c8a3f;
60
+ --green100: #197f39;
61
+ --green110: #167333;
62
+ --greenMint0: #00bea2;
63
+ --greenMint10: #c6f5ec;
64
+ --greenMint20: #a8eee2;
65
+ --greenMint30: #8be7d8;
66
+ --greenMint40: #6ddfcd;
67
+ --greenMintLightBasic50: #4fd8c3;
68
+ --greenMintBasic60: #00c5a8;
69
+ --greenMint70: #00b59a;
70
+ --greenMint80: #00a58d;
71
+ --greenMint90: #00957f;
72
+ --greenMint100: #008571;
73
+ --greenMint110: #007564;
74
+ --blue0: #2291ff;
75
+ --blue10: #cdedff;
76
+ --blue20: #aeddff;
77
+ --blue30: #8fcdff;
78
+ --blue40: #70bdff;
79
+ --blueLightBasic50: #51adff;
80
+ --blueBasic60: #2291ff;
81
+ --blue70: #1f87ef;
82
+ --blue80: #1c7edf;
83
+ --blue90: #1874cf;
84
+ --blue100: #156abe;
85
+ --blue110: #1261ae;
86
+ --blueDark0: #366af3;
87
+ --blueDark10: #dde6ff;
88
+ --blueDark20: #becfff;
89
+ --blueDark30: #9fb8ff;
90
+ --blueDark40: #80a1ff;
91
+ --blueDarkLightBasic50: #618aff;
92
+ --blueDarkBasic60: #366af3;
93
+ --blueDark70: #3365e8;
94
+ --blueDark80: #3060dc;
95
+ --blueDark90: #2e5ad1;
96
+ --blueDark100: #2b55c5;
97
+ --blueDark110: #2850ba;
98
+ --purple0: #b750d1;
99
+ --purple10: #f7d7ff;
100
+ --purple20: #eabdf6;
101
+ --purple30: #dea3ec;
102
+ --purple40: #d189e3;
103
+ --purpleLightBasic50: #c56fda;
104
+ --purpleBasic60: #b750d1;
105
+ --purple70: #aa49c3;
106
+ --purple80: #9e43b5;
107
+ --purple90: #913ca6;
108
+ --purple100: #843698;
109
+ --purple110: #782f8a;
110
+ --grayscaleText: #222;
111
+ --grayscaleSecondaryText: #757575;
112
+ --grayscaleDisabledText: #adadad;
113
+ --grayscaleDarkBackground: #d6d6d6;
114
+ --grayscaleBackground: #e6e6e6;
115
+ --grayscaleLightBackground: #f0f0f0;
116
+ --grayscaleWhite: #fff;
117
+ --grayscale865Text: rgba(0, 0, 0, 0.865);
118
+ --grayscale54SecondaryText: rgba(0, 0, 0, 0.54);
119
+ --grayscale32DisabledText: rgba(0, 0, 0, 0.32);
120
+ --grayscale16DarkBackground: rgba(0, 0, 0, 0.16);
121
+ --grayscale10Background: rgba(0, 0, 0, 0.1);
122
+ --grayscale06LightBackground: rgba(0, 0, 0, 0.06);
123
+ }
package/colors.less ADDED
@@ -0,0 +1,121 @@
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;
14
+ @orange10: #ffe0c3;
15
+ @orange20: #ffd1a0;
16
+ @orange30: #ffc17d;
17
+ @orange40: #ffb259;
18
+ @orangeLightBasic50: #ffa236;
19
+ @orangeBasic60: #ff8227;
20
+ @orange70: #ea7324;
21
+ @orange80: #d46421;
22
+ @orange90: #bf561e;
23
+ @orange100: #a9471b;
24
+ @orange110: #943817;
25
+ @yellow0: #feca42;
26
+ @yellow10: #ffeec2;
27
+ @yellow20: #fde1a1;
28
+ @yellow30: #fdd481;
29
+ @yellow40: #fcc660;
30
+ @yellowLightBasic50: #fcb73e;
31
+ @yellowBasic60: #fda70c;
32
+ @yellow70: #f69912;
33
+ @yellow80: #ef8b17;
34
+ @yellow90: #e77e1b;
35
+ @yellow100: #de711e;
36
+ @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;
50
+ @green10: #c7f9cc;
51
+ @green20: #a7eeb3;
52
+ @green30: #87e39a;
53
+ @green40: #67d881;
54
+ @greenLightBasic50: #46cd68;
55
+ @greenBasic60: #26ad50;
56
+ @green70: #23a14a;
57
+ @green80: #209644;
58
+ @green90: #1c8a3f;
59
+ @green100: #197f39;
60
+ @green110: #167333;
61
+ @greenMint0: #00bea2;
62
+ @greenMint10: #c6f5ec;
63
+ @greenMint20: #a8eee2;
64
+ @greenMint30: #8be7d8;
65
+ @greenMint40: #6ddfcd;
66
+ @greenMintLightBasic50: #4fd8c3;
67
+ @greenMintBasic60: #00c5a8;
68
+ @greenMint70: #00b59a;
69
+ @greenMint80: #00a58d;
70
+ @greenMint90: #00957f;
71
+ @greenMint100: #008571;
72
+ @greenMint110: #007564;
73
+ @blue0: #2291ff;
74
+ @blue10: #cdedff;
75
+ @blue20: #aeddff;
76
+ @blue30: #8fcdff;
77
+ @blue40: #70bdff;
78
+ @blueLightBasic50: #51adff;
79
+ @blueBasic60: #2291ff;
80
+ @blue70: #1f87ef;
81
+ @blue80: #1c7edf;
82
+ @blue90: #1874cf;
83
+ @blue100: #156abe;
84
+ @blue110: #1261ae;
85
+ @blueDark0: #366af3;
86
+ @blueDark10: #dde6ff;
87
+ @blueDark20: #becfff;
88
+ @blueDark30: #9fb8ff;
89
+ @blueDark40: #80a1ff;
90
+ @blueDarkLightBasic50: #618aff;
91
+ @blueDarkBasic60: #366af3;
92
+ @blueDark70: #3365e8;
93
+ @blueDark80: #3060dc;
94
+ @blueDark90: #2e5ad1;
95
+ @blueDark100: #2b55c5;
96
+ @blueDark110: #2850ba;
97
+ @purple0: #b750d1;
98
+ @purple10: #f7d7ff;
99
+ @purple20: #eabdf6;
100
+ @purple30: #dea3ec;
101
+ @purple40: #d189e3;
102
+ @purpleLightBasic50: #c56fda;
103
+ @purpleBasic60: #b750d1;
104
+ @purple70: #aa49c3;
105
+ @purple80: #9e43b5;
106
+ @purple90: #913ca6;
107
+ @purple100: #843698;
108
+ @purple110: #782f8a;
109
+ @grayscaleText: #222;
110
+ @grayscaleSecondaryText: #757575;
111
+ @grayscaleDisabledText: #adadad;
112
+ @grayscaleDarkBackground: #d6d6d6;
113
+ @grayscaleBackground: #e6e6e6;
114
+ @grayscaleLightBackground: #f0f0f0;
115
+ @grayscaleWhite: #fff;
116
+ @grayscale865Text: rgba(0, 0, 0, 0.865);
117
+ @grayscale54SecondaryText: rgba(0, 0, 0, 0.54);
118
+ @grayscale32DisabledText: rgba(0, 0, 0, 0.32);
119
+ @grayscale16DarkBackground: rgba(0, 0, 0, 0.16);
120
+ @grayscale10Background: rgba(0, 0, 0, 0.1);
121
+ @grayscale06LightBackground: rgba(0, 0, 0, 0.06);
package/dist/cjs/colors.d.ts ADDED
@@ -0,0 +1,124 @@
1
+ export declare const KonturColors: {
2
+ red0: string;
3
+ red10: string;
4
+ red20: string;
5
+ red30: string;
6
+ red40: string;
7
+ redLightBasic50: string;
8
+ redBasic60: string;
9
+ red70: string;
10
+ red80: string;
11
+ red90: string;
12
+ red100: string;
13
+ red110: string;
14
+ orange0: string;
15
+ orange10: string;
16
+ orange20: string;
17
+ orange30: string;
18
+ orange40: string;
19
+ orangeLightBasic50: string;
20
+ orangeBasic60: string;
21
+ orange70: string;
22
+ orange80: string;
23
+ orange90: string;
24
+ orange100: string;
25
+ orange110: string;
26
+ yellow0: string;
27
+ yellow10: string;
28
+ yellow20: string;
29
+ yellow30: string;
30
+ yellow40: string;
31
+ yellowLightBasic50: string;
32
+ yellowBasic60: string;
33
+ yellow70: string;
34
+ yellow80: string;
35
+ yellow90: string;
36
+ yellow100: string;
37
+ 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;
51
+ green10: string;
52
+ green20: string;
53
+ green30: string;
54
+ green40: string;
55
+ greenLightBasic50: string;
56
+ greenBasic60: string;
57
+ green70: string;
58
+ green80: string;
59
+ green90: string;
60
+ green100: string;
61
+ green110: string;
62
+ greenMint0: string;
63
+ greenMint10: string;
64
+ greenMint20: string;
65
+ greenMint30: string;
66
+ greenMint40: string;
67
+ greenMintLightBasic50: string;
68
+ greenMintBasic60: string;
69
+ greenMint70: string;
70
+ greenMint80: string;
71
+ greenMint90: string;
72
+ greenMint100: string;
73
+ greenMint110: string;
74
+ blue0: string;
75
+ blue10: string;
76
+ blue20: string;
77
+ blue30: string;
78
+ blue40: string;
79
+ blueLightBasic50: string;
80
+ blueBasic60: string;
81
+ blue70: string;
82
+ blue80: string;
83
+ blue90: string;
84
+ blue100: string;
85
+ blue110: string;
86
+ blueDark0: string;
87
+ blueDark10: string;
88
+ blueDark20: string;
89
+ blueDark30: string;
90
+ blueDark40: string;
91
+ blueDarkLightBasic50: string;
92
+ blueDarkBasic60: string;
93
+ blueDark70: string;
94
+ blueDark80: string;
95
+ blueDark90: string;
96
+ blueDark100: string;
97
+ blueDark110: string;
98
+ purple0: string;
99
+ purple10: string;
100
+ purple20: string;
101
+ purple30: string;
102
+ purple40: string;
103
+ purpleLightBasic50: string;
104
+ purpleBasic60: string;
105
+ purple70: string;
106
+ purple80: string;
107
+ purple90: string;
108
+ purple100: string;
109
+ purple110: string;
110
+ grayscaleText: string;
111
+ grayscaleSecondaryText: string;
112
+ grayscaleDisabledText: string;
113
+ grayscaleDarkBackground: string;
114
+ grayscaleBackground: string;
115
+ grayscaleLightBackground: string;
116
+ grayscaleWhite: string;
117
+ grayscale865Text: string;
118
+ grayscale54SecondaryText: string;
119
+ grayscale32DisabledText: string;
120
+ grayscale16DarkBackground: string;
121
+ grayscale10Background: string;
122
+ grayscale06LightBackground: string;
123
+ };
124
+ export declare type TKonturColor = keyof typeof KonturColors;
package/dist/cjs/colors.js ADDED
@@ -0,0 +1,126 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.KonturColors = void 0;
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',
18
+ orange10: '#ffe0c3',
19
+ orange20: '#ffd1a0',
20
+ orange30: '#ffc17d',
21
+ orange40: '#ffb259',
22
+ orangeLightBasic50: '#ffa236',
23
+ orangeBasic60: '#ff8227',
24
+ orange70: '#ea7324',
25
+ orange80: '#d46421',
26
+ orange90: '#bf561e',
27
+ orange100: '#a9471b',
28
+ orange110: '#943817',
29
+ yellow0: '#feca42',
30
+ yellow10: '#ffeec2',
31
+ yellow20: '#fde1a1',
32
+ yellow30: '#fdd481',
33
+ yellow40: '#fcc660',
34
+ yellowLightBasic50: '#fcb73e',
35
+ yellowBasic60: '#fda70c',
36
+ yellow70: '#f69912',
37
+ yellow80: '#ef8b17',
38
+ yellow90: '#e77e1b',
39
+ yellow100: '#de711e',
40
+ 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',
54
+ green10: '#c7f9cc',
55
+ green20: '#a7eeb3',
56
+ green30: '#87e39a',
57
+ green40: '#67d881',
58
+ greenLightBasic50: '#46cd68',
59
+ greenBasic60: '#26ad50',
60
+ green70: '#23a14a',
61
+ green80: '#209644',
62
+ green90: '#1c8a3f',
63
+ green100: '#197f39',
64
+ green110: '#167333',
65
+ greenMint0: '#00bea2',
66
+ greenMint10: '#c6f5ec',
67
+ greenMint20: '#a8eee2',
68
+ greenMint30: '#8be7d8',
69
+ greenMint40: '#6ddfcd',
70
+ greenMintLightBasic50: '#4fd8c3',
71
+ greenMintBasic60: '#00c5a8',
72
+ greenMint70: '#00b59a',
73
+ greenMint80: '#00a58d',
74
+ greenMint90: '#00957f',
75
+ greenMint100: '#008571',
76
+ greenMint110: '#007564',
77
+ blue0: '#2291ff',
78
+ blue10: '#cdedff',
79
+ blue20: '#aeddff',
80
+ blue30: '#8fcdff',
81
+ blue40: '#70bdff',
82
+ blueLightBasic50: '#51adff',
83
+ blueBasic60: '#2291ff',
84
+ blue70: '#1f87ef',
85
+ blue80: '#1c7edf',
86
+ blue90: '#1874cf',
87
+ blue100: '#156abe',
88
+ blue110: '#1261ae',
89
+ blueDark0: '#366af3',
90
+ blueDark10: '#dde6ff',
91
+ blueDark20: '#becfff',
92
+ blueDark30: '#9fb8ff',
93
+ blueDark40: '#80a1ff',
94
+ blueDarkLightBasic50: '#618aff',
95
+ blueDarkBasic60: '#366af3',
96
+ blueDark70: '#3365e8',
97
+ blueDark80: '#3060dc',
98
+ blueDark90: '#2e5ad1',
99
+ blueDark100: '#2b55c5',
100
+ blueDark110: '#2850ba',
101
+ purple0: '#b750d1',
102
+ purple10: '#f7d7ff',
103
+ purple20: '#eabdf6',
104
+ purple30: '#dea3ec',
105
+ purple40: '#d189e3',
106
+ purpleLightBasic50: '#c56fda',
107
+ purpleBasic60: '#b750d1',
108
+ purple70: '#aa49c3',
109
+ purple80: '#9e43b5',
110
+ purple90: '#913ca6',
111
+ purple100: '#843698',
112
+ purple110: '#782f8a',
113
+ grayscaleText: '#222',
114
+ grayscaleSecondaryText: '#757575',
115
+ grayscaleDisabledText: '#adadad',
116
+ grayscaleDarkBackground: '#d6d6d6',
117
+ grayscaleBackground: '#e6e6e6',
118
+ grayscaleLightBackground: '#f0f0f0',
119
+ grayscaleWhite: '#fff',
120
+ grayscale865Text: 'rgba(0, 0, 0, 0.865)',
121
+ grayscale54SecondaryText: 'rgba(0, 0, 0, 0.54)',
122
+ grayscale32DisabledText: 'rgba(0, 0, 0, 0.32)',
123
+ grayscale16DarkBackground: 'rgba(0, 0, 0, 0.16)',
124
+ grayscale10Background: 'rgba(0, 0, 0, 0.1)',
125
+ grayscale06LightBackground: 'rgba(0, 0, 0, 0.06)',
126
+ };
package/dist/esm/colors.d.ts ADDED
@@ -0,0 +1,124 @@
1
+ export declare const KonturColors: {
2
+ red0: string;
3
+ red10: string;
4
+ red20: string;
5
+ red30: string;
6
+ red40: string;
7
+ redLightBasic50: string;
8
+ redBasic60: string;
9
+ red70: string;
10
+ red80: string;
11
+ red90: string;
12
+ red100: string;
13
+ red110: string;
14
+ orange0: string;
15
+ orange10: string;
16
+ orange20: string;
17
+ orange30: string;
18
+ orange40: string;
19
+ orangeLightBasic50: string;
20
+ orangeBasic60: string;
21
+ orange70: string;
22
+ orange80: string;
23
+ orange90: string;
24
+ orange100: string;
25
+ orange110: string;
26
+ yellow0: string;
27
+ yellow10: string;
28
+ yellow20: string;
29
+ yellow30: string;
30
+ yellow40: string;
31
+ yellowLightBasic50: string;
32
+ yellowBasic60: string;
33
+ yellow70: string;
34
+ yellow80: string;
35
+ yellow90: string;
36
+ yellow100: string;
37
+ 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;
51
+ green10: string;
52
+ green20: string;
53
+ green30: string;
54
+ green40: string;
55
+ greenLightBasic50: string;
56
+ greenBasic60: string;
57
+ green70: string;
58
+ green80: string;
59
+ green90: string;
60
+ green100: string;
61
+ green110: string;
62
+ greenMint0: string;
63
+ greenMint10: string;
64
+ greenMint20: string;
65
+ greenMint30: string;
66
+ greenMint40: string;
67
+ greenMintLightBasic50: string;
68
+ greenMintBasic60: string;
69
+ greenMint70: string;
70
+ greenMint80: string;
71
+ greenMint90: string;
72
+ greenMint100: string;
73
+ greenMint110: string;
74
+ blue0: string;
75
+ blue10: string;
76
+ blue20: string;
77
+ blue30: string;
78
+ blue40: string;
79
+ blueLightBasic50: string;
80
+ blueBasic60: string;
81
+ blue70: string;
82
+ blue80: string;
83
+ blue90: string;
84
+ blue100: string;
85
+ blue110: string;
86
+ blueDark0: string;
87
+ blueDark10: string;
88
+ blueDark20: string;
89
+ blueDark30: string;
90
+ blueDark40: string;
91
+ blueDarkLightBasic50: string;
92
+ blueDarkBasic60: string;
93
+ blueDark70: string;
94
+ blueDark80: string;
95
+ blueDark90: string;
96
+ blueDark100: string;
97
+ blueDark110: string;
98
+ purple0: string;
99
+ purple10: string;
100
+ purple20: string;
101
+ purple30: string;
102
+ purple40: string;
103
+ purpleLightBasic50: string;
104
+ purpleBasic60: string;
105
+ purple70: string;
106
+ purple80: string;
107
+ purple90: string;
108
+ purple100: string;
109
+ purple110: string;
110
+ grayscaleText: string;
111
+ grayscaleSecondaryText: string;
112
+ grayscaleDisabledText: string;
113
+ grayscaleDarkBackground: string;
114
+ grayscaleBackground: string;
115
+ grayscaleLightBackground: string;
116
+ grayscaleWhite: string;
117
+ grayscale865Text: string;
118
+ grayscale54SecondaryText: string;
119
+ grayscale32DisabledText: string;
120
+ grayscale16DarkBackground: string;
121
+ grayscale10Background: string;
122
+ grayscale06LightBackground: string;
123
+ };
124
+ export declare type TKonturColor = keyof typeof KonturColors;
package/dist/esm/colors.js ADDED
@@ -0,0 +1,123 @@
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',
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
+ yellow0: '#feca42',
27
+ yellow10: '#ffeec2',
28
+ yellow20: '#fde1a1',
29
+ yellow30: '#fdd481',
30
+ yellow40: '#fcc660',
31
+ yellowLightBasic50: '#fcb73e',
32
+ yellowBasic60: '#fda70c',
33
+ yellow70: '#f69912',
34
+ yellow80: '#ef8b17',
35
+ yellow90: '#e77e1b',
36
+ yellow100: '#de711e',
37
+ 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',
51
+ green10: '#c7f9cc',
52
+ green20: '#a7eeb3',
53
+ green30: '#87e39a',
54
+ green40: '#67d881',
55
+ greenLightBasic50: '#46cd68',
56
+ greenBasic60: '#26ad50',
57
+ green70: '#23a14a',
58
+ green80: '#209644',
59
+ green90: '#1c8a3f',
60
+ green100: '#197f39',
61
+ green110: '#167333',
62
+ greenMint0: '#00bea2',
63
+ greenMint10: '#c6f5ec',
64
+ greenMint20: '#a8eee2',
65
+ greenMint30: '#8be7d8',
66
+ greenMint40: '#6ddfcd',
67
+ greenMintLightBasic50: '#4fd8c3',
68
+ greenMintBasic60: '#00c5a8',
69
+ greenMint70: '#00b59a',
70
+ greenMint80: '#00a58d',
71
+ greenMint90: '#00957f',
72
+ greenMint100: '#008571',
73
+ greenMint110: '#007564',
74
+ blue0: '#2291ff',
75
+ blue10: '#cdedff',
76
+ blue20: '#aeddff',
77
+ blue30: '#8fcdff',
78
+ blue40: '#70bdff',
79
+ blueLightBasic50: '#51adff',
80
+ blueBasic60: '#2291ff',
81
+ blue70: '#1f87ef',
82
+ blue80: '#1c7edf',
83
+ blue90: '#1874cf',
84
+ blue100: '#156abe',
85
+ blue110: '#1261ae',
86
+ blueDark0: '#366af3',
87
+ blueDark10: '#dde6ff',
88
+ blueDark20: '#becfff',
89
+ blueDark30: '#9fb8ff',
90
+ blueDark40: '#80a1ff',
91
+ blueDarkLightBasic50: '#618aff',
92
+ blueDarkBasic60: '#366af3',
93
+ blueDark70: '#3365e8',
94
+ blueDark80: '#3060dc',
95
+ blueDark90: '#2e5ad1',
96
+ blueDark100: '#2b55c5',
97
+ blueDark110: '#2850ba',
98
+ purple0: '#b750d1',
99
+ purple10: '#f7d7ff',
100
+ purple20: '#eabdf6',
101
+ purple30: '#dea3ec',
102
+ purple40: '#d189e3',
103
+ purpleLightBasic50: '#c56fda',
104
+ purpleBasic60: '#b750d1',
105
+ purple70: '#aa49c3',
106
+ purple80: '#9e43b5',
107
+ purple90: '#913ca6',
108
+ purple100: '#843698',
109
+ purple110: '#782f8a',
110
+ grayscaleText: '#222',
111
+ grayscaleSecondaryText: '#757575',
112
+ grayscaleDisabledText: '#adadad',
113
+ grayscaleDarkBackground: '#d6d6d6',
114
+ grayscaleBackground: '#e6e6e6',
115
+ grayscaleLightBackground: '#f0f0f0',
116
+ grayscaleWhite: '#fff',
117
+ grayscale865Text: 'rgba(0, 0, 0, 0.865)',
118
+ grayscale54SecondaryText: 'rgba(0, 0, 0, 0.54)',
119
+ grayscale32DisabledText: 'rgba(0, 0, 0, 0.32)',
120
+ grayscale16DarkBackground: 'rgba(0, 0, 0, 0.16)',
121
+ grayscale10Background: 'rgba(0, 0, 0, 0.1)',
122
+ grayscale06LightBackground: 'rgba(0, 0, 0, 0.06)',
123
+ };
package/package.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "name": "@skbkontur/colors",
3
+ "version": "0.4.4",
4
+ "publishConfig": {
5
+ "access": "public",
6
+ "registry": "https://registry.npmjs.org/"
7
+ },
8
+ "module": "dist/esm/colors.js",
9
+ "main": "dist/cjs/colors.js",
10
+ "license": "UNLICENSED",
11
+ "scripts": {
12
+ "prebuild": "rimraf dist && node --require ./scripts/babel-register -- scripts/generate.ts",
13
+ "build": "npm run build:cjs && npm run build:esm && npm run build:prettier",
14
+ "build:cjs": "tsc -p tsconfig.cjs.json",
15
+ "build:esm": "tsc -p tsconfig.esm.json",
16
+ "build:prettier": "prettier src colors.* --write"
17
+ },
18
+ "sideEffects": false,
19
+ "files": [
20
+ "dist",
21
+ "colors.*"
22
+ ],
23
+ "author": "Kontur",
24
+ "devDependencies": {
25
+ "@babel/preset-typescript": "7.22.5",
26
+ "@babel/register": "7.22.5",
27
+ "rimraf": "^4.1.2"
28
+ }
29
+ }