@ibis-design/css 0.4.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.
Files changed (4) hide show
  1. package/dist/ibis/ibis-design.css +22 -14
  2. package/dist/ibis/ibis-design.scss +22 -14
  3. package/dist/ibis/tailwind.preset.js +18 -10
  4. package/package.json +28 -28
package/dist/ibis/ibis-design.css CHANGED
@@ -27,15 +27,20 @@
27
27
  --color-neutral-950: #000000;
28
28
  --color-white: #ffffff;
29
29
  --color-black: #000000;
30
- --color-green-500: #009a08;
31
- --color-red-500: #b70c00;
32
- --color-orange-500: #fa8900;
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-500);
179
- --color-status-error: var(--color-red-500);
180
- --color-status-warning: var(--color-orange-500);
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);
@@ -198,6 +204,8 @@
198
204
  --component-button-primary-default-padding-x: var(--spacing-4);
199
205
  --component-button-primary-default-padding-y: var(--spacing-2);
200
206
  --component-button-primary-hover-background: var(--color-primary-900);
207
+ --component-button-primary-focused-background: var(--color-primary-900);
208
+ --component-button-primary-focused-border-width: var(--border-width-medium);
201
209
  --component-button-primary-disabled-background: var(--color-neutral-200);
202
210
  --component-button-primary-disabled-color: var(--color-neutral-300);
203
211
  --component-button-primary-disabled-border-color: var(--color-neutral-300);
@@ -218,11 +226,7 @@
218
226
  --component-toaster-default-background: var(--color-neutral-200);
219
227
  --component-toaster-default-border-color: var(--color-neutral-200);
220
228
  --component-toaster-default-border-width: var(--border-width-thin);
221
- --component-toaster-success-background: var(--color-green-500);
222
- --component-toaster-success-border-color: var(--color-green-500);
223
229
  --component-toaster-success-border-width: var(--border-width-thin);
224
- --component-toaster-error-background: var(--color-red-500);
225
- --component-toaster-error-border-color: var(--color-red-500);
226
230
  --component-toaster-error-border-width: var(--border-width-thin);
227
231
  --component-toaster-accent-background: var(--color-neutral-200);
228
232
  --component-toaster-accent-color: var(--color-black);
@@ -232,13 +236,9 @@
232
236
  --component-banner-default-background-opacity: var(--opacity-1);
233
237
  --component-banner-default-border-color: var(--color-neutral-200);
234
238
  --component-banner-default-border-width: var(--border-width-thin);
235
- --component-banner-success-background: var(--color-green-500);
236
239
  --component-banner-success-background-opacity: var(--opacity-1);
237
- --component-banner-success-border-color: var(--color-green-500);
238
240
  --component-banner-success-border-width: var(--border-width-thin);
239
- --component-banner-error-background: var(--color-red-500);
240
241
  --component-banner-error-background-opacity: var(--opacity-1);
241
- --component-banner-error-border-color: var(--color-red-500);
242
242
  --component-banner-error-border-width: var(--border-width-thin);
243
243
  --component-banner-accent-background: var(--color-neutral-200);
244
244
  --component-banner-accent-background-opacity: var(--opacity-1);
@@ -251,9 +251,17 @@
251
251
  --component-button-primary-default-shadow: var(--shadow-button-inner);
252
252
  --component-button-primary-hover-border-color: var(--color-border-default);
253
253
  --component-toaster-default-color: var(--color-text-primary);
254
+ --component-toaster-success-background: var(--color-status-success);
254
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);
255
258
  --component-toaster-error-color: var(--color-text-inverse);
259
+ --component-toaster-error-border-color: var(--color-status-error);
256
260
  --component-banner-default-color: var(--color-text-primary);
261
+ --component-banner-success-background: var(--color-status-success);
257
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);
258
265
  --component-banner-error-color: var(--color-text-inverse);
266
+ --component-banner-error-border-color: var(--color-status-error);
259
267
  }
package/dist/ibis/ibis-design.scss CHANGED
@@ -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-500: #009a08;
29
- $color-red-500: #b70c00;
30
- $color-orange-500: #fa8900;
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-500;
177
- $color-status-error: $color-red-500;
178
- $color-status-warning: $color-orange-500;
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;
@@ -196,6 +202,8 @@ $component-button-primary-default-border-width: $border-width-thin;
196
202
  $component-button-primary-default-padding-x: $spacing-4;
197
203
  $component-button-primary-default-padding-y: $spacing-2;
198
204
  $component-button-primary-hover-background: $color-primary-900;
205
+ $component-button-primary-focused-background: $color-primary-900;
206
+ $component-button-primary-focused-border-width: $border-width-medium;
199
207
  $component-button-primary-disabled-background: $color-neutral-200;
200
208
  $component-button-primary-disabled-color: $color-neutral-300;
201
209
  $component-button-primary-disabled-border-color: $color-neutral-300;
@@ -216,11 +224,7 @@ $component-button-secondary-disabled-border-color: $color-neutral-300;
216
224
  $component-toaster-default-background: $color-neutral-200;
217
225
  $component-toaster-default-border-color: $color-neutral-200;
218
226
  $component-toaster-default-border-width: $border-width-thin;
219
- $component-toaster-success-background: $color-green-500;
220
- $component-toaster-success-border-color: $color-green-500;
221
227
  $component-toaster-success-border-width: $border-width-thin;
