@sesamehr/react-design-system 3.4.1 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sesamehr/react-design-system",
-  "version": "3.4.1",
+  "version": "3.6.0",
   "description": "Sesame HR React design system — components and design tokens",
   "license": "MIT",
   "type": "module",
@@ -45,6 +45,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@internationalized/date": "^3.5.0",
     "@number-flow/react": "^0.6.2",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-checkbox": "^1.3.2",
@@ -59,7 +60,7 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toast": "^1.2.24",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@sesame/orxata-icons": "1.8.1",
+    "@sesame/orxata-icons": "1.8.2",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-table": "^8.21.2",
     "@tanstack/react-virtual": "^3.14.13",

package/src/assets/styles/theme-v3.css

@@ -82,6 +82,31 @@
   --brand-accent-300: var(--color-emerald-300);
   --brand-accent-500: var(--color-emerald-500);
   --brand-accent-900: var(--color-emerald-900);
+
+  /* The AI gradients. Six tokens, three pairs, each pair one `from` and one
+     `to` because a gradient is the only thing in the system that needs two
+     colours to name one surface — Figma carries them as the colour styles
+     `gradient/ai-border`, `gradient/ai-surface` and `gradient/ai-surface-active`
+     with these as the bound stops, and the stops are what the components read.
+
+     Both pairs run yellow → brand, and that is the point: the AI marker is the
+     one place in the system where two hues appear in one shape, so nothing else
+     can be mistaken for it. The yellow end is `yellow-300` rather than a lighter
+     step in the border pair because a 1px line needs the saturated one to read
+     at all.
+
+     `-active` is the louder step on an AI surface. `OxAiTag` is not
+     interactive and binds nothing to it; `OxAiSearchAsk` does, for the row the
+     arrows have reached — a zinc highlight over the surface gradient would hide
+     the thing that makes the row the AI one.
+
+     Dark values are parked with the rest of the dark theme. */
+  --ai-border-from: var(--color-yellow-300);
+  --ai-border-to: var(--color-brand-500);
+  --ai-surface-from: var(--color-yellow-50);
+  --ai-surface-to: var(--color-brand-50);
+  --ai-surface-active-from: var(--color-yellow-100);
+  --ai-surface-active-to: var(--color-brand-100);
 }
 
 :root {
@@ -215,8 +240,8 @@
      `Semantic-Colors/overlay` (Overlay board, node 1845:51257) aliases
      `base/alpha-60`, whose name counts the opacity of what shows *through* it
      and whose value is therefore 0.4 — white at 40%, not 60. Paired with
-     `backdrop-blur-lg` at the call site, which is the 16px the component's
-     effect is bound to.
+     `backdrop-blur-xl` at the call site, which is the 24px the component's
+     effect is bound to (`Blur/xl`).
 
      Figma's dark mode points the same semantic name at `base/black-alpha-40`,
      black at 40%. There is no `.dark` block in v3 yet, so that value is
@@ -232,6 +257,59 @@
      pick a darker surface rather than a reason to tint it a different colour. */
   --state-layer: var(--color-white);
 
+  /* The dark wash that makes a count, a caption or a play glyph legible over a
+     photograph nobody has seen yet. Figma's `media-scrim` aliases zinc/950 and
+     `media-scrim-foreground` white, and both hold the same value in Dark: the
+     photograph is the background, so there is nothing for a mode to invert.
+     The opacity belongs to the component rather than to the token — a gallery's
+     "+N" cell and a video's play button draw it at 55%, a duration pill at full
+     strength.
+
+     Declared here although the components that read it are Vue-only so far:
+     `orxata/parity-theme` compares both packages' token names and values, and
+     a React build fails on an unresolved `var()` rather than ignoring it. */
+  --media-scrim: var(--color-zinc-950);
+  --media-scrim-foreground: var(--color-white);
+
+  /* The brand ramp as read *inside the reader's own chat bubble*, where
+     `muted` and `secondary` read as holes punched in it. Figma's `chat-user-*`
+     family, bound on the `Surface=Brand` variant of every chat attachment and
+     identical in Dark for the same reason — the bubble is brand-coloured in
+     both modes. `-media` is the tint behind a thumbnail that has not loaded,
+     `-surface` the card body a link preview or a location draws behind its
+     text, `-muted-foreground` the secondary line on that body — a domain,
+     a description, an address — where `muted-foreground` would be unreadable
+     grey-on-blue, and `-waveform` the unplayed bars of a voice note. */
+  --chat-user-media: var(--color-brand-400);
+  --chat-user-surface: var(--color-brand-600);
+  --chat-user-muted-foreground: var(--color-brand-100);
+  --chat-user-waveform: var(--color-brand-300);
+
+  /* The bars of a voice note nobody has played yet, in somebody else's bubble.
+     Outside the `chat-user-*` family because it is the one chat colour drawn on
+     a neutral surface rather than on the brand bubble — and so the one with a
+     Dark value in Figma that differs from its Light one, zinc/600 against
+     zinc/300. Only the Light one is here, like every other semantic: this theme
+     has no dark block to put the other in. The played bars are `brand`, so this
+     is the quieter half of a pair rather than a colour of its own. */
+  --chat-waveform: var(--color-zinc-300);
+
+  /* The five file types the v3 board closes the set at, and the one foreground
+     that reads on all of them. The badge on `OxFileCard` is the only thing that
+     binds them: `type` picks the ramp, the abbreviation printed on it is the
+     caller's. Figma's `file-*` family, in `Semantic-Colors`.
+
+     Declared in both packages although the component that reads them is
+     Vue-only so far: `orxata/parity-theme` compares both packages' token names
+     and values, and a React build fails on an unresolved `var()` rather than
+     ignoring it. */
+  --file-pdf: var(--color-red-500);
+  --file-word: var(--color-blue-600);
+  --file-excel: var(--color-green-600);
+  --file-powerpoint: var(--color-orange-500);
+  --file-generic: var(--color-zinc-500);
+  --file-foreground: var(--color-white);
+
   --chart-1: var(--color-brand-400);
   --chart-2: var(--color-brand-500);
   --chart-3: var(--color-brand-600);
@@ -316,6 +394,12 @@
   --color-brand-accent-300: var(--brand-accent-300);
   --color-brand-accent-500: var(--brand-accent-500);
   --color-brand-accent-900: var(--brand-accent-900);
+  --color-ai-border-from: var(--ai-border-from);
+  --color-ai-border-to: var(--ai-border-to);
+  --color-ai-surface-from: var(--ai-surface-from);
+  --color-ai-surface-to: var(--ai-surface-to);
+  --color-ai-surface-active-from: var(--ai-surface-active-from);
+  --color-ai-surface-active-to: var(--ai-surface-active-to);
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -355,6 +439,19 @@
   --color-ring-error: var(--ring-error);
   --color-state-layer: var(--state-layer);
   --color-overlay: var(--overlay);
+  --color-media-scrim: var(--media-scrim);
+  --color-media-scrim-foreground: var(--media-scrim-foreground);
+  --color-chat-user-media: var(--chat-user-media);
+  --color-chat-user-surface: var(--chat-user-surface);
+  --color-chat-user-muted-foreground: var(--chat-user-muted-foreground);
+  --color-chat-user-waveform: var(--chat-user-waveform);
+  --color-chat-waveform: var(--chat-waveform);
+  --color-file-pdf: var(--file-pdf);
+  --color-file-word: var(--file-word);
+  --color-file-excel: var(--file-excel);
+  --color-file-powerpoint: var(--file-powerpoint);
+  --color-file-generic: var(--file-generic);
+  --color-file-foreground: var(--file-foreground);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);