@etus/ui 0.4.0-beta.8 → 0.4.0-beta.9

package/dist/styles.css

@@ -32,12 +32,31 @@
   --accordion-trigger-text-size-sm: 0.75rem;
   --account-switch-content-min-width: 17.5rem;
   --account-switch-name-max-width: 10rem;
+  --alert-dialog-content-bg: oklch(98.51% 0.0000 0);
+  --alert-dialog-content-border: oklch(92.19% 0.0000 0);
+  --alert-dialog-content-gap: 16px;
+  --alert-dialog-content-max-width: 32rem;
+  --alert-dialog-content-padding: 24px;
+  --alert-dialog-content-radius: 12px;
+  --alert-dialog-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --alert-dialog-footer-gap: 8px;
+  --alert-dialog-header-gap: 8px;
+  --alert-dialog-icon-pill-color-default-bg: oklch(97.02% 0.0000 0);
+  --alert-dialog-icon-pill-color-default-fg: oklch(55.55% 0.0000 0);
+  --alert-dialog-icon-pill-color-destructive-bg: oklch(97.05% 0.0129 17.38);
+  --alert-dialog-icon-pill-color-destructive-fg: oklch(50.54% 0.1905 27.52);
+  --alert-dialog-icon-pill-color-warning-bg: oklch(98.73% 0.0262 102.21);
+  --alert-dialog-icon-pill-color-warning-fg: oklch(55.38% 0.1207 66.44);
+  --alert-dialog-icon-pill-icon-size: 16px;
+  --alert-dialog-icon-pill-padding: 8px;
+  --alert-dialog-icon-pill-radius: 999px;
+  --alert-dialog-overlay-bg: oklch(0.00% 0.0000 0 / 60.0%);
   --alert-icon-size: 16px;
   --alert-root-gap: 12px;
   --alert-root-padding-x: 16px;
   --alert-root-padding-y: 12px;
   --alert-root-radius: 0.5rem;
-  --alert-variant-default-bg: oklch(100.00% 0.0000 0);
+  --alert-variant-default-bg: oklch(98.51% 0.0000 0);
   --alert-variant-default-border: oklch(92.19% 0.0000 0);
   --alert-variant-default-fg: oklch(14.48% 0.0000 0);
   --alert-variant-destructive-bg: oklch(97.05% 0.0129 17.38);
@@ -54,7 +73,7 @@
   --alert-variant-warning-fg: oklch(55.38% 0.1207 66.44);
   --asset-manager-grid-columns: minmax(200px, 1fr);
   --asset-manager-grid-gap: 16px;
-  --asset-manager-item-background: oklch(100.00% 0.0000 0);
+  --asset-manager-item-background: oklch(98.51% 0.0000 0);
   --asset-manager-item-border: oklch(92.19% 0.0000 0);
   --asset-manager-item-radius: 0.375rem;
   --asset-manager-preview-background: oklch(97.02% 0.0000 0);
@@ -180,12 +199,16 @@
   --avatar-radius-circle: 9999px;
   --avatar-radius-square: 0.375rem;
   --avatar-size-2xl: 64px;
+  --avatar-size-3xl: 72px;
+  --avatar-size-4xl: 96px;
   --avatar-size-default: 40px;
   --avatar-size-lg: 48px;
   --avatar-size-sm: 32px;
   --avatar-size-xl: 56px;
   --avatar-size-xs: 24px;
   --avatar-text-2xl: 1.5rem;
+  --avatar-text-3xl: 1.75rem;
+  --avatar-text-4xl: 2.25rem;
   --avatar-text-default: 1rem;
   --avatar-text-lg: 1.125rem;
   --avatar-text-sm: 0.875rem;
@@ -217,10 +240,10 @@
   --badge-radius-pill: 9999px;
   --badge-size-lg-h: 32px;
   --badge-size-lg-px: 12px;
-  --badge-size-lg-text: 0.875rem;
+  --badge-size-lg-text: 0.75rem;
   --badge-size-md-h: 28px;
   --badge-size-md-px: 0.625rem;
-  --badge-size-md-text: 0.875rem;
+  --badge-size-md-text: 0.75rem;
   --badge-size-sm-h: 24px;
   --badge-size-sm-px: 8px;
   --badge-size-sm-text: 0.75rem;
@@ -488,7 +511,7 @@
   --card-header-gap: 8px;
   --card-header-padding-bottom: 24px;
   --card-header-padding-x: 24px;
-  --card-root-background: oklch(100.00% 0.0000 0);
+  --card-root-background: oklch(98.51% 0.0000 0);
   --card-root-border-width: 1px;
   --card-root-foreground: oklch(14.48% 0.0000 0);
   --card-root-gap: 24px;
@@ -498,7 +521,7 @@
   --card-root-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --card-root-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --card-title-weight: 600;
-  --card: oklch(100.00% 0.0000 0);
+  --card: oklch(98.51% 0.0000 0);
   --carousel-button-offset: 48px;
   --carousel-button-size: 32px;
   --carousel-item-gap-default: 16px;
@@ -509,7 +532,7 @@
   --chart-3: oklch(62.31% 0.1880 259.81);
   --chart-4: oklch(86.06% 0.1731 91.94);
   --chart-5: oklch(63.68% 0.2078 25.33);
-  --chart-card-bg: oklch(100.00% 0.0000 0);
+  --chart-card-bg: oklch(98.51% 0.0000 0);
   --chart-card-border: oklch(92.19% 0.0000 0);
   --chart-card-chart-height: 8rem;
   --chart-card-empty-state-caption-color: oklch(55.55% 0.0000 0);
@@ -729,7 +752,7 @@
   --command-shortcut-text-size-sm: 10px;
   --comment-system-actions-gap: 8px;
   --comment-system-actions-margin-top: 8px;
-  --comment-system-item-background: oklch(100.00% 0.0000 0);
+  --comment-system-item-background: oklch(98.51% 0.0000 0);
   --comment-system-item-border: oklch(92.19% 0.0000 0);
   --comment-system-item-gap: 12px;
   --comment-system-item-padding: 16px;
@@ -837,6 +860,16 @@
   --destructive-subtle-foreground: oklch(50.54% 0.1905 27.52);
   --destructive-subtle: oklch(97.05% 0.0129 17.38);
   --destructive: oklch(63.68% 0.2078 25.33);
+  --dialog-content-bg: oklch(98.51% 0.0000 0);
+  --dialog-content-border: oklch(92.19% 0.0000 0);
+  --dialog-content-gap: 16px;
+  --dialog-content-max-width: 32rem;
+  --dialog-content-padding: 24px;
+  --dialog-content-radius: 12px;
+  --dialog-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --dialog-footer-gap: 8px;
+  --dialog-header-gap: 8px;
+  --dialog-overlay-bg: oklch(0.00% 0.0000 0 / 60.0%);
   --disabled-background: oklch(92.19% 0.0000 0);
   --disabled-border: oklch(86.99% 0.0000 0);
   --disabled-foreground: oklch(71.55% 0.0000 0);
@@ -1364,7 +1397,7 @@
   --kanban-board-gap: 16px;
   --kanban-board-height: 100%;
   --kanban-board-padding: 16px;
-  --kanban-card-background: oklch(100.00% 0.0000 0);
+  --kanban-card-background: oklch(98.51% 0.0000 0);
   --kanban-card-foreground: oklch(14.48% 0.0000 0);
   --kanban-card-gap: 8px;
   --kanban-card-padding: 12px;
@@ -1486,7 +1519,7 @@
   --lightbox-thumbnail-opacity-inactive: 0.6;
   --lightbox-thumbnail-ring-color: oklch(100.00% 0.0000 0);
   --lightbox-thumbnail-size: 64px;
-  --link-color-default: oklch(81.75% 0.1821 159.79);
+  --link-color-default: oklch(56.08% 0.1221 160.56);
   --link-color-muted: oklch(55.55% 0.0000 0);
   --link-color-nav-hover: oklch(81.75% 0.1821 159.79);
   --link-color-nav: oklch(14.48% 0.0000 0);
@@ -1560,7 +1593,7 @@
   --menubar-trigger-padding-y: 4px;
   --menubar-trigger-radius: 4px;
   --menubar-trigger-text-size: 0.875rem;
-  --modal-content-bg: oklch(100.00% 0.0000 0);
+  --modal-content-bg: oklch(98.51% 0.0000 0);
   --modal-content-border: oklch(92.19% 0.0000 0);
   --modal-content-gap: 16px;
   --modal-content-max-width: 32rem;
@@ -1868,6 +1901,7 @@
   --rating-focus-ring-color: oklch(81.75% 0.1821 159.79);
   --rating-icon-color-empty: oklch(55.55% 0.0000 0);
   --rating-icon-color-filled: oklch(86.06% 0.1731 91.94);
+  --rating-icon-color-half: oklch(86.06% 0.1731 91.94);
   --rating-icon-size-lg: 24px;
   --rating-icon-size-md: 20px;
   --rating-icon-size-sm: 16px;
@@ -2621,7 +2655,7 @@
   --toolbar-button-height: 32px;
   --toolbar-button-padding-x: 12px;
   --toolbar-button-radius: 8px;
-  --toolbar-root-background: oklch(100.00% 0.0000 0);
+  --toolbar-root-background: oklch(98.51% 0.0000 0);
   --toolbar-root-border: oklch(92.19% 0.0000 0);
   --toolbar-root-gap: 8px;
   --toolbar-root-padding-x: 8px;
@@ -2925,7 +2959,16 @@
   --accent-foreground: oklch(95.21% 0.0467 171.12);
   --accent: oklch(26.88% 0.0527 163.85);
   --accordion-trigger-ring-primary: oklch(84.11% 0.1609 163.31);
-  --alert-variant-default-bg: oklch(14.48% 0.0000 0);
+  --alert-dialog-content-bg: oklch(26.86% 0.0000 0);
+  --alert-dialog-content-border: oklch(37.15% 0.0000 0);
+  --alert-dialog-icon-pill-color-default-bg: oklch(26.86% 0.0000 0);
+  --alert-dialog-icon-pill-color-default-fg: oklch(71.55% 0.0000 0);
+  --alert-dialog-icon-pill-color-destructive-bg: oklch(25.75% 0.0886 26.04);
+  --alert-dialog-icon-pill-color-destructive-fg: oklch(80.77% 0.1035 19.57);
+  --alert-dialog-icon-pill-color-warning-bg: oklch(28.57% 0.0639 53.81);
+  --alert-dialog-icon-pill-color-warning-fg: oklch(90.52% 0.1657 98.11);
+  --alert-dialog-overlay-bg: oklch(0.00% 0.0000 0 / 80.0%);
+  --alert-variant-default-bg: oklch(26.86% 0.0000 0);
   --alert-variant-default-border: oklch(37.15% 0.0000 0);
   --alert-variant-default-fg: oklch(98.51% 0.0000 0);
   --alert-variant-destructive-bg: oklch(25.75% 0.0886 26.04);
@@ -3162,6 +3205,9 @@
   --destructive-subtle-foreground: oklch(80.77% 0.1035 19.57);
   --destructive-subtle: oklch(25.75% 0.0886 26.04);
   --destructive: oklch(63.68% 0.2078 25.33);
+  --dialog-content-bg: oklch(26.86% 0.0000 0);
+  --dialog-content-border: oklch(37.15% 0.0000 0);
+  --dialog-overlay-bg: oklch(0.00% 0.0000 0 / 80.0%);
   --disabled-background: oklch(26.86% 0.0000 0);
   --disabled-border: oklch(37.15% 0.0000 0);
   --disabled-foreground: oklch(43.86% 0.0000 0);
@@ -3328,7 +3374,7 @@
   --menu-item-fg-default: oklch(98.51% 0.0000 0);
   --menu-item-fg-destructive: oklch(63.68% 0.2078 25.33);
   --menu-item-fg-hover: oklch(95.21% 0.0467 171.12);
