@redseed/redseed-ui-tailwindcss 7.41.2 → 7.43.0

package/colors.css

@@ -2,30 +2,32 @@
     --Colors-Base-white: hsla(0, 0%, 100%, 1);
     --Colors-Base-black: hsla(0, 0%, 0%, 1);
     --Colors-Base-transparent: hsla(0, 0%, 100%, 0);
-    --Colors-Grey-25: hsla(0, 0%, 99%, 1);
-    --Colors-Grey-50: hsla(0, 0%, 98%, 1);
-    --Colors-Grey-100: hsla(0, 0%, 96%, 1);
-    --Colors-Grey-200: hsla(220, 5%, 92%, 1);
-    --Colors-Grey-300: hsla(220, 6%, 85%, 1);
-    --Colors-Grey-400: hsla(220, 6%, 66%, 1);
-    --Colors-Grey-500: hsla(220, 6%, 47%, 1);
-    --Colors-Grey-600: hsla(220, 8%, 35%, 1);
-    --Colors-Grey-700: hsla(220, 11%, 29%, 1);
-    --Colors-Grey-800: hsla(220, 20%, 18%, 1);
-    --Colors-Grey-900: hsla(220, 24%, 12%, 1);
-    --Colors-Grey-950: hsla(220, 29%, 5%, 1);
-    --Colors-Brand-25: hsla(270, 16%, 93%, 1);
-    --Colors-Brand-50: hsla(270, 15%, 85%, 1);
-    --Colors-Brand-100: hsla(270, 16%, 77%, 1);
-    --Colors-Brand-200: hsla(271, 15%, 70%, 1);
-    --Colors-Brand-300: hsla(271, 15%, 54%, 1);
-    --Colors-Brand-400: hsla(271, 23%, 39%, 1);
-    --Colors-Brand-500: hsla(271, 48%, 24%, 1);
-    --Colors-Brand-600: hsla(271, 47%, 19%, 1);
-    --Colors-Brand-700: hsla(271, 48%, 14%, 1);
-    --Colors-Brand-800: hsla(271, 48%, 12%, 1);
-    --Colors-Brand-900: hsla(272, 46%, 7%, 1);
-    --Colors-Brand-950: hsla(0, 0%, 0%, 1);
+    /* Grey — RedSeed Design System v1 (Figma Foundations · Primitives · Grey) */
+    --Colors-Grey-25: #fcfcfc;
+    --Colors-Grey-50: #fafafa;
+    --Colors-Grey-100: #f5f5f5;
+    --Colors-Grey-200: #eaeaec;
+    --Colors-Grey-300: #d6d8db;
+    --Colors-Grey-400: #a3a7ae;
+    --Colors-Grey-500: #71757f;
+    --Colors-Grey-600: #525760;
+    --Colors-Grey-700: #424752;
+    --Colors-Grey-800: #252b37;
+    --Colors-Grey-900: #171c26;
+    --Colors-Grey-950: #090c10;
+    /* Brand — RedSeed Design System v1: primary brand ramp (Journey Green). Purple→green rebrand. */
+    --Colors-Brand-25: #f0f9f7;
+    --Colors-Brand-50: #e2f4ee;
+    --Colors-Brand-100: #c8eadf;
+    --Colors-Brand-200: #9fdbc9;
+    --Colors-Brand-300: #53c6a3;
+    --Colors-Brand-400: #279b78;
+    --Colors-Brand-500: #136c52;
+    --Colors-Brand-600: #135847;
+    --Colors-Brand-700: #124943;
+    --Colors-Brand-800: #113b41;
+    --Colors-Brand-900: #0b292d;
+    --Colors-Brand-950: #071a1d;
     --Colors-RedSeed-Red-5: hsla(0, 67%, 99%, 1);
     --Colors-RedSeed-Red-10: hsla(0, 67%, 98%, 1);
     --Colors-RedSeed-Red-15: hsla(0, 65%, 97%, 1);
@@ -485,4 +487,88 @@
 
     --Colors-Background-AI-1: hsla(264, 74%, 93%, 1);
     --Colors-Background-AI-2: hsla(33, 100%, 96%, 1);
+
+    /* ------------------------------------------------------------------ */
+    /* RedSeed Design System v1 — brand ramps (Figma Foundations)         */
+    /* Named identity ramps. --Colors-Brand-* above is the functional     */
+    /* primary (a greener cut of Journey Green) used by the token layer.  */
+    /* ------------------------------------------------------------------ */
+    --Colors-Journey-Green-25: #fafbfa;
+    --Colors-Journey-Green-50: #f5f7f6;
+    --Colors-Journey-Green-100: #ebeeed;
+    --Colors-Journey-Green-200: #d5dbd8;
+    --Colors-Journey-Green-300: #b3c1bb;
+    --Colors-Journey-Green-400: #859f93;
+    --Colors-Journey-Green-500: #136c51;
+    --Colors-Journey-Green-600: #11634a;
+    --Colors-Journey-Green-700: #0e5942;
+    --Colors-Journey-Green-800: #0a4c38;
+    --Colors-Journey-Green-900: #063c2c;
+    --Colors-Journey-Green-950: #03291d;
+    --Colors-Deep-Teal-25: #fafafa;
+    --Colors-Deep-Teal-50: #f5f6f6;
+    --Colors-Deep-Teal-100: #ebecec;
+    --Colors-Deep-Teal-200: #d5d6d7;
+    --Colors-Deep-Teal-300: #b3b7b8;
+    --Colors-Deep-Teal-400: #858d8e;
+    --Colors-Deep-Teal-500: #113c42;
+    --Colors-Deep-Teal-600: #0f373c;
+    --Colors-Deep-Teal-700: #0c3035;
+    --Colors-Deep-Teal-800: #09282d;
+    --Colors-Deep-Teal-900: #061f22;
+    --Colors-Deep-Teal-950: #031416;
+    --Colors-Modern-Bone-25: #fefefe;
+    --Colors-Modern-Bone-50: #fefdfd;
+    --Colors-Modern-Bone-100: #fcfcfa;
+    --Colors-Modern-Bone-200: #f9f8f6;
+    --Colors-Modern-Bone-300: #f5f4f0;
+    --Colors-Modern-Bone-400: #f1f0e9;
+    --Colors-Modern-Bone-500: #edebe2;
+    --Colors-Modern-Bone-600: #dbdad1;
+    --Colors-Modern-Bone-700: #c5c3bc;
+    --Colors-Modern-Bone-800: #aba9a3;
+    --Colors-Modern-Bone-900: #8a8983;
+    --Colors-Modern-Bone-950: #64635f;
+    --Colors-Warm-Yellow-25: #fefefa;
+    --Colors-Warm-Yellow-50: #fefcf6;
+    --Colors-Warm-Yellow-100: #fcfaed;
+    --Colors-Warm-Yellow-200: #f9f4d9;
+    --Colors-Warm-Yellow-300: #f6edbd;
+    --Colors-Warm-Yellow-400: #f2e597;
+    --Colors-Warm-Yellow-500: #eedc5b;
+    --Colors-Warm-Yellow-600: #dccc54;
+    --Colors-Warm-Yellow-700: #c6b74a;
+    --Colors-Warm-Yellow-800: #ac9e3f;
+    --Colors-Warm-Yellow-900: #8b8032;
+    --Colors-Warm-Yellow-950: #645c22;
+    --Colors-Soft-Lilac-25: #fefcfe;
+    --Colors-Soft-Lilac-50: #fdfafc;
+    --Colors-Soft-Lilac-100: #fbf5fa;
+    --Colors-Soft-Lilac-200: #f8eaf4;
+    --Colors-Soft-Lilac-300: #f3dcee;
+    --Colors-Soft-Lilac-400: #eecbe6;
+    --Colors-Soft-Lilac-500: #e9b8de;
+    --Colors-Soft-Lilac-600: #d8aacd;
+    --Colors-Soft-Lilac-700: #c299b8;
+    --Colors-Soft-Lilac-800: #a884a0;
+    --Colors-Soft-Lilac-900: #886a81;
+    --Colors-Soft-Lilac-950: #624c5d;
+    --Colors-Warm-Mauve-25: #fcfbfc;
+    --Colors-Warm-Mauve-50: #faf7f9;
+    --Colors-Warm-Mauve-100: #f5eff3;
+    --Colors-Warm-Mauve-200: #eadee6;
+    --Colors-Warm-Mauve-300: #dcc6d5;
+    --Colors-Warm-Mauve-400: #cca7c1;
+    --Colors-Warm-Mauve-500: #b97da8;
+    --Colors-Warm-Mauve-600: #ab739b;
+    --Colors-Warm-Mauve-700: #99678b;
+    --Colors-Warm-Mauve-800: #855878;
+    --Colors-Warm-Mauve-900: #6a4660;
+    --Colors-Warm-Mauve-950: #4c3145;
+    /* Secondary brand accents (single tokens, Figma Brand palette · Secondary) */
+    --Colors-Apricot-Lift: #e89b6c;
+    --Colors-Cornflower: #6e8fd6;
+    --Colors-Marigold: #f2b33c;
+    --Colors-Berry: #9a3d6b;
+    --Colors-Plum-Ink: #553150;
 }

package/components/inline_editable_text.css

@@ -0,0 +1,127 @@
+/*
+    InlineEditableText — click-to-edit text that edits in place.
+
+    These rules are structural only: the component deliberately sets NO
+    typography — font/color/line-height are inherited from context. Do not
+    introduce colour/typography here.
+
+    Layout stability (must not shift the text on hover/edit/save/tick):
+      - reserved-width adornment slot: a min-width floor (em-based, scales with
+        the inherited font size) that affordance/spinner/tick share, so swapping
+        them never reflows the text yet a larger consumer icon can still breathe,
+      - opacity-only hover reveal (never display/width change), split on @media (hover: hover),
+      - inline-grid auto-grow sizer whose hidden ::after mirror carries data-value.
+*/
+.rsui-inline-editable-text {
+    display: inline;
+    /* Read-only default: an inert label. Text stays selectable, but the cursor
+       is the arrow, not the browser's default text I-beam. The --editable
+       modifier below overrides this to a pointer. */
+    cursor: default;
+}
+
+.rsui-inline-editable-text--editable {
+    cursor: pointer;
+}
+
+/* Keyboard focus indicator for the role="button" editable control (WCAG 2.4.7).
+   outline (not box-shadow) so it follows inline text fragments if the value
+   wraps. Colour is inherited via currentColor to honour the no-colour rule. */
+.rsui-inline-editable-text--editable:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 0.125em;
+}
+
+.rsui-inline-editable-text__value--placeholder {
+    /* Dim the placeholder while keeping the inherited text colour — no semantic
+       colour token fits without overriding the deliberately-inherited colour. */
+    opacity: 0.6;
+}
+
+.rsui-inline-editable-text__adornment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* em-based so the reserved slot scales with the inherited font size — a
+       heading gets a proportionally larger affordance, body text a smaller one,
+       matching the component's inherit-from-context typography.
+       min-width (not a hard width) reserves a comfortable floor so swapping
+       affordance/spinner/tick never shifts the text, while still letting a
+       larger icon from another consuming app breathe rather than be clipped. */
+    min-width: 1.5em;
+    margin-left: 0.5em;
+    vertical-align: middle;
+}
+
+/* The component owns icon sizing (RSUI convention — see ButtonSlot): the
+   consumer just drops an icon component into the slot, sized here in em so it
+   scales with the surrounding typography. A 0.85em icon inside the 1.5em-min
+   slot always keeps breathing room. No per-consumer width/height. */
+.rsui-inline-editable-text__adornment svg {
+    width: 0.85em;
+    height: 0.85em;
+}
+
+/* Parent-surfaced failure message (optional #error slot). The one deliberate
+   colour exception — a failure signal needs the semantic error token, matching
+   the RSUI form-field error treatment (see rsui-form-field-slot__error). */
+.rsui-inline-editable-text__error {
+    @apply text-sm text-text-error;
+    margin-left: 0.5em;
+}
+
+.rsui-inline-editable-text__sizer {
+    display: inline-grid;
+    max-width: 100%;
+    min-width: 0;
+    vertical-align: top;
+}
+
+.rsui-inline-editable-text__sizer::after,
+.rsui-inline-editable-text__input {
+    grid-area: 1 / 1;
+    width: auto;
+    min-width: 0;
+    font: inherit;
+    color: inherit;
+    line-height: inherit;
+    white-space: normal;
+    overflow-wrap: break-word;
+}
+
+.rsui-inline-editable-text__sizer::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+}
+
+.rsui-inline-editable-text__input {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    outline: none;
+    resize: none;
+    overflow: hidden;
+}
+
+/*
+    On hover-capable devices the pencil affordance is calm — it fades in on
+    hover/focus and the value underlines, matching the meeting-title pattern.
+    On touch (no hover) the affordance stays visible as the only cue.
+*/
+@media (hover: hover) {
+    .rsui-inline-editable-text__affordance {
+        opacity: 0;
+        transition: opacity 0.15s ease-in-out;
+    }
+
+    .rsui-inline-editable-text--editable:hover .rsui-inline-editable-text__affordance,
+    .rsui-inline-editable-text--editable:focus-within .rsui-inline-editable-text__affordance {
+        opacity: 1;
+    }
+
+    .rsui-inline-editable-text--editable:hover .rsui-inline-editable-text__value {
+        text-decoration: underline;
+    }
+}

