nitro_kit 2.0.0.alpha.3 → 2.0.0.alpha.4

data/src/stylesheets/nitro_kit/components/details_table.css

@@ -30,11 +30,13 @@
     text-underline-offset: 0.16em;
   }
 
-  :where(
-      [data-nk="details-table"] [data-slot="details-table-link"]:hover,
-      [data-nk="details-table"] [data-slot="details-table-record"]:hover
-    ) {
-    text-decoration-color: currentcolor;
+  @media (hover: hover) {
+    :where(
+        [data-nk="details-table"] [data-slot="details-table-link"]:hover,
+        [data-nk="details-table"] [data-slot="details-table-record"]:hover
+      ) {
+      text-decoration-color: currentcolor;
+    }
   }
 
   :where([data-nk="details-table"] [data-slot="details-table-file"]) {

data/src/stylesheets/nitro_kit/components/dialog.css

@@ -28,8 +28,8 @@
   }
 
   :where([data-nk="dialog"] [data-slot="dialog-title"]) {
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -67,7 +67,7 @@
   @keyframes nk-dialog-enter {
     from {
       opacity: 0;
-      transform: translateY(0.5rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * 2)) scale(0.98);
     }
     to {
       opacity: 1;

data/src/stylesheets/nitro_kit/components/dropdown.css

@@ -9,7 +9,7 @@
     z-index: 50;
     display: none;
     min-inline-size: 12rem;
-    max-inline-size: min(24rem, calc(100vw - (var(--nk-space) * 8)));
+    max-inline-size: min(24rem, calc(100% - (var(--nk-space) * 8)));
     max-block-size: min(24rem, calc(100dvh - (var(--nk-space) * 8)));
     inset: var(--nk-space);
     inset: var(--_nk-overlay-top, var(--nk-space)) auto auto
@@ -56,7 +56,7 @@
     cursor: pointer;
     background: transparent;
     border: 0;
-    border-radius: var(--nk-radius-md);
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -86,7 +86,7 @@
       [data-nk="dropdown"]
         [data-slot="dropdown-item"][data-variant="destructive"]
     ) {
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
   }
 
   :where(
@@ -117,8 +117,8 @@
             [aria-disabled="true"]
           )
       ) {
-      color: var(--nk-color-danger-foreground);
-      background: var(--nk-color-danger);
+      color: var(--nk-color-destructive-foreground);
+      background: var(--nk-color-destructive);
     }
   }
 
@@ -132,7 +132,7 @@
         [data-slot="dropdown-item"]:is(:disabled, [aria-disabled="true"])
     ) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where([data-nk="dropdown"] > [data-slot="dropdown-content"]:popover-open) {
@@ -142,7 +142,7 @@
   @keyframes nk-dropdown-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.25rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * -1)) scale(0.98);
     }
     to {
       opacity: 1;

data/src/stylesheets/nitro_kit/components/dropzone.css

@@ -41,7 +41,7 @@
     color: var(--nk-color-foreground);
     background: var(--nk-color-canvas);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -90,13 +90,13 @@
     padding: calc(var(--nk-space) * 2);
     background: var(--nk-color-canvas);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where([data-nk="dropzone"] [data-slot="dropzone-preview-image"]) {
     grid-row: span 2;
-    inline-size: 3rem;
-    block-size: 3rem;
+    inline-size: calc(var(--nk-space) * 12);
+    block-size: calc(var(--nk-space) * 12);
     object-fit: cover;
     border-radius: var(--nk-radius-sm);
   }
@@ -152,12 +152,12 @@
   }
 
   :where([data-nk="dropzone"][data-state="error"]) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 
   :where([data-nk="dropzone"][data-state="disabled"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
@@ -186,7 +186,7 @@
   }
 
   :where([data-nk="dropzone"] > [data-slot="dropzone-error"]) {
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     font-size: var(--nk-text-sm);
   }
 }

data/src/stylesheets/nitro_kit/components/empty_state.css

@@ -13,15 +13,15 @@
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-icon"]) {
-    inline-size: 2rem;
-    block-size: 2rem;
+    inline-size: calc(var(--nk-space) * 8);
+    block-size: calc(var(--nk-space) * 8);
     color: var(--nk-color-muted-foreground);
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-title"]) {
     max-inline-size: var(--nk-content-md);
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }

data/src/stylesheets/nitro_kit/components/field.css

