@nanahoshi/mona-ui 0.1.1 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-button.mjs

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { signal, Injectable, inject, ApplicationRef, DestroyRef, ElementRef, Injector, Renderer2, computed, input, model, effect, untracked, afterNextRender, createComponent, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { Subject, fromEvent, takeWhile } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class ButtonService {
     constructor() {
@@ -27,16 +27,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const buttonVariants = cva(`
+const buttonThemeVariants = cva(`
         inline-flex items-center justify-center gap-2
-        text-sm font-medium cursor-pointer whitespace-nowrap
-        outline-none shadow-xs
-        focus-visible:outline-none focus-visible:shadow
+        cursor-pointer whitespace-nowrap
+        text-sm font-medium
+        outline-none
         transition-colors duration-100 ease-in-out
     `, {
     variants: {
         disabled: {
-            true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
+            true: `
+                    pointer-events-none cursor-not-allowed select-none
+                    disabled:border-disabled-border disabled:bg-disabled-background disabled:text-disabled-foreground
+                    disabled:shadow-none
+                `,
             false: ""
         },
         iconOnly: {
@@ -49,67 +53,69 @@ const buttonVariants = cva(`
         },
         look: {
             default: `
-                    bg-background text-foreground
+                    ${themeControlSurfaceClasses} text-foreground
                     border border-input-border
                     hover:bg-hover active:bg-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    focus-visible:border-focus-indicator focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             primary: `
                     bg-primary text-primary-foreground
                     hover:bg-primary-hover active:bg-primary-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             success: `
                     bg-success text-success-foreground
                     hover:bg-success-hover
                     active:bg-success-active
-                    focus-visible:ring-2 focus-visible:ring-success/40
+                    focus-visible:ring-2 focus-visible:ring-success/35
                 `,
             error: `
                     bg-error text-error-foreground
                     hover:bg-error-hover
                     active:bg-error-active
-                    focus-visible:ring-2 focus-visible:ring-error/40
+                    focus-visible:ring-2 focus-visible:ring-error/35
                 `,
             warning: `
                     bg-warning text-warning-foreground
                     hover:bg-warning-hover
                     active:bg-warning-active
-                    focus-visible:ring-2 focus-visible:ring-warning/40
+                    focus-visible:ring-2 focus-visible:ring-warning/35
                 `,
             info: `
                     bg-info text-info-foreground
                     hover:bg-info-hover
                     active:bg-info-active
-                    focus-visible:ring-2 focus-visible:ring-info/40
+                    focus-visible:ring-2 focus-visible:ring-info/35
                 `,
             outline: `
-                    border border-border
-                    hover:bg-accent
-                    active:bg-accent-dark
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    ${themeControlSurfaceClasses} text-foreground
+                    border border-input-border
+                    hover:bg-hover active:bg-active
+                    focus-visible:border-focus-indicator focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             secondary: `
                     bg-secondary text-secondary-foreground
                     hover:bg-secondary-hover
                     active:bg-secondary-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             ghost: `
+                    bg-transparent text-foreground
                     shadow-none
-                    hover:bg-secondary-hover
-                    active:bg-secondary-active
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    hover:bg-hover active:bg-active
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             link: `
+                    bg-transparent text-foreground
                     shadow-none
                     underline-offset-4 hover:underline
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `,
             clear: `
-                    bg-transparent border-0 shadow-none
+                    bg-transparent
+                    border-0 shadow-none
                     hover:bg-transparent active:bg-transparent
-                    focus-visible:ring-2 focus-visible:ring-primary/40
+                    focus-visible:ring-2 focus-visible:ring-focus-indicator/35
                 `
         },
         rounded: {
@@ -120,12 +126,12 @@ const buttonVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "px-6 h-10",
-            medium: "px-4 h-9",
-            small: "px-3 text-xs h-8"
+            large: "h-10 px-6",
+            medium: "h-9 px-4",
+            small: "h-8 px-3 text-xs"
         },
         selected: {
-            true: "bg-accent text-accent-foreground hover:bg-accent/90 hover:text-accent-foreground"
+            true: ""
         }
     },
     compoundVariants: [
@@ -133,9 +139,9 @@ const buttonVariants = cva(`
             look: "default",
             selected: true,
             class: `
-                    bg-selected text-foreground
-                     hover:bg-selected/95 hover:text-foreground
-                    active:bg-selected/100 active:text-foreground
+                    bg-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
                 `
         },
         {
@@ -143,8 +149,8 @@ const buttonVariants = cva(`
             selected: true,
             class: `
                     bg-primary-selected text-primary-foreground
-                    hover:bg-primary-selected/95 hover:text-primary-foreground
-                    active:bg-primary-selected/100 active:text-primary-foreground
+                    hover:bg-primary-selected hover:text-primary-foreground
+                    active:bg-primary-active active:text-primary-foreground
                 `
         },
         {
@@ -152,8 +158,8 @@ const buttonVariants = cva(`
             selected: true,
             class: `
                     bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                    hover:bg-secondary-selected hover:text-secondary-foreground
+                    active:bg-secondary-active active:text-secondary-foreground
                 `
         },
         {
@@ -161,8 +167,8 @@ const buttonVariants = cva(`
             selected: true,
             class: `
                     bg-success-selected text-success-foreground
-                    hover:bg-success-selected/95 hover:text-success-foreground
-                    active:bg-success-selected/100 active:text-success-foreground
+                    hover:bg-success-selected hover:text-success-foreground
+                    active:bg-success-active active:text-success-foreground
                 `
         },
         {
@@ -170,8 +176,8 @@ const buttonVariants = cva(`
             selected: true,
             class: `
                     bg-error-selected text-error-foreground
-                    hover:bg-error-selected/95 hover:text-error-foreground
-                    active:bg-error-selected/100 active:text-error-foreground
+                    hover:bg-error-selected hover:text-error-foreground
+                    active:bg-error-active active:text-error-foreground
                 `
         },
         {
@@ -179,8 +185,8 @@ const buttonVariants = cva(`
             selected: true,
             class: `
                     bg-warning-selected text-warning-foreground
-                    hover:bg-warning-selected/95 hover:text-warning-foreground
-                    active:bg-warning-selected/100 active:text-warning-foreground
+                    hover:bg-warning-selected hover:text-warning-foreground
+                    active:bg-warning-active active:text-warning-foreground
                 `
         },
         {
@@ -188,35 +194,35 @@ const buttonVariants = cva(`
             selected: true,
             class: `
                     bg-info-selected text-info-foreground
-                    hover:bg-info-selected/95 hover:text-info-foreground
-                    active:bg-info-selected/100 active:text-info-foreground
+                    hover:bg-info-selected hover:text-info-foreground
+                    active:bg-info-active active:text-info-foreground
                 `
         },
         {
             look: "outline",
             selected: true,
             class: `
-                    bg-primary-selected text-primary-foreground
-                    hover:bg-primary-selected/95 hover:text-primary-foreground
-                    active:bg-primary-selected/100 active:text-primary-foreground
+                    bg-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
                 `
         },
         {
             look: "ghost",
             selected: true,
             class: `
-                    bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                    bg-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
                 `
         },
         {
             look: "link",
             selected: true,
             class: `
-                    bg-secondary-selected text-secondary-foreground
-                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
-                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                    bg-(--color-selected) text-(--color-selected-foreground)
+                    hover:bg-(--color-selected-hover) hover:text-(--color-selected-hover-foreground)
+                    active:bg-(--color-selected-active) active:text-(--color-selected-active-foreground)
                 `
         },
         {
@@ -227,23 +233,28 @@ const buttonVariants = cva(`
                     hover:bg-transparent active:bg-transparent
                 `
         },
+        {
+            disabled: true,
+            look: "ghost",
+            class: "disabled:bg-transparent disabled:text-disabled-foreground"
+        },
         {
             iconOnly: true,
             loading: false,
             size: "small",
-            class: "w-8 h-8 p-0"
+            class: "h-8 w-8 p-0"
         },
         {
             iconOnly: true,
             loading: false,
             size: "medium",
-            class: "w-9 h-9 p-0"
+            class: "h-9 w-9 p-0"
         },
         {
             iconOnly: true,
             loading: false,
             size: "large",
-            class: "w-10 h-10 p-0"
+            class: "h-10 w-10 p-0"
         }
     ],
     defaultVariants: {
@@ -253,15 +264,6 @@ const buttonVariants = cva(`
     }
 });
 
-const buttonThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return buttonVariants;
-        default:
-            return buttonVariants;
-    }
-};
-
 class ButtonDirective {
     #appRef;
     #buttonService;
@@ -269,7 +271,6 @@ class ButtonDirective {
     #hostElementRef;
     #injector;
     #renderer;
-    #themeService;
     #loaderComponentRef;
     #toggleSubscription;
     constructor() {
@@ -279,7 +280,6 @@ class ButtonDirective {
         this.#hostElementRef = inject(ElementRef);
         this.#injector = inject(Injector);
         this.#renderer = inject(Renderer2);
-        this.#themeService = inject(ThemeService);
         this.#loaderComponentRef = null;
         this.#toggleSubscription = null;
         this.displaysPressedState = computed(() => this.isInButtonGroup() || !!this.toggleable(), /* @ts-ignore */
@@ -305,8 +305,7 @@ class ButtonDirective {
             const size = this.effectiveSize();
             const selected = this.selected();
             const userClass = this.userClass();
-            const theme = this.#themeService.theme();
-            const variants = buttonThemeVariants(theme);
+            const variants = buttonThemeVariants;
             const variantClasses = variants({ disabled, iconOnly, loading, look, rounded, selected, size });
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */