@duskmoon-dev/core 1.15.0 → 1.16.0

package/dist/cjs/tailwind-plugin.cjs

@@ -70,30 +70,59 @@ module.exports = __toCommonJS(exports_tailwind_plugin);
 var import_plugin = __toESM(require("tailwindcss/plugin"));
 var themeColors = {
   primary: "var(--color-primary)",
-  "on-primary": "var(--color-on-primary)",
+  "primary-content": "var(--color-primary-content)",
   "primary-container": "var(--color-primary-container)",
   "on-primary-container": "var(--color-on-primary-container)",
   secondary: "var(--color-secondary)",
-  "on-secondary": "var(--color-on-secondary)",
+  "secondary-content": "var(--color-secondary-content)",
   "secondary-container": "var(--color-secondary-container)",
   "on-secondary-container": "var(--color-on-secondary-container)",
   tertiary: "var(--color-tertiary)",
-  "on-tertiary": "var(--color-on-tertiary)",
+  "tertiary-content": "var(--color-tertiary-content)",
   "tertiary-container": "var(--color-tertiary-container)",
   "on-tertiary-container": "var(--color-on-tertiary-container)",
-  error: "var(--color-error)",
-  "on-error": "var(--color-on-error)",
-  "error-container": "var(--color-error-container)",
-  "on-error-container": "var(--color-on-error-container)",
+  accent: "var(--color-accent)",
+  "accent-content": "var(--color-accent-content)",
+  neutral: "var(--color-neutral)",
+  "neutral-content": "var(--color-neutral-content)",
+  "neutral-variant": "var(--color-neutral-variant)",
   surface: "var(--color-surface)",
-  "on-surface": "var(--color-on-surface)",
+  "surface-dim": "var(--color-surface-dim)",
+  "surface-bright": "var(--color-surface-bright)",
   "surface-variant": "var(--color-surface-variant)",
+  "on-surface": "var(--color-on-surface)",
   "on-surface-variant": "var(--color-on-surface-variant)",
   "surface-container": "var(--color-surface-container)",
   "surface-container-low": "var(--color-surface-container-low)",
   "surface-container-lowest": "var(--color-surface-container-lowest)",
   "surface-container-high": "var(--color-surface-container-high)",
   "surface-container-highest": "var(--color-surface-container-highest)",
+  info: "var(--color-info)",
+  "info-content": "var(--color-info-content)",
+  "info-container": "var(--color-info-container)",
+  "on-info-container": "var(--color-on-info-container)",
+  success: "var(--color-success)",
+  "success-content": "var(--color-success-content)",
+  "success-container": "var(--color-success-container)",
+  "on-success-container": "var(--color-on-success-container)",
+  warning: "var(--color-warning)",
+  "warning-content": "var(--color-warning-content)",
+  "warning-container": "var(--color-warning-container)",
+  "on-warning-container": "var(--color-on-warning-container)",
+  error: "var(--color-error)",
+  "error-content": "var(--color-error-content)",
+  "error-container": "var(--color-error-container)",
+  "on-error-container": "var(--color-on-error-container)",
+  "base-100": "var(--color-base-100)",
+  "base-200": "var(--color-base-200)",
+  "base-300": "var(--color-base-300)",
+  "base-400": "var(--color-base-400)",
+  "base-500": "var(--color-base-500)",
+  "base-600": "var(--color-base-600)",
+  "base-700": "var(--color-base-700)",
+  "base-800": "var(--color-base-800)",
+  "base-900": "var(--color-base-900)",
+  "base-content": "var(--color-base-content)",
   outline: "var(--color-outline)",
   "outline-variant": "var(--color-outline-variant)",
   "inverse-surface": "var(--color-inverse-surface)",
@@ -102,7 +131,7 @@ var themeColors = {
   scrim: "var(--color-scrim)",
   shadow: "var(--color-shadow)"
 };
-var duskmoonPlugin = import_plugin.default(({ addBase, matchUtilities, theme }) => {
+var duskmoonPlugin = import_plugin.default(({ matchUtilities, theme }) => {
   matchUtilities({
     "grid-cols-auto-fill": (value) => ({
       "grid-template-columns": `repeat(auto-fill, minmax(min(${value}, 100%), 1fr))`
@@ -111,76 +140,6 @@ var duskmoonPlugin = import_plugin.default(({ addBase, matchUtilities, theme })
       "grid-template-columns": `repeat(auto-fit, minmax(min(${value}, 100%), 1fr))`
     })
   }, { values: theme("spacing") });
-  addBase({
-    ':root, [data-theme="sunshine"]': {
-      "--color-primary": "oklch(0.55 0.2 260)",
-      "--color-on-primary": "oklch(1 0 0)",
-      "--color-primary-container": "oklch(0.9 0.05 260)",
-      "--color-on-primary-container": "oklch(0.25 0.1 260)",
-      "--color-secondary": "oklch(0.5 0.1 280)",
-      "--color-on-secondary": "oklch(1 0 0)",
-      "--color-secondary-container": "oklch(0.92 0.03 280)",
-      "--color-on-secondary-container": "oklch(0.25 0.05 280)",
-      "--color-tertiary": "oklch(0.55 0.15 30)",
-      "--color-on-tertiary": "oklch(1 0 0)",
-      "--color-tertiary-container": "oklch(0.92 0.04 30)",
-      "--color-on-tertiary-container": "oklch(0.3 0.08 30)",
-      "--color-error": "oklch(0.55 0.2 25)",
-      "--color-on-error": "oklch(1 0 0)",
-      "--color-error-container": "oklch(0.92 0.05 25)",
-      "--color-on-error-container": "oklch(0.3 0.1 25)",
-      "--color-surface": "oklch(0.99 0.005 260)",
-      "--color-on-surface": "oklch(0.2 0.02 260)",
-      "--color-surface-variant": "oklch(0.93 0.01 260)",
-      "--color-on-surface-variant": "oklch(0.45 0.03 260)",
-      "--color-surface-container": "oklch(0.96 0.008 260)",
-      "--color-surface-container-low": "oklch(0.97 0.006 260)",
-      "--color-surface-container-lowest": "oklch(1 0 0)",
-      "--color-surface-container-high": "oklch(0.94 0.01 260)",
-      "--color-surface-container-highest": "oklch(0.92 0.012 260)",
-      "--color-outline": "oklch(0.55 0.02 260)",
-      "--color-outline-variant": "oklch(0.8 0.015 260)",
-      "--color-inverse-surface": "oklch(0.25 0.02 260)",
-      "--color-inverse-on-surface": "oklch(0.95 0.005 260)",
-      "--color-inverse-primary": "oklch(0.8 0.12 260)",
-      "--color-scrim": "oklch(0 0 0)",
-      "--color-shadow": "oklch(0 0 0)"
-    },
-    '[data-theme="moonlight"]': {
-      "--color-primary": "oklch(0.8 0.12 260)",
-      "--color-on-primary": "oklch(0.3 0.15 260)",
-      "--color-primary-container": "oklch(0.35 0.15 260)",
-      "--color-on-primary-container": "oklch(0.9 0.05 260)",
-      "--color-secondary": "oklch(0.8 0.06 280)",
-      "--color-on-secondary": "oklch(0.3 0.08 280)",
-      "--color-secondary-container": "oklch(0.35 0.08 280)",
-      "--color-on-secondary-container": "oklch(0.92 0.03 280)",
-      "--color-tertiary": "oklch(0.8 0.1 30)",
-      "--color-on-tertiary": "oklch(0.35 0.12 30)",
-      "--color-tertiary-container": "oklch(0.4 0.1 30)",
-      "--color-on-tertiary-container": "oklch(0.92 0.04 30)",
-      "--color-error": "oklch(0.85 0.12 25)",
-      "--color-on-error": "oklch(0.35 0.15 25)",
-      "--color-error-container": "oklch(0.4 0.12 25)",
-      "--color-on-error-container": "oklch(0.92 0.05 25)",
-      "--color-surface": "oklch(0.2 0.015 260)",
-      "--color-on-surface": "oklch(0.93 0.01 260)",
-      "--color-surface-variant": "oklch(0.35 0.02 260)",
-      "--color-on-surface-variant": "oklch(0.8 0.02 260)",
-      "--color-surface-container": "oklch(0.22 0.018 260)",
-      "--color-surface-container-low": "oklch(0.18 0.012 260)",
-      "--color-surface-container-lowest": "oklch(0.15 0.01 260)",
-      "--color-surface-container-high": "oklch(0.25 0.02 260)",
-      "--color-surface-container-highest": "oklch(0.28 0.022 260)",
-      "--color-outline": "oklch(0.55 0.025 260)",
-      "--color-outline-variant": "oklch(0.35 0.02 260)",
-      "--color-inverse-surface": "oklch(0.93 0.01 260)",
-      "--color-inverse-on-surface": "oklch(0.25 0.02 260)",
-      "--color-inverse-primary": "oklch(0.55 0.2 260)",
-      "--color-scrim": "oklch(0 0 0)",
-      "--color-shadow": "oklch(0 0 0)"
-    }
-  });
 }, {
   theme: {
     extend: {

package/dist/components/accordion.css

@@ -8,7 +8,7 @@
   .accordion {
     display: flex;
     flex-direction: column;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     overflow: hidden;
   }
 
@@ -21,13 +21,13 @@
 
   .accordion-item:first-child {
     margin-top: 0;
-    border-top-left-radius: 0.75rem;
-    border-top-right-radius: 0.75rem;
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
   }
 
   .accordion-item:last-child {
-    border-bottom-left-radius: 0.75rem;
-    border-bottom-right-radius: 0.75rem;
+    border-bottom-left-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
   }
 
   /* Accordion Header */
@@ -53,7 +53,7 @@
   .accordion-header:focus-visible {
     outline: none;
     background-color: var(--color-surface-container);
-    box-shadow: inset 0 0 0 2px var(--color-primary);
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .accordion-item.open .accordion-header {
@@ -138,7 +138,7 @@
   /* Separated Variant */
   .accordion-separated .accordion-item {
     margin-top: 0.5rem;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
   }
 
   .accordion-separated .accordion-item:first-child {

package/dist/components/alert.css

@@ -10,7 +10,7 @@
     align-items: flex-start;
     gap: 0.75rem;
     padding: 1rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
     border: 1px solid var(--color-outline);
@@ -60,7 +60,7 @@
     opacity: 0.7;
     background-color: transparent;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
     cursor: pointer;
     transition: opacity 150ms ease-in-out;
     flex-shrink: 0;

package/dist/components/appbar.css

@@ -91,7 +91,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
     flex-shrink: 0;
@@ -154,7 +154,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
   }
@@ -270,7 +270,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
     flex-shrink: 0;
@@ -295,7 +295,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
 
@@ -553,7 +553,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface-container);
     border: none;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
 

package/dist/components/autocomplete.css

@@ -20,7 +20,7 @@
     color: var(--color-on-surface);
     background-color: var(--color-surface);
     border: 1px solid currentColor;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
   }
 
@@ -47,7 +47,7 @@
     margin-top: 0.25rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     box-shadow: var(--shadow-lg);
     overflow-y: auto;
     opacity: 0;
@@ -129,7 +129,7 @@
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
     font-weight: 600;
-    border-radius: 0.125rem;
+    border-radius: var(--radius-xs);
   }
 
   /* Group Header */
@@ -175,7 +175,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
   }
@@ -200,7 +200,7 @@
     min-height: 2.75rem;
     background-color: var(--color-surface);
     border: 1px solid var(--color-outline);
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .autocomplete-tags:focus-within {
@@ -216,7 +216,7 @@
     font-size: 0.75rem;
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .autocomplete-tag-remove {
@@ -229,7 +229,7 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     transition: background-color 150ms ease-in-out;
   }
 

package/dist/components/avatar.css

@@ -12,7 +12,7 @@
     position: relative;
     width: 3rem;
     height: 3rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     overflow: hidden;
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
@@ -70,7 +70,7 @@
 
   /* Shape Variants */
   .avatar-rounded {
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .avatar-square {
@@ -115,8 +115,8 @@
 
   /* Ring */
   .avatar-ring {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   .avatar-ring-primary {
@@ -142,7 +142,7 @@
     height: 25%;
     min-width: 0.5rem;
     min-height: 0.5rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     border: 2px solid var(--color-surface);
   }
 

package/dist/components/badge.css

@@ -14,7 +14,7 @@
     font-weight: 500;
     line-height: 1rem;
     white-space: nowrap;
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     background-color: var(--color-surface-container);
     color: var(--color-on-surface);
   }
@@ -164,7 +164,7 @@
     transform: translateY(-50%);
     width: 0.375rem;
     height: 0.375rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     background-color: currentColor;
   }
 
@@ -173,6 +173,6 @@
     width: 0.5rem;
     height: 0.5rem;
     padding: 0;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 }

package/dist/components/bottom-navigation.css

@@ -17,7 +17,7 @@
     min-height: 5rem;
     padding-bottom: env(safe-area-inset-bottom, 0);
     background-color: var(--color-surface);
-    box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.1);
+    box-shadow: 0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   /* Navigation Item */
@@ -48,8 +48,8 @@
   }
 
   .bottom-nav-item:focus-visible .bottom-nav-indicator {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Active State */
@@ -65,7 +65,7 @@
     justify-content: center;
     width: 4rem;
     height: 2rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-lg);
     transition: background-color 150ms ease-in-out;
   }
 
@@ -111,9 +111,9 @@
     font-size: 0.625rem;
     font-weight: 600;
     line-height: 1rem;
-    color: var(--color-on-error);
+    color: var(--color-error-content);
     background-color: var(--color-error);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     text-align: center;
   }
 
@@ -128,7 +128,7 @@
 
   /* Variants */
   .bottom-nav-elevated {
-    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   .bottom-nav-bordered {

package/dist/components/bottomsheet.css

@@ -9,7 +9,7 @@
     position: fixed;
     inset: 0;
     z-index: 1100;
-    background-color: rgb(0 0 0 / 0.5);
+    background-color: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     opacity: 0;
     visibility: hidden;
     transition: opacity 300ms ease-out, visibility 300ms ease-out;
@@ -31,8 +31,8 @@
     flex-direction: column;
     max-height: 90vh;
     background-color: var(--color-surface);
-    border-radius: 1.75rem 1.75rem 0 0;
-    box-shadow: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
+    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+    box-shadow: 0 -25px 50px -12px color-mix(in srgb, var(--color-shadow) 25%, transparent);
     transform: translateY(100%);
     transition: transform 300ms ease-out;
     padding-bottom: env(safe-area-inset-bottom, 0);
@@ -56,7 +56,7 @@
     width: 2rem;
     height: 0.25rem;
     background-color: var(--color-outline-variant);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
   }
 
   .bottomsheet-handle:active {
@@ -88,7 +88,7 @@
     color: var(--color-on-surface-variant);
     background-color: transparent;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -98,8 +98,8 @@
   }
 
   .bottomsheet-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
   }
 
   /* Bottom Sheet Content */
@@ -203,7 +203,7 @@
     color: var(--color-on-surface);
     background-color: transparent;
     border: none;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
     cursor: pointer;
     transition: background-color 150ms ease-in-out;
   }
@@ -220,7 +220,7 @@
     height: 3rem;
     font-size: 1.5rem;
     background-color: var(--color-surface-container-high);
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     color: var(--color-on-surface-variant);
   }
 
@@ -242,7 +242,7 @@
   /* Persistent (non-modal) */
   .bottomsheet-persistent {
     position: absolute;
-    box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+    box-shadow: 0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent);
   }
 
   /* Expandable Heights */
