@ropav/styles 0.5.0 → 0.7.0

package/dist/components/checkbox.css

@@ -2,7 +2,7 @@
    Base checkbox styles
    ========================================================================== */
 
-.checkbox {
+.rp-checkbox {
   @apply flex flex-col items-start gap-1 outline-none no-highlight;
 
   cursor: var(--cursor-interactive);
@@ -17,7 +17,7 @@
     @apply select-none;
   }
 
-  .checkbox__content [data-slot="label"] {
+  .rp-checkbox__content [data-slot="label"] {
     cursor: var(--cursor-interactive);
   }
 
@@ -34,14 +34,16 @@
   /* Indicator styles */
   &[data-selected="true"],
   &[data-indeterminate="true"] {
-    .checkbox__indicator {
+    .rp-checkbox__indicator {
       border-color: var(--accent-foreground);
     }
   }
 
   /* Checkmark SVG indicator */
   [data-slot="checkbox-default-indicator--checkmark"] {
-    @apply size-2.5 stroke-[2.5px] text-accent-foreground;
+    @apply size-2.5 stroke-[2.5px];
+
+    color: var(--checkbox-control-fg-checked);
 
     /**
      * Transitions
@@ -58,7 +60,7 @@
   &[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"],
   &[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"],
   &[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] {
-    @apply text-danger-foreground;
+    color: var(--checkbox-control-fg-invalid);
   }
 
   /* Indeterminate line indicator */
@@ -73,7 +75,7 @@
     [data-slot="checkbox-default-indicator--indeterminate"],
   &[data-indeterminate="true"][aria-invalid="true"]
     [data-slot="checkbox-default-indicator--indeterminate"] {
-    @apply text-danger-foreground;
+    color: var(--checkbox-control-fg-invalid);
   }
 }
 
@@ -81,13 +83,33 @@
    Checkbox control (the square button)
    ========================================================================== */
 
-.checkbox__control {
-  @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-md border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight;
+.rp-checkbox__control {
+  @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden border [border-width:var(--border-width-field)] shadow-field outline-none no-highlight;
+
+  /* The cap is what keeps the box reading square at 16px: the field radius is set for a 36px
+   * control, and worn whole here it looks twice as round as the field beside it. */
+  border-radius: min(var(--field-radius, calc(var(--radius) * 0.75)), 25%);
+
+  /* Four things carry state here: the box's fill and edge, the glyph inside it, and the `::before`
+   * that scales in behind the glyph. Checked and indeterminate share a colour, as do the two
+   * invalid pairings, so each is named for what it means rather than for every combination.
+   * `--secondary` re-points the fill and nothing else. */
+  --checkbox-control-bg: var(--field-background, var(--default));
+  --checkbox-control-bg-checked: var(--accent);
+  --checkbox-control-bg-checked-pressed: var(--accent-hover);
+  --checkbox-control-bg-invalid: var(--danger);
+  --checkbox-control-border: var(--field-border, var(--border));
+  --checkbox-control-border-hover: var(--field-border-hover);
+  --checkbox-control-border-checked: transparent;
+  --checkbox-control-fg-checked: var(--accent-foreground);
+  --checkbox-control-fg-invalid: var(--danger-foreground);
+  --checkbox-control-fill: var(--accent);
+  --checkbox-control-fill-hover: var(--accent-hover);
+  --checkbox-control-fill-invalid: var(--danger);
+
+  background-color: var(--checkbox-control-bg);
+  border-color: var(--checkbox-control-border);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 200ms var(--ease-out),
     border-color 200ms var(--ease-out),
@@ -98,49 +120,49 @@
 
   /* Background indicator pseudo-element */
   &::before {
-    @apply pointer-events-none absolute inset-0 z-0 origin-center scale-70 rounded-md bg-accent opacity-0 content-[''];
+    @apply pointer-events-none absolute inset-0 z-0 origin-center scale-70 opacity-0 content-[''];
+
+    border-radius: inherit;
+
+    background-color: var(--checkbox-control-fill);
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition:
       scale 100ms var(--ease-linear),
       opacity 200ms var(--ease-linear),
       background-color 200ms var(--ease-out);
-    @apply motion-reduce:transition-none;
   }
 
   /* Interactive states */
   /* Focus */
-  .checkbox:focus-visible &,
-  .checkbox:has([data-slot="checkbox-content"][data-focus-visible="true"]) &,
-  .checkbox [data-slot="checkbox-content"][data-focus-visible="true"] & {
+  .rp-checkbox:focus-visible &,
+  .rp-checkbox:has([data-slot="checkbox-content"][data-focus-visible="true"]) &,
+  .rp-checkbox [data-slot="checkbox-content"][data-focus-visible="true"] & {
     @apply status-focused;
   }
 
   /* Hover */
-  .checkbox:hover &,
-  .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) &,
-  .checkbox [data-slot="checkbox-content"][data-hovered="true"] & {
-    @apply border-field-border-hover;
+  .rp-checkbox:hover &,
+  .rp-checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) &,
+  .rp-checkbox [data-slot="checkbox-content"][data-hovered="true"] & {
+    border-color: var(--checkbox-control-border-hover);
 
     &::before {
-      @apply bg-accent-hover;
+      background-color: var(--checkbox-control-fill-hover);
     }
   }
 
   /* Pressed */
-  .checkbox:active &,
-  .checkbox:has([data-slot="checkbox-content"][data-pressed="true"]) &,
-  .checkbox [data-slot="checkbox-content"][data-pressed="true"] & {
+  .rp-checkbox:active &,
+  .rp-checkbox:has([data-slot="checkbox-content"][data-pressed="true"]) &,
+  .rp-checkbox [data-slot="checkbox-content"][data-pressed="true"] & {
   }
 
   /* Selection states */
   /* Selected */
-  .checkbox[aria-checked="true"] &,
-  .checkbox[data-selected="true"] & {
-    @apply border-transparent text-accent-foreground;
+  .rp-checkbox[aria-checked="true"] &,
+  .rp-checkbox[data-selected="true"] & {
+    border-color: var(--checkbox-control-border-checked);
+    color: var(--checkbox-control-fg-checked);
 
     &::before {
       @apply scale-100 opacity-100;
@@ -148,24 +170,26 @@
   }
 
   /* Indeterminate */
-  .checkbox[data-indeterminate="true"] & {
-    @apply bg-accent text-accent-foreground;
+  .rp-checkbox[data-indeterminate="true"] & {
+    background-color: var(--checkbox-control-bg-checked);
+    color: var(--checkbox-control-fg-checked);
   }
 
   /* Indeterminate + Pressed */
-  .checkbox:active[data-indeterminate="true"] &,
-  .checkbox[data-pressed="true"][data-indeterminate="true"] &,
-  .checkbox:has([data-slot="checkbox-content"][data-pressed="true"])[data-indeterminate="true"] & {
-    @apply bg-accent-hover;
+  .rp-checkbox:active[data-indeterminate="true"] &,
+  .rp-checkbox[data-pressed="true"][data-indeterminate="true"] &,
+  .rp-checkbox:has([data-slot="checkbox-content"][data-pressed="true"])[data-indeterminate="true"]
+    & {
+    background-color: var(--checkbox-control-bg-checked-pressed);
   }
 
   /* Validation states */
   /* Invalid (only when not selected/indeterminate) */
-  .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not(
+  .rp-checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not(
       [data-indeterminate="true"]
     )
     &,
-  .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not(
+  .rp-checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not(
       [data-indeterminate="true"]
     )
     & {
@@ -173,21 +197,26 @@
   }
 
   /* Invalid + Selected */
-  .checkbox[data-invalid="true"][aria-checked="true"] &,
-  .checkbox[data-invalid="true"][data-selected="true"] &,
-  .checkbox[aria-invalid="true"][aria-checked="true"] &,
-  .checkbox[aria-invalid="true"][data-selected="true"] & {
-    @apply border-transparent bg-danger text-danger-foreground;
+  .rp-checkbox[data-invalid="true"][aria-checked="true"] &,
+  .rp-checkbox[data-invalid="true"][data-selected="true"] &,
+  .rp-checkbox[aria-invalid="true"][aria-checked="true"] &,
+  .rp-checkbox[aria-invalid="true"][data-selected="true"] & {
+    background-color: var(--checkbox-control-bg-invalid);
+    border-color: var(--checkbox-control-border-checked);
+    color: var(--checkbox-control-fg-invalid);
 
     &::before {
-      @apply scale-100 bg-danger opacity-100;
+      @apply scale-100 opacity-100;
+
+      background-color: var(--checkbox-control-fill-invalid);
     }
   }
 
   /* Invalid + Indeterminate */
-  .checkbox[data-indeterminate="true"][aria-invalid="true"] &,
-  .checkbox[data-indeterminate="true"][data-invalid="true"] & {
-    @apply bg-danger text-danger-foreground;
+  .rp-checkbox[data-indeterminate="true"][aria-invalid="true"] &,
+  .rp-checkbox[data-indeterminate="true"][data-invalid="true"] & {
+    background-color: var(--checkbox-control-bg-invalid);
+    color: var(--checkbox-control-fg-invalid);
   }
 }
 
@@ -195,7 +224,7 @@
    Checkbox indicator
    ========================================================================== */
 
-.checkbox__indicator {
+.rp-checkbox__indicator {
   @apply relative z-10 flex size-3 items-center justify-center;
 
   & svg {
@@ -207,7 +236,7 @@
    Disabled modifier
    ========================================================================== */
 
-.checkbox--disabled {
+.rp-checkbox--disabled {
   @apply status-disabled;
 }
 
@@ -215,50 +244,20 @@
    Variant property definitions
    ========================================================================== */
 
-.checkbox--primary {
+.rp-checkbox--primary {
   /* Default styles */
 }
 
-.checkbox--secondary .checkbox__control {
+.rp-checkbox--secondary .rp-checkbox__control {
   @apply shadow-none;
-  background-color: var(--checkbox-control-bg);
-
-  --checkbox-control-bg: var(--default);
 
-  /* Hover state */
-  .checkbox:hover &,
-  .checkbox:has([data-slot="checkbox-content"][data-hovered="true"]) &,
-  .checkbox [data-slot="checkbox-content"][data-hovered="true"] & {
-    @apply border-field-border-hover;
-  }
+  /* No border and no shadow leave the fill as the only thing drawing this box, so a flat neutral
+   * erases it against any surface of the same lightness — a hovered table row is exactly that.
+   * The state layer is an alpha, so it keeps its step over whatever it lands on. */
+  --checkbox-control-bg: var(--state-layer);
 }
 
 /* Checkbox content — the clickable label (control + label text) */
-.checkbox__content {
+.rp-checkbox__content {
   @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
 }
-
-/* Unselected state background for secondary variant */
-.checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not(
-    [data-indeterminate="true"]
-  )
-  .checkbox__control {
-  background-color: var(--checkbox-control-bg);
-}
-
-/* Selected state on secondary variant */
-.checkbox--secondary[aria-checked="true"] .checkbox__control,
-.checkbox--secondary[data-selected="true"] .checkbox__control {
-  &::before {
-    @apply bg-accent;
-  }
-}
-
-/* Indeterminate state on secondary variant */
-.checkbox--secondary[data-indeterminate="true"] .checkbox__control {
-  @apply bg-accent;
-
-  &::before {
-    @apply bg-accent;
-  }
-}

package/dist/components/chip/chip.styles.d.ts

@@ -1,142 +1,25 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const chipVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        soft: {
-            base: string;
-        };
-        tertiary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-}, undefined, {
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        soft: {
-            base: string;
-        };
-        tertiary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    color: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-        soft: {
-            base: string;
-        };
-        tertiary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    label: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const chipVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {
+    color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "primary" | "secondary" | "soft" | "tertiary" | undefined;
+}) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | "soft" | "tertiary" | undefined;
+    }) | undefined) => string;
+    label: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        color?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | "soft" | "tertiary" | undefined;
+    }) | undefined) => string;
+};
 export type ChipVariants = VariantProps<typeof chipVariants>;
 //# sourceMappingURL=chip.styles.d.ts.map

package/dist/components/chip/chip.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,YAAY;;QAWnB,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;QAEN,IAAI;YACF,IAAI;;QAEN,QAAQ;YACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAqDvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dist/components/chip/chip.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/chip/chip.styles.ts
 const chipVariants = tv({
 	defaultVariants: {
@@ -6,27 +6,27 @@ const chipVariants = tv({
 		variant: "secondary"
 	},
 	slots: {
-		base: "chip",
-		label: "chip__label"
+		base: "rp-chip",
+		label: "rp-chip__label"
 	},
 	variants: {
 		color: {
-			accent: { base: "chip--accent" },
-			danger: { base: "chip--danger" },
-			default: { base: "chip--default" },
-			success: { base: "chip--success" },
-			warning: { base: "chip--warning" }
+			accent: { base: "rp-chip--accent" },
+			danger: { base: "rp-chip--danger" },
+			default: { base: "rp-chip--default" },
+			success: { base: "rp-chip--success" },
+			warning: { base: "rp-chip--warning" }
 		},
 		size: {
-			lg: { base: "chip--lg" },
-			md: { base: "chip--md" },
-			sm: { base: "chip--sm" }
+			lg: { base: "rp-chip--lg" },
+			md: { base: "rp-chip--md" },
+			sm: { base: "rp-chip--sm" }
 		},
 		variant: {
-			primary: { base: "chip--primary" },
-			secondary: { base: "chip--secondary" },
-			soft: { base: "chip--soft" },
-			tertiary: { base: "chip--tertiary" }
+			primary: { base: "rp-chip--primary" },
+			secondary: { base: "rp-chip--secondary" },
+			soft: { base: "rp-chip--soft" },
+			tertiary: { base: "rp-chip--tertiary" }
 		}
 	}
 });

package/dist/components/chip.css

@@ -1,6 +1,8 @@
 /* Base styles */
-.chip {
-  @apply inline-flex w-fit shrink-0 items-center gap-0.5 rounded-2xl px-2 py-0.5 text-xs leading-5 font-medium;
+.rp-chip {
+  @apply inline-flex w-fit shrink-0 items-center gap-0.5 px-2 py-0.5 text-xs leading-5 font-medium;
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Default tokens */
   --chip-bg: var(--default);
@@ -16,40 +18,40 @@
    * What cannot come back is the status. The mode has no keyword for success or warning, so
    * every colour collapses onto one appearance and the label is what has to carry the
    * meaning - which is the same reason a chip should not lean on colour alone in the first
-   * place. Only the emphasis split survives, on `.chip--primary` below. */
+   * place. Only the emphasis split survives, on `.rp-chip--primary` below. */
   @media (forced-colors: active) {
     outline: 1px solid CanvasText;
     outline-offset: -1px;
   }
 }
 
-.chip__label {
+.rp-chip__label {
   @apply px-0.5;
 }
 
 /* Color variants - set foreground color */
-.chip--accent {
+.rp-chip--accent {
   --chip-fg: var(--accent-soft-foreground);
 }
 
-.chip--danger {
+.rp-chip--danger {
   --chip-fg: var(--danger-soft-foreground);
 }
 
-.chip--default {
+.rp-chip--default {
   --chip-fg: var(--default-foreground);
 }
 
-.chip--success {
+.rp-chip--success {
   --chip-fg: var(--success-soft-foreground);
 }
 
-.chip--warning {
+.rp-chip--warning {
   --chip-fg: var(--warning-soft-foreground);
 }
 
 /* Variant styles */
-.chip--primary {
+.rp-chip--primary {
   /* The one distinction worth keeping: solid against outlined. `forced-color-adjust` is what
    * makes it readable - without it Chromium paints a `Canvas` backplate over this fill and the
    * label goes with it. */
@@ -60,24 +62,24 @@
   }
 }
 
-.chip--secondary {
+.rp-chip--secondary {
   /* No additional styles for secondary variant */
 }
 
-.chip--tertiary {
+.rp-chip--tertiary {
   --chip-bg: transparent;
 }
 
 /* Size variants */
-.chip--sm {
+.rp-chip--sm {
   @apply px-1 py-0 text-xs;
 }
 
-.chip--md {
+.rp-chip--md {
   @apply text-xs;
 }
 
-.chip--lg {
+.rp-chip--lg {
   @apply px-3 py-1 text-sm font-medium;
 }
 
@@ -86,48 +88,48 @@
 /* ====================== */
 
 /* Primary variants - solid backgrounds */
-.chip--primary.chip--accent {
+.rp-chip--primary.rp-chip--accent {
   --chip-bg: var(--accent);
   --chip-fg: var(--accent-foreground);
 }
 
-.chip--primary.chip--success {
+.rp-chip--primary.rp-chip--success {
   --chip-bg: var(--success);
   --chip-fg: var(--success-foreground);
 }
 
-.chip--primary.chip--warning {
+.rp-chip--primary.rp-chip--warning {
   --chip-bg: var(--warning);
   --chip-fg: var(--warning-foreground);
 }
 
-.chip--primary.chip--danger {
+.rp-chip--primary.rp-chip--danger {
   --chip-bg: var(--danger);
   --chip-fg: var(--danger-foreground);
 }
 
 /* Soft variants - muted backgrounds */
-.chip--accent.chip--soft {
+.rp-chip--accent.rp-chip--soft {
   --chip-bg: var(--accent-soft);
   --chip-fg: var(--accent-soft-foreground);
 }
 
-.chip--success.chip--soft {
+.rp-chip--success.rp-chip--soft {
   --chip-bg: var(--success-soft);
   --chip-fg: var(--success-soft-foreground);
 }
 
-.chip--warning.chip--soft {
+.rp-chip--warning.rp-chip--soft {
   --chip-bg: var(--warning-soft);
   --chip-fg: var(--warning-soft-foreground);
 }
 
-.chip--danger.chip--soft {
+.rp-chip--danger.rp-chip--soft {
   --chip-bg: var(--danger-soft);
   --chip-fg: var(--danger-soft-foreground);
 }
 
-.chip--default.chip--soft {
+.rp-chip--default.rp-chip--soft {
   --chip-bg: var(--default-soft);
   --chip-fg: var(--default-soft-foreground);
 }