fix: LEAP-1494: Padding in new textarea is missing in LSO (#6496)

Co-authored-by: ricardoantoniocm <[email protected]>
Co-authored-by: Brandon Martel <[email protected]>

Author: ricardoantoniocm

web/apps/labelstudio/src/themes/default/colors.scss

@@ -1 +1 @@
-@import '../../../../../libs/ui/src/tokens/colors';
+@import '@humansignal/ui/src/tokens/colors';

web/apps/labelstudio/src/themes/default/layout.scss

@@ -0,0 +1 @@
+@import '@humansignal/ui/src/tokens/layout';

web/apps/labelstudio/src/themes/default/variables.scss

@@ -1,2 +1,3 @@
 @import './colors';
-@import './typography';
+@import './layout';
+@import './typography';

web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss

@@ -61,7 +61,7 @@
 
     textarea {
       // the same as in .mark, its padding set to 0
-      padding:  var(--spacing-small)  var(--spacing-medium);
+      padding: var(--spacing-small) var(--spacing-medium);
     }
   }
 }

web/libs/ui/src/tokens/layout.scss

@@ -0,0 +1,11 @@
+:root {
+  --spacing-small-xx: 0.125rem;
+  --spacing-small-x: 0.25rem;
+  --spacing-small: 0.5rem;
+  --spacing-medium: 1rem;
+  --spacing-large: 1.5rem;
+  --spacing-large-x: 2rem;
+  --spacing-large-xx: 2.5rem;
+  --radius-xs: var(--spacing-small-x);
+  --radius-small: var(--spacing-small);
+}

web/webpack.config.js

@@ -236,6 +236,7 @@ module.exports = composePlugins(
       // Common dependencies across at least two sub-packages
       react: path.resolve(__dirname, "node_modules/react"),
       "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+      "@humansignal/ui": path.resolve(__dirname, "libs/ui"),
     };
 
     return merge(config, {