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

package/switch/src/styles/_vars.css

@@ -1,8 +1,8 @@
-:root {
-  --frame-switch-field-gap: 0.75rem;
+:where(:root) {
+  --frame-switch-field-gap: var(--frame-density-gap-lg);
   --frame-switch-field-color: var(--frame-foreground);
   --frame-switch-field-disabled-color: var(--frame-muted-foreground);
-  --frame-switch-content-gap: 0.25rem;
+  --frame-switch-content-gap: var(--frame-density-gap-sm);
   --frame-switch-label-font-size: 0.875rem;
   --frame-switch-label-font-weight: 600;
   --frame-switch-description-color: var(--frame-muted-foreground);
@@ -16,7 +16,7 @@
   --frame-switch-sm-width: 1.75rem;
   --frame-switch-sm-height: 1rem;
   --frame-switch-sm-thumb-size: 0.75rem;
-  --frame-switch-radius: 0;
+  --frame-switch-radius: var(--frame-radius-sm);
   --frame-switch-bg: var(--frame-input);
   --frame-switch-hover-bg: color-mix(in srgb, var(--frame-input) 82%, var(--frame-foreground));
   --frame-switch-checked-bg: var(--frame-primary);

package/table/src/styles/_vars.css

@@ -1,25 +1,26 @@
-:root {
-  --frame-table-bg: var(--frame-surface);
-  --frame-table-color: var(--frame-foreground);
-  --frame-table-border: var(--frame-border);
-  --frame-table-radius: var(--frame-radius-lg);
-  --frame-table-shadow: none;
-  --frame-table-caption-color: var(--frame-muted-foreground);
-  --frame-table-caption-font-size: 0.875rem;
-  --frame-table-header-bg: color-mix(in srgb, var(--frame-muted) 70%, var(--frame-table-bg));
-  --frame-table-header-color: var(--frame-muted-foreground);
-  --frame-table-header-font-size: 0.8125rem;
-  --frame-table-header-font-weight: 650;
-  --frame-table-row-border: color-mix(in srgb, var(--frame-table-border) 78%, var(--frame-table-bg));
-  --frame-table-row-hover-bg: color-mix(in srgb, var(--frame-accent) 72%, var(--frame-table-bg));
-  --frame-table-row-selected-bg: color-mix(in srgb, var(--frame-primary) 10%, var(--frame-table-bg));
-  --frame-table-row-striped-bg: color-mix(in srgb, var(--frame-muted) 36%, var(--frame-table-bg));
-  --frame-table-cell-padding-block: 0.75rem;
-  --frame-table-cell-padding-inline: 1rem;
-  --frame-table-cell-font-size: 0.875rem;
-  --frame-table-cell-line-height: 1.45;
-  --frame-table-footer-bg: color-mix(in srgb, var(--frame-muted) 50%, var(--frame-table-bg));
-  --frame-table-footer-font-weight: 650;
-  --frame-table-transition-duration: 150ms;
-  --frame-table-sticky-shadow: 0 0 0 1px var(--frame-table-border);
-}
+:where(:root) {
+  --frame-table-bg: var(--frame-surface);
+  --frame-table-color: var(--frame-foreground);
+  --frame-table-border: var(--frame-border);
+  --frame-table-radius: var(--frame-radius-lg);
+  --frame-table-shadow: var(--frame-shadow-sm);
+  --frame-table-caption-color: var(--frame-muted-foreground);
+  --frame-table-caption-padding-block: var(--frame-density-gap-lg);
+  --frame-table-caption-font-size: 0.875rem;
+  --frame-table-header-bg: color-mix(in srgb, var(--frame-muted) 70%, var(--frame-table-bg));
+  --frame-table-header-color: var(--frame-muted-foreground);
+  --frame-table-header-font-size: 0.8125rem;
+  --frame-table-header-font-weight: 650;
+  --frame-table-row-border: color-mix(in srgb, var(--frame-table-border) 78%, var(--frame-table-bg));
+  --frame-table-row-hover-bg: color-mix(in srgb, var(--frame-accent) 72%, var(--frame-table-bg));
+  --frame-table-row-selected-bg: color-mix(in srgb, var(--frame-primary) 10%, var(--frame-table-bg));
+  --frame-table-row-striped-bg: color-mix(in srgb, var(--frame-muted) 36%, var(--frame-table-bg));
+  --frame-table-cell-padding-block: var(--frame-density-table-cell-padding-block);
+  --frame-table-cell-padding-inline: var(--frame-density-table-cell-padding-inline);
+  --frame-table-cell-font-size: 0.875rem;
+  --frame-table-cell-line-height: 1.45;
+  --frame-table-footer-bg: color-mix(in srgb, var(--frame-muted) 50%, var(--frame-table-bg));
+  --frame-table-footer-font-weight: 650;
+  --frame-table-transition-duration: 150ms;
+  --frame-table-sticky-shadow: 0 0 0 1px var(--frame-table-border);
+}

package/table/src/styles/table.css

@@ -1,245 +1,245 @@
-@import './_vars.css';
-
-[frTableContainer],
-frame-table-container {
-  display: block;
-  max-inline-size: 100%;
-  overflow: auto;
-  border-radius: var(--frame-table-radius);
-}
-
-[frTable],
-frame-table,
-.frame-table {
-  inline-size: 100%;
-  min-inline-size: max-content;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: var(--frame-table-bg);
-  color: var(--frame-table-color);
-  font-size: var(--frame-table-cell-font-size);
-  line-height: var(--frame-table-cell-line-height);
-  text-align: start;
-}
-
-[frTable][data-variant='outline'],
-frame-table[data-variant='outline'],
-.frame-table[data-variant='outline'] {
-  border: 1px solid var(--frame-table-border);
-  border-radius: var(--frame-table-radius);
-}
-
-[frTable][data-variant='card'],
-frame-table[data-variant='card'],
-.frame-table[data-variant='card'] {
-  border: 1px solid var(--frame-table-border);
-  border-radius: var(--frame-table-radius);
-  box-shadow: var(--frame-table-shadow);
-}
-
-[frTableCaption],
-frame-table-caption,
-caption[frTableCaption],
-.frame-table__caption {
-  caption-side: bottom;
-  padding-block: 0.75rem;
-  color: var(--frame-table-caption-color);
-  font-size: var(--frame-table-caption-font-size);
-  text-align: start;
-}
-
-[frTableHeader],
-frame-table-header,
-thead[frTableHeader],
-.frame-table__header {
-  background: var(--frame-table-header-bg);
-}
-
-[frTableFooter],
-frame-table-footer,
-tfoot[frTableFooter],
-.frame-table__footer {
-  background: var(--frame-table-footer-bg);
-  font-weight: var(--frame-table-footer-font-weight);
-}
-
-tr[frHeaderRow],
-tr[frRow],
-tr[frFooterRow],
-frame-header-row,
-frame-row,
-frame-footer-row,
-.frame-table__row {
-  transition: background-color var(--frame-table-transition-duration) ease;
-}
-
-tr[frHeaderRow] > *,
-tr[frRow] > *,
-tr[frFooterRow] > *,
-.frame-table__row > * {
-  border-block-end: 1px solid var(--frame-table-row-border);
-}
-
-tbody[frTableBody] tr:last-child > *,
-[frTableBody] .frame-table__row:last-child > *,
-frame-table-body .frame-table__row:last-child > * {
-  border-block-end: 0;
-}
-
-[frTable][data-hover='true'] tr[frRow]:hover,
-frame-table[data-hover='true'] frame-row:hover,
-.frame-table[data-hover='true'] .frame-table__row:hover {
-  background: var(--frame-table-row-hover-bg);
-}
-
-[frTable][data-striped='true'] tbody tr:nth-child(even),
-frame-table[data-striped='true'] frame-row:nth-child(even),
-.frame-table[data-striped='true'] .frame-table__body .frame-table__row:nth-child(even) {
-  background: var(--frame-table-row-striped-bg);
-}
-
-tr[frRow][data-selected='true'],
-frame-row[data-selected='true'],
-.frame-table__row[data-selected='true'] {
-  background: var(--frame-table-row-selected-bg);
-}
-
-th[frHeaderCell],
-td[frCell],
-td[frFooterCell],
-frame-header-cell,
-frame-cell,
-frame-footer-cell,
-.frame-table__head,
-.frame-table__cell {
-  padding-block: var(--frame-table-cell-padding-block);
-  padding-inline: var(--frame-table-cell-padding-inline);
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-th[frHeaderCell],
-frame-header-cell,
-.frame-table__head {
-  color: var(--frame-table-header-color);
-  font-size: var(--frame-table-header-font-size);
-  font-weight: var(--frame-table-header-font-weight);
-  text-align: start;
-  text-transform: none;
-}
-
-td[frFooterCell],
-frame-footer-cell,
-.frame-table__footer-cell {
-  font-weight: var(--frame-table-footer-font-weight);
-}
-
-[frTable][data-density='sm'],
-frame-table[data-density='sm'],
-.frame-table[data-density='sm'] {
-  --frame-table-cell-padding-block: 0.5rem;
-  --frame-table-cell-padding-inline: 0.75rem;
-  --frame-table-cell-font-size: 0.8125rem;
-}
-
-[frTable][data-density='lg'],
-frame-table[data-density='lg'],
-.frame-table[data-density='lg'] {
-  --frame-table-cell-padding-block: 1rem;
-  --frame-table-cell-padding-inline: 1.125rem;
-  --frame-table-cell-font-size: 0.9375rem;
-}
-
-[frTableNumeric],
-.frame-table__numeric {
-  text-align: end;
-  font-variant-numeric: tabular-nums;
-}
-
-.frame-table__muted {
-  color: var(--frame-muted-foreground);
-}
-
-.frame-table__sticky,
-.cdk-table-sticky {
-  z-index: 2;
-  background: var(--frame-table-bg);
-  background-clip: padding-box;
-  box-shadow: var(--frame-table-sticky-shadow);
-}
-
-thead .cdk-table-sticky,
-tfoot .cdk-table-sticky,
-tr[frHeaderRow].cdk-table-sticky,
-tr[frFooterRow].cdk-table-sticky,
-.frame-table__header-row .cdk-table-sticky,
-.frame-table__footer-row .cdk-table-sticky {
-  z-index: 3;
-  background: var(--frame-table-header-bg);
-}
-
-thead .cdk-table-sticky.cdk-table-sticky-border-elem-left,
-thead .cdk-table-sticky.cdk-table-sticky-border-elem-right {
-  z-index: 4;
-}
-
-tfoot .cdk-table-sticky,
-tr[frFooterRow].cdk-table-sticky,
-.frame-table__footer-row .cdk-table-sticky {
-  background: var(--frame-table-footer-bg);
-}
-
-[frTable][data-hover='true'] tr[frRow]:hover .cdk-table-sticky,
-.frame-table[data-hover='true'] .frame-table__row:hover .cdk-table-sticky {
-  background: var(--frame-table-row-hover-bg);
-}
-
-[frTableVirtual],
-.frame-table-virtual {
-  display: grid;
-  min-inline-size: 100%;
-  border: 1px solid var(--frame-table-border);
-  border-radius: var(--frame-table-radius);
-  background: var(--frame-table-bg);
-  color: var(--frame-table-color);
-  overflow: hidden;
-}
-
-[frTableVirtualHeader],
-[frTableVirtualRow],
-.frame-table-virtual__header,
-.frame-table-virtual__row {
-  display: grid;
-  grid-template-columns: var(--frame-table-virtual-columns, repeat(4, minmax(8rem, 1fr)));
-  align-items: center;
-  min-inline-size: max-content;
-}
-
-[frTableVirtualHeader],
-.frame-table-virtual__header {
-  background: var(--frame-table-header-bg);
-  color: var(--frame-table-header-color);
-  font-size: var(--frame-table-header-font-size);
-  font-weight: var(--frame-table-header-font-weight);
-}
-
-[frTableVirtualRow],
-.frame-table-virtual__row {
-  border-block-end: 1px solid var(--frame-table-row-border);
-  transition: background-color var(--frame-table-transition-duration) ease;
-}
-
-[frTableVirtualRow]:hover,
-.frame-table-virtual__row:hover {
-  background: var(--frame-table-row-hover-bg);
-}
-
-[frTableVirtualCell],
-.frame-table-virtual__cell {
-  min-inline-size: 0;
-  padding-block: var(--frame-table-cell-padding-block);
-  padding-inline: var(--frame-table-cell-padding-inline);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+@import './_vars.css';
+
+[frTableContainer],
+frame-table-container {
+  display: block;
+  max-inline-size: 100%;
+  overflow: auto;
+  border-radius: var(--frame-table-radius);
+}
+
+[frTable],
+frame-table,
+.frame-table {
+  inline-size: 100%;
+  min-inline-size: max-content;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--frame-table-bg);
+  color: var(--frame-table-color);
+  font-size: var(--frame-table-cell-font-size);
+  line-height: var(--frame-table-cell-line-height);
+  text-align: start;
+}
+
+[frTable][data-variant='outline'],
+frame-table[data-variant='outline'],
+.frame-table[data-variant='outline'] {
+  border: 1px solid var(--frame-table-border);
+  border-radius: var(--frame-table-radius);
+}
+
+[frTable][data-variant='card'],
+frame-table[data-variant='card'],
+.frame-table[data-variant='card'] {
+  border: 1px solid var(--frame-table-border);
+  border-radius: var(--frame-table-radius);
+  box-shadow: var(--frame-table-shadow);
+}
+
+[frTableCaption],
+frame-table-caption,
+caption[frTableCaption],
+.frame-table__caption {
+  caption-side: bottom;
+  padding-block: var(--frame-table-caption-padding-block);
+  color: var(--frame-table-caption-color);
+  font-size: var(--frame-table-caption-font-size);
+  text-align: start;
+}
+
+[frTableHeader],
+frame-table-header,
+thead[frTableHeader],
+.frame-table__header {
+  background: var(--frame-table-header-bg);
+}
+
+[frTableFooter],
+frame-table-footer,
+tfoot[frTableFooter],
+.frame-table__footer {
+  background: var(--frame-table-footer-bg);
+  font-weight: var(--frame-table-footer-font-weight);
+}
+
+tr[frHeaderRow],
+tr[frRow],
+tr[frFooterRow],
+frame-header-row,
+frame-row,
+frame-footer-row,
+.frame-table__row {
+  transition: background-color var(--frame-table-transition-duration) ease;
+}
+
+tr[frHeaderRow] > *,
+tr[frRow] > *,
+tr[frFooterRow] > *,
+.frame-table__row > * {
+  border-block-end: 1px solid var(--frame-table-row-border);
+}
+
+tbody[frTableBody] tr:last-child > *,
+[frTableBody] .frame-table__row:last-child > *,
+frame-table-body .frame-table__row:last-child > * {
+  border-block-end: 0;
+}
+
+[frTable][data-hover='true'] tr[frRow]:hover,
+frame-table[data-hover='true'] frame-row:hover,
+.frame-table[data-hover='true'] .frame-table__row:hover {
+  background: var(--frame-table-row-hover-bg);
+}
+
+[frTable][data-striped='true'] tbody tr:nth-child(even),
+frame-table[data-striped='true'] frame-row:nth-child(even),
+.frame-table[data-striped='true'] .frame-table__body .frame-table__row:nth-child(even) {
+  background: var(--frame-table-row-striped-bg);
+}
+
+tr[frRow][data-selected='true'],
+frame-row[data-selected='true'],
+.frame-table__row[data-selected='true'] {
+  background: var(--frame-table-row-selected-bg);
+}
+
+th[frHeaderCell],
+td[frCell],
+td[frFooterCell],
+frame-header-cell,
+frame-cell,
+frame-footer-cell,
+.frame-table__head,
+.frame-table__cell {
+  padding-block: var(--frame-table-cell-padding-block);
+  padding-inline: var(--frame-table-cell-padding-inline);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+th[frHeaderCell],
+frame-header-cell,
+.frame-table__head {
+  color: var(--frame-table-header-color);
+  font-size: var(--frame-table-header-font-size);
+  font-weight: var(--frame-table-header-font-weight);
+  text-align: start;
+  text-transform: none;
+}
+
+td[frFooterCell],
+frame-footer-cell,
+.frame-table__footer-cell {
+  font-weight: var(--frame-table-footer-font-weight);
+}
+
+[frTable][data-density='sm'],
+frame-table[data-density='sm'],
+.frame-table[data-density='sm'] {
+  --frame-table-cell-padding-block: var(--frame-density-table-cell-padding-block-sm);
+  --frame-table-cell-padding-inline: var(--frame-density-table-cell-padding-inline-sm);
+  --frame-table-cell-font-size: 0.8125rem;
+}
+
+[frTable][data-density='lg'],
+frame-table[data-density='lg'],
+.frame-table[data-density='lg'] {
+  --frame-table-cell-padding-block: var(--frame-density-table-cell-padding-block-lg);
+  --frame-table-cell-padding-inline: var(--frame-density-table-cell-padding-inline-lg);
+  --frame-table-cell-font-size: 0.9375rem;
+}
+
+[frTableNumeric],
+.frame-table__numeric {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.frame-table__muted {
+  color: var(--frame-muted-foreground);
+}
+
+.frame-table__sticky,
+.cdk-table-sticky {
+  z-index: 2;
+  background: var(--frame-table-bg);
+  background-clip: padding-box;
+  box-shadow: var(--frame-table-sticky-shadow);
+}
+
+thead .cdk-table-sticky,
+tfoot .cdk-table-sticky,
+tr[frHeaderRow].cdk-table-sticky,
+tr[frFooterRow].cdk-table-sticky,
+.frame-table__header-row .cdk-table-sticky,
+.frame-table__footer-row .cdk-table-sticky {
+  z-index: 3;
+  background: var(--frame-table-header-bg);
+}
+
+thead .cdk-table-sticky.cdk-table-sticky-border-elem-left,
+thead .cdk-table-sticky.cdk-table-sticky-border-elem-right {
+  z-index: 4;
+}
+
+tfoot .cdk-table-sticky,
+tr[frFooterRow].cdk-table-sticky,
+.frame-table__footer-row .cdk-table-sticky {
+  background: var(--frame-table-footer-bg);
+}
+
+[frTable][data-hover='true'] tr[frRow]:hover .cdk-table-sticky,
+.frame-table[data-hover='true'] .frame-table__row:hover .cdk-table-sticky {
+  background: var(--frame-table-row-hover-bg);
+}
+
+[frTableVirtual],
+.frame-table-virtual {
+  display: grid;
+  min-inline-size: 100%;
+  border: 1px solid var(--frame-table-border);
+  border-radius: var(--frame-table-radius);
+  background: var(--frame-table-bg);
+  color: var(--frame-table-color);
+  overflow: hidden;
+}
+
+[frTableVirtualHeader],
+[frTableVirtualRow],
+.frame-table-virtual__header,
+.frame-table-virtual__row {
+  display: grid;
+  grid-template-columns: var(--frame-table-virtual-columns, repeat(4, minmax(8rem, 1fr)));
+  align-items: center;
+  min-inline-size: max-content;
+}
+
+[frTableVirtualHeader],
+.frame-table-virtual__header {
+  background: var(--frame-table-header-bg);
+  color: var(--frame-table-header-color);
+  font-size: var(--frame-table-header-font-size);
+  font-weight: var(--frame-table-header-font-weight);
+}
+
+[frTableVirtualRow],
+.frame-table-virtual__row {
+  border-block-end: 1px solid var(--frame-table-row-border);
+  transition: background-color var(--frame-table-transition-duration) ease;
+}
+
+[frTableVirtualRow]:hover,
+.frame-table-virtual__row:hover {
+  background: var(--frame-table-row-hover-bg);
+}
+
+[frTableVirtualCell],
+.frame-table-virtual__cell {
+  min-inline-size: 0;
+  padding-block: var(--frame-table-cell-padding-block);
+  padding-inline: var(--frame-table-cell-padding-inline);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/tabs/src/styles/_vars.css

@@ -1,23 +1,25 @@
-:root {
-  --frame-tabs-gap: 1rem;
-  --frame-tabs-list-gap: 0.25rem;
-  --frame-tabs-list-padding: 0.25rem;
-  --frame-tabs-list-bg: var(--frame-muted, #f4f4f5);
+:where(:root) {
+  --frame-tabs-gap: var(--frame-density-gap-xl);
+  --frame-tabs-list-gap: var(--frame-density-gap-sm);
+  --frame-tabs-list-padding: var(--frame-density-gap-sm);
+  --frame-tabs-list-bg: var(--frame-muted);
   --frame-tabs-list-border: transparent;
-  --frame-tabs-list-radius: var(--frame-radius-lg, 0.75rem);
-  --frame-tabs-trigger-height: 2.25rem;
-  --frame-tabs-trigger-padding-x: 0.875rem;
-  --frame-tabs-trigger-radius: var(--frame-radius-md, 0.5rem);
+  --frame-tabs-list-radius: var(--frame-radius-lg);
+  --frame-tabs-trigger-height: var(--frame-density-control-height-md);
+  --frame-tabs-trigger-padding-x: var(--frame-density-control-padding-x-md);
+  --frame-tabs-trigger-radius: var(--frame-radius-md);
   --frame-tabs-trigger-bg: transparent;
-  --frame-tabs-trigger-color: var(--frame-muted-foreground, #71717a);
-  --frame-tabs-trigger-hover-bg: color-mix(in srgb, var(--frame-background, #fff) 62%, transparent);
-  --frame-tabs-trigger-hover-color: var(--frame-foreground, #09090b);
-  --frame-tabs-trigger-active-bg: var(--frame-background, #fff);
-  --frame-tabs-trigger-active-color: var(--frame-foreground, #09090b);
+  --frame-tabs-trigger-color: var(--frame-muted-foreground);
+  --frame-tabs-trigger-hover-bg: color-mix(in srgb, var(--frame-background) 62%, transparent);
+  --frame-tabs-trigger-hover-color: var(--frame-foreground);
+  --frame-tabs-trigger-active-bg: var(--frame-background);
+  --frame-tabs-trigger-active-color: var(--frame-foreground);
   --frame-tabs-trigger-active-shadow: none;
   --frame-tabs-trigger-focus-shadow: none;
   --frame-tabs-trigger-disabled-opacity: 0.5;
-  --frame-tabs-line-color: var(--frame-border, #e5e7eb);
-  --frame-tabs-line-active-color: var(--frame-primary, #18181b);
-  --frame-tabs-content-padding: 1rem 0 0;
+  --frame-tabs-line-list-gap: var(--frame-density-gap-xl);
+  --frame-tabs-line-trigger-padding-x: var(--frame-density-control-padding-x-sm);
+  --frame-tabs-line-color: var(--frame-border);
+  --frame-tabs-line-active-color: var(--frame-primary);
+  --frame-tabs-content-padding: var(--frame-density-gap-xl) 0 0;
 }