• Home
• io.github.palexdev
• materialfx-all
• 11.25.0
• source code
• _theme.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

io.github.palexdev.mfxresources.themes.material.tokens._theme.scss Maven / Gradle / Ivy

@use 'sass:map';
@use 'sass:math';
@use '../abstracts/utils' as Utils;

$variant: 'light' !default;
$palette: () !default;
$scheme: () !default;

/// Returns the MD3 theme's color scheme extracted by the set palette of colors.
/// Themes should set the palette before calling this, with a @forward or @use statement.
/// Also, they should set the theme variant as well since this method will create the scheme in different ways
/// for light and dark variants ofc.
@function GetColorScheme() {
  @if (length($palette) == 0) {
    @return $scheme;
  }
  @if (length($scheme) == 0) {
    // Scheme Generation
    @if ($variant == 'dark') {
      $scheme: (
        // Primary Dark
        '--md-sys-color-primary': GetPaletteColor('primary', 80),
        '--md-sys-color-primary-container': GetPaletteColor('primary', 30),
        '--md-sys-color-on-primary': GetPaletteColor('primary', 20),
        '--md-sys-color-on-primary-container': GetPaletteColor('primary', 90),
        '--md-sys-color-inverse-primary': GetPaletteColor('primary', 40),
        // Secondary Dark
        '--md-sys-color-secondary': GetPaletteColor('secondary', 80),
        '--md-sys-color-secondary-container': GetPaletteColor('secondary', 30),
        '--md-sys-color-on-secondary': GetPaletteColor('secondary', 20),
        '--md-sys-color-on-secondary-container': GetPaletteColor('secondary', 90),
        // Tertiary Dark
        '--md-sys-color-tertiary': GetPaletteColor('tertiary', 80),
        '--md-sys-color-tertiary-container': GetPaletteColor('tertiary', 30),
        '--md-sys-color-on-tertiay': GetPaletteColor('tertiary', 20),
        '--md-sys-color-on-tertiary-container': GetPaletteColor('tertiary', 90),
        // Error Dark
        '--md-sys-color-error': GetPaletteColor('error', 80),
        '--md-sys-color-error-container': GetPaletteColor('error', 30),
        '--md-sys-color-on-error': GetPaletteColor('error', 20),
        '--md-sys-color-on-error-container': GetPaletteColor('error', 90),
        // Surface Dark
        '--md-sys-color-surface': GetPaletteColor('neutral', 6),
        '--md-sys-color-surface-dim': GetPaletteColor('neutral', 6),
        '--md-sys-color-surface-bright': GetPaletteColor('neutral', 24),
        '--md-sys-color-surface-container-lowest': GetPaletteColor('neutral', 4),
        '--md-sys-color-surface-container-low': GetPaletteColor('neutral', 10),
        '--md-sys-color-surface-container': GetPaletteColor('neutral', 12),
        '--md-sys-color-surface-container-high': GetPaletteColor('neutral', 17),
        '--md-sys-color-surface-container-highest': GetPaletteColor('neutral', 22),
        '--md-sys-color-surface-variant': GetPaletteColor('neutral-variant', 30),
        '--md-sys-color-on-surface': GetPaletteColor('neutral', 90),
        '--md-sys-color-on-surface-variant': GetPaletteColor('neutral-variant', 80),
        '--md-sys-color-inverse-surface': GetPaletteColor('neutral', 90),
        '--md-sys-color-inverse-on-surface': GetPaletteColor('neutral', 20),
        '--md-sys-color-surface-tint': GetPaletteColor('primary', 80),
        // Misc Dark
        '--md-sys-color-background': GetPaletteColor('neutral', 6),
        '--md-sys-color-on-background': GetPaletteColor('neutral', 90),
        '--md-sys-color-outline': GetPaletteColor('neutral-variant', 60),
        '--md-sys-color-outline-variant': GetPaletteColor('neutral-variant', 30),
        '--md-sys-color-shadow': GetPaletteColor('neutral', 0),
        '--md-sys-color-scrim': GetPaletteColor('neutral', 0),
      ) !global;
    } @else {
      $scheme: (
        // Primary Light
        '--md-sys-color-primary': GetPaletteColor('primary', 40),
        '--md-sys-color-primary-container': GetPaletteColor('primary', 90),
        '--md-sys-color-on-primary': GetPaletteColor('primary', 100),
        '--md-sys-color-on-primary-container': GetPaletteColor('primary', 10),
        '--md-sys-color-inverse-primary': GetPaletteColor('primary', 80),
        // Secondary Light
        '--md-sys-color-secondary': GetPaletteColor('secondary', 40),
        '--md-sys-color-secondary-container': GetPaletteColor('secondary', 90),
        '--md-sys-color-on-secondary': GetPaletteColor('secondary', 100),
        '--md-sys-color-on-secondary-container': GetPaletteColor('secondary', 10),
        // Tertiary Light
        '--md-sys-color-tertiary': GetPaletteColor('tertiary', 40),
        '--md-sys-color-tertiary-container': GetPaletteColor('tertiary', 90),
        '--md-sys-color-on-tertiay': GetPaletteColor('tertiary', 100),
        '--md-sys-color-on-tertiary-container': GetPaletteColor('tertiary', 10),
        // Error Light
        '--md-sys-color-error': GetPaletteColor('error', 40),
        '--md-sys-color-error-container': GetPaletteColor('error', 90),
        '--md-sys-color-on-error': GetPaletteColor('error', 100),
        '--md-sys-color-on-error-container': GetPaletteColor('error', 10),
        // Surface Light
        '--md-sys-color-surface': GetPaletteColor('neutral', 98),
        '--md-sys-color-surface-dim': GetPaletteColor('neutral', 87),
        '--md-sys-color-surface-bright': GetPaletteColor('neutral', 98),
        '--md-sys-color-surface-container-lowest': GetPaletteColor('neutral', 100),
        '--md-sys-color-surface-container-low': GetPaletteColor('neutral', 96),
        '--md-sys-color-surface-container': GetPaletteColor('neutral', 94),
        '--md-sys-color-surface-container-high': GetPaletteColor('neutral', 92),
        '--md-sys-color-surface-container-highest': GetPaletteColor('neutral', 90),
        '--md-sys-color-surface-variant': GetPaletteColor('neutral-variant', 90),
        '--md-sys-color-on-surface': GetPaletteColor('neutral', 10),
        '--md-sys-color-on-surface-variant': GetPaletteColor('neutral-variant', 30),
        '--md-sys-color-inverse-surface': GetPaletteColor('neutral', 20),
        '--md-sys-color-inverse-on-surface': GetPaletteColor('neutral', 95),
        '--md-sys-color-surface-tint': GetPaletteColor('primary', 40),
        // Misc Light
        '--md-sys-color-background': GetPaletteColor('neutral', 98),
        '--md-sys-color-on-background': GetPaletteColor('neutral', 10),
        '--md-sys-color-outline': GetPaletteColor('neutral-variant', 50),
        '--md-sys-color-outline-variant': GetPaletteColor('neutral-variant', 80),
        '--md-sys-color-shadow': GetPaletteColor('neutral', 0),
        '--md-sys-color-scrim': GetPaletteColor('neutral', 0),
      ) !global;
    }
  }
  @return $scheme;
}

