@salutejs/plasma-new-hope 0.131.1-canary.1396.10560424945.0 → 0.132.0-canary.1352.10568540479.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/TextArea/TextArea.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
+var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredAlign", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -24,11 +24,12 @@ import { useResizeObserver } from '@salutejs/plasma-core';
 import { cx } from '../../utils';
 import { applyDynamicLabel } from './mixins';
 import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
-import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer } from './TextArea.styles';
+import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator } from './TextArea.styles';
 import { classes } from './TextArea.tokens';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as disabledCSS } from './variations/_disabled/base';
+import { base as requiredCSS } from './variations/_required/base';
 var innerPlaceholderUp = classes.innerPlaceholderUp,
   focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor,
   hidePlaceHolder = classes.hidePlaceHolder,
@@ -89,6 +90,8 @@ export var textAreaRoot = function textAreaRoot(Root) {
       width = props.width,
       value = props.value,
       disabled = props.disabled,
+      required = props.required,
+      requiredAlign = props.requiredAlign,
       size = props.size,
       view = props.view,
       id = props.id,
@@ -117,6 +120,8 @@ export var textAreaRoot = function textAreaRoot(Root) {
     var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
     var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
+    var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
+    var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
     useResizeObserver(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
       if (inlineWidth || cols) {
@@ -155,16 +160,21 @@ export var textAreaRoot = function textAreaRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: readOnly,
+      required: required,
       style: _objectSpread({
         width: helperWidth
       }, style),
       className: className
-    }, label && labelPlacement === 'outer' && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledContainer, {
+    }, hasOuterLabel && /*#__PURE__*/React.createElement(StyledLabel, null, required && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx('placement-outer', requiredAlignClass)
+    }), label), /*#__PURE__*/React.createElement(StyledContainer, {
       className: cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
       width: helperWidth,
       onFocus: onFocusHandler,
       onBlur: onBlurHandler
-    }, contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
+    }, required && !hasOuterLabel && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx('placement-inner', requiredAlignClass)
+    }), contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
       className: styledTextAreaWrapper,
       hasHelper: hasHelper
     }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
@@ -212,6 +222,10 @@ export var textAreaConfig = {
       css: disabledCSS,
       attrs: true
     },
+    required: {
+      css: requiredCSS,
+      attrs: true
+    },
     readOnly: {
       attrs: true
     }

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

@@ -3,7 +3,7 @@ import { applyEllipsis } from '../../mixins';
 import { tokens } from './TextArea.tokens';
 export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-0"
-})(["margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
+})(["position:relative;display:inline-block;margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-1"
 })(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], tokens.inputBackgroundColor, tokens.inputPaddingTop, function (_ref) {
@@ -67,4 +67,7 @@ export var StyledPlaceholder = /*#__PURE__*/styled.label.withConfig({
 })(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.placeholderColor, tokens.inputPaddingTop, tokens.inputPaddingLeft, function (_ref13) {
   var hasContentRight = _ref13.hasContentRight;
   return hasContentRight ? "var(".concat(tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(tokens.inputPaddingRight, ")");
-}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
+}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
+export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-pxxv3p-9"
+})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);

package/styled-components/es/components/TextArea/TextArea.template-doc.mdx

