From 12acddb9246c9e0dfb021b31d799684f4fa8a306 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Wed, 20 Dec 2023 08:18:44 +0100 Subject: [PATCH] switching to static colors again and changing design of icon to diff to icon buttons --- src/components/alert/Alert.style.scss | 12 ++--- src/components/button/Button.style.scss | 19 +++----- src/components/card/Card.stories.tsx | 4 +- src/components/dropdown/Dropdown.style.scss | 4 +- src/components/input/Input.style.scss | 40 ++-------------- src/styles/_helpers.scss | 53 ++++++++++++++++----- 6 files changed, 61 insertions(+), 71 deletions(-) diff --git a/src/components/alert/Alert.style.scss b/src/components/alert/Alert.style.scss index 230df3fb..68dae0af 100644 --- a/src/components/alert/Alert.style.scss +++ b/src/components/alert/Alert.style.scss @@ -7,7 +7,6 @@ margin-bottom: 1rem; min-height: 1.5rem; - &__heading { font-weight: 500; } @@ -30,17 +29,18 @@ } &__icon { - @include box(false); display: flex; justify-content: center; align-items: center; text-align: center; - padding: .25rem; + color: color($white); + width: 1.25rem; + height: 1.25rem; margin-right: .5rem; > * { - width: 1rem; - height: 1rem; + width: 1.25rem; + height: 1.25rem; } } @@ -67,7 +67,7 @@ @include box(false, $color); .alert__icon { - @include box(false, $color); + color: color($color); } .alert__content { diff --git a/src/components/button/Button.style.scss b/src/components/button/Button.style.scss index 411bd9e3..d3bb8aec 100644 --- a/src/components/button/Button.style.scss +++ b/src/components/button/Button.style.scss @@ -10,10 +10,7 @@ margin-bottom: 1rem; width: fit-content; - &--disabled { - opacity: 50%; - pointer-events: none; - } + @include disabled; &__icon + &__content { margin-left: .5rem; @@ -22,19 +19,17 @@ } &__icon { - @include box(false); - display: inline-flex; justify-content: center; align-items: center; - width: 1rem; - height: 1rem; - padding: .25rem; + width: 1.25rem; + height: 1.25rem; + color: color($white); cursor: pointer; > * { - width: 1rem; - height: 1rem; + width: 1.25rem; + height: 1.25rem; } } } @@ -44,7 +39,7 @@ @include box(true, $color); .button__icon { - @include box(false, $color); + color: color($color); } } diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx index 455281fc..d016053a 100644 --- a/src/components/card/Card.stories.tsx +++ b/src/components/card/Card.stories.tsx @@ -39,10 +39,10 @@ export const Test = () => { - - diff --git a/src/components/dropdown/Dropdown.style.scss b/src/components/dropdown/Dropdown.style.scss index 3ff03d68..8c2ae0f6 100644 --- a/src/components/dropdown/Dropdown.style.scss +++ b/src/components/dropdown/Dropdown.style.scss @@ -60,9 +60,7 @@ border-top: 1px solid borderColor(); border-bottom: 1px solid borderColor(); - @include hoverAndActiveContent { - background: rgba($color, .1); - } + @include background($color, true); &:first-of-type { border-top: none; diff --git a/src/components/input/Input.style.scss b/src/components/input/Input.style.scss index 63c0592f..1ed8d7ff 100644 --- a/src/components/input/Input.style.scss +++ b/src/components/input/Input.style.scss @@ -7,10 +7,7 @@ margin-bottom: 0; } - &--disabled { - pointer-events: none; - opacity: 50%; - } + @include disabled; &__control { display: flex; @@ -48,21 +45,18 @@ } &__icon { - @include box(false); - display: flex; - width: 1rem; - height: auto; + width: 1.25rem; + height: 1.25rem; justify-content: center; align-items: center; aspect-ratio: 50/50; - padding: .25rem; margin-left: .5rem; pointer-events: none; > * { - width: 1rem; - height: 1rem; + width: 1.25rem; + height: 1.25rem; } } @@ -110,18 +104,6 @@ &--not-valid { - .input__control { - border-color: borderColor(false); - - @include hoverAndActiveContent { - border-color: borderColor(true); - } - - @include activeContent { - outline-color: $error; - } - } - .input__message { display: block; background: rgba($error, .1); @@ -131,18 +113,6 @@ &--valid { - .input__control { - border-color: borderColor(false); - - @include hoverAndActiveContent { - border-color: borderColor(true); - } - - @include activeContent { - outline-color: $success; - } - } - .input__message { display: block; background: rgba($success, .1); diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss index 4875aed3..8b7d52bd 100644 --- a/src/styles/_helpers.scss +++ b/src/styles/_helpers.scss @@ -3,24 +3,17 @@ @mixin box($active: true, $color: $secondary) { - background: rgba($color, 10%); + background: mix($bodyBg, $color, 90%); + @include border($active); border-radius: $borderRadius; color: rgba($white, .5); font-family: Ubuntu, sans-serif; font-size: $secondaryFontSize; - -webkit-backdrop-filter: blur($borderRadius * 2); - backdrop-filter: blur($borderRadius * 2); - border: 1px solid borderColor(); position: relative; @if ($active == true) { @include hoverAndActiveContent { - border: 1px solid borderColor(true); - } - - @include activeContent { - outline: 1px solid $info; - outline-offset: 2px; + background: mix($bodyBg, if($color == $primary, $white, $color), if($color == $primary, 95%, 85%)); } } } @@ -32,11 +25,45 @@ } @mixin activeContent() { - &--active { + &:active, &--active { @content } } -@function borderColor($hover: false) { - @return rgba($white, if($hover, 0.2, 0.1)) +@function borderColor($interacted: false) { + @return rgba($white, if($interacted == true, .2, .1)) +} + +@mixin border($interact: true) { + + border: 1px solid borderColor(); + + @if ($interact == true) { + &:active, &--active { + border: 1px solid borderColor(true); + } + } +} + +@function color($color, $opacity: 0.5) { + @return rgba(if($color == $primary, $white, $color), $opacity) +} + +@mixin background($color: $primary, $interact: true) { + background: mix($bodyBg, $color, 90%); + + @if ($interact == true) { + &:hover, &:active, &--active { + background: mix($bodyBg, if($color == $primary, $white, $color), if($color == $primary, 95%, 85%)); + } + } +} + +@mixin disabled { + + &--disabled { + opacity: 50%; + pointer-events: none; + } + }