core
variables
icon-size-map
$icon-size-map: (
sm: 16px,
md: 24px,
lg: 32px
);
Description
$icon-size-map
Used by
- [function]
icon-size
z-indexes
$z-indexes: (
auto: auto,
under: -1,
base: 0,
over: 1,
focus: 2000,
menu: 2500,
menu-focus: 3000,
nav: 3500,
nav-focus: 4000,
consent: 4500,
consent-focus: 5000,
modal: 5500,
modal-focus: 6000,
modal-footer: 6500,
);
Description
Liste des z-index présent dans le DS
Type
Map
Used by
- [function]
z-index
mixins
aspect-ratio
@mixin aspect-ratio($ratio, $block) { ... }
Description
Force un ratio d'aspect sur le block par l'ajout d'un pseudo-element en before
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$ratio | key du ratio attendu selon la map $ratio-scale | String | — none |
$block | détermine si le block est créé et sa taille correspondante | Size or Bool | — none |
respond-from
@mixin respond-from($media: md) { ... }
Description
Set media query styles
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$media | Layout size | String | md |
Example
.foo {
@include respond-from(md) {
}
}
Used by
- [mixin]
grid
respond-to
@mixin respond-to($media: md) { ... }
Description
Set media query styles
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$media | Layout size | String | md |
Example
.foo {
@include respond-to(md) {
}
}
z-index
@mixin z-index($index-name) { ... }
Description
Mixin de gestion des z-index
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$index-name | nom du calque de z-index | String | — none |
Requires
grid-col
@mixin grid-col($size, $columns: $grid-columns) { ... }
Description
Définit la largeur de colonne
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$size | Proportion de la taille de colonne | Number | — none |
$columns | Nombre de colonne dans la grille (Par défaut | Number | $grid-columns |
Example
Définit la taille de colonne à 6 sur 12
.foo {
@include grid-col(6);
}
Used by
- [mixin]
grid
grid-col-offset
@mixin grid-col-offset($size, $columns: $grid-columns) { ... }
Description
Définit le décalage de colonne (créé une marge à gauche)
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$size | Proportion du décalage de colonne | Number | — none |
$columns | Nombre de colonne dans la grille (Par défaut | Number | $grid-columns |
Example
Définit la taille du décalage à 2 colonnes sur 12
.foo {
@include grid-col-offset(2);
}
Used by
- [mixin]
grid
grid
@mixin grid($columns: $grid-settings, $with-container: true, $with-offsets: true) { ... }
Description
Génère les classes de colonne pour la grille ainsi que les offsets (optionnel)
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | configuration de la grille | Map | $grid-settings |
$with-container | si true, définit les containers | Bool | true |
$with-offsets | si true, définit les offsets | Bool | true |
Example
Génère les colonnes
@include grid-generator();
Requires
all-ns-elements-selector
@mixin all-ns-elements-selector() { ... }
Description
Sélecteur de toutes les éléments avec une classe du design system ainsi que leur noeuds enfants
Parameters
None.
Requires
- [function]
ns
[private] _spacing
@mixin _spacing($property: "margin", $value: 2, $direction) { ... }
Description
Set space property
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$property | propriété à appliquer à l'espacement | String | "margin" |
$value | valeur de l'espacement en v ou w. peut être une liste si la direction n'est pas renseignée | Number or List | 2 |
$direction | direction de l'espacement | String | — none |
Example
Set margin-bottom to 24px
.foo {
@include _spacing("margin", 6v, "bottom");
}
Requires
functions
icon-size
@function icon-size($size: "md") { ... }
Description
Return icon size from map
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$size | Icon size from | String | "md" |
Example
Set icon size to SM
(12px)
.foo {
width: icons-size(sm);
height: icons-size(sm);
}
Requires
- [function]
px-rem
- [variable]
icon-size-map
map-deep-get
@function map-deep-get($map, $keys...) { ... }
Description
Map deep get
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | Map | Map | — none |
$keys | clés des maps | Arglist | — none |
Returns
Valeur attendue
Author
Hugo Giraudel
ns
@function ns($name, $notation) { ... }
Description
Préfixage d'un élément css, généralement un nom de classe
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | nom de l'élément | String | — none |
$notation | notation du sélecteur, par défaut un point pour les classes | String | — none |
Used by
ns-group
@function ns-group($name) { ... }
Description
Préfixage d'une classe de groupe
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | nom de l'élément, à mettre au pluriel | String | — none |
Requires
- [function]
ns
ns-attr
@function ns-attr($name, $value) { ... }
Description
Préfixage d'un attribut css
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | nom de l'attribut | String | — none |
$value | valeur de l'attribut | String | — none |
Requires
- [function]
ns
str-to-num
@function str-to-num($value) { ... }
Description
Fonction de transformation d'une string en nombre intégral
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | le nombre en chaîne de caractères | String | — none |
Used by
- [function]
space
str-replace
@function str-replace($stack, $needle, $content) { ... }
Description
Remplacement dans une chaine de caractères
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$stack | chaine de caractère où chercher | String | — none |
$needle | élément à chercher | String | — none |
$content | élément de remplacement | String | — none |
Returns
String
—la chaîne de caractères transformée
Used by
- [function]
_replace_color
str-split
@function str-split($string, $separator) { ... }
Description
Découpage d'une chaine de caractères avec un séparateur particulier
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | chaine de caractère à découper | String | — none |
$separator | séparateur | String | — none |
clean-unit
@function clean-unit($value) { ... }
Description
Retourne la valeur numérique sans unité.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | la valeur avec unité | String | — none |
Example
clean-unit(12px);
Used by
- [function]
px-rem
px-rem
@function px-rem($px, $root-font-size: $base-font-size-px) { ... }
Description
Return rem from px
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$px | Font size in pixels | String | — none |
$root-font-size | Pixel font size for conversion | String | $base-font-size-px |
Example
Get 1rem conversion from 16px, using $base-font-size-px
.foo {
font-size: px-rem(12px);
}
Requires
- [function]
clean-unit
Used by
- [function]
icon-size
z-index
@function z-index($index-name) { ... }
Description
Fonction de gestion des z-index
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$index-name | nom du calque de z-index | String | — none |
Requires
- [variable]
z-indexes
Used by
font-weight
@function font-weight($scale: "regular") { ... }
Description
Return font-weight value from font-weight map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$scale | Type scale value from | String | "regular" |
Example
Set font-weight to bold (700)
.foo {
font-weight: font-weight("bold");
}
space
@function space($value) { ... }
Description
Return space value from type map and convert to rem.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | valeur de l'espacement, permet de convertir cet espacement de v (4px) ou w (8px) en rem | Number | — none |
Example
Set margin-bottom to 24px
.foo {
margin-bottom: space(6v);
}
Requires
- [function]
str-to-num
Used by
- [mixin]
_spacing
- [mixin]
_spacing
- [mixin]
scheme-blocks
forms
mixins
disabled-form-field
@mixin disabled-form-field($element: input) { ... }
Description
Mixin pour gérer l'état disabled avec sur un champ input avec un box-shadow
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$element | — none | String | input |
Example
On ajoute un style disabled sur un élément de type input
.foo {
@include disabled-form-field(input);
}
disabled-form-choice
@mixin disabled-form-choice() { ... }
Description
Mixin pour gérer l'état disabled sur un label et les pseudo-elements before et after, l'input étant masqué
Parameters
None.
Example
On ajoute un style disabled sur le label et ses pseudo-elements
.foo {
@include disabled-form-choice();
}
inputs
mixins
placeholder
@mixin placeholder() { ... }
Description
Mixin pour ajouter les préfixes vendor du placeholder
Parameters
None.
Example
.foo {
@include placeholder {
@content;
}
}
legacy
mixins
legacy
@mixin legacy() { ... }
Description
Styles spécifiques pour les plateformes antérieures
Parameters
None.
Example
.foo {
@include ie-hack() {
}
}
not-legacy
@mixin not-legacy() { ... }
Description
Styles spécifiques pour les plateformes modernes, excluant les plateformes antérieures
Parameters
None.
Example
.foo {
@include ie-hack() {
}
}
radios
mixins
radio-rich
@mixin radio-rich() { ... }
Description
Mixin pour gérer l'affichage des boutons radios riches
Parameters
None.
Requires
schemes
mixins
[private] _box-shadow-border
@mixin _box-shadow-border($var, $width) { ... }
Description
Rendu des borders en box-shadow en copiant le système de width de border
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$var | custom property correspondant à la combinaison de couleur | Custom-property | — none |
$width | Largeur de box-shadow correspondant au top right bottom left | List | — none |
Used by
- [mixin]
_scheme-block-border
- [mixin]
_scheme-block-border
- [mixin]
_stylize-component
- [mixin]
component-as-scheme-modifiers
[private] _scheme-block-border
@mixin _scheme-block-border($module, $width) { ... }
Description
Création de classe permettant l'ajout de border sur les blocks
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$module | module sur lequel sera appliqué la bordure | String | — none |
$width | Epaisseur de la bordure, fonctionne de manière similaire à la propriété css border-width | List | — none |
Requires
- [mixin]
_box-shadow-border
- [mixin]
_box-shadow-border
Used by
- [mixin]
scheme-blocks
scheme-body
@mixin scheme-body() { ... }
Description
Couleur de fond blanche par défaut sur le body
Parameters
None.
Requires
- [mixin]
_get-hover-vars
- [mixin]
_get-hover-vars
- [mixin]
_theme-transition
- [function]
_get-scheme
- [function]
_scheme-set-color
- [function]
_scheme-set-color
- [variable]
scheme-sets
scheme-blocks
@mixin scheme-blocks() { ... }
Description
Initialisation des blocs de couleurs
Parameters
None.
Requires
- [mixin]
_get-hover-vars
- [mixin]
_get-hover-vars
- [mixin]
_scheme-block-border
- [mixin]
_theme-transition
- [function]
_scheme-set-color
- [function]
_scheme-set-color
- [function]
space
- [variable]
scheme-blocks
- [variable]
scheme-sets
[private] _stylize-component
@mixin _stylize-component($type, $color, $width) { ... }
Description
Stylisation du composant en tant que block de combinaison de couleur
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type | le type de combinaison, voir settings blocks | String | — none |
$color | la couleur du type | String | — none |
$width | ajout d'une border avec la propriété width déterminant la taille de chacun des 4 côté (comme la propriété css border-width) | List | — none |
Requires
- [mixin]
_box-shadow-border
- [function]
_get-scheme
Used by
- [mixin]
component-as-scheme
- [mixin]
component-as-scheme
component-as-scheme
@mixin component-as-scheme($type, $color, $modifier, $width) { ... }
Description
Component as scheme permet de conférer à un composant le statut de block de combinaison de couleur
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type | le type de combinaison, voir settings blocks | String | — none |
$color | la couleur du type | String | — none |
$modifier | est-ce que la couleur est assignée au composant par un modifier | Boolean | — none |
$width | ajout d'une border avec la propriété width déterminant la taille de chacun des 4 côté (comme la propriété css border-width) | List | — none |
Requires
- [mixin]
_stylize-component
- [mixin]
_stylize-component
Used by
- [mixin]
component-as-scheme-modifiers
component-as-scheme-modifiers
@mixin component-as-scheme-modifiers($type, $width) { ... }
Description
Cette mixin permet d'assigner à un composant tous les modifiers d'un type de combinaison
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type | le type de combinaison, voir settings blocks | String | — none |
$width | ajout d'une border avec la propriété width déterminant la taille de chacun des 4 côté (comme la propriété css border-width) | List | — none |
Requires
- [mixin]
component-as-scheme
- [mixin]
_box-shadow-border
- [variable]
scheme-blocks
scheme-element-data-uri-svg
@mixin scheme-element-data-uri-svg($set-name, $value, $prop) { ... }
Description
Combinaison de couleur appliquée à un svg intégré en data-uri
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set-name | nom de la combinaison comme défini dans settings/sets | String | — none |
$value | le SVG en data-uri | Object | — none |
$prop | propriété sur laquelle est essignée le svg | String | — none |
Example
@include scheme-element-data-uri-svg(g800, url("data:image/svg+xml;utf8,<svg><path fill="$COLOR" /></svg>"));
Requires
- [function]
_replace_color
- [function]
_scheme-set-color
- [function]
_replace_color
- [function]
_scheme-set-color
- [function]
_replace_color
- [function]
_scheme-set-color
- [variable]
scheme-sets
- [variable]
scheme-blocks
[private] _scheme-element
@mixin _scheme-element($set-name, $transition, $hover, $value, $element) { ... }
Description
Ajout d'une combinaison de couleur sur un élément pour un propriété donnée @@param {String} $prop - propriété affectée
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set-name | nom de la combinaison comme défini dans settings/sets | String | — none |
$transition | objet auqel la transition de couleur est associée | Bool or String | — none |
$hover | si true, un effet de hover est appliqué sur l'élément en correspondance avec la couleur. la valeur override permet de simplement changer la couleur de hover (si un hover a déja été appliqué sur l'élément) | Bool or String | — none |
$value | la valeur appliquée à la propriété. la variable $COLOR est remplacée par la custom property de la combinaison de couleur | String or List | — none |
$element | le sélécteur de l'élément | String | — none |
Requires
- [mixin]
_scheme-element-hover
- [mixin]
_get-hover-vars
- [mixin]
_get-hover-vars
- [mixin]
_get-hover-vars
- [mixin]
_theme-transition
- [function]
_scheme-set-color
- [function]
_scheme-set-color
- [function]
_scheme-set-color
- [function]
_replace_color
- [variable]
scheme-sets
- [variable]
scheme-blocks
- [variable]
scheme-elements-transitions
- [variable]
scheme-elements-transitions
- [variable]
scheme-elements-transitions
Used by
- [mixin]
scheme-element-bg-color
- [mixin]
scheme-element-text-color
- [mixin]
scheme-element-fill-color
- [mixin]
scheme-element-border-color
- [mixin]
scheme-element-outline-color
- [mixin]
scheme-element-box-shadow-color
scheme-element-bg-color
@mixin scheme-element-bg-color($set-name, $transition, $hover) { ... }
Description
Ajout d'une couleur de background sur un élément
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set-name | nom de la combinaison comme défini dans settings/sets | String | — none |
$transition | si true, une transition de couleur est appliquée sur la propriété | Bool or String | — none |
$hover | si true, un effet de hover est appliqué sur l'élément en correspondance avec la couleur. la valeur override permet de simplement changer la couleur de hover (si un hover a déja été appliqué sur l'élément) | Bool or String | — none |
Requires
- [mixin]
_scheme-element
scheme-element-text-color
@mixin scheme-element-text-color($set-name, $transition) { ... }
Description
Ajout d'une couleur de texte sur un élément
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set-name | nom de la combinaison comme défini dans settings/sets | String | — none |
$transition | si true, une transition de couleur est appliquée sur la propriété | Bool or String | — none |
Requires
- [mixin]
_scheme-element
scheme-element-fill-color
@mixin scheme-element-fill-color($set-name, $transition) { ... }
Description
Ajout d'une couleur de fill sur un élément
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set-name | nom de la combinaison comme défini dans settings/sets | String | — none |
$transition | si true, une transition de couleur est appliquée sur la propriété | Bool or String | — none |
Requires
- [mixin]
_scheme-element
scheme-element-border-color
@mixin scheme-element-border-color($set-name, $transition, $side, $value) { ... }
Description
Ajout d'une couleur de border sur un élément
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set-name | nom de la combinaison comme défini dans settings/sets | String | — none |
$transition | si true, une transition de couleur est appliquée sur la propriété | Bool or String | — none |
$side | le côté affecté. valeurs: top, right, bottom, left | String | — none |
$value | définition des propriétés de border | List | — none |
Requires
- [mixin]
_scheme-element
scheme-element-outline-color
@mixin scheme-element-outline-color($set-name, $transition, $value) { ... }
Description
Ajout d'une couleur d'outline sur un élément
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set-name | nom de la combinaison comme défini dans settings/sets | String | — none |
$transition | si true, une transition de couleur est appliquée sur la propriété | Bool or String | — none |
$value | définition des propriétés d'outline | List | — none |
Requires
- [mixin]
_scheme-element
scheme-element-box-shadow-color
@mixin scheme-element-box-shadow-color($set-name, $transition, $value) { ... }
Description
Ajout d'une couleur de box-shadow sur un élément
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set-name | nom de la combinaison comme défini dans settings/sets | String | — none |
$transition | si true, une transition de couleur est appliquée sur la propriété | Bool or String | — none |
$value | définition des propriétés de box-shadow | List | — none |
Requires
- [mixin]
_scheme-element
[private] _get-hover-vars
@mixin _get-hover-vars($color, $is-block) { ... }
Description
Définit les couleurs d'hover
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | couleur de l'élément | Color | — none |
$is-block | est-ce que cette définition se fait au niveau d'un block de combinaison ? | Bool | — none |
Requires
- [function]
_overlay-color
- [function]
_overlay-color
Used by
- [mixin]
scheme-body
- [mixin]
scheme-body
- [mixin]
scheme-blocks
- [mixin]
scheme-blocks
- [mixin]
_scheme-element
- [mixin]
_scheme-element
- [mixin]
_scheme-element
[private] _scheme-element-hover
@mixin _scheme-element-hover() { ... }
Description
Applique le hover sur un élément
Parameters
None.
Used by
- [mixin]
_scheme-element
[private] _theme-transition
@mixin _theme-transition() { ... }
Description
transition de thème.
Parameters
None.
Used by
- [mixin]
scheme-body
- [mixin]
scheme-blocks
- [mixin]
_scheme-element
define-vars
@mixin define-vars() { ... }
Description
Définition des custom properties de couleur
Parameters
None.
Requires
- [function]
_scheme-set-color
- [function]
_scheme-set-color
- [function]
_scheme-set-color
- [variable]
scheme-sets
- [variable]
scheme-sets
- [variable]
scheme-blocks
- [variable]
scheme-sets
variables
scheme-blocks
$scheme-blocks: (
light:(
white: w bf500,
grey-100: g100-g800 bf500,
grey-200: g200 bf500,
beige: beige bf500
),
dark:(
grey-800: g800-plain bf300-plain
),
/*soft:(
brown: b300 b500,
blue-soft: bs300 bs500,
blue-dark: bd300 bd500,
green-light: gl300 gl500,
green-medium: gm300 gm500,
green-soft: gs300 gs500,
green-warm: gw300 gw500,
orange-dark: od300 od500,
orange-medium: om300 om500,
orange-soft: os300 os500,
purple: p300 p500,
pink-dark: pd300 pd500,
pink-light: pl300 pl500,
pink-soft: ps300 ps500,
yellow-dark: yd300 yd500,
yellow-medium: ym300 ym500,
)*/
) !global;
Description
configuration des blocs de couleur Il y a 4 types de combinaisons de couleur :
- light : les couleurs claires proches du blanc
- dark : les couleurs foncées proches du noir
- soft : les couleurs claires avec une teinte
- strong : les couleurs foncées avec une teinte (non implémentée à ce stade)
pour chaque bloc, on définit 2 combinaisons de couleurs : la première pour le fond du wrapper la seconde pour les bordures du wrapper
Type
Map
Used by
- [mixin]
scheme-blocks
- [mixin]
component-as-scheme-modifiers
- [mixin]
scheme-element-data-uri-svg
- [mixin]
_scheme-element
- [function]
_scheme-set-color
- [function]
_get-scheme
- [mixin]
define-vars
scheme-elements-transitions
$scheme-elements-transitions: () !global;
Description
map des transitions par élément
Type
Map
Used by
- [mixin]
_scheme-element
- [mixin]
_scheme-element
- [mixin]
_scheme-element
scheme-sets
$scheme-sets: (
// Bleu France, couleur primaire
bf500: $blue-france-500 $blue-france-300 $grey-700 $grey-200,
bf500-plain: $blue-france-500,
w-bf500: $white $blue-france-500,
bf300-plain: $blue-france-300,
bf200-bf300: $blue-france-200 $blue-france-300,
bf100-g750: $blue-france-100 $grey-750,
// Transparence
t-plain: transparent,
t-w: transparent $white,
// Échelle des gris
g800: $grey-800 $white,
g700: $grey-700 $grey-200,
g600: $grey-600 $grey-300,
g500: $grey-500 $grey-400,
g400: $grey-400 $grey-500,
g300: $grey-300 $grey-600,
g200: $grey-200 $grey-700,
g100: $grey-100 $grey-750,
w: $white $grey-800,
beige: $beige $grey-750 $grey-100,
g800-plain: $grey-800,
g600-g400: $grey-600 $grey-400,
g400-t: $grey-400 transparent,
g100-g800: $grey-100 $grey-800,
w-g750: $white $grey-750,
// Focus
focus:$color-focus $color-focus-dark-mode,
// Couleurs fonctionnelles
info:$info $info-dark-mode,
success:$success $success-dark-mode,
// warning:$warning $warning-dark-mode, // inutilisé pour le moment
error:$error $error-dark-mode,
// Rouge Marianne
rm300: $red-marianne-300 $grey-700,
rm500: $red-marianne-500 $red-marianne-300,
// Couleurs illustratives
// b300: $brown-300 $grey-700,
// b500: $brown-500 $brown-300,
// bs300: $blue-soft-300 $grey-700,
// bs500: $blue-soft-500 $blue-soft-300,
// bd300: $blue-dark-300 $grey-700,
// bd500: $blue-dark-500 $blue-dark-300,
// gl300: $green-light-300 $grey-700,
// gl500: $green-light-500 $green-light-300,
// gm300: $green-medium-300 $grey-700,
// gm500: $green-medium-500 $green-medium-300,
// gs300: $green-light-300 $grey-700,
// gs500: $green-light-500 $green-light-300,
// gw300: $green-warm-300 $grey-700,
// gw500: $green-warm-500 $green-warm-300,
// od300: $orange-dark-300 $grey-700,
// od500: $orange-dark-500 $orange-dark-300,
// om300: $orange-dark-300 $grey-700,
// om500: $orange-medium-500 $orange-medium-500,
// os300: $orange-soft-300 $grey-700,
// os500: $orange-soft-500 $orange-soft-300,
// p300: $purple-300 $grey-700,
// p500: $purple-500 $purple-300,
// pd300: $pink-dark-300 $grey-700,
// pd500: $pink-dark-500 $pink-dark-300,
// pl300: $pink-light-300 $grey-700,
// pl500: $pink-light-500 $pink-light-300,
// ps300: $pink-soft-300 $grey-700,
// ps500: $pink-soft-500 $pink-soft-300,
// yd300: $yellow-dark-300 $grey-700,
// yd500: $yellow-dark-500 $yellow-dark-300,
// ym300: $yellow-medium-300 $grey-700,
// ym500: $yellow-medium-500 $yellow-medium-300,
// Ombre du scroll des tableaux. basé sur la couleur $grey-800 pour
scroll-shadow: rgba(red($grey-800), green($grey-800), blue($grey-800), 0.16) rgba(red($grey-800), green($grey-800), blue($grey-800), 1),
/// couleur de l'overlay. basé sur le set couleur g-500 (grey-500 grey-400) et gère les opacité
overlay: rgba(red($grey-500), green($grey-500), blue($grey-500), 0.32) rgba(red($grey-400), green($grey-400), blue($grey-400), 0.32),
) !global;
Description
Configuration des blocs de couleur Il y a 4 types de combinaisons de couleur :
- light : les couleurs claires proches du blanc
- dark : les couleurs foncées proches du noir
- soft : les couleurs claires avec une teinte
- strong : les couleurs foncées avec une teinte (non implémentée à ce stade)
pour chaque combinaison de couuleur, on définit pour chaque type une couleur Si un type n'est pas défini, la couleur de type light (la première) remplace
Type
Map
Used by
- [mixin]
scheme-body
- [mixin]
scheme-blocks
- [mixin]
scheme-element-data-uri-svg
- [mixin]
_scheme-element
- [mixin]
define-vars
- [mixin]
define-vars
- [mixin]
define-vars
functions
[private] _replace_color
@function _replace_color($value, $hex, $url-encode) { ... }
Description
Remplacement de la variable $COLOR par la couleur attendu
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | chaine de caractère dans laquelle remplacer la variable | String | — none |
$hex | couleur de remplacement | Color | — none |
$url-encode | si true, la couleur est url-encodé | Boolean | — none |
Returns
String
—retourne la variable avec la couleur intégrée
Requires
- [function]
str-replace
Used by
- [mixin]
scheme-element-data-uri-svg
- [mixin]
scheme-element-data-uri-svg
- [mixin]
scheme-element-data-uri-svg
- [mixin]
_scheme-element
[private] _scheme-set-color
@function _scheme-set-color($set, $type) { ... }
Description
Obtenir une couleur dans un set
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$set | combinaison de couleur | String | — none |
$type | type de combinaison (light, dark, soft, strong) | String | — none |
Returns
String
—Retourne la couleur correspondant au $type dans un set de couleur définit dans settings/sets
Requires
- [variable]
scheme-blocks
Used by
- [mixin]
scheme-body
- [mixin]
scheme-body
- [mixin]
scheme-blocks
- [mixin]
scheme-blocks
- [mixin]
scheme-element-data-uri-svg
- [mixin]
scheme-element-data-uri-svg
- [mixin]
scheme-element-data-uri-svg
- [mixin]
_scheme-element
- [mixin]
_scheme-element
- [mixin]
_scheme-element
- [mixin]
define-vars
- [mixin]
define-vars
- [mixin]
define-vars
[private] _get-scheme
@function _get-scheme($type, $name, $index) { ... }
Description
Obtenir la configuration d'un block de combinaison
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type | type de combinaison (light, dark, soft, strong) | String | — none |
$name | nom de la variation de bloc | String | — none |
$index | si un index est définit, retourne l'élément à l'index dans la variation, sinon retourne l'ensemble de la variation (liste) | Int | — none |
Returns
String
—Retourne la configuration d'un bloc comme définit dans settings/blocks
Requires
- [variable]
scheme-blocks
Used by
- [mixin]
scheme-body
- [mixin]
_stylize-component
[private] _overlay-color
@function _overlay-color($color, $factor) { ... }
Description
Obtenir la couleur d'hover
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | couleur de base | Color | — none |
$factor | mutliplicateur permettant d'amplifier l'effet | Number | — none |
Returns
Color
—Retourne la couleur modifiée pour le hover avec une transparence de 0.5
Used by
- [mixin]
_get-hover-vars
- [mixin]
_get-hover-vars
toggles
mixins
disabled-toggle-choice
@mixin disabled-toggle-choice() { ... }
Description
Mixin pour gérer les styles quand le toggle est inactif, au niveau de l'input, du label et de ses pseudos elements before et after
Parameters
None.
Example
On ajoute un style disabled sur l’input, le label et ses pseudo-elements
.foo {
@include disabled-toggle-choice();
}