222
- $component-toaster-error-background: $color-red-500;
223
- $component-toaster-error-border-color: $color-red-500;
224
228
  $component-toaster-error-border-width: $border-width-thin;
225
229
  $component-toaster-accent-background: $color-neutral-200;
226
230
  $component-toaster-accent-color: $color-black;
@@ -230,13 +234,9 @@ $component-banner-default-background: $color-neutral-200;
230
234
  $component-banner-default-background-opacity: $opacity-1;
231
235
  $component-banner-default-border-color: $color-neutral-200;
232
236
  $component-banner-default-border-width: $border-width-thin;
233
- $component-banner-success-background: $color-green-500;
234
237
  $component-banner-success-background-opacity: $opacity-1;
235
- $component-banner-success-border-color: $color-green-500;
236
238
  $component-banner-success-border-width: $border-width-thin;
237
- $component-banner-error-background: $color-red-500;
238
239
  $component-banner-error-background-opacity: $opacity-1;
239
- $component-banner-error-border-color: $color-red-500;
240
240
  $component-banner-error-border-width: $border-width-thin;
241
241
  $component-banner-accent-background: $color-neutral-200;
242
242
  $component-banner-accent-background-opacity: $opacity-1;
@@ -249,8 +249,16 @@ $component-button-primary-default-border-color: $color-border-default;
249
249
  $component-button-primary-default-shadow: $shadow-button-inner;
250
250
  $component-button-primary-hover-border-color: $color-border-default;
251
251
  $component-toaster-default-color: $color-text-primary;
252
+ $component-toaster-success-background: $color-status-success;
252
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;
253
256
  $component-toaster-error-color: $color-text-inverse;
257
+ $component-toaster-error-border-color: $color-status-error;
254
258
  $component-banner-default-color: $color-text-primary;
259
+ $component-banner-success-background: $color-status-success;
255
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;
256
263
  $component-banner-error-color: $color-text-inverse;
264
+ $component-banner-error-border-color: $color-status-error;
package/dist/ibis/tailwind.preset.js CHANGED
@@ -33,15 +33,9 @@ module.exports = {
33
33
  },
34
34
  white: "var(--color-white)",
35
35
  black: "var(--color-black)",
36
- green: {
37
- 500: "var(--color-green-500)"
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)",
@@ -299,6 +303,10 @@ module.exports = {
299
303
  background: "var(--component-button-primary-hover-background)",
300
304
  borderColor: "var(--component-button-primary-hover-border-color)"
301
305
  },
306
+ focused: {
307
+ background: "var(--component-button-primary-focused-background)",
308
+ borderWidth: "var(--component-button-primary-focused-border-width)"
309
+ },
302
310
  disabled: {
303
311
  background: "var(--component-button-primary-disabled-background)",
304
312
  color: "var(--component-button-primary-disabled-color)",
package/package.json CHANGED
@@ -1,28 +1,28 @@
1
- {
2
- "name": "@ibis-design/css",
3
- "version": "0.4.0",
4
- "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
- "type": "module",
6
- "exports": {
7
- ".": "./dist/ibis/ibis-design.css",
8
- "./ibis-design.css": "./dist/ibis/ibis-design.css",
9
- "./ibis-design.scss": "./dist/ibis/ibis-design.scss",
10
- "./alchemy-design.css": "./dist/alchemy/alchemy-design.css",
11
- "./alchemy-design.scss": "./dist/alchemy/alchemy-design.scss",
12
- "./tailwind.preset": "./dist/ibis/tailwind.preset.js",
13
- "./preset": "./dist/ibis/tailwind.preset.js",
14
- "./ibis/tailwind.preset": "./dist/ibis/tailwind.preset.js",
15
- "./alchemy/tailwind.preset": "./dist/alchemy/tailwind.preset.js"
16
- },
17
- "files": [
18
- "dist"
19
- ],
20
- "scripts": {
21
- "build": "node --experimental-strip-types src/scripts/build.ts",
22
- "prepublishOnly": "npm run build"
23
- },
24
- "devDependencies": {
25
- "sd-tailwindcss-transformer": "^2.2.1",
26
- "style-dictionary": "^5.4.0"
27
- }
28
- }
1
+ {
2
+ "name": "@ibis-design/css",
3
+ "version": "0.6.0",
4
+ "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
+ "type": "module",
6
+ "exports": {
7
+ ".": "./dist/ibis/ibis-design.css",
8
+ "./ibis-design.css": "./dist/ibis/ibis-design.css",
9
+ "./ibis-design.scss": "./dist/ibis/ibis-design.scss",
10
+ "./alchemy-design.css": "./dist/alchemy/alchemy-design.css",
11
+ "./alchemy-design.scss": "./dist/alchemy/alchemy-design.scss",
12
+ "./tailwind.preset": "./dist/ibis/tailwind.preset.js",
13
+ "./preset": "./dist/ibis/tailwind.preset.js",
14
+ "./ibis/tailwind.preset": "./dist/ibis/tailwind.preset.js",
15
+ "./alchemy/tailwind.preset": "./dist/alchemy/tailwind.preset.js"
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "build": "node --experimental-strip-types src/scripts/build.ts",
22
+ "prepublishOnly": "npm run build"
23
+ },
24
+ "devDependencies": {
25
+ "sd-tailwindcss-transformer": "^2.2.1",
26
+ "style-dictionary": "^5.4.0"
27
+ }
28
+ }