@redseed/redseed-ui-tailwindcss 7.41.2 → 7.42.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 (3) hide show
  1. package/colors.css +110 -24
  2. package/package.json +1 -1
  3. package/tokens.css +37 -34
package/colors.css CHANGED
@@ -2,30 +2,32 @@
2
2
  --Colors-Base-white: hsla(0, 0%, 100%, 1);
3
3
  --Colors-Base-black: hsla(0, 0%, 0%, 1);
4
4
  --Colors-Base-transparent: hsla(0, 0%, 100%, 0);
5
- --Colors-Grey-25: hsla(0, 0%, 99%, 1);
6
- --Colors-Grey-50: hsla(0, 0%, 98%, 1);
7
- --Colors-Grey-100: hsla(0, 0%, 96%, 1);
8
- --Colors-Grey-200: hsla(220, 5%, 92%, 1);
9
- --Colors-Grey-300: hsla(220, 6%, 85%, 1);
10
- --Colors-Grey-400: hsla(220, 6%, 66%, 1);
11
- --Colors-Grey-500: hsla(220, 6%, 47%, 1);
12
- --Colors-Grey-600: hsla(220, 8%, 35%, 1);
13
- --Colors-Grey-700: hsla(220, 11%, 29%, 1);
14
- --Colors-Grey-800: hsla(220, 20%, 18%, 1);
15
- --Colors-Grey-900: hsla(220, 24%, 12%, 1);
16
- --Colors-Grey-950: hsla(220, 29%, 5%, 1);
17
- --Colors-Brand-25: hsla(270, 16%, 93%, 1);
18
- --Colors-Brand-50: hsla(270, 15%, 85%, 1);
19
- --Colors-Brand-100: hsla(270, 16%, 77%, 1);
20
- --Colors-Brand-200: hsla(271, 15%, 70%, 1);
21
- --Colors-Brand-300: hsla(271, 15%, 54%, 1);
22
- --Colors-Brand-400: hsla(271, 23%, 39%, 1);
23
- --Colors-Brand-500: hsla(271, 48%, 24%, 1);
24
- --Colors-Brand-600: hsla(271, 47%, 19%, 1);
25
- --Colors-Brand-700: hsla(271, 48%, 14%, 1);
26
- --Colors-Brand-800: hsla(271, 48%, 12%, 1);
27
- --Colors-Brand-900: hsla(272, 46%, 7%, 1);
28
- --Colors-Brand-950: hsla(0, 0%, 0%, 1);
5
+ /* Grey — RedSeed Design System v1 (Figma Foundations · Primitives · Grey) */
6
+ --Colors-Grey-25: #fcfcfc;
7
+ --Colors-Grey-50: #fafafa;
8
+ --Colors-Grey-100: #f5f5f5;
9
+ --Colors-Grey-200: #eaeaec;
10
+ --Colors-Grey-300: #d6d8db;
11
+ --Colors-Grey-400: #a3a7ae;
12
+ --Colors-Grey-500: #71757f;
13
+ --Colors-Grey-600: #525760;
14
+ --Colors-Grey-700: #424752;
15
+ --Colors-Grey-800: #252b37;
16
+ --Colors-Grey-900: #171c26;
17
+ --Colors-Grey-950: #090c10;
18
+ /* Brand — RedSeed Design System v1: primary brand ramp (Journey Green). Purple→green rebrand. */
19
+ --Colors-Brand-25: #f0f9f7;
20
+ --Colors-Brand-50: #e2f4ee;
21
+ --Colors-Brand-100: #c8eadf;
22
+ --Colors-Brand-200: #9fdbc9;
23
+ --Colors-Brand-300: #53c6a3;
24
+ --Colors-Brand-400: #279b78;
25
+ --Colors-Brand-500: #136c52;
26
+ --Colors-Brand-600: #135847;
27
+ --Colors-Brand-700: #124943;
28
+ --Colors-Brand-800: #113b41;
29
+ --Colors-Brand-900: #0b292d;
30
+ --Colors-Brand-950: #071a1d;
29
31
  --Colors-RedSeed-Red-5: hsla(0, 67%, 99%, 1);
30
32
  --Colors-RedSeed-Red-10: hsla(0, 67%, 98%, 1);
31
33
  --Colors-RedSeed-Red-15: hsla(0, 65%, 97%, 1);
