@uh-design-system/component-library 0.7.1 → 0.7.2-rc.1

package/dist/collection/components/01-base-components/ds-options-message/ds-options-message.css

@@ -0,0 +1,110 @@
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
+.ds-options-message {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ds-spacing-2xSmall);
+  height: 18.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+}
+.ds-options-message__error {
+  color: var(--ds-textColor-danger);
+  text-align: center;
+}
+.ds-options-message__error__icon {
+  display: inline-block;
+}
+.ds-options-message__error__title, .ds-options-message__no-results__title {
+  text-align: center;
+  color: var(--ds-textColor-default);
+  font-size: var(--ds-fontSize-18);
+  font-weight: var(--ds-fontWeight-semibold);
+  margin-top: var(--ds-spacing-xSmall);
+  margin-bottom: var(--ds-spacing-2xSmall);
+}
+.ds-options-message__no-results__title {
+  hyphens: auto;
+}
+.ds-options-message__error__text, .ds-options-message__loading__text, .ds-options-message__no-results__text {
+  color: var(--ds-textColor-default);
+  text-align: center;
+  font-size: var(--ds-fontSize-16);
+}
+.ds-options-message__loading__text {
+  padding-top: var(--ds-spacing-2xSmall);
+  padding-bottom: var(--ds-spacing-large);
+  text-align: center;
+}

package/dist/collection/components/01-base-components/ds-options-message/ds-options-message.js

