@etus/tokens 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/tokens.css

@@ -17,7 +17,7 @@
   --accordion-item-border-width: 1px;
   --accordion-item-padding-x: 16px;
   --accordion-item-radius: 0.5rem;
-  --accordion-root-gap: 8px;
+  --accordion-root-gap: 16px;
   --accordion-trigger-gap: 16px;
   --accordion-trigger-padding-y-lg: 24px;
   --accordion-trigger-padding-y-md: 16px;
@@ -506,6 +506,33 @@
   --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-border: oklch(92.19% 0.0000 0);
+  --chart-card-chart-height: 8rem;
+  --chart-card-empty-state-caption-color: oklch(55.55% 0.0000 0);
+  --chart-card-empty-state-caption-line-height: 24px;
+  --chart-card-empty-state-caption-size: 16px;
+  --chart-card-empty-state-icon-radius: 12px;
+  --chart-card-empty-state-title-color: oklch(20.46% 0.0000 0);
+  --chart-card-empty-state-title-line-height: 32px;
+  --chart-card-empty-state-title-size: 24px;
+  --chart-card-empty-state-title-weight: 700;
+  --chart-card-featured-icon-bg: oklch(97.02% 0.0000 0);
+  --chart-card-fg: oklch(14.48% 0.0000 0);
+  --chart-card-footer-caption-color: oklch(55.55% 0.0000 0);
+  --chart-card-footer-trend-color: oklch(14.48% 0.0000 0);
+  --chart-card-gap: 24px;
+  --chart-card-padding-bottom: 24px;
+  --chart-card-padding-top: 20px;
+  --chart-card-padding-x: 24px;
+  --chart-card-previous-color: oklch(55.55% 0.0000 0);
+  --chart-card-radius: 16px;
+  --chart-card-title-color: oklch(20.46% 0.0000 0);
+  --chart-card-title-line-height: 24px;
+  --chart-card-title-size: 18px;
+  --chart-card-title-weight: 600;
+  --chart-card-value-color: oklch(14.48% 0.0000 0);
+  --chart-card-value-size: 20px;
   --chart-indicator-dot-size: 10px;
   --chart-indicator-line-width: 4px;
   --chart-legend-gap: 16px;
@@ -774,7 +801,7 @@
   --date-picker-footer-gap: 8px;
   --date-picker-footer-padding: 12px;
   --date-picker-preset-item-height: 32px;
-  --date-picker-preset-min-width: 140px;
+  --date-picker-preset-min-width: 168px;
   --date-picker-trigger-border-default: oklch(92.19% 0.0000 0);
   --date-picker-trigger-border-focus: oklch(81.75% 0.1821 159.79);
   --date-picker-trigger-disabled-bg: oklch(97.02% 0.0000 0);
@@ -795,7 +822,7 @@
   --date-picker-trigger-ring-width: 3px;
   --date-picker-trigger-text-lg: 16px;
   --date-picker-trigger-text-md: 14px;
-  --date-picker-trigger-text-sm: 12px;
+  --date-picker-trigger-text-sm: 14px;
   --date-range-picker-calendar-gap: 16px;
   --date-range-picker-today-button-height: 28px;
   --date-range-picker-today-button-text-size: 0.75rem;
@@ -1237,6 +1264,13 @@
   --ifta-label-wrapper-height: 60px;
   --ifta-label-wrapper-padding-bottom: 8px;
   --ifta-label-wrapper-padding-top: 24px;
+  --image-gallery-empty-border-color: oklch(97.02% 0.0000 0);
+  --image-gallery-empty-radius: 12px;
+  --image-gallery-item-radius: 8px;
+  --image-gallery-loading-background: oklch(97.02% 0.0000 0);
+  --image-gallery-selection-opacity: 0.5;
+  --image-gallery-selection-ring-color: oklch(81.75% 0.1821 159.79);
+  --image-gallery-selection-ring-width: 2px;
   --image-rounded-circle: 9999px;
   --image-rounded-default: 0px;
   --image-rounded-rounded: 0.375rem;
@@ -1524,6 +1558,15 @@
   --modal-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --modal-footer-gap: 8px;
   --modal-header-gap: 8px;
