@salutejs/plasma-tokens 1.123.0-canary.2239.17794430722.0 → 1.123.0-canary.2241.17972389915.0

package/css/plasma_infra.module.css

@@ -0,0 +1,351 @@
+/* Generated by robots, do not change this manually! */
+
+.dark {
+  --text-primary-hover: #C5C8DDFF;
+  --text-primary-active: #D8DAE9FF;
+  --text-primary-brightness: #FFFFFFFF;
+  --text-secondary-hover: #FFFFFFFF;
+  --text-secondary-active: #303340FF;
+  --text-tertiary-hover: #FFFFFFFF;
+  --text-tertiary-active: #808293FF;
+  --text-paragraph-hover: #FFFFFFFF;
+  --text-paragraph-active: #585A65FF;
+  --text-negative-hover: #F5384BFF;
+  --text-negative-active: #E40C22FF;
+  --text-primary: #ECEDF4;
+  --text-secondary: #AEB2C2;
+  --text-tertiary: #4B4C58;
+  --text-paragraph: #828592;
+  --text-negative: #F31B31;
+  --on-dark-text-primary-hover: #C5C8DDFF;
+  --on-dark-text-primary-active: #D8DAE9FF;
+  --on-dark-text-primary-brightness: #FFFFFFFF;
+  --on-dark-text-secondary-hover: #FFFFFFFF;
+  --on-dark-text-secondary-active: #303340FF;
+  --on-dark-text-tertiary-hover: #FFFFFFFF;
+  --on-dark-text-tertiary-active: #808293FF;
+  --on-dark-text-paragraph-hover: #FFFFFFFF;
+  --on-dark-text-paragraph-active: #585A65FF;
+  --on-dark-text-negative-hover: #F5384BFF;
+  --on-dark-text-negative-active: #E40C22FF;
+  --on-dark-text-primary: #ECEDF4;
+  --on-dark-text-secondary: #AEB2C2;
+  --on-dark-text-tertiary: #4B4C58;
+  --on-dark-text-paragraph: #828592;
+  --on-dark-text-negative: #F31B31;
+  --on-light-text-primary-hover: #FFFFFFFF;
+  --on-light-text-primary-active: #AEB3C2FF;
+  --on-light-text-primary-brightness: #23262FFF;
+  --on-light-text-secondary-hover: #FFFFFFFF;
+  --on-light-text-secondary-active: #808293FF;
+  --on-light-text-tertiary-hover: #FFFFFFFF;
+  --on-light-text-tertiary-active: #4B4D58FF;
+  --on-light-text-paragraph-hover: #FFFFFFFF;
+  --on-light-text-paragraph-active: #5F616DFF;
+  --on-light-text-negative-hover: #F5384BFF;
+  --on-light-text-negative-active: #E40C22FF;
+  --on-light-text-primary: #16181D;
+  --on-light-text-secondary: #4B4C58;
+  --on-light-text-tertiary: #9194A1;
+  --on-light-text-paragraph: #777A88;
+  --on-light-text-negative: #F31B31;
+  --inverse-text-primary-hover: #FFFFFFFF;
+  --inverse-text-primary-active: #AEB3C2FF;
+  --inverse-text-primary-brightness: #23262FFF;
+  --inverse-text-secondary-hover: #FFFFFFFF;
+  --inverse-text-secondary-active: #808293FF;
+  --inverse-text-tertiary-hover: #FFFFFFFF;
+  --inverse-text-tertiary-active: #4B4D58FF;
+  --inverse-text-paragraph-hover: #FFFFFFFF;
+  --inverse-text-paragraph-active: #5F616DFF;
+  --inverse-text-negative: #F31B31;
+  --inverse-text-negative-hover: #F5384BFF;
+  --inverse-text-negative-active: #E40C22FF;
+  --inverse-text-primary: #16181D;
+  --inverse-text-secondary: #4B4C58;
+  --inverse-text-tertiary: #9194A1;
+  --inverse-text-paragraph: #777A88;
+  --surface-solid-card-hover: #B9BDCAFF;
+  --surface-solid-card-active: #A8ACBDFF;
+  --surface-solid-card-brightness: #BFC2CFFF;
+  --surface-solid-default-hover: #545663FF;
+  --surface-solid-default-active: #464753FF;
+  --surface-transparent-primary-hover: #F8F9FC14;
+  --surface-transparent-primary-active: #F8F9FC05;
+  --surface-solid-default: #4B4C58;
+  --surface-solid-card: #AEB2C2;
+  --surface-transparent-primary: #F7F8FB0A;
+  --on-dark-surface-solid-card-hover: #545663FF;
+  --on-dark-surface-solid-card-active: #464753FF;
+  --on-dark-surface-solid-card-brightness: #595A69FF;
+  --on-dark-surface-solid-default-hover: #B9BDCAFF;
+  --on-dark-surface-solid-default-active: #A8ACBDFF;
+  --on-dark-surface-transparent-primary-hover: #F8F9FC14;
+  --on-dark-surface-transparent-primary-active: #F8F9FC05;
+  --on-dark-surface-solid-card: #4B4C58;
+  --on-dark-surface-solid-default: #AEB2C2;
+  --on-dark-surface-transparent-primary: #F7F8FB0A;
+  --on-light-surface-solid-card-hover: #F9F9FBFF;
+  --on-light-surface-solid-card-active: #E5E6F0FF;
+  --on-light-surface-solid-card-brightness: #FFFFFFFF;
+  --on-light-surface-solid-default-hover: #818492FF;
+  --on-light-surface-solid-default-active: #727583FF;
+  --on-light-surface-transparent-primary-hover: #08090C14;
+  --on-light-surface-transparent-primary-active: #08090C05;
+  --on-light-surface-solid-card: #ECEDF4;
+  --on-light-surface-solid-default: #777A88;
+  --on-light-surface-transparent-primary: #07080B0A;
+  --inverse-surface-solid-card-hover: #F9F9FBFF;
+  --inverse-surface-solid-card-active: #E5E6F0FF;
+  --inverse-surface-solid-card-brightness: #FFFFFFFF;
+  --inverse-surface-solid-default-hover: #818492FF;
+  --inverse-surface-solid-default-active: #727583FF;
+  --inverse-surface-transparent-primary-hover: #08090C14;
+  --inverse-surface-transparent-primary-active: #08090C05;
+  --inverse-surface-solid-card: #ECEDF4;
+  --inverse-surface-solid-default: #777A88;
+  --inverse-surface-transparent-primary: #07080B0A;
+  --background-primary: #07080B;
+  --background-secondary: #16181D;
+  --background-tertiary: #25262D;
+  --dark-background-primary: #07080B;
+  --dark-background-secondary: #16181D;
+  --dark-background-tertiary: #25262D;
+  --light-background-primary: #AEB2C2;
+  --light-background-secondary: #C4C7D4;
+  --light-background-tertiary: #D8DCE8;
+  --inverse-background-primary: #AEB2C2;
+  --inverse-background-secondary: #C4C7D4;
+  --inverse-background-tertiary: #D8DCE8;
+  --outline-solid-primary-hover: #FFFFFFFF;
+  --outline-solid-primary-active: #A2A4B3FF;
+  --outline-solid-secondary-hover: #FFFFFFFF;
+  --outline-solid-secondary-active: #808293FF;
+  --outline-transparent-primary-hover: #F8F9FCFF;
+  --outline-transparent-primary-active: #F8F9FC25;
+  --outline-solid-primary: #25262D;
+  --outline-solid-secondary: #4B4C58;
+  --outline-transparent-primary: #F7F8FB1F;
+  --on-dark-outline-solid-primary-hover: #FFFFFFFF;
+  --on-dark-outline-solid-primary-active: #A2A4B3FF;
+  --on-dark-outline-solid-secondary-hover: #FFFFFFFF;
+  --on-dark-outline-solid-secondary-active: #808293FF;
+  --on-dark-outline-transparent-primary-hover: #F8F9FCFF;
+  --on-dark-outline-transparent-primary-active: #F8F9FC25;
+  --on-dark-outline-solid-primary: #25262D;
+  --on-dark-outline-solid-secondary: #4B4C58;
+  --on-dark-outline-transparent-primary: #F7F8FB1F;
+  --on-light-outline-solid-primary-hover: #B2BAD2FF;
+  --on-light-outline-solid-primary-active: #C5CBDDFF;
+  --on-light-outline-solid-secondary-hover: #FFFFFFFF;
+  --on-light-outline-solid-secondary-active: #303340FF;
+  --on-light-outline-transparent-primary-hover: #08090CFF;
+  --on-light-outline-transparent-primary-active: #08090C25;
+  --on-light-outline-solid-primary: #D8DCE8;
+  --on-light-outline-solid-secondary: #AEB2C2;
+  --on-light-outline-transparent-primary: #07080B1F;
+  --inverse-outline-solid-primary-hover: #B2BAD2FF;
+  --inverse-outline-solid-primary-active: #C5CBDDFF;
+  --inverse-outline-solid-secondary-hover: #FFFFFFFF;
+  --inverse-outline-solid-secondary-active: #303340FF;
+  --inverse-outline-transparent-primary-hover: #08090CFF;
+  --inverse-outline-transparent-primary-active: #08090C25;
+  --inverse-outline-solid-primary: #D8DCE8;
+  --inverse-outline-solid-secondary: #AEB2C2;
+  --inverse-outline-transparent-primary: #07080B1F;
+  --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% );
+  --skeleton-gradient-lighter: 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-white: var(--on-dark-surface-solid-default);
+  --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-critical: var(--text-negative);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}
+
+.light {
+  --text-primary-hover: #5C657AFF;
+  --text-primary-active: #393E4CFF;
+  --text-primary-brightness: #23262FFF;
+  --text-secondary-hover: #FFFFFFFF;
+  --text-secondary-active: #3D3E48FF;
+  --text-tertiary-hover: #FFFFFFFF;
+  --text-tertiary-active: #717484FF;
+  --text-paragraph-hover: #FFFFFFFF;
+  --text-paragraph-active: #5F616DFF;
+  --text-negative-hover: #F54254FF;
+  --text-negative-active: #DA0B20FF;
+  --text-primary: #16181D;
+  --text-secondary: #4B4C58;
+  --text-tertiary: #9194A1;
+  --text-paragraph: #777A88;
+  --text-negative: #F31B31;
+  --on-dark-text-primary-hover: #FFFFFFFF;
+  --on-dark-text-primary-active: #AEB2D0FF;
+  --on-dark-text-primary-brightness: #FFFFFFFF;
+  --on-dark-text-secondary-hover: #FFFFFFFF;
+  --on-dark-text-secondary-active: #858BA3FF;
+  --on-dark-text-tertiary-hover: #FFFFFFFF;
+  --on-dark-text-tertiary-active: #3D3E48FF;
+  --on-dark-text-paragraph-hover: #FFFFFFFF;
+  --on-dark-text-paragraph-active: #666975FF;
+  --on-dark-text-negative-hover: #F54254FF;
+  --on-dark-text-negative-active: #DA0B20FF;
+  --on-dark-text-primary: #ECEDF4;
+  --on-dark-text-secondary: #AEB2C2;
+  --on-dark-text-tertiary: #4B4C58;
+  --on-dark-text-paragraph: #828592;
+  --on-dark-text-negative: #F31B31;
+  --on-light-text-primary-hover: #5C657AFF;
+  --on-light-text-primary-active: #393E4CFF;
+  --on-light-text-primary-brightness: #23262FFF;
+  --on-light-text-secondary-hover: #FFFFFFFF;
+  --on-light-text-secondary-active: #3D3E48FF;
+  --on-light-text-tertiary-hover: #FFFFFFFF;
+  --on-light-text-tertiary-active: #717484FF;
+  --on-light-text-paragraph-hover: #FFFFFFFF;
+  --on-light-text-paragraph-active: #5F616DFF;
+  --on-light-text-negative-hover: #F54254FF;
+  --on-light-text-negative-active: #DA0B20FF;
+  --on-light-text-primary: #16181D;
+  --on-light-text-secondary: #4B4C58;
+  --on-light-text-tertiary: #9194A1;
+  --on-light-text-paragraph: #777A88;
+  --on-light-text-negative: #F31B31;
+  --inverse-text-primary-hover: #FFFFFFFF;
+  --inverse-text-primary-active: #AEB2D0FF;
+  --inverse-text-primary-brightness: #FFFFFFFF;
+  --inverse-text-secondary-hover: #FFFFFFFF;
+  --inverse-text-secondary-active: #858BA3FF;
+  --inverse-text-tertiary-hover: #FFFFFFFF;
+  --inverse-text-tertiary-active: #3D3E48FF;
+  --inverse-text-paragraph-hover: #FFFFFFFF;
+  --inverse-text-paragraph-active: #666975FF;
+  --inverse-text-negative-hover: #F54254FF;
+  --inverse-text-negative-active: #DA0B20FF;
+  --inverse-text-primary: #ECEDF4;
+  --inverse-text-secondary: #AEB2C2;
+  --inverse-text-tertiary: #4B4C58;
+  --inverse-text-paragraph: #828592;
+  --inverse-text-negative: #F31B31;
+  --surface-solid-card-hover: #F9F9FBFF;
+  --surface-solid-card-active: #E5E6F0FF;
+  --surface-solid-card-brightness: #FFFFFFFF;
+  --surface-solid-default-hover: #878A97FF;
+  --surface-solid-default-active: #6D707EFF;
+  --surface-transparent-primary-hover: #08090C05;
+  --surface-transparent-primary-active: #08090C0F;
+  --surface-solid-card: #ECEDF4;
+  --surface-solid-default: #777A88;
+  --surface-transparent-primary: #07080B0a;
+  --on-dark-surface-solid-card-hover: #5E5F6EFF;
+  --on-dark-surface-solid-card-active: #42434DFF;
+  --on-dark-surface-solid-card-brightness: #595A69FF;
+  --on-dark-surface-solid-default-hover: #B9BDCAFF;
+  --on-dark-surface-solid-default-active: #A2A7B9FF;
+  --on-dark-surface-transparent-primary-hover: #F8F9FC05;
+  --on-dark-surface-transparent-primary-active: #F8F9FC0F;
+  --on-dark-surface-solid-card: #4B4C58;
+  --on-dark-surface-solid-default: #AEB2C2;
+  --on-dark-surface-transparent-primary: #F7F8FB0a;
+  --on-light-surface-solid-card-hover: #F9F9FBFF;
+  --on-light-surface-solid-card-active: #E5E6F0FF;
+  --on-light-surface-solid-card-brightness: #FFFFFFFF;
+  --on-light-surface-solid-default-hover: #878A97FF;
+  --on-light-surface-solid-default-active: #6D707EFF;
+  --on-light-surface-transparent-primary-hover: #08090C05;
+  --on-light-surface-transparent-primary-active: #08090C0F;
+  --on-light-surface-solid-card: #ECEDF4;
+  --on-light-surface-solid-default: #777A88;
+  --on-light-surface-transparent-primary: #07080B0A;
+  --inverse-surface-solid-card-hover: #5E5F6EFF;
+  --inverse-surface-solid-card-active: #42434DFF;
+  --inverse-surface-solid-card-brightness: #595A69FF;
+  --inverse-surface-solid-default-hover: #B9BDCAFF;
+  --inverse-surface-solid-default-active: #A2A7B9FF;
+  --inverse-surface-transparent-primary-hover: #F8F9FC05;
+  --inverse-surface-transparent-primary-active: #F8F9FC0F;
+  --inverse-surface-solid-card: #4B4C58;
+  --inverse-surface-solid-default: #AEB2C2;
+  --inverse-surface-transparent-primary: #F7F8FB0a;
+  --background-primary: #AEB2C2;
+  --background-secondary: #C4C7D4;
+  --background-tertiary: #D8DCE8;
+  --dark-background-primary: #07080B;
+  --dark-background-secondary: #16181D;
+  --dark-background-tertiary: #25262D;
+  --light-background-primary: #AEB2C2;
+  --light-background-secondary: #C4C7D4;
+  --light-background-tertiary: #D8DCE8;
+  --inverse-background-primary: #07080B;
+  --inverse-background-secondary: #16181D;
+  --inverse-background-tertiary: #25262D;
+  --outline-solid-primary-hover: #FFFFFFFF;
+  --outline-solid-primary-active: #9FA9C6FF;
+  --outline-solid-secondary-hover: #FFFFFFFF;
+  --outline-solid-secondary-active: #858BA3FF;
+  --outline-transparent-primary-hover: #08090CFF;
+  --outline-transparent-primary-active: #08090C25;
+  --outline-solid-primary: #D8DCE8;
+  --outline-solid-secondary: #AEB2C2;
+  --outline-transparent-primary: #07080B1F;
+  --on-dark-outline-solid-primary-hover: #6E7187FF;
+  --on-dark-outline-solid-primary-active: #494B5AFF;
+  --on-dark-outline-solid-secondary-hover: #FFFFFFFF;
+  --on-dark-outline-solid-secondary-active: #3D3E48FF;
+  --on-dark-outline-transparent-primary-hover: #F8F9FCFF;
+  --on-dark-outline-transparent-primary-active: #F8F9FC25;
+  --on-dark-outline-solid-primary: #25262D;
+  --on-dark-outline-solid-secondary: #4B4C58;
+  --on-dark-outline-transparent-primary: #F7F8FB1F;
+  --on-light-outline-solid-primary-hover: #FFFFFFFF;
+  --on-light-outline-solid-primary-active: #9FA9C6FF;
+  --on-light-outline-solid-secondary-hover: #FFFFFFFF;
+  --on-light-outline-solid-secondary-active: #858BA3FF;
+  --on-light-outline-transparent-primary-hover: #08090CFF;
+  --on-light-outline-transparent-primary-active: #08090C25;
+  --on-light-outline-solid-primary: #D8DCE8;
+  --on-light-outline-solid-secondary: #AEB2C2;
+  --on-light-outline-transparent-primary: #07080B1F;
+  --inverse-outline-solid-primary-hover: #6E7187FF;
+  --inverse-outline-solid-primary-active: #494B5AFF;
+  --inverse-outline-solid-secondary-hover: #FFFFFFFF;
+  --inverse-outline-solid-secondary-active: #3D3E48FF;
+  --inverse-outline-transparent-primary-hover: #F8F9FCFF;
+  --inverse-outline-transparent-primary-active: #F8F9FC25;
+  --inverse-outline-solid-primary: #25262D;
+  --inverse-outline-solid-secondary: #4B4C58;
+  --inverse-outline-transparent-primary: #F7F8FB1F;
+  --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-white: var(--on-dark-surface-solid-default);
+  --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-critical: var(--text-negative);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}

