diff --git a/components/FilterModal/index.scss b/components/FilterModal/index.scss index d5285968..13218de1 100644 --- a/components/FilterModal/index.scss +++ b/components/FilterModal/index.scss @@ -1,3 +1,10 @@ -.Dialog .Filter.DialogContent { - overflow: hidden; +.Dialog { + .Filter.DialogContent { + overflow: hidden; + } + + .DialogFooter .Buttons .Button.Blended { + padding-left: 0; + padding-right: 0; + } } diff --git a/components/Slider/index.scss b/components/Slider/index.scss index 392fded7..0a3a64d3 100644 --- a/components/Slider/index.scss +++ b/components/Slider/index.scss @@ -27,12 +27,18 @@ display: block; width: 20px; height: 20px; - background-color: white; - box-shadow: 0 2px 10px var(--button-bg); + background-color: var(--slider-thumb-bg); + box-shadow: 0 2px 10px var(--slider-thumb-shadow); border-radius: 10px; &:hover { - background-color: darken(white, 10%); + background-color: var(--slider-thumb-bg-hover); + box-shadow: 0 2px 10px var(--slider-thumb-shadow-hover); + cursor: grab; + } + + &:active { + cursor: grabbing; } &:focus { diff --git a/components/Switch/index.scss b/components/Switch/index.scss index 677f6af2..4548f64c 100644 --- a/components/Switch/index.scss +++ b/components/Switch/index.scss @@ -9,8 +9,10 @@ width: 58px; height: $height; - &:focus { - box-shadow: 0 0 0 2px $grey-15; + &:focus, + &:focus-visible { + box-shadow: 0 0 0 2px var(--accent-blue-focus); + outline: none; } &[data-state='checked'] { diff --git a/components/TableField/index.scss b/components/TableField/index.scss index b837ed9f..ede6eed9 100644 --- a/components/TableField/index.scss +++ b/components/TableField/index.scss @@ -4,6 +4,7 @@ gap: $unit-2x; grid-template-columns: 1fr auto; justify-content: space-between; + padding: $unit-half 0; width: 100%; @include breakpoint(phone) { @@ -12,6 +13,10 @@ flex-direction: column; } + &:hover .Left .Info h3 { + color: var(--accent-blue); + } + .Left { display: flex; flex-direction: row; diff --git a/styles/themes.scss b/styles/themes.scss index e31e9761..c70256f6 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -21,6 +21,8 @@ --separator-bg: #{$separator--bg--light}; --accent-blue: #{$accent--blue--light}; + --accent-blue-focus: #{$accent--blue--light--focus}; + --accent-yellow: #{$accent--yellow--light}; --selected-item-bg: #{$selected--item--bg--light}; @@ -64,6 +66,12 @@ --select-separator: #{$select--separator--light}; --option-bg-hover: #{$option--bg--light--hover}; + // Light - Sliders + --slider-thumb-bg: #{$slider--thumb--bg--light}; + --slider-thumb-bg-hover: #{$slider--thumb--bg--light--hover}; + --slider-thumb-shadow: #{$slider--thumb--shadow--light}; + --slider-thumb-shadow-hover: #{$slider--thumb--shadow--light--hover}; + // Light - About --link-item-bg: #{$link--item--bg--light}; --link-item-image-color: #{$link--item--bg--image--light}; @@ -163,6 +171,8 @@ --separator-bg: #{$separator--bg--dark}; --accent-blue: #{$accent--blue--dark}; + --accent-blue-focus: #{$accent--blue--dark--focus}; + --accent-yellow: #{$accent--yellow--dark}; --selected-item-bg: #{$selected--item--bg--dark}; @@ -207,6 +217,12 @@ --select-separator: #{$select--separator--dark}; --option-bg-hover: #{$option--bg--dark--hover}; + // Dark - Sliders + --slider-thumb-bg: #{$slider--thumb--bg--dark}; + --slider-thumb-bg-hover: #{$slider--thumb--bg--dark--hover}; + --slider-thumb-shadow: #{$slider--thumb--shadow--dark}; + --slider-thumb-shadow-hover: #{$slider--thumb--shadow--dark--hover}; + // Dark - About --link-item-bg: #{$link--item--bg--dark}; --link-item-image-color: #{$link--item--bg--image--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index 48446012..4bb5a75c 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -80,7 +80,9 @@ $yellow: #c89d39; $error: #d13a3a; $accent--blue--light: #275dc5; +$accent--blue--light--focus: #0c398d; $accent--blue--dark: #6195f4; +$accent--blue--dark--focus: #275dc5; $accent--yellow--light: #c89d39; $accent--yellow--dark: #f9cc64; @@ -224,6 +226,17 @@ $grid--rep--hover--dark: $grey-10; $grid--border--color--light: $grey-80; $grid--border--color--dark: $grey-40; +// Color Definitions: Slider +$slider--thumb--bg--light: $grey-100; +$slider--thumb--bg--dark: $grey-100; +$slider--thumb--bg--light--hover: $grey-95; +$slider--thumb--bg--dark--hover: $grey-95; +$slider--thumb--shadow--light: $grey-70; +$slider--thumb--shadow--dark: $grey-05; +$slider--thumb--shadow--light--hover: $grey-50; +$slider--thumb--shadow--dark--hover: $grey-00; + +// Color Definitions: Switch $switch--nub--bg--light: $grey-80; $switch--nub--bg--dark: $grey-30;