Menu icon Foundation
In _settings.scss, why are some colors in a map and some declared as variables?

Here is the relevant code:

$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;

 

Why is the primary color, etc. in a map while light-gray, etc. is declared as a variable? I want to add more colors but I can't decide if I should add them to the map or declare them separately. I don't want to have to remember when to use get-color(teal) vs. $teal. I'd rather all colors be declared the same way. Is there a reason for the current setup?

Thanks in advance!

SassmapvariablecolorPalette

Here is the relevant code:

$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;

 

Why is the primary color, etc. in a map while light-gray, etc. is declared as a variable? I want to add more colors but I can't decide if I should add them to the map or declare them separately. I don't want to have to remember when to use get-color(teal) vs. $teal. I'd rather all colors be declared the same way. Is there a reason for the current setup?

Thanks in advance!

Rafi Benkual over 1 year ago

The palette is used in the base components to create color classes like .primary. secondary. alert etc.

The other color variables do not have classes assigned.

 

Andrew K over 1 year ago

Is there any reason one of the following methods wasn't used instead (for simplicity)?

Method 1

$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
  light-gray: #e6e6e6,
  medium-gray: #cacaca,
  dark-gray: #8a8a8a,
  black: #0a0a0a,
  white: #fefefe,
);

Method 2

$primary: #1779ba;
$secondary: #767676;
$success: #3adb76;
$warning: #ffae00;
$alert: #cc4b37;
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;

Thanks!

Rafi Benkual over 1 year ago

You can certainly do method 1. The reason there is a map is that certain components look to these maps to generate classes. The more items you add to the map the more classes it produces making your CSS files larger.

Option 2 is not as good because using a map allows you do affect foundation components with colors. Example,

 

add a highlight color to the pallete

$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  highlight: #345678,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);

now you can access the class

<button class="button highlight">Click</button>