ropav 0.1.9 → 0.2.0

package/dist/calendar.css

@@ -171,7 +171,7 @@
     background-color: var(--rp-color-control-selected-bg);
 }
 .rp-calendar__day--selected[data-v-9df33d1a]:hover:not(:disabled) {
-    background-color: var(--rp-primary-color-filled-hover);
+    background-color: var(--rp-color-primary-filled-hover);
 }
 .rp-calendar__day[data-v-9df33d1a]:disabled {
     cursor: not-allowed;

package/dist/color-input.css

@@ -5,8 +5,8 @@
     --_rp-color-input-preview-inset: calc(
         (var(--_rp-color-input-height) - var(--_rp-color-input-preview-size)) / 2
     );
-    --_rp-color-input-empty-tile: var(--rp-color-gray-3);
-    --_rp-color-input-empty-tile-alt: var(--rp-color-white);
+    --_rp-color-input-empty-tile: var(--rp-color-gray-5);
+    --_rp-color-input-empty-tile-alt: var(--rp-color-gray-1);
     --_rp-color-input-empty-grid: conic-gradient(
         var(--_rp-color-input-empty-tile) 25%,
         var(--_rp-color-input-empty-tile-alt) 0 50%,
@@ -33,13 +33,9 @@
 .rp-color-input--size-xl[data-v-fe0168d1] {
     --_rp-color-input-height: var(--rp-size-control-xl);
 }
-html.dark .rp-color-input[data-v-fe0168d1], [data-rp-color-scheme=dark] .rp-color-input[data-v-fe0168d1] {
-    --_rp-color-input-empty-tile: var(--rp-color-dark-6);
-    --_rp-color-input-empty-tile-alt: var(--rp-color-dark-4);
-}
 .rp-color-input[data-v-fe0168d1] .rp-input {
     width: 100%;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
 }
 .rp-color-input[data-v-fe0168d1] .rp-popover__content {

package/dist/color-picker.css

@@ -146,8 +146,8 @@
         0px,
         calc(var(--_rp-color-picker-saturation-height) - var(--_rp-color-picker-thumb-size))
     );
-    --_rp-color-picker-checkerboard-tile: var(--rp-color-gray-3);
-    --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-white);
+    --_rp-color-picker-checkerboard-tile: var(--rp-color-gray-5);
+    --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-gray-1);
     --_rp-color-picker-checkerboard: conic-gradient(
         var(--_rp-color-picker-checkerboard-tile) 25%,
         var(--_rp-color-picker-checkerboard-tile-alt) 0 50%,
@@ -168,10 +168,6 @@
     user-select: none;
     vertical-align: top;
 }
-html.dark .rp-color-picker[data-v-7fe38e4e], [data-rp-color-scheme=dark] .rp-color-picker[data-v-7fe38e4e] {
-    --_rp-color-picker-checkerboard-tile: var(--rp-color-dark-6);
-    --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-dark-4);
-}
 .rp-color-picker--readonly[data-v-7fe38e4e] {
     cursor: default;
 }

package/dist/color-swatch.css

@@ -2,8 +2,8 @@
 .rp-color-swatch[data-v-63bed4a0] {
     --_rp-color-swatch-size: 24px;
     --_rp-color-swatch-radius: var(--rp-radius-sm);
-    --_rp-color-swatch-checkerboard-tile: var(--rp-color-gray-3);
-    --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-white);
+    --_rp-color-swatch-checkerboard-tile: var(--rp-color-gray-5);
+    --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-gray-1);
     --_rp-color-swatch-checkerboard: conic-gradient(
         var(--_rp-color-swatch-checkerboard-tile) 25%,
         var(--_rp-color-swatch-checkerboard-tile-alt) 0 50%,
@@ -31,10 +31,6 @@
     overflow: hidden;
     vertical-align: middle;
 }
