io.github.palexdev.mfxresources.themes.material.tokens._theme.scss Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of materialfx-all Show documentation
Show all versions of materialfx-all Show documentation
Material Design/Modern components for JavaFX, now packed as a single Jar
@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': 12%,
'focused': 12%,
'press': 12%,
'pressed': 12%,
'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;
}
}
}