@@ -0,0 +1,203 @@
+import { h } from "@stencil/core";
+import { getLanguage } from "../../../store";
+import { loadingOptions, noResultsFound, thereAreOptionsToBrowse, tryADifferentSearchTerm, tryAgainOrIfTheProblemPersists, weCouldNotLoadOptions, } from "../../../utils/controls/controlUtils";
+import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
+export class DsOptionsMessage {
+    el;
+    dsLoading = false;
+    dsError = false;
+    dsNoResults = false;
+    dsErrorTitle = weCouldNotLoadOptions();
+    dsErrorText = tryAgainOrIfTheProblemPersists();
+    dsLoadingText = loadingOptions();
+    dsNoResultsTitle = noResultsFound();
+    dsNoResultsText = tryADifferentSearchTerm();
+    render() {
+        const DsIcon = transformTagName('ds-icon', 'ds-options-message', this.el);
+        const DsSpinner = transformTagName('ds-spinner', 'ds-options-message', this.el);
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-options-message', this.el);
+        const baseClass = 'ds-options-message';
+        const errorClass = `${baseClass}__error`;
+        const loadingClass = `${baseClass}__loading`;
+        const noResultsClass = `${baseClass}__no-results`;
+        return (h("div", { key: 'bc45f7277c4b41c7abf84d84ca96f276bbe4ec5b', role: "status", "aria-live": "polite", "aria-atomic": "true" }, !this.dsLoading && !this.dsError && !this.dsNoResults ? (h(DsVisuallyHidden, null, thereAreOptionsToBrowse())) : (h("div", { class: baseClass }, this.dsError ? (h("div", { class: errorClass }, h(DsIcon, { dsName: "warning", dsSize: '2rem', class: `${errorClass}__icon` }), h("div", { class: `${errorClass}__title` }, this.dsErrorTitle), h("div", { class: `${errorClass}__text` }, this.dsErrorText))) : this.dsLoading ? (h("div", { class: loadingClass }, h(DsSpinner, { dsSize: "large" }), h("div", { class: `${loadingClass}__text` }, this.dsLoadingText))) : (h("div", { class: noResultsClass }, h("div", { class: `${noResultsClass}__title`, lang: getLanguage() }, this.dsNoResultsTitle), h("div", { class: `${noResultsClass}__text` }, this.dsNoResultsText)))))));
+    }
+    static get is() { return "ds-options-message"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-options-message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-options-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsLoading": {
+                "type": "boolean",
+                "attribute": "ds-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsError": {
+                "type": "boolean",
+                "attribute": "ds-error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsNoResults": {
+                "type": "boolean",
+                "attribute": "ds-no-results",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a no results state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsErrorTitle": {
+                "type": "string",
+                "attribute": "ds-error-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title to display when there is an error loading options (default: \"We could not load options.\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "weCouldNotLoadOptions()"
+            },
+            "dsErrorText": {
+                "type": "string",
+                "attribute": "ds-error-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display when there is an error loading options (default: \"Try again or if the problem persists, contact support.\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "tryAgainOrIfTheProblemPersists()"
+            },
+            "dsLoadingText": {
+                "type": "string",
+                "attribute": "ds-loading-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display when options are loading (default: \"Loading options...\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "loadingOptions()"
+            },
+            "dsNoResultsTitle": {
+                "type": "string",
+                "attribute": "ds-no-results-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title to display when there are no results (default: \"No results found\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "noResultsFound()"
+            },
+            "dsNoResultsText": {
+                "type": "string",
+                "attribute": "ds-no-results-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display when there are no results (default: \"Try a different search term.\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "tryADifferentSearchTerm()"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+declareComponentDependencies([h("ds-icon", null), h("ds-spinner", null), h("ds-visually-hidden", null)]);

package/dist/collection/components/01-base-components/ds-radio-button/ds-radio-button.css

@@ -7,20 +7,92 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 .ds-radio-button {
   box-sizing: border-box;
   display: inline-flex;
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 .ds-radio-button--disabled {
-  color: var(--ds-palette-black-40);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-radio-button__validity {
   margin-left: 10px;
 }
 .ds-radio-button:has(input:focus-visible) .ds-radio-button__icon {
-  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-bgColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 5);
 }
 .ds-radio-button__icon {
@@ -32,64 +104,64 @@
   margin-top: 11px;
 }
 .ds-radio-button__icon__outer-circle {
-  stroke: var(--ds-palette-black-50);
-  fill: var(--ds-palette-white);
+  stroke: var(--ds-borderColor-default);
+  fill: var(--ds-bgColor-white);
 }
 .ds-radio-button__icon__outer-circle--checked {
-  stroke: var(--ds-palette-mainBlue-70);
-  fill: var(--ds-palette-white);
+  stroke: var(--ds-borderColor-primary);
+  fill: var(--ds-bgColor-white);
 }
 .ds-radio-button__icon__inner-circle {
   stroke: unset;
-  fill: var(--ds-palette-mainBlue-70);
+  fill: var(--ds-bgColor-primary);
 }
 .ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle {
-  stroke: var(--ds-palette-black-50);
-  fill: var(--ds-palette-black-10);
+  stroke: var(--ds-borderColor-default);
+  fill: var(--ds-bgColor-white-hover);
 }
 .ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked {
   stroke: var(--ds-palette-mainBlue-80);
-  fill: var(--ds-palette-white);
+  fill: var(--ds-bgColor-white);
 }
 .ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle {
   stroke: unset;
-  fill: var(--ds-palette-mainBlue-80);
+  fill: var(--ds-bgColor-primary-hover);
 }
 .ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle {
-  stroke: var(--ds-palette-black-50);
-  fill: var(--ds-palette-black-20);
+  stroke: var(--ds-borderColor-default);
+  fill: var(--ds-bgColor-white-active);
 }
 .ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked {
   stroke: var(--ds-palette-mainBlue-90);
-  fill: var(--ds-palette-white);
+  fill: var(--ds-bgColor-white);
 }
 .ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle {
   stroke: unset;
-  fill: var(--ds-palette-mainBlue-90);
+  fill: var(--ds-bgColor-primary-active);
 }
 .ds-radio-button--disabled .ds-radio-button__icon__outer-circle {
-  stroke: var(--ds-overlay-black-15);
-  fill: var(--ds-overlay-black-10);
+  stroke: var(--ds-borderColor-disabled-onLight);
+  fill: var(--ds-bgColor-disabled-onLight);
 }
 .ds-radio-button--disabled .ds-radio-button__icon__outer-circle--checked {
-  stroke: var(--ds-overlay-black-15);
-  fill: var(--ds-overlay-black-10);
+  stroke: var(--ds-borderColor-disabled-onLight);
+  fill: var(--ds-bgColor-disabled-onLight);
 }
 .ds-radio-button--disabled .ds-radio-button__icon__inner-circle {
   stroke: unset;
-  fill: var(--ds-overlay-black-15);
+  fill: var(--ds-bgColor-transparent-onLight-active);
 }
 .ds-radio-button--invalid .ds-radio-button__icon__outer-circle {
-  stroke: var(--ds-palette-red-50);
-  fill: var(--ds-palette-white);
+  stroke: var(--ds-borderColor-danger);
+  fill: var(--ds-bgColor-white);
 }
 .ds-radio-button--invalid .ds-radio-button__icon__outer-circle--checked {
-  stroke: var(--ds-palette-red-50);
-  fill: var(--ds-palette-white);
+  stroke: var(--ds-borderColor-danger);
+  fill: var(--ds-bgColor-white);
 }
 .ds-radio-button--invalid .ds-radio-button__icon__inner-circle {
   stroke: unset;
-  fill: var(--ds-palette-mainBlue-70);
+  fill: var(--ds-bgColor-primary);
 }
 
 .ds-radio-button-fieldset {
@@ -101,7 +173,7 @@
 }
 .ds-radio-button-fieldset__legend {
   padding-inline: 0;
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
@@ -111,6 +183,6 @@
 .ds-radio-button-fieldset__assistive-text {
   display: inline;
   font-size: var(--ds-fontSize-14);
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
 }

package/dist/collection/components/01-base-components/ds-radio-button/stories/ds-radio-button.features.stories.js

@@ -66,9 +66,15 @@ export const Focused = {
     args: {
         dsText: 'Value text'
     },
-    play: async ({ canvasElement }) => {
+    parameters: {
+        visualTests: {
+            disable: true,
+        },
+    },
+    play: async ({ context, canvasElement }) => {
         const elem = canvasElement.querySelector('ds-radio-button');
         elem.dsFocus();
+        await window.takeScreenshot?.(context.id);
     }
 };
 export const CustomTagName = {

package/dist/collection/components/01-base-components/ds-radio-button-group/ds-radio-button-group.css

@@ -1,3 +1,75 @@
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 .ds-radio-button-group {
   display: inline-flex;
   flex-direction: column;
@@ -15,7 +87,7 @@
 }
 .ds-radio-button-group__legend {
   padding-inline: 0;
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
@@ -24,7 +96,7 @@
 }
 .ds-radio-button-group__assistive-text {
   font-size: var(--ds-fontSize-14);
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-2xSmall);
 }

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.features.stories.js

@@ -9,7 +9,7 @@ const meta = {
       ds-direction=${args.dsDirection}
       ds-error-text=${args.dsErrorText}
       ds-value=${args.dsValue}
-      ds-required=${args.dsRequired}
+      ?ds-required=${args.dsRequired}
     >
       <ds-radio-button ds-value="1" ds-text="Value text 1"></ds-radio-button>
       <ds-radio-button ds-value="2" ds-text="Value text 2"></ds-radio-button>
@@ -77,7 +77,7 @@ export const CustomTagName = {
       ds-direction=${args.dsDirection}
       ds-error-text=${args.dsErrorText}
       ds-value=${args.dsValue}
-      ds-required=${args.dsRequired}
+      ?ds-required=${args.dsRequired}
     >
       <custom-ds-radio-button ds-value="1" ds-text="Value text 1"></custom-ds-radio-button>
       <custom-ds-radio-button ds-value="2" ds-text="Value text 2"></custom-ds-radio-button>

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.js

@@ -11,7 +11,7 @@ const meta = {
       ds-direction=${args.dsDirection}
       ds-value=${args.dsValue}
       ds-error-text=${args.dsErrorText}
-      ds-required=${args.dsRequired}>
+      ?ds-required=${args.dsRequired}>
       <ds-radio-button ds-text="Value text 1"></ds-radio-button>
       <ds-radio-button ds-text="Value text 2"></ds-radio-button>
       <ds-radio-button ds-text="Value text 3"></ds-radio-button>
@@ -26,7 +26,12 @@ export const Default = {
         dsAssistiveText: 'Assistive text',
         dsRequired: false,
     },
-    play: async ({ canvasElement, step }) => {
+    parameters: {
+        visualTests: {
+            disable: true,
+        },
+    },
+    play: async ({ context, canvasElement, step }) => {
         const dsElem = (await getDsElem(canvasElement, 'ds-radio-button-group'));
         let radioButtons = [];
         await waitFor(() => {
@@ -46,6 +51,7 @@ export const Default = {
                 expect(radioButtons[0].dsChecked).toBe(true);
             });
         });
+        await window.takeScreenshot?.(context.id);
     },
 };
 export const Playground = {