@ostack.tech/ui 0.1.0

package/scss/components/Tabs/_Tabs-variables.scss

@@ -0,0 +1,403 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+// Tab list - Default
+$tabs-tab-list-default-gap-x: null !default;
+$tabs-tab-list-default-margin-bottom: null !default;
+$tabs-tab-list-default-box-shadow: inset 0 -1px 0 0 var(--#{$prefix}neutral-5) !default;
+
+// Tab list - Annexes
+$tabs-tab-list-annexes-gap-x: spacing(0.5) !default;
+$tabs-tab-list-annexes-margin-bottom: 2px !default;
+$tabs-tab-list-annexes-box-shadow: 0 2px 0 0 var(--#{$prefix}primary-9) !default;
+
+// Tab
+$tabs-tab-font-family: inherit !default;
+$tabs-tab-font-size: var(--#{$prefix}font-size-sm) !default;
+$tabs-tab-line-height: var(--#{$prefix}line-height-sm) !default;
+
+// Tab - Focus
+$tabs-tab-focus-z-index: var(--#{$prefix}z-index-focused) !default;
+
+// Tab - Disabled
+$tabs-tab-disabled-opacity: 0.5 !default;
+
+// Tab inner
+$tabs-tab-inner-max-width: 220px !default;
+
+// Tab - Default
+$tabs-tab-default-padding-y: spacing(1.5) !default;
+$tabs-tab-default-padding-x: spacing(2) !default;
+$tabs-tab-default-font-weight: null !default;
+$tabs-tab-default-box-shadow: null !default;
+
+// Tab - Default - Status
+$tabs-tab-default-status-box-shadow: null !default;
+
+// Tab - Default - Open
+$tabs-tab-default-open-font-size: null !default;
+$tabs-tab-default-open-line-height: null !default;
+$tabs-tab-default-open-font-weight: $font-weight-medium !default;
+$tabs-tab-default-open-box-shadow: inset 0 -2px 0 0 var(--#{$prefix}primary-9) !default;
+
+// Tab - Default - Open + Status
+$tabs-tab-default-open-status-box-shadow: inset 0 -2px 0 0
+  var(--#{$prefix}accent-9) !default;
+
+// Tab inner - Default
+$tabs-tab-inner-default-min-width: null !default;
+$tabs-tab-inner-default-min-height: null !default;
+$tabs-tab-inner-default-padding-y: spacing(1) !default;
+$tabs-tab-inner-default-padding-x: spacing(2) !default;
+$tabs-tab-inner-default-border-radius: var(
+  --#{$prefix}border-radius-sm
+) !default;
+$tabs-tab-inner-default-background-color: null !default;
+$tabs-tab-inner-default-color: var(--#{$prefix}neutral-a11) !default;
+$tabs-tab-inner-default-box-shadow: null !default;
+
+// Tab inner - Default - Status
+$tabs-tab-inner-default-status-background-color: null !default;
+$tabs-tab-inner-default-status-color: var(--#{$prefix}accent-a11) !default;
+$tabs-tab-inner-default-status-box-shadow: null !default;
+
+// Tab inner - Default - Hover
+$tabs-tab-inner-default-hover-background-color: var(
+  --#{$prefix}neutral-a3
+) !default;
+
+// Tab inner - Default - Hover + Status
+$tabs-tab-inner-default-hover-status-background-color: var(
+  --#{$prefix}accent-a3
+) !default;
+
+// Tab inner - Default - Focus
+$tabs-tab-inner-default-focus-outline-width: 2px !default;
+$tabs-tab-inner-default-focus-outline-offset: -2px !default;
+$tabs-tab-inner-default-focus-outline-color: var(
+  --#{$prefix}neutral-8
+) !default;
+
+// Tab inner - Default - Focus + Status
+$tabs-tab-inner-default-focus-status-outline-color: var(
+  --#{$prefix}accent-8
+) !default;
+
+// Tab inner - Default - Open
+$tabs-tab-inner-default-open-background-color: null !default;
+$tabs-tab-inner-default-open-color: var(--#{$prefix}neutral-a12) !default;
+$tabs-tab-inner-default-open-box-shadow: null !default;
+
+// Tab inner - Default - Open + Status
+$tabs-tab-inner-default-open-status-background-color: null !default;
+$tabs-tab-inner-default-open-status-color: var(--#{$prefix}accent-a12) !default;
+$tabs-tab-inner-default-open-status-box-shadow: null !default;
+
+// Tab inner - Default - Open + Hover
+$tabs-tab-inner-default-open-hover-background-color: $tabs-tab-inner-default-hover-background-color !default;
+
+// Tab inner - Default - Open + Hover + Status
+$tabs-tab-inner-default-open-hover-status-background-color: $tabs-tab-inner-default-hover-status-background-color !default;
+
+// Tab inner - Default - Active
+$tabs-tab-inner-default-active-background-color: var(
+  --#{$prefix}neutral-a4
+) !default;
+
+// Tab inner - Default - Active + Status
+$tabs-tab-inner-default-active-status-background-color: var(
+  --#{$prefix}accent-a4
+) !default;
+
+// Tab - Annexes
+$tabs-tab-annexes-padding-y: null !default;
+$tabs-tab-annexes-padding-x: null !default;
+$tabs-tab-annexes-font-weight: $font-weight-medium !default;
+$tabs-tab-annexes-box-shadow: null !default;
+
+// Tab - Annexes - Status
+$tabs-tab-annexes-status-box-shadow: null !default;
+
+// Tab - Annexes - Open
+$tabs-tab-annexes-open-font-size: null !default;
+$tabs-tab-annexes-open-line-height: null !default;
+$tabs-tab-annexes-open-font-weight: null !default;
+$tabs-tab-annexes-open-box-shadow: null !default;
+
+// Tab - Annexes - Open + Status
+$tabs-tab-annexes-open-status-box-shadow: null !default;
+
+// Tab inner - Annexes
+$tabs-tab-inner-annexes-min-width: 60px !default;
+$tabs-tab-inner-annexes-min-height: 34px !default;
+$tabs-tab-inner-annexes-padding-y: spacing(1) !default;
+$tabs-tab-inner-annexes-padding-x: spacing(2) !default;
+$tabs-tab-inner-annexes-border-radius: var(--#{$prefix}border-radius-sm)
+  var(--#{$prefix}border-radius-sm) 0 0 !default;
+$tabs-tab-inner-annexes-background-color: var(--#{$prefix}neutral-a3) !default;
+$tabs-tab-inner-annexes-color: var(--#{$prefix}neutral-a11) !default;
+$tabs-tab-inner-annexes-box-shadow: null !default;
+
+// Tab inner - Annexes - Status
+$tabs-tab-inner-annexes-status-background-color: null !default;
+$tabs-tab-inner-annexes-status-color: null !default;
+$tabs-tab-inner-annexes-status-box-shadow: inset 0 3px 0 0
+  var(--#{$prefix}accent-9) !default;
+
+// Tab inner - Annexes - Hover
+$tabs-tab-inner-annexes-hover-background-color: var(
+  --#{$prefix}neutral-a4
+) !default;
+
+// Tab inner - Annexes - Hover + Status
+$tabs-tab-inner-annexes-hover-status-background-color: null !default;
+
+// Tab inner - Annexes - Focus
+$tabs-tab-inner-annexes-focus-outline-width: 2px !default;
+$tabs-tab-inner-annexes-focus-outline-offset: -2px !default;
+$tabs-tab-inner-annexes-focus-outline-color: var(
+  --#{$prefix}primary-8
+) !default;
+
+// Tab inner - Annexes - Focus + Status
+$tabs-tab-inner-annexes-focus-status-outline-color: null !default;
+
+// Tab inner - Annexes - Open
+$tabs-tab-inner-annexes-open-background-color: var(
+  --#{$prefix}primary-9
+) !default;
+$tabs-tab-inner-annexes-open-color: var(--#{$prefix}primary-contrast) !default;
+$tabs-tab-inner-annexes-open-box-shadow: null !default;
+
+// Tab inner - Annexes - Open + Status
+$tabs-tab-inner-annexes-open-status-background-color: null !default;
+$tabs-tab-inner-annexes-open-status-color: null !default;
+$tabs-tab-inner-annexes-open-status-box-shadow: null !default;
+
+// Tab inner - Annexes - Open + Hover
+$tabs-tab-inner-annexes-open-hover-background-color: null !default;
+
+// Tab inner - Annexes - Open + Hover + Status
+$tabs-tab-inner-annexes-open-hover-status-background-color: null !default;
+
+// Tab inner - Annexes - Active
+$tabs-tab-inner-annexes-active-background-color: var(
+  --#{$prefix}primary-10
+) !default;
+
+// Tab inner - Annexes - Active + Status
+$tabs-tab-inner-annexes-active-status-background-color: null !default;
+
+// Scroll button
+$tabs-scroll-button-padding-x: spacing(2) !default;
+$tabs-scroll-button-color: null !default;
+$tabs-scroll-button-font-size: var(--#{$prefix}font-size-sm) !default;
+$tabs-scroll-button-overflow-indicator-width: 4px !default;
+$tabs-scroll-button-overflow-indicator-extra-height: 4px !default;
+$tabs-scroll-button-overflow-indicator-color: var(
+  --#{$prefix}neutral-a8
+) !default;
+$tabs-scroll-button-overflow-indicator-z-index: calc(
+  var(--#{$prefix}z-index-focused) + 1
+) !default;
+
+// Tab content - Focus
+$tabs-tab-content-focus-outline-width: 2px !default;
+$tabs-tab-content-focus-outline-color: var(--#{$prefix}primary-8) !default;
+
+// Variants
+$tabs-variants: default, annexes !default;
+
+// Variants - Tab list
+$tabs-tab-list-gap-x-by-variant: (
+  default: $tabs-tab-list-default-gap-x,
+  annexes: $tabs-tab-list-annexes-gap-x,
+) !default;
+$tabs-tab-list-margin-bottom-by-variant: (
+  default: $tabs-tab-list-default-margin-bottom,
+  annexes: $tabs-tab-list-annexes-margin-bottom,
+) !default;
+$tabs-tab-list-box-shadow-by-variant: (
+  default: $tabs-tab-list-default-box-shadow,
+  annexes: $tabs-tab-list-annexes-box-shadow,
+) !default;
+
+// Variants - Tab
+$tabs-tab-padding-y-by-variant: (
+  default: $tabs-tab-default-padding-y,
+  annexes: $tabs-tab-annexes-padding-y,
+) !default;
+$tabs-tab-padding-x-by-variant: (
+  default: $tabs-tab-default-padding-x,
+  annexes: $tabs-tab-annexes-padding-x,
+) !default;
+$tabs-tab-font-weight-by-variant: (
+  default: $tabs-tab-default-font-weight,
+  annexes: $tabs-tab-annexes-font-weight,
+) !default;
+$tabs-tab-box-shadow-by-variant: (
+  default: $tabs-tab-default-box-shadow,
+  annexes: $tabs-tab-annexes-box-shadow,
+) !default;
+
+// Variants - Tab - Status
+$tabs-tab-status-box-shadow-by-variant: (
+  default: $tabs-tab-default-status-box-shadow,
+  annexes: $tabs-tab-annexes-status-box-shadow,
+) !default;
+
+// Variants - Tab - Open
+$tabs-tab-open-font-size-by-variant: (
+  default: $tabs-tab-default-open-font-size,
+  annexes: $tabs-tab-annexes-open-font-size,
+) !default;
+$tabs-tab-open-line-height-by-variant: (
+  default: $tabs-tab-default-open-line-height,
+  annexes: $tabs-tab-annexes-open-line-height,
+) !default;
+$tabs-tab-open-font-weight-by-variant: (
+  default: $tabs-tab-default-open-font-weight,
+  annexes: $tabs-tab-annexes-open-font-weight,
+) !default;
+$tabs-tab-open-box-shadow-by-variant: (
+  default: $tabs-tab-default-open-box-shadow,
+  annexes: $tabs-tab-annexes-open-box-shadow,
+) !default;
+
+// Variants - Tab - Open + Status
+$tabs-tab-open-status-box-shadow-by-variant: (
+  default: $tabs-tab-default-open-status-box-shadow,
+  annexes: $tabs-tab-annexes-open-status-box-shadow,
+) !default;
+
+// Variants - Tab inner
+$tabs-tab-inner-min-width-by-variant: (
+  default: $tabs-tab-inner-default-min-width,
+  annexes: $tabs-tab-inner-annexes-min-width,
+) !default;
+$tabs-tab-inner-min-height-by-variant: (
+  default: $tabs-tab-inner-default-min-height,
+  annexes: $tabs-tab-inner-annexes-min-height,
+) !default;
+$tabs-tab-inner-padding-y-by-variant: (
+  default: $tabs-tab-inner-default-padding-y,
+  annexes: $tabs-tab-inner-annexes-padding-y,
+) !default;
+$tabs-tab-inner-padding-x-by-variant: (
+  default: $tabs-tab-inner-default-padding-x,
+  annexes: $tabs-tab-inner-annexes-padding-x,
+) !default;
+$tabs-tab-inner-border-radius-by-variant: (
+  default: $tabs-tab-inner-default-border-radius,
+  annexes: $tabs-tab-inner-annexes-border-radius,
+) !default;
+$tabs-tab-inner-background-color-by-variant: (
+  default: $tabs-tab-inner-default-background-color,
+  annexes: $tabs-tab-inner-annexes-background-color,
+) !default;
+$tabs-tab-inner-color-by-variant: (
+  default: $tabs-tab-inner-default-color,
+  annexes: $tabs-tab-inner-annexes-color,
+) !default;
+$tabs-tab-inner-box-shadow-by-variant: (
+  default: $tabs-tab-inner-default-box-shadow,
+  annexes: $tabs-tab-inner-annexes-box-shadow,
+) !default;
+
+// Variants - Tab inner - Status
+$tabs-tab-inner-status-background-color-by-variant: (
+  default: $tabs-tab-inner-default-status-background-color,
+  annexes: $tabs-tab-inner-annexes-status-background-color,
+) !default;
+$tabs-tab-inner-status-color-by-variant: (
+  default: $tabs-tab-inner-default-status-color,
+  annexes: $tabs-tab-inner-annexes-status-color,
+) !default;
+$tabs-tab-inner-status-box-shadow-by-variant: (
+  default: $tabs-tab-inner-default-status-box-shadow,
+  annexes: $tabs-tab-inner-annexes-status-box-shadow,
+) !default;
+
+// Variants - Tab inner - Focus
+$tabs-tab-inner-focus-outline-width-by-variant: (
+  default: $tabs-tab-inner-default-focus-outline-width,
+  annexes: $tabs-tab-inner-annexes-focus-outline-width,
+) !default;
+$tabs-tab-inner-focus-outline-color-by-variant: (
+  default: $tabs-tab-inner-default-focus-outline-color,
+  annexes: $tabs-tab-inner-annexes-focus-outline-color,
+) !default;
+$tabs-tab-inner-focus-outline-offset-by-variant: (
+  default: $tabs-tab-inner-default-focus-outline-offset,
+  annexes: $tabs-tab-inner-annexes-focus-outline-offset,
+) !default;
+
+// Variants - Tab inner - Focus + Status
+$tabs-tab-inner-focus-status-outline-color-by-variant: (
+  default: $tabs-tab-inner-default-focus-status-outline-color,
+  annexes: $tabs-tab-inner-annexes-focus-status-outline-color,
+) !default;
+
+// Variants - Tab inner - Hover
+$tabs-tab-inner-hover-background-color-by-variant: (
+  default: $tabs-tab-inner-default-hover-background-color,
+  annexes: $tabs-tab-inner-annexes-hover-background-color,
+) !default;
+
+// Variants - Tab inner - Hover + Status
+$tabs-tab-inner-hover-status-background-color-by-variant: (
+  default: $tabs-tab-inner-default-hover-status-background-color,
+  annexes: $tabs-tab-inner-annexes-hover-status-background-color,
+) !default;
+
+// Variants - Tab inner - Open
+$tabs-tab-inner-open-background-color-by-variant: (
+  default: $tabs-tab-inner-default-open-background-color,
+  annexes: $tabs-tab-inner-annexes-open-background-color,
+) !default;
+$tabs-tab-inner-open-color-by-variant: (
+  default: $tabs-tab-inner-default-open-color,
+  annexes: $tabs-tab-inner-annexes-open-color,
+) !default;
+$tabs-tab-inner-open-box-shadow-by-variant: (
+  default: $tabs-tab-inner-default-open-box-shadow,
+  annexes: $tabs-tab-inner-annexes-open-box-shadow,
+) !default;
+
+// Variants - Tab inner - Open + Status
+$tabs-tab-inner-open-status-background-color-by-variant: (
+  default: $tabs-tab-inner-default-open-status-background-color,
+  annexes: $tabs-tab-inner-annexes-open-status-background-color,
+) !default;
+$tabs-tab-inner-open-status-color-by-variant: (
+  default: $tabs-tab-inner-default-open-status-color,
+  annexes: $tabs-tab-inner-annexes-open-status-color,
+) !default;
+$tabs-tab-inner-open-status-box-shadow-by-variant: (
+  default: $tabs-tab-inner-default-open-status-box-shadow,
+  annexes: $tabs-tab-inner-annexes-open-status-box-shadow,
+) !default;
+
+// Variants - Tab inner - Open + Hover
+$tabs-tab-inner-open-hover-background-color-by-variant: (
+  default: $tabs-tab-inner-default-open-hover-background-color,
+  annexes: $tabs-tab-inner-annexes-open-hover-background-color,
+) !default;
+
+// Variants - Tab inner - Open + Hover + Status
+$tabs-tab-inner-open-hover-status-background-color-by-variant: (
+  default: $tabs-tab-inner-default-open-hover-status-background-color,
+  annexes: $tabs-tab-inner-annexes-open-hover-status-background-color,
+) !default;
+
+// Variants - Tab inner - Active
+$tabs-tab-inner-active-background-color-by-variant: (
+  default: $tabs-tab-inner-default-active-background-color,
+  annexes: $tabs-tab-inner-annexes-active-background-color,
+) !default;
+
+// Variants - Tab inner - Active + Status
+$tabs-tab-inner-active-status-background-color-by-variant: (
+  default: $tabs-tab-inner-default-active-status-background-color,
+  annexes: $tabs-tab-inner-annexes-active-status-background-color,
+) !default;