package/css/plasma_infra__dark.css

@@ -0,0 +1,176 @@
+/* Generated by robots, do not change this manually! */
+
+:root {
+  --text-primary-hover: #C5C8DDFF;
+  --text-primary-active: #D8DAE9FF;
+  --text-primary-brightness: #FFFFFFFF;
+  --text-secondary-hover: #FFFFFFFF;
+  --text-secondary-active: #303340FF;
+  --text-tertiary-hover: #FFFFFFFF;
+  --text-tertiary-active: #808293FF;
+  --text-paragraph-hover: #FFFFFFFF;
+  --text-paragraph-active: #585A65FF;
+  --text-negative-hover: #F5384BFF;
+  --text-negative-active: #E40C22FF;
+  --text-primary: #ECEDF4;
+  --text-secondary: #AEB2C2;
+  --text-tertiary: #4B4C58;
+  --text-paragraph: #828592;
+  --text-negative: #F31B31;
+  --on-dark-text-primary-hover: #C5C8DDFF;
+  --on-dark-text-primary-active: #D8DAE9FF;
+  --on-dark-text-primary-brightness: #FFFFFFFF;
+  --on-dark-text-secondary-hover: #FFFFFFFF;
+  --on-dark-text-secondary-active: #303340FF;
+  --on-dark-text-tertiary-hover: #FFFFFFFF;
+  --on-dark-text-tertiary-active: #808293FF;
+  --on-dark-text-paragraph-hover: #FFFFFFFF;
+  --on-dark-text-paragraph-active: #585A65FF;
+  --on-dark-text-negative-hover: #F5384BFF;
+  --on-dark-text-negative-active: #E40C22FF;
+  --on-dark-text-primary: #ECEDF4;
+  --on-dark-text-secondary: #AEB2C2;
+  --on-dark-text-tertiary: #4B4C58;
+  --on-dark-text-paragraph: #828592;
+  --on-dark-text-negative: #F31B31;
+  --on-light-text-primary-hover: #FFFFFFFF;
+  --on-light-text-primary-active: #AEB3C2FF;
+  --on-light-text-primary-brightness: #23262FFF;
+  --on-light-text-secondary-hover: #FFFFFFFF;
+  --on-light-text-secondary-active: #808293FF;
+  --on-light-text-tertiary-hover: #FFFFFFFF;
+  --on-light-text-tertiary-active: #4B4D58FF;
+  --on-light-text-paragraph-hover: #FFFFFFFF;
+  --on-light-text-paragraph-active: #5F616DFF;
+  --on-light-text-negative-hover: #F5384BFF;
+  --on-light-text-negative-active: #E40C22FF;
+  --on-light-text-primary: #16181D;
+  --on-light-text-secondary: #4B4C58;
+  --on-light-text-tertiary: #9194A1;
+  --on-light-text-paragraph: #777A88;
+  --on-light-text-negative: #F31B31;
+  --inverse-text-primary-hover: #FFFFFFFF;
+  --inverse-text-primary-active: #AEB3C2FF;
+  --inverse-text-primary-brightness: #23262FFF;
+  --inverse-text-secondary-hover: #FFFFFFFF;
+  --inverse-text-secondary-active: #808293FF;
+  --inverse-text-tertiary-hover: #FFFFFFFF;
+  --inverse-text-tertiary-active: #4B4D58FF;
+  --inverse-text-paragraph-hover: #FFFFFFFF;
+  --inverse-text-paragraph-active: #5F616DFF;
+  --inverse-text-negative: #F31B31;
+  --inverse-text-negative-hover: #F5384BFF;
+  --inverse-text-negative-active: #E40C22FF;
+  --inverse-text-primary: #16181D;
+  --inverse-text-secondary: #4B4C58;
+  --inverse-text-tertiary: #9194A1;
+  --inverse-text-paragraph: #777A88;
+  --surface-solid-card-hover: #B9BDCAFF;
+  --surface-solid-card-active: #A8ACBDFF;
+  --surface-solid-card-brightness: #BFC2CFFF;
+  --surface-solid-default-hover: #545663FF;
+  --surface-solid-default-active: #464753FF;
+  --surface-transparent-primary-hover: #F8F9FC14;
+  --surface-transparent-primary-active: #F8F9FC05;
+  --surface-solid-default: #4B4C58;
+  --surface-solid-card: #AEB2C2;
+  --surface-transparent-primary: #F7F8FB0A;
+  --on-dark-surface-solid-card-hover: #545663FF;
+  --on-dark-surface-solid-card-active: #464753FF;
+  --on-dark-surface-solid-card-brightness: #595A69FF;
+  --on-dark-surface-solid-default-hover: #B9BDCAFF;
+  --on-dark-surface-solid-default-active: #A8ACBDFF;
+  --on-dark-surface-transparent-primary-hover: #F8F9FC14;
+  --on-dark-surface-transparent-primary-active: #F8F9FC05;
+  --on-dark-surface-solid-card: #4B4C58;
+  --on-dark-surface-solid-default: #AEB2C2;
+  --on-dark-surface-transparent-primary: #F7F8FB0A;
+  --on-light-surface-solid-card-hover: #F9F9FBFF;
+  --on-light-surface-solid-card-active: #E5E6F0FF;
+  --on-light-surface-solid-card-brightness: #FFFFFFFF;
+  --on-light-surface-solid-default-hover: #818492FF;
+  --on-light-surface-solid-default-active: #727583FF;
+  --on-light-surface-transparent-primary-hover: #08090C14;
+  --on-light-surface-transparent-primary-active: #08090C05;
+  --on-light-surface-solid-card: #ECEDF4;
+  --on-light-surface-solid-default: #777A88;
+  --on-light-surface-transparent-primary: #07080B0A;
+  --inverse-surface-solid-card-hover: #F9F9FBFF;
+  --inverse-surface-solid-card-active: #E5E6F0FF;
+  --inverse-surface-solid-card-brightness: #FFFFFFFF;
+  --inverse-surface-solid-default-hover: #818492FF;
+  --inverse-surface-solid-default-active: #727583FF;
+  --inverse-surface-transparent-primary-hover: #08090C14;
+  --inverse-surface-transparent-primary-active: #08090C05;
+  --inverse-surface-solid-card: #ECEDF4;
+  --inverse-surface-solid-default: #777A88;
+  --inverse-surface-transparent-primary: #07080B0A;
+  --background-primary: #07080B;
+  --background-secondary: #16181D;
+  --background-tertiary: #25262D;
+  --dark-background-primary: #07080B;
+  --dark-background-secondary: #16181D;
+  --dark-background-tertiary: #25262D;
+  --light-background-primary: #AEB2C2;
+  --light-background-secondary: #C4C7D4;
+  --light-background-tertiary: #D8DCE8;
+  --inverse-background-primary: #AEB2C2;
+  --inverse-background-secondary: #C4C7D4;
+  --inverse-background-tertiary: #D8DCE8;
+  --outline-solid-primary-hover: #FFFFFFFF;
+  --outline-solid-primary-active: #A2A4B3FF;
+  --outline-solid-secondary-hover: #FFFFFFFF;
+  --outline-solid-secondary-active: #808293FF;
+  --outline-transparent-primary-hover: #F8F9FCFF;
+  --outline-transparent-primary-active: #F8F9FC25;
+  --outline-solid-primary: #25262D;
+  --outline-solid-secondary: #4B4C58;
+  --outline-transparent-primary: #F7F8FB1F;
+  --on-dark-outline-solid-primary-hover: #FFFFFFFF;
+  --on-dark-outline-solid-primary-active: #A2A4B3FF;
+  --on-dark-outline-solid-secondary-hover: #FFFFFFFF;
+  --on-dark-outline-solid-secondary-active: #808293FF;
+  --on-dark-outline-transparent-primary-hover: #F8F9FCFF;
+  --on-dark-outline-transparent-primary-active: #F8F9FC25;
+  --on-dark-outline-solid-primary: #25262D;
+  --on-dark-outline-solid-secondary: #4B4C58;
+  --on-dark-outline-transparent-primary: #F7F8FB1F;
+  --on-light-outline-solid-primary-hover: #B2BAD2FF;
+  --on-light-outline-solid-primary-active: #C5CBDDFF;
+  --on-light-outline-solid-secondary-hover: #FFFFFFFF;
+  --on-light-outline-solid-secondary-active: #303340FF;
+  --on-light-outline-transparent-primary-hover: #08090CFF;
+  --on-light-outline-transparent-primary-active: #08090C25;
+  --on-light-outline-solid-primary: #D8DCE8;
+  --on-light-outline-solid-secondary: #AEB2C2;
+  --on-light-outline-transparent-primary: #07080B1F;
+  --inverse-outline-solid-primary-hover: #B2BAD2FF;
+  --inverse-outline-solid-primary-active: #C5CBDDFF;
+  --inverse-outline-solid-secondary-hover: #FFFFFFFF;
+  --inverse-outline-solid-secondary-active: #303340FF;
+  --inverse-outline-transparent-primary-hover: #08090CFF;
+  --inverse-outline-transparent-primary-active: #08090C25;
+  --inverse-outline-solid-primary: #D8DCE8;
+  --inverse-outline-solid-secondary: #AEB2C2;
+  --inverse-outline-transparent-primary: #07080B1F;
+  --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% );
+  --skeleton-gradient-lighter: 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-white: var(--on-dark-surface-solid-default);
+  --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-critical: var(--text-negative);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}