couleurs – devfrontend.info

$foundation-palette: (
  primary: #0070b8,
  secondary: #f08a00,
  tertiary: #6f7072,
  quaternary: #003f6c,
  quinary: #fecc00,
  senary: #a6a8aa,
  success: #2dcc70,
  warning: #ffae00,
  alert: #e20d0d,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #000000;
$white: #ffffff;
$body-background: $white;
$body-font-color: $black;

@include add-foundation-colors;

$tertiary-color: get-color(tertiary);
$quaternary-color: get-color(quaternary);
$quinary-color: get-color(quinary);
$senary-color: get-color(senary);

$primary-color-white-25: mix(white, $primary-color, 25%);
$primary-color-white-50: mix(white, $primary-color, 50%);
$primary-color-black-25: mix(black, $primary-color, 25%);
$primary-color-black-50: mix(black, $primary-color, 50%);

$secondary-color-white-25: mix(white, $secondary-color, 25%);
$secondary-color-white-50: mix(white, $secondary-color, 50%);
$secondary-color-black-25: mix(black, $secondary-color, 25%);
$secondary-color-black-50: mix(black, $secondary-color, 50%);

$tertiary-color-white-25: mix(white, $tertiary-color, 25%);
$tertiary-color-white-50: mix(white, $tertiary-color, 50%);
$tertiary-color-black-25: mix(black, $tertiary-color, 25%);
$tertiary-color-black-50: mix(black, $tertiary-color, 50%);

$quaternary-color-white-25: mix(white, $quaternary-color, 25%);
$quaternary-color-white-50: mix(white, $quaternary-color, 50%);
$quaternary-color-black-25: mix(black, $quaternary-color, 25%);
$quaternary-color-black-50: mix(black, $quaternary-color, 50%);

$quinary-color-white-25: mix(white, $quinary-color, 25%);
$quinary-color-white-50: mix(white, $quinary-color, 50%);
$quinary-color-black-25: mix(black, $quinary-color, 25%);
$quinary-color-black-50: mix(black, $quinary-color, 50%);

$senary-color-white-25: mix(white, $senary-color, 25%);
$senary-color-white-50: mix(white, $senary-color, 50%);
$senary-color-black-25: mix(black, $senary-color, 25%);
$senary-color-black-50: mix(black, $senary-color, 50%);

$gradient-palette: (
  primary: (
    start: $primary-color,
    end:   $quaternary-color, 
  ),
  secondary: (
    start: $secondary-color,
    end:   $quinary-color, 
  ),
  tertiary: (
    start: $tertiary-color,
    end:   $senary-color, 
  ),
  quaternary: (
    start: #373738,
    end:   #535355, 
  ),
  quinary: (
    start: #d2d3d4,
    end:   #f5f5f5, 
  ),
  senary: (
    start: #e5f0f7,
    end:   #f2f8fb, 
  ),
);

$primary-gradient-start-color: map-deep-get($gradient-palette, primary, start);
$primary-gradient-end-color: map-deep-get($gradient-palette, primary, end);
$secondary-gradient-start-color: map-deep-get($gradient-palette, secondary, start);
$secondary-gradient-end-color: map-deep-get($gradient-palette, secondary, end);
$tertiary-gradient-start-color: map-deep-get($gradient-palette, tertiary, start);
$tertiary-gradient-end-color: map-deep-get($gradient-palette, tertiary, end);
$quaternary-gradient-start-color: map-deep-get($gradient-palette, quaternary, start);
$quaternary-gradient-end-color: map-deep-get($gradient-palette, quaternary, end);
$quinary-gradient-start-color: map-deep-get($gradient-palette, quinary, start);
$quinary-gradient-end-color: map-deep-get($gradient-palette, quinary, end);
$senary-gradient-start-color: map-deep-get($gradient-palette, senary, start);
$senary-gradient-end-color: map-deep-get($gradient-palette, senary, end);

$foundation-palette: (

primary: #0070b8,

secondary: #f08a00,

tertiary: #6f7072,

quaternary: #003f6c,

quinary: #fecc00,

senary: #a6a8aa,

success: #2dcc70,

warning: #ffae00,

alert: #e20d0d,

);

$light-gray: #e6e6e6;

$medium-gray: #cacaca;

$dark-gray: #8a8a8a;

$black: #000000;

$white: #ffffff;

$body-background: $white;

$body-font-color: $black;

@include add-foundation-colors;

$tertiary-color: get-color(tertiary);

$quaternary-color: get-color(quaternary);

$quinary-color: get-color(quinary);

$senary-color: get-color(senary);

$primary-color-white-25: mix(white, $primary-color, 25%);

$primary-color-white-50: mix(white, $primary-color, 50%);

$primary-color-black-25: mix(black, $primary-color, 25%);

$primary-color-black-50: mix(black, $primary-color, 50%);

$secondary-color-white-25: mix(white, $secondary-color, 25%);

$secondary-color-white-50: mix(white, $secondary-color, 50%);

$secondary-color-black-25: mix(black, $secondary-color, 25%);

$secondary-color-black-50: mix(black, $secondary-color, 50%);

$tertiary-color-white-25: mix(white, $tertiary-color, 25%);

$tertiary-color-white-50: mix(white, $tertiary-color, 50%);

$tertiary-color-black-25: mix(black, $tertiary-color, 25%);

$tertiary-color-black-50: mix(black, $tertiary-color, 50%);

$quaternary-color-white-25: mix(white, $quaternary-color, 25%);

$quaternary-color-white-50: mix(white, $quaternary-color, 50%);

$quaternary-color-black-25: mix(black, $quaternary-color, 25%);

$quaternary-color-black-50: mix(black, $quaternary-color, 50%);

$quinary-color-white-25: mix(white, $quinary-color, 25%);

$quinary-color-white-50: mix(white, $quinary-color, 50%);

$quinary-color-black-25: mix(black, $quinary-color, 25%);

$quinary-color-black-50: mix(black, $quinary-color, 50%);

$senary-color-white-25: mix(white, $senary-color, 25%);

$senary-color-white-50: mix(white, $senary-color, 50%);

$senary-color-black-25: mix(black, $senary-color, 25%);

$senary-color-black-50: mix(black, $senary-color, 50%);

$gradient-palette: (

primary: (

start: $primary-color,

end: $quaternary-color,

secondary: (

start: $secondary-color,

end: $quinary-color,

tertiary: (

start: $tertiary-color,

end: $senary-color,

quaternary: (

start: #373738,

end: #535355,

quinary: (

start: #d2d3d4,

end: #f5f5f5,

senary: (

start: #e5f0f7,

end: #f2f8fb,

);

$primary-gradient-start-color: map-deep-get($gradient-palette, primary, start);

$primary-gradient-end-color: map-deep-get($gradient-palette, primary, end);

$secondary-gradient-start-color: map-deep-get($gradient-palette, secondary, start);

$secondary-gradient-end-color: map-deep-get($gradient-palette, secondary, end);

$tertiary-gradient-start-color: map-deep-get($gradient-palette, tertiary, start);

$tertiary-gradient-end-color: map-deep-get($gradient-palette, tertiary, end);

$quaternary-gradient-start-color: map-deep-get($gradient-palette, quaternary, start);

$quaternary-gradient-end-color: map-deep-get($gradient-palette, quaternary, end);

$quinary-gradient-start-color: map-deep-get($gradient-palette, quinary, start);

$quinary-gradient-end-color: map-deep-get($gradient-palette, quinary, end);

$senary-gradient-start-color: map-deep-get($gradient-palette, senary, start);

$senary-gradient-end-color: map-deep-get($gradient-palette, senary, end);

Articles récents

Catégories

Archives

Méta

Étiquette : couleurs

[Foundation 6] Ajouter des couleurs à la palette par défaut et créer une palette de dégradés

[SASS] Fonctions et mixins pour manipuler les couleurs

Eclaircir une couleur avec la fonction Mix de SASS

Assombrir une couleur avec la fonction Mix de SASS