@@ -485,4 +487,88 @@
485
487
 
486
488
  --Colors-Background-AI-1: hsla(264, 74%, 93%, 1);
487
489
  --Colors-Background-AI-2: hsla(33, 100%, 96%, 1);
490
+
491
+ /* ------------------------------------------------------------------ */
492
+ /* RedSeed Design System v1 — brand ramps (Figma Foundations) */
493
+ /* Named identity ramps. --Colors-Brand-* above is the functional */
494
+ /* primary (a greener cut of Journey Green) used by the token layer. */
495
+ /* ------------------------------------------------------------------ */
496
+ --Colors-Journey-Green-25: #fafbfa;
497
+ --Colors-Journey-Green-50: #f5f7f6;
498
+ --Colors-Journey-Green-100: #ebeeed;
499
+ --Colors-Journey-Green-200: #d5dbd8;
500
+ --Colors-Journey-Green-300: #b3c1bb;
501
+ --Colors-Journey-Green-400: #859f93;
502
+ --Colors-Journey-Green-500: #136c51;
503
+ --Colors-Journey-Green-600: #11634a;
504
+ --Colors-Journey-Green-700: #0e5942;
505
+ --Colors-Journey-Green-800: #0a4c38;
506
+ --Colors-Journey-Green-900: #063c2c;
507
+ --Colors-Journey-Green-950: #03291d;
508
+ --Colors-Deep-Teal-25: #fafafa;
509
+ --Colors-Deep-Teal-50: #f5f6f6;
510
+ --Colors-Deep-Teal-100: #ebecec;
511
+ --Colors-Deep-Teal-200: #d5d6d7;
512
+ --Colors-Deep-Teal-300: #b3b7b8;
513
+ --Colors-Deep-Teal-400: #858d8e;
514
+ --Colors-Deep-Teal-500: #113c42;
515
+ --Colors-Deep-Teal-600: #0f373c;
516
+ --Colors-Deep-Teal-700: #0c3035;
517
+ --Colors-Deep-Teal-800: #09282d;
518
+ --Colors-Deep-Teal-900: #061f22;
519
+ --Colors-Deep-Teal-950: #031416;
520
+ --Colors-Modern-Bone-25: #fefefe;
521
+ --Colors-Modern-Bone-50: #fefdfd;
522
+ --Colors-Modern-Bone-100: #fcfcfa;
523
+ --Colors-Modern-Bone-200: #f9f8f6;
524
+ --Colors-Modern-Bone-300: #f5f4f0;
525
+ --Colors-Modern-Bone-400: #f1f0e9;
526
+ --Colors-Modern-Bone-500: #edebe2;
527
+ --Colors-Modern-Bone-600: #dbdad1;
528
+ --Colors-Modern-Bone-700: #c5c3bc;
529
+ --Colors-Modern-Bone-800: #aba9a3;
530
+ --Colors-Modern-Bone-900: #8a8983;
531
+ --Colors-Modern-Bone-950: #64635f;
532
+ --Colors-Warm-Yellow-25: #fefefa;
533
+ --Colors-Warm-Yellow-50: #fefcf6;
534
+ --Colors-Warm-Yellow-100: #fcfaed;
535
+ --Colors-Warm-Yellow-200: #f9f4d9;
536
+ --Colors-Warm-Yellow-300: #f6edbd;
537
+ --Colors-Warm-Yellow-400: #f2e597;
538
+ --Colors-Warm-Yellow-500: #eedc5b;
539
+ --Colors-Warm-Yellow-600: #dccc54;
540
+ --Colors-Warm-Yellow-700: #c6b74a;
541
+ --Colors-Warm-Yellow-800: #ac9e3f;
542
+ --Colors-Warm-Yellow-900: #8b8032;
543
+ --Colors-Warm-Yellow-950: #645c22;
544
+ --Colors-Soft-Lilac-25: #fefcfe;
545
+ --Colors-Soft-Lilac-50: #fdfafc;
546
+ --Colors-Soft-Lilac-100: #fbf5fa;
547
+ --Colors-Soft-Lilac-200: #f8eaf4;
548
+ --Colors-Soft-Lilac-300: #f3dcee;
549
+ --Colors-Soft-Lilac-400: #eecbe6;
550
+ --Colors-Soft-Lilac-500: #e9b8de;
551
+ --Colors-Soft-Lilac-600: #d8aacd;
552
+ --Colors-Soft-Lilac-700: #c299b8;
553
+ --Colors-Soft-Lilac-800: #a884a0;
554
+ --Colors-Soft-Lilac-900: #886a81;
555
+ --Colors-Soft-Lilac-950: #624c5d;
556
+ --Colors-Warm-Mauve-25: #fcfbfc;
557
+ --Colors-Warm-Mauve-50: #faf7f9;
558
+ --Colors-Warm-Mauve-100: #f5eff3;
559
+ --Colors-Warm-Mauve-200: #eadee6;
560
+ --Colors-Warm-Mauve-300: #dcc6d5;
561
+ --Colors-Warm-Mauve-400: #cca7c1;
562
+ --Colors-Warm-Mauve-500: #b97da8;
563
+ --Colors-Warm-Mauve-600: #ab739b;
564
+ --Colors-Warm-Mauve-700: #99678b;
565
+ --Colors-Warm-Mauve-800: #855878;
566
+ --Colors-Warm-Mauve-900: #6a4660;
567
+ --Colors-Warm-Mauve-950: #4c3145;
568
+ /* Secondary brand accents (single tokens, Figma Brand palette · Secondary) */
569
+ --Colors-Apricot-Lift: #e89b6c;
570
+ --Colors-Cornflower: #6e8fd6;
571
+ --Colors-Marigold: #f2b33c;
572
+ --Colors-Berry: #9a3d6b;
573
+ --Colors-Plum-Ink: #553150;
488
574
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redseed/redseed-ui-tailwindcss",
3
- "version": "7.41.2",
3
+ "version": "7.42.0",
4
4
  "description": "RedSeed UI Tailwindcss",
