Skip to content

Commit

Permalink
Update colors documentation, reduce saturation in dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Studio384
Studio384 committed Aug 16, 2022
1 parent 21a4c52 commit a492d80
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 45 deletions.
19 changes: 10 additions & 9 deletions hugo/content/atoms/colors.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,16 +141,17 @@ A color map is made out of a color palette from `50` to `900`, with `200a`, `400
{{<example show_preview="false" lang="scss">}}
@each $name, $color in $colors {
.#{$name} {
--color-50: #{ light-dark(tint($color, 96%), shade($color, 80%)) };
--color-100: #{ light-dark(tint($color, 92%), shade($color, 74%)) };
--color-200: #{ light-dark(tint($color, 87%), shade($color, 67%)) };
--color-300: #{ light-dark(tint($color, 80%), shade($color, 63%)) };
--color-400: #{ light-dark(tint($color, 70%), shade($color, 52%)) };
--color-500: #{ light-dark(tint($color, 28%), shade($color, 26%)) };
--color-600: #{ $color };
--color-700: #{ light-dark(shade($color, 7%), tint($color, 7%)) };
--color-800: #{ light-dark(shade($color, 22%), tint($color, 20%)) };
--color-50: #{ light-dark(tint($color, 96%), shade($color, 74%)) };
--color-100: #{ light-dark(tint($color, 92%), shade($color, 67%)) };
--color-200: #{ light-dark(tint($color, 87%), shade($color, 63%)) };
--color-300: #{ light-dark(tint($color, 80%), shade($color, 52%)) };
--color-400: #{ light-dark(tint($color, 70%), shade($color, 26%)) };
--color-500: #{ light-dark(tint($color, 28%), $color) };
--color-600: #{ light-dark($color, tint($color, 20%)) };
--color-700: #{ light-dark(shade($color, 7%), tint($color, 43%)) };
--color-800: #{ light-dark(shade($color, 22%), tint($color, 65%)) };
--color-900: #{ light-dark(shade($color, 70%), tint($color, 87%)) };
--color-50a: #{ rgba($color, .05) };
--color-200a: #{ rgba($color, .1) };
--color-400a: #{ rgba($color, .3) };
--color-text: #{ color-contrast($color) };
Expand Down
73 changes: 37 additions & 36 deletions scss/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,31 +61,31 @@ body {

// Colors
@each $name, $color in $colors {
--#{$name}-50: #{ light-dark(tint($color, 96%), shade($color, 80%)) };
--#{$name}-100: #{ light-dark(tint($color, 92%), shade($color, 74%)) };
--#{$name}-200: #{ light-dark(tint($color, 87%), shade($color, 67%)) };
--#{$name}-300: #{ light-dark(tint($color, 80%), shade($color, 63%)) };
--#{$name}-400: #{ light-dark(tint($color, 70%), shade($color, 52%)) };
--#{$name}-500: #{ light-dark(tint($color, 28%), shade($color, 26%)) };
--#{$name}-600: #{ $color };
--#{$name}-700: #{ light-dark(shade($color, 7%), tint($color, 7%)) };
--#{$name}-800: #{ light-dark(shade($color, 22%), tint($color, 20%)) };
--#{$name}-50: #{ light-dark(tint($color, 96%), shade($color, 74%)) };
--#{$name}-100: #{ light-dark(tint($color, 92%), shade($color, 67%)) };
--#{$name}-200: #{ light-dark(tint($color, 87%), shade($color, 63%)) };
--#{$name}-300: #{ light-dark(tint($color, 80%), shade($color, 52%)) };
--#{$name}-400: #{ light-dark(tint($color, 70%), shade($color, 26%)) };
--#{$name}-500: #{ light-dark(tint($color, 28%), $color) };
--#{$name}-600: #{ light-dark($color, tint($color, 20%)) };
--#{$name}-700: #{ light-dark(shade($color, 7%), tint($color, 43%)) };
--#{$name}-800: #{ light-dark(shade($color, 22%), tint($color, 65%)) };
--#{$name}-900: #{ light-dark(shade($color, 70%), tint($color, 87%)) };
--#{$name}-50a: #{ rgba($color, .05) };
--#{$name}-200a: #{ rgba($color, .15) };
--#{$name}-400a: #{ rgba($color, .3) };
--#{$name}-text: #{ color-contrast($color) };
}

--accent-50: #{ light-dark(tint($accent, 96%), shade($accent, 80%)) };
--accent-100: #{ light-dark(tint($accent, 92%), shade($accent, 74%)) };
--accent-200: #{ light-dark(tint($accent, 87%), shade($accent, 67%)) };
--accent-300: #{ light-dark(tint($accent, 80%), shade($accent, 63%)) };
--accent-400: #{ light-dark(tint($accent, 70%), shade($accent, 52%)) };
--accent-500: #{ light-dark(tint($accent, 28%), shade($accent, 26%)) };
--accent-600: #{ $accent };
--accent-700: #{ light-dark(shade($accent, 7%), tint($accent, 7%)) };
--accent-800: #{ light-dark(shade($accent, 22%), tint($accent, 20%)) };
--accent-50: #{ light-dark(tint($accent, 96%), shade($accent, 74%)) };
--accent-100: #{ light-dark(tint($accent, 92%), shade($accent, 67%)) };
--accent-200: #{ light-dark(tint($accent, 87%), shade($accent, 63%)) };
--accent-300: #{ light-dark(tint($accent, 80%), shade($accent, 52%)) };
--accent-400: #{ light-dark(tint($accent, 70%), shade($accent, 26%)) };
--accent-500: #{ light-dark(tint($accent, 28%), $accent) };
--accent-600: #{ light-dark($accent, tint($accent, 20%)) };
--accent-700: #{ light-dark(shade($accent, 7%), tint($accent, 43%)) };
--accent-800: #{ light-dark(shade($accent, 22%), tint($accent, 65%)) };
--accent-900: #{ light-dark(shade($accent, 70%), tint($accent, 87%)) };
--accent-50a: #{ rgba($accent, .05) };
--accent-200a: #{ rgba($accent, .15) };
Expand All @@ -106,15 +106,15 @@ body {

@each $name, $color in $colors {
.#{$name} {
--color-50: #{ light-dark(tint($color, 96%), shade($color, 80%)) };
--color-100: #{ light-dark(tint($color, 92%), shade($color, 74%)) };
--color-200: #{ light-dark(tint($color, 87%), shade($color, 67%)) };
--color-300: #{ light-dark(tint($color, 80%), shade($color, 63%)) };
--color-400: #{ light-dark(tint($color, 70%), shade($color, 52%)) };
--color-500: #{ light-dark(tint($color, 28%), shade($color, 26%)) };
--color-600: #{ $color };
--color-700: #{ light-dark(shade($color, 7%), tint($color, 7%)) };
--color-800: #{ light-dark(shade($color, 22%), tint($color, 20%)) };
--color-50: #{ light-dark(tint($color, 96%), shade($color, 74%)) };
--color-100: #{ light-dark(tint($color, 92%), shade($color, 67%)) };
--color-200: #{ light-dark(tint($color, 87%), shade($color, 63%)) };
--color-300: #{ light-dark(tint($color, 80%), shade($color, 52%)) };
--color-400: #{ light-dark(tint($color, 70%), shade($color, 26%)) };
--color-500: #{ light-dark(tint($color, 28%), $color) };
--color-600: #{ light-dark($color, tint($color, 20%)) };
--color-700: #{ light-dark(shade($color, 7%), tint($color, 43%)) };
--color-800: #{ light-dark(shade($color, 22%), tint($color, 65%)) };
--color-900: #{ light-dark(shade($color, 70%), tint($color, 87%)) };
--color-50a: #{ rgba($color, .05) };
--color-200a: #{ rgba($color, .15) };
Expand All @@ -124,16 +124,17 @@ body {
}

.accent {
--color-50: #{ light-dark(tint($accent, 96%), shade($accent, 80%)) };
--color-100: #{ light-dark(tint($accent, 92%), shade($accent, 74%)) };
--color-200: #{ light-dark(tint($accent, 87%), shade($accent, 67%)) };
--color-300: #{ light-dark(tint($accent, 80%), shade($accent, 63%)) };
--color-400: #{ light-dark(tint($accent, 70%), shade($accent, 52%)) };
--color-500: #{ light-dark(tint($accent, 28%), shade($accent, 26%)) };
--color-600: #{ $accent };
--color-700: #{ light-dark(shade($accent, 7%), tint($accent, 7%)) };
--color-800: #{ light-dark(shade($accent, 22%), tint($accent, 20%)) };
--color-50: #{ light-dark(tint($accent, 96%), shade($accent, 74%)) };
--color-100: #{ light-dark(tint($accent, 92%), shade($accent, 67%)) };
--color-200: #{ light-dark(tint($accent, 87%), shade($accent, 63%)) };
--color-300: #{ light-dark(tint($accent, 80%), shade($accent, 52%)) };
--color-400: #{ light-dark(tint($accent, 70%), shade($accent, 26%)) };
--color-500: #{ light-dark(tint($accent, 28%), $accent) };
--color-600: #{ light-dark($accent, tint($accent, 20%)) };
--color-700: #{ light-dark(shade($accent, 7%), tint($accent, 43%)) };
--color-800: #{ light-dark(shade($accent, 22%), tint($accent, 65%)) };
--color-900: #{ light-dark(shade($accent, 70%), tint($accent, 87%)) };
--color-50a: #{ rgba($accent, .05) };
--color-200a: #{ rgba($accent, .15) };
--color-400a: #{ rgba($accent, .3) };
--color-text: #{ color-contrast($accent) };
Expand Down

0 comments on commit a492d80

Please sign in to comment.