From c6f1f8e8241423f79ae7a3bf79e15bcce154211d Mon Sep 17 00:00:00 2001
From: Rostyslav Nihrutsa <RostyslavNihrutsa@users.noreply.github.com>
Date: Mon, 10 Aug 2026 13:32:31 +0300
Subject: [PATCH] refactor: update styles and props across Button, Popover, and
 Select components

---
 src/components/Button/Button.tsx         |  2 +-
 src/components/Button/button.module.scss | 21 +++++++++++----------
 src/components/Select/SelectTrigger.tsx  |  1 -
 src/components/Select/select.module.scss |  5 ++++-
 src/providers/ui/styles/default.scss     |  5 +++++
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 23b8b18..917cbff 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -41,7 +41,7 @@ const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (props,
                 },
                 className
             )}
-            childrenClassName={classnames(styles["button__text"], childrenClassName)}
+            childrenClassName={classnames(styles["button__children"], childrenClassName)}
         >
             {children}
         </BaseButton>
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
index a66e649..e3ee2a2 100644
--- a/src/components/Button/button.module.scss
+++ b/src/components/Button/button.module.scss
@@ -11,6 +11,7 @@ $root: button;
   padding: var(--button-padding, 0 16px);
   transition:
     color var(--button-speed-color, var(--speed-color)),
+    border-color var(--button-speed-border-color, var(--speed-color)),
     background var(--button-speed-bg, var(--speed-color)),
     transform var(--button-speed-transform, var(--speed-sm));
 
@@ -25,31 +26,31 @@ $root: button;
 
   // Variants
   &--contained {
-    color: var(--button-contained-text-color, var(--bg-primary-color));
-    background: var(--button-contained-bg-color, var(--text-primary-color));
+    color: var(--button-contained-text-color, var(--text-primary-color));
+    background: var(--button-contained-bg-color, var(--bg-secondary-color));
 
     &.#{$root}--primary-color {
-      color: #fff;
+      color: var(--button-contained-primary-text-color, #fff);
       background: var(--primary-color);
     }
 
     &.#{$root}--secondary-color {
-      color: #fff;
+      color: var(--button-contained-secondary-text-color, #fff);
       background: var(--secondary-color);
     }
 
     &.#{$root}--accent-color {
-      color: #fff;
+      color: var(--button-contained-accent-text-color, #fff);
       background: var(--accent-color);
     }
 
     &.#{$root}--error-color {
-      color: #fff;
+      color: var(--button-contained-error-text-color, #fff);
       background: var(--error-color);
     }
 
     &.#{$root}--success-color {
-      color: #fff;
+      color: var(--button-contained-success-text-color, #fff);
       background: var(--success-color);
     }
   }
@@ -160,14 +161,14 @@ $root: button;
     border-radius: var(--button-height, 999px);
   }
 
-  &__text {
+  &__children {
     position: relative;
-    z-index: 3;
+    z-index: var(--button-children-z-index, 3);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: var(--button-max-width, 160px);
-    line-height: initial;
+    line-height: var(--button-children-line-height, inherit);
     transition: color var(--button-speed-color, var(--speed-color));
   }
 }
diff --git a/src/components/Select/SelectTrigger.tsx b/src/components/Select/SelectTrigger.tsx
index 94c36d5..9953ac7 100644
--- a/src/components/Select/SelectTrigger.tsx
+++ b/src/components/Select/SelectTrigger.tsx
@@ -17,7 +17,6 @@ import styles from "./select.module.scss";
 
 export interface SelectTriggerProps extends SelectTriggerRadixProps {
     center?: boolean;
-    fullWidth?: boolean;
     ellipsis?: boolean;
     icon?: React.ReactNode;
     placeholder?: React.ReactNode;
diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
index 56f25dd..29b0e18 100644
--- a/src/components/Select/select.module.scss
+++ b/src/components/Select/select.module.scss
@@ -24,7 +24,10 @@ $root: select;
     padding: var(--select-trigger-padding, 8px 12px);
     height: var(--select-trigger-height);
     gap: var(--select-trigger-gap, 5px);
-
+    transition:
+      border-color var(--select-speed-border-color, var(--speed-color)),
+      box-shadow var(--select-speed-box-shadow, var(--speed-color)),
+      background var(--select-speed-bg, var(--speed-color));
     &--center {
       justify-content: center;
     }
diff --git a/src/providers/ui/styles/default.scss b/src/providers/ui/styles/default.scss
index 082021b..b31c702 100644
--- a/src/providers/ui/styles/default.scss
+++ b/src/providers/ui/styles/default.scss
@@ -1,5 +1,10 @@
 @use "../../../styles/mixins" as theme;
 
+@include theme.view("sidebar") {
+  --viewport-max-width: 100%;
+  --viewport-max-height: 100vh;
+}
+
 :root {
   --viewport-height: var(--viewport-min-height);
   --viewport-width: var(--viewport-min-width);