✨ Merge tokens-studio/develop into develop

frontend/src/app/main/ui/ds/_borders.scss

@@ -8,6 +8,7 @@
 
 // TODO: create actual tokens once we have them from design
 $br-8: px2rem(8);
+$br-4: px2rem(4);
 $br-circle: 50%;
 
 $b-1: px2rem(1);

frontend/src/app/main/ui/ds/colors.scss

@@ -83,7 +83,7 @@ $grayish-red: #bfbfbf;
   --color-foreground-primary: #{$black};
   --color-foreground-secondary: #{$blue-teal-700};
 
-  --color-shadow: #{color.change($blue-teal-700, $alpha: 0.2)};
+  --color-shadow-dark: #{color.change($gray-200, $alpha: 0.6)};
   --color-overlay-default: #{$white-60};
   --color-overlay-onboarding: #{$white-90};
   --color-canvas: #{$grayish-red};
@@ -115,7 +115,7 @@ $grayish-red: #bfbfbf;
   --color-foreground-primary: #{$white};
   --color-foreground-secondary: #{$grayish-blue-500};
 
-  --color-shadow: #{color.change($black, $alpha: 0.6)};
+  --color-shadow-dark: #{color.change($black, $alpha: 0.6)};
   --color-overlay-default: #{$gray-950-60};
   --color-overlay-onboarding: #{$gray-950-90};
   --color-canvas: #{$grayish-red};

frontend/src/app/main/ui/ds/controls/input.cljs

@@ -23,9 +23,10 @@
 
 (mf/defc input*
   {::mf/props :obj
+   ::mf/forward-ref true
    ::mf/schema schema:input}
-  [{:keys [icon class type ref] :rest props}]
-  (let [ref (or ref (mf/use-ref))
+  [{:keys [icon class type external-ref] :rest props}]
+  (let [ref (or external-ref (mf/use-ref))
         type (or type "text")
         icon-class (stl/css-case :input true
                                  :input-with-icon (some? icon))
@@ -37,4 +38,4 @@
                                          (dom/focus! input-node))))]
     [:> "span" {:class (dm/str class " " (stl/css :container))}
      (when icon [:> icon* {:id icon :class (stl/css :icon) :on-click handle-icon-click}])
-     [:> "input" props]]))
+     [:> "input" props]]))

frontend/src/app/main/ui/ds/controls/input.scss

@@ -18,6 +18,7 @@
   column-gap: var(--sp-xs);
   align-items: center;
   position: relative;
+  inline-size: 100%;
 
   background: var(--input-bg-color);
   border-radius: $br-8;
@@ -48,6 +49,7 @@
   height: $sz-32;
   border: none;
   background: none;
+  inline-size: 100%;
 
   @include use-typography("body-small");
   color: var(--input-fg-color);

frontend/src/app/main/ui/ds/elevations.scss

@@ -4,9 +4,9 @@
 //
 // Copyright (c) KALEIDOS INC
 
-$elevation-shadow: 0 0 10px 0 var(--color-shadow);
+$el-shadow-dark: 0 0 10px 0 var(--color-shadow-dark);
 
 :global(.light),
 :global(.default) {
-  --elevation-shadow: #{$elevation-shadow};
+  --el-shadow-dark: #{$el-shadow-dark};
 }