Skip to content

Commit

Permalink
Don't use family vars in color settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@thisisdano
thisisdano committed Feb 19, 2019
1 parent 6e379a2 commit e9a5100
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 69 deletions.
70 changes: 35 additions & 35 deletions src/stylesheets/settings/_settings-color.scss
View file
Expand Up @@ -37,9 +37,9 @@ $theme-color-base-ink: 'gray-90' !default;
// Primary colors
$theme-color-primary-family: 'blue' !default;
$theme-color-primary-lightest: false !default;
$theme-color-primary-lighter: '#{$theme-color-primary-family}-10' !default;
$theme-color-primary-light: '#{$theme-color-primary-family}-30' !default;
$theme-color-primary: '#{$theme-color-primary-family}-60v' !default;
$theme-color-primary-lighter: 'blue-10' !default;
$theme-color-primary-light: 'blue-30' !default;
$theme-color-primary: 'blue-60v' !default;
$theme-color-primary-vivid: 'blue-warm-60v' !default;
$theme-color-primary-dark: 'blue-warm-70v' !default;
$theme-color-primary-darker: 'blue-warm-80v' !default;
Expand All @@ -49,31 +49,31 @@ $theme-color-primary-darkest: false !default;
$theme-color-secondary-family: 'red' !default;
$theme-color-secondary-lightest: false !default;
$theme-color-secondary-lighter: 'red-cool-10' !default;
$theme-color-secondary-light: '#{$theme-color-secondary-family}-30' !default;
$theme-color-secondary: '#{$theme-color-secondary-family}-50' !default;
$theme-color-secondary-light: 'red-30' !default;
$theme-color-secondary: 'red-50' !default;
$theme-color-secondary-vivid: 'red-cool-50v' !default;
$theme-color-secondary-dark: '#{$theme-color-secondary-family}-60v' !default;
$theme-color-secondary-darker: '#{$theme-color-secondary-family}-70v' !default;
$theme-color-secondary-darkest: false;
$theme-color-secondary-dark: 'red-60v' !default;
$theme-color-secondary-darker: 'red-70v' !default;
$theme-color-secondary-darkest: false !default;

// Accent warm colors
$theme-color-accent-warm-family: 'orange' !default;
$theme-color-accent-warm-lightest: false !default;
$theme-color-accent-warm-lighter: '#{$theme-color-accent-warm-family}-10' !default;
$theme-color-accent-warm-light: '#{$theme-color-accent-warm-family}-20v' !default;
$theme-color-accent-warm: '#{$theme-color-accent-warm-family}-30v' !default;
$theme-color-accent-warm-dark: '#{$theme-color-accent-warm-family}-50v' !default;
$theme-color-accent-warm-darker: '#{$theme-color-accent-warm-family}-60' !default;
$theme-color-accent-warm-lighter: 'orange-10' !default;
$theme-color-accent-warm-light: 'orange-20v' !default;
$theme-color-accent-warm: 'orange-30v' !default;
$theme-color-accent-warm-dark: 'orange-50v' !default;
$theme-color-accent-warm-darker: 'orange-60' !default;
$theme-color-accent-warm-darkest: false !default;

// Accent cool colors
$theme-color-accent-cool-family: 'blue-cool' !default;
$theme-color-accent-cool-lightest: false !default;
$theme-color-accent-cool-lighter: '#{$theme-color-accent-cool-family}-5v' !default;
$theme-color-accent-cool-light: '#{$theme-color-accent-cool-family}-20v' !default;
$theme-color-accent-cool-lighter: 'blue-cool-5v' !default;
$theme-color-accent-cool-light: 'blue-cool-20v' !default;
$theme-color-accent-cool: 'cyan-30v' !default;
$theme-color-accent-cool-dark: '#{$theme-color-accent-cool-family}-40v' !default;
$theme-color-accent-cool-darker: '#{$theme-color-accent-cool-family}-60v' !default;
$theme-color-accent-cool-dark: 'blue-cool-40v' !default;
$theme-color-accent-cool-darker: 'blue-cool-60v' !default;
$theme-color-accent-cool-darkest: false !default;

