@viasat/beam-styles 2.48.1 → 2.49.0

package/components/dataTable.module.scss

@@ -0,0 +1,97 @@
+@use 'sass:map';
+@use './../utils/tokens.scss' as tokens;
+@use './dataTable.vars.scss' as dataTableVars;
+
+@import '@viasat/beam-tokens/components/DataTable';
+
+$dataTableBaseClass: dataTableVars.$dataTableBaseClass;
+
+$dataTableDensity: (
+  'sm': (
+    'cell-height': tokens.$bm-comp-data-table-size-cell-sm-height,
+    'cell-y': tokens.$bm-comp-data-table-space-cell-sm-y,
+  ),
+  'md': (
+    'cell-height': tokens.$bm-comp-data-table-size-cell-md-height,
+    'cell-y': tokens.$bm-comp-data-table-space-cell-md-y,
+  ),
+  'lg': (
+    'cell-height': tokens.$bm-comp-data-table-size-cell-lg-height,
+    'cell-y': tokens.$bm-comp-data-table-space-cell-lg-y,
+  ),
+);
+
+.#{$dataTableBaseClass}-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .#{$dataTableBaseClass}__toolbar {
+    color: tokens.$bm-comp-data-table-color-header-body;
+    text-align: start;
+    padding-inline: tokens.$bm-comp-data-table-space-x;
+    padding-block: tokens.$bm-comp-data-table-space-header-md-y;
+  }
+}
+
+.#{$dataTableBaseClass} {
+  width: 100%;
+  border-collapse: collapse;
+  background: tokens.$bm-comp-data-table-color-bg;
+  border-radius: tokens.$bm-comp-data-table-radius;
+  color: tokens.$bm-comp-data-table-color-cell-text;
+
+  &__header {
+    color: tokens.$bm-comp-data-table-color-header-heading;
+    font: tokens.$bm-comp-data-table-typo-col-header;
+    text-align: start;
+    padding-inline: tokens.$bm-comp-data-table-space-x;
+    padding-block: tokens.$bm-comp-data-table-space-header-md-y;
+  }
+
+  &__head {
+    background: tokens.$bm-comp-data-table-color-col-header-bg;
+  }
+
+  &__column-header {
+    background: tokens.$bm-comp-data-table-color-col-header-bg;
+    color: tokens.$bm-comp-data-table-color-col-header-text;
+    font: tokens.$bm-comp-data-table-typo-col-header;
+    text-align: start;
+  }
+
+  &__body {
+    background: tokens.$bm-comp-data-table-color-bg;
+  }
+
+  &__row {
+    &:nth-of-type(even) {
+      background: tokens.$bm-comp-data-table-color-zebra;
+    }
+  }
+
+  &__cell {
+    font: tokens.$bm-comp-data-table-typo-cell;
+    color: tokens.$bm-comp-data-table-color-cell-text;
+    border-bottom: tokens.$bm-sem-border-width-md solid
+      tokens.$bm-comp-data-table-color-border;
+  }
+
+  &__footer {
+    color: tokens.$bm-comp-data-table-color-cell-text;
+    padding-inline: tokens.$bm-comp-data-table-space-x;
+    padding-block: tokens.$bm-comp-data-table-space-footer-md-y;
+  }
+}
+
+// Density modifiers (sm / md / lg)
+@each $density, $props in $dataTableDensity {
+  .#{$dataTableBaseClass}--#{$density} {
+    .#{$dataTableBaseClass}__cell,
+    .#{$dataTableBaseClass}__column-header {
+      height: map.get($props, 'cell-height');
+      padding-block: map.get($props, 'cell-y');
+      padding-inline: tokens.$bm-comp-data-table-space-x;
+    }
+  }
+}

package/components/dataTable.vars.scss

@@ -0,0 +1,3 @@
+@use './../utils/constants.scss';
+
+$dataTableBaseClass: '#{constants.$prefix}data-table';

package/components/index.scss

@@ -15,6 +15,7 @@
 @use './chipsGroup.module.scss';
 @use './closeButton.module.scss';
 @use './combobox.module.scss';
+@use './dataTable.module.scss';
 @use './dateField.module.scss';
 @use './dialog.module.scss';
 @use './divider.module.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-styles",
