@hemia/lume-registry 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hemia/lume-registry",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "files": ["registry"],
   "publishConfig": {

package/registry/vue/alert/alert.vue

@@ -4,15 +4,15 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-lume-foreground",
   {
     variants: {
       variant: {
-        default: "bg-muted/50 text-foreground border-border",
+        default: "bg-lume-muted/50 text-lume-foreground border-lume-border",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10 dark:bg-destructive/20",
+          "border-lume-destructive/50 text-lume-destructive dark:border-lume-destructive [&>svg]:text-lume-destructive bg-lume-destructive/10 dark:bg-lume-destructive/20",
         tonal:
-          "border-transparent bg-destructive/10 text-destructive dark:bg-destructive/30 dark:text-destructive-200",
+          "border-transparent bg-lume-destructive/10 text-lume-destructive dark:bg-lume-destructive/30 dark:text-lume-destructive-200",
         success:
           "border-transparent bg-emerald-500/10 text-emerald-700 dark:text-emerald-200 dark:bg-emerald-500/30",
         warning:

package/registry/vue/alertdialog/alertdialog-content.vue

@@ -65,7 +65,7 @@ const isCentered = computed(() => props.size === 'sm')
     >
       <div
         v-if="isOpen"
-        class="fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-0 border bg-background shadow-lg duration-200 sm:rounded-lg"
+        class="fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-0 border bg-lume-background shadow-lg duration-200 sm:rounded-lg"
         :class="cn(sizeClasses, isCentered && 'text-center', props.class)"
       >
         <slot />

package/registry/vue/alertdialog/alertdialog-footer.vue

@@ -24,7 +24,7 @@ const isSm = computed(() => size === 'sm')
       isSm
         ? 'flex-col-reverse'
         : 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      'bg-muted/50 rounded-b-lg px-6 py-4 dark:bg-muted/30',
+      'bg-lume-muted/50 rounded-b-lg px-6 py-4 dark:bg-lume-muted/30',
       isSm && 'grid grid-cols-2 gap-2',
       props.class
     )"

package/registry/vue/badge/badge.vue

@@ -3,19 +3,19 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-lume-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+          "border-transparent bg-lume-primary text-lume-primary-foreground shadow hover:bg-lume-primary/80",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-lume-secondary text-lume-secondary-foreground hover:bg-lume-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-        ghost: "border-transparent hover:bg-accent hover:text-accent-foreground",
-        link: "border-transparent text-primary underline-offset-4 hover:underline",
+          "border-transparent bg-lume-destructive text-lume-destructive-foreground shadow hover:bg-lume-destructive/80",
+        outline: "text-lume-foreground",
+        ghost: "border-transparent hover:bg-lume-accent hover:text-lume-accent-foreground",
+        link: "border-transparent text-lume-primary underline-offset-4 hover:underline",
       },
     },
     defaultVariants: {

package/registry/vue/button/button.vue

@@ -3,25 +3,25 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-[calc(var(--radius)*2.6)] border border-transparent bg-clip-padding text-sm font-medium transition-all outline-none select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-[calc(var(--lume-radius)*2.6)] border border-transparent bg-clip-padding text-sm font-medium transition-all outline-none select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lume-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-lume-primary text-lume-primary-foreground hover:bg-lume-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-lume-destructive text-lume-destructive-foreground hover:bg-lume-destructive/90",
         outline:
-          "border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border-lume-input bg-lume-background hover:bg-lume-accent hover:text-lume-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-lume-secondary text-lume-secondary-foreground hover:bg-lume-secondary/80",
+        ghost: "hover:bg-lume-accent hover:text-lume-accent-foreground",
+        link: "text-lume-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2",
-        xs: "h-7 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md px-3",
-        lg: "h-10 rounded-md px-8",
+        xs: "h-7 rounded-[var(--lume-radius-sm)] px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-[calc(var(--lume-radius)*1.5)] px-3",
+        lg: "h-10 rounded-[calc(var(--lume-radius)*2)] px-8",
         icon: "size-9",
         "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8",

package/registry/vue/card/card-footer.vue

@@ -16,7 +16,7 @@ const props = defineProps<{
     isSm
       ? 'flex-col-reverse w-[calc(100%+1rem)] -mx-2 -mb-2 px-2'
       : 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 -mx-6 -mb-6 px-6',
-    'bg-muted/50 rounded-b-xl dark:bg-muted/30 py-3',
+    'bg-lume-muted/50 rounded-b-xl dark:bg-lume-muted/30 py-3',
     props.class
   )">
     <slot />

package/registry/vue/field/field-group.vue

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority"
 import { cn } from "@hemia/lume-vue"
 
 const fieldGroupVariants = cva(
-  "flex flex-wrap items-center gap-2 has-[input:focus]:rounded-lg has-[input:focus]:border-ring has-[input:focus]:ring-3 has-[input:focus]:ring-ring/50"
+  "flex flex-wrap items-center gap-2 has-[input:focus]:rounded-lg has-[input:focus]:border-lume-ring has-[input:focus]:ring-3 has-[input:focus]:ring-lume-ring/50"
 )
 
 const props = defineProps<{

package/registry/vue/textfield/textfield.vue

@@ -4,12 +4,12 @@ import { cn } from "@hemia/lume-vue"
 import { Field, FieldLabel, FieldDescription, FieldGroup } from "../field/index"
 
 const textfieldVariants = cva(
-  "flex h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+  "flex h-9 w-full min-w-0 rounded-lg border border-lume-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-lume-foreground placeholder:text-lume-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lume-input/50 disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-lume-ring focus-visible:ring-offset-0 aria-invalid:border-lume-destructive aria-invalid:ring-3 aria-invalid:ring-lume-destructive/20 md:text-sm dark:bg-lume-input/30 dark:disabled:bg-lume-input/80 dark:aria-invalid:border-lume-destructive/50 dark:aria-invalid:ring-lume-destructive/40",
   {
     variants: {
       variant: {
         default: "",
-        error: "bg-background border-destructive aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        error: "bg-lume-background border-lume-destructive aria-invalid:border-lume-destructive aria-invalid:ring-lume-destructive/20 dark:aria-invalid:border-lume-destructive/50 dark:aria-invalid:ring-lume-destructive/40",
       },
       size: {
         default: "",
@@ -25,7 +25,7 @@ const textfieldVariants = cva(
 )
 
 const textfieldIconVariants = cva(
-  "text-muted-foreground flex shrink-0 items-center",
+  "text-lume-muted-foreground flex shrink-0 items-center",
   {
     variants: {
       size: {
@@ -96,21 +96,21 @@ const getInputPaddingClass = () => {
       <component
         v-if="prependIcon"
         :is="prependIcon"
-        class="text-muted-foreground flex shrink-0 items-center"
+        class="text-lume-muted-foreground flex shrink-0 items-center"
         :class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
       />
       <!-- Textfield inner container -->
       <div
         :class="cn(
           textfieldVariants({ variant: error ? 'error' : variant, size }),
-          'flex flex-1 items-center focus-within:rounded-lg focus-within:ring-2 focus-within:ring-ring/50 dark:focus-within:[--ring:217.2_32.6%_50%] focus-within:[--ring:210_5%_80%]'
+          'flex flex-1 items-center focus-within:rounded-lg focus-within:ring-2 focus-within:ring-lume-ring/50 dark:focus-within:[--ring:217.2_32.6%_50%] focus-within:[--ring:210_5%_80%]'
         )"
       >
         <!-- Prepend-inner icon (inside, at start) -->
         <component
           v-if="prependInnerIcon"
           :is="prependInnerIcon"
-          class="text-muted-foreground flex shrink-0 items-center"
+          class="text-lume-muted-foreground flex shrink-0 items-center"
           :class="[
             iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4',
             'me-1.5'
@@ -124,7 +124,7 @@ const getInputPaddingClass = () => {
           :disabled="disabled"
           :aria-invalid="!!error"
           :class="cn(
-            'flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 w-full min-w-0',
+            'flex-1 bg-transparent outline-none placeholder:text-lume-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 w-full min-w-0',
             getInputPaddingClass()
           )"
           :style="{ '--tf-padding-x': '0.625rem' }"
@@ -134,7 +134,7 @@ const getInputPaddingClass = () => {
         <component
           v-if="appendInnerIcon"
           :is="appendInnerIcon"
-          class="text-muted-foreground flex shrink-0 items-center"
+          class="text-lume-muted-foreground flex shrink-0 items-center"
           :class="[
             iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4',
             'ms-1.5'
@@ -145,7 +145,7 @@ const getInputPaddingClass = () => {
       <component
         v-if="appendIcon"
         :is="appendIcon"
-        class="text-muted-foreground flex shrink-0 items-center"
+        class="text-lume-muted-foreground flex shrink-0 items-center"
         :class="iconSize === 'sm' ? 'size-3.5' : iconSize === 'lg' ? 'size-5' : 'size-4'"
       />
     </FieldGroup>