@salutejs/plasma-new-hope 0.131.1-canary.1396.10560424945.0 → 0.132.0-canary.1368.10558535646.0

package/styled-components/cjs/examples/themes/sds_engineer.module.css

@@ -0,0 +1,373 @@
+/* Generated by robots, do not change this manually! */
+
+.dark {
+  --overlay-soft: rgba(0, 0, 0, 0.56);
+  --overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-dark-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-dark-overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-light-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-light-overlay-hard: rgba(0, 0, 0, 0.9);
+  --inverse-overlay-soft: rgba(0, 0, 0, 0.56);
+  --inverse-overlay-hard: rgba(0, 0, 0, 0.9);
+  --text-primary: rgba(245, 245, 245, 0.96);
+  --text-secondary: rgba(245, 245, 245, 0.56);
+  --text-tertiary: rgba(245, 245, 245, 0.4);
+  --text-paragraph: rgba(245, 245, 245, 0.8);
+  --text-accent: #FFFFFF;
+  --text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --text-positive: #1A9E32;
+  --text-warning: #FA5F05;
+  --text-negative: #FF293E;
+  --on-dark-text-primary: rgba(245, 245, 245, 0.96);
+  --on-dark-text-secondary: rgba(245, 245, 245, 0.56);
+  --on-dark-text-tertiary: rgba(245, 245, 245, 0.4);
+  --on-dark-text-paragraph: rgba(245, 245, 245, 0.8);
+  --on-dark-text-accent: #FFFFFF;
+  --on-dark-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-text-positive: #1A9E32;
+  --on-dark-text-warning: #FA5F05;
+  --on-dark-text-negative: #FF293E;
+  --on-light-text-primary: rgba(8, 8, 8, 0.96);
+  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
+  --on-light-text-tertiary: rgba(8, 8, 8, 0.4);
+  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
+  --on-light-text-accent: #FFFFFF;
+  --on-light-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-text-positive: #108E25;
+  --on-light-text-warning: #E85702;
+  --on-light-text-negative: #F31B30;
+  --inverse-text-primary: rgba(8, 8, 8, 0.96);
+  --inverse-text-secondary: rgba(8, 8, 8, 0.56);
+  --inverse-text-tertiary: rgba(8, 8, 8, 0.4);
+  --inverse-text-paragraph: rgba(8, 8, 8, 0.8);
+  --inverse-text-accent: #FFFFFF;
+  --inverse-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --inverse-text-positive: #108E25;
+  --inverse-text-warning: #E85702;
+  --inverse-text-negative: #F31B30;
+  --surface-solid-default: #FFFFFF;
+  --surface-solid-primary: #171717;
+  --surface-solid-secondary: #262626;
+  --surface-solid-tertiary: #363636;
+  --surface-solid-card: #171717;
+  --surface-transparent-default: #FFFFFF;
+  --surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --surface-accent: #FFFFFF;
+  /* добавлены вручную */
+  --surface-accent-hover: #1383cf80;
+  /* добавлены вручную */
+  --surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --surface-positive: #1A9E32;
+  --surface-warning: #FA5F05;
+  --surface-negative: #FF293E;
+  /* добавлены вручную */
+  --surface-transparent-negative: #e3122712;
+  --surface-clear: rgba(0, 0, 0, 0);
+  --on-dark-surface-solid-default: #FFFFFF;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #171717;
+  --on-dark-surface-transparent-default: #FFFFFF;
+  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-accent: #FFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-surface-positive: #1A9E32;
+  --on-dark-surface-warning: #FA5F05;
+  --on-dark-surface-negative: #FF293E;
+  --on-dark-surface-clear: rgba(0, 0, 0, 0);
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #ECECEC;
+  --on-light-surface-solid-tertiary: #DDDDDD;
+  --on-light-surface-solid-card: #F7F7F7;
+  --on-light-surface-transparent-default: #080808;
+  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --on-light-surface-accent: #FFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-surface-positive: #108E25;
+  --on-light-surface-warning: #E85702;
+  --on-light-surface-negative: #F31B30;
+  --on-light-surface-clear: rgba(0, 0, 0, 0);
+  --inverse-surface-solid-default: #080808;
+  --inverse-surface-solid-primary: #F5F5F5;
+  --inverse-surface-solid-secondary: #ECECEC;
+  --inverse-surface-solid-tertiary: #DDDDDD;
+  --inverse-surface-solid-card: #F7F7F7;
+  --inverse-surface-transparent-default: #080808;
+  --inverse-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --inverse-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --inverse-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --inverse-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --inverse-surface-accent: #FFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --inverse-surface-positive: #108E25;
+  --inverse-surface-warning: #E85702;
+  --inverse-surface-negative: #F31B30;
+  --inverse-surface-clear: rgba(0, 0, 0, 0);
+  --background-primary: #000000;
+  --background-secondary: #080808;
+  --background-tertiary: #171717;
+  --dark-background-primary: #000000;
+  --dark-background-secondary: #080808;
+  --dark-background-tertiary: #171717;
+  --light-background-primary: #FFFFFF;
+  --light-background-secondary: #FFFFFF;
+  --light-background-tertiary: #FFFFFF;
+  --inverse-background-primary: #FFFFFF;
+  --inverse-background-secondary: #FFFFFF;
+  --inverse-background-tertiary: #FFFFFF;
+  --text-primary-hover:  #17171793;
+  --text-primary-active:  #171717C4;
+  --surface-solid-default-hover:  #0D0D0DFF;
+  --surface-solid-default-active:  #030303FF;
+  --surface-accent-hover:  #0C8ADFFF;
+  --surface-accent-active:  #0A78C2FF;
+  --surface-positive-hover:  #1DAF37FF;
+  --surface-positive-active:  #18952FFF;
+  --surface-warning-hover:  #FB7223FF;
+  --surface-warning-active:  #F05B05FF;
+  --surface-negative-hover:  #EA1A2FFF;
+  --surface-negative-active:  #D21427FF;
+  --surface-transparent-secondary-hover:  #0808081F;
+  --surface-transparent-secondary-active:  #0808080A;
+  --on-light-surface-solid-default-hover:  #0D0D0DFF;
+  --on-light-surface-solid-default-active:  #030303FF;
+  --on-dark-surface-solid-default-hover:  #FFFFFFFF;
+  --on-dark-surface-solid-default-active:  #FFFFFFFF;
+  --on-light-surface-transparent-deep-hover: #080808C2;
+  --on-light-surface-transparent-deep-active: #08080894;
+  --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
+  --surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
+  --surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+  --plasma-colors-white-primary: var(--on-dark-text-primary);
+  --plasma-colors-white-secondary: var(--on-dark-text-secondary);
+  --plasma-colors-white-tertiary: var(--on-dark-text-tertiary);
+  --plasma-colors-black-primary: var(--on-light-text-primary);
+  --plasma-colors-black-secondary: var(--on-light-text-secondary);
+  --plasma-colors-black-tertiary: var(--on-light-text-tertiary);
+  --plasma-colors-button-black: var(--on-light-surface-solid-default);
+  --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary);
+  --plasma-colors-button-white: var(--on-dark-surface-solid-default);
+  --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary);
+  --plasma-colors-text: var(--text-primary);
+  --plasma-colors-primary: var(--text-primary);
+  --plasma-colors-secondary: var(--text-secondary);
+  --plasma-colors-tertiary: var(--text-tertiary);
+  --plasma-colors-paragraph: var(--text-paragraph);
+  --plasma-colors-background: var(--background-primary);
+  --plasma-colors-accent: var(--text-accent);
+  --plasma-colors-success: var(--text-positive);
+  --plasma-colors-warning: var(--text-warning);
+  --plasma-colors-critical: var(--text-negative);
+  --plasma-colors-overlay: var(--overlay-soft);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  --plasma-colors-surface-liquid02: var(--surface-transparent-secondary);
+  --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary);
+  --plasma-colors-surface-solid01: var(--surface-solid-primary);
+  --plasma-colors-surface-solid02: var(--surface-solid-secondary);
+  --plasma-colors-surface-solid03: var(--surface-solid-tertiary);
+  --plasma-colors-surface-card: var(--surface-transparent-card);
+  --plasma-colors-button-secondary: var(--surface-transparent-secondary);
+  --plasma-colors-button-accent: var(--text-accent);
+  --plasma-colors-button-success: var(--surface-positive);
+  --plasma-colors-button-warning: var(--surface-warning);
+  --plasma-colors-button-critical: var(--surface-negative);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}
+
+.light {
+  --overlay-soft: rgba(0, 0, 0, 0.56);
+  --overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-dark-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-dark-overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-light-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-light-overlay-hard: rgba(0, 0, 0, 0.9);
+  --inverse-overlay-soft: rgba(0, 0, 0, 0.56);
+  --inverse-overlay-hard: rgba(0, 0, 0, 0.9);
+  --text-primary: rgba(23, 23, 23, 0.96);
+  --text-secondary: rgba(23, 23, 23, 0.56);
+  --text-tertiary: rgba(23, 23, 23, 0.4);
+  --text-paragraph: rgba(23, 23, 23, 0.8);
+  --text-accent: #0C72B6;
+  --text-accent-gradient: linear-gradient(45.00deg, rgb(30, 44, 108) 0%,rgb(43, 101, 185) 100%);
+  --text-positive: #108E25;
+  --text-warning: #E85702;
+  --text-negative: #F31B31;
+  --on-dark-text-primary: rgba(245, 245, 245, 0.96);
+  --on-dark-text-secondary: rgba(245, 245, 245, 0.56);
+  --on-dark-text-tertiary: rgba(245, 245, 245, 0.4);
+  --on-dark-text-paragraph: rgba(245, 245, 245, 0.8);
+  --on-dark-text-accent: #FFFFFF;
+  --on-dark-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-text-positive: #1A9E32;
+  --on-dark-text-warning: #FA5F05;
+  --on-dark-text-negative: #FF293E;
+  --on-light-text-primary: rgba(8, 8, 8, 0.96);
+  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
+  --on-light-text-tertiary: rgba(8, 8, 8, 0.4);
+  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
+  --on-light-text-accent: #FFFFFF;
+  --on-light-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-text-positive: #108E25;
+  --on-light-text-warning: #E85702;
+  --on-light-text-negative: #F31B30;
+  --inverse-text-primary: rgba(245, 245, 245, 0.96);
+  --inverse-text-secondary: rgba(245, 245, 245, 0.56);
+  --inverse-text-tertiary: rgba(245, 245, 245, 0.4);
+  --inverse-text-paragraph: rgba(245, 245, 245, 0.8);
+  --inverse-text-accent: #FFFFFF;
+  --inverse-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --inverse-text-positive: #1A9E32;
+  --inverse-text-warning: #FA5F05;
+  --inverse-text-negative: #FF293E;
+  --surface-solid-default: #080808;
+  --surface-solid-primary: #F5F5F5;
+  --surface-solid-secondary: #ECECEC;
+  --surface-solid-tertiary: #DDDDDD;
+  --surface-solid-card: #FFFFFF;
+  --surface-transparent-default: #080808;
+  --surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --surface-transparent-card: #FFFFFF;
+  --surface-accent: #0B7ECB;
+  /* добавлены вручную */
+  --surface-accent-hover: #1383cf80;
+  /* добавлены вручную */
+  --surface-accent-gradient: linear-gradient(45.00deg, rgb(30, 44, 108) 0%,rgb(43, 101, 185) 100%);
+  --surface-positive: #1A9E32;
+  --surface-warning: #FA5F05;
+  --surface-negative: #DD1428;
+  /* добавлены вручную */
+  --surface-transparent-negative: #e3122712;
+  --surface-clear: rgba(0, 0, 0, 0);
+  --on-dark-surface-solid-default: #FFFFFF;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #171717;
+  --on-dark-surface-transparent-default: #FFFFFF;
+  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-accent: #FFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-surface-positive: #1A9E32;
+  --on-dark-surface-warning: #FA5F05;
+  --on-dark-surface-negative: #FF293E;
+  --on-dark-surface-clear: rgba(0, 0, 0, 0);
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #ECECEC;
+  --on-light-surface-solid-tertiary: #DDDDDD;
+  --on-light-surface-solid-card: #F7F7F7;
+  --on-light-surface-transparent-default: #080808;
+  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --on-light-surface-accent: #FFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-surface-positive: #108E25;
+  --on-light-surface-warning: #E85702;
+  --on-light-surface-negative: #F31B30;
+  --on-light-surface-clear: rgba(0, 0, 0, 0);
+  --inverse-surface-solid-default: #FFFFFF;
+  --inverse-surface-solid-primary: #171717;
+  --inverse-surface-solid-secondary: #262626;
+  --inverse-surface-solid-tertiary: #363636;
+  --inverse-surface-solid-card: #171717;
+  --inverse-surface-transparent-default: #FFFFFF;
+  --inverse-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --inverse-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --inverse-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --inverse-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --inverse-surface-accent: #FFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --inverse-surface-positive: #1A9E32;
+  --inverse-surface-warning: #FA5F05;
+  --inverse-surface-negative: #FF293E;
+  --inverse-surface-clear: rgba(0, 0, 0, 0);
+  --background-primary: #F9F9F9;
+  --background-secondary: #FFFFFF;
+  --background-tertiary: #FFFFFF;
+  --dark-background-primary: #000000;
+  --dark-background-secondary: #080808;
+  --dark-background-tertiary: #171717;
+  --light-background-primary: #FFFFFF;
+  --light-background-secondary: #FFFFFF;
+  --light-background-tertiary: #FFFFFF;
+  --inverse-background-primary: #000000;
+  --inverse-background-secondary: #080808;
+  --inverse-background-tertiary: #171717;
+  --text-primary-hover:  #17171793;
+  --text-primary-active:  #171717C4;
+  --surface-solid-default-hover:  #262626FF;
+  --surface-solid-default-active:  #030303FF;
+  --surface-accent-hover:  #0C8ADFFF;
+  --surface-accent-active:  #0A72B8FF;
+  --surface-positive-hover:  #1EB83AFF;
+  --surface-positive-active:  #178C2CFF;
+  --surface-warning-hover:  #FB782DFF;
+  --surface-warning-active:  #E65705FF;
+  --surface-negative-hover:  #EA1A2FFF;
+  --surface-negative-active:  #C91325FF;
+  --surface-transparent-secondary-hover:  #08080805;
+  --surface-transparent-secondary-active:  #0808081A;
+  --on-light-surface-solid-default-hover:  #262626FF;
+  --on-light-surface-solid-default-active:  #030303FF;
+  --on-dark-surface-solid-default-hover:  #FFFFFFFF;
+  --on-dark-surface-solid-default-active:  #FFFFFFFF;
+  --on-light-surface-transparent-deep-hover: #0808088F;
+  --on-light-surface-transparent-deep-active: #080808AD;
+  --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
+  --skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
+  --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
+  --plasma-colors-white-primary: var(--on-dark-text-primary);
+  --plasma-colors-white-secondary: var(--on-dark-text-secondary);
+  --plasma-colors-white-tertiary: var(--on-dark-text-tertiary);
+  --plasma-colors-black-primary: var(--on-light-text-primary);
+  --plasma-colors-black-secondary: var(--on-light-text-secondary);
+  --plasma-colors-black-tertiary: var(--on-light-text-tertiary);
+  --plasma-colors-button-black: var(--on-light-surface-solid-default);
+  --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary);
+  --plasma-colors-button-white: var(--on-dark-surface-solid-default);
+  --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary);
+  --plasma-colors-text: var(--text-primary);
+  --plasma-colors-primary: var(--text-primary);
+  --plasma-colors-secondary: var(--text-secondary);
+  --plasma-colors-tertiary: var(--text-tertiary);
+  --plasma-colors-paragraph: var(--text-paragraph);
+  --plasma-colors-background: var(--background-primary);
+  --plasma-colors-accent: var(--text-accent);
+  --plasma-colors-success: var(--text-positive);
+  --plasma-colors-warning: var(--text-warning);
+  --plasma-colors-critical: var(--text-negative);
+  --plasma-colors-overlay: var(--overlay-soft);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  --plasma-colors-surface-liquid02: var(--surface-transparent-secondary);
+  --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary);
+  --plasma-colors-surface-solid01: var(--surface-solid-primary);
+  --plasma-colors-surface-solid02: var(--surface-solid-secondary);
+  --plasma-colors-surface-solid03: var(--surface-solid-tertiary);
+  --plasma-colors-surface-card: var(--surface-transparent-card);
+  --plasma-colors-button-secondary: var(--surface-transparent-secondary);
+  --plasma-colors-button-accent: var(--text-accent);
+  --plasma-colors-button-success: var(--surface-positive);
+  --plasma-colors-button-warning: var(--surface-warning);
+  --plasma-colors-button-critical: var(--surface-negative);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}

