@nadicodeai/design-system 0.4.1 → 0.5.1

package/DESIGN.md

@@ -128,11 +128,11 @@ colors:
   dark-cyan-soft: "#7ee8de"
   dark-cyan-deep: "#1f9e9a"
   dark-success: "#62d494"
-  dark-state-ready: "#d4d4d4"
-  dark-state-running: "#a9befa"
-  dark-state-review: "#ffd97d"
-  dark-state-blocked: "#f7b3b5"
-  dark-state-complete: "#62d494"
+  dark-state-ready: "#8f8f8f"
+  dark-state-running: "#4f6ae6"
+  dark-state-review: "#f5a623"
+  dark-state-blocked: "#cd212a"
+  dark-state-complete: "#008c45"
   dark-selection-bg: "#ededed"
   dark-selection-fg: "#0a0a0a"
   dark-cross: "#6e6e6e"
@@ -256,6 +256,7 @@ rounded:
 
 spacing:
   xxs: 4px
+  filter-chip-gap: 6px
   xs: 8px
   sm: 12px
   md: 16px
@@ -312,6 +313,8 @@ spacing:
   h-bento-mobile-copy: 248px
   h-bento-mobile-main: 537px
   h-bento-strip: 20px
+  filter-chip-height: 28px
+  filter-chip-icon: 14px
 
 components:
   label-mono:
@@ -348,6 +351,13 @@ components:
     typography: "{typography.caption}"
     rounded: "{rounded.full}"
     padding: "0px {spacing.xs}"
+  filter-chip:
+    backgroundColor: "{colors.canvas-soft}"
+    textColor: "{colors.body}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.sm}"
+    padding: "0px {spacing.xs}"
+    height: "{spacing.filter-chip-height}"
   state-tag-ready:
     backgroundColor: "{colors.canvas}"
     textColor: "{colors.ink}"
@@ -479,7 +489,7 @@ Backgrounds are `{colors.background-100}` (page default, white) and `{colors.bac
 - **Semantic feedback** (`{colors.success}`, `{colors.error}` + `{colors.error-soft}`/`{colors.error-deep}`, `{colors.warning}` + `{colors.warning-soft}`/`{colors.warning-deep}`, `{colors.info}`): validation, caution, approval, and operational feedback. `success` uses `green-italia-700`; `error` uses `red-italia-800` with soft/deep on `red-italia-200`/`red-italia-900`; `warning` uses `amber-600` with soft/deep on `amber-200`/`amber-900`; `info` (`blue-cobalto-700`) is the new informational role.
 - **Accent** (`{colors.accent}` = `red-italia-700`): UI highlights, badges, and selected markers. Flag red is now an active accent — the former "decoration-only" restriction on flag red is retired. Do not conflate this functional Italia `accent` with the identically-named shadcn surface role `accent`: the latter is a neutral (mapped to `{colors.canvas-soft-2}` in light and `{colors.dark-canvas-soft-2}` in dark) and carries no flag-red hue despite the shared word.
 - **Flag Red** (`{colors.flag-red}`): kept as a stable alias at the same value as `{colors.accent}` (`red-italia-700`, `#cd212a`). `accent` and `flag-red` are two roles at one hex: `accent` is the interface-highlight role, `flag-red` is the identity-mark alias. `error` (`red-italia-800`) stays a distinct, deeper red; never use it as an accent.