+  --modal-icon-pill-color-default-bg: oklch(97.02% 0.0000 0);
+  --modal-icon-pill-color-default-fg: oklch(55.55% 0.0000 0);
+  --modal-icon-pill-color-destructive-bg: oklch(97.05% 0.0129 17.38);
+  --modal-icon-pill-color-destructive-fg: oklch(50.54% 0.1905 27.52);
+  --modal-icon-pill-color-warning-bg: oklch(98.73% 0.0262 102.21);
+  --modal-icon-pill-color-warning-fg: oklch(55.38% 0.1207 66.44);
+  --modal-icon-pill-icon-size: 16px;
+  --modal-icon-pill-padding: 8px;
+  --modal-icon-pill-radius: 999px;
   --modal-overlay-bg: oklch(0.00% 0.0000 0 / 60.0%);
   --multiselect-content-bg: oklch(100.00% 0.0000 0);
   --multiselect-content-fg: oklch(20.46% 0.0000 0);
@@ -1641,7 +1684,7 @@
   --panel-header-padding-y: 12px;
   --panel-root-border-color: oklch(92.19% 0.0000 0);
   --panel-root-radius: 8px;
-  --panel-root-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --panel-root-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.10), 0 2px 4px 0 rgb(0 0 0 / 0.06);
   --panel-size-lg: 400px;
   --panel-size-md: 320px;
   --panel-size-sm: 280px;
@@ -1825,6 +1868,27 @@
   --red-800: oklch(44.37% 0.1613 26.90);
   --red-900: oklch(39.58% 0.1331 25.72);
   --red-950: oklch(25.75% 0.0886 26.04);
+  --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);
+  --report-builder-accent-bright: oklch(63.04% 0.1800 259.96);
+  --report-builder-accent-hover: oklch(53.18% 0.1807 258.26);
+  --report-builder-accent: oklch(57.37% 0.1946 257.86);
+  --report-builder-border-strong: oklch(90.67% 0.0000 0);
+  --report-builder-border: oklch(89.41% 0.0059 264.53);
+  --report-builder-fg-muted: oklch(49.79% 0.0094 253.91);
+  --report-builder-fg-secondary: oklch(36.88% 0.0074 240.02);
+  --report-builder-fg-strong: rgba(0, 0, 0, 0.87);
+  --report-builder-fg-subtle: oklch(56.24% 0.0000 0);
+  --report-builder-fg: oklch(24.79% 0.0058 271.18);
+  --report-builder-on-accent: oklch(100.00% 0.0000 0);
+  --report-builder-positive: oklch(64.75% 0.1603 148.50);
+  --report-builder-shadow-subtle: rgba(60, 64, 67, 0.15);
+  --report-builder-shadow: rgba(60, 64, 67, 0.3);
+  --report-builder-surface-hover: oklch(96.29% 0.0025 228.78);
+  --report-builder-surface-muted: oklch(97.02% 0.0000 0);
+  --report-builder-surface-subtle: oklch(98.16% 0.0017 247.84);
+  --report-builder-surface: oklch(100.00% 0.0000 0);
   --report-generator-output-max-height-lg: 500px;
   --report-generator-root-min-height-lg: 500px;
   --resizable-handle-bg: oklch(92.19% 0.0000 0);
@@ -2559,7 +2623,7 @@
   --tooltip-content-text-size: 0.75rem;
   --tooltip-content-z-index: 50;
   --topbar-leading-gap: 8px;
-  --topbar-root-background: oklch(97.02% 0.0000 0);
+  --topbar-root-background: oklch(98.51% 0.0000 0);
   --topbar-root-border-color: oklch(92.19% 0.0000 0);
   --topbar-root-gap: 16px;
   --topbar-root-height-default: 3.5rem;
@@ -2983,6 +3047,17 @@
   --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(26.86% 0.0000 0);
+  --chart-card-border: oklch(37.15% 0.0000 0);
+  --chart-card-empty-state-caption-color: oklch(71.55% 0.0000 0);
+  --chart-card-empty-state-title-color: oklch(98.51% 0.0000 0);
+  --chart-card-featured-icon-bg: oklch(26.86% 0.0000 0);
+  --chart-card-fg: oklch(98.51% 0.0000 0);
+  --chart-card-footer-caption-color: oklch(71.55% 0.0000 0);
+  --chart-card-footer-trend-color: oklch(98.51% 0.0000 0);
+  --chart-card-previous-color: oklch(71.55% 0.0000 0);
+  --chart-card-title-color: oklch(97.02% 0.0000 0);
+  --chart-card-value-color: oklch(98.51% 0.0000 0);
   --chart-tooltip-bg: oklch(14.48% 0.0000 0);
   --chart-tooltip-border: oklch(37.15% 0.0000 0);
   --checkbox-indicator-color: oklch(18.34% 0.0338 166.67);