package/styled-components/es/components/Button/Button.js

@@ -49,6 +49,7 @@ export var buttonRoot = function buttonRoot(Root) {
     var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
     var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
     var squareClass = square ? classes.buttonSquare : undefined;
+    var isLoadingClass = isLoading ? classes.buttonLoading : undefined;
     var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
     var contentPlacingMapper = {
       "default": 'center',
@@ -64,7 +65,7 @@ export var buttonRoot = function buttonRoot(Root) {
       disabled: disabled,
       focused: focused || outlined,
       contentPlacing: contentPlacing,
-      className: cx(squareClass, stretchingClass, classes.buttonItem, className),
+      className: cx(squareClass, stretchingClass, classes.buttonItem, className, isLoadingClass),
       style: _objectSpread(_objectSpread({}, style), {}, {
         '--plasma_computed-btn-br': buttonBorderRadius,
         '--plasma_private-blur': blur

package/styled-components/es/components/Button/Button.tokens.js

@@ -5,7 +5,8 @@ export var classes = {
   fixedStretching: 'button-stretching-fixed',
   contentRelaxed: 'button-content-relaxed',
   buttonSquare: 'button-square',
-  buttonItem: 'button-item'
+  buttonItem: 'button-item',
+  buttonLoading: 'button-loading'
 };
 export var tokens = {
   buttonColor: '--plasma-button-color',
@@ -15,6 +16,7 @@ export var tokens = {
   buttonBackgroundColorHover: '--plasma-button-background-color-hover',
   buttonColorActive: '--plasma-button-color-active',
   buttonBackgroundColorActive: '--plasma-button-background-color-active',
+  buttonLoadingBackgroundColor: '--plasma-button-loading-background-color',
   buttonScaleHover: '--plasma-button-scale-hover',
   buttonScaleActive: '---plasma-button-scale-active',
   buttonHeight: '--plasma-button-height',

package/styled-components/es/components/Button/variations/_view/base.js

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
-import { tokens } from '../../Button.tokens';
-export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");:hover{color:var(", ",var(", "));background-color:var(", ",var(", "));scale:var(", ");}:active{color:var(", ",var(", "));background-color:var(", ",var(", "));scale:var(", ");}"], tokens.buttonColor, tokens.buttonBackgroundColor, tokens.buttonColorHover, tokens.buttonColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColor, tokens.buttonScaleHover, tokens.buttonColorActive, tokens.buttonColor, tokens.buttonBackgroundColorActive, tokens.buttonBackgroundColor, tokens.buttonScaleActive);
+import { tokens, classes } from '../../Button.tokens';
+export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");&.", "{background-color:var(", ");}:hover{color:var(", ",var(", "));background-color:var(", ",var(", "));scale:var(", ");}:active{color:var(", ",var(", "));background-color:var(", ",var(", "));scale:var(", ");}"], tokens.buttonColor, tokens.buttonBackgroundColor, classes.buttonLoading, tokens.buttonLoadingBackgroundColor, tokens.buttonColorHover, tokens.buttonColor, tokens.buttonBackgroundColorHover, tokens.buttonBackgroundColor, tokens.buttonScaleHover, tokens.buttonColorActive, tokens.buttonColor, tokens.buttonBackgroundColorActive, tokens.buttonBackgroundColor, tokens.buttonScaleActive);
 
 // TODO: #715 background-image: gradients
 

package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js

@@ -16,6 +16,7 @@ export var tokens = {
   buttonColor: '--plasma-button-group-item-color',
   buttonValueColor: '--plasma-button-group-item-value-color',
   buttonBackgroundColor: '--plasma-button-group-item-background-color',
+  buttonLoadingBackgroundColor: '--plasma-button-group-loading-item-background-color',
   buttonColorHover: '--plasma-button-group-item-color-hover',
   buttonBackgroundColorHover: '--plasma-button-group-item-background-color-hover',
   buttonColorActive: '--plasma-button-group-item-color-active',

package/styled-components/es/components/ButtonGroup/variations/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../ButtonGroup.tokens';
 import { buttonClasses, buttonTokens } from '../../../Button';
-export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonValueColor, tokens.buttonValueColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
+export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonValueColor, tokens.buttonValueColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, tokens.buttonLoadingBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);

package/styled-components/es/components/Checkbox/Checkbox.styles.js

@@ -10,7 +10,7 @@ export var StyledInput = /*#__PURE__*/styled.input.withConfig({
 })(["position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"]);
 export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-tydhc1-1"
-})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:transparent;border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], tokens.triggerMargin, tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBorderColor);
+})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:var(", ");border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], tokens.triggerMargin, tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBackgroundColor, tokens.triggerBorderColor);
 export var StyledContentWrapper = /*#__PURE__*/styled.label.withConfig({
   componentId: "plasma-new-hope__sc-tydhc1-2"
 })(["position:relative;align-items:flex-start;display:flex;width:100%;cursor:inherit;"]);

