@frame-ui-ng/components 0.4.2-beta.0 → 0.5.0-beta.0

package/tabs/src/styles/tabs.css

@@ -1,164 +1,166 @@
-@import './_vars.css';
-
-[frTabs],
-frame-tabs {
-  display: grid;
-  gap: var(--frame-tabs-gap);
-}
-
-[frTabs][data-orientation='vertical'],
-frame-tabs[data-orientation='vertical'] {
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: start;
-}
-
-[frTabsList],
-frame-tabs-list {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--frame-tabs-list-gap);
-  width: fit-content;
-  padding: var(--frame-tabs-list-padding);
-  border: 1px solid var(--frame-tabs-list-border);
-  border-radius: var(--frame-tabs-list-radius);
-  background: var(--frame-tabs-list-bg);
-}
-
-[frTabsList][data-orientation='vertical'],
-frame-tabs-list[data-orientation='vertical'] {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-[frTabsList][data-variant='line'],
-frame-tabs-list[data-variant='line'] {
-  gap: 1rem;
-  padding: 0;
-  border-block-end: 1px solid var(--frame-tabs-line-color);
-  border-radius: 0;
-  background: transparent;
-}
-
-[frTabsTrigger],
-frame-tabs-trigger {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--frame-tabs-trigger-height);
-  gap: 0.5rem;
-  padding-inline: var(--frame-tabs-trigger-padding-x);
-  border: 0;
-  border-radius: var(--frame-tabs-trigger-radius);
-  background: var(--frame-tabs-trigger-bg);
-  color: var(--frame-tabs-trigger-color);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition:
-    background-color 160ms ease,
-    box-shadow 180ms ease,
-    color 160ms ease,
-    transform 180ms ease;
-  white-space: nowrap;
-}
-
-[frTabsTrigger]:hover,
-frame-tabs-trigger:hover {
-  background: var(--frame-tabs-trigger-hover-bg);
-  color: var(--frame-tabs-trigger-hover-color);
-}
-
-[frTabsTrigger][data-active],
-[frTabsTrigger].active,
-[frTabsTrigger].router-link-active,
-frame-tabs-trigger[data-active] {
-  background: var(--frame-tabs-trigger-active-bg);
-  color: var(--frame-tabs-trigger-active-color);
-  box-shadow: var(--frame-tabs-trigger-active-shadow);
-  transform: translateY(-1px);
-}
-
-[frTabsTrigger]:focus-visible,
-frame-tabs-trigger:focus-visible {
-  outline: 0;
-  box-shadow: var(--frame-tabs-trigger-focus-shadow);
-}
-
-[frTabsTrigger][data-disabled],
-frame-tabs-trigger[data-disabled] {
-  cursor: not-allowed;
-  opacity: var(--frame-tabs-trigger-disabled-opacity);
-}
-
-[frTabsList][data-variant='line'] [frTabsTrigger],
-frame-tabs-list[data-variant='line'] frame-tabs-trigger {
-  min-height: calc(var(--frame-tabs-trigger-height) + 0.125rem);
-  padding-inline: 0;
-  border-radius: 0;
-  transform: none;
-}
-
-[frTabsList][data-variant='line'] [frTabsTrigger]::after,
-frame-tabs-list[data-variant='line'] frame-tabs-trigger::after {
-  position: absolute;
-  inset-inline: 0;
-  inset-block-end: -1px;
-  height: 2px;
-  border-radius: 999px;
-  background: var(--frame-tabs-line-active-color);
-  content: '';
-  opacity: 0;
-  transform: scaleX(0);
-  transform-origin: center;
-  transition:
-    opacity 160ms ease,
-    transform 180ms ease;
-}
-
-[frTabsList][data-variant='line'] [frTabsTrigger][data-active],
-[frTabsList][data-variant='line'] [frTabsTrigger].active,
-[frTabsList][data-variant='line'] [frTabsTrigger].router-link-active,
-frame-tabs-list[data-variant='line'] frame-tabs-trigger[data-active] {
-  background: transparent;
-  box-shadow: none;
-  transform: none;
-}
-
-[frTabsList][data-variant='line'] [frTabsTrigger][data-active]::after,
-[frTabsList][data-variant='line'] [frTabsTrigger].active::after,
-[frTabsList][data-variant='line'] [frTabsTrigger].router-link-active::after,
-frame-tabs-list[data-variant='line'] frame-tabs-trigger[data-active]::after {
-  opacity: 1;
-  transform: scaleX(1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [frTabsTrigger],
-  frame-tabs-trigger,
-  [frTabsList][data-variant='line'] [frTabsTrigger]::after,
-  frame-tabs-list[data-variant='line'] frame-tabs-trigger::after {
-    transition: none;
-  }
-
-  [frTabsTrigger][data-active],
-  [frTabsTrigger].active,
-  [frTabsTrigger].router-link-active,
-  frame-tabs-trigger[data-active] {
-    transform: none;
-  }
-}
-
-[frTabsContent],
-frame-tabs-content {
-  display: block;
-  min-width: 0;
-  padding: var(--frame-tabs-content-padding);
-}
-
-[frTabsContent][hidden],
-frame-tabs-content[hidden] {
-  display: none;
-}
+@import './_vars.css';
+
+[frTabs],
+frame-tabs {
+  display: grid;
+  align-content: start;
+  gap: var(--frame-tabs-gap);
+}
+
+[frTabs][data-orientation='vertical'],
+frame-tabs[data-orientation='vertical'] {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+}
+
+[frTabsList],
+frame-tabs-list {
+  display: inline-flex;
+  align-self: start;
+  align-items: center;
+  gap: var(--frame-tabs-list-gap);
+  width: fit-content;
+  padding: var(--frame-tabs-list-padding);
+  border: 1px solid var(--frame-tabs-list-border);
+  border-radius: var(--frame-tabs-list-radius);
+  background: var(--frame-tabs-list-bg);
+}
+
+[frTabsList][data-orientation='vertical'],
+frame-tabs-list[data-orientation='vertical'] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+[frTabsList][data-variant='line'],
+frame-tabs-list[data-variant='line'] {
+  gap: var(--frame-tabs-line-list-gap);
+  padding: 0;
+  border-block-end: 1px solid var(--frame-tabs-line-color);
+  border-radius: 0;
+  background: transparent;
+}
+
+[frTabsTrigger],
+frame-tabs-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--frame-tabs-trigger-height);
+  gap: 0.5rem;
+  padding-inline: var(--frame-tabs-trigger-padding-x);
+  border: 0;
+  border-radius: var(--frame-tabs-trigger-radius);
+  background: var(--frame-tabs-trigger-bg);
+  color: var(--frame-tabs-trigger-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition:
+    background-color 160ms ease,
+    box-shadow 180ms ease,
+    color 160ms ease,
+    transform 180ms ease;
+  white-space: nowrap;
+}
+
+[frTabsTrigger]:hover,
+frame-tabs-trigger:hover {
+  background: var(--frame-tabs-trigger-hover-bg);
+  color: var(--frame-tabs-trigger-hover-color);
+}
+
+[frTabsTrigger][data-active],
+[frTabsTrigger].active,
+[frTabsTrigger].router-link-active,
+frame-tabs-trigger[data-active] {
+  background: var(--frame-tabs-trigger-active-bg);
+  color: var(--frame-tabs-trigger-active-color);
+  box-shadow: var(--frame-tabs-trigger-active-shadow);
+  transform: translateY(-1px);
+}
+
+[frTabsTrigger]:focus-visible,
+frame-tabs-trigger:focus-visible {
+  outline: 0;
+  box-shadow: var(--frame-tabs-trigger-focus-shadow);
+}
+
+[frTabsTrigger][data-disabled],
+frame-tabs-trigger[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-tabs-trigger-disabled-opacity);
+}
+
+[frTabsList][data-variant='line'] [frTabsTrigger],
+frame-tabs-list[data-variant='line'] frame-tabs-trigger {
+  min-height: calc(var(--frame-tabs-trigger-height) + 0.125rem);
+  padding-inline: var(--frame-tabs-line-trigger-padding-x);
+  border-radius: 0;
+  transform: none;
+}
+
+[frTabsList][data-variant='line'] [frTabsTrigger]::after,
+frame-tabs-list[data-variant='line'] frame-tabs-trigger::after {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: -1px;
+  height: 2px;
+  border-radius: var(--frame-radius-full);
+  background: var(--frame-tabs-line-active-color);
+  content: '';
+  opacity: 0;
+  transform: scaleX(0);
+  transform-origin: center;
+  transition:
+    opacity 160ms ease,
+    transform 180ms ease;
+}
+
+[frTabsList][data-variant='line'] [frTabsTrigger][data-active],
+[frTabsList][data-variant='line'] [frTabsTrigger].active,
+[frTabsList][data-variant='line'] [frTabsTrigger].router-link-active,
+frame-tabs-list[data-variant='line'] frame-tabs-trigger[data-active] {
+  background: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
+[frTabsList][data-variant='line'] [frTabsTrigger][data-active]::after,
+[frTabsList][data-variant='line'] [frTabsTrigger].active::after,
+[frTabsList][data-variant='line'] [frTabsTrigger].router-link-active::after,
+frame-tabs-list[data-variant='line'] frame-tabs-trigger[data-active]::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [frTabsTrigger],
+  frame-tabs-trigger,
+  [frTabsList][data-variant='line'] [frTabsTrigger]::after,
+  frame-tabs-list[data-variant='line'] frame-tabs-trigger::after {
+    transition: none;
+  }
+
+  [frTabsTrigger][data-active],
+  [frTabsTrigger].active,
+  [frTabsTrigger].router-link-active,
+  frame-tabs-trigger[data-active] {
+    transform: none;
+  }
+}
+
+[frTabsContent],
+frame-tabs-content {
+  display: block;
+  min-width: 0;
+  padding: var(--frame-tabs-content-padding);
+}
+
+[frTabsContent][hidden],
+frame-tabs-content[hidden] {
+  display: none;
+}

