@w5-ui/wc 0.7.0 → 0.8.0

package/dist/index.js

@@ -6612,7 +6612,7 @@ function SkipLink($$anchor, $$props) {
   }
   reset(a);
   template_effect(() => {
-    set_class(a, 1, `absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-brand-05 px-3 py-2 text-13 font-semibold text-white no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
+    set_class(a, 1, `absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-primary-fill px-3 py-2 text-13 font-semibold text-primary-fill-fg no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
     ${className() ?? ""}`);
     set_attribute(a, "href", href());
   });
@@ -7276,7 +7276,7 @@ function Badge($$anchor, $$props) {
     // Status-warning is yellow in both motifs; near-black text stays
     // legible against it. `text-neutral-10` resolves to `#0a0a0b`.
     warn: "bg-status-warning text-neutral-10",
-    info: "bg-brand-05 text-white",
+    info: "bg-primary-fill text-primary-fill-fg",
     success: "bg-status-success text-white",
     neutral: "bg-status-neutral text-white"
   };
@@ -8757,7 +8757,7 @@ var root$2N = /* @__PURE__ */ from_html(`<button><!> <!></button>`);
 function Button($$anchor, $$props) {
   let variant = prop($$props, "variant", 3, "ghost"), iconOnly = prop($$props, "iconOnly", 3, false), loading = prop($$props, "loading", 3, false), title = prop($$props, "title", 3, void 0), type = prop($$props, "type", 3, "button"), disabled = prop($$props, "disabled", 3, false), className = prop($$props, "class", 3, ""), style = prop($$props, "style", 3, ""), ariaLabel = prop($$props, "aria-label", 3, void 0), ariaHasPopup = prop($$props, "aria-haspopup", 3, void 0), ariaExpanded = prop($$props, "aria-expanded", 3, void 0), ariaControls = prop($$props, "aria-controls", 3, void 0);
   const VARIANT = {
-    primary: "bg-brand-05 text-white hover:bg-brand-06 border-transparent",
+    primary: "bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover active:bg-primary-fill-press border-transparent",
     ghost: "bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1",
     danger: "bg-transparent text-status-danger border-status-danger/30"
   };
@@ -13239,7 +13239,7 @@ function DatePicker($$anchor, $$props) {
     if (outside) cls += " text-text-4";
     else cls += " text-text-2";
     if (isToday && !isSelected) cls += " ring-1 ring-inset ring-brand-05";
-    if (isSelected) cls += " bg-brand-05 text-white hover:bg-brand-06";
+    if (isSelected) cls += " bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover";
     return cls;
   }
   var div = root_5$e();
@@ -13527,7 +13527,7 @@ function DateRangePicker($$anchor, $$props) {
     if (outside) cls += " text-text-4";
     else cls += " text-text-2";
     if (isTodayDay && !start && !end) cls += " ring-1 ring-inset ring-brand-05";
-    if (start || end) cls += " bg-brand-05 text-white hover:bg-brand-06";
+    if (start || end) cls += " bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover";
     else if (inRange) cls += " bg-brand-05/20 text-text-1";
     return cls;
   }
@@ -22433,7 +22433,7 @@ function NotifDot_wc($$anchor, $$props) {
   return pop($$exports);
 }
 customElements.define("uni-notif-dot", create_custom_element(NotifDot_wc, { class: {} }, ["default"], [], { mode: "open" }));
-var root$1n = /* @__PURE__ */ from_html(`<span class="inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-brand-05 px-1.5 text-11 font-bold text-white tabular-nums"> </span>`);
+var root$1n = /* @__PURE__ */ from_html(`<span class="inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-primary-fill px-1.5 text-11 font-bold text-primary-fill-fg tabular-nums"> </span>`);
 var root_1$$ = /* @__PURE__ */ from_html(`<button type="button" class="cursor-pointer rounded border-0 bg-transparent px-1.5 py-0.5 text-11 text-brand-05 hover:text-status-info focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05">Mark all read</button>`);
 var root_2$R = /* @__PURE__ */ from_html(`<button type="button" role="tab" class="cursor-pointer rounded border border-border-2 bg-transparent px-2.5 py-0.5 text-11 text-text-3 hover:bg-row-hover hover:text-text-1 data-[active=true]:border-brand-05 data-[active=true]:bg-brand-05/[0.10] data-[active=true]:text-brand-05 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"> </button>`);
 var root_3$v = /* @__PURE__ */ from_html(`<div class="p-6 text-center text-13 text-text-4">No notifications</div>`);
@@ -23203,7 +23203,7 @@ function Pagination($$anchor, $$props) {
   let totalPages = /* @__PURE__ */ user_derived(() => Math.max(1, Math.ceil(total() / pageSize())));
   let pages = /* @__PURE__ */ user_derived(() => getPageNumbers(page(), get(totalPages)));
   const BTN_BASE = "inline-flex h-[30px] min-w-[30px] cursor-pointer items-center justify-center rounded-md border border-transparent bg-transparent px-1.5 text-13 font-medium leading-none text-text-3 transition-[background-color,color,border-color] duration-100 hover:bg-row-hover hover:text-text-1 hover:border-border-2 disabled:cursor-not-allowed disabled:opacity-35 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05";
-  const BTN_ACTIVE = "bg-brand-05 text-white border-brand-05 hover:bg-brand-06 hover:border-brand-06";
+  const BTN_ACTIVE = "bg-primary-fill text-primary-fill-fg border-primary-fill hover:bg-primary-fill-hover hover:border-primary-fill-hover";
   var fragment = comment();
   var node = first_child(fragment);
   {
@@ -27483,7 +27483,7 @@ function SelectionToolbar_wc($$anchor, $$props) {
 }
 customElements.define("uni-selection-toolbar", create_custom_element(SelectionToolbar_wc, { count: {}, actions: {}, ariaLabel: {} }, ["default"], [], { mode: "open" }));
 var root$W = /* @__PURE__ */ from_html(`<span> </span>`);
-var root_1$C = /* @__PURE__ */ from_html(`<span class="ml-auto rounded-full bg-brand-05 px-1.5 py-px text-[10px] font-semibold text-white"> <span class="sr-only"> </span></span>`);
+var root_1$C = /* @__PURE__ */ from_html(`<span class="ml-auto rounded-full bg-primary-fill px-1.5 py-px text-[10px] font-semibold text-primary-fill-fg"> <span class="sr-only"> </span></span>`);
 var root_2$v = /* @__PURE__ */ from_html(`<li><button type="button"><span class="sb-ico shrink-0 text-text-3 [&amp;_svg]:h-4 [&amp;_svg]:w-4"><!></span> <!> <!></button></li>`);
 var root_3$i = /* @__PURE__ */ from_html(`<h2 class="m-0 px-4 pb-1.5 pt-3.5 text-[10px] font-semibold uppercase leading-[1.4] tracking-[0.06em] text-text-4"> </h2> <ul class="m-0 flex list-none flex-col gap-px px-2"></ul>`, 1);
 var root_4$7 = /* @__PURE__ */ from_html(`<nav class="overflow-auto border-r border-border-1 bg-bg-page py-2" aria-label="Primary"></nav>`);
@@ -28803,7 +28803,7 @@ function SplitButton($$anchor, $$props) {
   onMount(() => document.addEventListener("mousedown", handleOutside));
   onDestroy(() => document.removeEventListener("mousedown", handleOutside));
   const VARIANT = {
-    primary: "bg-brand-05 text-white hover:bg-brand-06 border-brand-05",
+    primary: "bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover active:bg-primary-fill-press border-primary-fill",
     ghost: "bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1",
     danger: "bg-transparent text-status-danger border-status-danger/30"
   };
@@ -30093,7 +30093,7 @@ function Stepper($$anchor, $$props) {
   let className = prop($$props, "class", 3, "");
   let activeIdx = /* @__PURE__ */ user_derived(() => $$props.steps.findIndex((s) => s.id === $$props.active));
   const NUM = {
-    active: "border-brand-05 bg-brand-05 text-white",
+    active: "border-primary-fill bg-primary-fill text-primary-fill-fg",
     done: "border-brand-05 bg-brand-05/[0.18] text-status-info",
     upcoming: "border-bg-3 bg-bg-1 text-text-4"
   };