@@ -3168,6 +3243,9 @@
   --ifta-label-label-color-muted: oklch(71.55% 0.0000 0);
   --ifta-label-ring-destructive: oklch(63.68% 0.2078 25.33);
   --ifta-label-ring-primary: oklch(84.11% 0.1609 163.31);
+  --image-gallery-empty-border-color: oklch(26.86% 0.0000 0);
+  --image-gallery-loading-background: oklch(26.86% 0.0000 0);
+  --image-gallery-selection-ring-color: oklch(84.11% 0.1609 163.31);
   --image-skeleton-bg: oklch(26.86% 0.0000 0);
   --info-border: oklch(54.61% 0.2152 262.88);
   --info-foreground: oklch(100.00% 0.0000 0);
@@ -3231,6 +3309,12 @@
   --menu-item-fg-hover: oklch(95.21% 0.0467 171.12);
   --modal-content-bg: oklch(14.48% 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);
+  --modal-icon-pill-color-destructive-bg: oklch(25.75% 0.0886 26.04);
+  --modal-icon-pill-color-destructive-fg: oklch(80.77% 0.1035 19.57);
+  --modal-icon-pill-color-warning-bg: oklch(28.57% 0.0639 53.81);
+  --modal-icon-pill-color-warning-fg: oklch(90.52% 0.1657 98.11);
   --modal-overlay-bg: oklch(0.00% 0.0000 0 / 80.0%);
   --multiselect-content-bg: oklch(20.46% 0.0000 0);
   --multiselect-content-fg: oklch(98.51% 0.0000 0);
@@ -3325,6 +3409,27 @@
   --rail-background: oklch(20.46% 0.0000 0);
   --rail-border: oklch(26.86% 0.0000 0);
   --rating-icon-color-filled: 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);
+  --report-builder-accent-bright: oklch(76.61% 0.1083 259.79);
+  --report-builder-accent-hover: oklch(83.69% 0.0733 259.99);
+  --report-builder-accent: oklch(76.61% 0.1083 259.79);
+  --report-builder-border-strong: oklch(36.88% 0.0074 240.02);
+  --report-builder-border: oklch(49.79% 0.0094 253.91);
+  --report-builder-fg-muted: oklch(70.28% 0.0111 247.99);
+  --report-builder-fg-secondary: oklch(80.93% 0.0083 253.87);
+  --report-builder-fg-strong: rgba(232, 234, 237, 0.87);
+  --report-builder-fg-subtle: oklch(70.28% 0.0111 247.99);
+  --report-builder-fg: oklch(93.64% 0.0046 258.33);
+  --report-builder-on-accent: oklch(24.79% 0.0058 271.18);
+  --report-builder-positive: oklch(77.44% 0.1039 152.19);
+  --report-builder-shadow-subtle: rgba(0, 0, 0, 0.3);
+  --report-builder-shadow: rgba(0, 0, 0, 0.5);
+  --report-builder-surface-hover: oklch(33.34% 0.0071 274.76);
+  --report-builder-surface-muted: oklch(28.52% 0.0056 271.22);
+  --report-builder-surface-subtle: oklch(28.52% 0.0056 271.22);
+  --report-builder-surface: oklch(24.79% 0.0058 271.18);
   --resizable-handle-bg: oklch(37.15% 0.0000 0);
   --resizable-handle-grip-bg: oklch(37.15% 0.0000 0);
   --resizable-handle-ring: oklch(84.11% 0.1609 163.31);
@@ -3530,7 +3635,7 @@
   --toolbar-separator-color: oklch(37.15% 0.0000 0);
   --tooltip-content-background: oklch(98.51% 0.0000 0);
   --tooltip-content-foreground: oklch(14.48% 0.0000 0);
-  --topbar-root-background: oklch(26.86% 0.0000 0);
+  --topbar-root-background: oklch(20.46% 0.0000 0);
   --topbar-root-border-color: oklch(37.15% 0.0000 0);
   --warning-border: oklch(55.38% 0.1207 66.44);
   --warning-foreground: oklch(28.57% 0.0639 53.81);
@@ -3685,6 +3790,17 @@
   --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-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);
+  --chart-card-featured-icon-bg: oklch(97.02% 0.0000 0);
+  --chart-card-fg: oklch(14.48% 0.0000 0);
+  --chart-card-footer-caption-color: oklch(55.55% 0.0000 0);
+  --chart-card-footer-trend-color: oklch(14.48% 0.0000 0);
+  --chart-card-previous-color: oklch(55.55% 0.0000 0);
+  --chart-card-title-color: oklch(20.46% 0.0000 0);
+  --chart-card-value-color: oklch(14.48% 0.0000 0);
   --chart-tooltip-bg: oklch(100.00% 0.0000 0);
   --chart-tooltip-border: oklch(92.19% 0.0000 0);
   --checkbox-indicator-color: oklch(18.34% 0.0338 166.67);