-- **Workflow States** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`): the left-border/state vocabulary for agentic work surfaces. `state-running` is now `blue-cobalto-700` and `state-complete` is `green-italia-700` — blue means in motion, green means done; `state-ready` moves to `gray-900`. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) ride the same Italia scales moved to lighter steps for the dark console — ready ink-neutral (`gray` step `#d4d4d4`), running a light `blue-cobalto` (blue = in motion), review `amber-400`, blocked `red-italia-400`, complete `green-italia-500` — carried on the `state-tag` 3 px `border-left`, each clearing 4.5:1 on the dark canvas for its label.
+- **Workflow States** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`): the left-border/state vocabulary for agentic work surfaces. `state-running` is `blue-cobalto-700` and `state-complete` is `green-italia-700` — blue means in motion, green means done; `state-ready` is `gray-900`. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) preserve the same functional identity instead of shifting to pastel labels: ready uses `gray-700`, running uses `blue-cobalto-600`, review reuses `amber-600`, blocked uses `red-italia-700`, and complete reuses `green-italia-700`. These state colors are carried only by the `state-tag` 3 px `border-left` rail and related non-text state accents; label text stays on the neutral foreground roles for contrast in both light and dark.
 
 ### Chart categoricals (functional tier)
 
@@ -503,9 +513,9 @@ Four campo rules govern their use:
 
 ### Dark primitives
 
-**Dark Primitives** (`{colors.dark-canvas}`, `{colors.dark-ink}`, `{colors.dark-line}`, and siblings) are the source tokens for the generated shadcn `.dark` role map — mode-bearing primitives, not a separate palette; consuming apps opt in by applying a `.dark` ancestor through their runtime theme provider. The dark neutrals (`dark-canvas`, `dark-canvas-soft`, `dark-canvas-soft-2`, `dark-ink`, `dark-body`, `dark-muted`, `dark-line`, `dark-input`, `dark-seam`, `dark-primary`, `dark-on-primary`) are true neutrals: each is a pure gray (equal channels) so the interface carries no ambient tint, and they step in clear elevation planes (`dark-canvas` → `dark-canvas-soft` → `dark-canvas-soft-2`). `dark-input` is the resting text-input boundary, held one gray brighter than the decorative `dark-line` border so a field edge clears non-text contrast before the focus ring appears. Chroma lives only in the intentional accents: the dark semantic ramps ride the same Italia scales as their light counterparts, moved to lighter steps so each pair clears 4.5:1 on the dark surfaces — `dark-link`/`dark-link-deep` on `green-italia-400`/`green-italia-300`, `dark-error`/`dark-error-deep` on `red-italia-400`/`red-italia-300`, `dark-warning`/`dark-warning-deep` on `amber-400`/`amber-300`, with the `*-soft` tinted grounds on each scale's `1000` step, plus `dark-success` on `green-italia-500` for the positive-feedback green and the `dark-state-*` workflow family on their matching Italia scale steps. The remaining dark-ramp members stay true-neutral: `dark-selection-bg`/`dark-selection-fg` invert the light selection (a bright neutral ground with dark text) and `dark-cross` is the visible mark gray, brighter than the decorative `dark-line`. Never reintroduce hue into the neutral set.
+**Dark Primitives** (`{colors.dark-canvas}`, `{colors.dark-ink}`, `{colors.dark-line}`, and siblings) are the source tokens for the generated shadcn `.dark` role map — mode-bearing primitives, not a separate palette; consuming apps opt in by applying a `.dark` ancestor through their runtime theme provider. The dark neutrals (`dark-canvas`, `dark-canvas-soft`, `dark-canvas-soft-2`, `dark-ink`, `dark-body`, `dark-muted`, `dark-line`, `dark-input`, `dark-seam`, `dark-primary`, `dark-on-primary`) are true neutrals: each is a pure gray (equal channels) so the interface carries no ambient tint, and they step in clear elevation planes (`dark-canvas` → `dark-canvas-soft` → `dark-canvas-soft-2`). `dark-input` is the resting text-input boundary, held one gray brighter than the decorative `dark-line` border so a field edge clears non-text contrast before the focus ring appears. Chroma lives only in the intentional accents: the dark semantic ramps ride the same Italia scales as their light counterparts, moved to lighter steps where they are text-bearing — `dark-link`/`dark-link-deep` on `green-italia-400`/`green-italia-300`, `dark-error`/`dark-error-deep` on `red-italia-400`/`red-italia-300`, `dark-warning`/`dark-warning-deep` on `amber-400`/`amber-300`, with the `*-soft` tinted grounds on each scale's `1000` step, plus `dark-success` on `green-italia-500` for the positive-feedback green. The `dark-state-*` workflow family is not a text role; it preserves the matching ready/running/review/blocked/complete rail colors for 3 px state accents while text stays on neutral foreground roles. The remaining dark-ramp members stay true-neutral: `dark-selection-bg`/`dark-selection-fg` invert the light selection (a bright neutral ground with dark text) and `dark-cross` is the visible mark gray, brighter than the decorative `dark-line`. Never reintroduce hue into the neutral set.
 
-This grayscale-only discipline is not dark-specific: it governs the whole generated shadcn surface-role bridge in both the light `:root` and dark `.dark` maps. The surface-role family — `background`, `card`, `popover`, `muted`, `secondary`, the `sidebar` roles and their `-foreground`/`-border` variants, plus `border` and `input` — resolves only to pure grays (equal channels) in both themes; hue in the role bridge is reserved for `primary`, `destructive`, and the focus rings (`ring`/`sidebar-ring`). Large product surfaces never take a tinted fill.
+This grayscale-only discipline is not dark-specific: it governs the whole generated shadcn surface-role bridge in both the light `:root` and dark `.dark` maps. The surface-role family — `background`, `card`, `popover`, `muted`, `secondary`, the `sidebar` roles and their `-foreground`/`-border` variants, plus `border` and `input` — resolves only to pure grays (equal channels) in both themes; hue in the role bridge is reserved for `primary`, `destructive`, and the focus rings (`ring`/`sidebar-ring`). In dark product shells, `background`, `card`, `popover`, and `sidebar` share `{colors.dark-canvas}` so page chrome, cards, tables, overlays, and nav rails read as one black console. `muted`, `secondary`, and `accent` retain the `dark-canvas-soft` steps for small interaction states such as hover, selected rows, keycaps, and inline controls. Large product surfaces never take a tinted or soft-panel fill by default.
 
 Do not delete a color because the current website kernel does not consume it. Prototype usage is not palette authority; removals require an explicit palette migration decision.
 
@@ -515,25 +525,25 @@ Geist Sans carries all narrative and interface copy. Geist Mono is reserved for
 
 All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not use viewport-scaled type (no `vw`/`vh` font sizing): use fixed token sizes stepped by breakpoint-specific rules when a headline must grow. The two large display tiers carry a small negative tracking — `display-xl` at `-1.5px` and `display-lg` at `-1px` — so large type reads optically tight; this is a display-heading-only exception and every non-display tier stays at `0px`.
 
-| Token | Size | Weight | Line Height | Use |
-| --- | --- | --- | --- | --- |
-| `{typography.display-xl}` | 72px | 600 | 74px | Large desktop homepage hero only. |
-| `{typography.display-lg}` | 52px | 600 | 54px | Compact hero and major landing headlines. |
-| `{typography.display-md}` | 24px | 600 | 32px | Recovered display tier for compact cards, pricing names, and asset labels. |
-| `{typography.display-sm}` | 20px | 600 | 28px | Recovered small display tier for inline display micro-headings. |
-| `{typography.title-lg}` | 40px | 600 | 41px | Kernel specimen headings and major section headings. |
-| `{typography.title-md}` | 30px | 600 | 32px | Standard section title. |
-| `{typography.title-sm}` | 22px | 600 | 25px | Cell and artifact titles. |
-| `{typography.body-lg}` | 18px | 400 | 27px | Hero/lead paragraphs. |
-| `{typography.body-md}` | 16px | 400 | 25px | Default body copy. |
-| `{typography.body-md-strong}` | 16px | 500 | 24px | Emphasised body copy at the default size. |
-| `{typography.body-sm}` | 14px | 400 | 20px | Secondary copy, nav, compact cell copy. |
-| `{typography.body-sm-strong}` | 14px | 500 | 20px | Emphasised secondary copy and compact labels. |
-| `{typography.caption}` | 12px | 400 | 16px | Footer secondary lines and badge labels. |
-| `{typography.caption-mono}` | 12px | 500 | 16px | Eyebrows, labels, status tags. |
-| `{typography.code}` | 13px | 400 | 20px | Tool calls, snippets, traces. |
-| `{typography.button-lg}` | 16px | 500 | 24px | Marketing-scale button labels. |
-| `{typography.button-md}` | 14px | 500 | 18px | Standard button and control labels. |
+| Token                         | Size | Weight | Line Height | Use                                                                        |
+| ----------------------------- | ---- | ------ | ----------- | -------------------------------------------------------------------------- |
+| `{typography.display-xl}`     | 72px | 600    | 74px        | Large desktop homepage hero only.                                          |
+| `{typography.display-lg}`     | 52px | 600    | 54px        | Compact hero and major landing headlines.                                  |
+| `{typography.display-md}`     | 24px | 600    | 32px        | Recovered display tier for compact cards, pricing names, and asset labels. |
+| `{typography.display-sm}`     | 20px | 600    | 28px        | Recovered small display tier for inline display micro-headings.            |
+| `{typography.title-lg}`       | 40px | 600    | 41px        | Kernel specimen headings and major section headings.                       |
+| `{typography.title-md}`       | 30px | 600    | 32px        | Standard section title.                                                    |
+| `{typography.title-sm}`       | 22px | 600    | 25px        | Cell and artifact titles.                                                  |
+| `{typography.body-lg}`        | 18px | 400    | 27px        | Hero/lead paragraphs.                                                      |
+| `{typography.body-md}`        | 16px | 400    | 25px        | Default body copy.                                                         |
+| `{typography.body-md-strong}` | 16px | 500    | 24px        | Emphasised body copy at the default size.                                  |
+| `{typography.body-sm}`        | 14px | 400    | 20px        | Secondary copy, nav, compact cell copy.                                    |
+| `{typography.body-sm-strong}` | 14px | 500    | 20px        | Emphasised secondary copy and compact labels.                              |
+| `{typography.caption}`        | 12px | 400    | 16px        | Footer secondary lines and badge labels.                                   |
+| `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, labels, status tags.                                             |
+| `{typography.code}`           | 13px | 400    | 20px        | Tool calls, snippets, traces.                                              |
+| `{typography.button-lg}`      | 16px | 500    | 24px        | Marketing-scale button labels.                                             |
+| `{typography.button-md}`      | 14px | 500    | 18px        | Standard button and control labels.                                        |
 
 ## Layout
 
