@sesamehr/react-design-system 3.8.0 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sesamehr/react-design-system",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "description": "Sesame HR React design system — components and design tokens",
   "license": "MIT",
   "type": "module",

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

@@ -76,6 +76,12 @@
   --brand-subtle-border: var(--color-brand-200);
   --brand-subtle-active: var(--color-brand-200);
 
+  /* Figma's `selected` pair (Chip board, node 905:703), bound on Selected and
+     again on Dragged — which is why a dragged chip is this fill plus a shadow.
+     Written here because the sync had not brought the collection across. */
+  --selected: var(--color-brand-900);
+  --selected-foreground: var(--color-white);
+
   --background-custom: #f5f5f7;
   --background-custom-gradient: #e0e7ee;
 
@@ -380,6 +386,8 @@
   --color-brand-subtle-foreground: var(--brand-subtle-foreground);
   --color-brand-subtle-border: var(--brand-subtle-border);
   --color-brand-subtle-active: var(--brand-subtle-active);
+  --color-selected: var(--selected);
+  --color-selected-foreground: var(--selected-foreground);
   --color-success: var(--success);
   --color-success-hover: var(--success-hover);
   --color-success-subtle: var(--success-subtle);

package/src/assets/styles/theme-v3.test.ts

@@ -56,6 +56,31 @@ describe('theme-v3 brand-subtle', () => {
   });
 });
 
+/**
+ * `selected` and `selected-foreground` are the Chip board's own variables
+ * (node 905:703), bound on its Selected variant and again on Dragged. They
+ * were written here ahead of the sync, so these pin the two values the sync
+ * has to agree with — and `--selected` must stay brand-900 rather than drift
+ * to `--primary`, which is a different near-black.
+ */
+describe('theme-v3 selected', () => {
+  const family = {
+    '--selected': 'var(--color-brand-900)',
+    '--selected-foreground': 'var(--color-white)',
+  };
+
+  it.each(Object.entries(family))(
+    'should declare %s as the Figma binding %s',
+    (name, value) => {
+      expect(declares(name, value)).toBe(true);
+    }
+  );
+
+  it.each(Object.keys(family))('should expose %s as a utility', name => {
+    expect(exposes(name)).toBe(true);
+  });
+});
+
 describe('theme-v3 highlight', () => {
   const family = {
     '--highlight': 'var(--color-amber-100)',