♻️ Add new exceptions for light theme

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -127,7 +127,7 @@
   border-radius: $br-8;
   color: var(--button-tertiary-foreground-color-rest);
   background-color: transparent;
-  border: $s-1 solid transparent;
+  border: $s-2 solid transparent;
   svg,
   span svg {
     stroke: var(--button-tertiary-foreground-color-rest);
@@ -135,7 +135,7 @@
   &:hover {
     background-color: var(--button-tertiary-background-color-hover);
     color: var(--button-tertiary-foreground-color-hover);
-    border: $s-1 solid var(--button-secondary-border-color-hover);
+    border: $s-2 solid var(--button-secondary-border-color-hover);
     svg,
     span svg {
       stroke: var(--button-tertiary-foreground-color-hover);
@@ -143,7 +143,7 @@
   }
   &:active {
     outline: none;
-    border: $s-1 solid transparent;
+    border: $s-2 solid transparent;
     background-color: var(--button-tertiary-background-color-active);
     color: var(--button-tertiary-foreground-color-active);
     svg,
@@ -168,11 +168,11 @@
 
 .button-icon-selected {
   outline: none;
-  border: $s-1 solid transparent;
+  border: $s-2 solid var(--button-icon-border-color-selected);
-  background-color: var(--button-tertiary-background-color-hover);
+  background-color: var(--button-icon-background-color-selected);
-  color: var(--button-tertiary-foreground-color-active);
+  color: var(--button-icon-foreground-color-selected);
   svg {
-    stroke: var(--button-tertiary-foreground-color-active);
+    stroke: var(--button-icon-foreground-color-selected);
   }
 }
 

frontend/resources/styles/common/refactor/color-defs.scss

@@ -42,6 +42,7 @@
   --lf-primary: #000;
   --lf-secondary: #495e74;
   --lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)};
+  --lf-secondary-50: #{color.change(#495e74, $alpha: 0.5)};
 
   //Light accent
   --la-primary: #6911d4;

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -63,6 +63,12 @@
   --button-tertiary-border-color-focus: var(--color-accent-primary);
   --button-tertiary-foreground-color-focus: var(--color-foreground-primary);
 
+  --button-icon-foreground-color: var(--color-foreground-secondary);
+  --button-icon-foreground-color-hover: var(--color-foreground-secondary);
+  --button-icon-background-color-selected: var(--color-background-quaternary);
+  --button-icon-foreground-color-selected: var(--color-accent-primary);
+  --button-icon-border-color-selected: var(--color-background-quaternary);
+
   --button-radio-background-color-rest: var(--color-background-tertiary);
   --button-radio-border-color-rest: var(--color-background-tertiary);
   --button-radio-foreground-color-rest: var(--color-foreground-secondary);
@@ -92,11 +98,14 @@
   --constraint-center-area-background-color: var(--color-background-primary);
 
   // TABS
+  --tabs-background-color: var(--color-background-secondary);
   --tab-background-color-hover: var(--color-background-primary);
   --tab-background-color-selected: var(--color-background-quaternary);
   --tab-foreground-color: var(--color-foreground-secondary);
   --tab-foreground-color-hover: var(--color-foreground-primary);
   --tab-foreground-color-selected: var(--color-accent-primary);
+  --tab-border-color: var(--color-background-secondary);
+  --tab-border-color-selected: var(--color-background-secondary);
 
   // SECTION TITLE
   --title-background-color: var(--color-background-primary);
@@ -213,16 +222,14 @@
   --assets-item-background-color: var(--color-background-tertiary);
   --assets-item-background-color-hover: var(--color-background-quaternary);
   --assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token
-  --assets-item-name-foreground-color: var(--color-foreground-secondary);
+  --assets-item-name-foreground-color: var(--color-foreground-primary);
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
   --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
   --assets-item-border-color: var(--color-accent-primary);
-  --assets-item-background-color-drag: var(--color-accent-primary-muted);
+  --assets-item-background-color-drag: transparent;
-  --assets-item-border-color-drag: var(--color-accent-tertiary);
+  --assets-item-border-color-drag: var(--color-accent-primary-muted);
-  --assets-component-background-color: var(--app-white); // We don't want this color to change with palette
+  --assets-component-background-color: var(--app-white); // TODO: review this token
-  --assets-component-background-color-disabled: var(
+  --assets-component-background-color-disabled: var(--df-secondary;);
-    --df-secondary;
-  ); // We don't want this color to change with palette
   --assets-component-border-color: var(--color-background-tertiary);
   --assets-component-border-selected: var(--color-accent-tertiary);
 
@@ -230,6 +237,7 @@
   --radio-btn-background-color-selected: var(--color-background-quaternary);
   --radio-btn-foreground-color: var(--color-foreground-secondary);
   --radio-btn-foreground-color-selected: var(--color-accent-primary);
+  --radio-btn-border-color: var(--color-background-tertiary);
   --radio-btn-border-color-selected: var(--color-background-quaternary);
 
   --library-name-foreground-color: var(--color-foreground-primary);
@@ -354,3 +362,25 @@
 #app {
   background-color: var(--app-background);
 }