@@ -648,6 +658,8 @@ Interactive CSS components must expose a visible `:focus-visible` state using th
 
 **`badge-secondary`** — small rounded metadata badge for "New", "Beta", "Live", or similar labels.
 
+**`filter-chip`** — removable selected-filter label. Neutral chrome only: `{colors.line}` border, muted/background fill, foreground text, compact radius, and an inline remove icon with a visible `:focus-visible` ring. It names the active facet/value pair and clears that facet; it does not carry lifecycle, workflow, product-tier, or feature-state color. Use this for table/search filters after a shadcn `Select`, `Popover`, or command filter is applied.
+
 **`link-inline`** — inline body link. Uses `{colors.link}` and normal body rhythm.
 
 ### Content Surfaces

package/dist/css/primitives.css

@@ -273,6 +273,42 @@
   color: var(--nc-body);
 }
 
+/* nc-filter-chip — removable selected-filter label (DESIGN.md filter-chip).
+   It uses neutral chrome only: applied filter state is not workflow, lifecycle,
+   or taxonomy state, so color is reserved for the remove affordance focus ring. */
+.nc-filter-chip {
+  display: inline-flex;
+  width: fit-content;
+  min-height: var(--nc-filter-chip-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--nc-filter-chip-gap);
+  border: var(--nc-guide) solid var(--nc-line);
+  border-radius: var(--nc-rounded-sm);
+  padding: 0 var(--nc-xs);
+  background: var(--nc-canvas-soft);
+  color: var(--nc-body);
+}
+
+.nc-filter-chip svg {
+  width: var(--nc-filter-chip-icon);
+  height: var(--nc-filter-chip-icon);
+  flex: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+.dark .nc-filter-chip {
+  border-color: var(--nc-dark-line);
+  background: var(--nc-dark-canvas-soft);
+  color: var(--nc-dark-body);
+}
+
+.nc-filter-chip:focus-visible {
+  outline: 2px solid var(--nc-link);
+  outline-offset: 2px;
+}
+
 /* nc-link-inline — the inline body link style (DESIGN.md link-inline). It reads
    in the {colors.link} accent against the body rhythm (the body type is applied
    in markup via .nc-type-body-md), keeps the natural underline so it stays

package/dist/css/tokens.generated.css

@@ -125,11 +125,11 @@
   --nc-dark-cyan-soft: #7ee8de;
   --nc-dark-cyan-deep: #1f9e9a;
   --nc-dark-success: #62d494;
-  --nc-dark-state-ready: #d4d4d4;
-  --nc-dark-state-running: #a9befa;
-  --nc-dark-state-review: #ffd97d;
-  --nc-dark-state-blocked: #f7b3b5;
-  --nc-dark-state-complete: #62d494;
+  --nc-dark-state-ready: #8f8f8f;
+  --nc-dark-state-running: #4f6ae6;
+  --nc-dark-state-review: #f5a623;
+  --nc-dark-state-blocked: #cd212a;
+  --nc-dark-state-complete: #008c45;
   --nc-dark-selection-bg: #ededed;
   --nc-dark-selection-fg: #0a0a0a;
   --nc-dark-cross: #6e6e6e;
@@ -138,6 +138,7 @@
 
   /* Spacing */
   --nc-xxs: 4px;
+  --nc-filter-chip-gap: 6px;
   --nc-xs: 8px;
   --nc-sm: 12px;
   --nc-md: 16px;
@@ -194,6 +195,8 @@
   --nc-h-bento-mobile-copy: 248px;
   --nc-h-bento-mobile-main: 537px;
   --nc-h-bento-strip: 20px;
+  --nc-filter-chip-height: 28px;
+  --nc-filter-chip-icon: 14px;
 
   /* Radii */
   --nc-rounded-none: 0px;

package/dist/tailwind/nadicode.tailwind.json

@@ -122,11 +122,11 @@
         "dark-cyan-soft": "#7ee8de",
         "dark-cyan-deep": "#1f9e9a",
         "dark-success": "#62d494",
-        "dark-state-ready": "#d4d4d4",
-        "dark-state-running": "#a9befa",
-        "dark-state-review": "#ffd97d",
-        "dark-state-blocked": "#f7b3b5",
-        "dark-state-complete": "#62d494",
+        "dark-state-ready": "#8f8f8f",
+        "dark-state-running": "#4f6ae6",
+        "dark-state-review": "#f5a623",
+        "dark-state-blocked": "#cd212a",
+        "dark-state-complete": "#008c45",
         "dark-selection-bg": "#ededed",
         "dark-selection-fg": "#0a0a0a",
         "dark-cross": "#6e6e6e",
@@ -337,6 +337,7 @@
       },
       "spacing": {
         "xxs": "4px",
+        "filter-chip-gap": "6px",
         "xs": "8px",
         "sm": "12px",
         "md": "16px",
@@ -392,7 +393,9 @@
         "h-bento-secondary": "240px",
         "h-bento-mobile-copy": "248px",
         "h-bento-mobile-main": "537px",
-        "h-bento-strip": "20px"
+        "h-bento-strip": "20px",
+        "filter-chip-height": "28px",
+        "filter-chip-icon": "14px"
       }
     }
   }