@@ -273,7 +273,7 @@
     width: 0.25rem;
     height: 1rem;
     background-color: var(--color-outline-variant);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     cursor: pointer;
   }
 
@@ -308,7 +308,7 @@
       width: 24rem;
       max-width: calc(100vw - 3.5rem);
       max-height: 100vh;
-      border-radius: 1rem 0 0 1rem;
+      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
       transform: translateX(100%);
     }
 

package/dist/components/button.css

@@ -25,7 +25,7 @@
     cursor: pointer;
     user-select: none;
     border: 1px solid transparent;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     transition: all 150ms ease-in-out;
     background-color: var(--color-surface-container);
     color: var(--btn-text-color);
@@ -98,7 +98,7 @@
   .btn-outlined {
     --btn-text-color: var(--color-on-surface);
     background-color: transparent;
-    border: 1px solid var(--color-outline);
+    border-color: var(--color-outline);
   }
 
   .btn-outline:hover,
@@ -110,7 +110,7 @@
   .btn-outline.btn-primary,
   .btn-outlined.btn-primary {
     --btn-text-color: var(--color-primary);
-    border-color: var(--color-primary);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-primary:hover,
@@ -122,7 +122,7 @@
   .btn-outline.btn-secondary,
   .btn-outlined.btn-secondary {
     --btn-text-color: var(--color-secondary);
-    border-color: var(--color-secondary);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-secondary:hover,
@@ -134,7 +134,7 @@
   .btn-outline.btn-tertiary,
   .btn-outlined.btn-tertiary {
     --btn-text-color: var(--color-tertiary);
-    border-color: var(--color-tertiary);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-tertiary:hover,
@@ -146,7 +146,7 @@
   .btn-outline.btn-info,
   .btn-outlined.btn-info {
     --btn-text-color: var(--color-info);
-    border-color: var(--color-info);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-info:hover,
@@ -158,7 +158,7 @@
   .btn-outline.btn-success,
   .btn-outlined.btn-success {
     --btn-text-color: var(--color-success);
-    border-color: var(--color-success);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-success:hover,
@@ -170,7 +170,7 @@
   .btn-outline.btn-warning,
   .btn-outlined.btn-warning {
     --btn-text-color: var(--color-warning);
-    border-color: var(--color-warning);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-warning:hover,
@@ -182,7 +182,7 @@
   .btn-outline.btn-error,
   .btn-outlined.btn-error {
     --btn-text-color: var(--color-error);
-    border-color: var(--color-error);
+    border-color: currentColor;
   }
 
   .btn-outline.btn-error:hover,
@@ -420,7 +420,7 @@
     --btn-py: 0.25rem;
     font-size: 0.75rem;
     line-height: 1rem;
-    border-radius: 0.25rem;
+    border-radius: var(--radius-xs);
   }
 
   .btn-sm {
@@ -428,7 +428,7 @@
     --btn-py: 0.375rem;
     font-size: 0.8125rem;
     line-height: 1.125rem;
-    border-radius: 0.375rem;
+    border-radius: var(--radius-xs);
   }
 
   .btn-md {
@@ -436,7 +436,7 @@
     --btn-py: 0.625rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
   }
 
   .btn-lg {
@@ -444,7 +444,7 @@
     --btn-py: 0.875rem;
     font-size: 1rem;
     line-height: 1.5rem;
-    border-radius: 0.625rem;
+    border-radius: var(--radius-sm);
   }
 
   /* Block Button */
@@ -463,13 +463,13 @@
   }
 
   .btn-group .btn:first-child {
-    border-top-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
   }
 
   .btn-group .btn:last-child {
-    border-top-right-radius: 0.5rem;
-    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
   }
 
   .btn-group .btn:not(:first-child) {
@@ -490,7 +490,7 @@
     height: 1rem;
     border: 2px solid var(--btn-text-color);
     border-right-color: transparent;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     animation: btn-spin 0.6s linear infinite;
   }
 
@@ -504,7 +504,7 @@
   .btn-circle {
     --btn-p: 0.625rem;
     --btn-py: 0.625rem;
-    border-radius: 50%;
+    border-radius: var(--radius-full);
     aspect-ratio: 1;
   }