-  --modal-content-bg: oklch(14.48% 0.0000 0);
+  --modal-content-bg: oklch(26.86% 0.0000 0);
   --modal-content-border: oklch(37.15% 0.0000 0);
   --modal-icon-pill-color-default-bg: oklch(26.86% 0.0000 0);
   --modal-icon-pill-color-default-fg: oklch(71.55% 0.0000 0);
@@ -3433,6 +3479,7 @@
   --rail-border: oklch(37.15% 0.0000 0);
   --rating-focus-ring-color: oklch(84.11% 0.1609 163.31);
   --rating-icon-color-filled: oklch(79.52% 0.1617 86.05);
+  --rating-icon-color-half: oklch(79.52% 0.1617 86.05);
   --report-builder-accent-bg-subtle: oklch(33.49% 0.0383 251.89);
   --report-builder-accent-bg: oklch(34.67% 0.0731 256.69);
   --report-builder-accent-border: oklch(46.92% 0.0851 258.47);
@@ -3673,7 +3720,16 @@
   --accent-foreground: oklch(26.88% 0.0527 163.85);
   --accent: oklch(95.21% 0.0467 171.12);
   --accordion-trigger-ring-primary: oklch(81.75% 0.1821 159.79);
-  --alert-variant-default-bg: oklch(100.00% 0.0000 0);
+  --alert-dialog-content-bg: oklch(98.51% 0.0000 0);
+  --alert-dialog-content-border: oklch(92.19% 0.0000 0);
+  --alert-dialog-icon-pill-color-default-bg: oklch(97.02% 0.0000 0);
+  --alert-dialog-icon-pill-color-default-fg: oklch(55.55% 0.0000 0);
+  --alert-dialog-icon-pill-color-destructive-bg: oklch(97.05% 0.0129 17.38);
+  --alert-dialog-icon-pill-color-destructive-fg: oklch(50.54% 0.1905 27.52);
+  --alert-dialog-icon-pill-color-warning-bg: oklch(98.73% 0.0262 102.21);
+  --alert-dialog-icon-pill-color-warning-fg: oklch(55.38% 0.1207 66.44);
+  --alert-dialog-overlay-bg: oklch(0.00% 0.0000 0 / 60.0%);
+  --alert-variant-default-bg: oklch(98.51% 0.0000 0);
   --alert-variant-default-border: oklch(92.19% 0.0000 0);
   --alert-variant-default-fg: oklch(14.48% 0.0000 0);
   --alert-variant-destructive-bg: oklch(97.05% 0.0129 17.38);
@@ -3688,7 +3744,7 @@
   --alert-variant-warning-bg: oklch(98.73% 0.0262 102.21);
   --alert-variant-warning-border: oklch(94.51% 0.1243 101.54);
   --alert-variant-warning-fg: oklch(55.38% 0.1207 66.44);
-  --asset-manager-item-background: oklch(100.00% 0.0000 0);
+  --asset-manager-item-background: oklch(98.51% 0.0000 0);
   --asset-manager-item-border: oklch(92.19% 0.0000 0);
   --asset-manager-preview-background: oklch(97.02% 0.0000 0);
   --asset-palette-status-approved-color: oklch(81.75% 0.1821 159.79);
@@ -3806,15 +3862,15 @@
   --button-tertiary-gray-fg-hover: oklch(14.48% 0.0000 0);
   --card-description-color: oklch(55.55% 0.0000 0);
   --card-foreground: oklch(14.48% 0.0000 0);
-  --card-root-background: oklch(100.00% 0.0000 0);
+  --card-root-background: oklch(98.51% 0.0000 0);
   --card-root-foreground: oklch(14.48% 0.0000 0);
-  --card: oklch(100.00% 0.0000 0);
+  --card: oklch(98.51% 0.0000 0);
   --chart-1: oklch(81.75% 0.1821 159.79);
   --chart-2: oklch(65.95% 0.2608 320.32);
   --chart-3: oklch(62.31% 0.1880 259.81);
   --chart-4: oklch(86.06% 0.1731 91.94);
   --chart-5: oklch(63.68% 0.2078 25.33);
