Refactor the styles for Button, Popover, and Select components

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>

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));
   }
 }

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;

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;
     }

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);