ropav 0.0.8 → 0.0.10

package/dist/badge.css

@@ -1,19 +1,11 @@
-.rp-badge[data-v-ab51b365] {
-  --_rp-badge-accent: var(--_rp-badge-custom-color, var(--rp-color-primary));
-  --_rp-badge-accent-fg: var(--_rp-badge-custom-fg, var(--rp-color-primary-fg));
-  --_rp-badge-accent-on: var(--_rp-badge-custom-on, var(--rp-color-on-primary));
-  --_rp-badge-accent-subtle-bg: var(
-      --_rp-badge-custom-subtle-bg,
-      var(--rp-color-primary-subtle-bg)
-  );
-  --_rp-badge-accent-border: var(--_rp-badge-custom-border, var(--rp-color-primary-border));
-  --_rp-badge-height: 1.5rem;
-  --_rp-badge-padding-x: var(--rp-spacing-2);
-  --_rp-badge-font-size: var(--rp-font-size-sm);
+.rp-badge[data-v-fdf959f0] {
+  --_rp-badge-height: 20px;
+  --_rp-badge-padding-x: 10px;
+  --_rp-badge-font-size: 11px;
   --_rp-badge-radius: var(--rp-radius-full);
-  --_rp-badge-bg: var(--rp-color-button-default-bg);
-  --_rp-badge-fg: var(--rp-color-text);
-  --_rp-badge-border: var(--rp-color-border);
+  --_rp-badge-bg: var(--rp-color-default);
+  --_rp-badge-fg: var(--rp-color-default-color);
+  --_rp-badge-border: var(--rp-color-default-border);
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -27,7 +19,7 @@
   font-family: var(--rp-font-family);
   font-size: var(--_rp-badge-font-size);
   font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-none);
+  line-height: calc(var(--_rp-badge-height) - 2px);
   vertical-align: middle;
   white-space: nowrap;
   background-color: var(--_rp-badge-bg);
@@ -35,135 +27,68 @@
   border-radius: var(--_rp-badge-radius);
   transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-badge--color-primary[data-v-ab51b365] {
-  --_rp-badge-accent: var(--rp-color-primary);
-  --_rp-badge-accent-fg: var(--rp-color-primary-fg);
-  --_rp-badge-accent-on: var(--rp-color-on-primary);
-  --_rp-badge-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
-  --_rp-badge-accent-border: var(--rp-color-primary-border);
+.rp-badge--size-xs[data-v-fdf959f0] {
+  --_rp-badge-height: 16px;
+  --_rp-badge-padding-x: 6px;
+  --_rp-badge-font-size: 9px;
 }
-.rp-badge--color-secondary[data-v-ab51b365] {
-  --_rp-badge-accent: var(--rp-color-secondary);
-  --_rp-badge-accent-fg: var(--rp-color-secondary-fg);
-  --_rp-badge-accent-on: var(--rp-color-on-secondary);
-  --_rp-badge-accent-subtle-bg: var(--rp-color-secondary-subtle-bg);
-  --_rp-badge-accent-border: var(--rp-color-secondary-border);
+.rp-badge--size-sm[data-v-fdf959f0] {
+  --_rp-badge-height: 18px;
+  --_rp-badge-padding-x: 8px;
+  --_rp-badge-font-size: 10px;
 }
-.rp-badge--color-success[data-v-ab51b365] {
-  --_rp-badge-accent: var(--rp-color-success);
-  --_rp-badge-accent-fg: var(--rp-color-success-fg);
-  --_rp-badge-accent-on: var(--rp-color-on-success);
-  --_rp-badge-accent-subtle-bg: var(--rp-color-success-subtle-bg);
-  --_rp-badge-accent-border: var(--rp-color-success-border);
+.rp-badge--size-md[data-v-fdf959f0] {
+  --_rp-badge-height: 20px;
+  --_rp-badge-padding-x: 10px;
+  --_rp-badge-font-size: 11px;
 }
-.rp-badge--color-warning[data-v-ab51b365] {
-  --_rp-badge-accent: var(--rp-color-warning);
-  --_rp-badge-accent-fg: var(--rp-color-warning-fg);
-  --_rp-badge-accent-on: var(--rp-color-on-warning);
-  --_rp-badge-accent-subtle-bg: var(--rp-color-warning-subtle-bg);
-  --_rp-badge-accent-border: var(--rp-color-warning-border);
+.rp-badge--size-lg[data-v-fdf959f0] {
+  --_rp-badge-height: 26px;
+  --_rp-badge-padding-x: 12px;
+  --_rp-badge-font-size: 13px;
 }
-.rp-badge--color-danger[data-v-ab51b365] {
-  --_rp-badge-accent: var(--rp-color-danger);
-  --_rp-badge-accent-fg: var(--rp-color-danger-fg);
-  --_rp-badge-accent-on: var(--rp-color-on-danger);
-  --_rp-badge-accent-subtle-bg: var(--rp-color-danger-subtle-bg);
-  --_rp-badge-accent-border: var(--rp-color-danger-border);
+.rp-badge--size-xl[data-v-fdf959f0] {
+  --_rp-badge-height: 32px;
+  --_rp-badge-padding-x: 16px;
+  --_rp-badge-font-size: 16px;
 }
-.rp-badge--color-info[data-v-ab51b365] {
-  --_rp-badge-accent: var(--rp-color-info);
-  --_rp-badge-accent-fg: var(--rp-color-info-fg);
-  --_rp-badge-accent-on: var(--rp-color-on-info);
-  --_rp-badge-accent-subtle-bg: var(--rp-color-info-subtle-bg);
-  --_rp-badge-accent-border: var(--rp-color-info-border);
-}
-.rp-badge--color-neutral[data-v-ab51b365] {
-  --_rp-badge-accent: var(--rp-color-neutral);
-  --_rp-badge-accent-fg: var(--rp-color-neutral-fg);
-  --_rp-badge-accent-on: var(--rp-color-on-neutral);
-  --_rp-badge-accent-subtle-bg: var(--rp-color-neutral-subtle-bg);
-  --_rp-badge-accent-border: var(--rp-color-neutral-border);
-}
-.rp-badge--solid[data-v-ab51b365] {
-  --_rp-badge-bg: var(--_rp-badge-accent);
-  --_rp-badge-fg: var(--_rp-badge-accent-on);
-  --_rp-badge-border: var(--_rp-badge-accent);
-}
-.rp-badge--subtle[data-v-ab51b365] {
-  --_rp-badge-bg: var(--_rp-badge-accent-subtle-bg);
-  --_rp-badge-fg: var(--_rp-badge-accent-fg);
-  --_rp-badge-border: transparent;
-}
-.rp-badge--surface[data-v-ab51b365] {
-  --_rp-badge-bg: var(--_rp-badge-accent-subtle-bg);
-  --_rp-badge-fg: var(--_rp-badge-accent-fg);
-  --_rp-badge-border: var(--_rp-badge-accent-border);
-}
-.rp-badge--outline[data-v-ab51b365] {
-  --_rp-badge-bg: transparent;
-  --_rp-badge-fg: var(--_rp-badge-accent-fg);
-  --_rp-badge-border: var(--_rp-badge-accent-border);
-}
-.rp-badge--size-xs[data-v-ab51b365] {
-  --_rp-badge-height: 1rem;
-  --_rp-badge-padding-x: var(--rp-spacing-1);
-  --_rp-badge-font-size: var(--rp-font-size-xs);
-}
-.rp-badge--size-sm[data-v-ab51b365] {
-  --_rp-badge-height: 1.25rem;
-  --_rp-badge-padding-x: var(--rp-spacing-2);
-  --_rp-badge-font-size: var(--rp-font-size-xs);
-}
-.rp-badge--size-md[data-v-ab51b365] {
-  --_rp-badge-height: 1.5rem;
-  --_rp-badge-padding-x: var(--rp-spacing-2);
-  --_rp-badge-font-size: var(--rp-font-size-sm);
-}
-.rp-badge--size-lg[data-v-ab51b365] {
-  --_rp-badge-height: 1.75rem;
-  --_rp-badge-padding-x: var(--rp-spacing-3);
-  --_rp-badge-font-size: var(--rp-font-size-base);
-}
-.rp-badge--size-xl[data-v-ab51b365] {
-  --_rp-badge-height: 2rem;
-  --_rp-badge-padding-x: var(--rp-spacing-4);
-  --_rp-badge-font-size: var(--rp-font-size-base);
-}
-.rp-badge--radius-none[data-v-ab51b365] {
+.rp-badge--radius-none[data-v-fdf959f0] {
   --_rp-badge-radius: var(--rp-radius-none);
 }
-.rp-badge--radius-xs[data-v-ab51b365] {
+.rp-badge--radius-xs[data-v-fdf959f0] {
   --_rp-badge-radius: var(--rp-radius-xs);
 }
-.rp-badge--radius-sm[data-v-ab51b365] {
+.rp-badge--radius-sm[data-v-fdf959f0] {
   --_rp-badge-radius: var(--rp-radius-sm);
 }
-.rp-badge--radius-md[data-v-ab51b365] {
+.rp-badge--radius-md[data-v-fdf959f0] {
   --_rp-badge-radius: var(--rp-radius-md);
 }
-.rp-badge--radius-lg[data-v-ab51b365] {
+.rp-badge--radius-lg[data-v-fdf959f0] {
   --_rp-badge-radius: var(--rp-radius-lg);
 }
-.rp-badge--radius-xl[data-v-ab51b365] {
+.rp-badge--radius-xl[data-v-fdf959f0] {
   --_rp-badge-radius: var(--rp-radius-xl);
 }
-.rp-badge--radius-full[data-v-ab51b365] {
+.rp-badge--radius-full[data-v-fdf959f0] {
   --_rp-badge-radius: var(--rp-radius-full);
 }
-.rp-badge__left[data-v-ab51b365], .rp-badge__right[data-v-ab51b365] {
+.rp-badge__left[data-v-fdf959f0], .rp-badge__right[data-v-fdf959f0] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   line-height: 0;
 }
-.rp-badge__left[data-v-ab51b365] >  svg, .rp-badge__right[data-v-ab51b365] >  svg {
+.rp-badge__left[data-v-fdf959f0] >  svg, .rp-badge__right[data-v-fdf959f0] >  svg {
   display: block;
   width: 1em;
   height: 1em;
 }
-.rp-badge__label[data-v-ab51b365] {
+.rp-badge__label[data-v-fdf959f0] {
+  display: inline-block;
   min-width: 0;
   overflow: hidden;
+  text-transform: uppercase;
   text-overflow: ellipsis;
 }

package/dist/badge.js

@@ -1,26 +1,29 @@
 import './badge.css';
 import { t as bem } from "./bem.js";
+import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as getComponentCustomColor, r as isComponentPresetColor, t as componentColors } from "./componentColors.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setStyle, template } from "vue";
 //#region src/components/badge/useBadgeColor.ts
-function getBadgeColorStyle(color) {
-	const customColor = getComponentCustomColor(color);
-	if (!customColor) return void 0;
+function getBadgeColorStyle(color, variant, autoContrast) {
+	if (!color && !variant) return void 0;
+	const roles = getComponentVariantColorRoles({
+		color,
+		variant: variant ?? "solid",
+		autoContrast
+	});
+	if (!roles) return void 0;
 	return {
-		"--_rp-badge-custom-color": customColor,
-		"--_rp-badge-custom-fg": customColor,
-		"--_rp-badge-custom-on": "var(--rp-color-on-primary)",
-		"--_rp-badge-custom-subtle-bg": `color-mix(in srgb, ${customColor} 12%, transparent)`,
-		"--_rp-badge-custom-border": `color-mix(in srgb, ${customColor} 45%, transparent)`
+		"--_rp-badge-bg": roles.background,
+		"--_rp-badge-fg": roles.color,
+		"--_rp-badge-border": roles.border
 	};
 }
 //#endregion
 //#region src/components/badge/badge.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-ab51b365 class=rp-badge__left>");
-var t1 = template("<span data-v-ab51b365 class=rp-badge__label>");
-var t2 = template("<span data-v-ab51b365 class=rp-badge__right>");
-var t3 = template("<span data-v-ab51b365>", 1);
+var t0 = template("<span data-v-fdf959f0 class=rp-badge__left>");
+var t1 = template("<span data-v-fdf959f0 class=rp-badge__label>");
+var t2 = template("<span data-v-fdf959f0 class=rp-badge__right>");
+var t3 = template("<span data-v-fdf959f0>", 1);
 //#endregion
 //#region src/components/badge/badge.vue
 var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -29,6 +32,7 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	props: {
 		variant: {},
 		color: {},
+		autoContrast: { type: Boolean },
 		size: {},
 		radius: {},
 		ariaLabel: {}
@@ -37,11 +41,10 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const props = __props;
 		const rootClass = computed(() => bem("rp-badge", {
 			[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(() => getBadgeColorStyle(props.color));
+		const rootStyle = computed(() => getBadgeColorStyle(props.color, props.variant, props.autoContrast));
 		const n12 = t3();
 		renderEffect(() => {
 			setClass(n12, rootClass.value);
@@ -71,7 +74,7 @@ var badge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n12;
 	}
-}), [["__scopeId", "data-v-ab51b365"]]);
+}), [["__scopeId", "data-v-fdf959f0"]]);
 //#endregion
 //#region src/components/badge/types.ts
 var badgeColors = componentColors;