ropav 0.0.8 → 0.0.10

package/dist/tooltip.css

@@ -1,9 +1,9 @@
 .rp-tooltip[data-v-13c39164] {
   --_rp-tooltip-main-axis-offset: var(--rp-spacing-2);
   --_rp-tooltip-cross-axis-offset: 0px;
-  --_rp-tooltip-arrow-size: 0.5rem;
-  --_rp-tooltip-bg: var(--_rp-tooltip-custom-bg, var(--rp-color-surface-inverted));
-  --_rp-tooltip-fg: var(--_rp-tooltip-custom-fg, var(--rp-color-text-inverted));
+  --_rp-tooltip-arrow-size: 0.4375rem;
+  --_rp-tooltip-bg: var(--rp-color-bright);
+  --_rp-tooltip-fg: var(--rp-color-default);
   position: relative;
   display: inline-flex;
   font-family: var(--rp-font-family);
@@ -14,12 +14,12 @@
   z-index: 1000;
   box-sizing: border-box;
   width: max-content;
-  max-width: min(20rem, 100vw - var(--rp-spacing-6));
-  padding: var(--rp-spacing-2) var(--rp-spacing-3);
+  max-width: min(18rem, 100vw - var(--rp-spacing-6));
+  padding: 0.375rem 0.625rem;
   color: var(--_rp-tooltip-fg);
-  font-size: var(--rp-font-size-sm);
+  font-size: 0.8125rem;
   font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
   text-align: center;
   white-space: normal;
   overflow-wrap: anywhere;
@@ -36,34 +36,6 @@
   background-color: inherit;
   rotate: 45deg;
 }
