Theme colors

// ---------------------------------------------------------- 
// Theme mixins
// ----------------------------------------------------------
@use "../theme" as *;

@mixin theme-surface-variables {
  @each $name, $value in $theme-surfaces {
    --#{$name}: #{$value};
  }
}

@mixin theme-surface-css {
  #{$theme-tokens} {
    @include theme-surface-variables;
  }
}

@mixin theme-typography-variables {
  @each $name, $value in $theme-typography {
    --#{$name}: #{$value};
  }
}

@mixin theme-typography-css {
  #{$theme-tokens} {
    @include theme-typography-variables;
  }
}

@mixin theme-forms-buttons-variables {
  @each $name, $value in $theme-forms-buttons {
    --#{$name}: #{$value};
  }
}

@mixin theme-forms-buttons-css {
  #{$theme-tokens} {
    @include theme-forms-buttons-variables;
  }
}

@mixin theme-tables-variables {
  @each $name, $value in $theme-tables {
    --#{$name}: #{$value};
  }
}

@mixin theme-tables-css {
  #{$theme-tokens} {
    @include theme-tables-variables;
  }
}

@mixin theme-accordions-variables {
  @each $name, $value in $theme-accordion {
    --#{$name}: #{$value};
  }
}

@mixin theme-accordions-css {
  #{$theme-tokens} {
    @include theme-accordions-variables;
  }
}

@mixin theme-alert-variables {
  @each $name, $value in $theme-alert {
    --#{$name}: #{$value};
  }
}

@mixin theme-alert-css {
  #{$theme-tokens} {
    @include theme-alert-variables;
  }
}

@mixin theme-badge-variables {
  @each $name, $value in $theme-badge {
    --#{$name}: #{$value};
  }
}

@mixin theme-badge-css {
  #{$theme-tokens} {
    @include theme-badge-variables;
  }
}

@mixin theme-border-variables {
  @each $name, $value in $theme-border {
    --#{$name}: #{$value};
  }
}

@mixin theme-border-css {
  #{$theme-tokens} {
    @include theme-border-variables;
  }
}

@mixin theme-button-variables {
  @each $name, $value in $theme-button {
    --#{$name}: #{$value};
  }
}

@mixin theme-button-css {
  #{$theme-tokens} {
    @include theme-button-variables;
  }
}

@mixin theme-card-variables {
  @each $name, $value in $theme-card {
    --#{$name}: #{$value};
  }
}

@mixin theme-card-css {
  #{$theme-tokens} {
    @include theme-card-variables;
  }
}

@mixin theme-dialog-variables {
  @each $name, $value in $theme-dialog {
    --#{$name}: #{$value};
  }
}

@mixin theme-dialog-css {
  #{$theme-tokens} {
    @include theme-dialog-variables;
  }
}

@mixin theme-dropdown-variables {
  @each $name, $value in $theme-dropdown {
    --#{$name}: #{$value};
  }
}

@mixin theme-dropdown-css {
  #{$theme-tokens} {
    @include theme-dropdown-variables;
  }
}

@mixin theme-list-group-variables {
  @each $name, $value in $theme-list-group {
    --#{$name}: #{$value};
  }
}

@mixin theme-list-group-css {
  #{$theme-tokens} {
    @include theme-list-group-variables;
  }
}

@mixin theme-popover-variables {
  @each $name, $value in $theme-popover {
    --#{$name}: #{$value};
  }
}

@mixin theme-popover-css {
  #{$theme-tokens} {
    @include theme-popover-variables;
  }
}

@mixin all-theme-variables {
  @include theme-typography-variables;
  @include theme-forms-buttons-variables;
  @include theme-tables-variables;
  @include theme-accordions-variables;
  @include theme-alert-variables;
  @include theme-badge-variables;
  @include theme-border-variables;
  @include theme-dialog-variables;
  @include theme-dropdown-variables;
  @include theme-card-variables;
  @include theme-list-group-variables;
  @include theme-popover-variables;
}

@mixin all-theme-variables-css {
  #{$theme-tokens} {
    @include all-theme-variables;
  }
}

// Use if surface.scss module not included.
@mixin all-theme-surface-variables {
  @include theme-surface-variables;
  @include all-theme-variables;
}

@mixin all-theme-surface-variables-css {
  #{$theme-tokens} {
    @include all-theme-surface-variables;
  }
}