-  --chart-card-bg: oklch(100.00% 0.0000 0);
+  --chart-card-bg: oklch(98.51% 0.0000 0);
   --chart-card-border: oklch(92.19% 0.0000 0);
   --chart-card-empty-state-caption-color: oklch(55.55% 0.0000 0);
   --chart-card-empty-state-title-color: oklch(20.46% 0.0000 0);
@@ -3870,7 +3926,7 @@
   --combobox-trigger-disabled-border: oklch(97.02% 0.0000 0);
   --combobox-trigger-disabled-fg: oklch(55.55% 0.0000 0);
   --combobox-trigger-ring-primary: oklch(81.75% 0.1821 159.79);
-  --comment-system-item-background: oklch(100.00% 0.0000 0);
+  --comment-system-item-background: oklch(98.51% 0.0000 0);
   --comment-system-item-border: oklch(92.19% 0.0000 0);
   --core-background-background: oklch(100.00% 0.0000 0);
   --core-background-card-foreground: oklch(14.48% 0.0000 0);
@@ -3910,6 +3966,9 @@
   --destructive-subtle-foreground: oklch(50.54% 0.1905 27.52);
   --destructive-subtle: oklch(97.05% 0.0129 17.38);
   --destructive: oklch(63.68% 0.2078 25.33);
+  --dialog-content-bg: oklch(98.51% 0.0000 0);
+  --dialog-content-border: oklch(92.19% 0.0000 0);
+  --dialog-overlay-bg: oklch(0.00% 0.0000 0 / 60.0%);
   --disabled-background: oklch(92.19% 0.0000 0);
   --disabled-border: oklch(86.99% 0.0000 0);
   --disabled-foreground: oklch(71.55% 0.0000 0);
@@ -4035,7 +4094,7 @@
   --input-otp-slot-border: oklch(92.19% 0.0000 0);
   --input: oklch(92.19% 0.0000 0);
   --inversed-foreground: oklch(98.51% 0.0000 0);
-  --kanban-card-background: oklch(100.00% 0.0000 0);
+  --kanban-card-background: oklch(98.51% 0.0000 0);
   --kanban-card-foreground: oklch(14.48% 0.0000 0);
   --kanban-column-background: oklch(97.02% 0.0000 0);
   --kbd-variant-default-background: oklch(97.02% 0.0000 0);
@@ -4058,7 +4117,7 @@
   --lightbox-button-color: oklch(100.00% 0.0000 0);
   --lightbox-header-text-color: oklch(100.00% 0.0000 0);
   --lightbox-thumbnail-ring-color: oklch(100.00% 0.0000 0);
-  --link-color-default: oklch(81.75% 0.1821 159.79);
+  --link-color-default: oklch(56.08% 0.1221 160.56);
   --link-color-muted: oklch(55.55% 0.0000 0);
   --link-color-nav-hover: oklch(81.75% 0.1821 159.79);
   --link-color-nav: oklch(14.48% 0.0000 0);
@@ -4076,7 +4135,7 @@
   --menu-item-fg-default: oklch(14.48% 0.0000 0);
   --menu-item-fg-destructive: oklch(63.68% 0.2078 25.33);
   --menu-item-fg-hover: oklch(26.88% 0.0527 163.85);
-  --modal-content-bg: oklch(100.00% 0.0000 0);
+  --modal-content-bg: oklch(98.51% 0.0000 0);
   --modal-content-border: oklch(92.19% 0.0000 0);
   --modal-icon-pill-color-default-bg: oklch(97.02% 0.0000 0);
   --modal-icon-pill-color-default-fg: oklch(55.55% 0.0000 0);
@@ -4181,6 +4240,7 @@
   --rail-border: oklch(92.19% 0.0000 0);
   --rating-focus-ring-color: oklch(81.75% 0.1821 159.79);
   --rating-icon-color-filled: oklch(86.06% 0.1731 91.94);
+  --rating-icon-color-half: oklch(86.06% 0.1731 91.94);
   --report-builder-accent-bg-subtle: oklch(97.14% 0.0108 256.69);
   --report-builder-accent-bg: oklch(95.32% 0.0207 261.77);
   --report-builder-accent-border: oklch(91.09% 0.0388 257.92);
