refactor(switch): new theme

packages/components/src/components/data-grid/readme.md

@@ -85,6 +85,7 @@ graph TD;
   scale-checkbox --> scale-icon-action-success
   scale-checkbox --> scale-icon-alert-information
   scale-checkbox --> scale-icon-alert-error
+  scale-switch --> scale-icon-action-success
   scale-progress-bar --> scale-icon-alert-error
   scale-progress-bar --> scale-icon-alert-success
   scale-text-field --> scale-helper-text

packages/components/src/components/switch/__snapshots__/switch.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Switch should match snapshot 1`] = `
 <scale-switch>
-  <div class="switch switch--focus-visible-not-supported">
+  <div class="switch switch--focus-visible-not-supported switch--size-large">
     <label class="switch__wrapper" id="switch-0-label">
       <input aria-labelledby="switch-0-label" class="switch__control" id="switch-0" type="checkbox">
       <div aria-hidden="true" class="switch__toggle">

packages/components/src/components/switch/readme.md

@@ -14,6 +14,7 @@
 | `inputId`  | `input-id` | (optional) Input id            | `string`  | `undefined` |
 | `label`    | `label`    | (optional) switch label        | `string`  | `undefined` |
 | `name`     | `name`     | (optional) Input name          | `string`  | `undefined` |
+| `size`     | `size`     |                                | `string`  | `'large'`   |
 | `styles`   | `styles`   | (optional) Injected CSS styles | `string`  | `undefined` |
 
 

packages/components/src/components/switch/switch.css

@@ -16,7 +16,8 @@ scale-switch {
   --radius: 1em;
   --transition-duration: var(--telekom-motion-duration-immediate);
   --transition-easing: var(--telekom-motion-easing-standard);
-  --shadow-thumb: var(--telekom-shadow-raised-standard);
+  --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),
+    0 4px 12px 0 rgba(0, 0, 0, 0.26);
   --spacing-x-label: var(--telekom-spacing-unit-x2);
   --font-label: var(--telekom-text-style-ui);
   --font-io-text: var(--telekom-text-style-small-bold);
@@ -61,30 +62,85 @@ scale-switch {
 .switch:hover {
   --_background: var(--telekom-color-ui-regular);
 }
+
 .switch:active {
   --_background: var(--telekom-color-ui-strong);
 }
 
 .switch--checked {
   --_background: var(--telekom-color-primary-standard);
 }
+
+[data-platform='android'] .switch .switch--checked {
+  --_background: var(--telekom-color-primary-standard);
+}
+
+[data-platform='android'] .switch {
+  --_color-thumb: var(--telekom-color-ui-strong);
+}
+
+[data-platform='android'] .switch:hover {
+  --_background: var(--telekom-color-ui-faint);
+}
+
+[data-platform='android'] .switch:active {
+  --_background: var(--telekom-color-ui-faint);
+}
+
+[data-platform='android'] .switch:hover {
+  --_color-thumb: var(--telekom-color-ui-extra-strong);
+}
+[data-platform='android'] .switch:active {
+  --_color-thumb: var(--telekom-color-ui-extra-strong);
+}
+[data-platform='android'] .switch--checked:hover {
+  --_color-thumb: var(--telekom-color-ui-white);
+}
+
+[data-platform='android'] .switch--checked:hover,
 .switch--checked:hover {
   --_background: var(--telekom-color-primary-hovered);
 }
-.switch--checked.switch__control {
+
+[data-platform='android'] .switch--checked:active,
+.switch--checked:active {
   --_background: var(--telekom-color-primary-pressed);
 }
 
+[data-platform='android'] .switch--disabled {
+  --_background: var(--telekom-color-ui-faint);
+}
+[data-platform='android'] .switch--disabled:hover {
+  --_color-thumb: var(--telekom-color-ui-strong);
+  --_background: var(--telekom-color-ui-faint);
+}
+
 .switch--disabled,
 .switch--disabled:hover,
 .switch--disabled:active {
   --_background: var(--telekom-color-ui-disabled);
-  --_color: var(--telekom-color-ui-faint);
+  --_color-thumb: var(--telekom-color-ui-faint);
+}
+
+.switch--checked .switch--disabled,
+.switch--checked .switch--disabled:hover,
+.switch--checked .switch--disabled:active {
+  --_background: var(--telekom-color-ui-faint);
+  --_color-thumb: var(--telekom-color-ui-disabled);
+  box-shadow: var(--telekom-shadow-raised-standard);
 }
 
 .switch--disabled .switch__wrapper {
   cursor: not-allowed;
 }
+.switch--disabled .switch__thumb {
+  box-shadow: var(--telekom-shadow-raised-standard);
+}
+
+.switch--size-large {
+  --width: 56px;
+  --height: 32px;
+}
 
 /*
   I think there's a selector combination that could
@@ -111,7 +167,7 @@ scale-switch {
   border-radius: 50%;
   box-shadow: var(--shadow-thumb);
   margin: var(--offset);
-  transition-property: margin;
+  transition-property: margin, width, height, background, color;
   transition-duration: var(--transition-duration);
   transition-timing-function: var(--transition-easing);
   color: transparent;
@@ -151,33 +207,62 @@ scale-switch {
   margin-inline-start: var(--spacing-x-label);
 }
 
-/* PLATFORM iOS */
+/* PLATFORM Android */
 
-[data-platform='ios'] scale-switch {
+[data-platform='android'] scale-switch {
   --width: 56px;
   --height: 32px;
+  --offset: 7px;
 }
 
-/* PLATFORM Android */
+[data-platform='android'] .switch__thumb {
+  width: 18px;
+  height: 18px;
+}
 
-[data-platform='android'] scale-switch {
-  --width: 56px;
-  --height: 32px;
+[data-platform='android'] scale-switch:not([disabled]):active .switch__thumb {
+  width: 28px;
+  height: 28px;
+  --offset: 2px;
+}
+[data-platform='android'] .switch--checked .switch__thumb {
+  width: 24px;
+  height: 24px;
   --offset: 4px;
 }
 
 [data-platform='android'] .switch__thumb {
-  /* FIXME no color token for this :( */
-  box-shadow: 0 0 0 var(--telekom-spacing-unit-x025) rgba(0, 0, 0, 0.05);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+[data-platform='android'] .switch--checked .switch__thumb {
+  background: var(--telekom-color-ui-white);
+}
+
+scale-switch scale-icon-action-success {
+  display: none !important;
+}
+
+[data-platform='android'] scale-icon-action-success {
+  position: absolute;
+  display: inline-block !important;
+  margin-top: 2px;
+}
+
 [data-platform='android'] .switch--checked .switch__thumb {
   color: var(--_background);
 }
 
 [data-platform='android'] .switch__io-text {
   display: none;
 }
+
+[data-platform='android'] .switch--checked .switch__thumb {
+  color: var(--telekom-color-primary-standard);
+}
+
+[data-platform='android'] .switch--disabled .switch__thumb {
+  color: var(--telekom-color-ui-strong);
+}

packages/components/src/components/switch/switch.tsx

@@ -38,6 +38,8 @@ export class Switch {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
+  @Prop() size?: string = 'large';
+
   /** Emitted when the switch was clicked */
   @Event({ eventName: 'scale-change' }) scaleChange!: EventEmitter;
   /** @deprecated in v3 in favor of kebab-case event names */
@@ -88,6 +90,7 @@ export class Switch {
       'switch',
       this.checked && 'switch--checked',
       this.disabled && 'switch--disabled',
+      this.size && `switch--size-${this.size}`,
       isFocusVisibleSupported && 'switch--focus-visible-supported',
       !isFocusVisibleSupported && 'switch--focus-visible-not-supported'
     );

packages/components/src/html/index.html

@@ -26,12 +26,11 @@
   <body>
     <h1 class="scl-font-variant-body">index.html</h1>
 
-    <p class="scl-font-variant-heading-1">
-      Please keep this file empty. If you need to develop or prototype
-      something, duplicate this file.
-    </p>
-    <p class="scl-font-variant-body-short">
-      <mark>Avoid commiting your new file if you think it's not worth it.</mark>
-    </p>
+    <scale-switch label="hello"></scale-switch>
+    <scale-switch size="large" label="hello"></scale-switch>
+    <div data-platform="android">
+      <scale-switch label="hello"></scale-switch>
+      <scale-switch size="large" label="hello"></scale-switch>
+    </div>
   </body>
 </html>

packages/storybook-vue/stories/components/switch/ScaleSwitch.vue

@@ -5,6 +5,7 @@
     :disabled="disabled"
     :input-id="inputId"
     :checked="checked"
+    :size="size"
     @scaleChange="scaleChange"
     style="--color-on: blue"
   >
@@ -20,6 +21,7 @@ export default {
     inputId: { type: String },
     checked: { type: Boolean, default: false },
     label: String,
+    size: String,
     name: String,
   },
   methods: {