+
+.light {
+  --assets-component-background-color: var(--color-background-secondary);
+
+  --tabs-background-color: var(--color-background-tertiary);
+  --tab-background-color-selected: var(--color-background-primary);
+  --tab-border-color: var(--color-background-tertiary);
+  --tab-border-color-selected: var(--color-background-secondary);
+
+  --radio-btns-background-color: var(--color-background-tertiary);
+  --radio-btn-background-color-selected: var(--color-background-primary);
+  --radio-btn-foreground-color: var(--color-foreground-secondary);
+  --radio-btn-foreground-color-selected: var(--color-accent-primary);
+  --radio-btn-border-color: var(--color-background-tertiary);
+  --radio-btn-border-color-selected: var(--color-background-secondary);
+
+  --button-icon-background-color-selected: var(--color-background-primary);
+  --button-icon-border-color-selected: var(--color-background-secondary);
+
+  --assets-item-name-background-color: var(--color-background-primary);
+  --assets-item-name-foreground-color: var(--color-foreground-primary);
+}

frontend/resources/styles/common/refactor/themes/light-theme.scss

@@ -24,8 +24,7 @@
   --color-accent-quaternary: var(--la-quaternary);
   --color-component-highlight: var(--la-secondary);
 
-  --overlay-color: rgba(255, 255, 255, 0.4);
+  --overlay-color: var(--lf-secondary-50);
-
   --shadow-color: var(--lf-secondary-40);
   --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;
 

frontend/src/app/main/ui/components/editable_label.scss

@@ -15,9 +15,9 @@
   max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
   margin: 0;
   padding-left: $s-6;
-  border-radius: $br-8;
+  border-radius: $br-4;
-  border: $s-1 solid var(--input-border-color-focus);
+  border: $s-1 solid var(--input-border-color-active);
-  color: var(--layer-row-foreground-color);
+  color: var(--input-foreground-color-active);
 }
 
 .editable-label {

frontend/src/app/main/ui/components/radio_buttons.scss

@@ -12,13 +12,16 @@
   height: $s-32;
   background-color: var(--input-background-color);
 }
