@pathscale/ui 1.1.25 → 1.1.27

package/dist/components/badge/Badge.css

@@ -4,12 +4,13 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    gap: 0.125rem;
+    gap: 0.25rem;
     font-weight: 500;
 
     min-height: 1.75rem;
     min-width: 1.75rem;
-    border-radius: 1.5rem;
+    padding-inline: 0.625rem;
+    border-radius: 9999px;
     font-size: 0.75rem;
     line-height: 1.34;
 
@@ -23,7 +24,6 @@
   }
 
   .badge__label {
-    padding-inline: 0.125rem;
   }
 
   .badge-anchor {
@@ -35,7 +35,7 @@
   .badge--lg {
     min-height: 2rem;
     min-width: 2rem;
-    border-radius: 1rem;
+    padding-inline: 0.75rem;
     font-size: 0.875rem;
     line-height: 1.43;
   }
@@ -47,7 +47,7 @@
   .badge--sm {
     min-height: 1rem;
     min-width: 1rem;
-    border-radius: 0.75rem;
+    padding-inline: 0.375rem;
     font-size: 10px;
     line-height: 1.34;
   }

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

@@ -8,7 +8,7 @@ declare const BadgeAnchor: (props: BadgeAnchorProps) => JSX.Element;
 type BadgeColor = "default" | "accent" | "success" | "warning" | "danger";
 type BadgeVariant = "primary" | "secondary" | "soft";
 type BadgeSize = "sm" | "md" | "lg";
-type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+type BadgePlacement = "none" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
 interface BadgeRootProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> {
     class?: string;
     children?: JSX.Element;

package/dist/components/badge/Badge.js

@@ -39,6 +39,7 @@ const BADGE_VARIANT_CLASS = {
     soft: "badge--soft"
 };
 const BADGE_PLACEMENT_CLASS = {
+    none: "",
     "top-right": "badge--top-right",
     "top-left": "badge--top-left",
     "bottom-right": "badge--bottom-right",
@@ -57,7 +58,7 @@ const BadgeRoot = (props)=>{
         const size = local.size ?? "md";
         const color = local.color ?? "default";
         const variant = local.variant ?? "primary";
-        const placement = local.placement ?? "top-right";
+        const placement = local.placement ?? "none";
         return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("badge", BADGE_SIZE_CLASS[size], BADGE_COLOR_CLASS[color], BADGE_VARIANT_CLASS[variant], BADGE_PLACEMENT_CLASS[placement], local.class));
     };
     const badgeChildren = ()=>{

package/dist/components/theme-color-picker/hueShift.js

@@ -26,6 +26,69 @@ const CONTENT_VARS = [
     "--nf-on-accent",
     "--color-nf-on-accent"
 ];
+const BACKGROUND_VARS = {
+    light: [
+        {
+            name: "--color-base-100",
+            anchor: "oklch(98% 0.001 106.423)",
+            mix: 4
+        },
+        {
+            name: "--color-base-200",
+            anchor: "oklch(97% 0.001 106.424)",
+            mix: 5
+        },
+        {
+            name: "--color-base-300",
+            anchor: "oklch(92% 0.003 48.717)",
+            mix: 7
+        },
+        {
+            name: "--gradient-start",
+            anchor: "#ffffff",
+            mix: 18
+        },
+        {
+            name: "--gradient-end",
+            anchor: "#f5f5f5",
+            mix: 10
+        }
+    ],
+    dark: [
+        {
+            name: "--color-base-100",
+            anchor: "oklch(13% 0.028 261.692)",
+            mix: 8
+        },
+        {
+            name: "--color-base-200",
+            anchor: "oklch(21% 0.034 264.665)",
+            mix: 9
+        },
+        {
+            name: "--color-base-300",
+            anchor: "oklch(27% 0.033 256.848)",
+            mix: 11
+        },
+        {
+            name: "--gradient-start",
+            anchor: "#0f1420",
+            mix: 20
+        },
+        {
+            name: "--gradient-end",
+            anchor: "#060910",
+            mix: 12
+        }
+    ]
+};
+function getResolvedTheme() {
+    if ("undefined" == typeof document) return "light";
+    const dataTheme = document.documentElement.getAttribute("data-theme");
+    if ("dark" === dataTheme) return "dark";
+    if ("light" === dataTheme) return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 function parseHex(hex) {
     let h = hex.trim();
     if (h.startsWith("#")) h = h.slice(1);
@@ -62,14 +125,17 @@ function applyThemeColor(hex) {
     if (!rgb) return;
     const root = document.documentElement;
     const content = pickContentColor(rgb.r, rgb.g, rgb.b);
+    const resolvedTheme = getResolvedTheme();
     for (const varName of PRIMARY_VARS)root.style.setProperty(varName, hex);
     for (const varName of CONTENT_VARS)root.style.setProperty(varName, content);
+    for (const { name, anchor, mix } of BACKGROUND_VARS[resolvedTheme])root.style.setProperty(name, `color-mix(in oklab, ${hex} ${mix}%, ${anchor})`);
 }
 function resetHueShift() {
     if (!checkCspAllowsInlineStyles()) return;
     const root = document.documentElement;
     for (const varName of PRIMARY_VARS)root.style.removeProperty(varName);
     for (const varName of CONTENT_VARS)root.style.removeProperty(varName);
+    for (const { name } of BACKGROUND_VARS.light)root.style.removeProperty(name);
 }
 function createHueShiftStore(storagePrefix) {
     const STORAGE_KEY = `${storagePrefix}_theme_color`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "author": "pathscale",
   "repository": {
     "type": "git",