@skbkontur/colors 0.4.4 → 0.5.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 (8) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/colors.css +72 -35
  3. package/colors.less +72 -35
  4. package/dist/cjs/colors.d.ts +60 -23
  5. package/dist/cjs/colors.js +72 -35
  6. package/dist/esm/colors.d.ts +60 -23
  7. package/dist/esm/colors.js +72 -35
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.4...@skbkontur/colors@0.5.0) (2024-06-25)
7
+
8
+
9
+ ### Features
10
+
11
+ * **colors:** update colors 2024 ([7020c9b](https://git.skbkontur.ru/ui/ui-parking/commits/7020c9b1311e4e37973847af70bad28cbbd2902d))
12
+
13
+
14
+ ### Reverts
15
+
16
+ * remove screenshots in ie11 and obsolete packages ([57a6e89](https://git.skbkontur.ru/ui/ui-parking/commits/57a6e8962089825b6c71c1b96f4d09bc8a5a4ef7))
17
+
18
+
19
+
20
+
21
+
6
22
  ## [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
23
 
8
24
  **Note:** Version bump only for package @skbkontur/colors
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.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "registry": "https://registry.npmjs.org/"