+
 .radio-icon {
-  @extend .button-radio;
+  @include buttonStyle;
+  @include flexCenter;
+  @include focusRadio;
   height: $s-32;
   flex-grow: 1;
   border-radius: $s-8;
-  box-sizing: content-box;
+  box-sizing: border-box;
-  border: none;
+  border: $s-2 solid var(--radio-btn-border-color);
   input {
     display: none;
   }
@@ -31,16 +34,14 @@
     color: var(--radio-btn-foreground-color);
   }
   &:hover {
-    border: none;
     svg {
-      color: var(--radio-btn-foreground-color-selected);
+      stroke: var(--radio-btn-foreground-color-selected);
     }
   }
 
   &.checked {
-    border: none;
     background-color: var(--radio-btn-background-color-selected);
-    box-shadow: var(--radio-button-box-shadow);
+    border-color: var(--radio-btn-border-color-selected);
     svg {
       stroke: var(--radio-btn-foreground-color-selected);
     }
@@ -52,6 +53,7 @@
   &.disabled {
     cursor: default;
     background-color: transparent;
+    border: $s-2 solid transparent;
     svg {
       stroke: var(--button-foreground-color-disabled);
     }
@@ -59,8 +61,8 @@
       color: var(--button-foreground-color-disabled);
     }
     &:hover {
-      border: none;
       background-color: transparent;
+      border: $s-2 solid transparent;
       svg {
         stroke: var(--button-foreground-color-disabled);
       }

frontend/src/app/main/ui/components/tab_container.scss

@@ -17,8 +17,7 @@
   flex-direction: row;
   gap: $s-2;
   border-radius: $br-8;
-  background: var(--color-background-secondary);
+  background: var(--tabs-background-color);
-  padding: $s-2;
   cursor: pointer;
   font-size: $fs-12;
   height: 100%;
@@ -27,7 +26,6 @@
     flex-direction: row;
     height: 100%;
     width: 100%;
-    gap: $s-2;
     .tab-container-tab-title {
       @include flexCenter;
       @include tabTitleTipography;
@@ -35,10 +33,11 @@
       width: 100%;
       padding: 0 $s-8;
       margin: 0;
-      border-radius: $br-5;
+      border-radius: $br-8;
       background-color: transparent;
       color: var(--tab-foreground-color);
       white-space: nowrap;
+      border: $s-2 solid var(--tab-border-color);
       svg {
         @extend .button-icon;
         stroke: var(--tab-foreground-color);
@@ -47,6 +46,7 @@
       &.current,
       &.current:hover {
         background: var(--tab-background-color-selected);
+        border-color: var(--tab-border-color-selected);
         color: var(--tab-foreground-color-selected);
         svg {
           stroke: var(--tab-foreground-color-selected);

frontend/src/app/main/ui/components/tabs_container.cljs

@@ -1,53 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.components.tabs-container
-  (:require
-   [app.common.data :as d]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
-
-(mf/defc tabs-element
-  {::mf/wrap-props false}
-  [props]
-  (let [children (unchecked-get props "children")]
-    [:div.tab-element
-     [:div.tab-element-content children]]))
-
-(mf/defc tabs-container
-  {::mf/wrap-props false}
-  [props]
-  (let [children  (->>
-                   (unchecked-get props "children")
-                   (filter some?))
-        selected  (unchecked-get props "selected")
-        on-change (unchecked-get props "on-change-tab")
-
-        state     (mf/use-state #(or selected (-> children first .-props .-id)))
-        selected  (or selected @state)
-
-        select-fn
-        (mf/use-fn
-         (mf/deps on-change)
-         (fn [event]
-           (let [id (d/read-string (.. event -target -dataset -id))]
-             (reset! state id)
-             (when (fn? on-change) (on-change id)))))]
-
-    [:div.tab-container
-     [:div.tab-container-tabs
-      (for [tab children]
-        (let [props (.-props tab)
-              id    (.-id props)
-              title (.-title props)]
-          [:div.tab-container-tab-title
-           {:key (str/concat "tab-" (d/name id))
-            :data-id (pr-str id)
-            :on-click select-fn
-            :class (when (= selected id) "current")}
-           title]))]
-     [:div.tab-container-content
-      (d/seek #(= selected (-> % .-props .-id)) children)]]))

frontend/src/app/main/ui/dashboard/comments.scss

@@ -67,8 +67,8 @@
   width: $s-32;
 
   svg {
-    min-width: $s-16;
+    width: $s-16;
-    min-height: $s-16;
+    height: $s-16;
     stroke: $df-secondary;
     fill: none;
   }

frontend/src/app/main/ui/dashboard/import.scss

@@ -163,12 +163,12 @@
 
   &.loading {
     .file-name {
-      color: var(--element-foreground-pending);
+      color: var(--modal-text-foreground-color);
       .file-icon {
         :global(#loader-pencil) {
-          color: var(--element-foreground-pending);
+          color: var(--modal-text-foreground-color);
-          stroke: var(--element-foreground-pending);
+          stroke: var(--modal-text-foreground-color);
-          fill: var(--element-foreground-pending);
+          fill: var(--modal-text-foreground-color);
         }
       }
     }
@@ -186,34 +186,34 @@
   }
   &.success {
     .file-name {
-      color: var(--element-foreground-success);
+      color: var(--modal-text-foreground-color);
       .file-icon svg {
-        stroke: var(--element-foreground-success);
+        stroke: var(--modal-text-foreground-color);
       }
       .file-icon.icon-fill svg {
-        fill: var(--element-foreground-success);
+        fill: var(--modal-text-foreground-color);
       }
     }
   }
   &.error {
     .file-name {
-      color: var(--element-foreground-error);
+      color: var(--modal-text-foreground-color);
       .file-icon svg {
-        stroke: var(--element-foreground-error);
+        stroke: var(--modal-text-foreground-color);
       }
       .file-icon.icon-fill svg {
-        fill: var(--element-foreground-error);
+        fill: var(--modal-text-foreground-color);
       }
     }
   }
   &.editable {
     .file-name {
-      color: var(--icon-foreground);
+      color: var(--modal-text-foreground-color);
       .file-icon svg {
-        stroke: var(--icon-foreground);
+        stroke: var(--modal-text-foreground-color);
       }
       .file-icon.icon-fill svg {
-        fill: var(--icon-foreground);
+        fill: var(--modal-text-foreground-color);
       }
     }
   }

frontend/src/app/main/ui/dashboard/pin_button.scss

@@ -7,13 +7,14 @@
 @use "common/refactor/common-refactor.scss" as *;
 
 .button {
-  --pin-button-icon-color: #{$df-secondary};
+  --pin-button-icon-color: var(--button-icon-foreground-color);
   --pin-button-bg-color: none;
+  --pin-button-border-color: none;
 
   width: $s-32;
   height: $s-32;
   background: var(--pin-button-bg-color);
-  border: none;
+  border: $s-2 solid var(--pin-button-border-color);
   border-radius: $br-8;
   display: grid;
   place-content: center;
@@ -21,8 +22,9 @@
 }
 
 .button-active {
-  --pin-button-icon-color: #{$da-primary};
+  --pin-button-icon-color: var(--button-icon-foreground-color-selected);
-  --pin-button-bg-color: #{$db-cuaternary};
+  --pin-button-bg-color: var(--button-icon-background-color-selected);
+  --pin-button-border-color: var(--button-icon-border-color-selected);
 }
 
 .icon {

frontend/src/app/main/ui/export.scss

@@ -276,27 +276,27 @@
   }
   &.loading {
     .file-name {
-      color: var(--element-foreground-pending);
+      color: var(--modal-text-foreground-color);
       .file-icon svg:global(#loader-pencil) {
-        color: var(--element-foreground-pending);
+        color: var(--modal-text-foreground-color);
-        stroke: var(--element-foreground-pending);
+        stroke: var(--modal-text-foreground-color);
-        fill: var(--element-foreground-pending);
+        fill: var(--modal-text-foreground-color);
       }
     }
   }
   &.error {
     .file-name {
-      color: var(--element-foreground-error);
+      color: var(--modal-text-foreground-color);
       .file-icon svg {
-        stroke: var(--element-foreground-error);
+        stroke: var(--modal-text-foreground-color);
       }
     }
   }
   &.success {
     .file-name {
-      color: var(--element-foreground-success);
+      color: var(--modal-text-foreground-color);
       .file-icon svg {
-        stroke: var(--element-foreground-success);
+        stroke: var(--modal-text-foreground-color);
       }
     }
   }

frontend/src/app/main/ui/workspace/comments.scss

@@ -16,9 +16,7 @@
 .comments-section-title {
   @include flexCenter;
   @include tabTitleTipography;
-  display: flex;
+  position: relative;
-  justify-content: space-between;
-  align-items: center;
   height: $s-32;
   min-height: $s-32;
   margin: $s-8 $s-8 0 $s-8;
@@ -33,6 +31,9 @@
 
 .close-button {
   @extend .button-tertiary;
+  position: absolute;
+  right: $s-2;
+  top: $s-2;
   height: $s-28;
   width: $s-28;
   border-radius: $br-6;

frontend/src/app/main/ui/workspace/palette.scss

@@ -59,6 +59,7 @@
     margin: $s-0;
     list-style: none;
     z-index: $z-index-2;
+    gap: $s-2;
     &.mid-palette,
     &.small-palette {
       display: flex;
@@ -73,7 +74,6 @@
         height: $s-32;
         width: $s-32;
         border-radius: $br-8;
-        border: $s-2 solid transparent;
         background-clip: padding-box;
         padding: 0;
         svg {
@@ -83,12 +83,10 @@
         &.selected {
           @extend .button-icon-selected;
         }
-        &:hover {
-          border: $s-2 solid transparent;
-        }
       }
     }
   }
+
   .palette-actions {
     @extend .button-tertiary;
     grid-area: actions;

frontend/src/app/main/ui/workspace/right_header.scss

@@ -128,6 +128,7 @@
   margin: 0;
   height: $s-28;
   width: $s-28;
+  border: none;
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);
@@ -140,7 +141,6 @@
   }
   &.selected {
     background-color: var(--button-tertiary-background-color-selected);
-    border: $s-2 solid var(--button-tertiary-border-color-selected);
     svg {
       stroke: var(--button-tertiary-foreground-color-active);
     }
@@ -153,6 +153,7 @@
   margin: 0;
   height: $s-28;
   width: $s-28;
+  border: none;
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);
@@ -165,7 +166,6 @@
   }
   &.selected {
     background-color: var(--button-tertiary-background-color-selected);
-    border: $s-2 solid var(--button-tertiary-border-color-selected);
     svg {
       stroke: var(--button-tertiary-foreground-color-active);
     }
@@ -218,6 +218,7 @@
   margin: 0;
   width: $s-28;
   height: $s-28;
+  border: none;
   svg {
     @extend .button-icon;
     height: $s-16;
@@ -226,5 +227,6 @@
   }
   &:hover {
     background-color: transparent;
+    border: none;
   }
 }

frontend/src/app/main/ui/workspace/sidebar.scss

@@ -30,6 +30,10 @@ $width-settings-bar-max: $s-500;
   }
 }
 
+.layers-tab {
+  padding-top: $s-4;
+}
+
 .left-header {
   grid-area: header;
 }
@@ -85,6 +89,5 @@ $width-settings-bar-max: $s-500;
   width: 100%;
   height: $s-12;
   border-top: $s-2 solid var(--resize-area-border-color);
-  background-color: var(--resize-area-background-color);
   cursor: ns-resize;
 }

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -168,7 +168,8 @@
                        :placeholder (tr "workspace.assets.search")}
         [:button
          {:on-click on-open-menu
-          :class (stl/css :section-button)}
+          :class (stl/css-case :section-button true
+                               :opened menu-open?)}
          i/filter-refactor]]
        [:& context-menu-a11y
         {:on-close on-menu-close

frontend/src/app/main/ui/workspace/sidebar/assets.scss

@@ -90,6 +90,10 @@
       }
     }
   }
+
+  &.opened {
+    @extend .button-icon-selected;
+  }
 }
 
 .sections-container {

frontend/src/app/main/ui/workspace/sidebar/assets/components.scss

@@ -34,6 +34,7 @@
     position: absolute;
     left: $s-4;
     bottom: $s-4;
+    height: $s-20;
     width: calc(100% - 2 * $s-4);
     padding: $s-2;
     column-gap: $s-4;
@@ -50,10 +51,11 @@
     span {
       display: flex;
       align-items: center;
+      height: 100%;
     }
     &.editing {
       border: $s-1 solid var(--input-border-color-focus);
-      border-radius: $br-2;
+      border-radius: $br-4;
       display: flex;
       align-items: center;
       background-color: var(--input-background-color);
@@ -63,12 +65,12 @@
   &:hover {
     background-color: var(--assets-item-background-color-hover);
     .cell-name {
-      display: flex;
+      display: block;
     }
   }
 
   &.selected {
-    border: $s-4 solid var(--assets-item-border-color);
+    border: $s-1 solid var(--assets-item-border-color);
   }
 }
 

frontend/src/app/main/ui/workspace/sidebar/layers.cljs

@@ -239,6 +239,7 @@
             [:button {:on-click toggle-filters
                       :class (stl/css-case
                               :filter-button true
+                              :opened show-menu?
                               :active active?)}
              i/filter-refactor]]
 

frontend/src/app/main/ui/workspace/sidebar/layers.scss

@@ -49,6 +49,9 @@
           stroke: var(--button-foreground-hover);
         }
       }
+      &.opened {
+        @extend .button-icon-selected;
+      }
     }
     .close-search {
       @extend .button-tertiary;

frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss

@@ -52,5 +52,5 @@
 .coord-input {
   @extend .input-element;
   border-radius: 0 $br-8 $br-8 0;
-  border-left: 1px solid var(--panel-background-color);
+  border-left: $s-1 solid var(--panel-background-color);
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -229,10 +229,7 @@
         @extend .button-icon;
       }
       &.extended {
-        background-color: var(--button-radio-background-color-active);
+        @extend .button-icon-selected;
-        svg {
-          stroke: var(--button-radio-foreground-color-active);
-        }
       }
     }
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss

@@ -54,10 +54,7 @@
           stroke: var(--icon-foreground);
         }
         &.selected {
-          background-color: var(--button-tertiary-background-color-hover);
+          @extend .button-icon-selected;
-          svg {
-            stroke: var(--button-tertiary-foreground-color-active);
-          }
         }
       }
     }
