Merge pull request #330 from blackcandy-org/ui-issue

Expand clickable area on icon button

app/assets/stylesheets/components/_button.scss

@@ -6,15 +6,16 @@
   border-radius: border-radius("medium");
   border: none;
   padding: spacing("tiny") spacing("narrow");
-  color: var(--btn-color);
   cursor: pointer;
   font-size: font-size("medium");
 }
 
 .c-button--primary {
+  color: var(--btn-color);
   background: var(--btn-primary-bg-color);
 
   &:hover {
+    background: var(--btn-primary-hover-bg-color);
     color: var(--btn-color);
   }
 }
@@ -24,6 +25,7 @@
   color: var(--btn-secondary-color);
 
   &:hover {
+    background: var(--btn-secondary-hover-bg-color);
     color: var(--btn-secondary-color);
   }
 }
@@ -49,6 +51,21 @@
   color: var(--btn-outline-color);
   border: 1px solid var(--btn-outline-border-color);
   background: var(--btn-outline-bg-color);
+
+    &:hover {
+      background: var(--btn-outline-hover-bg-color);
+    }
+}
+
+.c-button--icon {
+  display: inline-flex;
+  padding: spacing("tiny");
+  border-radius: border-radius("medium");
+  color: currentcolor;
+
+  &:hover {
+    background: var(--btn-icon-hover-bg-color);
+  }
 }
 
 .c-button--full-width {
@@ -57,8 +74,4 @@
 
 .c-button[disabled] {
   opacity: 0.6;
-}
-
-.c-button:hover {
-  filter: brightness(0.9);
-}
+}

app/assets/stylesheets/components/_dropdown.scss

