skirda-go-launcher-interface/src/_themes.scss

@use 'sass:color';

@mixin gradientY ($colors) {
  background: linear-gradient(to bottom, $colors);
}

@function shade ($color, $opacity) {
  @return transparentize($color, $opacity);
}

@function gradient ($color, $value: +50%) {
  $top: scale-color($color, $lightness: $value);
  $bottom: $color;

  @return #{$top}, #{$bottom};
}

@function colorsGradient ($colors) {
  $line: "";
  @for $i from 1 through length($colors) {
    @if ($i > 1) {
      $line: $line + ',';
    }

    $line: $line + #{nth($colors, $i)}
  }

  @return $line;
}


@function hovered ($color, $value: +10%) {
  @return scale-color($color, $lightness: $value);
}

@mixin theme {
  // base
  --sk-background               : #{$ui-background};
  --sk-background-75            : #{shade($ui-background, 0.25)};
  --sk-background-50            : #{shade($ui-background, 0.5)};
  --sk-text                     : #{$ui-text};
  --sk-gray-text                : #{$ui-gray-text};
  --sk-foreground               : #{$ui-foreground};
  --sk-foreground-hovered       : #{hovered($ui-foreground)};
  --sk-left-menu                : #{$ui-left-menu};
  --sk-right-content            : #{$ui-right-content};
  --sk-item-active              : #{$ui-item-active};
  --sk-item-hovered             : #{hovered($ui-item-active, $modifier-item-hover)};
  --sk-shadow                   : #{shade($ui-shadow, 0)};
  --sk-shadow-hovered           : #{shade($ui-shadow, 0)};
  --sk-switch-background        : #{$ui-switch-backround};

  // primary color
  --sk-primary-accent           : #{$ui-primary-accent};
  --sk-primary-accent-hovered   : #{hovered($ui-primary-accent)};
  @for $i from 9 through 1 {
    --sk-primary-accent-#{10 * $i}: #{shade($ui-primary-accent, 1 - 0.1 * $i)};
  }
  --sk-primary-accent-5: #{shade($ui-primary-accent, 0.95)};
  --sk-primary-accent-gradient: #{gradient(shade($ui-primary-accent, 0), $modifier-gradient-lightness)};

  // secondary color
  --sk-secondary-accent         : #{$ui-secondary-accent};
  --sk-secondary-accent-hovered : #{hovered($ui-secondary-accent)};
  @for $i from 9 through 1 {
    --sk-secondary-accent-#{10 * $i}: #{shade($ui-secondary-accent, 1 - 0.1 * $i)};
  }
  --sk-secondary-accent-5: #{shade($ui-secondary-accent, 0.95)};
  --sk-secondary-accent-text    : #{$ui-secondary-accent-text};

  // border
  --sk-border                   : #{$ui-border};
  --sk-border-hovered           : #{hovered($ui-border)};

  // negative
  --sk-negative                 : #{$ui-negative};
  @for $i from 9 through 1 {
    --sk-negative-#{10 * $i}: #{shade($ui-negative, 1 - 0.1 * $i)};
  }
  --sk-negative-5: #{shade($ui-negative, 0.95)};
  --sk-negative-hovered         : #{hovered($ui-negative)};

  // positive
  --sk-positive                 : #{$ui-positive};
  @for $i from 9 through 1 {
    --sk-positive-#{10 * $i}: #{shade($ui-positive, 1 - 0.1 * $i)};
  }
  --sk-positive-5: #{shade($ui-positive, 0.95)};
  --sk-positive-hovered         : #{hovered($ui-positive)};

  // warning
  --sk-warning                  : #{$ui-warning};
  @for $i from 9 through 1 {
    --sk-warning-#{10 * $i}: #{shade($ui-warning, 1 - 0.1 * $i)};
  }
  --sk-warning-5: #{shade($ui-warning, 0.95)};
  --sk-warning-hovered         : #{hovered($ui-warning)};

  // palette colors & gradients
  @for $i from 1 through length($ui-palette) {
    --sk-palette-#{$i - 1}-5: #{shade(nth($ui-palette, $i), 0.95)};
    --sk-palette-#{$i - 1}: #{nth($ui-palette, $i)};
    --sk-palette-gradient-#{$i - 1}: #{gradient(nth($ui-palette, $i), $modifier-gradient-lightness)};

    @for $j from 9 through 1 {
      --sk-palette-#{$i - 1}-#{10 * $j}: #{shade(nth($ui-palette, $i), 1 - 0.1 * $j)};
      --sk-palette-gradient-#{$i - 1}-#{10 * $j}: #{gradient(shade(nth($ui-palette, $i), 1 - 0.1 * $j), $modifier-gradient-lightness)};
    }

    --sk-palette-#{$i - 1}-5: #{shade(nth($ui-palette, $i), 0.95)};
    --sk-palette-gradient-#{$i - 1}-5: #{gradient(shade(nth($ui-palette, $i), 0.95), $modifier-gradient-lightness)};
  }

  --sk-overlay: #{$ui-overlay};
  --sk-overlay-50: #{shade($ui-overlay, 0.2)};
  --sk-dark-overlay: #{$ui-dark-overlay};

  // black & shades
  --sk-black: #{$ui-black};
  @for $i from 9 through 1 {
    --sk-black-#{10 * $i}: #{shade($ui-black, 1 - 0.1 * $i)};
  }

  --sk-typo-base: 14px;
  --sk-typo-special: 13px;
  --sk-typo-title: 24px;
  --sk-typo-subtitle: 12px;
  --sk-typo-h1: 36px;
  --sk-typo-h2: 32px;
  --sk-typo-h3: 26px;
  --sk-typo-h4: 20px;
  --sk-typo-h5: 17px;
  --sk-typo-h6: 15px;

  // gaps
  --sk-gap-xs: 0.125rem;
  --sk-gap-s: 0.25rem;
  --sk-gap-m: 0.5rem;
  --sk-gap-l: 0.75rem;
  --sk-gap-xl: 1rem;
  --sk-gap-xxl: 1.5rem;
  --sk-gap-xxxl: 2.2rem;

  // border-radius
  --sk-br-s: 0.25rem;
  --sk-br-m: 0.5rem;
  --sk-br-l: 0.75rem;
  --sk-br-xl: 1rem;
}