5
5
  "main": "index.js",
6
6
  "style": "index.css",
package/tokens.css CHANGED
@@ -1,15 +1,18 @@
1
1
  @theme inline {
2
+ /* Semantic tokens — RedSeed Design System v1 (Figma Foundations · Semantic). */
3
+ /* Status colours (success/warning/error/info) are literal hex: v1 defines them */
4
+ /* as semantic endpoints, not full primitive ramps. Neutral/brand/ai ride ramps. */
2
5
  --color-text-primary: var(--Colors-Grey-900);
3
6
  --color-text-secondary: var(--Colors-Grey-700);
4
7
  --color-text-tertiary: var(--Colors-Grey-600);
5
8
  --color-text-quaternary: var(--Colors-Grey-500);
6
9
  --color-text-disabled: var(--Colors-Grey-400);
7
10
  --color-text-brand: var(--Colors-Brand-500);
8
- --color-text-success: var(--Colors-RedSeed-Green-500);
9
- --color-text-warning: var(--Colors-RedSeed-Yellow-500);
10
- --color-text-error: var(--Colors-RedSeed-Red-500);
11
- --color-text-info: var(--Colors-RedSeed-Blue-500);
12
- --color-text-ai: var(--Colors-RedSeed-Purple-500);
11
+ --color-text-success: #067647;
12
+ --color-text-warning: #b54708;
13
+ --color-text-error: #b42318;
14
+ --color-text-info: #0077cc;
15
+ --color-text-ai: var(--Colors-Warm-Mauve-600);
13
16
  --color-text-on-color: var(--Colors-Base-white);
14
17
 
15
18
  --color-background-primary: var(--Colors-Base-white);
@@ -27,46 +30,46 @@
27
30
  --color-background-disabled: var(--Colors-Grey-25);
28
31
  --color-background-disabled-contrast: var(--Colors-Grey-300);
29
32
  --color-background-disabled-invert: var(--Colors-Grey-100);
30
- --color-background-success: var(--Colors-RedSeed-Green-10);
31
- --color-background-success-contrast: var(--Colors-RedSeed-Green-500);
32
- --color-background-success-invert: var(--Colors-RedSeed-Green-20);
33
- --color-background-warning: var(--Colors-RedSeed-Yellow-10);
34
- --color-background-warning-contrast: var(--Colors-RedSeed-Yellow-500);
35
- --color-background-warning-invert: var(--Colors-RedSeed-Yellow-20);
36
- --color-background-error: var(--Colors-RedSeed-Red-10);
37
- --color-background-error-contrast: var(--Colors-RedSeed-Red-500);
38
- --color-background-error-invert: var(--Colors-RedSeed-Red-20);
39
- --color-background-info: var(--Colors-RedSeed-Blue-10);
40
- --color-background-info-contrast: var(--Colors-RedSeed-Blue-500);
41
- --color-background-info-invert: var(--Colors-RedSeed-Blue-20);
42
- --color-background-ai-from: var(--Colors-Background-AI-1);
43
- --color-background-ai-to: var(--Colors-Background-AI-2);
44
- --color-background-ai-contrast: var(--Colors-RedSeed-Purple-500);
45
- --color-background-ai-invert: var(--Colors-RedSeed-Purple-20);
33
+ --color-background-success: #ecfdf3;
34
+ --color-background-success-contrast: #067647;
35
+ --color-background-success-invert: #abefc6;
36
+ --color-background-warning: #fffaeb;
37
+ --color-background-warning-contrast: #b54708;
38
+ --color-background-warning-invert: #fedf89;
39
+ --color-background-error: #fef3f2;
40
+ --color-background-error-contrast: #b42318;
41
+ --color-background-error-invert: #fecdca;
42
+ --color-background-info: #f6fbfd;
43
+ --color-background-info-contrast: #0077cc;
44
+ --color-background-info-invert: #99c9eb;
45
+ --color-background-ai-from: #ebe0fa;
46
+ --color-background-ai-to: var(--Colors-Background-AI-2); /* v1 defines ai-from only; ai-to kept as warm counterpart */
47
+ --color-background-ai-contrast: var(--Colors-Warm-Mauve-600);
48
+ --color-background-ai-invert: var(--Colors-Warm-Mauve-200);
46
49
 
47
50
  --color-border-primary: var(--Colors-Grey-400);
48
51
  --color-border-secondary: var(--Colors-Grey-300);
49
52
  --color-border-brand: var(--Colors-Brand-200);
50
53
  --color-border-disabled: var(--Colors-Grey-300);
51
- --color-border-success: var(--Colors-RedSeed-Green-200);
52
- --color-border-warning: var(--Colors-RedSeed-Yellow-200);
53
- --color-border-error: var(--Colors-RedSeed-Red-200);
54
- --color-border-info: var(--Colors-RedSeed-Blue-200);
55
- --color-border-ai: var(--Colors-RedSeed-Purple-200);
54
+ --color-border-success: #abefc6;
55
+ --color-border-warning: #fedf89;
56
+ --color-border-error: #fecdca;
57
+ --color-border-info: #99c9eb;
58
+ --color-border-ai: var(--Colors-Warm-Mauve-200);
56
59
 
57
60
  --color-button-primary: var(--Colors-Brand-600);
58
- --color-button-primary-hover: var(--Colors-Brand-700);
61
+ --color-button-primary-hover: var(--Colors-Plum-Ink); /* v1: green button hovers to Plum Ink */
59
62
  --color-button-primary-active: var(--Colors-Brand-800);
60
- --color-button-secondary: var(--Colors-Grey-800);
61
- --color-button-secondary-hover: var(--Colors-Grey-700);
62
- --color-button-secondary-active: var(--Colors-Grey-600);
63
+ --color-button-secondary: var(--Colors-Deep-Teal-700);
64
+ --color-button-secondary-hover: var(--Colors-Deep-Teal-800);
65
+ --color-button-secondary-active: var(--Colors-Deep-Teal-900);
63
66
  --color-button-tertiary: var(--Colors-Brand-600);
64
67
  --color-button-tertiary-hover: var(--Colors-Brand-700);
65
68
  --color-button-tertiary-active: var(--Colors-Brand-800);
66
- --color-button-danger-primary: var(--Colors-Error-600);
67
- --color-button-danger-secondary: var(--Colors-Error-600);
68
- --color-button-danger-hover: var(--Colors-Error-700);
69
- --color-button-danger-active: var(--Colors-Error-800);
69
+ --color-button-danger-primary: #d92d20;
70
+ --color-button-danger-secondary: #d92d20;
71
+ --color-button-danger-hover: #b42318;
72
+ --color-button-danger-active: #912018;
70
73
  --color-button-separator: var(--Colors-Grey-200);
71
74
  --color-button-disabled: var(--Colors-Grey-200);
72
75