package/textarea/src/styles/_vars.css

@@ -1,12 +1,12 @@
-:root {
-  --frame-textarea-root-min-height: 5rem;
+:where(:root) {
+  --frame-textarea-root-min-height: calc(var(--frame-density-control-height-lg) + var(--frame-density-control-height-lg));
   --frame-textarea-root-radius: var(--frame-radius-md);
   --frame-textarea-root-bg: var(--frame-surface);
   --frame-textarea-root-color: var(--frame-surface-foreground);
   --frame-textarea-root-border: var(--frame-border);
   --frame-textarea-root-font-size: 0.875rem;
-  --frame-textarea-root-padding-block: 0.625rem;
-  --frame-textarea-root-padding-inline: 0.875rem;
+  --frame-textarea-root-padding-block: var(--frame-density-gap-md);
+  --frame-textarea-root-padding-inline: var(--frame-density-control-padding-x-md);
   --frame-textarea-root-placeholder-color: var(--frame-muted-foreground);
   --frame-textarea-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
   --frame-textarea-root-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));

package/toast/src/styles/_vars.css

@@ -1,19 +1,19 @@
-:root {
+:where(:root) {
   --frame-toast-z-index: 2147483647;
-  --frame-toast-viewport-inset: 1rem;
+  --frame-toast-viewport-inset: var(--frame-density-gap-xl);
   --frame-toast-viewport-width: min(100vw - 2rem, 26rem);
   --frame-toast-stack-offset: 0.875rem;
   --frame-toast-stack-depth: 2.25rem;
   --frame-toast-stack-scale-step: 0.025;
-  --frame-toast-stack-expanded-gap: 0.75rem;
+  --frame-toast-stack-expanded-gap: var(--frame-density-gap-lg);
   --frame-toast-stack-expanded-depth: 28rem;
-  --frame-toast-padding: 0.875rem 0.5rem 0.875rem 0.875rem;
-  --frame-toast-gap: 0.75rem;
+  --frame-toast-padding: var(--frame-density-gap-lg) var(--frame-density-gap-md) var(--frame-density-gap-lg) var(--frame-density-gap-lg);
+  --frame-toast-gap: var(--frame-density-gap-lg);
   --frame-toast-radius: var(--frame-radius-lg);
   --frame-toast-bg: var(--frame-surface);
   --frame-toast-color: var(--frame-foreground);
   --frame-toast-border: var(--frame-border);
-  --frame-toast-shadow: 0 18px 45px rgb(0 0 0 / 0.14);
+  --frame-toast-shadow: var(--frame-shadow-md);
   --frame-toast-title-font-size: 0.875rem;
   --frame-toast-title-font-weight: 650;
   --frame-toast-description-font-size: 0.8125rem;
@@ -22,9 +22,9 @@
   --frame-toast-status-bg: var(--frame-muted-foreground);
   --frame-toast-action-bg: var(--frame-primary);
   --frame-toast-action-color: var(--frame-primary-foreground);
-  --frame-toast-action-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, black);
+  --frame-toast-action-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, var(--frame-foreground));
   --frame-toast-action-radius: var(--frame-radius-md);
