Updating color references to Bootstrap 4

Chicago / design-cds-bootstrap

The Chicago Design System as a Bootstrap 4 theme

https://chicago.github.io/design-cds-bootstrap/

MIT License

8 stars 2 forks source link

Updating color references to Bootstrap 4 #2

Closed jdkunesh closed 4 years ago

jdkunesh commented 4 years ago

We based colors off USWDS 2, BS 4 uses calculated colors.

We will need to update:

[ ] color swatch: like a downloadable color swatch
[ ] design.chicago.gov (or remove and don't represent all colors?)

jdkunesh commented 4 years ago

@mario-duran will update and display colors in code, @alaeder16 will update in other systems afterwards

jdkunesh commented 4 years ago

Brand colors: red & blues & grays from ogilvy.
Derived colors: red & blue from O, calculated values
drop the location names. colors will be brand primary, brand secondary as groups. Specific colors can be: flag red, flag blue, primary blue, secondary blue.
derived colors will use the name + a number. flag red 200.

jdkunesh commented 4 years ago

[x] purple, orange
[x] brand colors back in (as brand colors)

jdkunesh commented 4 years ago

@mario-duran please show the same style as @alaeder16 in the Figma file,

please also include class names in the Bootstrap version (light/dark/darkest, etc.)

@chrisjcalderon

mario-duran commented 4 years ago

Hi All, I just added all the colors from Figma into Bootstrap variables.

Example: $purple-100: #edd6f4 !default; $purple-200: #daade9 !default; $purple-300: #c885de !default; $purple-400: #bf70d9 !default; $purple-500: #b55cd3 !default; $purple-600: #ac47ce !default; $purple-700: $purple !default;

So we have all color variants exposed and available for use

jdkunesh commented 4 years ago

@alaeder16 were we adding corresponding label updates in Figma?

alaeder16 commented 4 years ago

Updated in Figma