/// Given a color name (so a string) extracts the corresponding MD3 color from the scheme.
/// e.g: GetSchemeColor('primary') will extract '--md-sys-color-primary' from the scheme map.
@function GetSchemeColor($color) {
  $key: '--md-sys-color-' + $color;
  $scheme: GetColorScheme();
  $val: map.get($scheme, $key);
  @if not $val {
    @warn "Invalid token #{$key}";
    @return lightgray;
  }
  @return $val;
}

/// Given a color name (so a string) and the color's luminance (number) extracts the corresponding MD3 color from the palette.
/// e.g: GetPaletteColor('primary', 10) will extract '--md-ref-palette-primary10' from the palette map.
@function GetPaletteColor($color, $luminance) {
  $clamped_luminance: math.clamp(0, $luminance, 100);
  $key: '--md-ref-palette-' + $color + $clamped_luminance;
  $val: map.get($palette, $key);
  @if not $val {
    @warn "Invalid token #{$key}";
    @return lightgray;
  }
  @return $val;
}

/// Returns the opacity percentage given an elevation level (between 0 and 5).
/// These values are defined by M3 guidelines.
@function GetElevationPercentage($level) {
  $clamped_level: math.clamp(0, $level, 5);
  @return map.get((
    0: 0%,
    1: 5%,
    2: 8%,
    3: 11%,
    4: 12%,
    5: 14%,
  ), $level);
}

/// Returns the opacity percentage given the state of a component (focus, press, hover, etc...).
/// These values are defined by M3 guidelines.
@function GetStateLayer($state) {
  $val: map.get((
    'hover': 8%,
    'focus': 10%,
    'focused': 10%,
    'press': 10%,
    'pressed': 10%,
    'dragged': 16%,
    'disabled': 12%,
    'disabled-text': 38%,
  ), $state);
  @if not $val {
    @warn "Invalid state layer #{$state}";
    @return 0%;
  }
  @return $val;
}

/// Returns pixel values given the desired shape.
/// These values are defined by M3 guidelines.
@function GetShape($shape) {
  $val: map.get((
    'none': '0px',
    'extra-small': '4px',
    'extra-small-top': '4px 4px 0px 0px',
    'small': '8px',
    'medium': '12px',
    'large': '16px',
    'large-end': '0px 16px 16px 0px',
    'large-top': '16px 16px 0px 0px',
    'extra-large': '28px',
    'extra-large-top': '28px 28px 0px 0px',
    'full': '100%',
  ), $shape);
  @if not $val {
    @warn "Invalid shape #{$shape}";
    @return 0px;
  }
  @return unquote($val);
}

/// This is responsible for exposing both the palette and scheme colors in a way that is compatible with JavaFX.
/// All colors are exposed in the '.root' element, and are striped of the first '-' character as it's incompatible.
/// e.g: '--md-sys-color-primary' becomes '-md-sys-color-primary'
/// e.g: .root { -md-sys-color-primary: color; ... }
@mixin ExposeTokens() {
  .root {
    /* Palette */
    @each $token, $value in $palette {
      #{Utils.StringReplace($token, '--', '-')}: $value;
    }

    /* Scheme */
    @each $token, $value in GetColorScheme() {
      #{Utils.StringReplace($token, '--', '-')}: $value;
    }
  }
}