package/styled-components/es/components/Checkbox/Checkbox.tokens.js

@@ -28,6 +28,7 @@ export var tokens = {
   iconColor: '--plasma-checkbox-icon-color',
   descriptionColor: '--plasma-checkbox-description-color',
   triggerBorderColor: '--plasma-checkbox-trigger-border-color',
+  triggerBackgroundColor: '--plasma-checkbox-trigger-background-color',
   focusColor: '--plasma-checkbox-focus-color',
   disabledOpacity: '--plasma-checkbox-disabled-opacity'
 };

package/styled-components/es/components/IconButton/IconButton.styles.js

@@ -4,5 +4,5 @@ import { baseContent as buttonBase } from '../Button/Button.styles';
 import { tokens } from './IconButton.tokens';
 
 // Переопределние токенов из Button
-export var mappingOverride = /*#__PURE__*/"\n    ".concat(buttonTokens.buttonPadding, ": 0;\n\n    ").concat(buttonTokens.buttonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(buttonTokens.buttonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n\n    ").concat(buttonTokens.buttonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(buttonTokens.buttonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n\n    ").concat(buttonTokens.buttonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(buttonTokens.buttonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n\n    ").concat(buttonTokens.buttonFontFamily, ": var(").concat(tokens.iconButtonFontFamily, ");\n    ").concat(buttonTokens.buttonFontSize, ": var(").concat(tokens.iconButtonFontSize, ");\n    ").concat(buttonTokens.buttonFontStyle, ": var(").concat(tokens.iconButtonFontStyle, ");\n    ").concat(buttonTokens.buttonFontWeight, ":var(").concat(tokens.iconButtonFontWeight, ");\n    ").concat(buttonTokens.buttonLetterSpacing, ": var(").concat(tokens.iconButtonLetterSpacing, ");\n    ").concat(buttonTokens.buttonLineHeight, ": var(").concat(tokens.iconButtonLineHeight, ");\n\n    ").concat(buttonTokens.buttonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(buttonTokens.buttonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(buttonTokens.buttonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n\n    ").concat(buttonTokens.buttonDisabledOpacity, ": var(").concat(tokens.iconButtonDisabledOpacity, ");\n    ").concat(buttonTokens.buttonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n\n    ").concat(buttonTokens.buttonSpinnerSize, ": var(").concat(tokens.iconButtonSpinnerSize, ");\n    ").concat(buttonTokens.buttonSpinnerColor, ": var(").concat(tokens.iconButtonSpinnerColor, ");\n");
+export var mappingOverride = /*#__PURE__*/"\n    ".concat(buttonTokens.buttonPadding, ": 0;\n\n    ").concat(buttonTokens.buttonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(buttonTokens.buttonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n\n    ").concat(buttonTokens.buttonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(buttonTokens.buttonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n\n    ").concat(buttonTokens.buttonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(buttonTokens.buttonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n    ").concat(buttonTokens.buttonLoadingBackgroundColor, ": var(").concat(tokens.iconButtonLoadingBackgroundColor, ");\n\n    ").concat(buttonTokens.buttonFontFamily, ": var(").concat(tokens.iconButtonFontFamily, ");\n    ").concat(buttonTokens.buttonFontSize, ": var(").concat(tokens.iconButtonFontSize, ");\n    ").concat(buttonTokens.buttonFontStyle, ": var(").concat(tokens.iconButtonFontStyle, ");\n    ").concat(buttonTokens.buttonFontWeight, ":var(").concat(tokens.iconButtonFontWeight, ");\n    ").concat(buttonTokens.buttonLetterSpacing, ": var(").concat(tokens.iconButtonLetterSpacing, ");\n    ").concat(buttonTokens.buttonLineHeight, ": var(").concat(tokens.iconButtonLineHeight, ");\n\n    ").concat(buttonTokens.buttonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(buttonTokens.buttonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(buttonTokens.buttonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n\n    ").concat(buttonTokens.buttonDisabledOpacity, ": var(").concat(tokens.iconButtonDisabledOpacity, ");\n    ").concat(buttonTokens.buttonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n\n    ").concat(buttonTokens.buttonSpinnerSize, ": var(").concat(tokens.iconButtonSpinnerSize, ");\n    ").concat(buttonTokens.buttonSpinnerColor, ": var(").concat(tokens.iconButtonSpinnerColor, ");\n");
 export var base = /*#__PURE__*/css(["", ";", ";"], buttonBase, mappingOverride);

package/styled-components/es/components/IconButton/IconButton.tokens.js

@@ -1,6 +1,7 @@
 export var tokens = {
   iconButtonColor: '--plasma-icon-button-color',
   iconButtonBackgroundColor: '--plasma-icon-button-background-color',
+  iconButtonLoadingBackgroundColor: '--plasma-icon-button-loading-background-color',
   iconButtonColorHover: '--plasma-icon-button-color-hover',
   iconButtonBackgroundColorHover: '--plasma-icon-button-background-color-hover',
   iconButtonColorActive: '--plasma-icon-button-color-active',

package/styled-components/es/components/Radiobox/Radiobox.styles.js

@@ -5,7 +5,7 @@ import { applyEllipsis, applyNoUserSelect } from '../../mixins';
 import { classes, tokens } from './Radiobox.tokens';
 
 // NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
-var mappingOverride = /*#__PURE__*/"\n    ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n    ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n    ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n    ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n    ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n    ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n    ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n    ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n    ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n    ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n    ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n    ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n    ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n    ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n    ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n    ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n\n    ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n    ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n    ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n    ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n    ").concat(checkboxTokens.triggerMargin, ": var(").concat(tokens.triggerMargin, ");\n");
+var mappingOverride = /*#__PURE__*/"\n    ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n    ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n    ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n    ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n    ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n    ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n    ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n    ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n    ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n    ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n    ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n    ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n    ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n    ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n    ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n    ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n    ").concat(checkboxTokens.triggerBackgroundColor, ": var(").concat(tokens.triggerBackgroundColor, ");\n\n    ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n    ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n    ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n    ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n    ").concat(checkboxTokens.triggerMargin, ": var(").concat(tokens.triggerMargin, ");\n");
 export var StyledEllipse = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-rqiilp-0"
 })(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseColor);

package/styled-components/es/components/Radiobox/Radiobox.tokens.js

@@ -20,6 +20,7 @@ export var tokens = {
   fillColor: '--plasma-radiobox-fill-color',
   descriptionColor: '--plasma-radiobox-description-color',
   triggerBorderColor: '--plasma-radiobox-trigger-border-color',
+  triggerBackgroundColor: '--plasma-radiobox-trigger-background-color',
   contentTopOffset: '--plasma-radiobox-content-top-offset',
   contentLeftOffset: '--plasma-radiobox-content-left-offset',
   triggerSize: '--plasma-radiobox-trigger-size',

package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js

@@ -8,16 +8,16 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(", ");", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(", ");", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(", ");", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(", ");", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonLoadingBackgroundColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
     },
     size: {
       l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),

package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js

@@ -7,16 +7,16 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
-      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(", ");", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(", ");", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(", ");", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(", ");", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
+      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(", ");", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonLoadingBackgroundColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
     },
     size: {
       l: /*#__PURE__*/css(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], buttonGroupTokens.buttonDefaultRadius, buttonGroupTokens.buttonSegmentedRadius, buttonGroupTokens.buttonSideRadius, buttonGroupTokens.buttonHeight, buttonGroupTokens.buttonPadding, buttonGroupTokens.buttonFontFamily, buttonGroupTokens.buttonFontSize, buttonGroupTokens.buttonFontStyle, buttonGroupTokens.buttonFontWeight, buttonGroupTokens.buttonLetterSpacing, buttonGroupTokens.buttonLineHeight),