/*
Expand All @@ -84,41 +84,41 @@ State palette colors

// Error colors
$theme-color-error-family: 'red-warm' !default;
$theme-color-error-lighter: '#{$theme-color-error-family}-10' !default;
$theme-color-error-light: '#{$theme-color-error-family}-30v' !default;
$theme-color-error: '#{$theme-color-error-family}-50v' !default;
$theme-color-error-lighter: 'red-warm-10' !default;
$theme-color-error-light: 'red-warm-30v' !default;
$theme-color-error: 'red-warm-50v' !default;
$theme-color-error-dark: 'red-60v' !default;
$theme-color-error-darker: 'red-70' !default;

// Warning colors
$theme-color-warning-family: 'gold' !default;
$theme-color-warning-lighter: 'yellow-5' !default;
$theme-color-warning-light: 'yellow-10v' !default;
$theme-color-warning: '#{$theme-color-warning-family}-20v' !default;
$theme-color-warning-dark: '#{$theme-color-warning-family}-30v' !default;
$theme-color-warning-darker: '#{$theme-color-warning-family}-50v' !default;
$theme-color-warning: 'gold-20v' !default;
$theme-color-warning-dark: 'gold-30v' !default;
$theme-color-warning-darker: 'gold-50v' !default;

// Success colors
$theme-color-success-family: 'green-cool' !default;
$theme-color-success-lighter: '#{$theme-color-success-family}-5' !default;
$theme-color-success-light: '#{$theme-color-success-family}-20v' !default;
$theme-color-success: '#{$theme-color-success-family}-40v' !default;
$theme-color-success-dark: '#{$theme-color-success-family}-50' !default;
$theme-color-success-darker: '#{$theme-color-success-family}-60' !default;
$theme-color-success-lighter: 'green-cool-5' !default;
$theme-color-success-light: 'green-cool-20v' !default;
$theme-color-success: 'green-cool-40v' !default;
$theme-color-success-dark: 'green-cool-50' !default;
$theme-color-success-darker: 'green-cool-60' !default;

// Info colors
$theme-color-info-family: 'cyan' !default;
$theme-color-info-lighter: '#{$theme-color-info-family}-5' !default;
$theme-color-info-light: '#{$theme-color-info-family}-20' !default;
$theme-color-info: '#{$theme-color-info-family}-30v' !default;
$theme-color-info-dark: '#{$theme-color-info-family}-40v' !default;
$theme-color-info-lighter: 'cyan-5' !default;
$theme-color-info-light: 'cyan-20' !default;
$theme-color-info: 'cyan-30v' !default;
$theme-color-info-dark: 'cyan-40v' !default;
$theme-color-info-darker: 'blue-cool-60' !default;

// Disabled colors
$theme-color-disabled-family: 'gray' !default;
$theme-color-disabled-light: '#{$theme-color-disabled-family}-10' !default;
$theme-color-disabled: '#{$theme-color-disabled-family}-20' !default;
$theme-color-disabled-dark: '#{$theme-color-disabled-family}-30' !default;
$theme-color-disabled-light: 'gray-10' !default;
$theme-color-disabled: 'gray-20' !default;
$theme-color-disabled-dark: 'gray-30' !default;

/*
----------------------------------------
Expand Down
68 changes: 34 additions & 34 deletions src/stylesheets/theme/_uswds-theme-color.scss
View file
Expand Up @@ -37,9 +37,9 @@ $theme-color-base-ink: 'gray-90';
// Primary colors
$theme-color-primary-family: 'blue';
$theme-color-primary-lightest: false;
$theme-color-primary-lighter: '#{$theme-color-primary-family}-10';
$theme-color-primary-light: '#{$theme-color-primary-family}-30';
$theme-color-primary: '#{$theme-color-primary-family}-60v';
$theme-color-primary-lighter: 'blue-10';
$theme-color-primary-light: 'blue-30';
$theme-color-primary: 'blue-60v';
$theme-color-primary-vivid: 'blue-warm-60v';
$theme-color-primary-dark: 'blue-warm-70v';
$theme-color-primary-darker: 'blue-warm-80v';
Expand All @@ -49,31 +49,31 @@ $theme-color-primary-darkest: false;
$theme-color-secondary-family: 'red';
$theme-color-secondary-lightest: false;
$theme-color-secondary-lighter: 'red-cool-10';
$theme-color-secondary-light: '#{$theme-color-secondary-family}-30';
$theme-color-secondary: '#{$theme-color-secondary-family}-50';
$theme-color-secondary-light: 'red-30';
$theme-color-secondary: 'red-50';
$theme-color-secondary-vivid: 'red-cool-50v';
$theme-color-secondary-dark: '#{$theme-color-secondary-family}-60v';
$theme-color-secondary-darker: '#{$theme-color-secondary-family}-70v';
$theme-color-secondary-dark: 'red-60v';
$theme-color-secondary-darker: 'red-70v';
$theme-color-secondary-darkest: false;

// Accent warm colors
$theme-color-accent-warm-family: 'orange';
$theme-color-accent-warm-lightest: false;
$theme-color-accent-warm-lighter: '#{$theme-color-accent-warm-family}-10';
$theme-color-accent-warm-light: '#{$theme-color-accent-warm-family}-20v';
$theme-color-accent-warm: '#{$theme-color-accent-warm-family}-30v';
$theme-color-accent-warm-dark: '#{$theme-color-accent-warm-family}-50v';
$theme-color-accent-warm-darker: '#{$theme-color-accent-warm-family}-60';
$theme-color-accent-warm-lighter: 'orange-10';
$theme-color-accent-warm-light: 'orange-20v';
$theme-color-accent-warm: 'orange-30v';
$theme-color-accent-warm-dark: 'orange-50v';
$theme-color-accent-warm-darker: 'orange-60';
$theme-color-accent-warm-darkest: false;

// Accent cool colors
$theme-color-accent-cool-family: 'blue-cool';
$theme-color-accent-cool-lightest: false;
$theme-color-accent-cool-lighter: '#{$theme-color-accent-cool-family}-5v';
$theme-color-accent-cool-light: '#{$theme-color-accent-cool-family}-20v';
$theme-color-accent-cool-lighter: 'blue-cool-5v';
$theme-color-accent-cool-light: 'blue-cool-20v';
$theme-color-accent-cool: 'cyan-30v';
$theme-color-accent-cool-dark: '#{$theme-color-accent-cool-family}-40v';
$theme-color-accent-cool-darker: '#{$theme-color-accent-cool-family}-60v';
$theme-color-accent-cool-dark: 'blue-cool-40v';
$theme-color-accent-cool-darker: 'blue-cool-60v';
$theme-color-accent-cool-darkest: false;

/*
Expand All @@ -84,41 +84,41 @@ State palette colors

// Error colors
$theme-color-error-family: 'red-warm';
$theme-color-error-lighter: '#{$theme-color-error-family}-10';
$theme-color-error-light: '#{$theme-color-error-family}-30v';
$theme-color-error: '#{$theme-color-error-family}-50v';
$theme-color-error-lighter: 'red-warm-10';
$theme-color-error-light: 'red-warm-30v';
$theme-color-error: 'red-warm-50v';
$theme-color-error-dark: 'red-60v';
$theme-color-error-darker: 'red-70';

// Warning colors
$theme-color-warning-family: 'gold';
$theme-color-warning-lighter: 'yellow-5';
$theme-color-warning-light: 'yellow-10v';
$theme-color-warning: '#{$theme-color-warning-family}-20v';
$theme-color-warning-dark: '#{$theme-color-warning-family}-30v';
$theme-color-warning-darker: '#{$theme-color-warning-family}-50v';
$theme-color-warning: 'gold-20v';
$theme-color-warning-dark: 'gold-30v';
$theme-color-warning-darker: 'gold-50v';

// Success colors
$theme-color-success-family: 'green-cool';
$theme-color-success-lighter: '#{$theme-color-success-family}-5';
$theme-color-success-light: '#{$theme-color-success-family}-20v';
$theme-color-success: '#{$theme-color-success-family}-40v';
$theme-color-success-dark: '#{$theme-color-success-family}-50';
$theme-color-success-darker: '#{$theme-color-success-family}-60';
$theme-color-success-lighter: 'green-cool-5';
$theme-color-success-light: 'green-cool-20v';
$theme-color-success: 'green-cool-40v';
$theme-color-success-dark: 'green-cool-50';
$theme-color-success-darker: 'green-cool-60';

// Info colors
$theme-color-info-family: 'cyan';
$theme-color-info-lighter: '#{$theme-color-info-family}-5';
$theme-color-info-light: '#{$theme-color-info-family}-20';
$theme-color-info: '#{$theme-color-info-family}-30v';
$theme-color-info-dark: '#{$theme-color-info-family}-40v';
$theme-color-info-lighter: 'cyan-5';
$theme-color-info-light: 'cyan-20';
$theme-color-info: 'cyan-30v';
$theme-color-info-dark: 'cyan-40v';
$theme-color-info-darker: 'blue-cool-60';

// Disabled colors
$theme-color-disabled-family: 'gray';
$theme-color-disabled-light: '#{$theme-color-disabled-family}-10';
$theme-color-disabled: '#{$theme-color-disabled-family}-20';
$theme-color-disabled-dark: '#{$theme-color-disabled-family}-30';
$theme-color-disabled-light: 'gray-10';
$theme-color-disabled: 'gray-20';
$theme-color-disabled-dark: 'gray-30';

/*
----------------------------------------
Expand Down

0 comments on commit e9a5100

Please sign in to comment.