@@ -32,7 +32,7 @@ export function App() {
 ```
 
 ### Размеры компонента
-Высоту и ширину можно регулировать с помощью свойств `height` и `width`, 
+Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
 указав значения в `rem` или соответствующие свойствам css значения.
 `height` и `width` отвечают за **всю** высоту и ширину компонента.
 
@@ -76,7 +76,7 @@ export function App() {
 
 ### Autoresize
 Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
-Для этого необходимо использовать свойство `autoResize`. 
+Для этого необходимо использовать свойство `autoResize`.
 
 Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
 
@@ -123,4 +123,30 @@ export function App() {
         </div>
     );
 }
-```
+```
+
+
+### Обязательность поля
+Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                required
+            />
+            <TextArea
+                placeholder="Введите значение"
+                label="Заголовок"
+                required
+                requiredAlign="right"
+            />
+        </div>
+    );
+}
+```

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

@@ -146,5 +146,12 @@ export var tokens = {
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-textarea-disabled-opacity',
   /** Цвет текста для элемента textarea в состоянии disabled */
-  inputColorDisabled: '--plasma-textarea-input-color-disabled'
+  inputColorDisabled: '--plasma-textarea-input-color-disabled',
+  indicatorColor: '--plasma-textarea-indicator-color',
+  indicatorSizeInner: '--plasma-textarea-indicator-size-inner',
+  indicatorSizeOuter: '--plasma-textarea-indicator-size-outer',
+  indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
+  indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
+  indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
+  indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
 };

package/styled-components/es/components/TextArea/variations/_required/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/TextArea/variations/_required/tokens.json

@@ -0,0 +1 @@
+["--plasma-textarea-indicator-color"]

package/styled-components/es/components/TextArea/variations/_size/tokens.json

@@ -36,5 +36,11 @@
     "--plasma-textarea-helpers-font-style",
     "--plasma-textarea-helpers-font-weight",
     "--plasma-textarea-helpers-letter-spacing",
-    "--plasma-textarea-helpers-line-height"
+    "--plasma-textarea-helpers-line-height",
+    "--plasma-textarea-indicator-size-inner",
+    "--plasma-textarea-indicator-size-outer",
+    "--plasma-textarea-indicator-placement-inner",
+    "--plasma-textarea-indicator-placement-outer",
+    "--plasma-textarea-indicator-placement-inner-right",
+    "--plasma-textarea-indicator-placement-outer-right"
 ]

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

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredAlign", "view", "size", "readOnly", "disabled", "required", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,12 +16,13 @@ import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_read-only/base';
+import { base as requiredCSS } from './variations/_required/base';
 import { base as labelPlacementCSS } from './variations/_label-placement/base';
-import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter } from './TextField.styles';
+import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator } from './TextField.styles';
 import { classes } from './TextField.tokens';
 import { TextFieldChip } from './ui';
 import { useKeyNavigation } from './hooks';
-export var base = /*#__PURE__*/css(["display:block;overflow:hidden;"]);
+export var base = /*#__PURE__*/css(["display:block;"]);
 export var textFieldRoot = function textFieldRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var id = _ref.id,
@@ -37,12 +38,16 @@ export var textFieldRoot = function textFieldRoot(Root) {
       leftHelper = _ref.leftHelper,
       _ref$enumerationType = _ref.enumerationType,
       enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
+      _ref$requiredAlign = _ref.requiredAlign,
+      requiredAlign = _ref$requiredAlign === void 0 ? 'left' : _ref$requiredAlign,
       view = _ref.view,
       size = _ref.size,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
       values = _ref.chips,
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
@@ -72,6 +77,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
     var innerPlaceholderValue = hideLabel ? label : placeholder;
     var innerLabelValue = hideLabel ? undefined : label;
+    var hasOuterLabel = Boolean(!labelInside && innerLabelValue);
+    var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
     var hideLabelClass = hideLabel && label ? classes.hideLabel : undefined;
     var labelPlacementClass = classes["".concat(labelPlacement, "LabelPlacement")];
     var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
@@ -147,17 +154,22 @@ export var textFieldRoot = function textFieldRoot(Root) {
       view: view,
       size: size,
       disabled: disabled,
+      required: required,
       readOnly: !disabled && readOnly,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
       className: cx(labelPlacementClass, hideLabelClass, className),
       style: style
-    }, labelInside || innerLabelValue && /*#__PURE__*/React.createElement(Label, {
+    }, hasOuterLabel && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: id
-    }, innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
+    }, required && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx('placement-outer', requiredAlignClass)
+    }), innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
       className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
-    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
+    }, !hasOuterLabel && required && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx('placement-inner', requiredAlignClass)
+    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -221,6 +233,10 @@ export var textFieldConfig = {
       css: readOnlyCSS,
       attrs: true
     },
+    required: {
+      css: requiredCSS,
+      attrs: true
+    },
     labelPlacement: {
       css: labelPlacementCSS
     }