-html.dark .rp-color-swatch[data-v-63bed4a0], [data-rp-color-scheme=dark] .rp-color-swatch[data-v-63bed4a0] {
-    --_rp-color-swatch-checkerboard-tile: var(--rp-color-dark-6);
-    --_rp-color-swatch-checkerboard-tile-alt: var(--rp-color-dark-4);
-}
 .rp-color-swatch__icon[data-v-63bed4a0] {
     display: inline-flex;
     align-items: center;

package/dist/combobox.css

@@ -13,7 +13,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     height: var(--_rp-combobox-height);
     padding: 0 var(--_rp-combobox-padding-x);
     gap: var(--rp-spacing-2);
@@ -95,7 +95,7 @@
 .rp-combobox--radius-xl[data-v-b9882cdc] {
     --_rp-combobox-radius: var(--rp-radius-xl);
 }
-html.dark .rp-combobox[data-v-b9882cdc], [data-rp-color-scheme=dark] .rp-combobox[data-v-b9882cdc] {
+[data-scheme=dark] .rp-combobox[data-v-b9882cdc] {
     --_rp-combobox-invalid-border: var(--rp-color-red-light-color);
     --_rp-combobox-invalid-ring: color-mix(
         in srgb,
@@ -194,13 +194,13 @@ html.dark .rp-combobox[data-v-b9882cdc], [data-rp-color-scheme=dark] .rp-combobo
 .rp-combobox__dropdown[data-v-b9882cdc] {
     position: absolute;
     width: calc(100% + var(--rp-border-width-thin) * 2);
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     background-color: var(--rp-color-default);
     border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
     border-radius: var(--_rp-combobox-radius);
     box-shadow: var(--rp-shadow-md);
     padding: var(--rp-spacing-1) 0;
-    max-height: 240px;
+    max-height: var(--rp-component-menu-max-height);
     padding: var(--rp-spacing-1);
 }
 .rp-combobox__dropdown[data-v-b9882cdc] .rp-scroll-area__viewport {
@@ -221,7 +221,7 @@ html.dark .rp-combobox[data-v-b9882cdc], [data-rp-color-scheme=dark] .rp-combobo
     background-color: var(--_rp-combobox-option-highlighted-bg);
 }
 .rp-combobox__option--selected[data-v-b9882cdc] {
-    color: var(--rp-primary-color-light-color);
+    color: var(--rp-color-primary-light-color);
 }
 .rp-combobox__option--disabled[data-v-b9882cdc] {
     color: var(--rp-color-disabled-color);

package/dist/componentColors.js

@@ -1,7 +1,7 @@
 import { t as parseCssColor } from "./color.js";
 //#region src/utils/componentColors.ts
 var componentColors = [
-	"dark",
+	"primary",
 	"gray",
 	"red",
 	"pink",
@@ -17,7 +17,6 @@ var componentColors = [
 	"orange"
 ];
 var componentColorShades = [
-	"0",
 	"1",
 	"2",
 	"3",
@@ -26,13 +25,15 @@ var componentColorShades = [
 	"6",
 	"7",
 	"8",
-	"9"
+	"9",
+	"10",
+	"11",
+	"12"
 ];
 var componentColorNames = new Set(componentColors);
 var componentColorShadeNames = new Set(componentColorShades);
 function parseComponentColor(color) {
 	if (!color) return { kind: "empty" };
-	if (color === "primary") return { kind: "primary" };
 	if (componentColorNames.has(color)) return {
 		kind: "preset",
 		color
@@ -53,7 +54,6 @@ function parseComponentColor(color) {
 }
 function getComponentColorValue(color) {
 	const parsed = parseComponentColor(color);
-	if (parsed.kind === "primary") return "var(--rp-primary-color-filled)";
 	if (parsed.kind === "preset") return `var(--rp-color-${parsed.color}-filled)`;
 	if (parsed.kind === "shade") return `var(--rp-color-${parsed.color}-${parsed.shade})`;
 	if (parsed.kind === "custom") return parsed.value;
@@ -91,42 +91,45 @@ function getComponentColorRoles(color) {
 	switch (parsed.kind) {
 		case "empty":
 		case "invalid": return;
-		case "primary": return createPrimaryColorRoles();
 		case "preset": return createPresetColorRoles(parsed.color);
 		case "shade": return createShadeColorRoles(parsed.color, parsed.shade);
 		case "custom": return createCustomColorRoles(parsed.value);
 	}
 }
-function createPrimaryColorRoles() {
-	return createComponentColorRoles("var(--rp-primary-color-filled)", {
-		hover: "var(--rp-primary-color-filled-hover)",
-		contrast: "var(--rp-primary-color-contrast)",
-		light: "var(--rp-primary-color-light)",
-		lightHover: "var(--rp-primary-color-light-hover)",
-		outline: "var(--rp-primary-color-outline)",
-		outlineHover: "color-mix(in srgb, var(--rp-primary-color-outline) 62%, transparent)",
-		foreground: "var(--rp-primary-color-light-color)"
-	});
-}
 function createPresetColorRoles(color) {
 	return createComponentColorRoles(`var(--rp-color-${color}-filled)`, {
 		hover: `var(--rp-color-${color}-filled-hover)`,
 		contrast: `var(--rp-color-${color}-contrast)`,
 		light: `var(--rp-color-${color}-light)`,
 		lightHover: `var(--rp-color-${color}-light-hover)`,
+		lightActive: `var(--rp-color-${color}-light-active)`,
 		outline: `var(--rp-color-${color}-outline)`,
-		outlineHover: `color-mix(in srgb, var(--rp-color-${color}-outline) 62%, transparent)`,
+		outlineHover: `var(--rp-color-${color}-outline-hover)`,
 		foreground: `var(--rp-color-${color}-light-color)`
 	});
 }
+/**
+* Readable text for content sitting on a palette step, by Radix band:
+* steps 1-8 are backgrounds/borders (step-12 text reads on all of them),
+* 9-10 are solids (the generated companion foreground), 11-12 are themselves
+* text colors (step-1 is the app background they invert against).
+*/
+function getShadeContrastColor(color, step) {
+	if (step >= 11) return `var(--rp-color-${color}-1)`;
+	if (step >= 9) return `var(--rp-color-${color}-contrast)`;
+	return `var(--rp-color-${color}-12)`;
+}
 function createShadeColorRoles(color, shade) {
-	const base = `var(--rp-color-${color}-${shade})`;
-	const hoverShade = Math.min(Number(shade) + 1, 9);
+	const step = Number(shade);
+	const hoverStep = Math.min(step + 1, 12);
+	const activeStep = Math.min(step + 2, 12);
+	const base = `var(--rp-color-${color}-${step})`;
 	return createComponentColorRoles(base, {
-		hover: `var(--rp-color-${color}-${hoverShade})`,
-		contrast: `var(--rp-color-${color}-${shade}-contrast)`,
-		contrastHover: `var(--rp-color-${color}-${hoverShade}-contrast)`,
-		contrastActive: `var(--rp-color-${color}-${shade}-active-contrast)`,
+		hover: `var(--rp-color-${color}-${hoverStep})`,
+		active: `var(--rp-color-${color}-${activeStep})`,
+		contrast: getShadeContrastColor(color, step),
+		contrastHover: getShadeContrastColor(color, hoverStep),
+		contrastActive: getShadeContrastColor(color, activeStep),
 		foreground: base
 	});
 }
@@ -270,6 +273,7 @@ var customForegroundBackgroundMixes = [
 	.18,
 	.24
 ];
+var customForegroundMinimumContrast = 4.6;
 function getCustomForegroundColor(color) {
 	const parsed = parseCssColor(color);
 	if (!parsed || parsed.opacity < 100) return color;
@@ -296,7 +300,7 @@ function getCustomForegroundColor(color) {
 		if (customForegroundBackgroundMixes.every((backgroundWeight) => {
 			const lightBackground = mixOpaqueColors(parsed, backgroundWeight, white);
 			const darkBackground = mixOpaqueColors(parsed, backgroundWeight, darkBody);
-			return contrastRatio(lightForeground, lightBackground) >= 4.5 && contrastRatio(darkForeground, darkBackground) >= 4.5;
+			return contrastRatio(lightForeground, lightBackground) >= customForegroundMinimumContrast && contrastRatio(darkForeground, darkBackground) >= customForegroundMinimumContrast;
 		})) break;
 		colorPercent -= 1;
 	}

package/dist/components/alert/types.d.ts

@@ -2,7 +2,7 @@ import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const alertParts: readonly ["root", "icon", "title", "description", "body", "action", "close"];
 export type AlertPart = (typeof alertParts)[number];
-export declare const alertColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const alertColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const alertVariants: readonly ["subtle", "surface", "outline", "solid"];
 export declare const alertRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl"];
 export type AlertColor = ComponentColorValue;

package/dist/components/avatar/types.d.ts

@@ -2,7 +2,7 @@ import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const avatarParts: readonly ["root", "image", "fallback"];
 export type AvatarPart = (typeof avatarParts)[number];
-export declare const avatarColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const avatarColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const avatarSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const avatarRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export declare const avatarVariants: readonly ["solid", "subtle", "surface", "outline"];

package/dist/components/badge/types.d.ts

@@ -2,7 +2,7 @@ import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const badgeParts: readonly ["root", "left", "label", "right"];
 export type BadgePart = (typeof badgeParts)[number];
-export declare const badgeColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const badgeColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const badgeSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const badgeRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export declare const badgeVariants: readonly ["solid", "subtle", "surface", "outline"];

package/dist/components/pagination/types.d.ts

@@ -3,7 +3,7 @@ import { StylesApiProps } from '../../styles-api.js';
 import { ComputedRef, CSSProperties } from 'vue';
 export declare const paginationParts: readonly ["root", "items", "control", "page", "ellipsis"];
 export type PaginationPart = (typeof paginationParts)[number];
-export declare const paginationColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const paginationColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const paginationSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const paginationRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type PaginationColor = ComponentColorValue;

package/dist/components/progress/types.d.ts

@@ -2,7 +2,7 @@ import { ComponentColorValue } from '../../utils/componentColors.js';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const progressParts: readonly ["root", "label", "value", "track", "indicator"];
 export type ProgressPart = (typeof progressParts)[number];
-export declare const progressColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const progressColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const progressSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const progressRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export type ProgressColor = ComponentColorValue;

package/dist/components/segmented-control/types.d.ts

@@ -2,7 +2,7 @@ import { InputHTMLAttributes } from 'vue';
 import { StylesApiProps } from '../../styles-api.js';
 import { ComponentColorValue } from '../../utils/componentColors.js';
 export declare const segmentedControlParts: readonly ["root", "control", "input", "indicator", "label"];
-export declare const segmentedControlColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const segmentedControlColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const segmentedControlSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const segmentedControlRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];
 export declare const segmentedControlOrientations: readonly ["horizontal", "vertical"];

package/dist/components/slider/types.d.ts

@@ -6,7 +6,7 @@ export declare const sliderParts: readonly ["root", "label", "value", "track", "
 export declare const rangeSliderParts: readonly ["root", "label", "value", "track", "range", "input", "thumb", "mark", "markLabel", "tooltip"];
 export type SliderPart = (typeof sliderParts)[number];
 export type RangeSliderPart = (typeof rangeSliderParts)[number];
-export declare const sliderColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const sliderColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const sliderSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const sliderOrientations: readonly ["horizontal", "vertical"];
 export type SliderPresetColor = (typeof sliderColors)[number];

package/dist/components/toast/types.d.ts

@@ -6,7 +6,7 @@ export declare const toastParts: readonly ["root", "icon", "title", "description
 export declare const toastViewportParts: readonly ["root", "item", "toast", "toastIcon", "toastTitle", "toastDescription", "toastBody", "toastAction", "toastClose"];
 export type ToastPart = (typeof toastParts)[number];
 export type ToastViewportPart = (typeof toastViewportParts)[number];
-export declare const toastColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const toastColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const toastVariants: readonly ["subtle", "surface", "outline", "solid"];
 export declare const toastRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl"];
 export declare const toastPositions: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];

package/dist/date-picker.css

@@ -7,7 +7,7 @@
 }
 .rp-date-picker[data-v-4508ba14] .rp-input {
     width: 100%;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
 }
 .rp-date-picker__clear[data-v-4508ba14], .rp-date-picker__indicator[data-v-4508ba14] {
     padding: 0;

package/dist/dropdown-menu.css

@@ -18,17 +18,17 @@
     display: contents;
 }
 .rp-dropdown-menu__content {
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     background-color: var(--rp-color-default);
     border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
     border-radius: var(--_rp-dropdown-menu-radius);
     box-shadow: var(--rp-shadow-md);
     padding: var(--rp-spacing-1) 0;
     position: absolute;
-    z-index: 100;
-    min-width: 180px;
+    z-index: var(--rp-z-index-dropdown);
+    min-width: var(--rp-component-menu-min-width);
     max-width: min(24rem, 100vw - var(--rp-spacing-6));
-    max-height: 240px;
+    max-height: var(--rp-component-menu-max-height);
     overflow-y: auto;
     padding: var(--rp-spacing-1);
     color: var(--rp-color-text);
@@ -172,7 +172,7 @@
     color: var(--rp-color-dimmed);
 }
 .rp-dropdown-menu__submenu {
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     background-color: var(--rp-color-default);
     border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
     border-radius: var(--_rp-dropdown-menu-radius);
@@ -181,9 +181,9 @@
     position: absolute;
     top: calc(-1 * var(--rp-spacing-1));
     left: calc(100% + var(--rp-spacing-1));
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     max-width: min(24rem, 100vw - var(--rp-spacing-6));
-    max-height: 240px;
+    max-height: var(--rp-component-menu-max-height);
     overflow-y: auto;
     padding: var(--rp-spacing-1);
     color: var(--rp-color-text);

package/dist/field.css

@@ -7,7 +7,7 @@
     font-family: var(--rp-font-family);
     color: var(--rp-color-text);
 }
-html.dark .rp-field[data-v-babf7642], [data-rp-color-scheme=dark] .rp-field[data-v-babf7642] {
+[data-scheme=dark] .rp-field[data-v-babf7642] {
     --_rp-field-danger: var(--rp-color-red-light-color);
 }
 .rp-field__label[data-v-babf7642] {

package/dist/hover-card.css

@@ -11,7 +11,7 @@
     --_rp-hover-card-radius: var(--rp-radius-sm);
     --_rp-hover-card-arrow-size: 0.5rem;
     position: absolute;
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     box-sizing: border-box;
     width: max-content;
     max-width: min(22rem, 100vw - var(--rp-spacing-6));

package/dist/modal.css

@@ -5,7 +5,7 @@
     --_rp-modal-radius: var(--rp-radius-sm);
     position: fixed;
     inset: 0;
-    z-index: 1000;
+    z-index: var(--rp-z-index-tooltip);
     box-sizing: border-box;
     display: grid;
     place-items: center;

package/dist/multi-select.css

@@ -17,7 +17,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     min-height: var(--_rp-multi-select-height);
     padding: var(--rp-spacing-1) var(--_rp-multi-select-padding-x);
     gap: var(--rp-spacing-2);
@@ -99,7 +99,7 @@
 .rp-multi-select--radius-xl[data-v-b38d027f] {
     --_rp-multi-select-radius: var(--rp-radius-xl);
 }
-html.dark .rp-multi-select[data-v-b38d027f], [data-rp-color-scheme=dark] .rp-multi-select[data-v-b38d027f] {
+[data-scheme=dark] .rp-multi-select[data-v-b38d027f] {
     --_rp-multi-select-invalid-border: var(--rp-color-red-light-color);
     --_rp-multi-select-invalid-ring: color-mix(
         in srgb,
@@ -252,13 +252,13 @@ html.dark .rp-multi-select[data-v-b38d027f], [data-rp-color-scheme=dark] .rp-mul
 .rp-multi-select__dropdown[data-v-b38d027f] {
     position: absolute;
     width: calc(100% + var(--rp-border-width-thin) * 2);
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     background-color: var(--rp-color-default);
     border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
     border-radius: var(--_rp-multi-select-radius);
     box-shadow: var(--rp-shadow-md);
     padding: var(--rp-spacing-1) 0;
-    max-height: 240px;
+    max-height: var(--rp-component-menu-max-height);
     padding: var(--rp-spacing-1);
 }
 .rp-multi-select__dropdown[data-v-b38d027f] .rp-scroll-area__viewport {
@@ -286,7 +286,7 @@ html.dark .rp-multi-select[data-v-b38d027f], [data-rp-color-scheme=dark] .rp-mul
     background-color: var(--_rp-multi-select-option-highlighted-bg);
 }
 .rp-multi-select__option--selected[data-v-b38d027f] {
-    color: var(--rp-primary-color-light-color);
+    color: var(--rp-color-primary-light-color);
 }
 .rp-multi-select__option--disabled[data-v-b38d027f] {
     color: var(--rp-color-disabled-color);

package/dist/pagination.css

@@ -5,7 +5,7 @@
     --_rp-pagination-radius: var(--rp-radius-sm);
     --_rp-pagination-gap: var(--rp-spacing-1);
     --_rp-pagination-active-bg: var(--rp-color-control-selected-bg);
-    --_rp-pagination-active-bg-hover: var(--rp-primary-color-filled-hover);
+    --_rp-pagination-active-bg-hover: var(--rp-color-primary-filled-hover);
     --_rp-pagination-active-fg: var(--rp-color-control-selected-fg);
     --_rp-pagination-active-fg-hover: var(--_rp-pagination-active-fg);
     display: inline-flex;

package/dist/popover.css

@@ -11,9 +11,9 @@
     --_rp-popover-radius: var(--rp-radius-sm);
     --_rp-popover-arrow-size: 0.5rem;
     position: absolute;
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     box-sizing: border-box;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     max-width: min(24rem, 100vw - var(--rp-spacing-6));
     padding: var(--rp-spacing-4);
     color: var(--rp-color-text);

package/dist/select.css

@@ -61,7 +61,7 @@
     --_rp-select-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
     --_rp-select-option-padding-y: var(--rp-spacing-2);
 }
-html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[data-v-097d7f90] {
+[data-scheme=dark] .rp-select[data-v-097d7f90] {
     --_rp-select-invalid-border: var(--rp-color-red-light-color);
     --_rp-select-invalid-ring: color-mix(
         in srgb,
@@ -80,7 +80,7 @@ html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[da
     justify-content: center;
     justify-content: space-between;
     width: 100%;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     height: var(--_rp-select-height);
     padding: 0 var(--_rp-select-padding-x);
     font-size: var(--_rp-select-font-size);
@@ -203,13 +203,13 @@ html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[da
 .rp-select__dropdown[data-v-097d7f90] {
     position: absolute;
     width: 100%;
-    z-index: 100;
+    z-index: var(--rp-z-index-dropdown);
     background-color: var(--rp-color-default);
     border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
     border-radius: var(--_rp-select-radius);
     box-shadow: var(--rp-shadow-md);
     padding: var(--rp-spacing-1) 0;
-    max-height: 240px;
+    max-height: var(--rp-component-menu-max-height);
     padding: var(--rp-spacing-1);
 }
 .rp-select__dropdown[data-v-097d7f90] .rp-scroll-area__viewport {
@@ -230,7 +230,7 @@ html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[da
     background-color: var(--_rp-select-option-focused-bg);
 }
 .rp-select__option--selected[data-v-097d7f90] {
-    color: var(--rp-primary-color-light-color);
+    color: var(--rp-color-primary-light-color);
 }
 .rp-select__option--disabled[data-v-097d7f90] {
     color: var(--rp-color-disabled-color);

package/dist/slider.css

@@ -65,7 +65,7 @@
     font-size: var(--_rp-slider-font-size);
     line-height: var(--rp-line-height-md);
 }
-html.dark .rp-slider[data-v-0fbfb274], [data-rp-color-scheme=dark] .rp-slider[data-v-0fbfb274] {
+[data-scheme=dark] .rp-slider[data-v-0fbfb274] {
     --_rp-slider-thumb-bg: var(--_rp-slider-color);
     --_rp-slider-thumb-border: var(--rp-color-control-thumb-bg);
 }
@@ -493,7 +493,7 @@ html.dark .rp-slider[data-v-0fbfb274], [data-rp-color-scheme=dark] .rp-slider[da
     --_rp-tooltip-bg: var(--rp-color-bright);
     --_rp-tooltip-fg: var(--rp-color-default);
     position: absolute;
-    z-index: 1000;
+    z-index: var(--rp-z-index-tooltip);
     box-sizing: border-box;
     width: max-content;
     max-width: min(18rem, 100vw - var(--rp-spacing-6));
@@ -772,7 +772,7 @@ html.dark .rp-slider[data-v-0fbfb274], [data-rp-color-scheme=dark] .rp-slider[da
     font-size: var(--_rp-range-slider-font-size);
     line-height: var(--rp-line-height-md);
 }
-html.dark .rp-range-slider[data-v-e27ae1af], [data-rp-color-scheme=dark] .rp-range-slider[data-v-e27ae1af] {
+[data-scheme=dark] .rp-range-slider[data-v-e27ae1af] {
     --_rp-range-slider-thumb-bg: var(--_rp-range-slider-color);
     --_rp-range-slider-thumb-border: var(--rp-color-control-thumb-bg);
 }

package/dist/tabs.css

@@ -213,7 +213,7 @@
 }
 .rp-tabs-trigger--active[data-v-20d5c2eb] {
     --_rp-tabs-trigger-fg: var(--rp-color-text);
-    --_rp-tabs-trigger-indicator: var(--rp-primary-color-filled);
+    --_rp-tabs-trigger-indicator: var(--rp-color-primary-filled);
 }
 .rp-tabs-trigger--pills[data-v-20d5c2eb]::after, .rp-tabs-trigger--outline[data-v-20d5c2eb]::after {
     display: none;
@@ -224,8 +224,8 @@
 }
 .rp-tabs-trigger--pills.rp-tabs-trigger--active[data-v-20d5c2eb] {
     --_rp-tabs-trigger-fg: var(--rp-color-white);
-    --_rp-tabs-trigger-bg: var(--rp-primary-color-filled);
-    --_rp-tabs-trigger-bg-hover: var(--rp-primary-color-filled-hover);
+    --_rp-tabs-trigger-bg: var(--rp-color-primary-filled);
+    --_rp-tabs-trigger-bg-hover: var(--rp-color-primary-filled-hover);
 }
 .rp-tabs-trigger--outline[data-v-20d5c2eb] {
     --_rp-tabs-trigger-bg-hover: var(--rp-color-default-hover);

package/dist/tags-input.css

@@ -10,7 +10,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     min-height: var(--_rp-tags-input-height);
     padding: var(--rp-spacing-1) var(--_rp-tags-input-padding-x);
     gap: var(--rp-spacing-2);

package/dist/textarea.css

@@ -68,7 +68,7 @@
 .rp-textarea--radius-xl[data-v-da9cf2c9] {
     --_rp-textarea-radius: var(--rp-radius-xl);
 }
-html.dark .rp-textarea[data-v-da9cf2c9], [data-rp-color-scheme=dark] .rp-textarea[data-v-da9cf2c9] {
+[data-scheme=dark] .rp-textarea[data-v-da9cf2c9] {
     --_rp-textarea-valid-border: var(--rp-color-green-light-color);
     --_rp-textarea-valid-ring: color-mix(
         in srgb,

package/dist/toast.css

@@ -136,7 +136,7 @@
     --_rp-toast-viewport-shift-x: 0;
     --_rp-toast-viewport-shift-y: calc(var(--rp-spacing-3) * -1);
     position: fixed;
-    z-index: 1001;
+    z-index: var(--rp-z-index-tooltip)1;
     display: flex;
     box-sizing: border-box;
     width: min(24rem, 100vw);

package/dist/tooltip.css

@@ -12,7 +12,7 @@
     --_rp-tooltip-bg: var(--rp-color-bright);
     --_rp-tooltip-fg: var(--rp-color-default);
     position: absolute;
-    z-index: 1000;
+    z-index: var(--rp-z-index-tooltip);
     box-sizing: border-box;
     width: max-content;
     max-width: min(18rem, 100vw - var(--rp-spacing-6));

package/dist/utils/componentColors.d.ts

@@ -1,5 +1,5 @@
-export declare const componentColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
-export declare const componentColorShades: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+export declare const componentColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const componentColorShades: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 export type ComponentColor = (typeof componentColors)[number];
 export type ComponentColorShade = (typeof componentColorShades)[number];
 export type ComponentColorShadeValue = `${ComponentColor}.${ComponentColorShade}`;
@@ -57,8 +57,6 @@ export type ParsedComponentColor = {
 } | {
     kind: 'preset';
     color: ComponentColor;
-} | {
-    kind: 'primary';
 } | {
     kind: 'shade';
     color: ComponentColor;