@ibis-design/css 0.8.1 → 0.8.2

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 (2) hide show
  1. package/dist/design-tokens.css +131 -128
  2. package/package.json +31 -31
package/dist/design-tokens.css CHANGED
@@ -222,46 +222,47 @@
222
222
  */
223
223
 
224
224
  [data-theme="ib-dark"] {
225
- --color-primary-50: #f5f3ff;
226
- --color-primary-100: #edeafd;
227
- --color-primary-200: #ded7fd;
228
- --color-primary-300: #c7b8fa;
229
- --color-primary-400: #aa8ff6;
230
- --color-primary-500: #8e56e0;
231
- --color-primary-600: #8647e5;
232
- --color-primary-700: #7d42d6;
233
- --color-primary-800: #713bc1;
234
- --color-primary-900: #522398;
235
- --color-primary-950: #301362;
236
- --color-neutral-50: #000000;
237
- --color-neutral-100: #3d3d3d;
238
- --color-neutral-200: #454545;
239
- --color-neutral-300: #4f4f4f;
240
- --color-neutral-400: #5d5d5d;
241
- --color-neutral-500: #6d6d6d;
242
- --color-neutral-600: #a8a8a8;
243
- --color-neutral-700: #c1c1c1;
244
- --color-neutral-800: #d1d1d1;
245
- --color-neutral-900: #dbdbdb;
225
+ --color-primary-50: #14121f;
226
+ --color-primary-100: #251440;
227
+ --color-primary-200: #301362;
228
+ --color-primary-300: #3b1570;
229
+ --color-primary-400: #48277d;
230
+ --color-primary-500: #713bc1;
231
+ --color-primary-600: #7d42d6;
232
+ --color-primary-700: #8647e5;
233
+ --color-primary-800: #8e56e0;
234
+ --color-primary-900: #aa8ff6;
235
+ --color-primary-950: #ded7fd;
236
+ --color-neutral-50: #0d0d0d;
237
+ --color-neutral-100: #0f111a;
238
+ --color-neutral-200: #1e1e24;
239
+ --color-neutral-300: #2d2d35;
240
+ --color-neutral-400: #404454;
241
+ --color-neutral-500: #5d5d5d;
242
+ --color-neutral-600: #6d6d6d;
243
+ --color-neutral-700: #8d8d8e;
244
+ --color-neutral-800: #c1c1c1;
245
+ --color-neutral-900: #e0e2eb;
246
246
  --color-neutral-950: #f4f4f4;
247
247
  --color-white: #FFFFFF;
248
248
  --color-black: #000000;
249
- --color-green: #009A08;
250
- --color-red: #B70c00;
251
- --color-orange: #FA8900;
252
- --color-toaster-accent: #920075;
253
- --color-gradients-main-start: #3B1570;
254
- --color-gradients-main-end: #8E0175;
255
- --color-gradients-purple-start: #C519A3;
256
- --color-gradients-purple-end: #713BC1;
257
- --color-gradients-dark-purple-start: #713BC1;
258
- --color-gradients-dark-purple-end: #BD91FF;
259
- --color-gradients-skeleton-start: rgba(255,255,255,0.08);
260
- --color-gradients-skeleton-middle: rgba(255,255,255,0.18);
261
- --color-gradients-skeleton-end: rgba(255,255,255,0.08);
262
- --color-gradients-button-start: #9665DF;
263
- --color-gradients-button-end: #7945C8;
264
- --color-backgrounds-classic-light: #0D0D0D; /** PLACEHOLDER — pending Figma dark */
249
+ --color-green: #0DA529;
250
+ --color-red: #E85A52;
251
+ --color-orange: #FB9A33;
252
+ --color-toaster-accent: #FF54D4;
253
+ --color-gradients-main-start: #251440;
254
+ --color-gradients-main-end: #630050;
255
+ --color-gradients-purple-start: #713BC1;
256
+ --color-gradients-purple-end: #C519A3;
257
+ --color-gradients-dark-purple-start: #522398;
258
+ --color-gradients-dark-purple-end: #8E56E0;
259
+ --color-gradients-skeleton-start: rgba(255, 255, 255, 0.08);
260
+ --color-gradients-skeleton-middle: rgba(255, 255, 255, 0.18);
261
+ --color-gradients-skeleton-end: rgba(255, 255, 255, 0.08);
262
+ --color-gradients-button-start: #8E56E0;
263
+ --color-gradients-button-end: #713BC1;
264
+ --color-backgrounds-classic-light: #1a1528;
265
+ --color-backgrounds-classic-dark: #0f111a;
265
266
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
266
267
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
267
268
  --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
@@ -286,7 +287,7 @@
286
287
  --border-color-button: #BD91FF;
287
288
  --color-text-primary: var(--color-white);
288
289
  --color-text-inverse: var(--color-black);
289
- --color-toaster-default: var(--color-neutral-200);
290
+ --color-toaster-default: var(--color-neutral-300);
290
291
  --color-toaster-success: var(--color-green);
291
292
  --color-toaster-error: var(--color-red);
292
293
  --color-status-success: var(--color-green);
@@ -298,8 +299,8 @@
298
299
  --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
299
300
  --gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
300
301
  --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
301
- --border-color-default: var(--color-neutral-200);
302
- --border-color-focus: var(--color-primary-300);
302
+ --border-color-default: var(--color-neutral-400);
303
+ --border-color-focus: var(--color-primary-400);
303
304
  }