-  --frame-toast-close-size: 1.75rem;
+  --frame-toast-close-size: var(--frame-density-item-height);
   --frame-toast-close-icon-size: 1rem;
   --frame-toast-close-color: var(--frame-muted-foreground);
   --frame-toast-close-hover-bg: var(--frame-accent);
@@ -32,17 +32,17 @@
   --frame-toast-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
   --frame-toast-stack-transition-duration: 220ms;
   --frame-toast-stack-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
-  --frame-toast-success-bg: color-mix(in srgb, #16a34a 10%, var(--frame-surface));
-  --frame-toast-success-border: color-mix(in srgb, #16a34a 26%, var(--frame-border));
-  --frame-toast-success-status-bg: #16a34a;
-  --frame-toast-info-bg: color-mix(in srgb, #2563eb 10%, var(--frame-surface));
-  --frame-toast-info-border: color-mix(in srgb, #2563eb 26%, var(--frame-border));
-  --frame-toast-info-status-bg: #2563eb;
-  --frame-toast-warning-bg: color-mix(in srgb, #f59e0b 12%, var(--frame-surface));
-  --frame-toast-warning-border: color-mix(in srgb, #f59e0b 30%, var(--frame-border));
-  --frame-toast-warning-status-bg: #f59e0b;
-  --frame-toast-error-bg: color-mix(in srgb, #dc2626 10%, var(--frame-surface));
-  --frame-toast-error-border: color-mix(in srgb, #dc2626 30%, var(--frame-border));
-  --frame-toast-error-status-bg: #dc2626;
+  --frame-toast-success-bg: color-mix(in srgb, var(--frame-success) 10%, var(--frame-surface));
+  --frame-toast-success-border: color-mix(in srgb, var(--frame-success) 26%, var(--frame-border));
+  --frame-toast-success-status-bg: var(--frame-success);
+  --frame-toast-info-bg: color-mix(in srgb, var(--frame-info) 10%, var(--frame-surface));
+  --frame-toast-info-border: color-mix(in srgb, var(--frame-info) 26%, var(--frame-border));
+  --frame-toast-info-status-bg: var(--frame-info);
+  --frame-toast-warning-bg: color-mix(in srgb, var(--frame-warning) 12%, var(--frame-surface));
+  --frame-toast-warning-border: color-mix(in srgb, var(--frame-warning) 30%, var(--frame-border));
+  --frame-toast-warning-status-bg: var(--frame-warning);
+  --frame-toast-error-bg: color-mix(in srgb, var(--frame-destructive) 10%, var(--frame-surface));
+  --frame-toast-error-border: color-mix(in srgb, var(--frame-destructive) 30%, var(--frame-border));
+  --frame-toast-error-status-bg: var(--frame-destructive);
   --frame-toast-loading-status-bg: var(--frame-primary);
 }

package/toast/src/styles/toast.css

@@ -174,7 +174,7 @@
   inline-size: var(--frame-toast-status-size);
   block-size: var(--frame-toast-status-size);
   margin-block-start: 0.25rem;
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
   background: var(--frame-toast-status-bg);
 }
 
@@ -240,7 +240,7 @@
   block-size: var(--frame-toast-close-size);
   align-items: center;
   justify-content: center;
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
   background: transparent;
   color: var(--frame-toast-close-color);
   line-height: 1;

package/toggle/src/styles/_vars.css

@@ -1,22 +1,22 @@
-:root {
-  --frame-toggle-height: 2.25rem;
-  --frame-toggle-padding-x: 0.75rem;
-  --frame-toggle-gap: 0.5rem;
-  --frame-toggle-radius: var(--frame-radius-md, 0.5rem);
+:where(:root) {
+  --frame-toggle-height: var(--frame-density-control-height-md);
+  --frame-toggle-padding-x: var(--frame-density-control-padding-x-sm);
+  --frame-toggle-gap: var(--frame-density-gap-md);
+  --frame-toggle-radius: var(--frame-radius-md);
   --frame-toggle-font-size: 0.875rem;
   --frame-toggle-font-weight: 600;
   --frame-toggle-bg: transparent;
-  --frame-toggle-color: var(--frame-foreground, #09090b);
+  --frame-toggle-color: var(--frame-foreground);
   --frame-toggle-border: transparent;
-  --frame-toggle-hover-bg: var(--frame-muted, #f4f4f5);
-  --frame-toggle-hover-color: var(--frame-foreground, #09090b);
-  --frame-toggle-pressed-bg: var(--frame-accent, var(--frame-muted, #f4f4f5));
-  --frame-toggle-pressed-color: var(--frame-accent-foreground, var(--frame-foreground, #09090b));
+  --frame-toggle-hover-bg: var(--frame-muted);
+  --frame-toggle-hover-color: var(--frame-foreground);
+  --frame-toggle-pressed-bg: var(--frame-accent);
+  --frame-toggle-pressed-color: var(--frame-accent-foreground);
   --frame-toggle-pressed-shadow: none;
-  --frame-toggle-outline-bg: var(--frame-background, #fff);
-  --frame-toggle-outline-border: var(--frame-border, #e5e7eb);
-  --frame-toggle-outline-hover-bg: var(--frame-muted, #f4f4f5);
-  --frame-toggle-outline-pressed-bg: var(--frame-muted, #f4f4f5);
+  --frame-toggle-outline-bg: var(--frame-background);
+  --frame-toggle-outline-border: var(--frame-border);
+  --frame-toggle-outline-hover-bg: var(--frame-muted);
+  --frame-toggle-outline-pressed-bg: var(--frame-muted);
   --frame-toggle-focus-shadow: none;
   --frame-toggle-disabled-opacity: 0.5;
   --frame-toggle-transition-duration: 160ms;