sass: Use on() function for primary & error colors
So they become more adaptable.
So they become more adaptable.
by roundabout, Sunday, 3 November 2019, 01:27:54 (1572744474), pushed by roundabout, Sunday, 11 May 2025, 13:22:44 (1746969764)
Author identity: nana-4 <hnmaigo@gmail.com>
fe6dee7095bc0dd09cd5ff1cb7a428af7b95a569
$on-colors: (
dark: (
primary: #1A73E8,
error: #D93025,
text: rgba(black, .87),
text2: rgba(black, .6),
text-disabled: rgba(black, .38),
fill: rgba(black, .04)
),
light: (
primary: #8AB4F8,
error: #F28B82,
text: white,
text2: rgba(white, .7),
text-disabled: rgba(white, .5),
// Basic colors
//
$primary-dark: #1A73E8;
$primary-light: #8AB4F8;
$primary: if($variant == 'light', $primary-dark, $primary-light);
$background: if($variant == 'light', #F2F2F2, $dark-background);
$surface: if($variant == 'light', #FFFFFF, $dark-surface-8dp);
$base: if($variant == 'light', #FFFFFF, $dark-surface-1dp); // semi-surface with 1dp elevation
// Misc colors
//
$primary: on($background, primary);
$link: $primary;
$link-visited: if($variant == 'light', $purple-500, $purple-200);
$error: on($background, error);
$warning: if($variant == 'light', #F4B400, #FDD633);
$error: if($variant == 'light', #D93025, #F28B82);
$success: if($variant == 'light', #0F9D58, #81C995);
$suggested: $primary;
//
::selection {
background-color: rgba($primary-dark, 0.24);
background-color: rgba(on(light, primary), 0.24);
}
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
.tile-preview-left.on-primary {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
.tile-preview-left.on-primary {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
.tile-preview-left.on-primary {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
.tile-preview-left.on-primary {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
.tile-preview-left.on-primary {
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
.tile-preview-left.on-primary {
// Rubberband for select-area screenshots
.select-area-rubberband {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
// not really top bar only
/* Tiled window previews */
.tile-preview {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
.tile-preview-left.on-primary {
// Rubberband for select-area screenshots
.select-area-rubberband {
background-color: rgba($primary-light, 0.3);
border: 1px solid $primary-light;
background-color: rgba(on(dark, primary), 0.3);
border: 1px solid on(dark, primary);
}
// Pointer location
.rubberband,
rubberband {
border: 1px solid $primary-light;
background-color: rgba($primary-light, 0.3);
border: 1px solid on(dark, primary);
background-color: rgba(on(dark, primary), 0.3);
}
flowbox {
// WnckPager
PanelApplet.wnck-applet .wnck-pager {
background-color: transparent;
color: $primary-light;
color: on($panel, primary);
&:hover { background-color: $overlay-hover; }