ropav 0.0.8 → 0.0.9

package/dist/button.js

@@ -1,14 +1,13 @@
 import './button.css';
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { r as isComponentPresetColor } from "./componentColors.js";
 import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
 import { child, computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-4a751fe6 class=rp-button__loading aria-hidden=true>");
-var t1 = template("<span data-v-4a751fe6 class=rp-button__left>");
-var t2 = template("<span data-v-4a751fe6 class=rp-button__right>");
-var t3 = template("<button data-v-4a751fe6><span data-v-4a751fe6 class=rp-button__content><span data-v-4a751fe6 class=rp-button__label></span>", 1);
+var t0 = template("<span data-v-3d7e4305 class=rp-button__loading aria-hidden=true>");
+var t1 = template("<span data-v-3d7e4305 class=rp-button__left>");
+var t2 = template("<span data-v-3d7e4305 class=rp-button__right>");
+var t3 = template("<button data-v-3d7e4305><span data-v-3d7e4305 class=rp-button__content><span data-v-3d7e4305 class=rp-button__label></span>", 1);
 //#endregion
 //#region src/components/button/button.vue
 var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -17,6 +16,7 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	props: {
 		variant: {},
 		color: {},
+		autoContrast: { type: Boolean },
 		size: {},
 		radius: {},
 		type: { default: "button" },
@@ -33,12 +33,11 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const props = __props;
 		const rootClass = computed(() => bem("rp-button", {
 			[props.variant ?? ""]: Boolean(props.variant),
-			[`color-${props.color}`]: isComponentPresetColor(props.color),
 			[`size-${props.size}`]: Boolean(props.size),
 			[`radius-${props.radius}`]: Boolean(props.radius),
 			loading: props.loading
 		}));
-		const rootStyle = computed(() => getButtonColorStyle(props.color));
+		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast));
 		const n17 = t3();
 		const n16 = child(n17, 1);
 		const n11 = child(n16, 1);
@@ -59,7 +58,6 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, 1);
 			return n5;
 		});
-		renderEffect(() => setAttr(n16, "aria-hidden", __props.loading || void 0));
 		setInsertionState(n16, 0, 0);
 		createIf(() => $slots.left, () => {
 			const n9 = t1();
@@ -78,6 +76,6 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n17;
 	}
-}), [["__scopeId", "data-v-4a751fe6"]]);
+}), [["__scopeId", "data-v-3d7e4305"]]);
 //#endregion
 export { button_default as t };

package/dist/card.css

@@ -1,9 +1,9 @@
 .rp-card[data-v-269e2bc4] {
-  --_rp-card-bg: var(--rp-color-surface-raised);
-  --_rp-card-border: var(--rp-color-border);
+  --_rp-card-bg: var(--rp-color-default);
+  --_rp-card-border: var(--rp-color-default-border);
   --_rp-card-fg: var(--rp-color-text);
-  --_rp-card-header-border: var(--rp-color-border);
-  --_rp-card-footer-border: var(--rp-color-border);
+  --_rp-card-header-border: var(--rp-color-default-border);
+  --_rp-card-footer-border: var(--rp-color-default-border);
   --_rp-card-padding: var(--rp-spacing-5);
   --_rp-card-radius: var(--rp-radius-sm);
   box-sizing: border-box;
@@ -19,13 +19,13 @@
   transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
 .rp-card--layer-base[data-v-269e2bc4] {
-  --_rp-card-bg: var(--rp-color-background);
+  --_rp-card-bg: var(--rp-color-body);
 }
 .rp-card--layer-surface[data-v-269e2bc4] {
-  --_rp-card-bg: var(--rp-color-surface);
+  --_rp-card-bg: var(--rp-color-default);
 }
 .rp-card--layer-raised[data-v-269e2bc4] {
-  --_rp-card-bg: var(--rp-color-surface-raised);
+  --_rp-card-bg: var(--rp-color-default);
 }
 .rp-card--borderless[data-v-269e2bc4] {
   --_rp-card-border: transparent;
@@ -90,19 +90,19 @@
   flex: 1 1 auto;
   min-width: 0;
   color: var(--rp-color-text);
-  font-size: var(--rp-font-size-base);
-  line-height: var(--rp-line-height-normal);
+  font-size: var(--rp-font-size-md);
+  line-height: var(--rp-line-height-md);
 }
 .rp-card__title[data-v-269e2bc4] {
   margin: 0;
   color: var(--rp-color-text);
   font-size: var(--rp-font-size-lg);
   font-weight: var(--rp-font-weight-semibold);
-  line-height: var(--rp-line-height-tight);
+  line-height: var(--rp-line-height-xs);
 }
 .rp-card__description[data-v-269e2bc4] {
   margin: 0;
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-dimmed);
   font-size: var(--rp-font-size-sm);
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
 }

