@ibis-design/css 0.5.0 → 0.6.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/dist/ibis/ibis-design.css +20 -14
- package/dist/ibis/ibis-design.scss +20 -14
- package/dist/ibis/tailwind.preset.js +14 -10
- package/package.json +1 -1
|
@@ -27,15 +27,20 @@
|
|
|
27
27
|
--color-neutral-950: #000000;
|
|
28
28
|
--color-white: #ffffff;
|
|
29
29
|
--color-black: #000000;
|
|
30
|
-
--color-green
|
|
31
|
-
--color-red
|
|
32
|
-
--color-orange
|
|
30
|
+
--color-green: #009a08;
|
|
31
|
+
--color-red: #b70c00;
|
|
32
|
+
--color-orange: #fa8900;
|
|
33
33
|
--color-gradients-main-start: #3b1570;
|
|
34
34
|
--color-gradients-main-end: #8e0175;
|
|
35
35
|
--color-gradients-purple-start: #c519a3;
|
|
36
36
|
--color-gradients-purple-end: #713bc1;
|
|
37
37
|
--color-gradients-dark-purple-start: #713bc1;
|
|
38
38
|
--color-gradients-dark-purple-end: #bd91ff;
|
|
39
|
+
--color-gradients-skeleton-start: rgba(255, 255, 255, 0.25);
|
|
40
|
+
--color-gradients-skeleton-middle: rgba(255, 255, 255, 0.6);
|
|
41
|
+
--color-gradients-skeleton-end: rgba(255, 255, 255, 0.25);
|
|
42
|
+
--color-gradients-button-start: #9665df;
|
|
43
|
+
--color-gradients-button-end: #7945c8;
|
|
39
44
|
--spacing-0: 0;
|
|
40
45
|
--spacing-1: 0.25rem;
|
|
41
46
|
--spacing-2: 0.5rem;
|
|
@@ -175,10 +180,11 @@
|
|
|
175
180
|
--color-text-inverse: var(--color-white);
|
|
176
181
|
--color-border-default: var(--color-neutral-200);
|
|
177
182
|
--color-border-focus: var(--color-primary-300);
|
|
178
|
-
--color-status-success: var(--color-green
|
|
179
|
-
--color-status-error: var(--color-red
|
|
180
|
-
--color-status-warning: var(--color-orange
|
|
183
|
+
--color-status-success: var(--color-green);
|
|
184
|
+
--color-status-error: var(--color-red);
|
|
185
|
+
--color-status-warning: var(--color-orange);
|
|
181
186
|
--gradient-brand-primary: [object Object];
|
|
187
|
+
--gradient-skeleton: [object Object];
|
|
182
188
|
--text-style-body-font-family: var(--font-family-sans);
|
|
183
189
|
--text-style-body-font-size: var(--font-size-body-md);
|
|
184
190
|
--text-style-body-line-height: var(--line-height-normal);
|
|
@@ -220,11 +226,7 @@
|
|
|
220
226
|
--component-toaster-default-background: var(--color-neutral-200);
|
|
221
227
|
--component-toaster-default-border-color: var(--color-neutral-200);
|
|
222
228
|
--component-toaster-default-border-width: var(--border-width-thin);
|
|
223
|
-
--component-toaster-success-background: var(--color-green-500);
|
|
224
|
-
--component-toaster-success-border-color: var(--color-green-500);
|
|
225
229
|
--component-toaster-success-border-width: var(--border-width-thin);
|
|
226
|
-
--component-toaster-error-background: var(--color-red-500);
|
|
227
|
-
--component-toaster-error-border-color: var(--color-red-500);
|
|
228
230
|
--component-toaster-error-border-width: var(--border-width-thin);
|
|
229
231
|
--component-toaster-accent-background: var(--color-neutral-200);
|
|
230
232
|
--component-toaster-accent-color: var(--color-black);
|
|
@@ -234,13 +236,9 @@
|
|
|
234
236
|
--component-banner-default-background-opacity: var(--opacity-1);
|
|
235
237
|
--component-banner-default-border-color: var(--color-neutral-200);
|
|
236
238
|
--component-banner-default-border-width: var(--border-width-thin);
|
|
237
|
-
--component-banner-success-background: var(--color-green-500);
|
|
238
239
|
--component-banner-success-background-opacity: var(--opacity-1);
|
|
239
|
-
--component-banner-success-border-color: var(--color-green-500);
|
|
240
240
|
--component-banner-success-border-width: var(--border-width-thin);
|
|
241
|
-
--component-banner-error-background: var(--color-red-500);
|
|
242
241
|
--component-banner-error-background-opacity: var(--opacity-1);
|
|
243
|
-
--component-banner-error-border-color: var(--color-red-500);
|
|
244
242
|
--component-banner-error-border-width: var(--border-width-thin);
|
|
245
243
|
--component-banner-accent-background: var(--color-neutral-200);
|
|
246
244
|
--component-banner-accent-background-opacity: var(--opacity-1);
|
|
@@ -253,9 +251,17 @@
|
|
|
253
251
|
--component-button-primary-default-shadow: var(--shadow-button-inner);
|
|
254
252
|
--component-button-primary-hover-border-color: var(--color-border-default);
|
|
255
253
|
--component-toaster-default-color: var(--color-text-primary);
|
|
254
|
+
--component-toaster-success-background: var(--color-status-success);
|
|
256
255
|
--component-toaster-success-color: var(--color-text-inverse);
|
|
256
|
+
--component-toaster-success-border-color: var(--color-status-success);
|
|
257
|
+
--component-toaster-error-background: var(--color-status-error);
|
|
257
258
|
--component-toaster-error-color: var(--color-text-inverse);
|
|
259
|
+
--component-toaster-error-border-color: var(--color-status-error);
|
|
258
260
|
--component-banner-default-color: var(--color-text-primary);
|
|
261
|
+
--component-banner-success-background: var(--color-status-success);
|
|
259
262
|
--component-banner-success-color: var(--color-text-inverse);
|
|
263
|
+
--component-banner-success-border-color: var(--color-status-success);
|
|
264
|
+
--component-banner-error-background: var(--color-status-error);
|
|
260
265
|
--component-banner-error-color: var(--color-text-inverse);
|
|
266
|
+
--component-banner-error-border-color: var(--color-status-error);
|
|
261
267
|
}
|
|
@@ -25,15 +25,20 @@ $color-neutral-900: #3d3d3d;
|
|
|
25
25
|
$color-neutral-950: #000000;
|
|
26
26
|
$color-white: #ffffff;
|
|
27
27
|
$color-black: #000000;
|
|
28
|
-
$color-green
|
|
29
|
-
$color-red
|
|
30
|
-
$color-orange
|
|
28
|
+
$color-green: #009a08;
|
|
29
|
+
$color-red: #b70c00;
|
|
30
|
+
$color-orange: #fa8900;
|
|
31
31
|
$color-gradients-main-start: #3b1570;
|
|
32
32
|
$color-gradients-main-end: #8e0175;
|
|
33
33
|
$color-gradients-purple-start: #c519a3;
|
|
34
34
|
$color-gradients-purple-end: #713bc1;
|
|
35
35
|
$color-gradients-dark-purple-start: #713bc1;
|
|
36
36
|
$color-gradients-dark-purple-end: #bd91ff;
|
|
37
|
+
$color-gradients-skeleton-start: rgba(255, 255, 255, 0.25);
|
|
38
|
+
$color-gradients-skeleton-middle: rgba(255, 255, 255, 0.6);
|
|
39
|
+
$color-gradients-skeleton-end: rgba(255, 255, 255, 0.25);
|
|
40
|
+
$color-gradients-button-start: #9665df;
|
|
41
|
+
$color-gradients-button-end: #7945c8;
|
|
37
42
|
$spacing-0: 0;
|
|
38
43
|
$spacing-1: 0.25rem;
|
|
39
44
|
$spacing-2: 0.5rem;
|
|
@@ -173,10 +178,11 @@ $color-text-primary: $color-black;
|
|
|
173
178
|
$color-text-inverse: $color-white;
|
|
174
179
|
$color-border-default: $color-neutral-200;
|
|
175
180
|
$color-border-focus: $color-primary-300;
|
|
176
|
-
$color-status-success: $color-green
|
|
177
|
-
$color-status-error: $color-red
|
|
178
|
-
$color-status-warning: $color-orange
|
|
181
|
+
$color-status-success: $color-green;
|
|
182
|
+
$color-status-error: $color-red;
|
|
183
|
+
$color-status-warning: $color-orange;
|
|
179
184
|
$gradient-brand-primary: [object Object];
|
|
185
|
+
$gradient-skeleton: [object Object];
|
|
180
186
|
$text-style-body-font-family: $font-family-sans;
|
|
181
187
|
$text-style-body-font-size: $font-size-body-md;
|
|
182
188
|
$text-style-body-line-height: $line-height-normal;
|
|
@@ -218,11 +224,7 @@ $component-button-secondary-disabled-border-color: $color-neutral-300;
|
|
|
218
224
|
$component-toaster-default-background: $color-neutral-200;
|
|
219
225
|
$component-toaster-default-border-color: $color-neutral-200;
|
|
220
226
|
$component-toaster-default-border-width: $border-width-thin;
|
|
221
|
-
$component-toaster-success-background: $color-green-500;
|
|
222
|
-
$component-toaster-success-border-color: $color-green-500;
|
|
223
227
|
$component-toaster-success-border-width: $border-width-thin;
|
|
224
|
-
$component-toaster-error-background: $color-red-500;
|
|
225
|
-
$component-toaster-error-border-color: $color-red-500;
|
|
226
228
|
$component-toaster-error-border-width: $border-width-thin;
|
|
227
229
|
$component-toaster-accent-background: $color-neutral-200;
|
|
228
230
|
$component-toaster-accent-color: $color-black;
|
|
@@ -232,13 +234,9 @@ $component-banner-default-background: $color-neutral-200;
|
|
|
232
234
|
$component-banner-default-background-opacity: $opacity-1;
|
|
233
235
|
$component-banner-default-border-color: $color-neutral-200;
|
|
234
236
|
$component-banner-default-border-width: $border-width-thin;
|
|
235
|
-
$component-banner-success-background: $color-green-500;
|
|
236
237
|
$component-banner-success-background-opacity: $opacity-1;
|
|
237
|
-
$component-banner-success-border-color: $color-green-500;
|
|
238
238
|
$component-banner-success-border-width: $border-width-thin;
|
|
239
|
-
$component-banner-error-background: $color-red-500;
|
|
240
239
|
$component-banner-error-background-opacity: $opacity-1;
|
|
241
|
-
$component-banner-error-border-color: $color-red-500;
|
|
242
240
|
$component-banner-error-border-width: $border-width-thin;
|
|
243
241
|
$component-banner-accent-background: $color-neutral-200;
|
|
244
242
|
$component-banner-accent-background-opacity: $opacity-1;
|
|
@@ -251,8 +249,16 @@ $component-button-primary-default-border-color: $color-border-default;
|
|
|
251
249
|
$component-button-primary-default-shadow: $shadow-button-inner;
|
|
252
250
|
$component-button-primary-hover-border-color: $color-border-default;
|
|
253
251
|
$component-toaster-default-color: $color-text-primary;
|
|
252
|
+
$component-toaster-success-background: $color-status-success;
|
|
254
253
|
$component-toaster-success-color: $color-text-inverse;
|
|
254
|
+
$component-toaster-success-border-color: $color-status-success;
|
|
255
|
+
$component-toaster-error-background: $color-status-error;
|
|
255
256
|
$component-toaster-error-color: $color-text-inverse;
|
|
257
|
+
$component-toaster-error-border-color: $color-status-error;
|
|
256
258
|
$component-banner-default-color: $color-text-primary;
|
|
259
|
+
$component-banner-success-background: $color-status-success;
|
|
257
260
|
$component-banner-success-color: $color-text-inverse;
|
|
261
|
+
$component-banner-success-border-color: $color-status-success;
|
|
262
|
+
$component-banner-error-background: $color-status-error;
|
|
258
263
|
$component-banner-error-color: $color-text-inverse;
|
|
264
|
+
$component-banner-error-border-color: $color-status-error;
|
|
@@ -33,15 +33,9 @@ module.exports = {
|
|
|
33
33
|
},
|
|
34
34
|
white: "var(--color-white)",
|
|
35
35
|
black: "var(--color-black)",
|
|
36
|
-
green:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
red: {
|
|
40
|
-
500: "var(--color-red-500)"
|
|
41
|
-
},
|
|
42
|
-
orange: {
|
|
43
|
-
500: "var(--color-orange-500)"
|
|
44
|
-
},
|
|
36
|
+
green: "var(--color-green)",
|
|
37
|
+
red: "var(--color-red)",
|
|
38
|
+
orange: "var(--color-orange)",
|
|
45
39
|
text: {
|
|
46
40
|
primary: "var(--color-text-primary)",
|
|
47
41
|
inverse: "var(--color-text-inverse)"
|
|
@@ -67,13 +61,23 @@ module.exports = {
|
|
|
67
61
|
darkPurple: {
|
|
68
62
|
start: "var(--color-gradients-dark-purple-start)",
|
|
69
63
|
end: "var(--color-gradients-dark-purple-end)"
|
|
64
|
+
},
|
|
65
|
+
skeleton: {
|
|
66
|
+
start: "var(--color-gradients-skeleton-start)",
|
|
67
|
+
middle: "var(--color-gradients-skeleton-middle)",
|
|
68
|
+
end: "var(--color-gradients-skeleton-end)"
|
|
69
|
+
},
|
|
70
|
+
button: {
|
|
71
|
+
start: "var(--color-gradients-button-start)",
|
|
72
|
+
end: "var(--color-gradients-button-end)"
|
|
70
73
|
}
|
|
71
74
|
}
|
|
72
75
|
},
|
|
73
76
|
gradient: {
|
|
74
77
|
brand: {
|
|
75
78
|
primary: "var(--gradient-brand-primary)"
|
|
76
|
-
}
|
|
79
|
+
},
|
|
80
|
+
skeleton: "var(--gradient-skeleton)"
|
|
77
81
|
},
|
|
78
82
|
spacing: {
|
|
79
83
|
0: "var(--spacing-0)",
|