@@ -3870,6 +3986,9 @@
   --ifta-label-label-color-muted: oklch(55.55% 0.0000 0);
   --ifta-label-ring-destructive: oklch(63.68% 0.2078 25.33);
   --ifta-label-ring-primary: oklch(81.75% 0.1821 159.79);
+  --image-gallery-empty-border-color: oklch(97.02% 0.0000 0);
+  --image-gallery-loading-background: oklch(97.02% 0.0000 0);
+  --image-gallery-selection-ring-color: oklch(81.75% 0.1821 159.79);
   --image-skeleton-bg: oklch(97.02% 0.0000 0);
   --info-border: oklch(88.23% 0.0571 254.13);
   --info-foreground: oklch(100.00% 0.0000 0);
@@ -3933,6 +4052,12 @@
   --menu-item-fg-hover: oklch(26.88% 0.0527 163.85);
   --modal-content-bg: oklch(100.00% 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);
+  --modal-icon-pill-color-destructive-bg: oklch(97.05% 0.0129 17.38);
+  --modal-icon-pill-color-destructive-fg: oklch(50.54% 0.1905 27.52);
+  --modal-icon-pill-color-warning-bg: oklch(98.73% 0.0262 102.21);
+  --modal-icon-pill-color-warning-fg: oklch(55.38% 0.1207 66.44);
   --modal-overlay-bg: oklch(0.00% 0.0000 0 / 60.0%);
   --multiselect-content-bg: oklch(100.00% 0.0000 0);
   --multiselect-content-fg: oklch(20.46% 0.0000 0);
@@ -4027,6 +4152,27 @@
   --rail-background: oklch(98.51% 0.0000 0);
   --rail-border: oklch(92.19% 0.0000 0);
   --rating-icon-color-filled: 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);
+  --report-builder-accent-bright: oklch(63.04% 0.1800 259.96);
+  --report-builder-accent-hover: oklch(53.18% 0.1807 258.26);
+  --report-builder-accent: oklch(57.37% 0.1946 257.86);
+  --report-builder-border-strong: oklch(90.67% 0.0000 0);
+  --report-builder-border: oklch(89.41% 0.0059 264.53);
+  --report-builder-fg-muted: oklch(49.79% 0.0094 253.91);
+  --report-builder-fg-secondary: oklch(36.88% 0.0074 240.02);
+  --report-builder-fg-strong: rgba(0, 0, 0, 0.87);
+  --report-builder-fg-subtle: oklch(56.24% 0.0000 0);
+  --report-builder-fg: oklch(24.79% 0.0058 271.18);
+  --report-builder-on-accent: oklch(100.00% 0.0000 0);
+  --report-builder-positive: oklch(64.75% 0.1603 148.50);
+  --report-builder-shadow-subtle: rgba(60, 64, 67, 0.15);
+  --report-builder-shadow: rgba(60, 64, 67, 0.3);
+  --report-builder-surface-hover: oklch(96.29% 0.0025 228.78);
+  --report-builder-surface-muted: oklch(97.02% 0.0000 0);
+  --report-builder-surface-subtle: oklch(98.16% 0.0017 247.84);
+  --report-builder-surface: oklch(100.00% 0.0000 0);
   --resizable-handle-bg: oklch(92.19% 0.0000 0);
   --resizable-handle-grip-bg: oklch(92.19% 0.0000 0);
   --resizable-handle-ring: oklch(81.75% 0.1821 159.79);
@@ -4232,7 +4378,7 @@
   --toolbar-separator-color: oklch(92.19% 0.0000 0);
   --tooltip-content-background: oklch(14.48% 0.0000 0);
   --tooltip-content-foreground: oklch(100.00% 0.0000 0);
-  --topbar-root-background: oklch(97.02% 0.0000 0);
+  --topbar-root-background: oklch(98.51% 0.0000 0);
   --topbar-root-border-color: oklch(92.19% 0.0000 0);
   --warning-border: oklch(94.51% 0.1243 101.54);
   --warning-foreground: oklch(28.57% 0.0639 53.81);