package/dist/tailwind/nadicode.theme.css

@@ -42,9 +42,9 @@
   --radius: var(--radius-md);
   --background: var(--color-dark-canvas);
   --foreground: var(--color-dark-ink);
-  --card: var(--color-dark-canvas-soft);
+  --card: var(--color-dark-canvas);
   --card-foreground: var(--color-dark-ink);
-  --popover: var(--color-dark-canvas-soft);
+  --popover: var(--color-dark-canvas);
   --popover-foreground: var(--color-dark-ink);
   --primary: var(--color-dark-primary);
   --primary-foreground: var(--color-dark-on-primary);
@@ -64,7 +64,7 @@
   --chart-3: var(--color-nadicode-chart-3);
   --chart-4: var(--color-nadicode-chart-4);
   --chart-5: var(--color-nadicode-chart-5);
-  --sidebar: var(--color-dark-canvas-soft);
+  --sidebar: var(--color-dark-canvas);
   --sidebar-foreground: var(--color-dark-ink);
   --sidebar-primary: var(--color-dark-primary);
   --sidebar-primary-foreground: var(--color-dark-on-primary);
@@ -84,6 +84,7 @@
 
 :root {
   --nadicode-spacing-xxs: var(--spacing-nadicode-xxs);
+  --nadicode-spacing-filter-chip-gap: var(--spacing-nadicode-filter-chip-gap);
   --nadicode-spacing-xs: var(--spacing-nadicode-xs);
   --nadicode-spacing-sm: var(--spacing-nadicode-sm);
   --nadicode-spacing-md: var(--spacing-nadicode-md);
@@ -140,6 +141,8 @@
   --nadicode-spacing-h-bento-mobile-copy: var(--spacing-nadicode-h-bento-mobile-copy);
   --nadicode-spacing-h-bento-mobile-main: var(--spacing-nadicode-h-bento-mobile-main);
   --nadicode-spacing-h-bento-strip: var(--spacing-nadicode-h-bento-strip);
+  --nadicode-spacing-filter-chip-height: var(--spacing-nadicode-filter-chip-height);
+  --nadicode-spacing-filter-chip-icon: var(--spacing-nadicode-filter-chip-icon);
 }
 
 /* === FAITHFUL PROJECTION of the @google/design.md Tailwind export. === */
