@redseed/redseed-ui-tailwindcss 7.41.1 → 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 (4) hide show
  1. package/colors.css +110 -24
  2. package/components/section_header.css +9 -1
  3. package/package.json +1 -1
  4. 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/components/section_header.css CHANGED
@@ -1,8 +1,16 @@
1
1
  .rsui-section-header {
2
- @apply flex flex-col gap-x-space-sm gap-y-space-lg transition-all overflow-hidden;
2
+ @apply flex flex-col gap-x-space-sm gap-y-space-lg transition-all;
3
3
  @apply md:flex-row md:justify-between md:items-center;
4
4
  }
5
5
 
6
+ /* overflow-hidden guards against a useResponsiveWidth feedback loop (mobile
7
+ width briefly misreported, widened content re-triggers the observer,
8
+ locking the broken layout in). Opt out while a dropdown menu is open in
9
+ the header — otherwise the menu gets clipped by this boundary. */
10
+ .rsui-section-header:not(:has(.rsui-dropdown-menu__container--open)) {
11
+ @apply overflow-hidden;
12
+ }
13
+
6
14
  .rsui-section-header--clickable {
7
15
  @apply cursor-pointer;
8
16
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redseed/redseed-ui-tailwindcss",
3
- "version": "7.41.1",
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