SUSE/stratos

View on GitHub
src/frontend/packages/suse-theme/_index.scss

Summary

Maintainability
Test Coverage
@import '~@stratosui/theme/helper';

@import './sass/colors';

// SUSE overrides
@import './sass/suse';

@function stratos-theme() {
  @return (
    default: create-suse-theme($stratos-theme),
    dark: create-suse-dark-theme()
  );
}

@function create-suse-theme($base-theme) {
  $theme: stratos-theme-helper($base-theme);

  // Modify some of the colors
  $app-theme: map-get($theme, app-theme);
  $app-theme: map-merge($app-theme, (
    header-background-color: $suse-header-bar,
    header-foreground-color: $suse-text,
    header-background-span: true,
    link-color: $suse-link-color,
    link-active-color: darken($suse-link-color, 10%),
    stratos-title-show-text: true,
    underflow-background-color: $suse-primary-color,
    underflow-foreground-color: $suse-text,
    user-avatar-background-color: $suse-primary-color,
    user-avatar-foreground-color: $suse-text,
    user-avatar-header-invert-colors: false,
    intro-screen-background-color: $suse-gray,
    side-nav: (
      background: $suse-side-nav-bg,
      text: $suse-side-nav-text,
      active: $suse-side-nav-active-bg,
      active-text: $suse-side-nav-active-text,
      hover: $suse-side-nav-active-bg,
      hover-text: $suse-side-nav-active-text
    )
  ));

  $theme: map-merge($theme, (
    app-theme: $app-theme
  ));

  @return $theme;
}

@function create-suse-dark-theme() {
  $theme: create-suse-theme($suse-dark-theme);

  $app-theme: map-get($theme, app-theme);
  $app-theme: map-merge($app-theme, (
    link-color: $suse-dark-link-color,
    link-active-color: darken($suse-dark-link-color, 10%),
    underflow-background-color: $suse-dark-primary-color,
    user-avatar-background-color: $suse-dark-primary-color,
    side-nav: (
      background: $suse-dark-side-nav-bg,
      text: $suse-dark-side-nav-text,
      active: $suse-dark-side-nav-active-bg,
      active-text: $suse-dark-side-nav-active-text,
      hover: $suse-dark-side-nav-active-bg,
      hover-text: $suse-dark-side-nav-active-text
    ),
  ));

  $theme: map-merge($theme, (
    app-theme: $app-theme
  ));
  @return $theme;
}