@@ -7,7 +7,6 @@
 }
 
 .c-dropdown > summary {
-  display: inline-block;
   cursor: pointer;
   list-style: none;
 

app/assets/stylesheets/components/_table.scss

@@ -36,6 +36,8 @@
 .c-table td,
 .c-table [role="columnheader"],
 .c-table [role="cell"] {
+  display: inline-flex;
+  align-items: center;
   padding: spacing(narrow);
   text-align: left;
   color: var(--table-color);

app/assets/stylesheets/settings/_colors.scss

@@ -0,0 +1,18 @@
+$purple-dark: rgb(54, 30, 64);
+$purple: rgb(119, 66, 141);
+$purple-light: rgb(161, 90, 191);
+
+$white: rgb(255, 255, 251);
+$grey-100: rgb(237, 237, 237);
+$grey-200: rgb(217, 217, 217);
+$grey-300: rgb(191, 191, 191);
+$grey-400: rgb(166, 166, 166);
+$grey-500: rgb(140, 140, 140);
+$grey-600: rgb(89, 89, 89);
+$grey-700: rgb(59, 59, 59);
+$grey-800: rgb(33, 33, 33);
+$grey-900: rgb(18, 18, 18);
+$black: rgb(0, 0, 0);
+
+$red: rgb(166, 22, 55);
+$green: rgb(35, 166, 80);

app/assets/stylesheets/settings/_dark_theme.scss

@@ -0,0 +1,121 @@
+@use "sass:color";
+@use "colors" as *;
+
+@mixin dark-theme {
+  $primary-color: $purple-light;
+  $btn-primary-bg-color: $purple;
+  $btn-secondary-bg-color: color.change($btn-primary-bg-color, $alpha: 0.25);
+  $btn-outline-bg-color: $grey-700;
+  $loader-bg-color: $primary-color;
+  $player-bg-color: $black;
+  $badge-color: $primary-color;
+
+  --link-active-color: #{$primary-color};
+  --gradient-bg-color: linear-gradient(#{$black}, #{color.change($black, $alpha: 0.75)}), linear-gradient(#{$primary-color}, #{$primary-color});
+  --primary-bg-color: #{$grey-800};
+
+  /* Body */
+  --body-bg-color: #{$grey-800};
+
+  /* Text */
+  --text-primary-color: #{$white};
+  --text-secondary-color: #{$grey-300};
+  --text-success-color: #{$green};
+
+  /* Sidebar */
+  --sidebar-bg-color: #{$grey-900};
+
+  /* Progress bar */
+  --progress-bar-bg-color: #{$primary-color};
+
+  /* Button */
+  --btn-color: #{$white};
+  --btn-primary-bg-color: #{$btn-primary-bg-color};
+  --btn-primary-hover-bg-color: #{color.adjust($btn-primary-bg-color, $lightness: 8%)};
+  --btn-secondary-bg-color: #{$btn-secondary-bg-color};
+  --btn-secondary-hover-bg-color: #{color.adjust($btn-secondary-bg-color, $lightness: 8%)};
+  --btn-secondary-color: #{$primary-color};
+  --btn-outline-color: #{$white};
+  --btn-outline-border-color: #{$grey-800};
+  --btn-outline-bg-color: #{$btn-outline-bg-color};
+  --btn-outline-hover-bg-color: #{color.adjust($btn-outline-bg-color, $lightness: 8%)};
+  --btn-icon-hover-bg-color:  #{color.change($grey-600, $alpha: 0.5)};
+
+  /* Flash message */
+  --flash-color: #{$white};
+  --flash-success-bg-color: #{$green};
+  --flash-error-bg-color: #{$red};
+
+  /* Tab */
+  --tab-color: #{$white};
+  --tab-active-color: #{$primary-color};
+
+  /* List */
+  --list-border-color: #{$grey-800};
+  --list-active-color: #{$primary-color};
+  --list-grouped-bg-color: #{$grey-900};
+
+  /* Table */
+  --table-border-color: #{$grey-900};
+  --table-active-color: #{$primary-color};
+  --table-color: #{$grey-300};
+
+  /* Input */
+  --input-bg-color: #{$grey-700};
+  --input-color: #{$white};
+  --input-icon-color: #{$grey-900};
+
+  /* Loader */
+  --loader-bg-color: #{$loader-bg-color};
+  --loader-secondary-bg-color: #{color.change($loader-bg-color, $alpha: 0.3)};
+
+  /* Dropdown */
+  --dropdown-bg-color: #{$grey-700};
+  --dropdown-active-color: #{$grey-500};
+  --dropdown-color: #{$white};
+  --dropdown-shadow-color: #{$black};
+
+  /* Dialog */
+  --dialog-bg-color: #{$grey-900};
+  --dialog-header-bg-color: #{$grey-500};
+  --dialog-header-color: #{$grey-900};
+
+  ::backdrop {
+    --dialog-backdrop-color: #{color.change($grey-800, $alpha: 0.9)};
+  }
+
+  /* Overlay */
+  --overlay-blur-bg-color: #{color.change($grey-800, $alpha: 0.9)};
+
+  /* Hr */
+  --hr-color: #{$grey-900};
+
+  /* Action bar */
+  --action-bar-bg-color: #{$grey-800};
+
+  /* Nav */
+  --nav-shadow: 0 1px 0 #{color.change($black, $alpha: 0.12)}, 0 1px 3px #{color.change($black, $alpha: 0.15)};
+  --nav-primary-bg-color: #{color.change($grey-800, $alpha: 0.9)};
+  --nav-backdrop-bg-color: #{color.change($grey-800, $alpha: 0.88)};
+
+  /* Player */
+  --player-bg-color: #{$player-bg-color};
+  --player-header-bg-color: #{color.change($player-bg-color, $alpha: 0.65)};
+  --player-progress-bg-color: #{$player-bg-color};
+  --player-progress-hover-bg-color: #{$grey-800};
+  --player-progress-color: #{$primary-color};
+  --player-control-color: #{$grey-400};
+  --player-control-main-color: #{$white};
+
+  /* Badge */
+  --badge-bg-color: #{color.change($badge-color, $alpha: 0.2)};
+  --badge-color: #{$badge-color};
+
+  /* Card */
+  --card-border-color: #{$grey-700};
+  --card-bg-color: #{$grey-900};
+
+  /* Icon */
+  --icon-active-color: #{$primary-color};
+  --icon-emphasis-color: #{$red};
+}

app/assets/stylesheets/settings/_light_theme.scss

@@ -0,0 +1,121 @@
+@use "sass:color";
+@use "colors" as *;
+
+@mixin light-theme {
+  $primary-color: $purple;
+  $btn-primary-bg-color: $primary-color;
+  $btn-secondary-bg-color: color.change($btn-primary-bg-color, $alpha: 0.25);
+  $btn-outline-bg-color: $grey-100;
+  $loader-bg-color: $primary-color;
+  $player-bg-color: $grey-200;
+  $badge-color: $primary-color;
+
+  --link-active-color: #{$primary-color};
+  --gradient-bg-color: linear-gradient(#{color.change($white, $alpha: 0.85)}, #{color.change($white, $alpha: 0.65)}), linear-gradient(#{$primary-color}, #{$primary-color});
+  --primary-bg-color: #{$white};
+
+  /* Body */
+  --body-bg-color: #{$white};
+
+  /* Text */
+  --text-primary-color: #{$grey-900};
+  --text-secondary-color: #{$grey-600};
+  --text-success-color: #{$green};
+
+  /* Sidebar */
+  --sidebar-bg-color: #{$grey-100};
+
+  /* Progress bar */
+  --progress-bar-bg-color: #{$primary-color};
+
+  /* Button */
+  --btn-color: #{$white};
+  --btn-primary-bg-color: #{$btn-primary-bg-color};
+  --btn-primary-hover-bg-color: #{color.adjust($btn-primary-bg-color, $lightness: -8%)};
+  --btn-secondary-bg-color: #{$btn-secondary-bg-color};
+  --btn-secondary-hover-bg-color: #{color.adjust($btn-secondary-bg-color, $lightness: -8%)};
+  --btn-secondary-color: #{$purple-light};
+  --btn-outline-color: #{$grey-900};
+  --btn-outline-border-color: #{$grey-300};
+  --btn-outline-bg-color: #{$btn-outline-bg-color};
+  --btn-outline-hover-bg-color: #{color.adjust($btn-outline-bg-color, $lightness: -8%)};
+  --btn-icon-hover-bg-color:  #{color.change($grey-300, $alpha: 0.3)};
+
+  /* Flash message */
+  --flash-color: #{$white};
+  --flash-success-bg-color: #{$green};
+  --flash-error-bg-color: #{$red};
+
+  /* Tab */
+  --tab-color: #{$grey-900};
+  --tab-active-color: #{$primary-color};
+
+  /* List */
+  --list-border-color: #{$grey-200};
+  --list-active-color: #{$primary-color};
+  --list-grouped-bg-color: #{$grey-100};
+
+  /* Table */
+  --table-border-color: #{$grey-200};
+  --table-active-color: #{$primary-color};
+  --table-color: #{$grey-600};
+
+  /* Input */
+  --input-bg-color: #{$grey-200};
+  --input-color: #{$grey-900};
+  --input-icon-color: #{$grey-500};
+
+  /* Loader */
+  --loader-bg-color: #{$loader-bg-color};
+  --loader-secondary-bg-color: #{color.change($loader-bg-color, $alpha: 0.3)};
+
+  /* Dropdown */
+  --dropdown-bg-color: #{$white};
+  --dropdown-active-color: #{$grey-300};
+  --dropdown-color: #{$grey-900};
+  --dropdown-shadow-color: #{$grey-300};
+
+  /* Dialog */
+  --dialog-bg-color: #{$white};
+  --dialog-header-bg-color: #{$grey-200};
+  --dialog-header-color: #{$grey-900};
+
+  ::backdrop {
+    --dialog-backdrop-color: #{color.change($grey-100, $alpha: 0.9)};
+  }
+
+  /* Overlay */
+  --overlay-blur-bg-color: #{color.change($grey-100, $alpha: 0.9)};
+
+  /* Hr */
+  --hr-color: #{$grey-200};
+
+  /* Action bar */
+  --action-bar-bg-color: #{$grey-200};
+
+  /* Nav */
+  --nav-shadow: 0 1px 0 #{color.change($grey-300, $alpha: 0.12)}, 0 1px 3px #{color.change($grey-300, $alpha: 0.15)};
+  --nav-primary-bg-color: #{color.change($white, $alpha: 0.9)};
+  --nav-backdrop-bg-color: #{color.change($white, $alpha: 0.88)};
+
+  /* Player */
+  --player-bg-color: #{$player-bg-color};
+  --player-header-bg-color: #{color.change($player-bg-color, $alpha: 0.65)};
+  --player-progress-bg-color: #{$player-bg-color};
+  --player-progress-hover-bg-color: #{$grey-100};
+  --player-progress-color: #{$primary-color};
+  --player-control-color: #{$grey-500};
+  --player-control-main-color: #{$grey-900};
+
+  /* Badge */
+  --badge-bg-color: #{color.change($badge-color, $alpha: 0.2)};
+  --badge-color: #{$badge-color};
+
+  /* Card */
+  --card-border-color: #{$grey-200};
+  --card-bg-color: #{$grey-100};
+
+  /* Icon */
+  --icon-active-color: #{$primary-color};
+  --icon-emphasis-color: #{$red};
+}