@@ -18,7 +18,7 @@
 
   :where([data-nk="field"] > [data-slot="field-error"]) {
     padding: 0;
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     font-size: var(--nk-text-sm);
     list-style: none;
   }
@@ -78,6 +78,6 @@
       [data-nk="field"][data-state="invalid"]
         > [data-slot="field-control"][data-nk="input"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }

data/src/stylesheets/nitro_kit/components/fieldset.css

@@ -8,8 +8,8 @@
 
   :where([data-nk="fieldset"] > [data-slot="fieldset-legend"]) {
     padding: 0;
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
   }
 

data/src/stylesheets/nitro_kit/components/flex.css

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="flex"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-direction: var(--_nk-flex-direction);
     flex-wrap: var(--_nk-flex-wrap);
     gap: var(--_nk-layout-gap);

data/src/stylesheets/nitro_kit/components/grid.css

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="grid"]) {
     display: grid;
-    min-width: 0;
+    min-inline-size: 0;
     grid-template-columns: repeat(var(--_nk-grid-columns), minmax(0, 1fr));
     gap: var(--_nk-layout-gap);
   }

data/src/stylesheets/nitro_kit/components/icon.css

@@ -9,18 +9,18 @@
 
 @layer nitro-kit.size {
   :where([data-nk="icon"][data-size="xs"]) {
-    --_nk-icon-size: 0.75rem;
+    --_nk-icon-size: var(--nk-icon-size-xs);
   }
   :where([data-nk="icon"][data-size="sm"]) {
-    --_nk-icon-size: 1rem;
+    --_nk-icon-size: var(--nk-icon-size-sm);
   }
   :where([data-nk="icon"][data-size="md"]) {
-    --_nk-icon-size: 1.25rem;
+    --_nk-icon-size: var(--nk-icon-size-md);
   }
   :where([data-nk="icon"][data-size="lg"]) {
-    --_nk-icon-size: 1.75rem;
+    --_nk-icon-size: var(--nk-icon-size-lg);
   }
   :where([data-nk="icon"][data-size="xl"]) {
-    --_nk-icon-size: 2.25rem;
+    --_nk-icon-size: var(--nk-icon-size-xl);
   }
 }

data/src/stylesheets/nitro_kit/components/input.css

@@ -5,20 +5,20 @@
     display: block;
     inline-size: 100%;
     min-block-size: var(--nk-control-height-md);
-    padding-inline: calc(var(--nk-space) * 3);
+    padding-inline: var(--nk-control-padding-inline);
     color: var(--nk-color-foreground);
     font-size: var(--nk-text-base);
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       border-color var(--nk-duration-normal) var(--nk-ease),
       box-shadow var(--nk-duration-normal) var(--nk-ease);
   }
 
   :where([data-nk="input"][type="checkbox"], [data-nk="input"][type="radio"]) {
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--nk-choice-size-md);
+    block-size: var(--nk-choice-size-md);
     accent-color: var(--nk-color-primary);
   }
 
@@ -55,6 +55,33 @@
     border-inline-end: var(--nk-border-width) solid
       var(--nk-button-default-border);
   }
