@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css

@@ -1,6 +1,6 @@
 .sdds-navigation-tabs {
   box-sizing: border-box;
-  background-color: var(--sdds-navigation-tabs-bg);
+  background-color: var(--sdds-navigation-tabs-background);
   position: relative;
   display: flex;
   /* tab */
@@ -12,7 +12,8 @@
 .sdds-navigation-tabs::after {
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-bg);
+  border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-background);
+  opacity: var(--sdds-navigation-tabs-horizontal-divider-opacity);
   left: 0;
   right: 0;
   bottom: 0;
@@ -36,7 +37,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  background-color: var(--sdds-navigation-tabs-scroll-btn-bg);
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -48,11 +49,11 @@
   pointer-events: all;
 }
 .sdds-navigation-tabs-forward:hover {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-hover-bg);
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);
   text-decoration: none;
 }
 .sdds-navigation-tabs-forward:active {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-active-bg);
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);
 }
 .sdds-navigation-tabs-forward:focus {
   outline: 2px solid var(--sdds-blue-400);
@@ -66,7 +67,7 @@
   position: absolute;
   left: 0;
   top: 0;
-  background-color: var(--sdds-navigation-tabs-scroll-btn-bg);
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -78,10 +79,10 @@
   pointer-events: all;
 }
 .sdds-navigation-tabs-back:hover {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-hover-bg);
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);
 }
 .sdds-navigation-tabs-back:active {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-active-bg);
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);
 }
 .sdds-navigation-tabs-back:focus {
   outline: 2px solid var(--sdds-blue-400);
@@ -90,7 +91,8 @@
 ::slotted(.sdds-navigation-tabs-tab) {
   font: var(--sdds-headline-07);
   letter-spacing: var(--sdds-headline-07-ls);
-  color: rgba(0, 21, 51, 0.6);
+  color: var(--sdds-navigation-tabs-tab-color);
+  opacity: 0.6;
   padding: 26px 0;
   margin-right: 32px;
   text-decoration: none;
@@ -111,9 +113,9 @@
   width: 0;
   margin-right: auto;
   height: 2px;
-  background-color: var(--sdds-navigation-tabs-tab-hover-indicator-bg);
+  background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);
   transition: width 0.15s ease-in-out;
-  z-index: 10;
+  z-index: 1;
 }
 ::slotted(.sdds-navigation-tabs-tab:first-child) {
   margin-left: 32px;
@@ -122,7 +124,8 @@
   margin-right: 32px;
 }
 ::slotted(.sdds-navigation-tabs-tab:hover) {
-  color: var(--sdds-navigation-tabs-tab-hover-color);
+  color: var(--sdds-navigation-tabs-tab-color-hover);
+  opacity: 1;
 }
 ::slotted(.sdds-navigation-tabs-tab:hover)::after {
   width: 100%;
@@ -130,24 +133,25 @@
 ::slotted(.sdds-navigation-tabs-tab:focus) {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
-  color: var(--sdds-navigation-tabs-tab-focus-color);
+  color: var(--sdds-navigation-tabs-tab-color-focus);
+  opacity: 1;
 }
 ::slotted(.sdds-navigation-tabs-tab:focus)::after {
   width: 0;
 }
 ::slotted(.sdds-navigation-tabs-tab-active) {
-  color: var(--sdds-navigation-tabs-tab-active-color);
+  color: var(--sdds-navigation-tabs-tab-color-active);
+  opacity: 1;
 }
 ::slotted(.sdds-navigation-tabs-tab-active)::after {
   width: 100%;
-  --sdds-navigation-tabs-tab-active-indicator-bg: var(--sdds-blue-400);
-  background-color: var(--sdds-navigation-tabs-tab-active-indicator-bg);
+  background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);
 }
 ::slotted(.sdds-navigation-tabs-tab-active:focus)::after {
   width: 100%;
 }
 ::slotted(.sdds-navigation-tabs-tab-disabled) {
-  color: var(--sdds-navigation-tabs-tab-active-color);
-  opacity: 0.16;
+  color: var(--sdds-navigation-tabs-tab-color-disabled);
+  opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);
   pointer-events: none;
 }

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -1,103 +1,128 @@
-import { Host, h } from '@stencil/core';
-export class NavigationTabs {
-  constructor() {
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.componentWidth = 0; // visible width of this component
-    this.buttonsWidth = 0; // total width of all nav items combined
-    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-    this.buttonWidth = 0; // current calculated width of the largest nav button
-    this.tabs = [];
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  componentDidRender() {
-    this._calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-navigation-tabs-tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this._evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      }
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this._calculateButtonWidth();
-  }
-  _calculateButtonWidth() {
-    let best = 0;
-    const navButtons = Array.from(this.host.children);
-    navButtons.forEach((navButton) => {
-      const style = window.getComputedStyle(navButton);
-      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-      if (width > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  _scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
-    this._evaluateScrollButtons();
-  }
-  _scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
-    this._evaluateScrollButtons();
-  }
-  _evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "sdds-navigation-tabs" }, h("div", { class: "sdds-navigation-tabs-wrapper", ref: (el) => (this.navWrapperElement = el) }, h("slot", null)), h("div", { class: "sdds-navigation-tabs-navigation" }, h("button", { class: `sdds-navigation-tabs-forward ${this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''}`, onClick: () => this._scrollRight() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z", fill: "#0D0F13" }))), h("button", { class: `sdds-navigation-tabs-back ${this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''}`, onClick: () => this._scrollLeft() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z", fill: "#0D0F13" })))))));
-  }
-  static get is() { return "sdds-navigation-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["navigation-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["navigation-tabs.css"]
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {},
-      "showLeftScroll": {},
-      "showRightScroll": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}
+import { Host, h } from '@stencil/core';
+export class NavigationTabs {
+  constructor() {
+    this.navWrapperElement = null; // reference to container with nav buttons
+    this.componentWidth = 0; // visible width of this component
+    this.buttonsWidth = 0; // total width of all nav items combined
+    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+    this.buttonWidth = 0; // current calculated width of the largest nav button
+    this.tabs = [];
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+    this.modeVariant = null;
+  }
+  componentDidRender() {
+    this.calculateButtonWidth();
+  }
+  componentDidLoad() {
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const componentWidth = entry.contentRect.width;
+        let buttonsWidth = 0;
+        const navButtons = Array.from(this.host.children);
+        navButtons.forEach((navButton) => {
+          const style = window.getComputedStyle(navButton);
+          buttonsWidth +=
+            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+          navButton.classList.add('sdds-navigation-tabs-tab');
+        });
+        this.componentWidth = componentWidth;
+        this.buttonsWidth = buttonsWidth;
+        this.scrollWidth = buttonsWidth - componentWidth;
+        if (this.buttonsWidth > this.componentWidth) {
+          this.evaluateScrollButtons();
+        }
+        else {
+          this.showLeftScroll = false;
+          this.showRightScroll = false;
+        }
+      });
+    });
+    resizeObserver.observe(this.navWrapperElement);
+    this.calculateButtonWidth();
+  }
+  calculateButtonWidth() {
+    let best = 0;
+    const navButtons = Array.from(this.host.children);
+    navButtons.forEach((navButton) => {
+      const style = window.getComputedStyle(navButton);
+      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+      if (width > best) {
+        best = width;
+      }
+    });
+    this.buttonWidth = best;
+  }
+  scrollRight() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
+    this.evaluateScrollButtons();
+  }
+  scrollLeft() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
+    this.evaluateScrollButtons();
+  }
+  evaluateScrollButtons() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    if (scroll >= this.scrollWidth) {
+      this.showRightScroll = false;
+    }
+    else {
+      this.showRightScroll = true;
+    }
+    if (scroll <= 0) {
+      this.showLeftScroll = false;
+    }
+    else {
+      this.showLeftScroll = true;
+    }
+  }
+  render() {
+    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "sdds-navigation-tabs" }, h("div", { class: "sdds-navigation-tabs-wrapper", ref: (el) => {
+        this.navWrapperElement = el;
+      } }, h("slot", null)), h("div", { class: "sdds-navigation-tabs-navigation" }, h("button", { class: `sdds-navigation-tabs-forward ${this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z", fill: "#0D0F13" }))), h("button", { class: `sdds-navigation-tabs-back ${this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z", fill: "#0D0F13" })))))));
+  }
+  static get is() { return "sdds-navigation-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["navigation-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["navigation-tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabs": {},
+      "showLeftScroll": {},
+      "showRightScroll": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -0,0 +1,32 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Tabs',
+  parameters: {
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+};
+// Why role="link" on a disabled link: https://www.scottohara.me/blog/2021/05/28/disabled-links.html
+const Template = () => formatHtmlPreview(`
+    <sdds-navigation-tabs>
+      <a href="#" class="sdds-navigation-tabs-tab-active">Active tab</a>
+      <a href="#">Tab name</a>
+      <a href="#">Tab name</a>
+      <a href="#">Tab name</a>
+      <a role="link" aria-disabled="true" tabindex="-1" class="sdds-navigation-tabs-tab-disabled">Disabled tab</a>
+    </sdds-navigation-tabs>
+    `);
+export const NavigationTabs = Template.bind({});
+NavigationTabs.args = {};

package/dist/collection/components/textarea/textarea.css

@@ -1,62 +1,74 @@
 :root,
-.sdds-theme-light {
+.sdds-mode-light {
+  --sdds-textarea-background-primary: var(--sdds-grey-50);
+  --sdds-textarea-background-secondary: var(--sdds-white);
+  --sdds-textarea-background: var(--sdds-textarea-background-primary);
   --sdds-textarea-color: var(--sdds-grey-868);
-  --sdds-textarea-bg: var(--sdds-white);
   --sdds-textarea-placeholder: var(--sdds-grey-500);
   --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
-  --sdds-textarea-on-white-bg: var(--sdds-grey-50);
   --sdds-textarea-disabled-color: var(--sdds-grey-400);
-  --sdds-textarea-disabled-bg: var(--sdds-white);
+  --sdds-textarea-disabled-background: var(--sdds-white);
   --sdds-textarea-disabled-placeholder: var(--sdds-grey-400);
   --sdds-textarea-disabled-label: var(--sdds-grey-400);
   --sdds-textarea-label-color: var(--sdds-grey-958);
   --sdds-textarea-label-inside-color: var(--sdds-grey-700);
   --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
   --sdds-textarea-helper: var(--sdds-grey-700);
-  --sdds-textarea-helper-error: var(--sdds-red-500);
+  --sdds-textarea-helper-error: var(--sdds-negative);
   --sdds-textarea-bar: var(--sdds-blue-400);
-  --sdds-textarea-bar-error: var(--sdds-red-500);
+  --sdds-textarea-bar-error: var(--sdds-negative);
   --sdds-textarea-textcounter: var(--sdds-grey-700);
   --sdds-textarea-textcounter-divider: var(--sdds-grey-500);
-  --sdds-textarea-border-bottom: var(--sdds-grey-400);
-  --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textarea-border-bottom-success: var(--sdds-grey-800);
-  --sdds-textarea-border-bottom-error: var(--sdds-red-500);
-  --sdds-textarea-icon-read-only-color: var(--sdds-white);
-  --sdds-textarea-icon-read-only-label-color: var(--sdds-grey-800);
+  --sdds-textarea-border-bottom: var(--sdds-grey-600);
+  --sdds-textarea-border-bottom-hover: var(--sdds-grey-800);
+  --sdds-textarea-border-bottom-success: var(--sdds-grey-958);
+  --sdds-textarea-border-bottom-error: var(--sdds-negative);
+  --sdds-textarea-icon-read-only-color: var(--sdds-grey-958);
+  --sdds-textarea-icon-read-only-label-color: var(--sdds-grey-958);
   --sdds-textarea-resize-icon: var(--sdds-grey-500);
 }
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-textarea-background: var(--sdds-textarea-background-primary);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-textarea-background: var(--sdds-textarea-background-secondary);
+}
 
-.sdds-theme-dark {
-  --sdds-textarea-color: var(--sdds-grey-868);
-  --sdds-textarea-bg: var(--sdds-red);
-  --sdds-textarea-placeholder: var(--sdds-grey-500);
-  --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
-  --sdds-textarea-on-white-bg: var(--sdds-grey-50);
-  --sdds-textarea-disabled-color: var(--sdds-grey-400);
-  --sdds-textarea-disabled-bg: var(--sdds-red);
-  --sdds-textarea-disabled-placeholder: var(--sdds-grey-400);
-  --sdds-textarea-disabled-label: var(--sdds-grey-400);
-  --sdds-textarea-label-color: var(--sdds-grey-958);
-  --sdds-textarea-label-inside-color: var(--sdds-grey-700);
-  --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
-  --sdds-textarea-helper: var(--sdds-grey-700);
-  --sdds-textarea-helper-error: var(--sdds-red-500);
+.sdds-mode-dark {
+  --sdds-textarea-background-primary: var(--sdds-grey-900);
+  --sdds-textarea-background-secondary: var(--sdds-grey-868);
+  --sdds-textarea-background: var(--sdds-textarea-background-primary);
+  --sdds-textarea-color: var(--sdds-grey-200);
+  --sdds-textarea-placeholder: var(--sdds-grey-600);
+  --sdds-textarea-placeholder-focus-color: var(--sdds-grey-700);
+  --sdds-textarea-disabled-color: var(--sdds-grey-800);
+  --sdds-textarea-disabled-background: var(--sdds-grey-868);
+  --sdds-textarea-disabled-placeholder: var(--sdds-grey-800);
+  --sdds-textarea-disabled-label: var(--sdds-grey-700);
+  --sdds-textarea-label-color: var(--sdds-grey-100);
+  --sdds-textarea-label-inside-color: var(--sdds-grey-400);
+  --sdds-textarea-placeholder-focus-color: var(--sdds-grey-700);
+  --sdds-textarea-helper: var(--sdds-grey-600);
+  --sdds-textarea-helper-error: var(--sdds-negative);
   --sdds-textarea-bar: var(--sdds-blue-400);
-  --sdds-textarea-bar-error: var(--sdds-red-500);
-  --sdds-textarea-textcounter: var(--sdds-grey-700);
-  --sdds-textarea-textcounter-divider: var(--sdds-grey-500);
-  --sdds-textarea-border-bottom: var(--sdds-grey-400);
-  --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
-  --sdds-textarea-border-bottom-success: var(--sdds-grey-800);
-  --sdds-textarea-border-bottom-error: var(--sdds-red-500);
-  --sdds-textarea-icon-read-only-color: var(--sdds-white);
-  --sdds-textarea-icon-read-only-label-color: var(--sdds-grey-800);
+  --sdds-textarea-bar-error: var(--sdds-negative);
+  --sdds-textarea-textcounter: var(--sdds-grey-600);
+  --sdds-textarea-textcounter-divider: var(--sdds-grey-700);
+  --sdds-textarea-border-bottom: var(--sdds-grey-600);
+  --sdds-textarea-border-bottom-hover: var(--sdds-grey-400);
+  --sdds-textarea-border-bottom-success: var(--sdds-grey-50);
+  --sdds-textarea-border-bottom-error: var(--sdds-negative);
+  --sdds-textarea-icon-read-only-color: var(--sdds-grey-100);
+  --sdds-textarea-icon-read-only-label-color: var(--sdds-grey-50);
   --sdds-textarea-resize-icon: var(--sdds-grey-500);
 }
-
-.sdds-on-white-bg {
-  --sdds-textarea-bg: var(--sdds-textarea-on-white-bg);
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-textarea-background: var(--sdds-textarea-background-primary);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-textarea-background: var(--sdds-textarea-background-secondary);
 }
 
 .sdds-textarea-container {
@@ -105,7 +117,7 @@
   outline: none;
   height: 100%;
   color: var(--sdds-textarea-color);
-  background-color: var(--sdds-textarea-bg);
+  background-color: var(--sdds-textarea-background);
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
   padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
@@ -122,7 +134,7 @@
   color: var(--sdds-textarea-placeholder-focus-color);
 }
 .sdds-textarea-input:disabled {
-  background-color: var(--sdds-textarea-disabled-bg);
+  background-color: var(--sdds-textarea-disabled-background);
   color: var(--sdds-textarea-disabled-color);
   cursor: not-allowed;
 }
@@ -148,7 +160,7 @@
   padding-bottom: 2px;
   padding-right: 2px;
   pointer-events: none;
-  background-color: var(--sdds-textarea-bg);
+  background-color: var(--sdds-textarea-background);
 }
 .sdds-textarea-resizer-icon svg {
   display: block;
@@ -158,7 +170,7 @@
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
   display: block;
-  z-index: 2;
+  z-index: 1;
   margin-bottom: var(--sdds-spacing-element-8);
   color: var(--sdds-textarea-label-color);
 }
@@ -214,7 +226,9 @@
 .sdds-textarea-helper {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
-  display: block;
+  display: flex;
+  gap: 8px;
+  align-items: center;
   padding-top: var(--sdds-spacing-element-4);
   color: var(--sdds-textarea-helper);
   flex-grow: 2;
@@ -250,6 +264,7 @@
   position: absolute;
   right: 18px;
   top: 18px;
+  color: var(--sdds-textarea-icon-read-only-color);
 }
 .sdds-textarea-icon__readonly-label {
   display: none;
@@ -260,7 +275,7 @@
   letter-spacing: var(--sdds-detail-05-ls);
   padding: 8px;
   color: var(--sdds-textarea-icon-read-only-label-color);
-  background-color: var(--sdds-textarea-icon-read-only-label-bg);
+  background-color: var(--sdds-textarea-icon-read-only-label-background);
   white-space: nowrap;
   border-radius: 4px 0 4px 4px;
 }