improvement: rework palette and colors

This commit is contained in:
Kazhnuz 2021-07-25 14:12:29 +02:00
parent 090b42ff1b
commit 1159647c5b
7 changed files with 179 additions and 208 deletions

View file

@ -32,7 +32,7 @@ a.article-nav-link-wrap {
p &:last-child {
margin-bottom:0;
}
@include button-color($color-info, $color-button-light);
@include button-color($color-info);
}
.pigimg, .mb {
@ -54,10 +54,10 @@ nav.pagination {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
@include button-color($color-light2, $color-button-dark);
@include button-color($color-font-light);
&.current {
@include button-color($color-info, $color-button-light);
@include button-color($color-info);
}
}
}
@ -71,7 +71,7 @@ nav.pagination {
input, textarea {
width:100%;
background-color:$color-light;
background-color:$color-background;
border-radius:0px;
border: 1px solid rgba(0,0,0,0.2);
padding:0.375rem;

View file

@ -31,8 +31,8 @@
/* ------------------ HEADERS ------------------- */
#page-header {
background: $color-skyblue url('img/background.png') center bottom repeat-x;
border-top: 6px solid $color-dark2;
background: get-color("skyblue") url('img/background.png') center bottom repeat-x;
border-top: 6px solid get-color("dark2");
padding-bottom:3rem;
.header-collumns {
@ -75,7 +75,7 @@
header h1 {
border-style:none !important;
color: $color-light;
color: $color-font-light;
font-weight: $fontweight_hyper;
font-size:5.4em;
font-style:oblique;
@ -93,9 +93,9 @@ header h1 {
border-left: 0;
border-right: 0;
padding: 0.75rem;
color: $color-light;
color: $color-font-light;
a {
color: $color-light;
color: $color-font-light;
}
@include li-no-margin();
}
@ -197,13 +197,13 @@ header h1 {
/* ------------------ PAGE ------------------- */
#wrapper {
background-color: $color-light;
background-color: $color-background;
}
/* ------------------ FOOTER ------------------- */
$color-footer-back: $color-dark2;
$color-footer-text: $color-light;
$color-footer-back: get-color("dark2");
$color-footer-text: $color-font-light;
body {
// On colorise le background de la page complete de la même
@ -232,7 +232,7 @@ footer {
a, a:visited {
&:hover, &:active, &:visited {
color: $color-light;
color: $color-font-light;
}
}

View file

@ -9,107 +9,136 @@
*
*/
$whiteness_value: 0.8;
// Couleurs de base du theme :
$color-blue: #268bd2;
$color-violet: #d33682;
$color-red: #dc322f;
$color-orange: #cb4b16;
$color-green: #859900;
$color-skyblue: #2aa198;
$color-dark: #002b36;
$color-light: #fdf6e3;
$color-yellow: #b58900;
$color-grey: #586e75;
$palette: (
"blue":#268bd2,
"violet":#d33682,
"red":#dc322f,
"orange":#cb4b16,
"green":#859900,
"skyblue":#2aa198,
"dark": #002b36,
"light":#fdf6e3,
"yellow":#b58900,
"grey":#586e75,
"dark2":#073642,
"light2":#eee8d5,
"gray2":#657b83,
"gray3":#839496,
"gray4":#93a1a1);
$color-dark2: #073642;
$color-light2: #eee8d5;
$semantics: (
"font":"dark2",
"font-light":"light",
"background":"light",
"background-alt":"light2",
"link":"skyblue",
"selection":"skyblue",
"mark":"yellow",
"primary":"violet",
"secondary":"skyblue",
"warning":"orange",
"danger":"red",
"info":"skyblue",
"success":"green",
"muted":"grey");
$color-gray2: #657b83;
$color-gray3: #839496;
$color-gray4: #93a1a1;
$color-primary: $color-violet;
$color-secondary: $color-skyblue;
$color-link: $color-skyblue;
$color-selection: $color-skyblue;
$color-mark: $color-yellow;
$color-font: $color-dark2;
$color-warning: $color-orange;
$color-danger: $color-red;
$color-info: $color-skyblue;
$color-success: $color-green;
@mixin background-color($background-color, $text-color) {
background-color: $background-color!important;
color: $text-color;
// FUNCTIONS TO GET MORE EASILY COLORS
@function get-color($name) {
@if map-has-key($semantics, $name) {
@return map-get($palette, map-get($semantics, $name));
} @else {
@return map-get($palette, $name);
}
}
@function list-colors() {
$newmap: map-merge($palette, $semantics);
@return $newmap;
}
@function luminance($color) {
$c_red: red($color);
$c_grn: green($color);
$c_blu: blue($color);
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
@return $luminance
}
@function getTextColorFromBackground($background-color) {
@if (luminance($background-color) < 255 * $whiteness_value) {
@return $color-font-light;
} @else {
@return $color-font;
}
}
// Couleurs du theme
$color-link: get-color("link");
$color-selection: get-color("selection");
$color-mark: get-color("mark");
$color-font: get-color("font");
$color-font-light: get-color("font-light");
$color-primary: get-color("primary");
$color-secondary: get-color("secondary");
$color-warning: get-color("warning");
$color-danger: get-color("danger");
$color-info: get-color("info");
$color-success: get-color("success");
$color-muted: get-color("muted");
$color-background: get-color("background");
$color-background-alt: get-color("background-alt");
// fonction texte et background
@mixin text-color($text-color) {
color: $text-color;
color: $text-color;
}
@mixin background-color($background-color) {
background-color: $background-color;
color: getTextColorFromBackground($background-color);
}
// Colorize important elements
// Direct uses of colors
a, a:hover, a:active {
color: $color-link;
}
::selection {
@include background-color($color-selection, $color-light);
@include background-color($color-selection);
}
::-moz-selection {
@include background-color($color-selection, $color-light);
@include background-color($color-selection);
}
mark {
background-color: lighten($color-mark, 30%)
background-color: lighten($color-mark, 30%)
}
blockquote, pre {
border-color: $color-primary;
border-color: $color-primary;
}
// Add generic colorizations classes
/* BACKGROUNDS */
.bg {
&-blue { @include background-color($color-blue, $color-light); }
&-violet { @include background-color($color-violet, $color-light); }
&-red { @include background-color($color-red, $color-light); }
&-orange { @include background-color($color-orange, $color-light); }
&-green { @include background-color($color-green, $color-light); }
&-skyblue { @include background-color($color-skyblue, $color-light); }
&-dark { @include background-color($color-dark, $color-light); }
&-light { @include background-color($color-light, $color-dark); }
&-yellow { @include background-color($color-yellow, $color-light); }
&-grey { @include background-color($color-grey, $color-light); }
&-primary { @include background-color($color-primary, $color-light); }
&-secondary { @include background-color($color-secondary, $color-light); }
&-warning { @include background-color($color-warning, $color-light); }
&-danger { @include background-color($color-danger, $color-light); }
&-info { @include background-color($color-info, $color-light); }
&-success { @include background-color($color-success, $color-light); }
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name)); }
}
}
/* TEXT */
.text {
&-blue { @include text-color($color-blue); }
&-violet { @include text-color($color-violet); }
&-red { @include text-color($color-red); }
&-orange { @include text-color($color-orange); }
&-green { @include text-color($color-green); }
&-skyblue { @include text-color($color-skyblue); }
&-dark { @include text-color($color-dark); }
&-light { @include text-color($color-light); }
&-yellow { @include text-color($color-yellow); }
&-grey { @include text-color($color-grey); }
&-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); }
&-warning { @include text-color($color-warning); }
&-danger { @include text-color($color-danger); }
&-info { @include text-color($color-info); }
&-success { @include text-color($color-success); }
@each $name, $color in list-colors() {
&-#{$name} { @include text-color(get-color($name)); }
}
}

View file

@ -26,7 +26,7 @@ body {
}
.night-mode {
color: $color-light2;
color: $color-font-light;
}
strong {
@ -40,8 +40,7 @@ em {
a, a:visited {
color: $color-light;
background-color: $color-link;
@include background-color($color-link);
text-decoration:none;
padding:0.05rem;
padding-left:0.25rem;
@ -75,9 +74,6 @@ ul, ol {
}
}
::selection { background: $color-selection; color: $color-light; }
::-moz-selection { background: $color-selection; color: $color-light; }
/* 2.2 - Text Wrapper */
.container-article, .container-typographic {
@ -229,9 +225,8 @@ hr {
padding: $lineheight 1rem $lineheight 1rem;
max-width: 100%;
background-color: $color-light2;
font-style: italic;
color: $color-dark2;
@include background-color($color-background-alt)
}
blockquote, .quote {
@ -249,7 +244,7 @@ blockquote, .quote {
code {
background:transparent;
color: $color-red;
color: $color-danger;
}
.small-text {
@ -307,21 +302,7 @@ th {
}
.table {
&-blue { @include table-color($color-blue); }
&-violet { @include table-color($color-violet); }
&-red { @include table-color($color-red); }
&-orange { @include table-color($color-orange); }
&-green { @include table-color($color-green); }
&-skyblue { @include table-color($color-skyblue); }
&-dark { @include table-color($color-dark); }
&-light { @include table-color($color-light); }
&-yellow { @include table-color($color-yellow); }
&-grey { @include table-color($color-grey); }
&-primary { @include table-color($color-primary); }
&-secondary { @include table-color($color-secondary); }
&-warning { @include table-color($color-warning); }
&-danger { @include table-color($color-danger); }
&-info { @include table-color($color-info); }
&-success { @include table-color($color-success); }
@each $name, $color in list-colors() {
&-#{$name} { @include table-color(get-color($name)); }
}
}

View file

@ -4,8 +4,8 @@
*
*/
$color-button-light: $color-light;
$color-button-dark: $color-dark;
$color-button-light: $color-background;
$color-button-dark: get-color("dark");
$button_large: $lineheight;
$button_small: $lineheight_quarter;
@ -46,28 +46,29 @@ $button_small: $lineheight_quarter;
}
}
@mixin colorize-button($background-color, $text-color) {
//@include background-color($background-color, $text-color);
color: $text-color;
@mixin colorize-button($background-color) {
&:before {
background-color: $background-color;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-color, $text-color);
@include colorize-button($background-color);
color:$text-color;
&:visited {
@include colorize-button($background-color, $text-color);
@include colorize-button($background-color);
color:$text-color;
}
&, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-button($hover-color, lighten($text-color, 5%));
@include colorize-button($hover-color);
color:lighten($text-color, 5%);
}
}
}
@mixin button-color($background-color, $text-color) {
@include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
@mixin button-color($background-color) {
@include button-fullcontrol($background-color, darken($background-color, 7.5%), getTextColorFromBackground($background-color));
}
.btn {
@ -97,13 +98,13 @@ $button_small: $lineheight_quarter;
// NAVBAR SPECIAL BUTTONS
.btn-navbar {
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
padding-left: $button_small;
padding-right: $button_small;
}
.btn-readmore {
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-font-light);
}
// BUTTONS GROUPS
@ -142,7 +143,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
a, & > span {
display:inline-block;
@include button($button-large);
@include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
@include button-fullcontrol($color-background-alt, darken($color-background-alt, 5%), get-color("dark2"));
margin:0 $button-large/2.5 0 $button-large/2.5;
&:before {
@ -151,34 +152,22 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
}
&.active {
@include button-fullcontrol($color-primary, $color-primary, $color-light);
@include button-fullcontrol($color-primary, $color-primary, $color-font-light);
}
}
}
// COLORIZE BUTTONS
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
&-blue { @include button-color($color-blue, $color-button-light); }
&-violet { @include button-color($color-violet, $color-button-light); }
&-red { @include button-color($color-red, $color-button-light); }
&-orange { @include button-color($color-orange, $color-button-light); }
&-green { @include button-color($color-green, $color-button-light); }
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
&-dark { @include button-color($color-dark, $color-button-light); }
&-light { @include button-color($color-light2, $color-button-dark); }
&-yellow { @include button-color($color-yellow, $color-button-light); }
&-grey { @include button-color($color-grey, $color-button-light); }
&-primary { @include button-color($color-primary, $color-button-light); }
&-secondary { @include button-color($color-secondary, $color-button-light); }
&-warning { @include button-color($color-warning, $color-button-light); }
&-danger { @include button-color($color-danger, $color-button-light); }
&-info { @include button-color($color-info, $color-button-light); }
&-success { @include button-color($color-success, $color-button-light);}
&-link {@include button-color(transparent, $color-dark);}
@each $name, $color in list-colors() {
&-#{$name} { @include button-color(get-color($name)); }
}
&-link {
@include button-color(transparent);
color:$color-font!important;
}
}
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
@ -192,9 +181,9 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
text-align:right;
}
.btn, a.btn {
&-facebook {@include button-color(#3B5998, $color-button-light);}
&-twitter {@include button-color(#55ACEE, $color-button-light);}
&-googleplus {@include button-color(#d34836, $color-button-light);}
&-diaspora {@include button-color(#313739, $color-button-light);}
&-mastodon {@include button-color(#282c37, $color-button-light);}
&-facebook {@include button-color(#3B5998);}
&-twitter {@include button-color(#55ACEE);}
&-googleplus {@include button-color(#d34836);}
&-diaspora {@include button-color(#313739);}
&-mastodon {@include button-color(#282c37);}
}

View file

@ -10,7 +10,7 @@ $card-smallpad: $lineheight_half;
@mixin card($size) {
@include border-radius();
background-color: $color-light2;
background-color: $color-background-alt;
box-shadow: $large-shadow;
border: none;
margin:0;
@ -42,17 +42,17 @@ $card-smallpad: $lineheight_half;
font-size:1rem;
padding:0px;
margin:0px;
color:$color-light;
color:$color-font-light;
font-weight: $fontweight_big;
line-height:$lineheight;
}
}
@mixin card-color($background-color, $text-color) {
@mixin card-color($background-color) {
& .card-header, & .menu-header {
@include background-color($background-color, $text-color);
@include background-color($background-color);
&:before {
@include background-color($background-color, $text-color);
@include background-color($background-color);
}
}
}
@ -108,7 +108,7 @@ $card-smallpad: $lineheight_half;
strong {
font-weight: 900;
color:$color-dark!important;
color:get-color("dark")!important;
}
&.noflex {
@ -122,16 +122,16 @@ $card-smallpad: $lineheight_half;
a, a:visited {
text-decoration:none;
color: $color-violet;
color: $color-primary;
background-color:transparent;
&:hover {
text-decoration:none;
color: $color-violet;
color: $color-primary;
@include biseau($lineheight_half);
&:before {
background-color: darken($color-light2, 7.5%)
background-color: darken($color-background-alt, 7.5%)
}
}
@ -201,51 +201,23 @@ ul.card-list, .card > ul {
/* COLORIZE CARDS and TOASTS */
.card, .smallcard, .menu {
&-blue { @include card-color($color-blue, $color-light); }
&-violet { @include card-color($color-violet, $color-light); }
&-red { @include card-color($color-red, $color-light); }
&-orange { @include card-color($color-orange, $color-light); }
&-green { @include card-color($color-green, $color-light); }
&-skyblue { @include card-color($color-skyblue, $color-light); }
&-dark { @include card-color($color-dark, $color-light); }
&-light { @include card-color($color-light2, $color-dark); }
&-yellow { @include card-color($color-yellow, $color-light); }
&-grey { @include card-color($color-grey, $color-light); }
&-primary { @include card-color($color-primary, $color-light); }
&-secondary { @include card-color($color-secondary, $color-light); }
&-warning { @include card-color($color-warning, $color-light); }
&-danger { @include card-color($color-danger, $color-light); }
&-info { @include card-color($color-info, $color-light); }
&-success { @include card-color($color-success, $color-light); }
@each $name, $color in list-colors() {
&-#{$name} { @include card-color(get-color($name)); }
}
}
.toast {
&-blue { @include background-color($color-blue, $color-light); }
&-violet { @include background-color($color-violet, $color-light); }
&-red { @include background-color($color-red, $color-light); }
&-orange { @include background-color($color-orange, $color-light); }
&-green { @include background-color($color-green, $color-light); }
&-skyblue { @include background-color($color-skyblue, $color-light); }
&-dark { @include background-color($color-dark, $color-light); }
&-light { @include background-color($color-light2, $color-dark); }
&-yellow { @include background-color($color-yellow, $color-light); }
&-grey { @include background-color($color-grey, $color-light); }
&-primary { @include background-color($color-primary, $color-light); }
&-secondary { @include background-color($color-secondary, $color-light); }
&-warning { @include background-color($color-warning, $color-light); }
&-danger { @include background-color($color-danger, $color-light); }
&-info { @include background-color($color-info, $color-light); }
&-success { @include background-color($color-success, $color-light); }
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name)); }
}
a, a:visited {
color: $color-light;
color: $color-font-light;
background-color:rgba(0,0,0,0.15);
text-decoration:none;
opacity:1;
&:hover, &:active, &:visited {
color: $color-light;
color: $color-font-light;
background-color:transparent;
opacity:1;
}

View file

@ -80,7 +80,7 @@ $preview-height: 8*$lineheight;
transition: background-color 0.3s;
h1, h2, h3, h4, h5, h6 {
color: $color-light;
color: $color-font-light;
font-size: 1rem;
line-height: $lineheight;
font-weight:$fontweight_big;
@ -145,7 +145,7 @@ $preview-height: 8*$lineheight;
}
.preview-metadata {
color: $color-light;
color: $color-font-light;
height:165px;
overflow: hidden;
@ -163,22 +163,22 @@ $preview-height: 8*$lineheight;
.card-preview.card-info {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-skyblue, 16);
background-color:$color-skyblue;
@include angled-edge('outside top', 'upper left', $color-info, 16);
background-color:$color-info;
}
}
.card-preview.card-grey {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-grey, 16);
background-color:$color-grey;
@include angled-edge('outside top', 'upper left', $color-muted, 16);
background-color:$color-muted;
}
}
.comment-text {
@include angled-edge('outside top', 'upper left', $color-violet, 16);
color: $color-light;
background-color:$color-violet;
@include angled-edge('outside top', 'upper left', $color-primary, 16);
color: $color-font-light;
background-color:$color-primary;
text-align: center;
}