@@ -138,10 +135,7 @@
       stroke: var(--icon-foreground);
     }
     &.selected {
-      background-color: var(--button-tertiary-background-color-hover);
+      @extend .button-icon-selected;
-      svg {
-        stroke: var(--button-tertiary-foreground-color-active);
-      }
     }
   }
 }

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss

@@ -83,11 +83,7 @@
     @extend .button-icon;
   }
   &.selected {
-    background-color: var(--button-tertiary-background-color-active);
+    @extend .button-icon-selected;
-    color: var(--button-tertiary-foreground-color-active);
-    svg {
-      stroke: var(--button-tertiary-foreground-color-active);
-    }
   }
 }
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -546,7 +546,7 @@
             [:span {:class (stl/css :icon)}
              i/clip-content-refactor]]])
         (when (options :show-in-viewer)
-          [:div {:class (stl/css :clip-content)}
+          [:div {:class (stl/css :show-in-viewer)}
            [:input {:type "checkbox"
                     :id "show-in-viewer"
                     :ref show-in-viewer-ref

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss

@@ -203,10 +203,7 @@
     stroke: var(--icon-foreground);
   }
   &.selected {
-    background-color: var(--button-tertiary-background-color-hover);
+    @extend .button-icon-selected;
-    svg {
-      stroke: var(--button-tertiary-foreground-color-active);
-    }
   }
 }
 
@@ -235,10 +232,7 @@
       }
     }
     &.selected {
-      background-color: var(--button-tertiary-background-color-hover);
+      @extend .button-icon-selected;
-      svg {
-        stroke: var(--button-tertiary-foreground-color-active);
-      }
     }
   }
 }

frontend/src/app/main/ui/workspace/top_toolbar.scss

@@ -39,7 +39,6 @@
       height: $s-36;
       width: $s-36;
       flex-shrink: 0;
-      background-color: transparent;
       border-radius: $s-8;
       border: none;
       margin: 0 $s-2;
@@ -48,11 +47,9 @@
         @extend .button-icon;
         stroke: var(--color-foreground-secondary);
       }
+
       &.selected {
-        background-color: var(--button-radio-background-color-active);
+        @extend .button-icon-selected;
-        svg {
-          stroke: var(--button-radio-foreground-color-active);
-        }
       }
     }
   }