material-components_material-web/testing/table/lib/_test-table-theme.scss

//
// Copyright 2021 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

@use 'sass:map';

@use '@material/web/sass/resolvers';
@use '@material/web/sass/theme';
@use '@material/web/sass/typography';
@use '@material/web/tokens';

$_default-deps: (
  md-sys-color: tokens.md-sys-color-values-light-dynamic(),
  md-sys-typescale: tokens.md-sys-typescale-values(),
);

@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
  @return (
    cell-color: map.get($deps, md-sys-color, surface),
    cell-padding: if($exclude-hardcoded-values, null, 16px),
    cell-text-color: map.get($deps, md-sys-color, on-surface),
    cell-text-font: map.get($deps, md-sys-typescale, body-medium-font),
    cell-text-line-height:
      map.get($deps, md-sys-typescale, body-medium-line-height),
    cell-text-size: map.get($deps, md-sys-typescale, body-medium-size),
    cell-grid-color: map.get($deps, md-sys-color, surface-variant),
    cell-grid-size: if($exclude-hardcoded-values, null, 16px),
    header-cell-color: map.get($deps, md-sys-color, surface-variant),
    header-cell-padding: if($exclude-hardcoded-values, null, 8px),
    header-cell-text-color: map.get($deps, md-sys-color, on-surface-variant),
    header-cell-text-font: map.get($deps, md-sys-typescale, title-medium-font),
    header-cell-text-line-height:
      map.get($deps, md-sys-typescale, title-medium-line-height),
    header-cell-text-size: map.get($deps, md-sys-typescale, title-medium-size),
    header-cell-text-tracking:
      map.get($deps, md-sys-typescale, title-medium-tracking),
    header-cell-text-weight:
      map.get($deps, md-sys-typescale, title-medium-weight),
    outline-color: map.get($deps, md-sys-color, outline)
  );
}

$light-theme: values();
$dark-theme: values(
  (
    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
  ),
  $exclude-hardcoded-values: true
);

@function _resolve-theme($theme, $resolvers) {
  @return typography.resolve-theme(
    $theme,
    map.get($resolvers, typography),
    header-cell-text
  );
}

@mixin theme($theme, $resolvers: resolvers.$material) {
  $theme: theme.validate-theme($light-theme, $theme);
  $theme: _resolve-theme($theme, $resolvers);
  $theme: theme.create-theme-vars($theme, test-table);

  @include theme.emit-theme-vars($theme);
}

@mixin theme-styles($theme, $resolvers: resolvers.$material) {
  $theme: theme.validate-theme-styles($light-theme, $theme);
  $theme: _resolve-theme($theme, $resolvers);
  $theme: theme.create-theme-vars($theme, test-table);

  @include _cell-color(map.get($theme, cell-color));
  @include _cell-padding(map.get($theme, cell-padding));
  @include _cell-grid-color(map.get($theme, cell-grid-color));
  @include _cell-grid-size(map.get($theme, cell-grid-size));
  @include _cell-text-color(map.get($theme, 'cell-text-color'));
  @include _cell-text-font(
    (
      font: map.get($theme, 'cell-text-font'),
      font-size: map.get($theme, 'cell-text-font-size'),
      line-height: map.get($theme, 'cell-text-line-height'),
    )
  );

  @include _header-cell-color(map.get($theme, header-cell-color));
  @include _header-cell-padding(map.get($theme, header-cell-padding));
  @include _header-cell-text-color(map.get($theme, header-cell-text-color));
  @include _header-cell-text-typography(
    (
      font: map.get($theme, header-cell-text-font),
      line-height: map.get($theme, header-cell-text-line-height),
      size: map.get($theme, header-cell-text-size),
      tracking: map.get($theme, header-cell-text-tracking),
      weight: map.get($theme, header-cell-text-weight),
    )
  );
  @include _outline-color(map.get($theme, outline-color));
}

@mixin _cell-color($color) {
  .md3-test-table__cell {
    &::before {
      background-color: $color;
    }
  }
}

@mixin _cell-text-color($color) {
  .md3-test-table__text {
    color: $color;
  }
}

@mixin _cell-text-font($font-map) {
  .md3-test-table__text {
    font-family: map.get($font-map, 'font');
    font-size: map.get($font-map, 'font-size');
    line-height: map.get($font-map, 'line-height');
  }
}

@mixin _cell-padding($padding) {
  .md3-test-table__cell {
    padding: $padding;
  }
}

@mixin _cell-grid-color($color) {
  .md3-test-table__cell {
    &::before {
      background-image: linear-gradient(to right, $color 1px, transparent 1px),
        linear-gradient(to bottom, $color 1px, transparent 1px);
    }
  }
}

@mixin _cell-grid-size($size) {
  .md3-test-table__cell {
    &::before {
      background-size: $size $size;
    }
  }
}

@mixin _header-cell-color($color) {
  .md3-test-table__header {
    background: $color;
  }
}

@mixin _header-cell-padding($padding) {
  .md3-test-table__header {
    padding: $padding;
  }
}

@mixin _header-cell-text-color($color) {
  .md3-test-table__header {
    color: $color;
  }
}

@mixin _header-cell-text-typography($font) {
  .md3-test-table__header {
    @include typography.theme-styles($font);
  }
}

@mixin _outline-color($color) {
  &,
  .md3-test-table__cell,
  .md3-test-table__header {
    border-color: $color;
  }
}