-.rp-tooltip--color-primary[data-v-13c39164] {
-  --_rp-tooltip-bg: var(--rp-color-primary);
-  --_rp-tooltip-fg: var(--rp-color-on-primary);
-}
-.rp-tooltip--color-secondary[data-v-13c39164] {
-  --_rp-tooltip-bg: var(--rp-color-secondary);
-  --_rp-tooltip-fg: var(--rp-color-on-secondary);
-}
-.rp-tooltip--color-success[data-v-13c39164] {
-  --_rp-tooltip-bg: var(--rp-color-success);
-  --_rp-tooltip-fg: var(--rp-color-on-success);
-}
-.rp-tooltip--color-warning[data-v-13c39164] {
-  --_rp-tooltip-bg: var(--rp-color-warning);
-  --_rp-tooltip-fg: var(--rp-color-on-warning);
-}
-.rp-tooltip--color-danger[data-v-13c39164] {
-  --_rp-tooltip-bg: var(--rp-color-danger);
-  --_rp-tooltip-fg: var(--rp-color-on-danger);
-}
-.rp-tooltip--color-info[data-v-13c39164] {
-  --_rp-tooltip-bg: var(--rp-color-info);
-  --_rp-tooltip-fg: var(--rp-color-on-info);
-}
-.rp-tooltip--color-neutral[data-v-13c39164] {
-  --_rp-tooltip-bg: var(--rp-color-neutral);
-  --_rp-tooltip-fg: var(--rp-color-on-neutral);
-}
 .rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164] {
   bottom: calc(100% + var(--_rp-tooltip-main-axis-offset));
   left: calc(50% + var(--_rp-tooltip-cross-axis-offset));

package/dist/tooltip.js

@@ -1,7 +1,8 @@
 import './tooltip.css';
 import { t as bem } from "./bem.js";
+import { i as getComponentVariantColorRoles } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
+import { t as createRafScheduler } from "./rafScheduler.js";
 import { VaporTransition, applyVShow, computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, isRef, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
 //#region src/composables/useDelayedOpen.ts
 function readOption(value, fallback) {
@@ -77,7 +78,7 @@ function getTargetPosition(rect, placement) {
 		};
 	}
 }
-function resolveOffsetStyle(offset) {
+function resolveTooltipOffsetStyle(offset) {
 	if (offset == null) return void 0;
 	if (typeof offset === "number") return { "--_rp-tooltip-main-axis-offset": `${offset}px` };
 	const style = {};
@@ -85,12 +86,17 @@ function resolveOffsetStyle(offset) {
 	if (offset.crossAxis != null) style["--_rp-tooltip-cross-axis-offset"] = `${offset.crossAxis}px`;
 	return Object.keys(style).length > 0 ? style : void 0;
 }
-function resolveTooltipColorStyle(color) {
-	const customColor = getComponentCustomColor(color);
-	if (!customColor) return void 0;
+function resolveTooltipColorStyleWithContrast(color, autoContrast) {
+	if (!color) return void 0;
+	const roles = getComponentVariantColorRoles({
+		color,
+		variant: "solid",
+		autoContrast
+	});
+	if (!roles) return void 0;
 	return {
-		"--_rp-tooltip-bg": customColor,
-		"--_rp-tooltip-fg": "var(--rp-color-on-primary)"
+		"--_rp-tooltip-bg": roles.background,
+		"--_rp-tooltip-fg": roles.color
 	};
 }
 function useTooltip(props, emitOpenChange) {
@@ -98,6 +104,7 @@ function useTooltip(props, emitOpenChange) {
 	const generatedId = useId();
 	const targetElement = ref(null);
 	const targetPosition = ref(null);
+	const positionScheduler = createRafScheduler(updateTargetPosition, () => targetElement.value?.ownerDocument.defaultView);
 	let isMounted = false;
 	let removeTargetListeners;
 	let removePositionListeners;
@@ -120,7 +127,6 @@ function useTooltip(props, emitOpenChange) {
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
 	const rootClass = computed(() => bem("rp-tooltip", {
 		[`placement-${placement.value}`]: true,
-		[`color-${props.color}`]: isComponentPresetColor(props.color),
 		arrow: props.arrow,
 		target: isTargetMode.value,
 		open: isVisible.value,
@@ -131,8 +137,8 @@ function useTooltip(props, emitOpenChange) {
 	const contentAriaHidden = computed(() => isDecorative.value ? "true" : void 0);
 	const contentStyle = computed(() => {
 		const style = {
-			...resolveOffsetStyle(props.offset),
-			...resolveTooltipColorStyle(props.color)
+			...resolveTooltipOffsetStyle(props.offset),
+			...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast)
 		};
 		if (!isTargetMode.value || !targetPosition.value) return Object.keys(style).length > 0 ? style : void 0;
 		return {
@@ -191,7 +197,6 @@ function useTooltip(props, emitOpenChange) {
 		targetPosition.value = getTargetPosition(targetElement.value.getBoundingClientRect(), placement.value);
 	}
 	function onTargetOpen() {
-		updateTargetPosition();
 		openTooltip();
 	}
 	function bindTargetListeners(element) {
@@ -213,17 +218,20 @@ function useTooltip(props, emitOpenChange) {
 	function removeViewportListeners() {
 		removePositionListeners?.();
 		removePositionListeners = void 0;
+		positionScheduler.cancel();
 	}
 	function bindViewportListeners() {
-		if (typeof window === "undefined" || removePositionListeners) return;
-		window.addEventListener("resize", updateTargetPosition);
-		window.addEventListener("scroll", updateTargetPosition, true);
+		const view = targetElement.value?.ownerDocument.defaultView;
+		if (!view || removePositionListeners) return;
+		view.addEventListener("resize", positionScheduler.schedule);
+		view.addEventListener("scroll", positionScheduler.schedule, true);
 		removePositionListeners = () => {
-			window.removeEventListener("resize", updateTargetPosition);
-			window.removeEventListener("scroll", updateTargetPosition, true);
+			view.removeEventListener("resize", positionScheduler.schedule);
+			view.removeEventListener("scroll", positionScheduler.schedule, true);
 		};
 	}
 	function syncTarget() {
+		positionScheduler.cancel();
 		if (!isTargetMode.value) {
 			removeTargetListeners?.();
 			removeViewportListeners();
@@ -236,6 +244,7 @@ function useTooltip(props, emitOpenChange) {
 		if (targetElement.value === nextTarget) {
 			syncTargetDescription();
 			updateTargetPosition();
+			if (isVisible.value) bindViewportListeners();
 			return;
 		}
 		removeTargetListeners?.();
@@ -249,6 +258,7 @@ function useTooltip(props, emitOpenChange) {
 		bindTargetListeners(nextTarget);
 		syncTargetDescription();
 		updateTargetPosition();
+		if (isVisible.value) bindViewportListeners();
 	}
 	watch(isDisabled, (disabled) => {
 		if (disabled) closeTooltip();
@@ -263,12 +273,13 @@ function useTooltip(props, emitOpenChange) {
 	], () => {
 		if (isMounted) syncTargetDescription();
 	});
-	watch([placement, isVisible], () => {
+	watch(placement, () => {
 		if (isMounted && isVisible.value) updateTargetPosition();
 	});
 	watch(isVisible, (visible) => {
 		if (!isMounted || !isTargetMode.value) return;
 		if (visible) {
+			positionScheduler.cancel();
 			updateTargetPosition();
 			bindViewportListeners();
 		} else removeViewportListeners();
@@ -316,6 +327,7 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		target: {},
 		placement: { default: "top" },
 		color: {},
+		autoContrast: { type: Boolean },
 		offset: {},
 		open: {
 			type: Boolean,
@@ -380,4 +392,4 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	}
 }), [["__scopeId", "data-v-13c39164"]]);
 //#endregion
-export { useDelayedOpen as n, tooltip_default as t };
+export { useDelayedOpen as i, resolveTooltipColorStyleWithContrast as n, resolveTooltipOffsetStyle as r, tooltip_default as t };

package/dist/useButtonColor.js

@@ -1,4 +1,4 @@
-import { n as getComponentCustomColor } from "./componentColors.js";
+import { i as getComponentVariantColorRoles } from "./componentColors.js";
 import { defineVaporComponent, markRaw, template } from "vue";
 //#region ~icons/lucide/loader-circle
 var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M21 12a9 9 0 1 1-6.219-8.56\">", 3, 1);
@@ -11,20 +11,22 @@ var loader_circle_default = markRaw(defineVaporComponent({
 }));
 //#endregion
 //#region src/components/button/useButtonColor.ts
-function getButtonColorStyle(color) {
-	const customColor = getComponentCustomColor(color);
-	if (!customColor) return void 0;
+function getButtonColorStyle(color, variant, autoContrast) {
+	if (!color && !variant) return void 0;
+	const roles = getComponentVariantColorRoles({
+		color,
+		variant,
+		autoContrast
+	});
+	if (!roles) return void 0;
 	return {
-		"--_rp-button-custom-color": customColor,
-		"--_rp-button-custom-hover": `color-mix(in srgb, ${customColor} 90%, #111111)`,
-		"--_rp-button-custom-active": `color-mix(in srgb, ${customColor} 80%, #111111)`,
-		"--_rp-button-custom-on": "var(--rp-color-on-primary)",
-		"--_rp-button-custom-subtle-bg": `color-mix(in srgb, ${customColor} 12%, transparent)`,
-		"--_rp-button-custom-subtle-bg-hover": `color-mix(in srgb, ${customColor} 18%, transparent)`,
-		"--_rp-button-custom-subtle-bg-active": `color-mix(in srgb, ${customColor} 24%, transparent)`,
-		"--_rp-button-custom-border": `color-mix(in srgb, ${customColor} 45%, transparent)`,
-		"--_rp-button-custom-border-hover": `color-mix(in srgb, ${customColor} 62%, transparent)`,
-		"--_rp-button-custom-fg": customColor
+		"--_rp-button-bg": roles.background,
+		"--_rp-button-bg-hover": roles.hover,
+		"--_rp-button-bg-active": roles.active,
+		"--_rp-button-border": roles.border,
+		"--_rp-button-border-hover": roles.borderHover,
+		"--_rp-button-border-active": roles.borderActive,
+		"--_rp-button-fg": roles.color
 	};
 }
 //#endregion

package/dist/utils/componentColors.d.ts

@@ -0,0 +1,60 @@
+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 type ComponentColor = (typeof componentColors)[number];
+export type ComponentColorShade = (typeof componentColorShades)[number];
+export type ComponentColorShadeValue = `${ComponentColor}.${ComponentColorShade}`;
+export type ComponentColorValue = ComponentColor | ComponentColorShadeValue | (string & {});
+export type ComponentColorVariant = 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain';
+export interface ComponentColorRoles {
+    filled: string;
+    hover: string;
+    active: string;
+    contrast: string;
+    light: string;
+    lightHover: string;
+    lightActive: string;
+    outline: string;
+    outlineHover: string;
+    foreground: string;
+}
+export interface ComponentVariantColorRoles {
+    background: string;
+    hover: string;
+    active: string;
+    color: string;
+    border: string;
+    borderHover: string;
+    borderActive: string;
+}
+export interface ComponentContrastColorOptions {
+    autoContrast?: boolean;
+}
+export interface ComponentVariantColorOptions extends ComponentContrastColorOptions {
+    color: ComponentColorValue | undefined;
+    variant: ComponentColorVariant | undefined;
+    defaultColor?: ComponentColorValue;
+}
+export type ParsedComponentColor = {
+    kind: 'empty';
+} | {
+    kind: 'preset';
+    color: ComponentColor;
+} | {
+    kind: 'primary';
+} | {
+    kind: 'shade';
+    color: ComponentColor;
+    shade: ComponentColorShade;
+} | {
+    kind: 'custom';
+    value: string;
+} | {
+    kind: 'invalid';
+    value: string;
+};
+export declare function isComponentPresetColor(color: ComponentColorValue | undefined): color is ComponentColor;
+export declare function parseComponentColor(color: ComponentColorValue | undefined): ParsedComponentColor;
+export declare function getComponentColorValue(color: ComponentColorValue | undefined): string | undefined;
+export declare function getComponentContrastColor(color: ComponentColorValue | undefined, options?: ComponentContrastColorOptions): string;
+export declare function getComponentColorRoles(color: ComponentColorValue | undefined): ComponentColorRoles | undefined;
+export declare function getComponentVariantColorRoles({ color, variant, defaultColor, autoContrast, }: ComponentVariantColorOptions): ComponentVariantColorRoles | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "packageManager": "pnpm@11.10.0",
   "engines": {
@@ -21,10 +21,22 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./alert": {
+      "types": "./dist/components/alert/index.d.ts",
+      "import": "./dist/components/alert/index.js"
+    },
     "./accordion": {
       "types": "./dist/components/accordion/index.d.ts",
       "import": "./dist/components/accordion/index.js"
     },
+    "./aspect-ratio": {
+      "types": "./dist/components/aspect-ratio/index.d.ts",
+      "import": "./dist/components/aspect-ratio/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/avatar/index.d.ts",
+      "import": "./dist/components/avatar/index.js"
+    },
     "./badge": {
       "types": "./dist/components/badge/index.d.ts",
       "import": "./dist/components/badge/index.js"
@@ -33,6 +45,10 @@
       "types": "./dist/components/button/index.d.ts",
       "import": "./dist/components/button/index.js"
     },
+    "./button-link": {
+      "types": "./dist/components/button-link/index.d.ts",
+      "import": "./dist/components/button-link/index.js"
+    },
     "./button-group": {
       "types": "./dist/components/button-group/index.d.ts",
       "import": "./dist/components/button-group/index.js"
@@ -49,6 +65,18 @@
       "types": "./dist/components/collapse/index.d.ts",
       "import": "./dist/components/collapse/index.js"
     },
+    "./color-input": {
+      "types": "./dist/components/color-input/index.d.ts",
+      "import": "./dist/components/color-input/index.js"
+    },
+    "./color-picker": {
+      "types": "./dist/components/color-picker/index.d.ts",
+      "import": "./dist/components/color-picker/index.js"
+    },
+    "./color-swatch": {
+      "types": "./dist/components/color-swatch/index.d.ts",
+      "import": "./dist/components/color-swatch/index.js"
+    },
     "./dropdown-menu": {
       "types": "./dist/components/dropdown-menu/index.d.ts",
       "import": "./dist/components/dropdown-menu/index.js"
@@ -69,6 +97,10 @@
       "types": "./dist/components/modal/index.d.ts",
       "import": "./dist/components/modal/index.js"
     },
+    "./number-input": {
+      "types": "./dist/components/number-input/index.d.ts",
+      "import": "./dist/components/number-input/index.js"
+    },
     "./overlay": {
       "types": "./dist/components/overlay/index.d.ts",
       "import": "./dist/components/overlay/index.js"
@@ -105,6 +137,10 @@
       "types": "./dist/components/textarea/index.d.ts",
       "import": "./dist/components/textarea/index.js"
     },
+    "./toast": {
+      "types": "./dist/components/toast/index.d.ts",
+      "import": "./dist/components/toast/index.js"
+    },
     "./tooltip": {
       "types": "./dist/components/tooltip/index.d.ts",
       "import": "./dist/components/tooltip/index.js"
@@ -123,13 +159,17 @@
     "format": "oxfmt",
     "format:check": "oxfmt --check",
     "test": "vitest run --project=unit",
-    "test:exports": "node scripts/check-exports.mjs",
+    "test:consumer-types": "pnpm run test:package",
+    "test:consumer-types:built": "tsc -p tests/fixtures/consumer-types/tsconfig.bundler.json && tsc -p tests/fixtures/consumer-types/tsconfig.nodenext.json",
+    "test:exports": "pnpm run test:package",
+    "test:exports:built": "node scripts/check-exports.mjs",
+    "test:package": "pnpm run build && pnpm run test:exports:built && pnpm run test:consumer-types:built",
     "test:watch": "vitest --project=unit",
     "test:typecheck": "vitest run --project=unit --typecheck",
     "test:storybook": "vitest run --project=storybook",
     "test:all": "pnpm run tokens:check && pnpm test && pnpm test:storybook",
     "build": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
-    "prepublishOnly": "pnpm run build && pnpm run tokens:check",
+    "prepublishOnly": "pnpm run test:package",
     "preview": "vite preview",
     "storybook": "pnpm run tokens:build && storybook dev -p 6006 --no-open",
     "build-storybook": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck:storybook && storybook build",
@@ -142,31 +182,31 @@
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.116",
-    "@storybook/addon-themes": "^10.4.6",
-    "@storybook/addon-vitest": "^10.4.6",
-    "@storybook/vue3-vite": "^10.4.6",
-    "@types/node": "^25.9.4",
+    "@storybook/addon-themes": "^10.5.0",
+    "@storybook/addon-vitest": "^10.5.0",
+    "@storybook/vue3-vite": "^10.5.0",
+    "@types/node": "^26.1.1",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/browser-playwright": "^4.1.10",
     "@vue/compiler-vapor": "3.6.0-beta.17",
     "@vue/tsconfig": "^0.9.1",
     "bumpp": "^11.1.0",
-    "conventional-changelog": "^7.2.1",
-    "conventional-changelog-conventionalcommits": "^9.3.1",
+    "conventional-changelog": "^8.1.0",
+    "conventional-changelog-conventionalcommits": "^10.2.1",
     "jsdom": "^29.1.1",
-    "oxfmt": "^0.57.0",
-    "oxlint": "^1.72.0",
+    "oxfmt": "^0.58.0",
+    "oxlint": "^1.73.0",
     "playwright": "^1.61.1",
     "sass-embedded": "^1.100.0",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.0",
     "style-dictionary": "5.5.0",
     "typescript": "~6.0.3",
     "unplugin-icons": "^23.0.1",
-    "vite": "^8.1.3",
+    "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
-    "vue": "beta",
-    "vue-tsc": "^3.3.6"
+    "vue": "3.6.0-beta.17",
+    "vue-tsc": "^3.3.7"
   },
   "repository": {
     "type": "git",

package/src/styles/_mixins.scss

@@ -1,5 +1,9 @@
 @use 'variables' as *;
 
+$rp-component-colors:
+    'dark', 'gray', 'red', 'pink', 'grape', 'violet', 'indigo', 'blue', 'cyan', 'teal', 'green',
+    'lime', 'yellow', 'orange';
+
 @mixin flex-center {
     display: inline-flex;
     align-items: center;
@@ -7,7 +11,7 @@
 }
 
 @mixin focus-ring {
-    border-color: var(--rp-color-primary);
+    border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 
@@ -55,36 +59,50 @@
 }
 
 @mixin control-size-vars($prefix) {
+    &--xs {
+        #{$prefix}-height: var(--rp-size-control-xs);
+        #{$prefix}-font: var(--rp-font-size-xs);
+        #{$prefix}-px: calc(var(--rp-size-control-xs) / 3);
+        #{$prefix}-radius: var(--rp-radius-sm);
+    }
+
     &--sm {
         #{$prefix}-height: var(--rp-size-control-sm);
         #{$prefix}-font: var(--rp-font-size-sm);
-        #{$prefix}-px: var(--rp-spacing-3);
+        #{$prefix}-px: calc(var(--rp-size-control-sm) / 3);
         #{$prefix}-radius: var(--rp-radius-md);
     }
 
     &--md {
         #{$prefix}-height: var(--rp-size-control-md);
-        #{$prefix}-font: var(--rp-font-size-base);
-        #{$prefix}-px: var(--rp-spacing-4);
+        #{$prefix}-font: var(--rp-font-size-md);
+        #{$prefix}-px: calc(var(--rp-size-control-md) / 3);
         #{$prefix}-radius: var(--rp-radius-lg);
     }
 
     &--lg {
         #{$prefix}-height: var(--rp-size-control-lg);
         #{$prefix}-font: var(--rp-font-size-lg);
-        #{$prefix}-px: var(--rp-spacing-6);
+        #{$prefix}-px: calc(var(--rp-size-control-lg) / 3);
+        #{$prefix}-radius: var(--rp-radius-lg);
+    }
+
+    &--xl {
+        #{$prefix}-height: var(--rp-size-control-xl);
+        #{$prefix}-font: var(--rp-font-size-xl);
+        #{$prefix}-px: calc(var(--rp-size-control-xl) / 3);
         #{$prefix}-radius: var(--rp-radius-lg);
     }
 }
 
 @mixin menu-surface(
     $z-index: $z-index-dropdown,
-    $surface: var(--rp-color-surface-raised),
+    $surface: var(--rp-color-default),
     $radius: var(--rp-radius-lg)
 ) {
     z-index: $z-index;
     background-color: $surface;
-    border: var(--rp-border-width-thin) solid var(--rp-color-border);
+    border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
     border-radius: $radius;
     box-shadow: var(--rp-shadow-md);
     padding: var(--rp-spacing-1) 0;
@@ -119,37 +137,3 @@
         }
     }
 }
-
-@mixin semantic-colors($var-name) {
-    @each $name in primary, secondary, success, warning, danger, info, neutral {
-        &--#{$name} {
-            #{$var-name}: var(--rp-color-#{$name}-fg);
-        }
-    }
-}
-
-@mixin semantic-color-pair($color-var, $foreground-var) {
-    @each $name in primary, secondary, success, warning, danger, info, neutral {
-        &--#{$name} {
-            #{$color-var}: var(--rp-color-#{$name});
-            #{$foreground-var}: var(--rp-color-on-#{$name});
-        }
-    }
-}
-
-@mixin semantic-state-colors($prefix) {
-    @each $name in primary, secondary, success, warning, danger, info, neutral {
-        &--#{$name} {
-            #{$prefix}-bg: var(--rp-color-#{$name});
-            #{$prefix}-bg-hover: var(--rp-color-#{$name}-hover);
-            #{$prefix}-bg-active: var(--rp-color-#{$name}-active);
-            #{$prefix}-subtle-bg: var(--rp-color-#{$name}-subtle-bg);
-            #{$prefix}-subtle-bg-hover: var(--rp-color-#{$name}-subtle-bg-hover);
-            #{$prefix}-subtle-bg-active: var(--rp-color-#{$name}-subtle-bg-active);
-            #{$prefix}-border: var(--rp-color-#{$name}-border);
-            #{$prefix}-border-hover: var(--rp-color-#{$name}-border-hover);
-            #{$prefix}-fg: var(--rp-color-#{$name}-fg);
-            #{$prefix}-on-bg: var(--rp-color-on-#{$name});
-        }
-    }
-}