+
+  /* Data-entry controls read --nk-text-base below the md breakpoint, where
+     a focused control under 16px would zoom the viewport, and --nk-text-sm
+     from md up, beside 14px labels and body text. */
+  @media (min-width: 48rem) {
+    :where(
+        [data-nk="input"]:not(
+            [type="checkbox"],
+            [type="radio"],
+            [type="hidden"]
+          )
+      ) {
+      font-size: var(--nk-text-sm);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+        [data-nk="input"]:not(
+            [type="checkbox"],
+            [type="radio"],
+            [type="hidden"]
+          )
+      ) {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 @layer nitro-kit.state {
@@ -78,10 +105,10 @@
 
   :where([data-nk="input"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where([data-nk="input"][aria-invalid="true"]) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }

data/src/stylesheets/nitro_kit/components/page_header.css

@@ -13,15 +13,15 @@
   }
 
   :where([data-nk="page-header"] > [data-slot="page-header-title"]) {
-    max-width: var(--nk-content-lg);
-    font-size: var(--nk-text-2xl);
-    font-weight: var(--nk-font-weight-bold);
+    max-inline-size: var(--nk-content-lg);
+    font-size: var(--nk-title-page-size);
+    font-weight: var(--nk-title-page-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
 
   :where([data-nk="page-header"] > [data-slot="page-header-description"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);

data/src/stylesheets/nitro_kit/components/pagination.css

@@ -32,8 +32,8 @@
         > [data-slot="pagination-ellipsis-label"]
     ) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -102,7 +102,7 @@
     font-size: var(--nk-text-sm);
     font-weight: var(--nk-font-weight-medium);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(

data/src/stylesheets/nitro_kit/components/pagination_bar.css

@@ -1,7 +1,7 @@
 @layer nitro-kit.base {
   :where([data-nk="pagination-bar"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
@@ -9,7 +9,7 @@
   }
 
   :where([data-nk="pagination-bar"] > [data-slot="pagination-bar-summary"]) {
-    min-width: 0;
+    min-inline-size: 0;
     margin: 0;
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);

data/src/stylesheets/nitro_kit/components/palette.css

@@ -1,113 +1,181 @@
+/* The semantic palette shared by Badge, Alert, and Toast.
+ *
+ * Every family resolves through the public `--nk-palette-*` tint axis, which
+ * samples the color scales and is already appearance-aware, so a component
+ * never restates a hue. Semantic families default to the same steps as their
+ * hue families -- `info` renders exactly like `blue` -- and an application
+ * that rethemes a tint role moves all three components at once. `-content`
+ * carries the paired foreground; the base role carries the tinting accent.
+ *
+ * Alert and Toast are the same kind of thing — a status message — so they also
+ * share one tinted surface and border. Only the components that own a different
+ * job, such as Badge's compact label, set their own tint strength.
+ */
 @layer nitro-kit.variant {
   :where(
-      [data-nk="badge"][data-color="zinc"],
       [data-nk="badge"][data-color="neutral"],
-      [data-nk="alert"][data-variant="default"]
+      [data-nk="alert"][data-variant="default"],
+      [data-nk="toast-item"][data-variant="default"]
     ) {
-    --_nk-palette-light: oklch(37% 0.013 285.805);
-    --_nk-palette-dark: oklch(92% 0.004 286.32);
-    --_nk-palette-tint: oklch(70.5% 0.015 286.067);
+    --_nk-semantic-accent: var(--nk-palette-neutral);
+    --_nk-semantic-content: var(--nk-palette-neutral-content);
   }
 
   :where(
-      [data-nk="badge"][data-color="red"],
-      [data-nk="badge"][data-color="danger"],
-      [data-nk="alert"][data-variant="error"]
+      [data-nk="badge"][data-color="info"],
+      [data-nk="alert"][data-variant="info"],
+      [data-nk="toast-item"][data-variant="info"]
     ) {
-    --_nk-palette-light: oklch(50.5% 0.213 27.518);
-    --_nk-palette-dark: oklch(88.5% 0.062 18.334);
-    --_nk-palette-tint: oklch(70.4% 0.191 22.216);
+    --_nk-semantic-accent: var(--nk-palette-info);
+    --_nk-semantic-content: var(--nk-palette-info-content);
   }
-  :where([data-nk="badge"][data-color="orange"]) {
-    --_nk-palette-light: oklch(55.3% 0.195 38.402);
-    --_nk-palette-dark: oklch(90.1% 0.076 70.697);
-    --_nk-palette-tint: oklch(75% 0.183 55.934);
+
+  :where(
+      [data-nk="badge"][data-color="success"],
+      [data-nk="alert"][data-variant="success"],
+      [data-nk="toast-item"][data-variant="success"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-success);
+    --_nk-semantic-content: var(--nk-palette-success-content);
   }
+
   :where(
-      [data-nk="badge"][data-color="amber"],
       [data-nk="badge"][data-color="warning"],
-      [data-nk="alert"][data-variant="warning"]
+      [data-nk="alert"][data-variant="warning"],
+      [data-nk="toast-item"][data-variant="warning"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-warning);
+    --_nk-semantic-content: var(--nk-palette-warning-content);
+  }
+
+  /* Action components and Alert say `destructive`; Toast announces `error`.
+     Both spellings resolve to the destructive family, and this is the only
+     place they meet. */
+  :where(
+      [data-nk="badge"][data-color="destructive"],
+      [data-nk="alert"][data-variant="destructive"],
+      [data-nk="toast-item"][data-variant="error"]
     ) {
-    --_nk-palette-light: oklch(55% 0.163 48.998);
-    --_nk-palette-dark: oklch(92.4% 0.12 95.746);
-    --_nk-palette-tint: oklch(82.8% 0.189 84.429);
+    --_nk-semantic-accent: var(--nk-palette-destructive);
+    --_nk-semantic-content: var(--nk-palette-destructive-content);
+  }
+
+  /* The shared status treatment. Defined once so Alert and Toast cannot drift
+     apart again, and so a third status component inherits it by opting in. */
+  :where([data-nk="alert"], [data-nk="toast-item"]) {
+    --_nk-semantic-tint: 12%;
+    --_nk-semantic-surface: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) var(--_nk-semantic-tint),
+      var(--nk-color-surface)
+    );
+    --_nk-semantic-border: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) 45%,
+      transparent
+    );
+  }
+
+  /* Dark appearances need a stronger tint to separate the surface from the
+     page behind it. */
+  :where([data-theme="dark"])
+    :where([data-nk="alert"], [data-nk="toast-item"]) {
+    --_nk-semantic-tint: 20%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(:root:not([data-theme]))
+      :where([data-nk="alert"], [data-nk="toast-item"]) {
+      --_nk-semantic-tint: 20%;
+    }
+  }
+
+  /* The decorative hues. These name a color rather than a meaning, so they
+     follow `--nk-palette-*` and stay put when an application rethemes its
+     semantic families. `red` and `destructive` are deliberately different: one is
+     a color, the other is whatever destructive currently means. */
+  :where([data-nk="badge"][data-color="red"]) {
+    --_nk-semantic-accent: var(--nk-palette-red);
+    --_nk-semantic-content: var(--nk-palette-red-content);
+  }
+
+  :where([data-nk="badge"][data-color="orange"]) {
+    --_nk-semantic-accent: var(--nk-palette-orange);
+    --_nk-semantic-content: var(--nk-palette-orange-content);
   }
+
+  :where([data-nk="badge"][data-color="amber"]) {
+    --_nk-semantic-accent: var(--nk-palette-amber);
+    --_nk-semantic-content: var(--nk-palette-amber-content);
+  }
+
   :where([data-nk="badge"][data-color="yellow"]) {
-    --_nk-palette-light: oklch(47.6% 0.114 61.907);
-    --_nk-palette-dark: oklch(94.5% 0.129 101.54);
-    --_nk-palette-tint: oklch(85.2% 0.199 91.936);
+    --_nk-semantic-accent: var(--nk-palette-yellow);
+    --_nk-semantic-content: var(--nk-palette-yellow-content);
   }
+
   :where([data-nk="badge"][data-color="lime"]) {
-    --_nk-palette-light: oklch(45.3% 0.124 130.933);
-    --_nk-palette-dark: oklch(93.8% 0.127 124.321);
-    --_nk-palette-tint: oklch(84.1% 0.238 128.85);
+    --_nk-semantic-accent: var(--nk-palette-lime);
+    --_nk-semantic-content: var(--nk-palette-lime-content);
   }
-  :where(
-      [data-nk="badge"][data-color="green"],
-      [data-nk="badge"][data-color="success"],
-      [data-nk="alert"][data-variant="success"]
-    ) {
-    --_nk-palette-light: oklch(44.8% 0.119 151.328);
-    --_nk-palette-dark: oklch(92.5% 0.084 155.995);
-    --_nk-palette-tint: oklch(79.2% 0.209 151.711);
+
+  :where([data-nk="badge"][data-color="green"]) {
+    --_nk-semantic-accent: var(--nk-palette-green);
+    --_nk-semantic-content: var(--nk-palette-green-content);
   }
+
   :where([data-nk="badge"][data-color="emerald"]) {
-    --_nk-palette-light: oklch(43.2% 0.095 166.913);
-    --_nk-palette-dark: oklch(90.5% 0.093 164.15);
-    --_nk-palette-tint: oklch(76.5% 0.177 163.223);
+    --_nk-semantic-accent: var(--nk-palette-emerald);
+    --_nk-semantic-content: var(--nk-palette-emerald-content);
   }
+
   :where([data-nk="badge"][data-color="teal"]) {
-    --_nk-palette-light: oklch(43.7% 0.078 188.216);
-    --_nk-palette-dark: oklch(91% 0.096 180.426);
-    --_nk-palette-tint: oklch(77.7% 0.152 181.912);
+    --_nk-semantic-accent: var(--nk-palette-teal);
+    --_nk-semantic-content: var(--nk-palette-teal-content);
   }
+
   :where([data-nk="badge"][data-color="cyan"]) {
-    --_nk-palette-light: oklch(45% 0.085 224.283);
-    --_nk-palette-dark: oklch(91.7% 0.08 205.041);
-    --_nk-palette-tint: oklch(78.9% 0.154 211.53);
+    --_nk-semantic-accent: var(--nk-palette-cyan);
+    --_nk-semantic-content: var(--nk-palette-cyan-content);
   }
+
   :where([data-nk="badge"][data-color="sky"]) {
-    --_nk-palette-light: oklch(44.3% 0.11 240.79);
-    --_nk-palette-dark: oklch(90.1% 0.058 230.902);
-    --_nk-palette-tint: oklch(74.6% 0.16 232.661);
+    --_nk-semantic-accent: var(--nk-palette-sky);
+    --_nk-semantic-content: var(--nk-palette-sky-content);
   }
-  :where(
-      [data-nk="badge"][data-color="blue"],
-      [data-nk="badge"][data-color="info"],
-      [data-nk="alert"][data-variant="info"]
-    ) {
-    --_nk-palette-light: oklch(42.4% 0.199 265.638);
-    --_nk-palette-dark: oklch(88.2% 0.059 254.128);
-    --_nk-palette-tint: oklch(70.7% 0.165 254.624);
+
+  :where([data-nk="badge"][data-color="blue"]) {
+    --_nk-semantic-accent: var(--nk-palette-blue);
+    --_nk-semantic-content: var(--nk-palette-blue-content);
   }
+
   :where([data-nk="badge"][data-color="indigo"]) {
-    --_nk-palette-light: oklch(45.7% 0.24 277.023);
-    --_nk-palette-dark: oklch(87% 0.065 274.039);
-    --_nk-palette-tint: oklch(67.3% 0.182 276.935);
+    --_nk-semantic-accent: var(--nk-palette-indigo);
+    --_nk-semantic-content: var(--nk-palette-indigo-content);
   }
+
   :where([data-nk="badge"][data-color="violet"]) {
-    --_nk-palette-light: oklch(49.1% 0.27 292.581);
-    --_nk-palette-dark: oklch(89.4% 0.057 293.283);
-    --_nk-palette-tint: oklch(70.2% 0.183 293.541);
+    --_nk-semantic-accent: var(--nk-palette-violet);
+    --_nk-semantic-content: var(--nk-palette-violet-content);
   }
+
   :where([data-nk="badge"][data-color="purple"]) {
-    --_nk-palette-light: oklch(49.6% 0.265 301.924);
-    --_nk-palette-dark: oklch(90.2% 0.063 306.703);
-    --_nk-palette-tint: oklch(71.4% 0.203 305.504);
+    --_nk-semantic-accent: var(--nk-palette-purple);
+    --_nk-semantic-content: var(--nk-palette-purple-content);
   }
+
   :where([data-nk="badge"][data-color="fuchsia"]) {
-    --_nk-palette-light: oklch(51.8% 0.253 323.949);
-    --_nk-palette-dark: oklch(90.3% 0.076 319.62);
-    --_nk-palette-tint: oklch(74% 0.238 322.16);
+    --_nk-semantic-accent: var(--nk-palette-fuchsia);
+    --_nk-semantic-content: var(--nk-palette-fuchsia-content);
   }
+
   :where([data-nk="badge"][data-color="pink"]) {
-    --_nk-palette-light: oklch(52.5% 0.223 3.958);
-    --_nk-palette-dark: oklch(89.9% 0.061 343.231);
-    --_nk-palette-tint: oklch(71.8% 0.202 349.761);
+    --_nk-semantic-accent: var(--nk-palette-pink);
+    --_nk-semantic-content: var(--nk-palette-pink-content);
   }
+
   :where([data-nk="badge"][data-color="rose"]) {
-    --_nk-palette-light: oklch(51.4% 0.222 16.935);
-    --_nk-palette-dark: oklch(89.2% 0.058 10.001);
-    --_nk-palette-tint: oklch(71.2% 0.194 13.428);
+    --_nk-semantic-accent: var(--nk-palette-rose);
+    --_nk-semantic-content: var(--nk-palette-rose-content);
   }
 }

data/src/stylesheets/nitro_kit/components/progressive_image.css

@@ -47,7 +47,7 @@
         > [data-slot="progressive-image-placeholder"]
     ) {
     z-index: 1;
-    filter: blur(1rem);
+    filter: blur(calc(var(--nk-space) * 4));
     opacity: 0;
     transform: scale(1.05);
   }