@@ -4496,6 +4642,17 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-chart-card-bg: var(--chart-card-bg);
+  --color-chart-card-border: var(--chart-card-border);
+  --color-chart-card-empty-state-caption-color: var(--chart-card-empty-state-caption-color);
+  --color-chart-card-empty-state-title-color: var(--chart-card-empty-state-title-color);
+  --color-chart-card-featured-icon-bg: var(--chart-card-featured-icon-bg);
+  --color-chart-card-fg: var(--chart-card-fg);
+  --color-chart-card-footer-caption-color: var(--chart-card-footer-caption-color);
+  --color-chart-card-footer-trend-color: var(--chart-card-footer-trend-color);
+  --color-chart-card-previous-color: var(--chart-card-previous-color);
+  --color-chart-card-title-color: var(--chart-card-title-color);
+  --color-chart-card-value-color: var(--chart-card-value-color);
   --color-chart-tooltip-bg: var(--chart-tooltip-bg);
   --color-chart-tooltip-border: var(--chart-tooltip-border);
   --color-checkbox-indicator-color: var(--checkbox-indicator-color);
@@ -4688,6 +4845,9 @@
   --color-ifta-label-label-color-muted: var(--ifta-label-label-color-muted);
   --color-ifta-label-ring-destructive: var(--ifta-label-ring-destructive);
   --color-ifta-label-ring-primary: var(--ifta-label-ring-primary);
+  --color-image-gallery-empty-border-color: var(--image-gallery-empty-border-color);
+  --color-image-gallery-loading-background: var(--image-gallery-loading-background);
+  --color-image-gallery-selection-ring-color: var(--image-gallery-selection-ring-color);
   --color-image-rounded-circle: var(--image-rounded-circle);
   --color-image-rounded-rounded: var(--image-rounded-rounded);
   --color-image-skeleton-bg: var(--image-skeleton-bg);
@@ -4760,6 +4920,12 @@
   --color-menu-item-fg-hover: var(--menu-item-fg-hover);
   --color-modal-content-bg: var(--modal-content-bg);
   --color-modal-content-border: var(--modal-content-border);
+  --color-modal-icon-pill-color-default-bg: var(--modal-icon-pill-color-default-bg);
+  --color-modal-icon-pill-color-default-fg: var(--modal-icon-pill-color-default-fg);
+  --color-modal-icon-pill-color-destructive-bg: var(--modal-icon-pill-color-destructive-bg);
+  --color-modal-icon-pill-color-destructive-fg: var(--modal-icon-pill-color-destructive-fg);
+  --color-modal-icon-pill-color-warning-bg: var(--modal-icon-pill-color-warning-bg);
+  --color-modal-icon-pill-color-warning-fg: var(--modal-icon-pill-color-warning-fg);
   --color-modal-overlay-bg: var(--modal-overlay-bg);
   --color-multiselect-content-bg: var(--multiselect-content-bg);
   --color-multiselect-content-fg: var(--multiselect-content-fg);
@@ -4863,6 +5029,27 @@
   --color-rail-border: var(--rail-border);
   --color-rating-icon-color-empty: var(--rating-icon-color-empty);
   --color-rating-icon-color-filled: var(--rating-icon-color-filled);
+  --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);
+  --color-report-builder-accent-bright: var(--report-builder-accent-bright);
+  --color-report-builder-accent-hover: var(--report-builder-accent-hover);
+  --color-report-builder-accent: var(--report-builder-accent);
+  --color-report-builder-border-strong: var(--report-builder-border-strong);
+  --color-report-builder-border: var(--report-builder-border);
+  --color-report-builder-fg-muted: var(--report-builder-fg-muted);
+  --color-report-builder-fg-secondary: var(--report-builder-fg-secondary);
+  --color-report-builder-fg-strong: var(--report-builder-fg-strong);
+  --color-report-builder-fg-subtle: var(--report-builder-fg-subtle);
+  --color-report-builder-fg: var(--report-builder-fg);
+  --color-report-builder-on-accent: var(--report-builder-on-accent);
+  --color-report-builder-positive: var(--report-builder-positive);
+  --color-report-builder-shadow-subtle: var(--report-builder-shadow-subtle);
+  --color-report-builder-shadow: var(--report-builder-shadow);
+  --color-report-builder-surface-hover: var(--report-builder-surface-hover);
+  --color-report-builder-surface-muted: var(--report-builder-surface-muted);
+  --color-report-builder-surface-subtle: var(--report-builder-surface-subtle);
+  --color-report-builder-surface: var(--report-builder-surface);
   --color-resizable-handle-bg: var(--resizable-handle-bg);
   --color-resizable-handle-grip-bg: var(--resizable-handle-grip-bg);
   --color-resizable-handle-ring: var(--resizable-handle-ring);