diff --git a/src/_palette.scss b/src/_palette.scss index ad0af1b..8883877 100644 --- a/src/_palette.scss +++ b/src/_palette.scss @@ -172,6 +172,17 @@ $primary800: $sea800; $primary900: $sea900; $primary: $sea; +$accent50: $purple50; +$accent100: $purple100; +$accent200: $purple200; +$accent300: $purple300; +$accent400: $purple400; +$accent500: $purple500; +$accent600: $purple600; +$accent700: $purple700; +$accent800: $purple800; +$accent900: $purple900; +$accent: $purple; $success: $sea; $danger: $red; diff --git a/src/buttons.scss b/src/buttons.scss index 675dd54..3a39a3d 100644 --- a/src/buttons.scss +++ b/src/buttons.scss @@ -1,4 +1,5 @@ // FIXME: All secondary buttons should maybe use a secondary colour! +// FIXME: Actually, some should maybe just be black... @use "palette"; @@ -31,19 +32,18 @@ background-color: palette.$primary; } - // TODO: This looks really bad. :) &.secondary { - @if lightness(palette.$primary50) < 50 { + @if lightness(palette.$accent) < 50 { color: palette.$grey50 } @else { color: palette.$grey900 } - background-color: palette.$primary200; - border-color: palette.$primary200; - box-shadow: 0 .3rem 0 0 palette.$primary400; + background-color: palette.$accent; + border-color: palette.$accent; + box-shadow: 0 .3rem 0 0 palette.$accent600; &:hover { - box-shadow: 0 0 0 0 palette.$primary; + box-shadow: 0 0 0 0 palette.$accent600; } } @@ -71,18 +71,18 @@ background-color: palette.$primary; } - // TODO: This looks really bad. :) &.secondary { - @if lightness(palette.$primary200) < 50 { + @if lightness(palette.$accent) < 50 { color: palette.$grey50 } @else { color: palette.$grey900 } - background-color: palette.$primary200; - border-color: palette.$primary200; + background-color: palette.$accent; + border-color: palette.$accent; } &:hover { + color: palette.$grey900; background-color: transparent; } @@ -109,18 +109,17 @@ } } - // TODO: This looks really bad. :) &.secondary { - @if lightness(palette.$primary200) < 50 { + @if lightness(palette.$accent) < 50 { color: palette.$grey50 } @else { color: palette.$grey900 } background-color: transparent; - border-color: palette.$primary200; + border-color: palette.$accent; &:hover { - background-color: palette.$primary200; + background-color: palette.$accent; } }