dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refonte des variables de couleurs

Browse source
This commit is contained in:
Raphaël Goetter 2022-01-05 17:34:13 +01:00
parent 8e95e4cdd9
commit 59f02b6c57
10 changed files with 197 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

112
sass/abstracts/_variables-sass.scss
View file

@ -7,10 +7,9 @@
// ----------------
// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
$breakpoints: (
sm: 576px,
$breakpoints: (sm: 576px,
md: 992px,
lg: 1330px,
lg: 1400px,
) !default;
$small: map-get($breakpoints, sm) !default;
@ -21,8 +20,7 @@ $large: map-get($breakpoints, lg) !default;
// Spacers
// ----------------
$spacers: (
"0": 0,
$spacers: ("0": 0,
// none
"2": 0.125rem,
// tiny
@ -59,8 +57,7 @@ $spacer-large-plus: map-get($spacers, "36") !default;
$grid-columns: 6 !default;
$gaps: (
"0": 0,
$gaps: ("0": 0,
"5": 0.313rem,
"10": 0.625rem,
"16": 1rem,
@ -72,16 +69,25 @@ $gaps: (
// Fonts
// ----------------
// Font families
$font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
// Familles de fonts
$font-family-base: system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
$font-family-headings: sans-serif;
$font-family-monospace: consolas, courier, monospace;
$font-family-monospace: consolas,
courier,
monospace;
$line-height-base: 1.5;
// Font sizes
$font-size: (
"10": 0.625rem,
$font-size: ("10": 0.625rem,
"11": 0.6875rem,
"12": 0.75rem,
"14": 0.875rem,
@ -98,7 +104,7 @@ $font-size: (
$font-size-html: 100%;
$font-size-base: 1rem;
// Font weights
// Graisses des Fonts
$weight-light: 200;
$weight-book: 300;
$weight-regular: 400;
@ -109,42 +115,56 @@ $weight-bold: 700;
// Couleurs
// ----------------
// Palette de couleur (à ne pas utiliser en variables sauf $white and $black)
$white: #ffffff;
$black: #000000;
// Variables niveaux de gris
$color-gray-1: #f7fafc;
$color-gray-2: #abc3c2;
$color-gray-3: #454d5d;
$color-gray-4: #212529;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$white: #FFFFFF;
$black: #0F0F0F;
$color-blue-1: #0275d8;
$color-blue-2: #04527b;
$color-blue-3: #033651;
// Palette non agnostic (à utiliser en variables)
// Variables couleurs globales
$color-alpha: $color-gray-1; // couleurs fréquentes
$color-beta: $color-gray-3;
$color-gamma: $color-gray-4;
$body-color: $gray-900;
$body-bg: $white;
$color-delta: $color-blue-1;
$color-epsilon: $color-blue-2;
$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure)
$on-primary: $white; // Contenus (texte, lien, icône) affichés par-dessus une couche $primary
$color-gradient-alpha: linear-gradient(
to left bottom,
$color-alpha,
$color-beta
);
$secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus.
$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
// Variables couleurs statuts
$success: #dff0d9;
$success-border: #d6e9c6;
$on-success: #28a745; // contenu sur couche success
$on-success-accent: #4d9c4d; // lien sur couche success
$info: #d9edf7;
$info-border: #bce8f1;
$on-info: #17a2b8;
$on-info-accent: #4fa8c4;
$warning: #fcf8e3;
$warning-border: #faebcc;
$on-warning: #ffc107;
$on-warning-accent: #d19644;
$error: #fff2f2;
$error-border: #ebccd1;
$on-error: #d9534f;
$on-error-accent: #be4945;
$color-alternate-1: #5cb85c; // couleurs moins fréquentes
$color-alternate-1b: #4d9c4d;
$color-alternate-2: #5bc0de;
$color-alternate-2b: #4fa8c4;
$color-alternate-3: #f0ad4e;
$color-alternate-3b: #d19644;
$color-alternate-4: #d9534f;
$color-alternate-4b: #be4945;
// Links
$link-decoration: underline;
@ -160,8 +180,7 @@ $radius-circle: 50%;
// ----------------
// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
// ----------------
$utils: (
(hidden, display, none),
$utils: ((hidden, display, none),
(block, display, block),
(inline, display, inline),
(inline-block, display, inline-block),
@ -221,5 +240,4 @@ $utils: (
(align-bottom, vertical-align, bottom),
(align-middle, vertical-align, middle),
(item-first, order, -100),
(item-last, order, 100)
) !default;
(item-last, order, 100)) !default;

36
sass/base/_reset-base.scss
View file

@ -10,8 +10,10 @@
*,
*::before,
*::after {
box-sizing: border-box; /* 1 */
min-width: 0; /* 2 */
box-sizing: border-box;
/* 1 */
min-width: 0;
/* 2 */
}
/*
@ -22,9 +24,12 @@
html {
font-size: $font-size-html;
-webkit-tap-highlight-color: transparent; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
overflow-wrap: break-word; /* 3 */
-webkit-tap-highlight-color: transparent;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
overflow-wrap: break-word;
/* 3 */
}
body {
@ -32,8 +37,8 @@ body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
background-color: $white;
color: $color-gamma;
background-color: $body-bg;
color: $body-color;
}
/*
@ -52,7 +57,7 @@ h5,
.h5-like,
h6,
.h6-like {
color: $color-gamma;
color: $gray-900;
}
/*
@ -60,14 +65,14 @@ h6,
*/
a {
color: $color-beta;
color: $gray-600;
text-decoration: $link-decoration;
}
a:focus,
a:hover,
a:active {
color: $color-gamma;
color: $gray-900;
text-decoration: $link-decoration-hover;
}
@ -77,9 +82,12 @@ a:active {
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/*
@ -246,4 +254,4 @@ table {
border-collapse: collapse;
vertical-align: top;
margin-bottom: $spacer-medium;
}
}

10
sass/components/_checkbox.scss
View file

@ -12,7 +12,7 @@
*/
$checkbox-color: $white;
$checkbox-background: $color-alpha;
$checkbox-background: $primary;
$checkbox-size: 2rem;
$checkbox-border-radius: 4px;
@ -31,13 +31,13 @@ $checkbox-border-radius: 4px;
height: $checkbox-size;
vertical-align: text-bottom;
outline: 0;
box-shadow: inset 0 0 0 1px $color-alpha;
box-shadow: inset 0 0 0 1px $primary;
background-color: $checkbox-color;
transition: background-color 0.15s;
cursor: pointer;
}
.checkbox + label {
.checkbox+label {
cursor: pointer;
}
@ -45,7 +45,7 @@ $checkbox-border-radius: 4px;
opacity: 0.6;
}
.checkbox:disabled + label {
.checkbox:disabled+label {
opacity: 0.6;
cursor: not-allowed;
}
@ -56,4 +56,4 @@ $checkbox-border-radius: 4px;
background-position: center;
background-repeat: no-repeat;
background-color: $checkbox-background;
}
}

12
sass/components/_radio.scss
View file

@ -11,7 +11,7 @@
* radio variables (you can change them)
*/
$radio-color: $color-alpha;
$radio-color: $primary;
$radio-background: $white;
$radio-size: 2rem;
$radio-border-radius: 50%;
@ -31,13 +31,13 @@ $radio-border-radius: 50%;
height: $radio-size;
vertical-align: text-bottom;
outline: 0;
box-shadow: inset 0 0 0 1px $color-alpha;
box-shadow: inset 0 0 0 1px $primary;
background-color: $radio-background;
transition: background-size 0.15s;
cursor: pointer;
}
.radio + label {
.radio+label {
cursor: pointer;
}
@ -45,7 +45,7 @@ $radio-border-radius: 50%;
opacity: 0.6;
}
.radio:disabled + label {
.radio:disabled+label {
opacity: 0.6;
cursor: not-allowed;
}
@ -55,5 +55,5 @@ $radio-border-radius: 50%;
background-size: 70% 70%;
background-position: center;
background-repeat: no-repeat;
background-color: $color-alpha;
}
background-color: $primary;
}

4
sass/knacss.scss
View file

@ -1,7 +1,7 @@
/*!
* KNACSS Reborn: Just keep it simple!
* @author: Alsacreations
* v8.0.5 2021/07
* v8.1 2022/01
* Licence WTFPL http://www.wtfpl.net/
*/
@ -29,4 +29,4 @@
// @import "components/checkbox";
// @import "components/radio";
// @import "components/select";
// @import "components/quote";
// @import "components/quote";