package/dist/check.js

@@ -0,0 +1,12 @@
+import { defineVaporComponent, markRaw, template } from "vue";
+//#region ~icons/lucide/check
+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=\"M20 6L9 17l-5-5\">", 3, 1);
+function render(_ctx) {
+	return t0();
+}
+var check_default = markRaw(defineVaporComponent({
+	name: "lucide-check",
+	render
+}));
+//#endregion
+export { check_default as t };

package/dist/checkbox.css

@@ -1,18 +1,14 @@
 .rp-checkbox[data-v-8af73824] {
-  --_rp-checkbox-color: var(--_rp-checkbox-custom-color, var(--rp-color-control-selected-bg));
-  --_rp-checkbox-on-color: var(
-      --_rp-checkbox-custom-on-color,
-      var(--rp-color-control-selected-fg)
-  );
-  --_rp-checkbox-size: 18px;
-  --_rp-checkbox-icon-size: 14px;
-  --_rp-checkbox-font-size: var(--rp-font-size-base);
+  --_rp-checkbox-color: var(--rp-color-control-selected-bg);
+  --_rp-checkbox-on-color: var(--rp-color-control-selected-fg);
+  --_rp-checkbox-size: 24px;
+  --_rp-checkbox-font-size: var(--rp-font-size-md);
   --_rp-checkbox-radius: 4px;
   --_rp-checkbox-checked-bg: var(--_rp-checkbox-color);
   --_rp-checkbox-checked-border: var(--_rp-checkbox-color);
   --_rp-checkbox-checked-icon: var(--_rp-checkbox-on-color);
-  --_rp-checkbox-invalid-border: var(--rp-color-danger);
-  --_rp-checkbox-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
+  --_rp-checkbox-invalid-border: var(--rp-color-red-filled);
+  --_rp-checkbox-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
@@ -20,10 +16,6 @@
   user-select: none;
   vertical-align: top;
 }
-html.dark .rp-checkbox[data-v-8af73824] {
-  --_rp-checkbox-invalid-border: var(--rp-color-danger-fg);
-  --_rp-checkbox-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
-}
 .rp-checkbox--disabled[data-v-8af73824] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
@@ -45,7 +37,7 @@ html.dark .rp-checkbox[data-v-8af73824] {
   pointer-events: none;
 }
 .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-8af73824] {
-  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);
 }
 .rp-checkbox__box[data-v-8af73824] {
@@ -72,8 +64,8 @@ html.dark .rp-checkbox[data-v-8af73824] {
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-checkbox-invalid-ring);
 }
 .rp-checkbox__icon[data-v-8af73824] {
-  width: var(--_rp-checkbox-icon-size);
-  height: var(--_rp-checkbox-icon-size);
+  width: 60%;
+  height: 60%;
   color: var(--_rp-checkbox-checked-icon);
   transform-origin: center;
 }
@@ -81,65 +73,32 @@ html.dark .rp-checkbox[data-v-8af73824] {
   stroke-width: 3;
 }
 .rp-checkbox__label[data-v-8af73824] {
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
   color: var(--rp-color-text);
 }
