feat(textarea): components theming with CSS-vars (#DS-2835) (#283)

Author: sk8knut

docs/guides/theming-2.0.md

@@ -75,6 +75,7 @@
 -   [input](/packages/components/input/input-tokens.scss)
 -   [link](/packages/components/link/link-tokens.scss)
 -   [table](/packages/components/table/table-tokens.scss)
+-   [textarea](/packages/components/textarea/textarea-tokens.scss)
 -   [timezone](/packages/components/timezone/timezone-option-tokens.scss)
 -   [toast](/packages/components/toast/toast-tokens.scss)
 -   [toggle](/packages/components/toggle/toggle-tokens.scss)

packages/components/core/styles/_koobiq-theme.scss

@@ -86,7 +86,7 @@
     @include kbq-sidepanel-typography($config);
     @include kbq-tabs-typography($config);
     @include kbq-tag-typography($config);
-    @include kbq-textarea-typography($config);
+    @include kbq-textarea-typography();
 
     @include kbq-markdown-typography($md-config);
 }

packages/components/textarea/_textarea-theme.scss

@@ -3,7 +3,7 @@
 
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-textarea-typography($config) {
+@mixin kbq-textarea-typography() {
     .kbq-textarea {
         @include kbq-typography-css-variables(textarea, default);
     }

packages/components/textarea/textarea-tokens.scss

@@ -0,0 +1,14 @@
+.kbq-textarea {
+    --kbq-textarea-size-min-height: 64px;
+    --kbq-textarea-size-max-height: 96px;
+    --kbq-textarea-size-padding-vertical: 6px;
+    --kbq-textarea-size-padding-horizontal: 12px;
+    --kbq-textarea-font-default-font-size: 14px;
+    --kbq-textarea-font-default-line-height: 20px;
+    --kbq-textarea-font-default-letter-spacing: -0.006em;
+    --kbq-textarea-font-default-font-weight: normal;
+    --kbq-textarea-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-textarea-font-default-text-transform: null;
+    --kbq-textarea-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}

packages/components/textarea/textarea.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/common/tokens' as *;
+@use './textarea-tokens' as *;
 
 .kbq-textarea {
     display: inline-block;

tools/tokens/build-each-component.js

@@ -35,6 +35,7 @@ const componentsWithCss = [
     'input',
     'link',
     'table',
+    'textarea',
     'timezone',
     'toast',
     'toggle',