304
305
 
305
306
  /**
@@ -307,47 +308,48 @@
307
308
  */
308
309
 
309
310
  [data-theme="alc-light"] {
310
- --color-primary-50: #eff6ff;
311
- --color-primary-100: #daebff;
312
- --color-primary-200: #bdddff;
313
- --color-primary-300: #90c8ff;
314
- --color-primary-400: #5ca9fe;
315
- --color-primary-500: #3686fb;
316
- --color-primary-600: #2066f0;
317
- --color-primary-700: #1851dd;
318
- --color-primary-800: #1a42b3;
319
- --color-primary-900: #1b3c8d;
320
- --color-primary-950: #152554;
321
- --color-neutral-50: #f4f4f4;
322
- --color-neutral-100: #dbdbdb;
323
- --color-neutral-200: #dbdbdb;
324
- --color-neutral-300: #c1c1c1;
325
- --color-neutral-400: #a8a8a8;
326
- --color-neutral-500: #6d6d6d;
327
- --color-neutral-600: #5d5d5d;
328
- --color-neutral-700: #4f4f4f;
329
- --color-neutral-800: #666666;
330
- --color-neutral-900: #4d4d4d;
311
+ --color-primary-50: #d8e2ff;
312
+ --color-primary-100: #d8e2ff;
313
+ --color-primary-200: #c5d8ff;
314
+ --color-primary-300: #90b8ff;
315
+ --color-primary-400: #0939c4;
316
+ --color-primary-500: #3864e7;
317
+ --color-primary-600: #3557ba;
318
+ --color-primary-700: #0939c4;
319
+ --color-primary-800: #13224c;
320
+ --color-primary-900: #17285c;
321
+ --color-primary-950: #13224c;
322
+ --color-neutral-50: #fafafa;
323
+ --color-neutral-100: #fbfcfe;
324
+ --color-neutral-200: #e0e2eb;
325
+ --color-neutral-300: #dbdbdb;
326
+ --color-neutral-400: #c1c1c1;
327
+ --color-neutral-500: #a8a8a8;
328
+ --color-neutral-600: #8d8d8e;
329
+ --color-neutral-700: #666666;
330
+ --color-neutral-800: #4d4d4d;
331
+ --color-neutral-900: #404454;
331
332
  --color-neutral-950: #000000;
332
333
  --color-white: #FFFFFF;
333
334
  --color-black: #000000;
334
- --color-green: #009A08;
335
- --color-red: #B70c00;
336
- --color-orange: #FA8900;
337
- --color-brand-secondary: #FFC60D;
338
- --color-alchemy-neutral-yellow: #fffbf0;
339
- --color-alchemy-neutral-blue: #f0f4ff;
340
- --color-alchemy-neutral-green: #f0fff1;
335
+ --color-green: #0DA529;
336
+ --color-red: #FF0420;
337
+ --color-orange: #A85F00;
338
+ --color-brand-secondary: #17285C; /** Secondary button label and border (Figma) */
339
+ --color-alchemy-neutral-yellow: #ffe6c7;
340
+ --color-alchemy-neutral-blue: #d8e2ff;
341
+ --color-alchemy-neutral-green: #d6ffda;
342
+ --color-alchemy-neutral-purple: #eae6f4;
341
343
  --color-gradients-main-start: #244197;
342
344
  --color-gradients-main-end: #090F20;
343
- --color-gradients-brand-start: #FECA1F;
344
- --color-gradients-brand-middle: #3DA042;
345
- --color-gradients-brand-end: #2F4688;
346
- --color-gradients-button-start: #244197;
347
- --color-gradients-button-end: #090F20;
345
+ --color-gradients-brand-start: #3866ED;
346
+ --color-gradients-brand-middle: #3E6FFF;
347
+ --color-gradients-brand-end: #3557BA;
348
+ --color-gradients-button-start: #17285C;
349
+ --color-gradients-button-end: #13224C;
348
350
  --color-backgrounds-classic-light: #fafafa;
349
351
  --color-backgrounds-classic-dark: #0d0d0d;
350
- --color-backgrounds-cardbg-purple: #920075;
352
+ --color-backgrounds-cardbg-purple: #9747ff;
351
353
  --color-backgrounds-cardbg-dark-purple: #522398;
352
354
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
353
355
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
@@ -382,24 +384,24 @@
382
384
  --border-radius-xl: 1rem;
383
385
  --border-radius-2xl: 1.5rem;
384
386
  --border-radius-full: 9999px;
387
+ --border-color-button: #0939C4;
385
388
  --color-text-primary: var(--color-black);
386
389
  --color-text-inverse: var(--color-white);
387
390
  --color-toaster-default: var(--color-neutral-200);
388
391
  --color-toaster-success: var(--color-green);
389
392
  --color-toaster-error: var(--color-red);
393
+ --color-toaster-accent: var(--color-brand-secondary);
390
394
  --color-status-success: var(--color-green);
391
395
  --color-status-error: var(--color-red);
392
396
  --color-status-warning: var(--color-orange);
393
397
  --color-brand-primary: var(--color-primary-500);
394
- --color-brand-neutral: var(--color-neutral-500);
398
+ --color-brand-neutral: var(--color-neutral-600);
395
399
  --color-backgrounds-themed-ibis-white: var(--color-white);
396
- --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
397
- --gradient-brand-accent: linear-gradient(180deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
398
- --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
400
+ --gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
401
+ --gradient-brand-accent: linear-gradient(227.88deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
402
+ --gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
399
403
  --border-color-default: var(--color-neutral-200);
400
- --border-color-focus: var(--color-primary-300);
401
- --color-toaster-accent: var(--color-brand-primary);
402
- --border-color-button: var(--color-brand-primary);
404
+ --border-color-focus: var(--color-primary-400);
403
405
  }
404
406
 
405
407
  /**
@@ -407,48 +409,49 @@
407
409
  */
408
410
 
409
411
  [data-theme="alc-dark"] {
410
- --color-primary-50: #eff6ff;
411
- --color-primary-100: #daebff;
412
- --color-primary-200: #bdddff;
413
- --color-primary-300: #90c8ff;
414
- --color-primary-400: #5ca9fe;
415
- --color-primary-500: #3686fb;
416
- --color-primary-600: #2066f0;
417
- --color-primary-700: #1851dd;
418
- --color-primary-800: #1a42b3;
419
- --color-primary-900: #1b3c8d;
420
- --color-primary-950: #152554;
421
- --color-neutral-50: #000000;
422
- --color-neutral-100: #4d4d4d;
423
- --color-neutral-200: #666666;
424
- --color-neutral-300: #4f4f4f;
425
- --color-neutral-400: #5d5d5d;
426
- --color-neutral-500: #6d6d6d;
427
- --color-neutral-600: #a8a8a8;
428
- --color-neutral-700: #c1c1c1;
429
- --color-neutral-800: #dbdbdb;
430
- --color-neutral-900: #dbdbdb;
431
- --color-neutral-950: #f4f4f4;
412
+ --color-primary-50: #13224c;
413
+ --color-primary-100: #13224c;
414
+ --color-primary-200: #14234f;
415
+ --color-primary-300: #17285c;
416
+ --color-primary-400: #90b8ff;
417
+ --color-primary-500: #3864e7;
418
+ --color-primary-600: #3e6fff;
419
+ --color-primary-700: #4774fa;
420
+ --color-primary-800: #4774fa;
421
+ --color-primary-900: #90b8ff;
422
+ --color-primary-950: #d8e2ff;
423
+ --color-neutral-50: #0d0d0d;
424
+ --color-neutral-100: #0f111a;
425
+ --color-neutral-200: #161f39;
426
+ --color-neutral-300: #1a132c;
427
+ --color-neutral-400: #404454;
428
+ --color-neutral-500: #666666;
429
+ --color-neutral-600: #8d8d8e;
430
+ --color-neutral-700: #8d8d8e;
431
+ --color-neutral-800: #c1c1c1;
432
+ --color-neutral-900: #e0e2eb;
433
+ --color-neutral-950: #fbfcfe;
432
434
  --color-white: #FFFFFF;
433
435
  --color-black: #000000;
434
- --color-green: #009A08;
435
- --color-red: #B70c00;
436
- --color-orange: #FA8900;
437
- --color-brand-secondary: #FFC60D; /** Alchemy secondary accent */
438
- --color-alchemy-neutral-yellow: #fffbf0;
439
- --color-alchemy-neutral-blue: #f0f4ff;
440
- --color-alchemy-neutral-green: #f0fff1;
436
+ --color-green: #0DA529;
437
+ --color-red: #FF5A5A;
438
+ --color-orange: #E89A33;
439
+ --color-brand-secondary: #4774FA; /** Secondary button label and border (Figma dark) */
440
+ --color-alchemy-neutral-yellow: #3d3020;
441
+ --color-alchemy-neutral-blue: #161f39;
442
+ --color-alchemy-neutral-green: #1a2e1e;
443
+ --color-alchemy-neutral-purple: #2a2240;
441
444
  --color-gradients-main-start: #244197;
442
445
  --color-gradients-main-end: #090F20;
443
- --color-gradients-brand-start: #FECA1F;
444
- --color-gradients-brand-middle: #3DA042;
445
- --color-gradients-brand-end: #2F4688;
446
- --color-gradients-button-start: #244197;
447
- --color-gradients-button-end: #090F20;
448
- --color-backgrounds-classic-light: #0d0d0d; /** PLACEHOLDER — pending Figma dark */
449
- --color-backgrounds-classic-dark: #0d0d0d;
450
- --color-backgrounds-cardbg-purple: #920075;
451
- --color-backgrounds-cardbg-dark-purple: #522398;
446
+ --color-gradients-brand-start: #3866ED;
447
+ --color-gradients-brand-middle: #3E6FFF;
448
+ --color-gradients-brand-end: #3557BA;
449
+ --color-gradients-button-start: #3E6FFF;
450
+ --color-gradients-button-end: #4774FA;
451
+ --color-backgrounds-classic-light: #161f39;
452
+ --color-backgrounds-classic-dark: #0f111a;
453
+ --color-backgrounds-cardbg-purple: #522398;
454
+ --color-backgrounds-cardbg-dark-purple: #0939c4;
452
455
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
453
456
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
454
457
  --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
@@ -482,22 +485,22 @@
482
485
  --border-radius-xl: 1rem;
483
486
  --border-radius-2xl: 1.5rem;
484
487
  --border-radius-full: 9999px;
488
+ --border-color-button: #3E6FFF;
485
489
  --color-text-primary: var(--color-white);
486
490
  --color-text-inverse: var(--color-black);
487
- --color-toaster-default: var(--color-neutral-200);
491
+ --color-toaster-default: var(--color-neutral-300);
488
492
  --color-toaster-success: var(--color-green);
489
493
  --color-toaster-error: var(--color-red);
494
+ --color-toaster-accent: var(--color-brand-secondary);
490
495
  --color-status-success: var(--color-green);
491
496
  --color-status-error: var(--color-red);
492
497
  --color-status-warning: var(--color-orange);
493
498
  --color-brand-primary: var(--color-primary-500);
494
- --color-brand-neutral: var(--color-neutral-500);
499
+ --color-brand-neutral: var(--color-neutral-600);
495
500
  --color-backgrounds-themed-ibis-white: var(--color-white);
496
- --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
497
- --gradient-brand-accent: linear-gradient(180deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
498
- --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
499
- --border-color-default: var(--color-neutral-200);
500
- --border-color-focus: var(--color-primary-300);
501
- --color-toaster-accent: var(--color-brand-primary);
502
- --border-color-button: var(--color-brand-primary);
501
+ --gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
502
+ --gradient-brand-accent: linear-gradient(227.88deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
503
+ --gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
504
+ --border-color-default: var(--color-neutral-400);
505
+ --border-color-focus: var(--color-primary-600);
503
506
  }
package/package.json CHANGED
@@ -1,31 +1,31 @@
1
- {
2
- "name": "@ibis-design/css",
3
- "version": "0.8.1",
4
- "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
- "type": "module",
6
- "exports": {
7
- ".": "./dist/design-tokens.css",
8
- "./design-tokens.css": "./dist/design-tokens.css",
9
- "./tailwind.preset": "./dist/tailwind.preset.js",
10
- "./preset": "./dist/tailwind.preset.js",
11
- "./ibis-design.css": "./dist/design-tokens.css",
12
- "./alchemy-design.css": "./dist/design-tokens.css",
13
- "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
14
- "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
15
- "./components/*": "./dist/components/*",
16
- "./tailwind.theme": "./dist/tailwind.theme.js"
17
- },
18
- "files": [
19
- "dist"
20
- ],
21
- "scripts": {
22
- "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts",
23
- "validate": "tsx src/scripts/validate-themes.ts",
24
- "prepublishOnly": "npm run build"
25
- },
26
- "devDependencies": {
27
- "sd-tailwindcss-transformer": "^2.2.1",
28
- "style-dictionary": "^5.4.1",
29
- "tsx": "^4.22.3"
30
- }
31
- }
1
+ {
2
+ "name": "@ibis-design/css",
3
+ "version": "0.8.2",
4
+ "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
+ "type": "module",
6
+ "exports": {
7
+ ".": "./dist/design-tokens.css",
8
+ "./design-tokens.css": "./dist/design-tokens.css",
9
+ "./tailwind.preset": "./dist/tailwind.preset.js",
10
+ "./preset": "./dist/tailwind.preset.js",
11
+ "./ibis-design.css": "./dist/design-tokens.css",
12
+ "./alchemy-design.css": "./dist/design-tokens.css",
13
+ "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
14
+ "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
15
+ "./components/*": "./dist/components/*",
16
+ "./tailwind.theme": "./dist/tailwind.theme.js"
17
+ },
18
+ "files": [
19
+ "dist"
20
+ ],
21
+ "scripts": {
22
+ "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts",
23
+ "validate": "tsx src/scripts/validate-themes.ts",
24
+ "prepublishOnly": "npm run build"
25
+ },
26
+ "devDependencies": {
27
+ "sd-tailwindcss-transformer": "^2.2.1",
28
+ "style-dictionary": "^5.4.1",
29
+ "tsx": "^4.22.3"
30
+ }
31
+ }