package/components.css

@@ -60,6 +60,7 @@ Please be careful when adding new components and updating the order.
 @import './components/image_64by25.css';
 @import './components/image_9by16.css';
 @import './components/image_circle.css';
+@import './components/inline_editable_text.css';
 @import './components/link_slot.css';
 @import './components/link_primary.css';
 @import './components/linked_list.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.41.2",
+    "version": "7.43.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",

package/tokens.css

@@ -1,15 +1,18 @@
 @theme inline {
+    /* Semantic tokens — RedSeed Design System v1 (Figma Foundations · Semantic). */
+    /* Status colours (success/warning/error/info) are literal hex: v1 defines them  */
+    /* as semantic endpoints, not full primitive ramps. Neutral/brand/ai ride ramps. */
     --color-text-primary: var(--Colors-Grey-900);
     --color-text-secondary: var(--Colors-Grey-700);
     --color-text-tertiary: var(--Colors-Grey-600);
     --color-text-quaternary: var(--Colors-Grey-500);
     --color-text-disabled: var(--Colors-Grey-400);
     --color-text-brand: var(--Colors-Brand-500);
-    --color-text-success: var(--Colors-RedSeed-Green-500);
-    --color-text-warning: var(--Colors-RedSeed-Yellow-500);
-    --color-text-error: var(--Colors-RedSeed-Red-500);
-    --color-text-info: var(--Colors-RedSeed-Blue-500);
-    --color-text-ai: var(--Colors-RedSeed-Purple-500);
+    --color-text-success: #067647;
+    --color-text-warning: #b54708;
+    --color-text-error: #b42318;
+    --color-text-info: #0077cc;
+    --color-text-ai: var(--Colors-Warm-Mauve-600);
     --color-text-on-color: var(--Colors-Base-white);
 
     --color-background-primary: var(--Colors-Base-white);
@@ -27,46 +30,46 @@
     --color-background-disabled: var(--Colors-Grey-25);
     --color-background-disabled-contrast: var(--Colors-Grey-300);
     --color-background-disabled-invert: var(--Colors-Grey-100);
-    --color-background-success: var(--Colors-RedSeed-Green-10);
-    --color-background-success-contrast: var(--Colors-RedSeed-Green-500);
-    --color-background-success-invert: var(--Colors-RedSeed-Green-20);
-    --color-background-warning: var(--Colors-RedSeed-Yellow-10);
-    --color-background-warning-contrast: var(--Colors-RedSeed-Yellow-500);
-    --color-background-warning-invert: var(--Colors-RedSeed-Yellow-20);
-    --color-background-error: var(--Colors-RedSeed-Red-10);
-    --color-background-error-contrast: var(--Colors-RedSeed-Red-500);
-    --color-background-error-invert: var(--Colors-RedSeed-Red-20);
-    --color-background-info: var(--Colors-RedSeed-Blue-10);
-    --color-background-info-contrast: var(--Colors-RedSeed-Blue-500);
-    --color-background-info-invert: var(--Colors-RedSeed-Blue-20);
-    --color-background-ai-from: var(--Colors-Background-AI-1);
-    --color-background-ai-to: var(--Colors-Background-AI-2);
-    --color-background-ai-contrast: var(--Colors-RedSeed-Purple-500);
-    --color-background-ai-invert: var(--Colors-RedSeed-Purple-20);
+    --color-background-success: #ecfdf3;
+    --color-background-success-contrast: #067647;
+    --color-background-success-invert: #abefc6;
+    --color-background-warning: #fffaeb;
+    --color-background-warning-contrast: #b54708;
+    --color-background-warning-invert: #fedf89;
+    --color-background-error: #fef3f2;
+    --color-background-error-contrast: #b42318;
+    --color-background-error-invert: #fecdca;
+    --color-background-info: #f6fbfd;
+    --color-background-info-contrast: #0077cc;
+    --color-background-info-invert: #99c9eb;
+    --color-background-ai-from: #ebe0fa;
+    --color-background-ai-to: var(--Colors-Background-AI-2); /* v1 defines ai-from only; ai-to kept as warm counterpart */
+    --color-background-ai-contrast: var(--Colors-Warm-Mauve-600);
+    --color-background-ai-invert: var(--Colors-Warm-Mauve-200);
 
     --color-border-primary: var(--Colors-Grey-400);
     --color-border-secondary: var(--Colors-Grey-300);
     --color-border-brand: var(--Colors-Brand-200);
     --color-border-disabled: var(--Colors-Grey-300);
-    --color-border-success: var(--Colors-RedSeed-Green-200);
-    --color-border-warning: var(--Colors-RedSeed-Yellow-200);
-    --color-border-error: var(--Colors-RedSeed-Red-200);
-    --color-border-info: var(--Colors-RedSeed-Blue-200);
-    --color-border-ai: var(--Colors-RedSeed-Purple-200);
+    --color-border-success: #abefc6;
+    --color-border-warning: #fedf89;
+    --color-border-error: #fecdca;
+    --color-border-info: #99c9eb;
+    --color-border-ai: var(--Colors-Warm-Mauve-200);
 
     --color-button-primary: var(--Colors-Brand-600);
-    --color-button-primary-hover: var(--Colors-Brand-700);
+    --color-button-primary-hover: var(--Colors-Plum-Ink); /* v1: green button hovers to Plum Ink */
     --color-button-primary-active: var(--Colors-Brand-800);
-    --color-button-secondary: var(--Colors-Grey-800);
-    --color-button-secondary-hover: var(--Colors-Grey-700);
-    --color-button-secondary-active: var(--Colors-Grey-600);
+    --color-button-secondary: var(--Colors-Deep-Teal-700);
+    --color-button-secondary-hover: var(--Colors-Deep-Teal-800);
+    --color-button-secondary-active: var(--Colors-Deep-Teal-900);
     --color-button-tertiary: var(--Colors-Brand-600);
     --color-button-tertiary-hover: var(--Colors-Brand-700);
     --color-button-tertiary-active: var(--Colors-Brand-800);
-    --color-button-danger-primary: var(--Colors-Error-600);
-    --color-button-danger-secondary: var(--Colors-Error-600);
-    --color-button-danger-hover: var(--Colors-Error-700);
-    --color-button-danger-active: var(--Colors-Error-800);
+    --color-button-danger-primary: #d92d20;
+    --color-button-danger-secondary: #d92d20;
+    --color-button-danger-hover: #b42318;
+    --color-button-danger-active: #912018;
     --color-button-separator: var(--Colors-Grey-200);
     --color-button-disabled: var(--Colors-Grey-200);