@ostack.tech/ui 0.1.0

package/scss/components/Table/_Table-variables.scss

@@ -0,0 +1,471 @@
+@use "../Label/Label-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$table-font-size: var(--#{$prefix}font-size-sm) !default;
+$table-line-height: var(--#{$prefix}line-height-sm) !default;
+
+// Default variant
+$table-default-border-radius: null !default;
+$table-default-border-width: 0 0 1px !default;
+$table-default-border-color: var(--#{$prefix}neutral-5) !default;
+
+// Default variant - Status
+$table-default-status-border-color: null !default;
+
+// Default variant - Focus
+$table-default-focus-border-radius: $control-border-radius !default;
+$table-default-focus-border-color: transparent !default;
+$table-default-focus-box-shadow: (
+  0 0 0 2px $control-focus-border-color
+) !default;
+
+// Default variant - Focus + Status
+$table-default-focus-status-border-color: transparent !default;
+$table-default-focus-status-box-shadow: 0 0 0 2px
+  $control-focus-status-border-color !default;
+
+// Control variant
+$table-control-border-radius: $control-border-radius !default;
+$table-control-border-width: $control-border-width !default;
+$table-control-border-color: $control-border-color !default;
+
+// Control variant - Status
+$table-control-status-border-color: $control-status-border-color !default;
+
+// Control variant - Focus
+$table-control-focus-border-radius: null !default;
+$table-control-focus-border-color: $control-focus-border-color !default;
+$table-control-focus-box-shadow: $control-focus-box-shadow !default;
+
+// Control variant - Focus + status
+$table-control-focus-status-border-color: $control-focus-status-border-color !default;
+$table-control-focus-status-box-shadow: $control-focus-status-box-shadow !default;
+
+// Head/Foot - Stuck
+$table-head-foot-stuck-z-index: calc(
+  var(--#{$prefix}z-index-docked) + 1
+) !default;
+$table-head-foot-stuck-shadow-size: 8px !default;
+$table-head-foot-stuck-shadow-color: var(--#{$prefix}neutral-a3) !default;
+
+// Head - Default variant
+$table-head-default-border-width: 1px !default;
+$table-head-default-border-color: var(--#{$prefix}neutral-6) !default;
+
+// Head - Default variant - Status
+$table-head-default-status-border-color: var(--#{$prefix}accent-6) !default;
+
+// Head - Control variant
+$table-head-control-border-width: 1px !default;
+$table-head-control-border-color: var(--#{$prefix}neutral-6) !default;
+
+// Head - Control variant - Status
+$table-head-control-status-border-color: var(--#{$prefix}accent-6) !default;
+
+// Head cell
+$table-head-cell-vertical-align: bottom !default;
+
+// Head cell - Default variant - Header
+$table-head-cell-default-header-border-color: var(
+  --#{$prefix}neutral-5
+) !default;
+$table-head-cell-default-header-background-color: null !default;
+$table-head-cell-default-header-color: null !default;
+$table-head-cell-default-header-font-weight: $font-weight-bold !default;
+$table-head-cell-default-header-text-transform: null !default;
+
+// Head cell - Default variant - Header + Status
+$table-head-cell-default-header-status-border-color: var(
+  --#{$prefix}accent-5
+) !default;
+$table-head-cell-default-header-status-background-color: null !default;
+$table-head-cell-default-header-status-color: var(
+  --#{$prefix}accent-12
+) !default;
+
+// Head - Cell - Control variant - Header
+$table-head-cell-control-header-border-color: var(
+  --#{$prefix}neutral-5
+) !default;
+$table-head-cell-control-header-background-color: var(
+  --#{$prefix}neutral-3
+) !default;
+$table-head-cell-control-header-color: null !default;
+$table-head-cell-control-header-font-weight: $font-weight-bold !default;
+$table-head-cell-control-header-text-transform: null !default;
+
+// Head - Cell - Control variant - Header + Status
+$table-head-cell-control-header-status-border-color: var(
+  --#{$prefix}accent-5
+) !default;
+$table-head-cell-control-header-status-background-color: var(
+  --#{$prefix}accent-3
+) !default;
+$table-head-cell-control-header-status-color: var(
+  --#{$prefix}accent-12
+) !default;
+
+// Foot - Default variant
+$table-foot-default-border-width: $table-head-default-border-width !default;
+$table-foot-default-border-color: $table-head-default-border-color !default;
+
+// Foot - Default variant - Status
+$table-foot-default-status-border-color: $table-head-default-status-border-color !default;
+
+// Foot - Control variant
+$table-foot-control-border-width: $table-head-control-border-width !default;
+$table-foot-control-border-color: $table-head-control-border-color !default;
+
+// Foot - Control variant - Status
+$table-foot-control-status-border-color: $table-head-control-status-border-color !default;
+
+// Foot cell - Default variant - Header
+$table-foot-cell-default-header-border-color: $table-head-cell-default-header-border-color !default;
+$table-foot-cell-default-header-background-color: null !default;
+$table-foot-cell-default-header-color: $table-head-cell-default-header-color !default;
+$table-foot-cell-default-header-font-weight: $table-head-cell-default-header-font-weight !default;
+$table-foot-cell-default-header-text-transform: $table-head-cell-default-header-text-transform !default;
+
+// Foot cell - Default variant - Header + Status
+$table-foot-cell-default-header-status-border-color: $table-head-cell-default-header-status-border-color !default;
+$table-foot-cell-default-header-status-background-color: null !default;
+$table-foot-cell-default-header-status-color: $table-head-cell-default-header-status-color;
+
+// Foot - Cell - Control variant - Header
+$table-foot-cell-control-header-border-color: $table-head-cell-control-header-border-color !default;
+$table-foot-cell-control-header-background-color: null !default;
+$table-foot-cell-control-header-color: $table-head-cell-control-header-color !default;
+$table-foot-cell-control-header-font-weight: $table-head-cell-control-header-font-weight !default;
+$table-foot-cell-control-header-text-transform: $table-head-cell-control-header-text-transform !default;
+
+// Foot - Cell - Control variant - Header + Status
+$table-foot-cell-control-header-status-border-color: $table-head-cell-control-header-status-border-color !default;
+$table-foot-cell-control-header-status-background-color: null !default;
+$table-foot-cell-control-header-status-color: $table-head-cell-control-header-status-color !default;
+
+// Row - Default variant - Unframed cell + Odd
+$table-row-default-unframed-odd-background-color: null !default;
+
+// Row - Default variant - Unframed cell + Odd + Status
+$table-row-default-unframed-odd-status-background-color: null !default;
+
+// Row - Control variant - Unframed cell + Odd
+$table-row-control-unframed-odd-background-color: null !default;
+
+// Row - Control variant - Unframed cell + Odd - Status
+$table-row-control-unframed-odd-status-background-color: null !default;
+
+// Cell
+$table-cell-padding-y: spacing(2.5) !default;
+$table-cell-padding-x: spacing(3) !default;
+$table-cell-font-weight: $font-weight-normal !default;
+$table-cell-border-width: 1px !default;
+$table-cell-border-color: var(--#{$prefix}neutral-5) !default;
+$table-cell-background-color: var(--#{$prefix}background-color) !default;
+
+// Cell - Framed
+$table-cell-framed-border-width: 1px !default;
+
+// Cell - Default variant
+$table-cell-default-padding-y: null !default;
+$table-cell-default-padding-x: null !default;
+$table-cell-default-border-style: null !default;
+$table-cell-default-border-color: null !default;
+
+// Cell - Default variant - Header + Framed
+$table-cell-default-header-framed-border-color: null !default;
+$table-cell-default-header-framed-background-color: null !default;
+$table-cell-default-header-framed-color: null !default;
+$table-cell-default-header-framed-font-weight: null !default;
+
+// Cell -  Default variant - Header + Framed + Status
+$table-cell-default-header-framed-status-border-color: null !default;
+$table-cell-default-header-framed-status-background-color: null !default;
+$table-cell-default-header-framed-status-color: null !default;
+
+// Cell - Control variant
+$table-cell-control-padding-y: null !default;
+$table-cell-control-padding-x: null !default;
+$table-cell-control-border-style: null !default;
+$table-cell-control-border-color: null !default;
+
+// Cell - Control variant - Header + Framed
+$table-cell-control-header-framed-border-color: null !default;
+$table-cell-control-header-framed-background-color: var(
+  --#{$prefix}neutral-2
+) !default;
+$table-cell-control-header-framed-color: null !default;
+$table-cell-control-header-framed-font-weight: null !default;
+
+// Cell - Control variant - Header + Framed + Status
+$table-cell-control-header-framed-status-border-color: var(
+  --#{$prefix}accent-5
+) !default;
+$table-cell-control-header-framed-status-background-color: var(
+  --#{$prefix}accent-2
+) !default;
+$table-cell-control-header-framed-status-color: var(
+  --#{$prefix}accent-12
+) !default;
+
+// Cell - Empty
+$table-cell-empty-background-gradient-lines-color: var(
+  --#{$prefix}neutral-a3
+) !default;
+$table-cell-empty-background-gradient-lines-width: 1px !default;
+$table-cell-empty-background-gradient-background-color: var(
+  --#{$prefix}neutral-a2
+) !default;
+$table-cell-empty-background-gradient-angle: -45deg !default;
+$table-cell-empty-background-image: repeating-linear-gradient(
+  $table-cell-empty-background-gradient-angle,
+  $table-cell-empty-background-gradient-lines-color 0,
+  $table-cell-empty-background-gradient-lines-color
+    $table-cell-empty-background-gradient-lines-width,
+  $table-cell-empty-background-gradient-background-color 0,
+  $table-cell-empty-background-gradient-background-color 50%
+) !default;
+$table-cell-empty-background-size: 10px 10px !default;
+
+// Cell - Stuck
+$table-cell-stuck-z-index: var(--#{$prefix}z-index-docked) !default;
+$table-cell-stuck-shadow-size: $table-head-foot-stuck-shadow-size !default;
+$table-cell-stuck-shadow-color: $table-head-foot-stuck-shadow-color !default;
+
+// Column sort button
+$table-column-sort-button-padding-y: spacing(1) !default;
+$table-column-sort-button-padding-x: spacing(2) !default;
+
+// Column sort button icon
+$table-column-sort-button-icon-height: 14px !default;
+$table-column-sort-button-icon-width: 18px !default;
+$table-column-sort-button-icon-margin-x: spacing(2) !default;
+$table-column-sort-button-icon-margin-x-offset: spacing(-1) !default;
+
+// Column sort button icon - Inactive
+$table-column-sort-button-icon-inactive-opacity: 0.25 !default;
+
+// Column helper button
+$table-column-helper-button-padding: spacing(1) !default;
+$table-column-helper-button-font-size: var(--#{$prefix}font-size-xs) !default;
+$table-column-helper-button-color: null !default;
+
+// Column helper popover
+$table-column-helper-popover-max-width: $label-helper-popover-max-width !default;
+$table-column-helper-popover-max-height: $label-helper-popover-max-height !default;
+$table-column-helper-popover-padding-y: $label-helper-popover-padding-y !default;
+$table-column-helper-popover-padding-x: $label-helper-popover-padding-x !default;
+
+// Variants
+$table-variants: default, control !default;
+
+$table-border-radius-by-variant: (
+  default: $table-default-border-radius,
+  control: $table-control-border-radius,
+) !default;
+$table-border-width-by-variant: (
+  default: $table-default-border-width,
+  control: $table-control-border-width,
+) !default;
+$table-border-color-by-variant: (
+  default: $table-default-border-color,
+  control: $table-control-border-color,
+) !default;
+
+// Variants - Status
+$table-status-border-color-by-variant: (
+  default: $table-default-status-border-color,
+  control: $table-control-status-border-color,
+) !default;
+
+// Variants - Focus
+$table-focus-border-radius-by-variant: (
+  default: $table-default-focus-border-radius,
+  control: $table-control-focus-border-radius,
+) !default;
+$table-focus-border-color-by-variant: (
+  default: $table-default-focus-border-color,
+  control: $table-control-focus-border-color,
+) !default;
+$table-focus-box-shadow-by-variant: (
+  default: $table-default-focus-box-shadow,
+  control: $table-control-focus-box-shadow,
+) !default;
+
+// Variants - Focus + Status
+$table-focus-status-border-color-by-variant: (
+  default: $table-default-focus-status-border-color,
+  control: $table-control-focus-status-border-color,
+) !default;
+$table-focus-status-box-shadow-by-variant: (
+  default: $table-default-focus-status-box-shadow,
+  control: $table-control-focus-status-box-shadow,
+) !default;
+
+// Variants - Head
+$table-head-border-width-by-variant: (
+  default: $table-head-default-border-width,
+  control: $table-head-control-border-width,
+) !default;
+$table-head-border-color-by-variant: (
+  default: $table-head-default-border-color,
+  control: $table-head-control-border-color,
+) !default;
+
+// Variants - Head - Status
+$table-head-status-border-color-by-variant: (
+  default: $table-head-default-status-border-color,
+  control: $table-head-control-status-border-color,
+) !default;
+
+// Variants - Head cell - Header
+$table-head-cell-header-border-color-by-variant: (
+  default: $table-head-cell-default-header-border-color,
+  control: $table-head-cell-control-header-border-color,
+) !default;
+$table-head-cell-header-background-color-by-variant: (
+  default: $table-head-cell-default-header-background-color,
+  control: $table-head-cell-control-header-background-color,
+) !default;
+$table-head-cell-header-color-by-variant: (
+  default: $table-head-cell-default-header-color,
+  control: $table-head-cell-control-header-color,
+) !default;
+$table-head-cell-header-font-weight-by-variant: (
+  default: $table-head-cell-default-header-font-weight,
+  control: $table-head-cell-control-header-font-weight,
+) !default;
+$table-head-cell-header-text-transform-by-variant: (
+  default: $table-head-cell-default-header-text-transform,
+  control: $table-head-cell-control-header-text-transform,
+) !default;
+
+// Variants - Head cell - Header + Status
+$table-head-cell-header-status-border-color-by-variant: (
+  default: $table-head-cell-default-header-status-border-color,
+  control: $table-head-cell-control-header-status-border-color,
+) !default;
+$table-head-cell-header-status-background-color-by-variant: (
+  default: $table-head-cell-default-header-status-background-color,
+  control: $table-head-cell-control-header-status-background-color,
+) !default;
+$table-head-cell-header-status-color-by-variant: (
+  default: $table-head-cell-default-header-status-color,
+  control: $table-head-cell-control-header-status-color,
+) !default;
+
+// Variants - Foot
+$table-foot-border-width-by-variant: (
+  default: $table-foot-default-border-width,
+  control: $table-foot-control-border-width,
+) !default;
+$table-foot-border-color-by-variant: (
+  default: $table-foot-default-border-color,
+  control: $table-foot-control-border-color,
+) !default;
+
+// Variants - Foot - Status
+$table-foot-status-border-color-by-variant: (
+  default: $table-foot-default-status-border-color,
+  control: $table-foot-control-status-border-color,
+) !default;
+
+// Variants - Foot cell - Header
+$table-foot-cell-header-border-color-by-variant: (
+  default: $table-foot-cell-default-header-border-color,
+  control: $table-foot-cell-control-header-border-color,
+) !default;
+$table-foot-cell-header-background-color-by-variant: (
+  default: $table-foot-cell-default-header-background-color,
+  control: $table-foot-cell-control-header-background-color,
+) !default;
+$table-foot-cell-header-color-by-variant: (
+  default: $table-foot-cell-default-header-color,
+  control: $table-foot-cell-control-header-color,
+) !default;
+$table-foot-cell-header-font-weight-by-variant: (
+  default: $table-foot-cell-default-header-font-weight,
+  control: $table-foot-cell-control-header-font-weight,
+) !default;
+$table-foot-cell-header-text-transform-by-variant: (
+  default: $table-foot-cell-default-header-text-transform,
+  control: $table-foot-cell-control-header-text-transform,
+) !default;
+
+// Variants - Foot cell - Header + Status
+$table-foot-cell-header-status-border-color-by-variant: (
+  default: $table-foot-cell-default-header-status-border-color,
+  control: $table-foot-cell-control-header-status-border-color,
+) !default;
+$table-foot-cell-header-status-background-color-by-variant: (
+  default: $table-foot-cell-default-header-status-background-color,
+  control: $table-foot-cell-control-header-status-background-color,
+) !default;
+$table-foot-cell-header-status-color-by-variant: (
+  default: $table-foot-cell-default-header-status-color,
+  control: $table-foot-cell-control-header-status-color,
+) !default;
+
+// Variants - Row - Odd + Unframed cell
+$table-row-unframed-odd-background-color-by-variant: (
+  default: $table-row-default-unframed-odd-background-color,
+  control: $table-row-control-unframed-odd-background-color,
+) !default;
+
+// Variants - Row - Odd + Unframed cell - Status
+$table-row-unframed-odd-status-background-color-by-variant: (
+  default: $table-row-default-unframed-odd-status-background-color,
+  control: $table-row-control-unframed-odd-status-background-color,
+) !default;
+
+// Variants - Cell
+$table-cell-padding-y-by-variant: (
+  default: $table-cell-default-padding-y,
+  control: $table-cell-control-padding-y,
+) !default;
+$table-cell-padding-x-by-variant: (
+  default: $table-cell-default-padding-x,
+  control: $table-cell-control-padding-x,
+) !default;
+$table-cell-border-style-by-variant: (
+  default: $table-cell-default-border-style,
+  control: $table-cell-control-border-style,
+) !default;
+$table-cell-border-color-by-variant: (
+  default: $table-cell-default-border-color,
+  control: $table-cell-control-border-color,
+) !default;
+
+// Variants - Cell - Framed + Header
+$table-cell-header-framed-border-color-by-variant: (
+  default: $table-cell-default-header-framed-border-color,
+  control: $table-cell-control-header-framed-border-color,
+) !default;
+$table-cell-header-framed-background-color-by-variant: (
+  default: $table-cell-default-header-framed-background-color,
+  control: $table-cell-control-header-framed-background-color,
+) !default;
+$table-cell-header-framed-color-by-variant: (
+  default: $table-cell-default-header-framed-color,
+  control: $table-cell-control-header-framed-color,
+) !default;
+$table-cell-header-framed-font-weight-by-variant: (
+  default: $table-cell-default-header-framed-font-weight,
+  control: $table-cell-control-header-framed-font-weight,
+) !default;
+
+// Variants - Cell - Framed + Header + Status
+$table-cell-header-framed-status-border-color-by-variant: (
+  default: $table-cell-default-header-framed-status-border-color,
+  control: $table-cell-control-header-framed-status-border-color,
+);
+$table-cell-header-framed-status-background-color-by-variant: (
+  default: $table-cell-default-header-framed-status-background-color,
+  control: $table-cell-control-header-framed-status-background-color,
+);
+$table-cell-header-framed-status-color-by-variant: (
+  default: $table-cell-default-header-framed-status-color,
+  control: $table-cell-control-header-framed-status-color,
+);