agroptima-design-system 0.19.0 → 0.20.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.
- package/.storybook/preview.ts +0 -2
- package/package.json +1 -1
- package/src/atoms/Alert.scss +1 -1
- package/src/atoms/Badge.scss +2 -2
- package/src/atoms/Button/Button.scss +29 -17
- package/src/atoms/Button/IconButton.scss +2 -2
- package/src/atoms/CardMenu/CardMenu.scss +8 -3
- package/src/atoms/CardsTable/CardsTable.scss +1 -1
- package/src/atoms/Collapsible.scss +3 -3
- package/src/docs/colors.module.scss +80 -4
- package/src/icons/checkbox-primary-active.svg +1 -1
- package/src/icons/checkbox-primary-hover-inactive.svg +1 -1
- package/src/icons/empty-customize.svg +19 -1
- package/src/settings/_color_alias.scss +11 -13
- package/src/settings/_colors.scss +69 -72
- package/src/stories/Changelog.mdx +6 -0
- package/src/stories/Colors.mdx +95 -14
- package/src/stories/Pagination.stories.js +0 -1
package/.storybook/preview.ts
CHANGED
package/package.json
CHANGED
package/src/atoms/Alert.scss
CHANGED
package/src/atoms/Badge.scss
CHANGED
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
@include button-style(
|
|
52
52
|
color_alias.$primary-color-600,
|
|
53
53
|
color_alias.$neutral-white,
|
|
54
|
-
color_alias.$primary-color-
|
|
54
|
+
color_alias.$primary-color-800
|
|
55
55
|
);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
&.primary-outlined {
|
|
59
59
|
@include button-style(
|
|
60
|
-
|
|
60
|
+
color_alias.$neutral-white,
|
|
61
61
|
color_alias.$primary-color-600,
|
|
62
62
|
color_alias.$primary-color-50
|
|
63
63
|
);
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
|
|
67
67
|
&.primary-ghost {
|
|
68
68
|
@include button-style(
|
|
69
|
-
|
|
69
|
+
color_alias.$neutral-white,
|
|
70
70
|
color_alias.$primary-color-600,
|
|
71
71
|
transparent
|
|
72
72
|
);
|
|
@@ -78,15 +78,27 @@
|
|
|
78
78
|
|
|
79
79
|
&.error {
|
|
80
80
|
@include button-style(
|
|
81
|
-
color_alias.$error-color-
|
|
82
|
-
color_alias.$neutral-
|
|
83
|
-
color_alias.$error-color-
|
|
81
|
+
color_alias.$error-color-1000,
|
|
82
|
+
color_alias.$neutral-color-1000,
|
|
83
|
+
color_alias.$error-color-700
|
|
84
84
|
);
|
|
85
|
+
&:not(:disabled):hover,
|
|
86
|
+
&:not(:disabled):active {
|
|
87
|
+
color: color_alias.$neutral-white;
|
|
88
|
+
> .icon {
|
|
89
|
+
> svg {
|
|
90
|
+
fill: color_alias.$neutral-white;
|
|
91
|
+
path {
|
|
92
|
+
fill: color_alias.$neutral-white;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
85
97
|
}
|
|
86
98
|
|
|
87
99
|
&.error-outlined {
|
|
88
100
|
@include button-style(
|
|
89
|
-
|
|
101
|
+
color_alias.$neutral-white,
|
|
90
102
|
color_alias.$error-color-600,
|
|
91
103
|
color_alias.$error-color-50
|
|
92
104
|
);
|
|
@@ -95,7 +107,7 @@
|
|
|
95
107
|
|
|
96
108
|
&.error-ghost {
|
|
97
109
|
@include button-style(
|
|
98
|
-
|
|
110
|
+
color_alias.$neutral-white,
|
|
99
111
|
color_alias.$error-color-600,
|
|
100
112
|
transparent
|
|
101
113
|
);
|
|
@@ -127,7 +139,7 @@
|
|
|
127
139
|
|
|
128
140
|
&.success-outlined {
|
|
129
141
|
@include button-style(
|
|
130
|
-
|
|
142
|
+
color_alias.$neutral-white,
|
|
131
143
|
color_alias.$neutral-color-900,
|
|
132
144
|
color_alias.$success-color-50
|
|
133
145
|
);
|
|
@@ -136,7 +148,7 @@
|
|
|
136
148
|
|
|
137
149
|
&.success-ghost {
|
|
138
150
|
@include button-style(
|
|
139
|
-
|
|
151
|
+
color_alias.$neutral-white,
|
|
140
152
|
color_alias.$success-color-1000,
|
|
141
153
|
transparent
|
|
142
154
|
);
|
|
@@ -168,7 +180,7 @@
|
|
|
168
180
|
|
|
169
181
|
&.warning-outlined {
|
|
170
182
|
@include button-style(
|
|
171
|
-
|
|
183
|
+
color_alias.$neutral-white,
|
|
172
184
|
color_alias.$neutral-color-900,
|
|
173
185
|
color_alias.$warning-color-50
|
|
174
186
|
);
|
|
@@ -177,7 +189,7 @@
|
|
|
177
189
|
|
|
178
190
|
&.warning-ghost {
|
|
179
191
|
@include button-style(
|
|
180
|
-
|
|
192
|
+
color_alias.$neutral-white,
|
|
181
193
|
color_alias.$warning-color-1000,
|
|
182
194
|
transparent
|
|
183
195
|
);
|
|
@@ -197,7 +209,7 @@
|
|
|
197
209
|
|
|
198
210
|
&.info-outlined {
|
|
199
211
|
@include button-style(
|
|
200
|
-
|
|
212
|
+
color_alias.$neutral-white,
|
|
201
213
|
color_alias.$info-color-600,
|
|
202
214
|
color_alias.$info-color-50
|
|
203
215
|
);
|
|
@@ -206,7 +218,7 @@
|
|
|
206
218
|
|
|
207
219
|
&.info-ghost {
|
|
208
220
|
@include button-style(
|
|
209
|
-
|
|
221
|
+
color_alias.$neutral-white,
|
|
210
222
|
color_alias.$info-color-600,
|
|
211
223
|
transparent
|
|
212
224
|
);
|
|
@@ -226,7 +238,7 @@
|
|
|
226
238
|
|
|
227
239
|
&.neutral-outlined {
|
|
228
240
|
@include button-style(
|
|
229
|
-
|
|
241
|
+
color_alias.$neutral-white,
|
|
230
242
|
color_alias.$neutral-color-1000,
|
|
231
243
|
color_alias.$neutral-color-50
|
|
232
244
|
);
|
|
@@ -235,7 +247,7 @@
|
|
|
235
247
|
|
|
236
248
|
&.neutral-ghost {
|
|
237
249
|
@include button-style(
|
|
238
|
-
|
|
250
|
+
color_alias.$neutral-white,
|
|
239
251
|
color_alias.$neutral-color-1000,
|
|
240
252
|
transparent
|
|
241
253
|
);
|
|
@@ -275,7 +287,7 @@
|
|
|
275
287
|
&.info-outlined,
|
|
276
288
|
&.neutral-outlined {
|
|
277
289
|
&:disabled {
|
|
278
|
-
background:
|
|
290
|
+
background: color_alias.$neutral-color-50;
|
|
279
291
|
border: 1px solid color_alias.$neutral-color-400;
|
|
280
292
|
}
|
|
281
293
|
}
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
padding: config.$space-3x;
|
|
13
13
|
gap: config.$space-3x;
|
|
14
14
|
border-radius: config.$corner-radius-xxs;
|
|
15
|
-
border-bottom: 1px solid color_alias.$neutral-color-200;
|
|
16
15
|
text-decoration: none;
|
|
17
16
|
cursor: default;
|
|
18
17
|
&:hover {
|
|
@@ -57,13 +56,17 @@
|
|
|
57
56
|
|
|
58
57
|
&.primary {
|
|
59
58
|
background: color_alias.$neutral-white;
|
|
59
|
+
border-top: 1px solid color_alias.$neutral-color-200;
|
|
60
|
+
border-bottom: 1px solid color_alias.$neutral-color-200;
|
|
60
61
|
|
|
61
62
|
&.active {
|
|
62
|
-
background-color:
|
|
63
|
+
background-color: transparent;
|
|
64
|
+
border-top: 1px solid color_alias.$primary-color-600;
|
|
65
|
+
border-bottom: 1px solid color_alias.$primary-color-600;
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
&.error {
|
|
66
|
-
border: 1px solid color_alias.$error-color-
|
|
69
|
+
border: 1px solid color_alias.$error-color-1000;
|
|
67
70
|
background-color: color_alias.$error-color-50;
|
|
68
71
|
}
|
|
69
72
|
|
|
@@ -78,6 +81,8 @@
|
|
|
78
81
|
|
|
79
82
|
&:not(.disabled):hover {
|
|
80
83
|
background: color_alias.$primary-color-50;
|
|
84
|
+
border-top: 1px solid color_alias.$neutral-color-200;
|
|
85
|
+
border-bottom: 1px solid color_alias.$neutral-color-200;
|
|
81
86
|
}
|
|
82
87
|
|
|
83
88
|
&.disabled {
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
&.primary {
|
|
42
42
|
&.open {
|
|
43
43
|
.header {
|
|
44
|
-
background:
|
|
45
|
-
border-bottom:
|
|
44
|
+
background: transparent;
|
|
45
|
+
border-bottom: 3px solid color_alias.$primary-color-600;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
|
|
66
66
|
.header {
|
|
67
67
|
color: color_alias.$neutral-color-1000;
|
|
68
|
-
background:
|
|
68
|
+
background: transparent;
|
|
69
69
|
border-bottom: 1px solid color_alias.$neutral-color-200;
|
|
70
70
|
|
|
71
71
|
.icon {
|
|
@@ -1,6 +1,82 @@
|
|
|
1
|
-
@use
|
|
1
|
+
@use '../settings/color_alias';
|
|
2
|
+
// :export {
|
|
3
|
+
// primary: color_alias.$primary-color-1000;
|
|
4
|
+
// neutral: color_alias.$neutral-color-1000;
|
|
5
|
+
// error: color_alias.$error-color-1000;
|
|
6
|
+
// success: color_alias.$success-color-1000;
|
|
7
|
+
// warning: color_alias.$warning-color-1000;
|
|
8
|
+
// info: color_alias.$info-color-1000;
|
|
9
|
+
// neutralBlack: color_alias.$neutral-black;
|
|
10
|
+
// neutralWhite: color_alias.$neutral-white;
|
|
11
|
+
// }
|
|
12
|
+
|
|
2
13
|
:export {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
14
|
+
primaryColor1000: color_alias.$primary-color-1000;
|
|
15
|
+
primaryColor900: color_alias.$primary-color-900;
|
|
16
|
+
primaryColor800: color_alias.$primary-color-800;
|
|
17
|
+
primaryColor700: color_alias.$primary-color-700;
|
|
18
|
+
primaryColor600: color_alias.$primary-color-600;
|
|
19
|
+
primaryColor500: color_alias.$primary-color-500;
|
|
20
|
+
primaryColor400: color_alias.$primary-color-400;
|
|
21
|
+
primaryColor300: color_alias.$primary-color-300;
|
|
22
|
+
primaryColor200: color_alias.$primary-color-200;
|
|
23
|
+
primaryColor100: color_alias.$primary-color-100;
|
|
24
|
+
primaryColor50: color_alias.$primary-color-50;
|
|
25
|
+
neutralColor1000: color_alias.$neutral-color-1000;
|
|
26
|
+
neutralColor900: color_alias.$neutral-color-900;
|
|
27
|
+
neutralColor800: color_alias.$neutral-color-800;
|
|
28
|
+
neutralColor700: color_alias.$neutral-color-700;
|
|
29
|
+
neutralColor600: color_alias.$neutral-color-600;
|
|
30
|
+
neutralColor500: color_alias.$neutral-color-500;
|
|
31
|
+
neutralColor400: color_alias.$neutral-color-400;
|
|
32
|
+
neutralColor300: color_alias.$neutral-color-300;
|
|
33
|
+
neutralColor200: color_alias.$neutral-color-200;
|
|
34
|
+
neutralColor100: color_alias.$neutral-color-100;
|
|
35
|
+
neutralColor50: color_alias.$neutral-color-50;
|
|
36
|
+
errorColor1000: color_alias.$error-color-1000;
|
|
37
|
+
errorColor900: color_alias.$error-color-900;
|
|
38
|
+
errorColor800: color_alias.$error-color-800;
|
|
39
|
+
errorColor700: color_alias.$error-color-700;
|
|
40
|
+
errorColor600: color_alias.$error-color-600;
|
|
41
|
+
errorColor500: color_alias.$error-color-500;
|
|
42
|
+
errorColor400: color_alias.$error-color-400;
|
|
43
|
+
errorColor300: color_alias.$error-color-300;
|
|
44
|
+
errorColor200: color_alias.$error-color-200;
|
|
45
|
+
errorColor100: color_alias.$error-color-100;
|
|
46
|
+
errorColor50: color_alias.$error-color-50;
|
|
47
|
+
successColor1000: color_alias.$success-color-1000;
|
|
48
|
+
successColor900: color_alias.$success-color-900;
|
|
49
|
+
successColor800: color_alias.$success-color-800;
|
|
50
|
+
successColor700: color_alias.$success-color-700;
|
|
51
|
+
successColor600: color_alias.$success-color-600;
|
|
52
|
+
successColor500: color_alias.$success-color-500;
|
|
53
|
+
successColor400: color_alias.$success-color-400;
|
|
54
|
+
successColor300: color_alias.$success-color-300;
|
|
55
|
+
successColor200: color_alias.$success-color-200;
|
|
56
|
+
successColor100: color_alias.$success-color-100;
|
|
57
|
+
successColor50: color_alias.$success-color-50;
|
|
58
|
+
warningColor1000: color_alias.$warning-color-1000;
|
|
59
|
+
warningColor900: color_alias.$warning-color-900;
|
|
60
|
+
warningColor800: color_alias.$warning-color-800;
|
|
61
|
+
warningColor700: color_alias.$warning-color-700;
|
|
62
|
+
warningColor600: color_alias.$warning-color-600;
|
|
63
|
+
warningColor500: color_alias.$warning-color-500;
|
|
64
|
+
warningColor400: color_alias.$warning-color-400;
|
|
65
|
+
warningColor300: color_alias.$warning-color-300;
|
|
66
|
+
warningColor200: color_alias.$warning-color-200;
|
|
67
|
+
warningColor100: color_alias.$warning-color-100;
|
|
68
|
+
warningColor50: color_alias.$warning-color-50;
|
|
69
|
+
infoColor1000: color_alias.$info-color-1000;
|
|
70
|
+
infoColor900: color_alias.$info-color-900;
|
|
71
|
+
infoColor800: color_alias.$info-color-800;
|
|
72
|
+
infoColor700: color_alias.$info-color-700;
|
|
73
|
+
infoColor600: color_alias.$info-color-600;
|
|
74
|
+
infoColor500: color_alias.$info-color-500;
|
|
75
|
+
infoColor400: color_alias.$info-color-400;
|
|
76
|
+
infoColor300: color_alias.$info-color-300;
|
|
77
|
+
infoColor200: color_alias.$info-color-200;
|
|
78
|
+
infoColor100: color_alias.$info-color-100;
|
|
79
|
+
infoColor50: color_alias.$info-color-50;
|
|
80
|
+
neutralBlack: color_alias.$neutral-black;
|
|
81
|
+
neutralWhite: color_alias.$neutral-white;
|
|
6
82
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="border" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="border" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#eb004dff"/><path class="background" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#eb004dff"/><path class="check" d="m7.085 13.699-3.793-3.98L2 11.063 7.085 16.4 18 4.946 16.718 3.6 7.085 13.699Z" fill="#fff"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="background" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#fff"/><path class="border" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="background" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#fff"/><path class="border" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#eb004dff"/></svg>
|
|
@@ -1 +1,19 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M20 8.96109L15.589 3.42537C15.4847 3.2933 15.355 3.18694 15.2089 3.11353C15.0628 3.04012 14.9037 3.0014 14.7424 3H5.25763C4.93225 3 4.62301 3.16025 4.41101 3.42537L0 8.96109V12H20V8.96109Z" fill="url(#paint0_linear_1701_2134)"/>
|
|
3
|
+
<path d="M19 11.632L15.029 7.32069C14.933 7.21889 14.8147 7.13757 14.682 7.08224C14.5493 7.02691 14.4055 6.99887 14.2601 7.00003H5.73986C5.44738 7.00003 5.16154 7.11326 4.97098 7.32069L1 11.632V14H19V11.632Z" fill="url(#paint1_linear_1701_2134)"/>
|
|
4
|
+
<path d="M19.9995 14.7709C19.9995 15.1461 19.8226 15.4835 19.5433 15.7097L19.4866 15.7536C19.2652 15.9139 18.9948 16.0004 18.717 16H1.28304C1.12542 16 0.974722 15.9727 0.835542 15.9226L0.766412 15.8962C0.538345 15.7993 0.344576 15.6414 0.208555 15.4416C0.0725349 15.2418 9.40188e-05 15.0087 0 14.7704L0 9H4.85241C5.38839 9 5.82022 9.421 5.82022 9.93175V9.93835C5.82022 10.4495 6.25711 10.8617 6.7931 10.8617H13.2064C13.4641 10.8615 13.7111 10.7638 13.8935 10.5901C14.0758 10.4164 14.1786 10.1808 14.1793 9.93483C14.1793 9.42188 14.6116 9 15.1471 9H20L19.9995 14.7709Z" fill="url(#paint2_linear_1701_2134)"/>
|
|
5
|
+
<defs>
|
|
6
|
+
<linearGradient id="paint0_linear_1701_2134" x1="10" y1="3" x2="10" y2="7.0455" gradientUnits="userSpaceOnUse">
|
|
7
|
+
<stop stop-color="#CC003C"/>
|
|
8
|
+
<stop offset="1" stop-color="#EB004D"/>
|
|
9
|
+
</linearGradient>
|
|
10
|
+
<linearGradient id="paint1_linear_1701_2134" x1="12.4021" y1="14" x2="12.4021" y2="6.62788" gradientUnits="userSpaceOnUse">
|
|
11
|
+
<stop stop-color="#FFEDEE"/>
|
|
12
|
+
<stop offset="1" stop-color="#FFC7CC"/>
|
|
13
|
+
</linearGradient>
|
|
14
|
+
<linearGradient id="paint2_linear_1701_2134" x1="10" y1="9" x2="10" y2="16" gradientUnits="userSpaceOnUse">
|
|
15
|
+
<stop stop-color="#FF5077"/>
|
|
16
|
+
<stop offset="1" stop-color="#FFA1AD"/>
|
|
17
|
+
</linearGradient>
|
|
18
|
+
</defs>
|
|
19
|
+
</svg>
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
@import './colors';
|
|
2
2
|
|
|
3
|
-
/* This file is exported like: $white-1000-bodegas -> we need to erase bodegas */
|
|
4
|
-
/* We need to delete too the Agroptima lines or crash*/
|
|
5
3
|
/* Aliases */
|
|
6
|
-
$primary-color-1000: $
|
|
7
|
-
$primary-color-900: $
|
|
8
|
-
$primary-color-800: $
|
|
9
|
-
$primary-color-700: $
|
|
10
|
-
$primary-color-600: $
|
|
11
|
-
$primary-color-500: $
|
|
12
|
-
$primary-color-400: $
|
|
13
|
-
$primary-color-300: $
|
|
14
|
-
$primary-color-200: $
|
|
15
|
-
$primary-color-100: $
|
|
16
|
-
$primary-color-50: $
|
|
4
|
+
$primary-color-1000: $magenta-1000;
|
|
5
|
+
$primary-color-900: $magenta-900;
|
|
6
|
+
$primary-color-800: $magenta-800;
|
|
7
|
+
$primary-color-700: $magenta-700;
|
|
8
|
+
$primary-color-600: $magenta-600;
|
|
9
|
+
$primary-color-500: $magenta-500;
|
|
10
|
+
$primary-color-400: $magenta-400;
|
|
11
|
+
$primary-color-300: $magenta-300;
|
|
12
|
+
$primary-color-200: $magenta-200;
|
|
13
|
+
$primary-color-100: $magenta-100;
|
|
14
|
+
$primary-color-50: $magenta-50;
|
|
17
15
|
$neutral-color-1000: $grey-1000;
|
|
18
16
|
$neutral-color-900: $grey-900;
|
|
19
17
|
$neutral-color-800: $grey-800;
|
|
@@ -1,72 +1,69 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
$grey-100: #DDDDDDFF;
|
|
71
|
-
$grey-50: #F3F3F3FF;
|
|
72
|
-
|
|
1
|
+
/* Variables */
|
|
2
|
+
$white-1000: #ffffffff;
|
|
3
|
+
$red-1000: #ff4d4fff;
|
|
4
|
+
$red-50: #ffeeebff;
|
|
5
|
+
$red-100: #ffcbc3ff;
|
|
6
|
+
$red-200: #ffa99eff;
|
|
7
|
+
$red-300: #ff867dff;
|
|
8
|
+
$red-400: #ff6561ff;
|
|
9
|
+
$red-500: #f34549ff;
|
|
10
|
+
$red-600: #db2836ff;
|
|
11
|
+
$red-700: #bd0b27ff;
|
|
12
|
+
$red-800: #9c001cff;
|
|
13
|
+
$red-900: #780314ff;
|
|
14
|
+
$magenta-1000: #ff005bff;
|
|
15
|
+
$magenta-900: #820023ff;
|
|
16
|
+
$magenta-800: #a9002fff;
|
|
17
|
+
$magenta-700: #cc003cff;
|
|
18
|
+
$magenta-600: #eb004dff;
|
|
19
|
+
$magenta-500: #ff1e60ff;
|
|
20
|
+
$magenta-400: #ff5077ff;
|
|
21
|
+
$magenta-300: #ff7990ff;
|
|
22
|
+
$magenta-200: #ffa1adff;
|
|
23
|
+
$magenta-100: #ffc7ccff;
|
|
24
|
+
$magenta-50: #ffedeeff;
|
|
25
|
+
$green-1000: #6fb62eff;
|
|
26
|
+
$green-900: #154300ff;
|
|
27
|
+
$green-800: #195800ff;
|
|
28
|
+
$green-700: #246d00ff;
|
|
29
|
+
$green-600: #388200ff;
|
|
30
|
+
$green-500: #519708ff;
|
|
31
|
+
$green-400: #6dab34ff;
|
|
32
|
+
$green-300: #8cbf5bff;
|
|
33
|
+
$green-200: #acd285ff;
|
|
34
|
+
$green-100: #cde5b3ff;
|
|
35
|
+
$green-50: #eff6e5ff;
|
|
36
|
+
$dodger-blue-1000: #1890ffff;
|
|
37
|
+
$orange-1000: #ffa940ff;
|
|
38
|
+
$dodger-blue-900: #003a7bff;
|
|
39
|
+
$dodger-blue-800: #004da1ff;
|
|
40
|
+
$dodger-blue-700: #0060c2ff;
|
|
41
|
+
$dodger-blue-600: #0074deff;
|
|
42
|
+
$dodger-blue-500: #0087f3ff;
|
|
43
|
+
$dodger-blue-400: #4f9cffff;
|
|
44
|
+
$dodger-blue-300: #7db1ffff;
|
|
45
|
+
$dodger-blue-200: #a6c6ffff;
|
|
46
|
+
$dodger-blue-100: #cbdcffff;
|
|
47
|
+
$dodger-blue-50: #eef3ffff;
|
|
48
|
+
$orange-900: #5a2e00ff;
|
|
49
|
+
$orange-800: #753d00ff;
|
|
50
|
+
$orange-700: #8f4e00ff;
|
|
51
|
+
$orange-600: #a86100ff;
|
|
52
|
+
$orange-500: #c07500ff;
|
|
53
|
+
$orange-400: #d58b2eff;
|
|
54
|
+
$orange-300: #e7a255ff;
|
|
55
|
+
$orange-200: #f5bb81ff;
|
|
56
|
+
$orange-100: #fdd6b0ff;
|
|
57
|
+
$orange-50: #fff1e4ff;
|
|
58
|
+
$black-1000: #000000ff;
|
|
59
|
+
$grey-1000: #161c26ff;
|
|
60
|
+
$grey-900: #353941ff;
|
|
61
|
+
$grey-800: #464c55ff;
|
|
62
|
+
$grey-700: #595f6aff;
|
|
63
|
+
$grey-600: #6c727fff;
|
|
64
|
+
$grey-500: #808793ff;
|
|
65
|
+
$grey-400: #959ba7ff;
|
|
66
|
+
$grey-300: #acb1bbff;
|
|
67
|
+
$grey-200: #c3c7cfff;
|
|
68
|
+
$grey-100: #dadde2ff;
|
|
69
|
+
$grey-50: #f3f3f5ff;
|
|
@@ -4,6 +4,12 @@ import { Meta } from "@storybook/blocks";
|
|
|
4
4
|
|
|
5
5
|
# Changelog
|
|
6
6
|
|
|
7
|
+
## 0.20.0
|
|
8
|
+
|
|
9
|
+
* Update colors
|
|
10
|
+
* Update Colors documentation with the final colors
|
|
11
|
+
* Update Button Ghost & Outlined transparent background to white. On disabled case, background has been changed to neutral-color-50
|
|
12
|
+
|
|
7
13
|
## 0.19.0
|
|
8
14
|
|
|
9
15
|
* Add Pagination, Ellipsis, PaginationArrow and PaginationNumber components
|
package/src/stories/Colors.mdx
CHANGED
|
@@ -3,25 +3,106 @@ import styles from "../docs/colors.module.scss";
|
|
|
3
3
|
|
|
4
4
|
<Meta title="Design System/Styles/Colors" />
|
|
5
5
|
|
|
6
|
-
#
|
|
6
|
+
# Colors
|
|
7
7
|
|
|
8
8
|
## Elements
|
|
9
9
|
|
|
10
10
|
<ColorPalette>
|
|
11
|
-
<ColorItem
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
<ColorItem
|
|
12
|
+
title="$primary-color-"
|
|
13
|
+
subtitle="All primary colors"
|
|
14
|
+
colors={{ "1000": styles.primaryColor1000,
|
|
15
|
+
"900": styles.primaryColor900,
|
|
16
|
+
"800": styles.primaryColor800,
|
|
17
|
+
"700": styles.primaryColor700,
|
|
18
|
+
"600": styles.primaryColor600,
|
|
19
|
+
"500": styles.primaryColor500,
|
|
20
|
+
"400": styles.primaryColor400,
|
|
21
|
+
"300": styles.primaryColor300,
|
|
22
|
+
"200": styles.primaryColor200,
|
|
23
|
+
"100": styles.primaryColor100,
|
|
24
|
+
"50": styles.primaryColor50, }}
|
|
25
|
+
/>
|
|
18
26
|
|
|
19
27
|
<ColorItem
|
|
20
|
-
title="
|
|
21
|
-
subtitle="All
|
|
22
|
-
colors={{ "
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
28
|
+
title="$neutral-color-"
|
|
29
|
+
subtitle="All neutral colors"
|
|
30
|
+
colors={{ "1000": styles.neutralColor1000,
|
|
31
|
+
"900": styles.neutralColor900,
|
|
32
|
+
"800": styles.neutralColor800,
|
|
33
|
+
"700": styles.neutralColor700,
|
|
34
|
+
"600": styles.neutralColor600,
|
|
35
|
+
"500": styles.neutralColor500,
|
|
36
|
+
"400": styles.neutralColor400,
|
|
37
|
+
"300": styles.neutralColor300,
|
|
38
|
+
"200": styles.neutralColor200,
|
|
39
|
+
"100": styles.neutralColor100,
|
|
40
|
+
"50": styles.neutralColor50, }}
|
|
41
|
+
/>
|
|
42
|
+
<ColorItem
|
|
43
|
+
title="$neutral-"
|
|
44
|
+
subtitle="All neutral colors"
|
|
45
|
+
colors={{ "black": styles.neutralBlack,
|
|
46
|
+
"white": styles.neutralWhite, }}
|
|
47
|
+
/>
|
|
48
|
+
<ColorItem
|
|
49
|
+
title="$error-color-"
|
|
50
|
+
subtitle="All error colors"
|
|
51
|
+
colors={{ "1000": styles.errorColor1000,
|
|
52
|
+
"900": styles.errorColor900,
|
|
53
|
+
"800": styles.errorColor800,
|
|
54
|
+
"700": styles.errorColor700,
|
|
55
|
+
"600": styles.errorColor600,
|
|
56
|
+
"500": styles.errorColor500,
|
|
57
|
+
"400": styles.errorColor400,
|
|
58
|
+
"300": styles.errorColor300,
|
|
59
|
+
"200": styles.errorColor200,
|
|
60
|
+
"100": styles.errorColor100,
|
|
61
|
+
"50": styles.errorColor50, }}
|
|
62
|
+
/>
|
|
63
|
+
<ColorItem
|
|
64
|
+
title="$success-color-"
|
|
65
|
+
subtitle="All success colors"
|
|
66
|
+
colors={{ "1000": styles.successColor1000,
|
|
67
|
+
"900": styles.successColor900,
|
|
68
|
+
"800": styles.successColor800,
|
|
69
|
+
"700": styles.successColor700,
|
|
70
|
+
"600": styles.successColor600,
|
|
71
|
+
"500": styles.successColor500,
|
|
72
|
+
"400": styles.successColor400,
|
|
73
|
+
"300": styles.successColor300,
|
|
74
|
+
"200": styles.successColor200,
|
|
75
|
+
"100": styles.successColor100,
|
|
76
|
+
"50": styles.successColor50, }}
|
|
77
|
+
/>
|
|
78
|
+
<ColorItem
|
|
79
|
+
title="$warning-color-"
|
|
80
|
+
subtitle="All warning colors"
|
|
81
|
+
colors={{ "1000": styles.warningColor1000,
|
|
82
|
+
"900": styles.warningColor900,
|
|
83
|
+
"800": styles.warningColor800,
|
|
84
|
+
"700": styles.warningColor700,
|
|
85
|
+
"600": styles.warningColor600,
|
|
86
|
+
"500": styles.warningColor500,
|
|
87
|
+
"400": styles.warningColor400,
|
|
88
|
+
"300": styles.warningColor300,
|
|
89
|
+
"200": styles.warningColor200,
|
|
90
|
+
"100": styles.warningColor100,
|
|
91
|
+
"50": styles.warningColor50, }}
|
|
92
|
+
/>
|
|
93
|
+
<ColorItem
|
|
94
|
+
title="$info-color-"
|
|
95
|
+
subtitle="All info colors"
|
|
96
|
+
colors={{ "1000": styles.infoColor1000,
|
|
97
|
+
"900": styles.infoColor900,
|
|
98
|
+
"800": styles.infoColor800,
|
|
99
|
+
"700": styles.infoColor700,
|
|
100
|
+
"600": styles.infoColor600,
|
|
101
|
+
"500": styles.infoColor500,
|
|
102
|
+
"400": styles.infoColor400,
|
|
103
|
+
"300": styles.infoColor300,
|
|
104
|
+
"200": styles.infoColor200,
|
|
105
|
+
"100": styles.infoColor100,
|
|
106
|
+
"50": styles.infoColor50, }}
|
|
26
107
|
/>
|
|
27
108
|
</ColorPalette>
|