-.rp-checkbox--color-primary[data-v-8af73824] {
-  --_rp-checkbox-color: var(--rp-color-primary);
-  --_rp-checkbox-on-color: var(--rp-color-on-primary);
-}
-.rp-checkbox--color-secondary[data-v-8af73824] {
-  --_rp-checkbox-color: var(--rp-color-secondary);
-  --_rp-checkbox-on-color: var(--rp-color-on-secondary);
-}
-.rp-checkbox--color-success[data-v-8af73824] {
-  --_rp-checkbox-color: var(--rp-color-success);
-  --_rp-checkbox-on-color: var(--rp-color-on-success);
-}
-.rp-checkbox--color-warning[data-v-8af73824] {
-  --_rp-checkbox-color: var(--rp-color-warning);
-  --_rp-checkbox-on-color: var(--rp-color-on-warning);
-}
-.rp-checkbox--color-danger[data-v-8af73824] {
-  --_rp-checkbox-color: var(--rp-color-danger);
-  --_rp-checkbox-on-color: var(--rp-color-on-danger);
-}
-.rp-checkbox--color-info[data-v-8af73824] {
-  --_rp-checkbox-color: var(--rp-color-info);
-  --_rp-checkbox-on-color: var(--rp-color-on-info);
-}
-.rp-checkbox--color-neutral[data-v-8af73824] {
-  --_rp-checkbox-color: var(--rp-color-neutral);
-  --_rp-checkbox-on-color: var(--rp-color-on-neutral);
-}
 .rp-checkbox--outline[data-v-8af73824] {
   --_rp-checkbox-checked-bg: var(--rp-color-control-bg);
   --_rp-checkbox-checked-border: var(--_rp-checkbox-color);
   --_rp-checkbox-checked-icon: var(--_rp-checkbox-color);
 }
 .rp-checkbox--size-xs[data-v-8af73824] {
-  --_rp-checkbox-size: 14px;
-  --_rp-checkbox-icon-size: 10px;
+  --_rp-checkbox-size: 16px;
   --_rp-checkbox-font-size: var(--rp-font-size-xs);
 }
 .rp-checkbox--size-sm[data-v-8af73824] {
-  --_rp-checkbox-size: 16px;
-  --_rp-checkbox-icon-size: 12px;
+  --_rp-checkbox-size: 20px;
   --_rp-checkbox-font-size: var(--rp-font-size-sm);
 }
 .rp-checkbox--size-md[data-v-8af73824] {
-  --_rp-checkbox-size: 18px;
-  --_rp-checkbox-icon-size: 14px;
-  --_rp-checkbox-font-size: var(--rp-font-size-base);
+  --_rp-checkbox-size: 24px;
+  --_rp-checkbox-font-size: var(--rp-font-size-md);
 }
 .rp-checkbox--size-lg[data-v-8af73824] {
-  --_rp-checkbox-size: 22px;
-  --_rp-checkbox-icon-size: 16px;
+  --_rp-checkbox-size: 30px;
   --_rp-checkbox-font-size: var(--rp-font-size-lg);
 }
 .rp-checkbox--size-xl[data-v-8af73824] {
-  --_rp-checkbox-size: 26px;
-  --_rp-checkbox-icon-size: 20px;
+  --_rp-checkbox-size: 36px;
   --_rp-checkbox-font-size: var(--rp-font-size-xl);
 }
 .rp-checkbox--radius-xs[data-v-8af73824] {

package/dist/checkbox.js

@@ -1,37 +1,20 @@
 import './checkbox.css';
 import { t as bem } from "./bem.js";
+import { n as getComponentColorValue, r as getComponentContrastColor } 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 check_default } from "./check.js";
+import { t as minus_default } from "./minus.js";
 import { t as useControlState } from "./useControlState.js";
