Skip to content

Instantly share code, notes, and snippets.

@derekbtw
Last active March 5, 2019 13:38
Show Gist options
  • Save derekbtw/828873fcc4ccde9ec947644b1d5fa49b to your computer and use it in GitHub Desktop.
Save derekbtw/828873fcc4ccde9ec947644b1d5fa49b to your computer and use it in GitHub Desktop.
CodyHouse Framework default colors as SCSS variables.
$color-primary-darker: #0940ae;
$color-primary-dark: #0c52df;
$color-primary: #2a6df4;
$color-primary-light: #5a8ef6;
$color-primary-lighter: #8baff9;
$color-accent-darker: #c70a1a;
$color-accent-dark: #f31224;
$color-accent: #f54251;
$color-accent-light: #f8727e;
$color-accent-lighter: #faa3aa;
$color-black: #1c1c21;
$color-white: #ffffff;
$color-success-darker: #568830;
$color-success-dark: #6eae3d;
$color-success: #88c559;
$color-success-light: #a3d27f;
$color-success-lighter: #bedfa4;
$color-error-darker: #c70a1a;
$color-error-dark: #f31224;
$color-error: #f54251;
$color-error-light: #f8727e;
$color-error-lighter: #faa3aa;
$color-warning-darker: #d1a000;
$color-warning-dark: #ffc505;
$color-warning: #ffd138;
$color-warning-light: #ffdc6b;
$color-warning-lighter: #ffe89e;
$color-bg: #ffffff;
$color-contrast-lower: #f2f2f2;
$color-contrast-low: #d3d3d4;
$color-contrast-medium: #79797c;
$color-contrast-high: #313135;
$color-contrast-higher: #1c1c21;
:root, [data-theme="default"] {
// main
@include defineColorHSL(--color-primary-darker, 220, 90%, 36%);
@include defineColorHSL(--color-primary-dark, 220, 90%, 46%);
@include defineColorHSL(--color-primary, 220, 90%, 56%);
@include defineColorHSL(--color-primary-light, 220, 90%, 66%);
@include defineColorHSL(--color-primary-lighter, 220, 90%, 76%);
@include defineColorHSL(--color-accent-darker, 355, 90%, 41%);
@include defineColorHSL(--color-accent-dark, 355, 90%, 51%);
@include defineColorHSL(--color-accent, 355, 90%, 61%);
@include defineColorHSL(--color-accent-light, 355, 90%, 71%);
@include defineColorHSL(--color-accent-lighter, 355, 90%, 81%);
// black + white
@include defineColorHSL(--color-black, 240, 8%, 12%);
@include defineColorHSL(--color-white, 0, 0%, 100%);
// feedback
@include defineColorHSL(--color-success-darker, 94, 48%, 36%);
@include defineColorHSL(--color-success-dark, 94, 48%, 46%);
@include defineColorHSL(--color-success, 94, 48%, 56%);
@include defineColorHSL(--color-success-light, 94, 48%, 66%);
@include defineColorHSL(--color-success-lighter, 94, 48%, 76%);
@include defineColorHSL(--color-error-darker, 355, 90%, 41%);
@include defineColorHSL(--color-error-dark, 355, 90%, 51%);
@include defineColorHSL(--color-error, 355, 90%, 61%);
@include defineColorHSL(--color-error-light, 355, 90%, 71%);
@include defineColorHSL(--color-error-lighter, 355, 90%, 81%);
@include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
@include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
@include defineColorHSL(--color-warning, 46, 100%, 61%);
@include defineColorHSL(--color-warning-light, 46, 100%, 71%);
@include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);
// color contrasts
@include defineColorHSL(--color-bg, 0, 0%, 100%);
@include defineColorHSL(--color-contrast-lower, 0, 0%, 95%);
@include defineColorHSL(--color-contrast-low, 240, 1%, 83%);
@include defineColorHSL(--color-contrast-medium, 240, 1%, 48%);
@include defineColorHSL(--color-contrast-high, 240, 4%, 20%);
@include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
}
[data-theme] {
background-color: var(--color-bg);
color: var(--color-contrast-high);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment