_variables.scss

:root {
  // semantic colors
  @each $color, $value in $semantic-colors {
    --sd-color-#{$color}: #{$value};
  }
  // semantic colors for highlighting (e.g. focus/hover)
  @each $color, $value in $semantic-colors {
    --sd-color-#{$color}-highlight: #{mix(black, $value, 15%)};
  }
  // semantic colors for backgrounds
  @each $color, $value in $semantic-colors {
    --sd-color-#{$color}-bg: #{rgba($value, 0.2)};
  }
  // colors for text on top of a semantic color background
  @each $color, $value in $semantic-colors {
    --sd-color-#{$color}-text: #{text-color($value)};
  }
  // shadow
  --sd-color-shadow: #{$black-15};
  // cards
  --sd-color-card-border: #{$black-12-5};
  --sd-color-card-border-hover: hsla(231, 99%, 66%, 1);
  --sd-color-card-background: transparent;
  --sd-color-card-text: inherit;
  --sd-color-card-header: transparent;
  --sd-color-card-footer: transparent;
  // tabs
  --sd-color-tabs-label-active: hsla(231, 99%, 66%, 1);
  --sd-color-tabs-label-hover: hsla(231, 99%, 66%, 1);
  --sd-color-tabs-label-inactive: hsl(0, 0%, 66%);
  --sd-color-tabs-underline-active: hsla(231, 99%, 66%, 1);
  --sd-color-tabs-underline-hover: rgba(178, 206, 245, 0.62);
  --sd-color-tabs-underline-inactive: transparent;
  --sd-color-tabs-overline: rgb(222, 222, 222);
  --sd-color-tabs-underline: rgb(222, 222, 222);
  --sd-fontsize-tabs-label: 1rem;
  // dropdown
  --sd-fontsize-dropdown: inherit;
  --sd-fontsize-dropdown-title: 1rem;
  --sd-fontweight-dropdown-title: 700;
}