-import { VaporTransition, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, next, on, renderEffect, setAttr, setBlockKey, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
-//#region ~icons/lucide/check
-var t0$2 = 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=\"M20 6L9 17l-5-5\">", 3, 1);
-function render$1(_ctx) {
-	return t0$2();
-}
-var check_default = markRaw(defineVaporComponent({
-	name: "lucide-check",
-	render: render$1
-}));
-//#endregion
-//#region ~icons/lucide/minus
-var t0$1 = 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=\"M5 12h14\">", 3, 1);
-function render(_ctx) {
-	return t0$1();
-}
-var minus_default = markRaw(defineVaporComponent({
-	name: "lucide-minus",
-	render
-}));
-//#endregion
+import { VaporTransition, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, next, on, renderEffect, setAttr, setBlockKey, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/checkbox/useCheckbox.ts
-function getCheckboxColorStyle(color) {
-	const customColor = getComponentCustomColor(color);
-	if (!customColor) return void 0;
-	return {
-		"--_rp-checkbox-custom-color": customColor,
-		"--_rp-checkbox-custom-on-color": "var(--rp-color-on-primary)"
-	};
+function getCheckboxColorStyle(color, autoContrast) {
+	const colorValue = getComponentColorValue(color);
+	if (color && !colorValue) return void 0;
+	if (!colorValue && !autoContrast) return void 0;
+	const style = {};
+	if (colorValue) style["--_rp-checkbox-color"] = colorValue;
+	if (autoContrast) style["--_rp-checkbox-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
+	return style;
 }
 function useCheckbox(props, emitUpdate) {
 	const control = useControlState(props);
@@ -41,11 +24,10 @@ function useCheckbox(props, emitUpdate) {
 		disabled: control.disabled,
 		invalid: control.invalid,
 		[props.variant ?? ""]: Boolean(props.variant),
-		[`color-${props.color}`]: isComponentPresetColor(props.color),
 		[`size-${props.size}`]: Boolean(props.size),
 		[`radius-${props.radius}`]: Boolean(props.radius)
 	}));
-	const rootStyle = computed(() => getCheckboxColorStyle(props.color));
+	const rootStyle = computed(() => getCheckboxColorStyle(props.color, props.autoContrast));
 	function onChange(e) {
 		emitUpdate(e.target.checked);
 	}
@@ -71,6 +53,7 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		modelValue: { type: Boolean },
 		variant: {},
 		color: {},
+		autoContrast: { type: Boolean },
 		size: {},
 		radius: {},
 		disabled: {

package/dist/collapse.css

@@ -15,8 +15,8 @@
   min-width: 0;
   overflow: hidden;
   color: var(--rp-color-text);
-  font-size: var(--rp-font-size-base);
-  line-height: var(--rp-line-height-normal);
+  font-size: var(--rp-font-size-md);
+  line-height: var(--rp-line-height-md);
   grid-template-rows: 1fr;
   transition: grid-template-rows var(--_rp-collapse-duration), opacity var(--_rp-collapse-duration);
 }

package/dist/collapse.js

@@ -1,6 +1,6 @@
 import './collapse.css';
-import { t as useCollapse } from "./useCollapse.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useCollapse } from "./useCollapse.js";
 import { VaporTransition, applyVShow, child, createComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/collapse/collapse.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<section data-v-a78ac964><div data-v-a78ac964 class=rp-collapse__inner>");

package/dist/color-input.css

@@ -0,0 +1,108 @@
+.rp-color-input[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-md);
+  --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
+  --_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-grid: conic-gradient(
+      var(--_rp-color-input-empty-tile) 25%,
+      var(--_rp-color-input-empty-tile-alt) 0 50%,
+      var(--_rp-color-input-empty-tile) 0 75%,
+      var(--_rp-color-input-empty-tile-alt) 0
+  );
+  display: inline-flex;
+  max-width: 100%;
+  font-family: var(--rp-font-family);
+  vertical-align: middle;
+}
+.rp-color-input--size-xs[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-xs);
+}
+.rp-color-input--size-sm[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-sm);
+}
+.rp-color-input--size-md[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-md);
+}
+.rp-color-input--size-lg[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-lg);
+}
+.rp-color-input--size-xl[data-v-bae38f91] {
+  --_rp-color-input-height: var(--rp-size-control-xl);
+}
+html.dark .rp-color-input[data-v-bae38f91], [data-rp-color-scheme=dark] .rp-color-input[data-v-bae38f91] {
+  --_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-bae38f91] .rp-input {
+  width: 100%;
+  min-width: 180px;
+  padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
+}
+.rp-color-input[data-v-bae38f91] .rp-popover__content {
+  min-width: auto;
+  padding: var(--rp-spacing-3);
+  padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
+}
+.rp-color-input[data-v-bae38f91] .rp-color-picker {
+  --_rp-color-picker-size: min(
+      var(--_rp-color-picker-saturation-width),
+      calc(100vw - var(--rp-spacing-12))
+  );
+}
+.rp-color-input__preview[data-v-bae38f91] {
+  --_rp-color-swatch-radius: 50%;
+  width: var(--_rp-color-input-preview-size);
+  height: var(--_rp-color-input-preview-size);
+  flex-shrink: 0;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.rp-color-input__preview--empty[data-v-bae38f91] {
+  box-sizing: border-box;
+  display: inline-flex;
+  background: var(--_rp-color-input-empty-grid);
+  background-size: calc(var(--_rp-color-input-preview-size) / 2) calc(var(--_rp-color-input-preview-size) / 2);
+  border: var(--rp-border-width-thin) dashed var(--rp-color-control-border);
+}
+.rp-color-input__eye-dropper[data-v-bae38f91] {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rp-radius-xs);
+  color: var(--rp-color-control-icon);
+  transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-color-input__eye-dropper[data-v-bae38f91]:hover:not(:disabled) {
+  color: var(--rp-color-control-fg);
+}
+.rp-color-input__eye-dropper[data-v-bae38f91]:focus-visible {
+  outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
+  outline-offset: 2px;
+}
+.rp-color-input__eye-dropper[data-v-bae38f91]:disabled {
+  cursor: not-allowed;
+  opacity: var(--rp-opacity-disabled);
+}
+.rp-color-input__eye-dropper-icon[data-v-bae38f91] {
+  display: inline-flex;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.rp-color-input__eye-dropper-icon svg[data-v-bae38f91] {
+  width: 100%;
+  height: 100%;
+}
+.rp-color-input__eye-dropper-icon[data-v-bae38f91] >  svg {
+  width: 100%;
+  height: 100%;
+}