-  "version": "2.48.1",
+  "version": "2.49.0",
   "description": "SCSS modules and component styles for the Beam Design System",
   "license": "MIT",
   "author": "Viasat",

package/styles.css

@@ -6234,6 +6234,304 @@ textarea:focus-visible,
   overflow-y: auto;
 }
 
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~=bm-dark] .bm-inverse,
+[data-bm-theme~=bm-dark].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
+[data-bm-theme~=bm-light] {
+  --bm-comp-data-table-color-bg: var(--bm-sem-color-surface-01, #ffffff);
+  --bm-comp-data-table-color-border: var(--bm-sem-color-border-01, #dfe7ec);
+  --bm-comp-data-table-color-zebra: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-data-table-color-header-heading: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-data-table-color-header-body: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-data-table-color-col-header-bg: var(
+    --bm-sem-color-surface-transparent,
+    #ffffff00
+  );
+  --bm-comp-data-table-color-col-header-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-data-table-color-col-header-group-bg: var(
+    --bm-sem-color-surface-highlight,
+    rgba(159, 175, 188, 0.16)
+  );
+  --bm-comp-data-table-color-col-header-group-text: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-data-table-color-cell-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-data-table-color-cell-text-supporting: var(
+    --bm-sem-color-text-secondary,
+    #576775
+  );
+  --bm-comp-data-table-color-cell-icon: var(
+    --bm-sem-color-icon-secondary,
+    #576775
+  );
+  --bm-comp-data-table-space-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-header-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-header-sm-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-header-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-header-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-col-header-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-data-table-space-col-header-group-height: var(
+    --bm-primitive-dimension-200,
+    2rem
+  );
+  --bm-comp-data-table-space-cell-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-cell-sm-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-cell-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-cell-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-footer-sm-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-footer-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-footer-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-section-inner-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-data-table-space-section-sm-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-section-md-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-section-lg-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-typo-cell: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-cell-emphisis: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-cell-supporting: var(
+    --bm-sem-typo-compact-body-xs,
+    400 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-col-header: var(
+    --bm-sem-typo-compact-label-sm,
+    600 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-col-header-group: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-size-col-header-group-height: var(
+    --bm-primitive-dimension-225,
+    2.25rem
+  );
+  --bm-comp-data-table-size-cell-sm-height: var(
+    --bm-primitive-dimension-275,
+    2.75rem
+  );
+  --bm-comp-data-table-size-cell-md-height: var(
+    --bm-primitive-dimension-325,
+    3.25rem
+  );
+  --bm-comp-data-table-size-cell-lg-height: var(
+    --bm-primitive-dimension-375,
+    3.75rem
+  );
+  --bm-comp-data-table-size-cell-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-data-table-radius: var(--bm-sem-radius-md, 0.5rem);
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~=bm-light] .bm-inverse,
+[data-bm-theme~=bm-light].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
+[data-bm-theme~=bm-dark] {
+  --bm-comp-data-table-color-bg: var(--bm-sem-color-surface-01, #202e39);
+  --bm-comp-data-table-color-border: var(--bm-sem-color-border-01, #32424e);
+  --bm-comp-data-table-color-zebra: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-data-table-color-header-heading: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-data-table-color-header-body: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-data-table-color-col-header-bg: var(
+    --bm-sem-color-surface-transparent,
+    #ffffff00
+  );
+  --bm-comp-data-table-color-col-header-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-data-table-color-col-header-group-bg: var(
+    --bm-sem-color-surface-highlight,
+    rgba(134, 151, 165, 0.16)
+  );
+  --bm-comp-data-table-color-col-header-group-text: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-data-table-color-cell-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-data-table-color-cell-text-supporting: var(
+    --bm-sem-color-text-secondary,
+    #c3cdd5
+  );
+  --bm-comp-data-table-color-cell-icon: var(
+    --bm-sem-color-icon-secondary,
+    #c3cdd5
+  );
+  --bm-comp-data-table-space-x: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-header-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-header-sm-x: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-header-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-header-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-col-header-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-data-table-space-col-header-group-height: var(
+    --bm-primitive-dimension-200,
+    2rem
+  );
+  --bm-comp-data-table-space-cell-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-cell-sm-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-cell-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-cell-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-footer-sm-x: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-footer-md-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-space-footer-lg-y: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-data-table-space-section-inner-y: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-data-table-space-section-sm-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-data-table-space-section-md-y: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-data-table-space-section-lg-y: var(--bm-sem-space-100, 1rem);
+  --bm-comp-data-table-typo-cell: var(
+    --bm-sem-typo-body-sm,
+    400 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-cell-emphisis: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-cell-supporting: var(
+    --bm-sem-typo-compact-body-xs,
+    400 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-col-header: var(
+    --bm-sem-typo-compact-label-sm,
+    600 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-typo-col-header-group: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-data-table-size-col-header-group-height: var(
+    --bm-primitive-dimension-225,
+    2.25rem
+  );
+  --bm-comp-data-table-size-cell-sm-height: var(
+    --bm-primitive-dimension-275,
+    2.75rem
+  );
+  --bm-comp-data-table-size-cell-md-height: var(
+    --bm-primitive-dimension-325,
+    3.25rem
+  );
+  --bm-comp-data-table-size-cell-lg-height: var(
+    --bm-primitive-dimension-375,
+    3.75rem
+  );
+  --bm-comp-data-table-size-cell-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-data-table-radius: var(--bm-sem-radius-md, 0.5rem);
+}
+
+.bm-data-table-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.bm-data-table-container .bm-data-table__toolbar {
+  color: var(--bm-comp-data-table-color-header-body);
+  text-align: start;
+  padding-inline: var(--bm-comp-data-table-space-x);
+  padding-block: var(--bm-comp-data-table-space-header-md-y);
+}
+
+.bm-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--bm-comp-data-table-color-bg);
+  border-radius: var(--bm-comp-data-table-radius);
+  color: var(--bm-comp-data-table-color-cell-text);
+}
+.bm-data-table__header {
+  color: var(--bm-comp-data-table-color-header-heading);
+  font: var(--bm-comp-data-table-typo-col-header);
+  text-align: start;
+  padding-inline: var(--bm-comp-data-table-space-x);
+  padding-block: var(--bm-comp-data-table-space-header-md-y);
+}
+.bm-data-table__head {
+  background: var(--bm-comp-data-table-color-col-header-bg);
+}
+.bm-data-table__column-header {
+  background: var(--bm-comp-data-table-color-col-header-bg);
+  color: var(--bm-comp-data-table-color-col-header-text);
+  font: var(--bm-comp-data-table-typo-col-header);
+  text-align: start;
+}
+.bm-data-table__body {
+  background: var(--bm-comp-data-table-color-bg);
+}
+.bm-data-table__row:nth-of-type(even) {
+  background: var(--bm-comp-data-table-color-zebra);
+}
+.bm-data-table__cell {
+  font: var(--bm-comp-data-table-typo-cell);
+  color: var(--bm-comp-data-table-color-cell-text);
+  border-bottom: var(--bm-sem-border-width-md) solid var(--bm-comp-data-table-color-border);
+}
+.bm-data-table__footer {
+  color: var(--bm-comp-data-table-color-cell-text);
+  padding-inline: var(--bm-comp-data-table-space-x);
+  padding-block: var(--bm-comp-data-table-space-footer-md-y);
+}
+
+.bm-data-table--sm .bm-data-table__cell,
+.bm-data-table--sm .bm-data-table__column-header {
+  height: var(--bm-comp-data-table-size-cell-sm-height);
+  padding-block: var(--bm-comp-data-table-space-cell-sm-y);
+  padding-inline: var(--bm-comp-data-table-space-x);
+}
+
+.bm-data-table--md .bm-data-table__cell,
+.bm-data-table--md .bm-data-table__column-header {
+  height: var(--bm-comp-data-table-size-cell-md-height);
+  padding-block: var(--bm-comp-data-table-space-cell-md-y);
+  padding-inline: var(--bm-comp-data-table-space-x);
+}
+
+.bm-data-table--lg .bm-data-table__cell,
+.bm-data-table--lg .bm-data-table__column-header {
+  height: var(--bm-comp-data-table-size-cell-lg-height);
+  padding-block: var(--bm-comp-data-table-space-cell-lg-y);
+  padding-inline: var(--bm-comp-data-table-space-x);
+}
+
 :root,
 :host,
 .bm-light,