@@ -264,11 +267,11 @@
   --color-dark-cyan-soft: #7ee8de;
   --color-dark-cyan-deep: #1f9e9a;
   --color-dark-success: #62d494;
-  --color-dark-state-ready: #d4d4d4;
-  --color-dark-state-running: #a9befa;
-  --color-dark-state-review: #ffd97d;
-  --color-dark-state-blocked: #f7b3b5;
-  --color-dark-state-complete: #62d494;
+  --color-dark-state-ready: #8f8f8f;
+  --color-dark-state-running: #4f6ae6;
+  --color-dark-state-review: #f5a623;
+  --color-dark-state-blocked: #cd212a;
+  --color-dark-state-complete: #008c45;
   --color-dark-selection-bg: #ededed;
   --color-dark-selection-fg: #0a0a0a;
   --color-dark-cross: #6e6e6e;
@@ -427,6 +430,7 @@
   --radius-pill: 100px;
   --radius-full: 9999px;
   --spacing-nadicode-xxs: 4px;
+  --spacing-nadicode-filter-chip-gap: 6px;
   --spacing-nadicode-xs: 8px;
   --spacing-nadicode-sm: 12px;
   --spacing-nadicode-md: 16px;
@@ -483,4 +487,6 @@
   --spacing-nadicode-h-bento-mobile-copy: 248px;
   --spacing-nadicode-h-bento-mobile-main: 537px;
   --spacing-nadicode-h-bento-strip: 20px;
