From a5ae8f4ffea5b64db1337e88b6170ec644a68000 Mon Sep 17 00:00:00 2001
From: ChrisPaj <40994731+ChrisPaj@users.noreply.github.com>
Date: Tue, 2 Nov 2021 17:04:05 +0100
Subject: [PATCH] refactor(toggle-group): replace prop _colorScheme_ with
 _variant_ (#663)

* refactor(toggle-group): replace prop 'colorScheme' by 'variant'

* refactor(toggle-group, toggle-button): use JSDoc @deprecated syntax;

Co-authored-by: Arturo Castillo Delgado <ac@iconstorm.com>
---
 .../__snapshots__/toggle-button.spec.ts.snap  |  16 ++--
 .../src/components/toggle-button/readme.md    |   3 +-
 .../toggle-button/toggle-button.tsx           |   5 +-
 .../__snapshots__/toggle-group.spec.ts.snap   |  24 +++---
 .../src/components/toggle-group/readme.md     |  23 +++---
 .../components/toggle-group/toggle-group.tsx  |  27 ++++++-
 .../toggle-group/ScaleToggleGroup.vue         |   4 +-
 .../toggle-group/ToggleGroup.stories.mdx      |  18 +++--
 ...toggle-group-monochrome-variant-1-snap.png | Bin 0 -> 2332 bytes
 ...toggle-group-monochrome-variant-2-snap.png | Bin 0 -> 2397 bytes
 ...toggle-group-monochrome-variant-3-snap.png | Bin 0 -> 2961 bytes
 ...toggle-group-monochrome-variant-4-snap.png | Bin 0 -> 3013 bytes
 ...toggle-group-monochrome-variant-5-snap.png | Bin 0 -> 3030 bytes
 ...toggle-group-monochrome-variant-6-snap.png | Bin 0 -> 2977 bytes
 .../src/toggle-group.visual.spec.js           |  75 +++++++++---------
 15 files changed, 112 insertions(+), 83 deletions(-)
 create mode 100644 packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-1-snap.png
 create mode 100644 packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-2-snap.png
 create mode 100644 packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-3-snap.png
 create mode 100644 packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-4-snap.png
 create mode 100644 packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-5-snap.png
 create mode 100644 packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-6-snap.png

diff --git a/packages/components/src/components/toggle-button/__snapshots__/toggle-button.spec.ts.snap b/packages/components/src/components/toggle-button/__snapshots__/toggle-button.spec.ts.snap
index c59e995da1..8526047d94 100644
--- a/packages/components/src/components/toggle-button/__snapshots__/toggle-button.spec.ts.snap
+++ b/packages/components/src/components/toggle-button/__snapshots__/toggle-button.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Toggle Button snapshots black color scheme 1`] = `
 <scale-toggle-button color-scheme="black" icon-position="before" toggle-button-id="toggle-button-2">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--black toggle-button--border toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-2" part="toggle-button regular secondary toggle-button--icon-before black border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--black toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-2" part="toggle-button regular secondary toggle-button--icon-before black color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -14,7 +14,7 @@ exports[`Toggle Button snapshots black color scheme 1`] = `
 exports[`Toggle Button snapshots default props 1`] = `
 <scale-toggle-button icon-position="before" toggle-button-id="toggle-button-0">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-0" part="toggle-button regular secondary toggle-button--icon-before color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-0" part="toggle-button regular secondary toggle-button--icon-before color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -25,7 +25,7 @@ exports[`Toggle Button snapshots default props 1`] = `
 exports[`Toggle Button snapshots disabled 1`] = `
 <scale-toggle-button disabled="" icon-position="before" size="large" toggle-button-id="toggle-button-3">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--large toggle-button--secondary" disabled="" id="toggle-button-3" part="toggle-button large secondary toggle-button--icon-before color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--large toggle-button--secondary" disabled="" id="toggle-button-3" part="toggle-button large secondary toggle-button--icon-before color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -39,7 +39,7 @@ exports[`Toggle Button snapshots iconAfter 1`] = `
     <style>
       color:red
     </style>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-after toggle-button--left toggle-button--regular toggle-button--secondary" id="toggle-button-7" part="toggle-button regular secondary toggle-button--icon-after left color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-after toggle-button--left toggle-button--regular toggle-button--secondary" id="toggle-button-7" part="toggle-button regular secondary toggle-button--icon-after left color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -51,7 +51,7 @@ exports[`Toggle Button snapshots iconAfter 1`] = `
 exports[`Toggle Button snapshots iconBefore 1`] = `
 <scale-toggle-button icon-position="before" radius="right" toggle-button-id="toggle-button-6">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--right toggle-button--secondary" id="toggle-button-6" part="toggle-button regular secondary toggle-button--icon-before right color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--right toggle-button--secondary" id="toggle-button-6" part="toggle-button regular secondary toggle-button--icon-before right color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -63,7 +63,7 @@ exports[`Toggle Button snapshots iconBefore 1`] = `
 exports[`Toggle Button snapshots iconOnly 1`] = `
 <scale-toggle-button icon-position="after" radius="both" selected="" toggle-button-id="toggle-button-5">
   <mock:shadow-root>
-    <button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--both toggle-button--color toggle-button--icon-after toggle-button--regular toggle-button--secondary toggle-button--selected" id="toggle-button-5" part="toggle-button regular secondary toggle-button--icon-after selected both color border" type="button">
+    <button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--both toggle-button--color toggle-button--icon-after toggle-button--regular toggle-button--secondary toggle-button--selected" id="toggle-button-5" part="toggle-button regular secondary toggle-button--icon-after selected both color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -74,7 +74,7 @@ exports[`Toggle Button snapshots iconOnly 1`] = `
 exports[`Toggle Button snapshots regular size secondary 1`] = `
 <scale-toggle-button icon-position="before" size="regular" toggle-button-id="toggle-button-1" variant="secondary">
   <mock:shadow-root>
-    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-1" part="toggle-button regular secondary toggle-button--icon-before color border" type="button">
+    <button aria-description="deselected" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--regular toggle-button--secondary" id="toggle-button-1" part="toggle-button regular secondary toggle-button--icon-before color secondary border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -85,7 +85,7 @@ exports[`Toggle Button snapshots regular size secondary 1`] = `
 exports[`Toggle Button snapshots selected 1`] = `
 <scale-toggle-button icon-position="before" selected="" size="xs" toggle-button-id="toggle-button-4">
   <mock:shadow-root>
-    <button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--secondary toggle-button--selected toggle-button--xs" id="toggle-button-4" part="toggle-button xs secondary toggle-button--icon-before selected color border" type="button">
+    <button aria-description="selected" aria-pressed="" class="toggle-button toggle-button--border toggle-button--color toggle-button--icon-before toggle-button--secondary toggle-button--selected toggle-button--xs" id="toggle-button-4" part="toggle-button xs secondary toggle-button--icon-before selected color color border" type="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
diff --git a/packages/components/src/components/toggle-button/readme.md b/packages/components/src/components/toggle-button/readme.md
index 238bcde8b6..1b8a98899f 100644
--- a/packages/components/src/components/toggle-button/readme.md
+++ b/packages/components/src/components/toggle-button/readme.md
@@ -14,7 +14,7 @@
 | `ariaLangDeselected`         | `aria-lang-deselected`         | (optional) translation of 'deselected                                                                                                                  | `string`                                   | `'deselected'` |
 | `ariaLangSelected`           | `aria-lang-selected`           | (optional) translation of 'selected                                                                                                                    | `string`                                   | `'selected'`   |
 | `background`                 | `background`                   | (optional) Button background                                                                                                                           | `"grey" \| "white"`                        | `'white'`      |
-| `colorScheme`                | `color-scheme`                 | (optional) background color scheme of a selected button                                                                                                | `"color" \| "monochrome"`                  | `'color'`      |
+| `colorScheme`                | `color-scheme`                 | <span style="color:red">**[DEPRECATED]**</span> - variant should replace colorScheme<br/><br/>                                                         | `"color" \| "monochrome"`                  | `'color'`      |
 | `disabled`                   | `disabled`                     | (optional) If `true`, the button is disabled                                                                                                           | `boolean`                                  | `false`        |
 | `hideBorder`                 | `hide-border`                  | (optional) set the border-radius left, right or both                                                                                                   | `boolean`                                  | `undefined`    |
 | `iconOnly`                   | `icon-only`                    | (optional) Button type                                                                                                                                 | `boolean`                                  | `false`        |
@@ -25,6 +25,7 @@
 | `size`                       | `size`                         | (optional) The size of the button                                                                                                                      | `"large" \| "regular" \| "small" \| "xs"`  | `'regular'`    |
 | `styles`                     | `styles`                       | (optional) Injected CSS styles                                                                                                                         | `string`                                   | `undefined`    |
 | `toggleButtonId`             | `toggle-button-id`             | (optional) toggle button's id                                                                                                                          | `string`                                   | `undefined`    |
+| `variant`                    | `variant`                      | (optional) background variant of a selected toggle-button                                                                                              | `"color" \| "monochrome"`                  | `'color'`      |
 
 
 ## Events
diff --git a/packages/components/src/components/toggle-button/toggle-button.tsx b/packages/components/src/components/toggle-button/toggle-button.tsx
index 20105bb97a..99f7784f90 100644
--- a/packages/components/src/components/toggle-button/toggle-button.tsx
+++ b/packages/components/src/components/toggle-button/toggle-button.tsx
@@ -41,8 +41,10 @@ export class ToggleButton {
   @Prop() size?: 'large' | 'regular' | 'small' | 'xs' = 'regular';
   /** (optional) Button background */
   @Prop() background?: 'grey' | 'white' = 'white';
-  /** (optional) background color scheme of a selected button */
+  /** @deprecated - variant should replace colorScheme */
   @Prop() colorScheme?: 'monochrome' | 'color' = 'color';
+  /** (optional) background variant of a selected toggle-button */
+  @Prop() variant?: 'monochrome' | 'color' = 'color';
   /** (optional) If `true`, the button is disabled */
   @Prop() disabled?: boolean = false;
   /** (optional) If `true`, the button is selected */
@@ -212,6 +214,7 @@ export class ToggleButton {
       !this.disabled && this.selected && `${prefix}selected`,
       this.radius && `${prefix}${this.radius}`,
       this.colorScheme && `${prefix}${this.colorScheme}`,
+      this.variant && `${prefix}${this.variant}`,
       !this.hideBorder && `${prefix}border`
     );
   }
diff --git a/packages/components/src/components/toggle-group/__snapshots__/toggle-group.spec.ts.snap b/packages/components/src/components/toggle-group/__snapshots__/toggle-group.spec.ts.snap
index 19ccc6b393..8485956695 100644
--- a/packages/components/src/components/toggle-group/__snapshots__/toggle-group.spec.ts.snap
+++ b/packages/components/src/components/toggle-group/__snapshots__/toggle-group.spec.ts.snap
@@ -7,13 +7,13 @@ exports[`Toggle Group snapshots default props 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
 </scale-toggle-group>
@@ -26,13 +26,13 @@ exports[`Toggle Group snapshots disabled 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="1" radius="left" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="1" radius="left" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="2" radius="neither" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="2" radius="neither" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="3" radius="right" selected="" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="disabled" hide-border="false" position="3" radius="right" selected="" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
 </scale-toggle-group>
@@ -45,13 +45,13 @@ exports[`Toggle Group snapshots size small, multi false 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="small">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="small" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="small">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="small" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="small">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="small" variant="color">
     Click Me!
   </scale-toggle-button>
 </scale-toggle-group>
@@ -67,13 +67,13 @@ exports[`Toggle Group snapshots styles 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="1" radius="left" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="2" radius="neither" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
-  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="regular">
+  <scale-toggle-button aria-description-translation="$position $selected" background="white" color-scheme="color" disabled="false" hide-border="false" position="3" radius="right" selected="" size="regular" variant="color">
     Click Me!
   </scale-toggle-button>
 </scale-toggle-group>
diff --git a/packages/components/src/components/toggle-group/readme.md b/packages/components/src/components/toggle-group/readme.md
index 22ca7bf174..adce207d4e 100644
--- a/packages/components/src/components/toggle-group/readme.md
+++ b/packages/components/src/components/toggle-group/readme.md
@@ -7,17 +7,18 @@
 
 ## Properties
 
-| Property               | Attribute                | Description                                                  | Type                                      | Default                                              |
-| ---------------------- | ------------------------ | ------------------------------------------------------------ | ----------------------------------------- | ---------------------------------------------------- |
-| `ariaLabelTranslation` | `aria-label-translation` | (optional) aria-label attribute needed for icon-only buttons | `string`                                  | ``toggle button group with $slottedButtons buttons`` |
-| `background`           | `background`             | (optional) Button Group background                           | `"grey" \| "white"`                       | `'white'`                                            |
-| `colorScheme`          | `color-scheme`           | (optional) background color scheme of a selected button      | `"color" \| "monochrome"`                 | `'color'`                                            |
-| `disabled`             | `disabled`               | (optional) If `true`, the button is disabled                 | `boolean`                                 | `false`                                              |
-| `fullWidth`            | `full-width`             | (optional) 100% width                                        | `boolean`                                 | `false`                                              |
-| `hideBorder`           | `hide-border`            | (optional) If `true`, the group has a border                 | `boolean`                                 | `false`                                              |
-| `singleSelect`         | `single-select`          | (optional) more than one button selected possible            | `boolean`                                 | `false`                                              |
-| `size`                 | `size`                   | (optional) The size of the button                            | `"large" \| "regular" \| "small" \| "xs"` | `'regular'`                                          |
-| `styles`               | `styles`                 | (optional) Injected CSS styles                               | `string`                                  | `undefined`                                          |
+| Property               | Attribute                | Description                                                                                    | Type                                      | Default                                              |
+| ---------------------- | ------------------------ | ---------------------------------------------------------------------------------------------- | ----------------------------------------- | ---------------------------------------------------- |
+| `ariaLabelTranslation` | `aria-label-translation` | (optional) aria-label attribute needed for icon-only buttons                                   | `string`                                  | ``toggle button group with $slottedButtons buttons`` |
+| `background`           | `background`             | (optional) Button Group background                                                             | `"grey" \| "white"`                       | `'white'`                                            |
+| `colorScheme`          | `color-scheme`           | <span style="color:red">**[DEPRECATED]**</span> - variant should replace colorScheme<br/><br/> | `"color" \| "monochrome"`                 | `'color'`                                            |
+| `disabled`             | `disabled`               | (optional) If `true`, the button is disabled                                                   | `boolean`                                 | `false`                                              |
+| `fullWidth`            | `full-width`             | (optional) 100% width                                                                          | `boolean`                                 | `false`                                              |
+| `hideBorder`           | `hide-border`            | (optional) If `true`, the group has a border                                                   | `boolean`                                 | `false`                                              |
+| `singleSelect`         | `single-select`          | (optional) more than one button selected possible                                              | `boolean`                                 | `false`                                              |
+| `size`                 | `size`                   | (optional) The size of the button                                                              | `"large" \| "regular" \| "small" \| "xs"` | `'regular'`                                          |
+| `styles`               | `styles`                 | (optional) Injected CSS styles                                                                 | `string`                                  | `undefined`                                          |
+| `variant`              | `variant`                | (optional) background variant of a selected toggle-button                                      | `"color" \| "monochrome"`                 | `'color'`                                            |
 
 
 ## Events
diff --git a/packages/components/src/components/toggle-group/toggle-group.tsx b/packages/components/src/components/toggle-group/toggle-group.tsx
index cb15528b60..72c751939a 100644
--- a/packages/components/src/components/toggle-group/toggle-group.tsx
+++ b/packages/components/src/components/toggle-group/toggle-group.tsx
@@ -22,6 +22,7 @@ import {
 } from '@stencil/core';
 import classNames from 'classnames';
 import { emitEvent } from '../../utils/utils';
+import statusNote from '../../utils/status-note';
 
 interface ButtonStatus {
   id: string;
@@ -57,8 +58,10 @@ export class ToggleGroup {
   /** (optional) aria-label attribute needed for icon-only buttons */
   @Prop()
   ariaLabelTranslation = `toggle button group with $slottedButtons buttons`;
-  /** (optional) background color scheme of a selected button */
+  /** @deprecated - variant should replace colorScheme */
   @Prop() colorScheme?: 'monochrome' | 'color' = 'color';
+  /** (optional) background variant of a selected toggle-button */
+  @Prop() variant?: 'monochrome' | 'color' = 'color';
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
   /** Emitted when button is clicked */
@@ -108,7 +111,17 @@ export class ToggleGroup {
         'aria-description-translation',
         '$position $selected'
       );
-      toggleButton.setAttribute('color-scheme', this.colorScheme);
+      /** DEPRECATED */
+      // if attribute variant is set it overrides color-scheme
+      toggleButton.setAttribute(
+        'color-scheme',
+        this.variant !== 'color' ? this.variant : this.colorScheme
+      );
+      // if attribute color-scheme is set it overrides variant
+      toggleButton.setAttribute(
+        'variant',
+        this.colorScheme !== 'color' ? this.colorScheme : this.variant
+      );
       toggleButton.setAttribute(
         'hide-border',
         this.hideBorder ? 'true' : 'false'
@@ -131,6 +144,16 @@ export class ToggleGroup {
       this.setButtonWidth();
     }
     this.setChildrenCorners();
+
+    if (this.colorScheme !== 'color') {
+      statusNote({
+        tag: 'deprecated',
+        message:
+          'Property "colorScheme" is deprecated. Please use the "variant" property!',
+        type: 'warn',
+        source: this.hostElement,
+      });
+    }
   }
 
   setNewState(tempState: ButtonStatus[]) {
diff --git a/packages/storybook-vue/stories/3_components/toggle-group/ScaleToggleGroup.vue b/packages/storybook-vue/stories/3_components/toggle-group/ScaleToggleGroup.vue
index 8839502d90..aaf3267347 100644
--- a/packages/storybook-vue/stories/3_components/toggle-group/ScaleToggleGroup.vue
+++ b/packages/storybook-vue/stories/3_components/toggle-group/ScaleToggleGroup.vue
@@ -7,7 +7,7 @@
     :hide-border="hideBorder"
     :single-select="singleSelect"
     :aria-label-translation="ariaLabelTranslation"
-    :color-scheme="colorScheme"
+    :variant="variant"
     :styles="styles"
     @scaleChange="scaleChange"
   >
@@ -28,7 +28,7 @@ export default {
     singleSelect: { type: Boolean, default: false },
     ariaLabel: { type: String },
     ariaLabelTranslation: { type: String, default: 'toggle button group with $slottedButtons buttons' },
-    colorScheme: { type: String, default: 'color' },
+    variant: { type: String, default: 'color' },
     styles: { type: String },
   },
   methods: {
diff --git a/packages/storybook-vue/stories/3_components/toggle-group/ToggleGroup.stories.mdx b/packages/storybook-vue/stories/3_components/toggle-group/ToggleGroup.stories.mdx
index 6e81703f56..3c419b425d 100644
--- a/packages/storybook-vue/stories/3_components/toggle-group/ToggleGroup.stories.mdx
+++ b/packages/storybook-vue/stories/3_components/toggle-group/ToggleGroup.stories.mdx
@@ -18,6 +18,9 @@ import ScaleToggleGroup from './ScaleToggleGroup.vue';
       control: { type: "text", },
     },
     colorScheme: {
+      description: `Deprecated; variant should replace colorScheme`,
+    },
+    variant: {
       control: { type: 'select', options: ['color', 'monochrome'] },
     },
   }}
@@ -39,7 +42,7 @@ export const Template = (args, { argTypes }) => ({
       :hide-border="hideBorder"
       :single-select="singleSelect"
       :aria-label-translation="ariaLabelTranslation"
-      :color-scheme="colorScheme"
+      :variant="variant"
       :styles="styles"
     >
       <scale-toggle-button>Label</scale-toggle-button>
@@ -65,7 +68,7 @@ export const TemplateAriaTranslation = (args, { argTypes }) => ({
       :hide-border="hideBorder"
       :single-select="singleSelect"
       :aria-label-translation="ariaLabelTranslation"
-      :color-scheme="colorScheme"
+      :variant="variant"
       :styles="styles"
     >
       <scale-toggle-button 
@@ -105,7 +108,7 @@ export const TemplateIcons = (args, { argTypes }) => ({
       :hide-border="hideBorder"
       :single-select="singleSelect"
       :aria-label-translation="ariaLabelTranslation"
-      :color-scheme="colorScheme"
+      :variant="variant"
       :styles="styles"
     >
       <scale-toggle-button v-if="iconBefore">
@@ -156,13 +159,13 @@ export const TemplateIcons = (args, { argTypes }) => ({
 </scale-toggle-group>
 ```
 
-## Monochrome Color Scheme
+## Monochrome Variant
 
 <Canvas withSource="none">
   <Story
-    name="Monochrome Color Scheme"
+    name="Monochrome Variant"
     args={{
-      colorScheme: 'monochrome'
+      variant: 'monochrome'
     }}
   >
     {Template.bind({})}
@@ -170,7 +173,8 @@ export const TemplateIcons = (args, { argTypes }) => ({
 </Canvas>
 
 ```html
-<scale-toggle-group color-scheme="monochrome">
+<!-- Deprecated: <scale-toggle-group color-scheme="monochrome"> -->
+<scale-toggle-group variant="monochrome">
   <scale-toggle-button>Label</scale-toggle-button>
   <scale-toggle-button>Label</scale-toggle-button>
   <scale-toggle-button selected>Label</scale-toggle-button>
diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-1-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac757c902462a490929bc25e038d922086a3ab08
GIT binary patch
literal 2332
zcmb_dX;f2b5`Bn@dZcOFg+qhlbVG}_f)GH$VpP-^AV>>{fH54FgndT{5JC^OxOC$X
z42zL~qk#@W5Kxd{09zacLV`pfEFp*_EFpwV)&TQ8&&)Y<=EwZ$$&ad+SMPmQ@7}sq
zw_TjknmfMT0YQ)^=EB)a5VRRwLKn7e1vbz#Jrg*!m`mt05Sy<z4nf<xF=tP^B|KD!
z@qt~R^_ypU&cF1;V(3H98-g`AZ{KUC=W6i!po96D3(o?#zWDm_A7+~@TrNB|cXV+v
zDZ1fteV5K1k;DBnW=`)=6{V5e9sH<PhXu-Ev^u3lpwE~Kp-Y-SP3fJKm?)LRNnb%s
zy~Lg7zyxJMsk&Zqcr9=NsW!I5&IQ^8yFIC}g|-}o?J2cwu={hNMl8*$WlCIEm9n;?
zXLJ3iSS+Sl8Fn-WhlIo^xr>Ars$m{7hJe4P4ng->C2mJ(t;pBK1t|}*v$IQab(X>+
ztRtCBW)jjW&CSi{KW{s6gC0?jR5om+93YKk)*sjcK}PnyYD4eQ`dCLtM}mNXW91co
zw>h=dh~`kcvA$XrA*uiOV*<!3YWOUHm;2Lg&(xIPOG=IuJLgZxO#vciwEYmj09Ei8
z`<rgQ`w9yt#>dCyyWqgG$)ABi{Rhb0(z2+cVuq7ZR#w*jiZsWTi|%Th6oKr=jvecX
zOQ!gn{8-H8+9?!@p14pn8f_UWio`W{fA}ymKQ8pFBDBZt2W0ILq<-P5@$+uDph778
z78E(w@yOi5LYnOz-jZwTH~TSN|5}__H{w+$hr{_*4`~+C!&Z<tczFoY@a;p<^0FGj
z()35t$6vIgKmPFxC0Ld6_S$9sjqSTDV@CO^={H))$e~mFj$VoEiYw<XcsW0`%6yZq
zg^x;VQq)KoSh}Tjq$LZPI3IYq%!~FqO=H9L6CmzHu9`lyu9_3rE{Ob)DXN5h##eJQ
zzeg9ncww=+ps4c|^Yd-0Kq*JBzC50$p~WA5dpAibW}ql33sYh`v4Cs|(znan>B7Fg
zKJ6S~@nnG1&BKEz?=I6p5S+lxXc;fB)a%6&ExY-Sy>deP1KPN-nAl$(R+}*6d%5&V
zriOm<aZDxXGN*iNi~gDj!J&d=Drrs@AZ?|QqmU5Ps5w+rf1vQHw(-?>v(h$1)Nqs2
zLn~9FfPn=KwlLY71x{RK>srSKE+{1hAm{VyYFYj2RNFs((?ujNO;7e#9dgVuZU<my
z8Gt_Stq$`(xipmK=ApH8eil`gLqjA?50!dW{eaHUYXP5c7Aks{yeN(j3J>T1tgeyR
zlaHdDyoXv(NK8zu3~0-qlr*5`Mg@Y1hP7;&Ojhb$V_ZO4CsCiU*~T$4UP~v_F=lyI
zTF)_uAfME4r_~BU072lrOHy)kMj1)Q4eKi*)F)4$%J0Ov7CB+U!osNjyj)WqyTn*$
zhHV}Y$w^FQw6wK>%<1dx&HL%``89Qq_b5?Y>+;&7WKNocCx9;S<R->V$mLlE_BVId
z`idXfr*{g4Sq8|s2{&sSn;3!JqW`3*0z*A_cVEE!zn}BaL-;n`8Z6KRkZuGwYNYb{
ze5VKIhvNsL&<v6+Z>O&1(Tk|Hc}cgsyZc(tT=L9Y?V#Y`mHt(2lWV1-(zSeU>BC*$
zpC73boNNP-&jIB!;cp-ss+ev^z#BY<oeiG+xl1xw&SJ4drC=19?p#v(D+jqYI2^9`
zWt88w#Bt`Yx+kVe<X;`I6|G|A0M=Z5%Cezfa|YJW&reBOHzUoCfRV9hDx`a%GWr3X
zj))!Wc(pR|wD)<CtF^T?n-kvo1fydf=tA|MAA7HZjP?h2qi0822Io`(J#5^vj2^+(
z@c~j}6HbxUhXDVc)uEnBIcN<hhAk3PnJ_a9cN@T+RZ`MA$W4j?;<BA?ROdEZT39e^
zYmqkbQ#@%~j<B<nI`gS{6v&g`O8Zd=$UqSJBOQ<INvnz)R~#<?blTQ{j>6NuRm6+c
z;o`)ui%lBeC3zy>+|+DqGiexD<rEhmlBBExg5TcRySySVN5oGJ+;?CC@dv1uW?)Gw
zEA%O<D1b*U7#U0s#~M}v$SNEhWWd}t-P*+}FBbr@&vtu90H~#)!D?g2F9B@kMzSsv
znltv3qZNSGM$^JgjkPhOmC4JqgFW`?Utv8wJiNTUh27oR85tR`05Z$t#RZi?!Xgz=
zJ(u#__{y_`qx}3fAYoTm*R1$KQt{&J>j0Rbu(0+8ML)v--QSMl>ut+l%{ovisCM#r
zClgeO?d$K4$VGW60;DP;G&VKm47jTf?WKa`GQN$HSEsC}gSM5jiWv^}_Vy8wsKO5&
zUZ<$$(NCD<7~@)jjuQ31SsK1;Lg*@S2dFy3L%i#$2N6JrStrXIIdSq?P$aSS{$Y5>
zMPl8VA>td!n&5{duf#HCKi>%o3>=g13O7m-s6jqHy3+#i9AF&_+tf{8!>$nevdfJi
zHTd6-Q?UJ?AtM{;Lsu8GuCDHzDrn6Oi^byafp_k+CZXfu11~4Vbv1Cnh2_?Yix+qG
z_<>*mhc&PpOr0Vo(~zQ?K^I}^*()n64!kY%yDcm%JS+V%_<Nv$e=SP8|5&U%1r(X~
zJJ>Jccu9T_o?-|3Yf>HsiZpXKfQyCJ=o?>l{Qq&er+zv3zYg5k<oMe$TrA6H2##XT
MIiF>p@%igN0d&_j`v3p{

literal 0
HcmV?d00001

diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-2-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-2-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..facb63642cf5317c46623b011def991ba8fc66e9
GIT binary patch
literal 2397
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
Zs@A@4>kA0YKMUY(aL4eD{G;A~{u`!lM>_xj

literal 0
HcmV?d00001

diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-3-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-3-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..98690515d69f1187d47fcbf2b527081ac1ae97b4
GIT binary patch
literal 2961
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
E8}`-%v;Y7A

literal 0
HcmV?d00001

diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-4-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-4-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..098c5c985688bc3ecfb572284af7ad91170e1971
GIT binary patch
literal 3013
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
H=o0l0MKBTH

literal 0
HcmV?d00001

diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-5-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-5-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..602fbfd17deed37947e87a6f853cd40b526688da
GIT binary patch
literal 3030
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
OLYkNwmtS`N+us3p-XEd>

literal 0
HcmV?d00001

diff --git a/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-6-snap.png b/packages/visual-tests/src/__image_snapshots__/toggle-group-visual-spec-js-toggle-group-monochrome-variant-6-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd28688c90d6d7d94f45f506751356eaa103afca
GIT binary patch
literal 2977
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
B43q!>

literal 0
HcmV?d00001

diff --git a/packages/visual-tests/src/toggle-group.visual.spec.js b/packages/visual-tests/src/toggle-group.visual.spec.js
index cdaf8a608b..1d0ce368a3 100644
--- a/packages/visual-tests/src/toggle-group.visual.spec.js
+++ b/packages/visual-tests/src/toggle-group.visual.spec.js
@@ -1,7 +1,7 @@
 describe('ToggleGroup', () => {
   test.each([
     ['standard'],
-    ['monochrome-color-scheme'],
+    ['monochrome-variant'],
     ['grey-background'],
     ['no-border'],
     ['small-size'],
@@ -22,47 +22,44 @@ describe('ToggleGroup', () => {
     expect(await previewHtml.screenshot()).toMatchImageSnapshot();
   });
   // hover, active, focus
-  test.each([['standard'], ['monochrome-color-scheme']])(
-    '%p',
-    async (variant) => {
-      await global.page.goto(
-        `http://host.docker.internal:3123/iframe.html?id=beta-components-toggle-group--${variant}&viewMode=story`
-      );
+  test.each([['standard'], ['monochrome-variant']])('%p', async (variant) => {
+    await global.page.goto(
+      `http://host.docker.internal:3123/iframe.html?id=beta-components-toggle-group--${variant}&viewMode=story`
+    );
 
-      await page.waitForSelector('html.hydrated');
-      const previewHtml = await page.$('body');
+    await page.waitForSelector('html.hydrated');
+    const previewHtml = await page.$('body');
 
-      await page.evaluate(() => {
-        const transitions = [
-          '--scl-motion-duration-immediate',
-          '--scl-motion-duration-fast',
-          '--scl-motion-duration-slower',
-          '--scl-motion-duration-deliberate',
-        ];
+    await page.evaluate(() => {
+      const transitions = [
+        '--scl-motion-duration-immediate',
+        '--scl-motion-duration-fast',
+        '--scl-motion-duration-slower',
+        '--scl-motion-duration-deliberate',
+      ];
 
-        transitions.forEach((transitionSpeed) => {
-          document.body.style.setProperty(transitionSpeed, '0s');
-        });
+      transitions.forEach((transitionSpeed) => {
+        document.body.style.setProperty(transitionSpeed, '0s');
       });
+    });
 
-      const buttonOne = await page.evaluateHandle(
-        `document.querySelector("#root scale-toggle-group > scale-toggle-button[radius='left']").shadowRoot.querySelector("button")`
-      );
-      const buttonThree = await page.evaluateHandle(
-        `document.querySelector("#root scale-toggle-group > scale-toggle-button[radius='right']").shadowRoot.querySelector("button")`
-      );
-      buttonThree.hover();
-      expect(await previewHtml.screenshot()).toMatchImageSnapshot();
-      buttonOne.hover();
-      expect(await previewHtml.screenshot()).toMatchImageSnapshot();
-      buttonOne.focus();
-      expect(await previewHtml.screenshot()).toMatchImageSnapshot();
-      await page.mouse.move(30, 30);
-      await page.mouse.down();
-      expect(await previewHtml.screenshot()).toMatchImageSnapshot();
-      await page.mouse.up();
-      await page.mouse.down();
-      expect(await previewHtml.screenshot()).toMatchImageSnapshot();
-    }
-  );
+    const buttonOne = await page.evaluateHandle(
+      `document.querySelector("#root scale-toggle-group > scale-toggle-button[radius='left']").shadowRoot.querySelector("button")`
+    );
+    const buttonThree = await page.evaluateHandle(
+      `document.querySelector("#root scale-toggle-group > scale-toggle-button[radius='right']").shadowRoot.querySelector("button")`
+    );
+    buttonThree.hover();
+    expect(await previewHtml.screenshot()).toMatchImageSnapshot();
+    buttonOne.hover();
+    expect(await previewHtml.screenshot()).toMatchImageSnapshot();
+    buttonOne.focus();
+    expect(await previewHtml.screenshot()).toMatchImageSnapshot();
+    await page.mouse.move(30, 30);
+    await page.mouse.down();
+    expect(await previewHtml.screenshot()).toMatchImageSnapshot();
+    await page.mouse.up();
+    await page.mouse.down();
+    expect(await previewHtml.screenshot()).toMatchImageSnapshot();
+  });
 });