by roundabout, Friday, 24 July 2020, 06:53:31 (1595573611), pushed by roundabout, Sunday, 11 May 2025, 13:22:54 (1746969774)
Author identity: nana-4 <hnmaigo@gmail.com>
f81407adec3b761364fcbab967da67f1b6848029
src/_colors.scss.template
@@ -3,16 +3,17 @@
@import 'color-palette';
@function gtkalpha($c, $a) {
@return unquote("alpha(#{$c}, #{$a})");
@function gtkalpha($color, $alpha) {
@return unquote("alpha(#{$color}, #{$alpha})");
}
// Determine whether the color has alpha.
@function has-alpha($color) {
@return if(alpha($color) < 1, true, false);
}
// Determine whether the color is "light" or "dark".
@function tone($color) {
@if $color == "dark" or $color == "light" {
@return $color;
}
// Calculate color brightness as per https://www.w3.org/TR/AERT/#color-contrast
$brightness: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
@@ -23,49 +24,20 @@
}
}
// Determine whether to use dark or light color on top of given color
// to meet accessibility standards for contrast.
@function on($color, $type: text) {
$contrast-tone: if(tone($color) == "dark", "light", "dark");
@function on($color) {
$contrast-color: if(tone($color) == "dark", $on-dark, $on-light);
@if not map-has-key(map-get($on-colors, $contrast-tone), $type) {
@error "Invalid type: '#{$type}'";
@if saturation($color) > 50% or alpha($color) < 1 {
@return $contrast-color;
} @else {
@return rgba($contrast-color, .87);
}
@return map-get(map-get($on-colors, $contrast-tone), $type);
}
$oomox-dark: if(tone(%FG%) == dark, %FG%, %BG%); // BG should be the darkest background-color in MD theory.
$oomox-light: if(tone(%FG%) == light, %FG%, %MATERIA_SURFACE%); // MATERIA_SURFACE should be the lightest background-color in MD theory.
$on-colors: (
dark: (
primary: %SEL_BG%,
error: %TERMINAL_COLOR9%,
text: $oomox-dark,
text2: rgba($oomox-dark, .7),
text-disabled: rgba($oomox-dark, .5),
text2-disabled: rgba($oomox-dark, .3),
stroke: rgba($oomox-dark, .3),
stroke-disabled: rgba($oomox-dark, .12),
divider: rgba($oomox-dark, .12),
fill: rgba($oomox-dark, .08),
entry-fill: rgba($oomox-dark, .04)
),
light: (
primary: %SEL_BG%,
error: %TERMINAL_COLOR9%,
text: $oomox-light,
text2: rgba($oomox-light, .7),
text-disabled: rgba($oomox-light, .5),
text2-disabled: rgba($oomox-light, .3),
stroke: rgba($oomox-light, .3),
stroke-disabled: rgba($oomox-light, .12),
divider: rgba($oomox-light, .12),
fill: rgba($oomox-light, .08),
entry-fill: rgba($oomox-light, .04)
)
);
}
// Determine the strength of highlight on top of given color.
@function highlight($color) {
@@ -83,80 +55,182 @@ $on-colors: (
@return mix(change-color($color, $alpha: 1), $bg, alpha($color) * 100%);
}
// Private variables for dark background colors
$-dark-background: $oomox-dark;
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
$-dark-surface-4dp: mix(white, $-dark-background, 9%);
$-dark-surface-8dp: mix(white, $-dark-background, 12%);
$-dark-surface-switch: mix(white, $-dark-background, 60%);
$-dark-background: if(tone(%BG%) == "dark", %BG%, %FG%);
$-dark-surface-1dp: mix(white, $-dark-background, 5%);
$-dark-surface-4dp: mix(white, $-dark-background, 9%);
$-dark-surface-8dp: mix(white, $-dark-background, 12%);
$-dark-surface-switch: mix(white, $-dark-background, 60%);
//
// Main colors
//
$primary: if($variant == 'light', on(light, primary), on(dark, primary));
$background: %BG%;
$base: %MATERIA_VIEW%; // for views
$base-alt: %INACTIVE_MATERIA_VIEW%;
$surface: %MATERIA_SURFACE%;
$switch-surface: %MATERIA_SURFACE%; // Special case for switches
$on-surface: %FG%;
$primary-on-light: %SEL_BG%;
$primary-on-dark: %SEL_BG%;
$primary: $primary-on-light;
$on-primary: on($primary);
$error-on-light: %TERMINAL_COLOR9%;
$error-on-dark: %TERMINAL_COLOR9%;
$error: $error-on-light;
$on-error: on($error);
$warning-on-light: %TERMINAL_COLOR11%;
$warning-on-dark: %TERMINAL_COLOR11%;
$warning: $warning-on-light;
$on-warning: on($warning);
$success-on-light: %TERMINAL_COLOR10%;
$success-on-dark: %TERMINAL_COLOR10%;
$success: $success-on-light;
$on-success: on($success);
$visited-on-light: %TERMINAL_COLOR5%;
$visited-on-dark: %TERMINAL_COLOR5%;
$visited: $visited-on-light;
$on-visited: on($visited);
$os-background: %HDR_BG3%;
$on-os-background: %HDR_FG%;
$tooltip: rgba(%HDR_BG%, .9);
$on-tooltip: %HDR_FG%;
$scrim: rgba(black, %MATERIA_PANEL_OPACITY%);
$on-scrim: on($scrim);
$scrim-alt: rgba(black, .3);
$on-scrim-alt: on($scrim-alt);
$panel: %HDR_BG3%;
$on-panel: %HDR_FG%;
// for Unity panel which doesn't allow translucent colors
$panel-solid: %HDR_BG3%;
$on-panel-solid: %HDR_FG%;
$titlebar: %HDR_BG%;
$titlebar-backdrop: %HDR_BG2%;
$on-titlebar: %HDR_FG%;
$background: %BG%;
$surface: %MATERIA_SURFACE%;
$switch-surface: %MATERIA_SURFACE%; // Special case for switches
$titlebar-indicator: currentcolor;
$base: %MATERIA_VIEW%;
$base-alt: %INACTIVE_MATERIA_VIEW%;
@if $variant == "dark" {
$background: if(tone(%BG%) == "dark", %BG%, $-dark-background);
$base: if(tone(%BG%) == "dark", %MATERIA_VIEW%, $-dark-surface-1dp);
$base-alt: if(tone(%BG%) == "dark", %INACTIVE_MATERIA_VIEW%, $-dark-surface-1dp);
$surface: if(tone(%BG%) == "dark", %MATERIA_SURFACE%, $-dark-surface-8dp);
$switch-surface: if(tone(%BG%) == "dark", %MATERIA_SURFACE%, $-dark-surface-switch);
$on-surface: if(tone(%BG%) == "dark", %FG%, on($surface));
$error: if($variant == 'light', on(light, error), on(dark, error));
$warning: %TERMINAL_COLOR11%;
$success: %TERMINAL_COLOR10%;
$visited: %TERMINAL_COLOR5%;
$primary: $primary-on-dark;
$on-primary: on($primary);
$os-background: %HDR_BG3%;
$tooltip: rgba(%HDR_BG%, 0.9);
$scrim: rgba(black, %MATERIA_PANEL_OPACITY%);
$scrim-alt: rgba(black, 0.3);
$error: $error-on-dark;
$on-error: on($error);
$panel: if($topbar == 'dark', %HDR_BG3%, $scrim);
$panel-solid: %HDR_BG3%; // for Unity panel which doesn't allow translucent colors
$warning: $warning-on-dark;
$on-warning: on($warning);
$titlebar: %HDR_BG%;
$titlebar-backdrop: %HDR_BG2%;
$titlebar-indicator: if($topbar == 'dark', currentColor, $primary);
$success: $success-on-dark;
$on-success: on($success);
$visited: $visited-on-dark;
$on-visited: on($visited);
$titlebar: if(tone(%BG%) == "dark", %HDR_BG%, $-dark-surface-4dp);
$titlebar-backdrop: if(tone(%BG%) == "dark", %HDR_BG2%, $-dark-surface-1dp);
$on-titlebar: if(tone(%BG%) == "dark", %HDR_FG%, on($titlebar));
}
@if $topbar == "light" {
$panel: $scrim;
$on-panel: on($panel);
$titlebar-indicator: $primary;
}
//
// Overlay state colors
//
$overlay-hover-opacity: .08;
$overlay-focus-opacity: .08;
$overlay-active-opacity: .12;
$overlay-checked-opacity: .12;
$overlay-selected-opacity: .24;
$overlay-hover: gtkalpha(currentColor, 0.08);
$overlay-focus: gtkalpha(currentColor, 0.08);
$overlay-focus-hover: gtkalpha(currentColor, 0.16);
$overlay-active: gtkalpha(currentColor, 0.12);
$overlay-checked: gtkalpha(currentColor, 0.12);
$overlay-selected: rgba($primary, %MATERIA_SELECTION_OPACITY%);
$overlay-selected: rgba($primary, %MATERIA_SELECTION_OPACITY%);
//
// “On” colors
// For “on” colors
//
$text: %FG%;
$text2: rgba(%FG%, 0.7);
$text-disabled: rgba(%FG%, 0.5);
$text2-disabled: rgba(%FG%, 0.3);
$stroke: rgba(%FG%, 0.3);
$stroke-disabled: rgba(%FG%, 0.12);
$divider: rgba(%FG%, 0.12);
$fill: rgba(%FG%, 0.08);
$entry-fill: rgba(%FG%, 0.04);
$titlebar-text: %HDR_FG%;
$titlebar-text2: rgba(%HDR_FG%, 0.7);
$titlebar-text-disabled: rgba(%HDR_FG%, 0.5);
$titlebar-text2-disabled: rgba(%HDR_FG%, 0.3);
$titlebar-stroke: rgba(%HDR_FG%, 0.3);
$titlebar-stroke-disabled: rgba(%HDR_FG%, 0.12);
$titlebar-divider: rgba(%HDR_FG%, 0.12);
$titlebar-fill: rgba(%HDR_FG%, 0.08);
$titlebar-entry-fill: rgba(%HDR_FG%, 0.04);
@function primary($color) {
@return if(tone($color) == "dark", $primary-on-light, $primary-on-dark);
}
@function error($color) {
@return if(tone($color) == "dark", $error-on-light, $error-on-dark);
}
@function hint($color) {
@return rgba($color, if(has-alpha($color), .6, .7));
}
@function disabled($color) {
@return rgba($color, if(has-alpha($color), .38, .5));
}
@function disabled-hint($color) {
@return rgba($color, if(has-alpha($color), .26, .3));
}
@function stroke($color) {
@return rgba($color, if(has-alpha($color), .26, .3));
}
@function disabled-stroke($color) {
@return rgba($color, if(has-alpha($color), .12, .2));
}
@function divider($color) {
@return rgba($color, if(has-alpha($color), .12, .2));
}
@function fill($color) {
@return rgba($color, if(has-alpha($color), .08, .08));
}
@function entry-fill($color) {
@return rgba($color, if(has-alpha($color), .04, .04));
}