+  --spacing-nadicode-filter-chip-height: 28px;
+  --spacing-nadicode-filter-chip-icon: 14px;
 }

package/dist/tokens/nadicode.dtcg.json

@@ -1328,55 +1328,55 @@
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.831,
-            0.831,
-            0.831
+            0.561,
+            0.561,
+            0.561
           ],
-          "hex": "#d4d4d4"
+          "hex": "#8f8f8f"
         }
       },
       "dark-state-running": {
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.663,
-            0.745,
-            0.98
+            0.31,
+            0.416,
+            0.902
           ],
-          "hex": "#a9befa"
+          "hex": "#4f6ae6"
         }
       },
       "dark-state-review": {
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            1,
-            0.851,
-            0.49
+            0.961,
+            0.651,
+            0.137
           ],
-          "hex": "#ffd97d"
+          "hex": "#f5a623"
         }
       },
       "dark-state-blocked": {
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.969,
-            0.702,
-            0.71
+            0.804,
+            0.129,
+            0.165
           ],
-          "hex": "#f7b3b5"
+          "hex": "#cd212a"
         }
       },
       "dark-state-complete": {
         "$value": {
           "colorSpace": "srgb",
           "components": [
-            0.384,
-            0.831,
-            0.58
+            0,
+            0.549,
+            0.271
           ],
-          "hex": "#62d494"
+          "hex": "#008c45"
         }
       },
       "dark-selection-bg": {
@@ -1443,6 +1443,12 @@
           "unit": "px"
         }
       },
+      "filter-chip-gap": {
+        "$value": {
+          "value": 6,
+          "unit": "px"
+        }
+      },
       "xs": {
         "$value": {
           "value": 8,
@@ -1778,6 +1784,18 @@
           "value": 20,
           "unit": "px"
         }
+      },
+      "filter-chip-height": {
+        "$value": {
+          "value": 28,
+          "unit": "px"
+        }
+      },
+      "filter-chip-icon": {
+        "$value": {
+          "value": 14,
+          "unit": "px"
+        }
       }
     },
     "rounded": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "type": "module",
   "publishConfig": {
     "access": "public"