@@ -4402,7 +4462,7 @@
   --toolbar-button-background-hover: oklch(97.02% 0.0000 0);
   --toolbar-button-foreground-muted: oklch(55.55% 0.0000 0);
   --toolbar-button-foreground: oklch(14.48% 0.0000 0);
-  --toolbar-root-background: oklch(100.00% 0.0000 0);
+  --toolbar-root-background: oklch(98.51% 0.0000 0);
   --toolbar-root-border: oklch(92.19% 0.0000 0);
   --toolbar-separator-color: oklch(92.19% 0.0000 0);
   --tooltip-content-background: oklch(14.48% 0.0000 0);
@@ -4429,6 +4489,15 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-accordion-trigger-ring-primary: var(--accordion-trigger-ring-primary);
+  --color-alert-dialog-content-bg: var(--alert-dialog-content-bg);
+  --color-alert-dialog-content-border: var(--alert-dialog-content-border);
+  --color-alert-dialog-icon-pill-color-default-bg: var(--alert-dialog-icon-pill-color-default-bg);
+  --color-alert-dialog-icon-pill-color-default-fg: var(--alert-dialog-icon-pill-color-default-fg);
+  --color-alert-dialog-icon-pill-color-destructive-bg: var(--alert-dialog-icon-pill-color-destructive-bg);
+  --color-alert-dialog-icon-pill-color-destructive-fg: var(--alert-dialog-icon-pill-color-destructive-fg);
+  --color-alert-dialog-icon-pill-color-warning-bg: var(--alert-dialog-icon-pill-color-warning-bg);
+  --color-alert-dialog-icon-pill-color-warning-fg: var(--alert-dialog-icon-pill-color-warning-fg);
+  --color-alert-dialog-overlay-bg: var(--alert-dialog-overlay-bg);
   --color-alert-variant-default-bg: var(--alert-variant-default-bg);
   --color-alert-variant-default-border: var(--alert-variant-default-border);
   --color-alert-variant-default-fg: var(--alert-variant-default-fg);
@@ -4767,6 +4836,9 @@
   --color-destructive-subtle-foreground: var(--destructive-subtle-foreground);
   --color-destructive-subtle: var(--destructive-subtle);
   --color-destructive: var(--destructive);
+  --color-dialog-content-bg: var(--dialog-content-bg);
+  --color-dialog-content-border: var(--dialog-content-border);
+  --color-dialog-overlay-bg: var(--dialog-overlay-bg);
   --color-disabled-background: var(--disabled-background);
   --color-disabled-border: var(--disabled-border);
   --color-disabled-foreground: var(--disabled-foreground);
@@ -5065,6 +5137,7 @@
   --color-rating-focus-ring-color: var(--rating-focus-ring-color);
   --color-rating-icon-color-empty: var(--rating-icon-color-empty);
   --color-rating-icon-color-filled: var(--rating-icon-color-filled);
+  --color-rating-icon-color-half: var(--rating-icon-color-half);
   --color-report-builder-accent-bg-subtle: var(--report-builder-accent-bg-subtle);
   --color-report-builder-accent-bg: var(--report-builder-accent-bg);
   --color-report-builder-accent-border: var(--report-builder-accent-border);
@@ -5385,7 +5458,7 @@
   --shadow-default: var(--button-shadow-default);
   --shadow-lg: var(--shadow-lg);
   --shadow-md: var(--shadow-md);
-  --shadow-shadow: var(--autocomplete-content-shadow);
+  --shadow-shadow: var(--alert-dialog-content-shadow);
   --shadow-sm: var(--shadow-sm);
   --shadow-xl: var(--shadow-xl);
   --shadow-xs: var(--shadow-xs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etus/ui",
-  "version": "0.4.0-beta.8",
+  "version": "0.4.0-beta.9",
   "description": "Seven Design System - UI components for ETUS applications",
   "license": "MIT",
   "repository": {
@@ -113,7 +113,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "vaul": "^1.1.2",
-    "@etus/tokens": "^0.4.0-beta.6"
+    "@etus/tokens": "^0.4.0-beta.7"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.2.15",