From 021d7f05ba4e5b87146fbb3e242b5ccd45b61eb9 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 11 Nov 2024 16:24:04 +0500 Subject: [PATCH] fix(plasma-themes): Update themes --- .../src/css/plasma_b2c.module.css | 390 ++++++- .../src/css/plasma_b2c__dark.css | 203 +++- .../src/css/plasma_b2c__light.css | 197 +++- .../src/css/plasma_web.module.css | 392 ++++++- .../src/css/plasma_web__dark.css | 201 +++- .../src/css/plasma_web__light.css | 201 +++- .../src/css/stylesSalute.module.css | 6 + .../src/css/stylesSalute__dark.css | 3 + .../src/css/stylesSalute__light.css | 3 + .../src/themes/plasma_b2c__dark.ts | 203 +++- .../src/themes/plasma_b2c__light.ts | 197 +++- .../src/themes/plasma_web__dark.ts | 201 +++- .../src/themes/plasma_web__light.ts | 201 +++- .../src/themes/stylesSalute__dark.ts | 3 + .../src/themes/stylesSalute__light.ts | 3 + .../src/tokens/plasma_b2c/index.ts | 957 ++++++++++++++++- .../src/tokens/plasma_web/index.ts | 969 +++++++++++++++++- .../src/tokens/stylesSalute/index.ts | 15 + 18 files changed, 4271 insertions(+), 74 deletions(-) diff --git a/packages/themes/plasma-themes/src/css/plasma_b2c.module.css b/packages/themes/plasma-themes/src/css/plasma_b2c.module.css index fc996825b7..0c797749f0 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c.module.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c.module.css @@ -143,6 +143,36 @@ --inverse-text-tertiary-active: #08080856; --inverse-text-paragraph-hover: #0808087A; --inverse-text-paragraph-active: #080808A3; + --inverse-text-accent-hover: #79A7FBFF; + --inverse-text-accent-active: #0D5FF8FF; + --inverse-text-positive-hover: #1EB83AFF; + --inverse-text-positive-active: #15842AFF; + --inverse-text-warning-hover: #FB7223FF; + --inverse-text-warning-active: #DC5304FF; + --inverse-text-negative-hover: #F5384BFF; + --inverse-text-negative-active: #E40C22FF; + --inverse-text-accent-minor-hover: #DCE8FEFF; + --inverse-text-accent-minor-active: #6FA0FBFF; + --inverse-text-accent: #2A72F8; + --inverse-text-accent-minor: #8BB2FC; + --inverse-text-positive: #1A9E32; + --inverse-text-warning: #FA5F05; + --inverse-text-negative: #F31B31; + --inverse-text-info: #2A72F8; + --inverse-text-info-hover: #79A7FBFF; + --inverse-text-info-active: #0D5FF8FF; + --inverse-text-positive-minor: #28D247; + --inverse-text-positive-minor-hover: #3EDA5BFF; + --inverse-text-positive-minor-active: #23B83EFF; + --inverse-text-warning-minor: #FD9C68; + --inverse-text-warning-minor-hover: #FDB086FF; + --inverse-text-warning-minor-active: #FC884AFF; + --inverse-text-negative-minor: #FF8F9A; + --inverse-text-negative-minor-hover: #FFADB6FF; + --inverse-text-negative-minor-active: #FF707EFF; + --inverse-text-info-minor: #8BB2FC; + --inverse-text-info-minor-hover: #DCE8FEFF; + --inverse-text-info-minor-active: #6FA0FBFF; --surface-solid-primary: #171717; --surface-solid-primary-brightness: #262626FF; --surface-solid-secondary: #262626; @@ -380,10 +410,93 @@ --on-light-surface-negative-active: #F31228FF; --on-light-surface-transparent-deep-hover: #080808C2; --on-light-surface-transparent-deep-active: #08080894; + --inverse-surface-solid-primary-brightness: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #F31B31; + --inverse-surface-solid-default-hover: #0D0D0DFF; + --inverse-surface-solid-default-active: #030303FF; + --inverse-surface-solid-primary-hover: #FAFAFAFF; + --inverse-surface-solid-primary-active: #F0F0F0FF; + --inverse-surface-solid-secondary-hover: #F7F7F7FF; + --inverse-surface-solid-secondary-active: #E8E8E8FF; + --inverse-surface-solid-tertiary-hover: #E8E8E8FF; + --inverse-surface-solid-tertiary-active: #D9D9D9FF; + --inverse-surface-solid-card-hover: #FFFFFFFF; + --inverse-surface-solid-card-active: #FFFFFFFF; + --inverse-surface-transparent-primary-hover: #08080812; + --inverse-surface-transparent-primary-active: #08080803; + --inverse-surface-transparent-secondary-hover: #0808081F; + --inverse-surface-transparent-secondary-active: #0808080A; + --inverse-surface-transparent-tertiary-hover: #0808083D; + --inverse-surface-transparent-tertiary-active: #0808080F; + --inverse-surface-transparent-card-hover: #FFFFFFFF; + --inverse-surface-transparent-card-active: #FFFFFFFF; + --inverse-surface-accent-hover: #4886F9FF; + --inverse-surface-accent-active: #206CF8FF; + --inverse-surface-positive-hover: #1DAF37FF; + --inverse-surface-positive-active: #18952FFF; + --inverse-surface-warning-hover: #FB7223FF; + --inverse-surface-warning-active: #F05B05FF; + --inverse-surface-negative-hover: #F5384BFF; + --inverse-surface-negative-active: #F31228FF; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-secondary: #ECECEC; + --inverse-surface-solid-tertiary: #DDDDDD; + --inverse-surface-solid-default: #080808; + --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-primary: #08080808; + --inverse-surface-transparent-secondary: #0808080F; + --inverse-surface-transparent-tertiary: #0808081F; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-transparent-deep-hover: #080808C2; + --inverse-surface-transparent-deep-active: #08080894; + --inverse-surface-clear: #00000000; + --inverse-surface-accent: #2A72F8; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-accent-minor-hover: #EBF1FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-transparent-accent-hover: #2A72F83D; + --inverse-surface-transparent-accent-active: #2A72F80F; + --inverse-surface-info: #2A72F8; + --inverse-surface-info-hover: #4886F9FF; + --inverse-surface-info-active: #206CF8FF; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #94F9A7FF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-warning-minor-hover: #FEE9DCFF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-negative-minor-hover: #FFEBEDFF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-info-minor-hover: #EBF1FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive: #1A9E321F; + --inverse-surface-transparent-positive-hover: #1A9E323D; + --inverse-surface-transparent-positive-active: #1A9E320F; + --inverse-surface-transparent-warning: #FA5F051F; + --inverse-surface-transparent-warning-hover: #FA5F053D; + --inverse-surface-transparent-warning-active: #FA5F050F; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-negative-hover: #F31B313D; + --inverse-surface-transparent-negative-active: #F31B310F; + --inverse-surface-transparent-info: #2A72F81F; + --inverse-surface-transparent-info-hover: #2A72F83D; + --inverse-surface-transparent-info-active: #2A72F80F; --background-primary: #080808; --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; @@ -393,6 +506,9 @@ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; --outline-primary: #262626; --outline-primary-hover: #303030FF; --outline-primary-active: #212121FF; @@ -596,8 +712,75 @@ --on-light-outline-info: #3F81FD; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; - --inverse-outline-primary-hover: #CCCCCCFF; - --inverse-outline-primary-active: #E6E6E6FF; + --inverse-outline-primary-hover: #ABABABFF; + --inverse-outline-primary-active: #C4C4C4FF; + --inverse-outline-primary: #DDDDDD; + --inverse-outline-secondary: #949494; + --inverse-outline-secondary-hover: #FFFFFFFF; + --inverse-outline-secondary-active: #575757FF; + --inverse-outline-tertiary: #707070; + --inverse-outline-tertiary-hover: #FFFFFFFF; + --inverse-outline-tertiary-active: #737373FF; + --inverse-outline-default: #080808; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-transparent-primary: #08080833; + --inverse-outline-transparent-primary-hover: #080808FF; + --inverse-outline-transparent-primary-active: #0808083D; + --inverse-outline-transparent-secondary: #08080866; + --inverse-outline-transparent-secondary-hover: #080808FF; + --inverse-outline-transparent-secondary-active: #0808087A; + --inverse-outline-transparent-tertiary: #0808088F; + --inverse-outline-transparent-tertiary-hover: #080808FF; + --inverse-outline-transparent-tertiary-active: #080808AB; + --inverse-outline-transparent-clear: #FFFFFF00; + --inverse-outline-transparent-clear-hover: #FFFFFFFF; + --inverse-outline-transparent-clear-active: #FFFFFFFF; + --inverse-outline-accent: #2A72F8; + --inverse-outline-accent-hover: #79A7FBFF; + --inverse-outline-accent-active: #0D5FF8FF; + --inverse-outline-accent-minor: #8BB2FC; + --inverse-outline-accent-minor-hover: #DCE8FEFF; + --inverse-outline-accent-minor-active: #6FA0FBFF; + --inverse-outline-transparent-accent: #2A72F833; + --inverse-outline-transparent-accent-hover: #2A72F8FF; + --inverse-outline-transparent-accent-active: #2A72F83D; + --inverse-outline-positive: #1A9E32; + --inverse-outline-positive-hover: #1EB83AFF; + --inverse-outline-positive-active: #15842AFF; + --inverse-outline-warning: #FA5F05; + --inverse-outline-warning-hover: #FB7223FF; + --inverse-outline-warning-active: #DC5304FF; + --inverse-outline-negative: #F31B31; + --inverse-outline-negative-hover: #F5384BFF; + --inverse-outline-negative-active: #E40C22FF; + --inverse-outline-info: #2A72F8; + --inverse-outline-info-hover: #79A7FBFF; + --inverse-outline-info-active: #0D5FF8FF; + --inverse-outline-positive-minor: #28D247; + --inverse-outline-positive-minor-hover: #3EDA5BFF; + --inverse-outline-positive-minor-active: #23B83EFF; + --inverse-outline-warning-minor: #FD9C68; + --inverse-outline-warning-minor-hover: #FDB086FF; + --inverse-outline-warning-minor-active: #FC884AFF; + --inverse-outline-negative-minor: #FF8F9A; + --inverse-outline-negative-minor-hover: #FFADB6FF; + --inverse-outline-negative-minor-active: #FF707EFF; + --inverse-outline-info-minor: #8BB2FC; + --inverse-outline-info-minor-hover: #DCE8FEFF; + --inverse-outline-info-minor-active: #6FA0FBFF; + --inverse-outline-transparent-positive: #1A9E3233; + --inverse-outline-transparent-positive-hover: #1A9E32FF; + --inverse-outline-transparent-positive-active: #1A9E323D; + --inverse-outline-transparent-warning: #FA5F0533; + --inverse-outline-transparent-warning-hover: #FA5F05FF; + --inverse-outline-transparent-warning-active: #FA5F053D; + --inverse-outline-transparent-negative: #F31B3133; + --inverse-outline-transparent-negative-hover: #F31B31FF; + --inverse-outline-transparent-negative-active: #F31B313D; + --inverse-outline-transparent-info: #2A72F833; + --inverse-outline-transparent-info-hover: #2A72F8FF; + --inverse-outline-transparent-info-active: #2A72F83D; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -645,6 +828,9 @@ --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --on-light-text-accent-gradient-hover: #CCCCCCFF; --on-light-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%),linear-gradient(89.83deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; @@ -672,6 +858,9 @@ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -815,6 +1004,9 @@ --inverse-text-secondary: #FFFFFF8F; --inverse-text-tertiary: #FFFFFF47; --inverse-text-paragraph: #FFFFFFCC; + --inverse-text-positive: #1A9E32; + --inverse-text-warning: #FA5F05; + --inverse-text-negative: #FF293E; --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-secondary-hover: #FFFFFFFF; @@ -823,6 +1015,33 @@ --inverse-text-tertiary-active: #FFFFFF56; --inverse-text-paragraph-hover: #FFFFFF7A; --inverse-text-paragraph-active: #FFFFFFA3; + --inverse-text-accent-hover: #689CFDFF; + --inverse-text-accent-active: #1767FDFF; + --inverse-text-positive-hover: #1FC13DFF; + --inverse-text-positive-active: #147B27FF; + --inverse-text-warning-hover: #FB782DFF; + --inverse-text-warning-active: #D25004FF; + --inverse-text-negative-hover: #FF5263FF; + --inverse-text-negative-active: #FF001AFF; + --inverse-text-accent-minor: #1549AB; + --inverse-text-accent-minor-hover: #FFFFFFFF; + --inverse-text-accent-minor-active: #113B88FF; + --inverse-text-info-hover: #689CFDFF; + --inverse-text-info-active: #1767FDFF; + --inverse-text-positive-minor-hover: #11A72CFF; + --inverse-text-positive-minor-active: #0D8222FF; + --inverse-text-warning-minor-hover: #CD5713FF; + --inverse-text-warning-minor-active: #A84710FF; + --inverse-text-negative-minor-hover: #C2192AFF; + --inverse-text-negative-minor-active: #7A101AFF; + --inverse-text-info-minor-hover: #FFFFFFFF; + --inverse-text-info-minor-active: #113B88FF; + --inverse-text-accent: #3F81FD; + --inverse-text-info: #3F81FD; + --inverse-text-positive-minor: #095C18; + --inverse-text-warning-minor: #85380C; + --inverse-text-negative-minor: #9C1422; + --inverse-text-info-minor: #1549AB; --surface-solid-default: #080808; --surface-solid-primary: #F5F5F5; --surface-solid-primary-brightness: #FFFFFFFF; @@ -1060,10 +1279,87 @@ --on-light-surface-negative-active: #ED0C23FF; --on-light-surface-transparent-deep-hover: #0808088F; --on-light-surface-transparent-deep-active: #080808AD; + --inverse-surface-solid-default: #FFFFFFFF; + --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #262626FF; + --inverse-surface-solid-secondary: #262626; + --inverse-surface-solid-tertiary: #363636; + --inverse-surface-solid-card: #171717; + --inverse-surface-solid-card-brightness: #262626FF; + --inverse-surface-transparent-primary: #171717; + --inverse-surface-transparent-secondary: #262626; + --inverse-surface-transparent-tertiary: #363636; + --inverse-surface-transparent-card: #080808; + --inverse-surface-transparent-card-brightness: #171717FF; + --inverse-surface-accent: #FFFFFFFF; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #FF293E; + --inverse-surface-clear: #00000000; + --inverse-surface-solid-default-hover: #FFFFFFFF; + --inverse-surface-solid-default-active: #FFFFFFFF; + --inverse-surface-solid-primary-hover: #363636FF; + --inverse-surface-solid-primary-active: #0D0D0DFF; + --inverse-surface-solid-secondary-hover: #3B3B3BFF; + --inverse-surface-solid-secondary-active: #1C1C1CFF; + --inverse-surface-solid-tertiary-hover: #4A4A4AFF; + --inverse-surface-solid-tertiary-active: #2B2B2BFF; + --inverse-surface-solid-card-hover: #363636FF; + --inverse-surface-solid-card-active: #0D0D0DFF; + --inverse-surface-transparent-primary-hover: #363636FF; + --inverse-surface-transparent-primary-active: #0D0D0DFF; + --inverse-surface-transparent-secondary-hover: #3B3B3BFF; + --inverse-surface-transparent-secondary-active: #1C1C1CFF; + --inverse-surface-transparent-tertiary-hover: #4A4A4AFF; + --inverse-surface-transparent-tertiary-active: #2B2B2BFF; + --inverse-surface-transparent-card-hover: #262626FF; + --inverse-surface-transparent-card-active: #030303FF; + --inverse-surface-accent-hover: #FFFFFFFF; + --inverse-surface-accent-active: #FFFFFFFF; + --inverse-surface-clear-hover: #00000000; + --inverse-surface-clear-active: #00000000; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-transparent-deep-hover: #0808088F; + --inverse-surface-transparent-deep-active: #080808AD; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-accent-minor-hover: #F5F8FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-transparent-accent-hover: #2A72F80A; + --inverse-surface-transparent-accent-active: #2A72F829; + --inverse-surface-info: #2A72F8; + --inverse-surface-info-hover: #528DFAFF; + --inverse-surface-info-active: #1665F8FF; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #8BF99FFF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-warning-minor-hover: #FEEFE6FF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-negative-minor-hover: #FFF5F6FF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-info-minor-hover: #F5F8FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive: #1A9E321F; + --inverse-surface-transparent-positive-hover: #1A9E320A; + --inverse-surface-transparent-positive-active: #1A9E3229; + --inverse-surface-transparent-warning: #FA5F051F; + --inverse-surface-transparent-warning-hover: #FA5F050A; + --inverse-surface-transparent-warning-active: #FA5F0529; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-negative-hover: #F31B310A; + --inverse-surface-transparent-negative-active: #F31B3129; + --inverse-surface-transparent-info: #2A72F81F; + --inverse-surface-transparent-info-hover: #2A72F80A; + --inverse-surface-transparent-info-active: #2A72F829; --background-primary: #F9F9F9; --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #0F0F0FFF; + --inverse-background-primary: #080808; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; @@ -1073,6 +1369,9 @@ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-hard: #080808F5; + --inverse-overlay-soft: #0808088F; + --inverse-overlay-blur: #08080847; --outline-secondary-hover: #A3A3A3FF; --outline-secondary-active: #8A8A8AFF; --outline-tertiary-hover: #858585FF; @@ -1276,8 +1575,75 @@ --on-light-outline-info: #3F81FD; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; - --inverse-outline-primary-hover: #000000FF; - --inverse-outline-primary-active: #CCCCCCFF; + --inverse-outline-primary-hover: #787878FF; + --inverse-outline-primary-active: #4F4F4FFF; + --inverse-outline-secondary-hover: #FFFFFFFF; + --inverse-outline-secondary-active: #404040FF; + --inverse-outline-tertiary-hover: #FFFFFFFF; + --inverse-outline-tertiary-active: #595959FF; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-transparent-primary-hover: #FFFFFFFF; + --inverse-outline-transparent-primary-active: #FFFFFF25; + --inverse-outline-transparent-secondary-hover: #FFFFFFFF; + --inverse-outline-transparent-secondary-active: #FFFFFF3D; + --inverse-outline-transparent-tertiary-hover: #FFFFFFFF; + --inverse-outline-transparent-tertiary-active: #FFFFFF7A; + --inverse-outline-transparent-clear-hover: #FFFFFFFF; + --inverse-outline-transparent-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #689CFDFF; + --inverse-outline-accent-active: #1767FDFF; + --inverse-outline-accent-minor-hover: #FFFFFFFF; + --inverse-outline-accent-minor-active: #113B88FF; + --inverse-outline-transparent-accent-hover: #3F82FDFF; + --inverse-outline-transparent-accent-active: #3F82FD56; + --inverse-outline-positive-hover: #2BD44AFF; + --inverse-outline-positive-active: #1D9032FF; + --inverse-outline-warning-hover: #FF8B4DFF; + --inverse-outline-warning-active: #FA5700FF; + --inverse-outline-negative-hover: #FF6675FF; + --inverse-outline-negative-active: #FF142CFF; + --inverse-outline-info-hover: #689CFDFF; + --inverse-outline-info-active: #1767FDFF; + --inverse-outline-positive-minor-hover: #11A72CFF; + --inverse-outline-positive-minor-active: #0D8222FF; + --inverse-outline-warning-minor-hover: #CD5713FF; + --inverse-outline-warning-minor-active: #A84710FF; + --inverse-outline-negative-minor-hover: #C2192AFF; + --inverse-outline-negative-minor-active: #7A101AFF; + --inverse-outline-info-minor-hover: #FFFFFFFF; + --inverse-outline-info-minor-active: #113B88FF; + --inverse-outline-transparent-positive-hover: #1A9E32FF; + --inverse-outline-transparent-positive-active: #1A9E3256; + --inverse-outline-transparent-warning-hover: #FA5F05FF; + --inverse-outline-transparent-warning-active: #FA5F0556; + --inverse-outline-transparent-negative-hover: #FF293EFF; + --inverse-outline-transparent-negative-active: #FF293E56; + --inverse-outline-transparent-info-hover: #3F82FDFF; + --inverse-outline-transparent-info-active: #3F82FD56; + --inverse-outline-primary: #262626; + --inverse-outline-secondary: #4E4E4E; + --inverse-outline-tertiary: #707070; + --inverse-outline-default: #F9F9F9; + --inverse-outline-transparent-primary: #FFFFFF1F; + --inverse-outline-transparent-secondary: #FFFFFF33; + --inverse-outline-transparent-tertiary: #FFFFFF66; + --inverse-outline-transparent-clear: #FFFFFF00; + --inverse-outline-accent: #3F81FD; + --inverse-outline-accent-minor: #1549AB; + --inverse-outline-transparent-accent: #3F81FD47; + --inverse-outline-positive: #24B23E; + --inverse-outline-warning: #FF7024; + --inverse-outline-negative: #FF3D51; + --inverse-outline-info: #3F81FD; + --inverse-outline-positive-minor: #095C18; + --inverse-outline-warning-minor: #85380C; + --inverse-outline-negative-minor: #9C1422; + --inverse-outline-info-minor: #1549AB; + --inverse-outline-transparent-positive: #1A9E3247; + --inverse-outline-transparent-warning: #FA5F0547; + --inverse-outline-transparent-negative: #FF293E47; + --inverse-outline-transparent-info: #3F81FD47; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -1325,6 +1691,9 @@ --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --on-light-text-accent-gradient-hover: #000000FF; --on-light-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient-hover: #FFFFFFFF; + --inverse-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient: linear-gradient(90deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; @@ -1352,6 +1721,9 @@ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(135deg, #000000FF 0%, #FFFFFFFF 100%); + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; --inverse-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -1377,11 +1749,11 @@ .dark, .light { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css b/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css index 5411a8cde7..ac7d4b2fe1 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css @@ -143,6 +143,36 @@ --inverse-text-tertiary-active: #08080856; --inverse-text-paragraph-hover: #0808087A; --inverse-text-paragraph-active: #080808A3; + --inverse-text-accent-hover: #79A7FBFF; + --inverse-text-accent-active: #0D5FF8FF; + --inverse-text-positive-hover: #1EB83AFF; + --inverse-text-positive-active: #15842AFF; + --inverse-text-warning-hover: #FB7223FF; + --inverse-text-warning-active: #DC5304FF; + --inverse-text-negative-hover: #F5384BFF; + --inverse-text-negative-active: #E40C22FF; + --inverse-text-accent-minor-hover: #DCE8FEFF; + --inverse-text-accent-minor-active: #6FA0FBFF; + --inverse-text-accent: #2A72F8; + --inverse-text-accent-minor: #8BB2FC; + --inverse-text-positive: #1A9E32; + --inverse-text-warning: #FA5F05; + --inverse-text-negative: #F31B31; + --inverse-text-info: #2A72F8; + --inverse-text-info-hover: #79A7FBFF; + --inverse-text-info-active: #0D5FF8FF; + --inverse-text-positive-minor: #28D247; + --inverse-text-positive-minor-hover: #3EDA5BFF; + --inverse-text-positive-minor-active: #23B83EFF; + --inverse-text-warning-minor: #FD9C68; + --inverse-text-warning-minor-hover: #FDB086FF; + --inverse-text-warning-minor-active: #FC884AFF; + --inverse-text-negative-minor: #FF8F9A; + --inverse-text-negative-minor-hover: #FFADB6FF; + --inverse-text-negative-minor-active: #FF707EFF; + --inverse-text-info-minor: #8BB2FC; + --inverse-text-info-minor-hover: #DCE8FEFF; + --inverse-text-info-minor-active: #6FA0FBFF; --surface-solid-primary: #171717; --surface-solid-primary-brightness: #262626FF; --surface-solid-secondary: #262626; @@ -380,10 +410,93 @@ --on-light-surface-negative-active: #F31228FF; --on-light-surface-transparent-deep-hover: #080808C2; --on-light-surface-transparent-deep-active: #08080894; + --inverse-surface-solid-primary-brightness: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #F31B31; + --inverse-surface-solid-default-hover: #0D0D0DFF; + --inverse-surface-solid-default-active: #030303FF; + --inverse-surface-solid-primary-hover: #FAFAFAFF; + --inverse-surface-solid-primary-active: #F0F0F0FF; + --inverse-surface-solid-secondary-hover: #F7F7F7FF; + --inverse-surface-solid-secondary-active: #E8E8E8FF; + --inverse-surface-solid-tertiary-hover: #E8E8E8FF; + --inverse-surface-solid-tertiary-active: #D9D9D9FF; + --inverse-surface-solid-card-hover: #FFFFFFFF; + --inverse-surface-solid-card-active: #FFFFFFFF; + --inverse-surface-transparent-primary-hover: #08080812; + --inverse-surface-transparent-primary-active: #08080803; + --inverse-surface-transparent-secondary-hover: #0808081F; + --inverse-surface-transparent-secondary-active: #0808080A; + --inverse-surface-transparent-tertiary-hover: #0808083D; + --inverse-surface-transparent-tertiary-active: #0808080F; + --inverse-surface-transparent-card-hover: #FFFFFFFF; + --inverse-surface-transparent-card-active: #FFFFFFFF; + --inverse-surface-accent-hover: #4886F9FF; + --inverse-surface-accent-active: #206CF8FF; + --inverse-surface-positive-hover: #1DAF37FF; + --inverse-surface-positive-active: #18952FFF; + --inverse-surface-warning-hover: #FB7223FF; + --inverse-surface-warning-active: #F05B05FF; + --inverse-surface-negative-hover: #F5384BFF; + --inverse-surface-negative-active: #F31228FF; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-secondary: #ECECEC; + --inverse-surface-solid-tertiary: #DDDDDD; + --inverse-surface-solid-default: #080808; + --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-primary: #08080808; + --inverse-surface-transparent-secondary: #0808080F; + --inverse-surface-transparent-tertiary: #0808081F; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-transparent-deep-hover: #080808C2; + --inverse-surface-transparent-deep-active: #08080894; + --inverse-surface-clear: #00000000; + --inverse-surface-accent: #2A72F8; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-accent-minor-hover: #EBF1FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-transparent-accent-hover: #2A72F83D; + --inverse-surface-transparent-accent-active: #2A72F80F; + --inverse-surface-info: #2A72F8; + --inverse-surface-info-hover: #4886F9FF; + --inverse-surface-info-active: #206CF8FF; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #94F9A7FF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-warning-minor-hover: #FEE9DCFF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-negative-minor-hover: #FFEBEDFF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-info-minor-hover: #EBF1FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive: #1A9E321F; + --inverse-surface-transparent-positive-hover: #1A9E323D; + --inverse-surface-transparent-positive-active: #1A9E320F; + --inverse-surface-transparent-warning: #FA5F051F; + --inverse-surface-transparent-warning-hover: #FA5F053D; + --inverse-surface-transparent-warning-active: #FA5F050F; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-negative-hover: #F31B313D; + --inverse-surface-transparent-negative-active: #F31B310F; + --inverse-surface-transparent-info: #2A72F81F; + --inverse-surface-transparent-info-hover: #2A72F83D; + --inverse-surface-transparent-info-active: #2A72F80F; --background-primary: #080808; --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; @@ -393,6 +506,9 @@ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; --outline-primary: #262626; --outline-primary-hover: #303030FF; --outline-primary-active: #212121FF; @@ -596,8 +712,75 @@ --on-light-outline-info: #3F81FD; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; - --inverse-outline-primary-hover: #CCCCCCFF; - --inverse-outline-primary-active: #E6E6E6FF; + --inverse-outline-primary-hover: #ABABABFF; + --inverse-outline-primary-active: #C4C4C4FF; + --inverse-outline-primary: #DDDDDD; + --inverse-outline-secondary: #949494; + --inverse-outline-secondary-hover: #FFFFFFFF; + --inverse-outline-secondary-active: #575757FF; + --inverse-outline-tertiary: #707070; + --inverse-outline-tertiary-hover: #FFFFFFFF; + --inverse-outline-tertiary-active: #737373FF; + --inverse-outline-default: #080808; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-transparent-primary: #08080833; + --inverse-outline-transparent-primary-hover: #080808FF; + --inverse-outline-transparent-primary-active: #0808083D; + --inverse-outline-transparent-secondary: #08080866; + --inverse-outline-transparent-secondary-hover: #080808FF; + --inverse-outline-transparent-secondary-active: #0808087A; + --inverse-outline-transparent-tertiary: #0808088F; + --inverse-outline-transparent-tertiary-hover: #080808FF; + --inverse-outline-transparent-tertiary-active: #080808AB; + --inverse-outline-transparent-clear: #FFFFFF00; + --inverse-outline-transparent-clear-hover: #FFFFFFFF; + --inverse-outline-transparent-clear-active: #FFFFFFFF; + --inverse-outline-accent: #2A72F8; + --inverse-outline-accent-hover: #79A7FBFF; + --inverse-outline-accent-active: #0D5FF8FF; + --inverse-outline-accent-minor: #8BB2FC; + --inverse-outline-accent-minor-hover: #DCE8FEFF; + --inverse-outline-accent-minor-active: #6FA0FBFF; + --inverse-outline-transparent-accent: #2A72F833; + --inverse-outline-transparent-accent-hover: #2A72F8FF; + --inverse-outline-transparent-accent-active: #2A72F83D; + --inverse-outline-positive: #1A9E32; + --inverse-outline-positive-hover: #1EB83AFF; + --inverse-outline-positive-active: #15842AFF; + --inverse-outline-warning: #FA5F05; + --inverse-outline-warning-hover: #FB7223FF; + --inverse-outline-warning-active: #DC5304FF; + --inverse-outline-negative: #F31B31; + --inverse-outline-negative-hover: #F5384BFF; + --inverse-outline-negative-active: #E40C22FF; + --inverse-outline-info: #2A72F8; + --inverse-outline-info-hover: #79A7FBFF; + --inverse-outline-info-active: #0D5FF8FF; + --inverse-outline-positive-minor: #28D247; + --inverse-outline-positive-minor-hover: #3EDA5BFF; + --inverse-outline-positive-minor-active: #23B83EFF; + --inverse-outline-warning-minor: #FD9C68; + --inverse-outline-warning-minor-hover: #FDB086FF; + --inverse-outline-warning-minor-active: #FC884AFF; + --inverse-outline-negative-minor: #FF8F9A; + --inverse-outline-negative-minor-hover: #FFADB6FF; + --inverse-outline-negative-minor-active: #FF707EFF; + --inverse-outline-info-minor: #8BB2FC; + --inverse-outline-info-minor-hover: #DCE8FEFF; + --inverse-outline-info-minor-active: #6FA0FBFF; + --inverse-outline-transparent-positive: #1A9E3233; + --inverse-outline-transparent-positive-hover: #1A9E32FF; + --inverse-outline-transparent-positive-active: #1A9E323D; + --inverse-outline-transparent-warning: #FA5F0533; + --inverse-outline-transparent-warning-hover: #FA5F05FF; + --inverse-outline-transparent-warning-active: #FA5F053D; + --inverse-outline-transparent-negative: #F31B3133; + --inverse-outline-transparent-negative-hover: #F31B31FF; + --inverse-outline-transparent-negative-active: #F31B313D; + --inverse-outline-transparent-info: #2A72F833; + --inverse-outline-transparent-info-hover: #2A72F8FF; + --inverse-outline-transparent-info-active: #2A72F83D; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -645,6 +828,9 @@ --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --on-light-text-accent-gradient-hover: #CCCCCCFF; --on-light-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%),linear-gradient(89.83deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; @@ -672,6 +858,9 @@ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -697,11 +886,11 @@ :root { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/css/plasma_b2c__light.css b/packages/themes/plasma-themes/src/css/plasma_b2c__light.css index f9b60575f9..cd5fa48152 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c__light.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c__light.css @@ -135,6 +135,9 @@ --inverse-text-secondary: #FFFFFF8F; --inverse-text-tertiary: #FFFFFF47; --inverse-text-paragraph: #FFFFFFCC; + --inverse-text-positive: #1A9E32; + --inverse-text-warning: #FA5F05; + --inverse-text-negative: #FF293E; --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-secondary-hover: #FFFFFFFF; @@ -143,6 +146,33 @@ --inverse-text-tertiary-active: #FFFFFF56; --inverse-text-paragraph-hover: #FFFFFF7A; --inverse-text-paragraph-active: #FFFFFFA3; + --inverse-text-accent-hover: #689CFDFF; + --inverse-text-accent-active: #1767FDFF; + --inverse-text-positive-hover: #1FC13DFF; + --inverse-text-positive-active: #147B27FF; + --inverse-text-warning-hover: #FB782DFF; + --inverse-text-warning-active: #D25004FF; + --inverse-text-negative-hover: #FF5263FF; + --inverse-text-negative-active: #FF001AFF; + --inverse-text-accent-minor: #1549AB; + --inverse-text-accent-minor-hover: #FFFFFFFF; + --inverse-text-accent-minor-active: #113B88FF; + --inverse-text-info-hover: #689CFDFF; + --inverse-text-info-active: #1767FDFF; + --inverse-text-positive-minor-hover: #11A72CFF; + --inverse-text-positive-minor-active: #0D8222FF; + --inverse-text-warning-minor-hover: #CD5713FF; + --inverse-text-warning-minor-active: #A84710FF; + --inverse-text-negative-minor-hover: #C2192AFF; + --inverse-text-negative-minor-active: #7A101AFF; + --inverse-text-info-minor-hover: #FFFFFFFF; + --inverse-text-info-minor-active: #113B88FF; + --inverse-text-accent: #3F81FD; + --inverse-text-info: #3F81FD; + --inverse-text-positive-minor: #095C18; + --inverse-text-warning-minor: #85380C; + --inverse-text-negative-minor: #9C1422; + --inverse-text-info-minor: #1549AB; --surface-solid-default: #080808; --surface-solid-primary: #F5F5F5; --surface-solid-primary-brightness: #FFFFFFFF; @@ -380,10 +410,87 @@ --on-light-surface-negative-active: #ED0C23FF; --on-light-surface-transparent-deep-hover: #0808088F; --on-light-surface-transparent-deep-active: #080808AD; + --inverse-surface-solid-default: #FFFFFFFF; + --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #262626FF; + --inverse-surface-solid-secondary: #262626; + --inverse-surface-solid-tertiary: #363636; + --inverse-surface-solid-card: #171717; + --inverse-surface-solid-card-brightness: #262626FF; + --inverse-surface-transparent-primary: #171717; + --inverse-surface-transparent-secondary: #262626; + --inverse-surface-transparent-tertiary: #363636; + --inverse-surface-transparent-card: #080808; + --inverse-surface-transparent-card-brightness: #171717FF; + --inverse-surface-accent: #FFFFFFFF; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #FF293E; + --inverse-surface-clear: #00000000; + --inverse-surface-solid-default-hover: #FFFFFFFF; + --inverse-surface-solid-default-active: #FFFFFFFF; + --inverse-surface-solid-primary-hover: #363636FF; + --inverse-surface-solid-primary-active: #0D0D0DFF; + --inverse-surface-solid-secondary-hover: #3B3B3BFF; + --inverse-surface-solid-secondary-active: #1C1C1CFF; + --inverse-surface-solid-tertiary-hover: #4A4A4AFF; + --inverse-surface-solid-tertiary-active: #2B2B2BFF; + --inverse-surface-solid-card-hover: #363636FF; + --inverse-surface-solid-card-active: #0D0D0DFF; + --inverse-surface-transparent-primary-hover: #363636FF; + --inverse-surface-transparent-primary-active: #0D0D0DFF; + --inverse-surface-transparent-secondary-hover: #3B3B3BFF; + --inverse-surface-transparent-secondary-active: #1C1C1CFF; + --inverse-surface-transparent-tertiary-hover: #4A4A4AFF; + --inverse-surface-transparent-tertiary-active: #2B2B2BFF; + --inverse-surface-transparent-card-hover: #262626FF; + --inverse-surface-transparent-card-active: #030303FF; + --inverse-surface-accent-hover: #FFFFFFFF; + --inverse-surface-accent-active: #FFFFFFFF; + --inverse-surface-clear-hover: #00000000; + --inverse-surface-clear-active: #00000000; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-transparent-deep-hover: #0808088F; + --inverse-surface-transparent-deep-active: #080808AD; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-accent-minor-hover: #F5F8FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-transparent-accent-hover: #2A72F80A; + --inverse-surface-transparent-accent-active: #2A72F829; + --inverse-surface-info: #2A72F8; + --inverse-surface-info-hover: #528DFAFF; + --inverse-surface-info-active: #1665F8FF; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #8BF99FFF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-warning-minor-hover: #FEEFE6FF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-negative-minor-hover: #FFF5F6FF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-info-minor-hover: #F5F8FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive: #1A9E321F; + --inverse-surface-transparent-positive-hover: #1A9E320A; + --inverse-surface-transparent-positive-active: #1A9E3229; + --inverse-surface-transparent-warning: #FA5F051F; + --inverse-surface-transparent-warning-hover: #FA5F050A; + --inverse-surface-transparent-warning-active: #FA5F0529; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-negative-hover: #F31B310A; + --inverse-surface-transparent-negative-active: #F31B3129; + --inverse-surface-transparent-info: #2A72F81F; + --inverse-surface-transparent-info-hover: #2A72F80A; + --inverse-surface-transparent-info-active: #2A72F829; --background-primary: #F9F9F9; --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #0F0F0FFF; + --inverse-background-primary: #080808; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; @@ -393,6 +500,9 @@ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-hard: #080808F5; + --inverse-overlay-soft: #0808088F; + --inverse-overlay-blur: #08080847; --outline-secondary-hover: #A3A3A3FF; --outline-secondary-active: #8A8A8AFF; --outline-tertiary-hover: #858585FF; @@ -596,8 +706,75 @@ --on-light-outline-info: #3F81FD; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; - --inverse-outline-primary-hover: #000000FF; - --inverse-outline-primary-active: #CCCCCCFF; + --inverse-outline-primary-hover: #787878FF; + --inverse-outline-primary-active: #4F4F4FFF; + --inverse-outline-secondary-hover: #FFFFFFFF; + --inverse-outline-secondary-active: #404040FF; + --inverse-outline-tertiary-hover: #FFFFFFFF; + --inverse-outline-tertiary-active: #595959FF; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-transparent-primary-hover: #FFFFFFFF; + --inverse-outline-transparent-primary-active: #FFFFFF25; + --inverse-outline-transparent-secondary-hover: #FFFFFFFF; + --inverse-outline-transparent-secondary-active: #FFFFFF3D; + --inverse-outline-transparent-tertiary-hover: #FFFFFFFF; + --inverse-outline-transparent-tertiary-active: #FFFFFF7A; + --inverse-outline-transparent-clear-hover: #FFFFFFFF; + --inverse-outline-transparent-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #689CFDFF; + --inverse-outline-accent-active: #1767FDFF; + --inverse-outline-accent-minor-hover: #FFFFFFFF; + --inverse-outline-accent-minor-active: #113B88FF; + --inverse-outline-transparent-accent-hover: #3F82FDFF; + --inverse-outline-transparent-accent-active: #3F82FD56; + --inverse-outline-positive-hover: #2BD44AFF; + --inverse-outline-positive-active: #1D9032FF; + --inverse-outline-warning-hover: #FF8B4DFF; + --inverse-outline-warning-active: #FA5700FF; + --inverse-outline-negative-hover: #FF6675FF; + --inverse-outline-negative-active: #FF142CFF; + --inverse-outline-info-hover: #689CFDFF; + --inverse-outline-info-active: #1767FDFF; + --inverse-outline-positive-minor-hover: #11A72CFF; + --inverse-outline-positive-minor-active: #0D8222FF; + --inverse-outline-warning-minor-hover: #CD5713FF; + --inverse-outline-warning-minor-active: #A84710FF; + --inverse-outline-negative-minor-hover: #C2192AFF; + --inverse-outline-negative-minor-active: #7A101AFF; + --inverse-outline-info-minor-hover: #FFFFFFFF; + --inverse-outline-info-minor-active: #113B88FF; + --inverse-outline-transparent-positive-hover: #1A9E32FF; + --inverse-outline-transparent-positive-active: #1A9E3256; + --inverse-outline-transparent-warning-hover: #FA5F05FF; + --inverse-outline-transparent-warning-active: #FA5F0556; + --inverse-outline-transparent-negative-hover: #FF293EFF; + --inverse-outline-transparent-negative-active: #FF293E56; + --inverse-outline-transparent-info-hover: #3F82FDFF; + --inverse-outline-transparent-info-active: #3F82FD56; + --inverse-outline-primary: #262626; + --inverse-outline-secondary: #4E4E4E; + --inverse-outline-tertiary: #707070; + --inverse-outline-default: #F9F9F9; + --inverse-outline-transparent-primary: #FFFFFF1F; + --inverse-outline-transparent-secondary: #FFFFFF33; + --inverse-outline-transparent-tertiary: #FFFFFF66; + --inverse-outline-transparent-clear: #FFFFFF00; + --inverse-outline-accent: #3F81FD; + --inverse-outline-accent-minor: #1549AB; + --inverse-outline-transparent-accent: #3F81FD47; + --inverse-outline-positive: #24B23E; + --inverse-outline-warning: #FF7024; + --inverse-outline-negative: #FF3D51; + --inverse-outline-info: #3F81FD; + --inverse-outline-positive-minor: #095C18; + --inverse-outline-warning-minor: #85380C; + --inverse-outline-negative-minor: #9C1422; + --inverse-outline-info-minor: #1549AB; + --inverse-outline-transparent-positive: #1A9E3247; + --inverse-outline-transparent-warning: #FA5F0547; + --inverse-outline-transparent-negative: #FF293E47; + --inverse-outline-transparent-info: #3F81FD47; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -645,6 +822,9 @@ --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --on-light-text-accent-gradient-hover: #000000FF; --on-light-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient-hover: #FFFFFFFF; + --inverse-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient: linear-gradient(90deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; @@ -672,6 +852,9 @@ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(135deg, #000000FF 0%, #FFFFFFFF 100%); + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; --inverse-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -697,11 +880,11 @@ :root { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/css/plasma_web.module.css b/packages/themes/plasma-themes/src/css/plasma_web.module.css index cc7a37bb5c..9bbd38caa8 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web.module.css +++ b/packages/themes/plasma-themes/src/css/plasma_web.module.css @@ -143,6 +143,36 @@ --inverse-text-paragraph-hover: #0808087A; --inverse-text-paragraph-active: #080808A3; --inverse-text-paragraph: #080808CC; + --inverse-text-accent-hover: #79A7FBFF; + --inverse-text-accent-active: #0D5FF8FF; + --inverse-text-accent-minor-hover: #DCE8FEFF; + --inverse-text-accent-minor-active: #6FA0FBFF; + --inverse-text-positive-hover: #13AA2CFF; + --inverse-text-positive-active: #0D731EFF; + --inverse-text-warning-hover: #FD650DFF; + --inverse-text-warning-active: #CA4B02FF; + --inverse-text-negative-hover: #F5384BFF; + --inverse-text-negative-active: #E40C22FF; + --inverse-text-info-hover: #79A7FBFF; + --inverse-text-info-active: #0D5FF8FF; + --inverse-text-positive-minor-hover: #3EDA5BFF; + --inverse-text-positive-minor-active: #23B83EFF; + --inverse-text-warning-minor-hover: #FDB086FF; + --inverse-text-warning-minor-active: #FC884AFF; + --inverse-text-negative-minor-hover: #FFADB6FF; + --inverse-text-negative-minor-active: #FF707EFF; + --inverse-text-info-minor-hover: #DCE8FEFF; + --inverse-text-info-minor-active: #6FA0FBFF; + --inverse-text-accent: #2A72F8; + --inverse-text-accent-minor: #8BB2FC; + --inverse-text-positive: #108E26; + --inverse-text-warning: #E85702; + --inverse-text-negative: #F31B31; + --inverse-text-info: #2A72F8; + --inverse-text-positive-minor: #28D247; + --inverse-text-warning-minor: #FD9C68; + --inverse-text-negative-minor: #FF8F9A; + --inverse-text-info-minor: #8BB2FC; --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; @@ -380,10 +410,93 @@ --on-light-surface-info: #2A72F8; --on-light-surface-info-minor: #DEE9FF; --on-light-surface-transparent-info: #2A72F81F; + --inverse-surface-solid-primary-hover: #FAFAFAFF; + --inverse-surface-solid-primary-active: #F0F0F0FF; + --inverse-surface-solid-primary-brightness: #FFFFFFFF; + --inverse-surface-solid-secondary-hover: #F7F7F7FF; + --inverse-surface-solid-secondary-active: #E8E8E8FF; + --inverse-surface-solid-tertiary-hover: #E8E8E8FF; + --inverse-surface-solid-tertiary-active: #D9D9D9FF; + --inverse-surface-solid-card-hover: #FFFFFFFF; + --inverse-surface-solid-card-active: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; + --inverse-surface-solid-default-hover: #0D0D0DFF; + --inverse-surface-solid-default-active: #030303FF; + --inverse-surface-transparent-primary-hover: #08080812; + --inverse-surface-transparent-primary-active: #08080803; + --inverse-surface-transparent-secondary-hover: #0808081F; + --inverse-surface-transparent-secondary-active: #0808080A; + --inverse-surface-transparent-tertiary-hover: #0808083D; + --inverse-surface-transparent-tertiary-active: #0808080F; + --inverse-surface-transparent-deep-hover: #080808C2; + --inverse-surface-transparent-deep-active: #08080894; + --inverse-surface-transparent-card-hover: #FFFFFFFF; + --inverse-surface-transparent-card-active: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-accent-hover: #4886F9FF; + --inverse-surface-accent-active: #206CF8FF; + --inverse-surface-accent-minor-hover: #EBF1FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent-hover: #2A72F83D; + --inverse-surface-transparent-accent-active: #2A72F80F; + --inverse-surface-positive-hover: #12A12AFF; + --inverse-surface-positive-active: #0F8523FF; + --inverse-surface-warning-hover: #FC5E03FF; + --inverse-surface-warning-active: #DE5302FF; + --inverse-surface-negative-hover: #F5384BFF; + --inverse-surface-negative-active: #F31228FF; + --inverse-surface-info-hover: #4886F9FF; + --inverse-surface-info-active: #206CF8FF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #94F9A7FF; + --inverse-surface-warning-minor-hover: #FEE9DCFF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor-hover: #FFEBEDFF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor-hover: #EBF1FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive-hover: #108E253D; + --inverse-surface-transparent-positive-active: #108E250F; + --inverse-surface-transparent-warning-hover: #E857023D; + --inverse-surface-transparent-warning-active: #E857020F; + --inverse-surface-transparent-negative-hover: #F31B313D; + --inverse-surface-transparent-negative-active: #F31B310F; + --inverse-surface-transparent-info-hover: #2A72F83D; + --inverse-surface-transparent-info-active: #2A72F80F; + --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-secondary: #ECECEC; + --inverse-surface-solid-tertiary: #DDDDDD; + --inverse-surface-solid-default: #080808; + --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-primary: #08080808; + --inverse-surface-transparent-secondary: #0808080F; + --inverse-surface-transparent-tertiary: #0808081F; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-clear: #FFFFFF00; + --inverse-surface-accent: #2A72F8; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-positive: #108E26; + --inverse-surface-warning: #E85702; + --inverse-surface-negative: #F31B31; + --inverse-surface-info: #2A72F8; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-transparent-positive: #108E261F; + --inverse-surface-transparent-warning: #E857021F; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-info: #2A72F81F; --background-primary: #080808; --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; @@ -393,6 +506,9 @@ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; --outline-solid-primary-hover: #303030FF; --outline-solid-primary-active: #212121FF; --outline-solid-secondary-hover: #595959FF; @@ -594,6 +710,75 @@ --on-light-outline-info: #2A72F8; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; + --inverse-outline-solid-primary-hover: #ABABABFF; + --inverse-outline-solid-primary-active: #C4C4C4FF; + --inverse-outline-solid-secondary-hover: #FFFFFFFF; + --inverse-outline-solid-secondary-active: #575757FF; + --inverse-outline-solid-tertiary-hover: #FFFFFFFF; + --inverse-outline-solid-tertiary-active: #737373FF; + --inverse-outline-transparent-primary-hover: #080808FF; + --inverse-outline-transparent-primary-active: #0808083D; + --inverse-outline-transparent-secondary-hover: #080808FF; + --inverse-outline-transparent-secondary-active: #0808087A; + --inverse-outline-transparent-tertiary-hover: #080808FF; + --inverse-outline-transparent-tertiary-active: #080808AB; + --inverse-outline-clear-hover: #FFFFFFFF; + --inverse-outline-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #79A7FBFF; + --inverse-outline-accent-active: #0D5FF8FF; + --inverse-outline-accent-minor-hover: #DCE8FEFF; + --inverse-outline-accent-minor-active: #6FA0FBFF; + --inverse-outline-transparent-accent-hover: #2A72F8FF; + --inverse-outline-transparent-accent-active: #2A72F83D; + --inverse-outline-positive-hover: #13AA2CFF; + --inverse-outline-positive-active: #0D731EFF; + --inverse-outline-warning-hover: #FD650DFF; + --inverse-outline-warning-active: #CA4B02FF; + --inverse-outline-negative-hover: #F5384BFF; + --inverse-outline-negative-active: #E40C22FF; + --inverse-outline-info-hover: #79A7FBFF; + --inverse-outline-info-active: #0D5FF8FF; + --inverse-outline-positive-minor-hover: #3EDA5BFF; + --inverse-outline-positive-minor-active: #23B83EFF; + --inverse-outline-warning-minor-hover: #FDB086FF; + --inverse-outline-warning-minor-active: #FC884AFF; + --inverse-outline-negative-minor-hover: #FFADB6FF; + --inverse-outline-negative-minor-active: #FF707EFF; + --inverse-outline-info-minor-hover: #DCE8FEFF; + --inverse-outline-info-minor-active: #6FA0FBFF; + --inverse-outline-transparent-positive-hover: #108E25FF; + --inverse-outline-transparent-positive-active: #108E253D; + --inverse-outline-transparent-warning-hover: #E85702FF; + --inverse-outline-transparent-warning-active: #E857023D; + --inverse-outline-transparent-negative-hover: #F31B31FF; + --inverse-outline-transparent-negative-active: #F31B313D; + --inverse-outline-transparent-info-hover: #2A72F8FF; + --inverse-outline-transparent-info-active: #2A72F83D; + --inverse-outline-solid-primary: #DDDDDD; + --inverse-outline-solid-secondary: #949494; + --inverse-outline-solid-tertiary: #707070; + --inverse-outline-transparent-primary: #08080833; + --inverse-outline-transparent-secondary: #08080866; + --inverse-outline-transparent-tertiary: #0808088F; + --inverse-outline-clear: #FFFFFF00; + --inverse-outline-default: #080808; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-accent: #2A72F8; + --inverse-outline-accent-minor: #8BB2FC; + --inverse-outline-transparent-accent: #2A72F833; + --inverse-outline-positive: #108E26; + --inverse-outline-warning: #E85702; + --inverse-outline-negative: #F31B31; + --inverse-outline-info: #2A72F8; + --inverse-outline-positive-minor: #28D247; + --inverse-outline-warning-minor: #FD9C68; + --inverse-outline-negative-minor: #FF8F9A; + --inverse-outline-info-minor: #8BB2FC; + --inverse-outline-transparent-positive: #108E2633; + --inverse-outline-transparent-warning: #E8570233; + --inverse-outline-transparent-negative: #F31B3133; + --inverse-outline-transparent-info: #2A72F833; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -641,6 +826,9 @@ --on-light-text-accent-gradient-hover: #CCCCCCFF; --on-light-text-accent-gradient-active: #E6E6E6FF; --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%),linear-gradient(89.83deg, #5E94FFFF 0%, #43DBFAFF 100%); @@ -668,6 +856,9 @@ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -819,6 +1010,36 @@ --inverse-text-paragraph-hover: #FFFFFF7A; --inverse-text-paragraph-active: #FFFFFFA3; --inverse-text-paragraph: #FFFFFFCC; + --inverse-text-accent-hover: #7AA9FFFF; + --inverse-text-accent-active: #2974FFFF; + --inverse-text-accent-minor-hover: #FFFFFFFF; + --inverse-text-accent-minor-active: #113B88FF; + --inverse-text-positive-hover: #2BD44AFF; + --inverse-text-positive-active: #1D9032FF; + --inverse-text-warning-hover: #FF8B4DFF; + --inverse-text-warning-active: #FA5700FF; + --inverse-text-negative-hover: #FF6675FF; + --inverse-text-negative-active: #FF142CFF; + --inverse-text-info-hover: #7AA9FFFF; + --inverse-text-info-active: #2974FFFF; + --inverse-text-positive-minor-hover: #11A72CFF; + --inverse-text-positive-minor-active: #0D8222FF; + --inverse-text-warning-minor-hover: #CD5713FF; + --inverse-text-warning-minor-active: #A84710FF; + --inverse-text-negative-minor-hover: #C2192AFF; + --inverse-text-negative-minor-active: #7A101AFF; + --inverse-text-info-minor-hover: #FFFFFFFF; + --inverse-text-info-minor-active: #113B88FF; + --inverse-text-accent: #528EFF; + --inverse-text-accent-minor: #1549AB; + --inverse-text-positive: #24B23E; + --inverse-text-warning: #FF7024; + --inverse-text-negative: #FF3D51; + --inverse-text-info: #528EFF; + --inverse-text-positive-minor: #095C18; + --inverse-text-warning-minor: #85380C; + --inverse-text-negative-minor: #9C1422; + --inverse-text-info-minor: #1549AB; --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; @@ -1056,10 +1277,93 @@ --on-light-surface-transparent-negative: #F31B311F; --on-light-surface-info: #2A72F8; --on-light-surface-transparent-info: #2A72F81F; + --inverse-surface-solid-primary-hover: #363636FF; + --inverse-surface-solid-primary-active: #0D0D0DFF; + --inverse-surface-solid-primary-brightness: #262626FF; + --inverse-surface-solid-secondary-hover: #3B3B3BFF; + --inverse-surface-solid-secondary-active: #1C1C1CFF; + --inverse-surface-solid-tertiary-hover: #4A4A4AFF; + --inverse-surface-solid-tertiary-active: #2B2B2BFF; + --inverse-surface-solid-card-hover: #363636FF; + --inverse-surface-solid-card-active: #0D0D0DFF; + --inverse-surface-solid-card-brightness: #262626FF; + --inverse-surface-solid-default-hover: #FFFFFFFF; + --inverse-surface-solid-default-active: #F5F5F5FF; + --inverse-surface-transparent-primary-hover: #FFFFFF05; + --inverse-surface-transparent-primary-active: #FFFFFF1A; + --inverse-surface-transparent-secondary-hover: #FFFFFF0A; + --inverse-surface-transparent-secondary-active: #FFFFFF29; + --inverse-surface-transparent-tertiary-hover: #FFFFFF1F; + --inverse-surface-transparent-tertiary-active: #FFFFFF3D; + --inverse-surface-transparent-deep-hover: #FFFFFF8F; + --inverse-surface-transparent-deep-active: #FFFFFFAD; + --inverse-surface-transparent-card-hover: #FFFFFF0A; + --inverse-surface-transparent-card-active: #FFFFFF29; + --inverse-surface-transparent-card-brightness: #FFFFFF1F; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-accent-hover: #689CFDFF; + --inverse-surface-accent-active: #2B74FDFF; + --inverse-surface-accent-minor-hover: #0A2A67FF; + --inverse-surface-accent-minor-active: #061B41FF; + --inverse-surface-transparent-accent-hover: #FFFFFFFF; + --inverse-surface-transparent-accent-active: #FFFFFFFF; + --inverse-surface-positive-hover: #1EB83AFF; + --inverse-surface-positive-active: #178C2CFF; + --inverse-surface-warning-hover: #FB782DFF; + --inverse-surface-warning-active: #E65705FF; + --inverse-surface-negative-hover: #FF5263FF; + --inverse-surface-negative-active: #FF142CFF; + --inverse-surface-info-hover: #689CFDFF; + --inverse-surface-info-active: #2B74FDFF; + --inverse-surface-positive-minor-hover: #0E3A16FF; + --inverse-surface-positive-minor-active: #061909FF; + --inverse-surface-warning-minor-hover: #58290EFF; + --inverse-surface-warning-minor-active: #2C1507FF; + --inverse-surface-negative-minor-hover: #64121AFF; + --inverse-surface-negative-minor-active: #380A0FFF; + --inverse-surface-info-minor-hover: #0A2A67FF; + --inverse-surface-info-minor-active: #061B41FF; + --inverse-surface-transparent-positive-hover: #1A9E321F; + --inverse-surface-transparent-positive-active: #1A9E323D; + --inverse-surface-transparent-warning-hover: #FA5F051F; + --inverse-surface-transparent-warning-active: #FA5F053D; + --inverse-surface-transparent-negative-hover: #FF293E1F; + --inverse-surface-transparent-negative-active: #FF293E3D; + --inverse-surface-transparent-info-hover: #3F82FD1F; + --inverse-surface-transparent-info-active: #3F82FD3D; + --inverse-surface-solid-card: #171717; + --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-secondary: #262626; + --inverse-surface-solid-tertiary: #363636; + --inverse-surface-solid-default: #F9F9F9; + --inverse-surface-transparent-primary: #FFFFFF0F; + --inverse-surface-transparent-card: #FFFFFF1F; + --inverse-surface-transparent-secondary: #FFFFFF1F; + --inverse-surface-transparent-tertiary: #FFFFFF33; + --inverse-surface-transparent-deep: #FFFFFFA3; + --inverse-surface-clear: #FFFFFF00; + --inverse-surface-accent: #3F81FD; + --inverse-surface-accent-minor: #082254; + --inverse-surface-transparent-accent: #3F81FD33; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #FF293E; + --inverse-surface-info: #3F81FD; + --inverse-surface-positive-minor: #0A2B10; + --inverse-surface-warning-minor: #3D1D0A; + --inverse-surface-negative-minor: #4A0D13; + --inverse-surface-info-minor: #082254; + --inverse-surface-transparent-positive: #1A9E3233; + --inverse-surface-transparent-warning: #FA5F0533; + --inverse-surface-transparent-negative: #FF293E33; + --inverse-surface-transparent-info: #3F81FD33; --background-primary: #F9F9F9; --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #0F0F0FFF; + --inverse-background-primary: #080808; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; @@ -1069,6 +1373,9 @@ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #0808088F; + --inverse-overlay-hard: #080808F5; + --inverse-overlay-blur: #08080847; --outline-solid-primary-hover: #EDEDEDFF; --outline-solid-primary-active: #D4D4D4FF; --outline-solid-secondary-hover: #A3A3A3FF; @@ -1270,6 +1577,75 @@ --on-light-outline-info: #2A72F8; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; + --inverse-outline-solid-primary-hover: #787878FF; + --inverse-outline-solid-primary-active: #4F4F4FFF; + --inverse-outline-solid-secondary-hover: #FFFFFFFF; + --inverse-outline-solid-secondary-active: #404040FF; + --inverse-outline-solid-tertiary-hover: #FFFFFFFF; + --inverse-outline-solid-tertiary-active: #595959FF; + --inverse-outline-transparent-primary-hover: #FFFFFFFF; + --inverse-outline-transparent-primary-active: #FFFFFF25; + --inverse-outline-transparent-secondary-hover: #FFFFFFFF; + --inverse-outline-transparent-secondary-active: #FFFFFF25; + --inverse-outline-transparent-tertiary-hover: #FFFFFFFF; + --inverse-outline-transparent-tertiary-active: #FFFFFF7A; + --inverse-outline-clear-hover: #FFFFFFFF; + --inverse-outline-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #689CFDFF; + --inverse-outline-accent-active: #1767FDFF; + --inverse-outline-accent-minor-hover: #FFFFFFFF; + --inverse-outline-accent-minor-active: #113B88FF; + --inverse-outline-transparent-accent-hover: #528EFFFF; + --inverse-outline-transparent-accent-active: #528EFF56; + --inverse-outline-positive-hover: #2BD44AFF; + --inverse-outline-positive-active: #1D9032FF; + --inverse-outline-warning-hover: #FF8B4DFF; + --inverse-outline-warning-active: #FA5700FF; + --inverse-outline-negative-hover: #FF6675FF; + --inverse-outline-negative-active: #FF142CFF; + --inverse-outline-info-hover: #7AA9FFFF; + --inverse-outline-info-active: #2974FFFF; + --inverse-outline-positive-minor-hover: #11A72CFF; + --inverse-outline-positive-minor-active: #0D8222FF; + --inverse-outline-warning-minor-hover: #CD5713FF; + --inverse-outline-warning-minor-active: #A84710FF; + --inverse-outline-negative-minor-hover: #C2192AFF; + --inverse-outline-negative-minor-active: #7A101AFF; + --inverse-outline-info-minor-hover: #FFFFFFFF; + --inverse-outline-info-minor-active: #113B88FF; + --inverse-outline-transparent-positive-hover: #24B23EFF; + --inverse-outline-transparent-positive-active: #24B23E56; + --inverse-outline-transparent-warning-hover: #FF7024FF; + --inverse-outline-transparent-warning-active: #FF702456; + --inverse-outline-transparent-negative-hover: #FF3D51FF; + --inverse-outline-transparent-negative-active: #FF3D5156; + --inverse-outline-transparent-info-hover: #528EFFFF; + --inverse-outline-transparent-info-active: #528EFF56; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-solid-primary: #262626; + --inverse-outline-solid-secondary: #4E4E4E; + --inverse-outline-solid-tertiary: #707070; + --inverse-outline-transparent-primary: #FFFFFF1F; + --inverse-outline-transparent-tertiary: #FFFFFF66; + --inverse-outline-clear: #FFFFFF00; + --inverse-outline-default: #F9F9F9; + --inverse-outline-accent: #3F81FD; + --inverse-outline-accent-minor: #1549AB; + --inverse-outline-transparent-accent: #528EFF47; + --inverse-outline-positive: #24B23E; + --inverse-outline-warning: #FF7024; + --inverse-outline-negative: #FF3D51; + --inverse-outline-info: #528EFF; + --inverse-outline-positive-minor: #095C18; + --inverse-outline-warning-minor: #85380C; + --inverse-outline-negative-minor: #9C1422; + --inverse-outline-info-minor: #1549AB; + --inverse-outline-transparent-positive: #24B23E47; + --inverse-outline-transparent-warning: #FF702447; + --inverse-outline-transparent-negative: #FF3D5147; + --inverse-outline-transparent-info: #528EFF47; + --inverse-outline-transparent-secondary: #FFFFFF1F; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -1317,6 +1693,9 @@ --on-light-text-accent-gradient-hover: #000000FF; --on-light-text-accent-gradient-active: #CCCCCCFF; --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); + --inverse-text-accent-gradient-hover: #FFFFFFFF; + --inverse-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient: linear-gradient(90deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); @@ -1344,6 +1723,9 @@ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -1369,11 +1751,11 @@ .dark, .light { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/css/plasma_web__dark.css b/packages/themes/plasma-themes/src/css/plasma_web__dark.css index 31075773c9..19fc3b3e75 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web__dark.css +++ b/packages/themes/plasma-themes/src/css/plasma_web__dark.css @@ -143,6 +143,36 @@ --inverse-text-paragraph-hover: #0808087A; --inverse-text-paragraph-active: #080808A3; --inverse-text-paragraph: #080808CC; + --inverse-text-accent-hover: #79A7FBFF; + --inverse-text-accent-active: #0D5FF8FF; + --inverse-text-accent-minor-hover: #DCE8FEFF; + --inverse-text-accent-minor-active: #6FA0FBFF; + --inverse-text-positive-hover: #13AA2CFF; + --inverse-text-positive-active: #0D731EFF; + --inverse-text-warning-hover: #FD650DFF; + --inverse-text-warning-active: #CA4B02FF; + --inverse-text-negative-hover: #F5384BFF; + --inverse-text-negative-active: #E40C22FF; + --inverse-text-info-hover: #79A7FBFF; + --inverse-text-info-active: #0D5FF8FF; + --inverse-text-positive-minor-hover: #3EDA5BFF; + --inverse-text-positive-minor-active: #23B83EFF; + --inverse-text-warning-minor-hover: #FDB086FF; + --inverse-text-warning-minor-active: #FC884AFF; + --inverse-text-negative-minor-hover: #FFADB6FF; + --inverse-text-negative-minor-active: #FF707EFF; + --inverse-text-info-minor-hover: #DCE8FEFF; + --inverse-text-info-minor-active: #6FA0FBFF; + --inverse-text-accent: #2A72F8; + --inverse-text-accent-minor: #8BB2FC; + --inverse-text-positive: #108E26; + --inverse-text-warning: #E85702; + --inverse-text-negative: #F31B31; + --inverse-text-info: #2A72F8; + --inverse-text-positive-minor: #28D247; + --inverse-text-warning-minor: #FD9C68; + --inverse-text-negative-minor: #FF8F9A; + --inverse-text-info-minor: #8BB2FC; --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; @@ -380,10 +410,93 @@ --on-light-surface-info: #2A72F8; --on-light-surface-info-minor: #DEE9FF; --on-light-surface-transparent-info: #2A72F81F; + --inverse-surface-solid-primary-hover: #FAFAFAFF; + --inverse-surface-solid-primary-active: #F0F0F0FF; + --inverse-surface-solid-primary-brightness: #FFFFFFFF; + --inverse-surface-solid-secondary-hover: #F7F7F7FF; + --inverse-surface-solid-secondary-active: #E8E8E8FF; + --inverse-surface-solid-tertiary-hover: #E8E8E8FF; + --inverse-surface-solid-tertiary-active: #D9D9D9FF; + --inverse-surface-solid-card-hover: #FFFFFFFF; + --inverse-surface-solid-card-active: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; + --inverse-surface-solid-default-hover: #0D0D0DFF; + --inverse-surface-solid-default-active: #030303FF; + --inverse-surface-transparent-primary-hover: #08080812; + --inverse-surface-transparent-primary-active: #08080803; + --inverse-surface-transparent-secondary-hover: #0808081F; + --inverse-surface-transparent-secondary-active: #0808080A; + --inverse-surface-transparent-tertiary-hover: #0808083D; + --inverse-surface-transparent-tertiary-active: #0808080F; + --inverse-surface-transparent-deep-hover: #080808C2; + --inverse-surface-transparent-deep-active: #08080894; + --inverse-surface-transparent-card-hover: #FFFFFFFF; + --inverse-surface-transparent-card-active: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-accent-hover: #4886F9FF; + --inverse-surface-accent-active: #206CF8FF; + --inverse-surface-accent-minor-hover: #EBF1FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent-hover: #2A72F83D; + --inverse-surface-transparent-accent-active: #2A72F80F; + --inverse-surface-positive-hover: #12A12AFF; + --inverse-surface-positive-active: #0F8523FF; + --inverse-surface-warning-hover: #FC5E03FF; + --inverse-surface-warning-active: #DE5302FF; + --inverse-surface-negative-hover: #F5384BFF; + --inverse-surface-negative-active: #F31228FF; + --inverse-surface-info-hover: #4886F9FF; + --inverse-surface-info-active: #206CF8FF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #94F9A7FF; + --inverse-surface-warning-minor-hover: #FEE9DCFF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor-hover: #FFEBEDFF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor-hover: #EBF1FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive-hover: #108E253D; + --inverse-surface-transparent-positive-active: #108E250F; + --inverse-surface-transparent-warning-hover: #E857023D; + --inverse-surface-transparent-warning-active: #E857020F; + --inverse-surface-transparent-negative-hover: #F31B313D; + --inverse-surface-transparent-negative-active: #F31B310F; + --inverse-surface-transparent-info-hover: #2A72F83D; + --inverse-surface-transparent-info-active: #2A72F80F; + --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-secondary: #ECECEC; + --inverse-surface-solid-tertiary: #DDDDDD; + --inverse-surface-solid-default: #080808; + --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-primary: #08080808; + --inverse-surface-transparent-secondary: #0808080F; + --inverse-surface-transparent-tertiary: #0808081F; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-clear: #FFFFFF00; + --inverse-surface-accent: #2A72F8; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-positive: #108E26; + --inverse-surface-warning: #E85702; + --inverse-surface-negative: #F31B31; + --inverse-surface-info: #2A72F8; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-transparent-positive: #108E261F; + --inverse-surface-transparent-warning: #E857021F; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-info: #2A72F81F; --background-primary: #080808; --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; @@ -393,6 +506,9 @@ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; --outline-solid-primary-hover: #303030FF; --outline-solid-primary-active: #212121FF; --outline-solid-secondary-hover: #595959FF; @@ -594,6 +710,75 @@ --on-light-outline-info: #2A72F8; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; + --inverse-outline-solid-primary-hover: #ABABABFF; + --inverse-outline-solid-primary-active: #C4C4C4FF; + --inverse-outline-solid-secondary-hover: #FFFFFFFF; + --inverse-outline-solid-secondary-active: #575757FF; + --inverse-outline-solid-tertiary-hover: #FFFFFFFF; + --inverse-outline-solid-tertiary-active: #737373FF; + --inverse-outline-transparent-primary-hover: #080808FF; + --inverse-outline-transparent-primary-active: #0808083D; + --inverse-outline-transparent-secondary-hover: #080808FF; + --inverse-outline-transparent-secondary-active: #0808087A; + --inverse-outline-transparent-tertiary-hover: #080808FF; + --inverse-outline-transparent-tertiary-active: #080808AB; + --inverse-outline-clear-hover: #FFFFFFFF; + --inverse-outline-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #79A7FBFF; + --inverse-outline-accent-active: #0D5FF8FF; + --inverse-outline-accent-minor-hover: #DCE8FEFF; + --inverse-outline-accent-minor-active: #6FA0FBFF; + --inverse-outline-transparent-accent-hover: #2A72F8FF; + --inverse-outline-transparent-accent-active: #2A72F83D; + --inverse-outline-positive-hover: #13AA2CFF; + --inverse-outline-positive-active: #0D731EFF; + --inverse-outline-warning-hover: #FD650DFF; + --inverse-outline-warning-active: #CA4B02FF; + --inverse-outline-negative-hover: #F5384BFF; + --inverse-outline-negative-active: #E40C22FF; + --inverse-outline-info-hover: #79A7FBFF; + --inverse-outline-info-active: #0D5FF8FF; + --inverse-outline-positive-minor-hover: #3EDA5BFF; + --inverse-outline-positive-minor-active: #23B83EFF; + --inverse-outline-warning-minor-hover: #FDB086FF; + --inverse-outline-warning-minor-active: #FC884AFF; + --inverse-outline-negative-minor-hover: #FFADB6FF; + --inverse-outline-negative-minor-active: #FF707EFF; + --inverse-outline-info-minor-hover: #DCE8FEFF; + --inverse-outline-info-minor-active: #6FA0FBFF; + --inverse-outline-transparent-positive-hover: #108E25FF; + --inverse-outline-transparent-positive-active: #108E253D; + --inverse-outline-transparent-warning-hover: #E85702FF; + --inverse-outline-transparent-warning-active: #E857023D; + --inverse-outline-transparent-negative-hover: #F31B31FF; + --inverse-outline-transparent-negative-active: #F31B313D; + --inverse-outline-transparent-info-hover: #2A72F8FF; + --inverse-outline-transparent-info-active: #2A72F83D; + --inverse-outline-solid-primary: #DDDDDD; + --inverse-outline-solid-secondary: #949494; + --inverse-outline-solid-tertiary: #707070; + --inverse-outline-transparent-primary: #08080833; + --inverse-outline-transparent-secondary: #08080866; + --inverse-outline-transparent-tertiary: #0808088F; + --inverse-outline-clear: #FFFFFF00; + --inverse-outline-default: #080808; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-accent: #2A72F8; + --inverse-outline-accent-minor: #8BB2FC; + --inverse-outline-transparent-accent: #2A72F833; + --inverse-outline-positive: #108E26; + --inverse-outline-warning: #E85702; + --inverse-outline-negative: #F31B31; + --inverse-outline-info: #2A72F8; + --inverse-outline-positive-minor: #28D247; + --inverse-outline-warning-minor: #FD9C68; + --inverse-outline-negative-minor: #FF8F9A; + --inverse-outline-info-minor: #8BB2FC; + --inverse-outline-transparent-positive: #108E2633; + --inverse-outline-transparent-warning: #E8570233; + --inverse-outline-transparent-negative: #F31B3133; + --inverse-outline-transparent-info: #2A72F833; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -641,6 +826,9 @@ --on-light-text-accent-gradient-hover: #CCCCCCFF; --on-light-text-accent-gradient-active: #E6E6E6FF; --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%),linear-gradient(89.83deg, #5E94FFFF 0%, #43DBFAFF 100%); @@ -668,6 +856,9 @@ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -693,11 +884,11 @@ :root { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/css/plasma_web__light.css b/packages/themes/plasma-themes/src/css/plasma_web__light.css index 5d9489dcb3..2e32f510ed 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web__light.css +++ b/packages/themes/plasma-themes/src/css/plasma_web__light.css @@ -143,6 +143,36 @@ --inverse-text-paragraph-hover: #FFFFFF7A; --inverse-text-paragraph-active: #FFFFFFA3; --inverse-text-paragraph: #FFFFFFCC; + --inverse-text-accent-hover: #7AA9FFFF; + --inverse-text-accent-active: #2974FFFF; + --inverse-text-accent-minor-hover: #FFFFFFFF; + --inverse-text-accent-minor-active: #113B88FF; + --inverse-text-positive-hover: #2BD44AFF; + --inverse-text-positive-active: #1D9032FF; + --inverse-text-warning-hover: #FF8B4DFF; + --inverse-text-warning-active: #FA5700FF; + --inverse-text-negative-hover: #FF6675FF; + --inverse-text-negative-active: #FF142CFF; + --inverse-text-info-hover: #7AA9FFFF; + --inverse-text-info-active: #2974FFFF; + --inverse-text-positive-minor-hover: #11A72CFF; + --inverse-text-positive-minor-active: #0D8222FF; + --inverse-text-warning-minor-hover: #CD5713FF; + --inverse-text-warning-minor-active: #A84710FF; + --inverse-text-negative-minor-hover: #C2192AFF; + --inverse-text-negative-minor-active: #7A101AFF; + --inverse-text-info-minor-hover: #FFFFFFFF; + --inverse-text-info-minor-active: #113B88FF; + --inverse-text-accent: #528EFF; + --inverse-text-accent-minor: #1549AB; + --inverse-text-positive: #24B23E; + --inverse-text-warning: #FF7024; + --inverse-text-negative: #FF3D51; + --inverse-text-info: #528EFF; + --inverse-text-positive-minor: #095C18; + --inverse-text-warning-minor: #85380C; + --inverse-text-negative-minor: #9C1422; + --inverse-text-info-minor: #1549AB; --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; @@ -380,10 +410,93 @@ --on-light-surface-transparent-negative: #F31B311F; --on-light-surface-info: #2A72F8; --on-light-surface-transparent-info: #2A72F81F; + --inverse-surface-solid-primary-hover: #363636FF; + --inverse-surface-solid-primary-active: #0D0D0DFF; + --inverse-surface-solid-primary-brightness: #262626FF; + --inverse-surface-solid-secondary-hover: #3B3B3BFF; + --inverse-surface-solid-secondary-active: #1C1C1CFF; + --inverse-surface-solid-tertiary-hover: #4A4A4AFF; + --inverse-surface-solid-tertiary-active: #2B2B2BFF; + --inverse-surface-solid-card-hover: #363636FF; + --inverse-surface-solid-card-active: #0D0D0DFF; + --inverse-surface-solid-card-brightness: #262626FF; + --inverse-surface-solid-default-hover: #FFFFFFFF; + --inverse-surface-solid-default-active: #F5F5F5FF; + --inverse-surface-transparent-primary-hover: #FFFFFF05; + --inverse-surface-transparent-primary-active: #FFFFFF1A; + --inverse-surface-transparent-secondary-hover: #FFFFFF0A; + --inverse-surface-transparent-secondary-active: #FFFFFF29; + --inverse-surface-transparent-tertiary-hover: #FFFFFF1F; + --inverse-surface-transparent-tertiary-active: #FFFFFF3D; + --inverse-surface-transparent-deep-hover: #FFFFFF8F; + --inverse-surface-transparent-deep-active: #FFFFFFAD; + --inverse-surface-transparent-card-hover: #FFFFFF0A; + --inverse-surface-transparent-card-active: #FFFFFF29; + --inverse-surface-transparent-card-brightness: #FFFFFF1F; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-accent-hover: #689CFDFF; + --inverse-surface-accent-active: #2B74FDFF; + --inverse-surface-accent-minor-hover: #0A2A67FF; + --inverse-surface-accent-minor-active: #061B41FF; + --inverse-surface-transparent-accent-hover: #FFFFFFFF; + --inverse-surface-transparent-accent-active: #FFFFFFFF; + --inverse-surface-positive-hover: #1EB83AFF; + --inverse-surface-positive-active: #178C2CFF; + --inverse-surface-warning-hover: #FB782DFF; + --inverse-surface-warning-active: #E65705FF; + --inverse-surface-negative-hover: #FF5263FF; + --inverse-surface-negative-active: #FF142CFF; + --inverse-surface-info-hover: #689CFDFF; + --inverse-surface-info-active: #2B74FDFF; + --inverse-surface-positive-minor-hover: #0E3A16FF; + --inverse-surface-positive-minor-active: #061909FF; + --inverse-surface-warning-minor-hover: #58290EFF; + --inverse-surface-warning-minor-active: #2C1507FF; + --inverse-surface-negative-minor-hover: #64121AFF; + --inverse-surface-negative-minor-active: #380A0FFF; + --inverse-surface-info-minor-hover: #0A2A67FF; + --inverse-surface-info-minor-active: #061B41FF; + --inverse-surface-transparent-positive-hover: #1A9E321F; + --inverse-surface-transparent-positive-active: #1A9E323D; + --inverse-surface-transparent-warning-hover: #FA5F051F; + --inverse-surface-transparent-warning-active: #FA5F053D; + --inverse-surface-transparent-negative-hover: #FF293E1F; + --inverse-surface-transparent-negative-active: #FF293E3D; + --inverse-surface-transparent-info-hover: #3F82FD1F; + --inverse-surface-transparent-info-active: #3F82FD3D; + --inverse-surface-solid-card: #171717; + --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-secondary: #262626; + --inverse-surface-solid-tertiary: #363636; + --inverse-surface-solid-default: #F9F9F9; + --inverse-surface-transparent-primary: #FFFFFF0F; + --inverse-surface-transparent-card: #FFFFFF1F; + --inverse-surface-transparent-secondary: #FFFFFF1F; + --inverse-surface-transparent-tertiary: #FFFFFF33; + --inverse-surface-transparent-deep: #FFFFFFA3; + --inverse-surface-clear: #FFFFFF00; + --inverse-surface-accent: #3F81FD; + --inverse-surface-accent-minor: #082254; + --inverse-surface-transparent-accent: #3F81FD33; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #FF293E; + --inverse-surface-info: #3F81FD; + --inverse-surface-positive-minor: #0A2B10; + --inverse-surface-warning-minor: #3D1D0A; + --inverse-surface-negative-minor: #4A0D13; + --inverse-surface-info-minor: #082254; + --inverse-surface-transparent-positive: #1A9E3233; + --inverse-surface-transparent-warning: #FA5F0533; + --inverse-surface-transparent-negative: #FF293E33; + --inverse-surface-transparent-info: #3F81FD33; --background-primary: #F9F9F9; --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #0F0F0FFF; + --inverse-background-primary: #080808; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; @@ -393,6 +506,9 @@ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #0808088F; + --inverse-overlay-hard: #080808F5; + --inverse-overlay-blur: #08080847; --outline-solid-primary-hover: #EDEDEDFF; --outline-solid-primary-active: #D4D4D4FF; --outline-solid-secondary-hover: #A3A3A3FF; @@ -594,6 +710,75 @@ --on-light-outline-info: #2A72F8; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; + --inverse-outline-solid-primary-hover: #787878FF; + --inverse-outline-solid-primary-active: #4F4F4FFF; + --inverse-outline-solid-secondary-hover: #FFFFFFFF; + --inverse-outline-solid-secondary-active: #404040FF; + --inverse-outline-solid-tertiary-hover: #FFFFFFFF; + --inverse-outline-solid-tertiary-active: #595959FF; + --inverse-outline-transparent-primary-hover: #FFFFFFFF; + --inverse-outline-transparent-primary-active: #FFFFFF25; + --inverse-outline-transparent-secondary-hover: #FFFFFFFF; + --inverse-outline-transparent-secondary-active: #FFFFFF25; + --inverse-outline-transparent-tertiary-hover: #FFFFFFFF; + --inverse-outline-transparent-tertiary-active: #FFFFFF7A; + --inverse-outline-clear-hover: #FFFFFFFF; + --inverse-outline-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #689CFDFF; + --inverse-outline-accent-active: #1767FDFF; + --inverse-outline-accent-minor-hover: #FFFFFFFF; + --inverse-outline-accent-minor-active: #113B88FF; + --inverse-outline-transparent-accent-hover: #528EFFFF; + --inverse-outline-transparent-accent-active: #528EFF56; + --inverse-outline-positive-hover: #2BD44AFF; + --inverse-outline-positive-active: #1D9032FF; + --inverse-outline-warning-hover: #FF8B4DFF; + --inverse-outline-warning-active: #FA5700FF; + --inverse-outline-negative-hover: #FF6675FF; + --inverse-outline-negative-active: #FF142CFF; + --inverse-outline-info-hover: #7AA9FFFF; + --inverse-outline-info-active: #2974FFFF; + --inverse-outline-positive-minor-hover: #11A72CFF; + --inverse-outline-positive-minor-active: #0D8222FF; + --inverse-outline-warning-minor-hover: #CD5713FF; + --inverse-outline-warning-minor-active: #A84710FF; + --inverse-outline-negative-minor-hover: #C2192AFF; + --inverse-outline-negative-minor-active: #7A101AFF; + --inverse-outline-info-minor-hover: #FFFFFFFF; + --inverse-outline-info-minor-active: #113B88FF; + --inverse-outline-transparent-positive-hover: #24B23EFF; + --inverse-outline-transparent-positive-active: #24B23E56; + --inverse-outline-transparent-warning-hover: #FF7024FF; + --inverse-outline-transparent-warning-active: #FF702456; + --inverse-outline-transparent-negative-hover: #FF3D51FF; + --inverse-outline-transparent-negative-active: #FF3D5156; + --inverse-outline-transparent-info-hover: #528EFFFF; + --inverse-outline-transparent-info-active: #528EFF56; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-solid-primary: #262626; + --inverse-outline-solid-secondary: #4E4E4E; + --inverse-outline-solid-tertiary: #707070; + --inverse-outline-transparent-primary: #FFFFFF1F; + --inverse-outline-transparent-tertiary: #FFFFFF66; + --inverse-outline-clear: #FFFFFF00; + --inverse-outline-default: #F9F9F9; + --inverse-outline-accent: #3F81FD; + --inverse-outline-accent-minor: #1549AB; + --inverse-outline-transparent-accent: #528EFF47; + --inverse-outline-positive: #24B23E; + --inverse-outline-warning: #FF7024; + --inverse-outline-negative: #FF3D51; + --inverse-outline-info: #528EFF; + --inverse-outline-positive-minor: #095C18; + --inverse-outline-warning-minor: #85380C; + --inverse-outline-negative-minor: #9C1422; + --inverse-outline-info-minor: #1549AB; + --inverse-outline-transparent-positive: #24B23E47; + --inverse-outline-transparent-warning: #FF702447; + --inverse-outline-transparent-negative: #FF3D5147; + --inverse-outline-transparent-info: #528EFF47; + --inverse-outline-transparent-secondary: #FFFFFF1F; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -641,6 +826,9 @@ --on-light-text-accent-gradient-hover: #000000FF; --on-light-text-accent-gradient-active: #CCCCCCFF; --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); + --inverse-text-accent-gradient-hover: #FFFFFFFF; + --inverse-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient: linear-gradient(90deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); @@ -668,6 +856,9 @@ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -693,11 +884,11 @@ :root { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/css/stylesSalute.module.css b/packages/themes/plasma-themes/src/css/stylesSalute.module.css index 98d67db278..53e4aa21ff 100644 --- a/packages/themes/plasma-themes/src/css/stylesSalute.module.css +++ b/packages/themes/plasma-themes/src/css/stylesSalute.module.css @@ -730,6 +730,9 @@ --background-primary: #000000FF; --background-primary-brightness: #0F0FFFFF; --background-secondary: #171717; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F2F2F2FF; + --inverse-background-secondary: #FFFFFFFF; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; --on-dark-overlay-blur: #26262647; @@ -1983,6 +1986,9 @@ --background-primary: #F2F2F2FF; --background-primary-brightness: #F3F3F3FF; --background-secondary: #FFFFFFFF; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #000000FF; + --inverse-background-secondary: #171717; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; --on-dark-overlay-blur: #26262647; diff --git a/packages/themes/plasma-themes/src/css/stylesSalute__dark.css b/packages/themes/plasma-themes/src/css/stylesSalute__dark.css index ca81063f74..0b9d040b89 100644 --- a/packages/themes/plasma-themes/src/css/stylesSalute__dark.css +++ b/packages/themes/plasma-themes/src/css/stylesSalute__dark.css @@ -730,6 +730,9 @@ --background-primary: #000000FF; --background-primary-brightness: #0F0FFFFF; --background-secondary: #171717; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F2F2F2FF; + --inverse-background-secondary: #FFFFFFFF; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; --on-dark-overlay-blur: #26262647; diff --git a/packages/themes/plasma-themes/src/css/stylesSalute__light.css b/packages/themes/plasma-themes/src/css/stylesSalute__light.css index f7d3b09cb6..70a0535e01 100644 --- a/packages/themes/plasma-themes/src/css/stylesSalute__light.css +++ b/packages/themes/plasma-themes/src/css/stylesSalute__light.css @@ -732,6 +732,9 @@ --background-primary: #F2F2F2FF; --background-primary-brightness: #F3F3F3FF; --background-secondary: #FFFFFFFF; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #000000FF; + --inverse-background-secondary: #171717; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; --on-dark-overlay-blur: #26262647; diff --git a/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts b/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts index 05f74197fb..5b225fd38d 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts @@ -145,6 +145,36 @@ export const plasma_b2c__dark = ([ --inverse-text-tertiary-active: #08080856; --inverse-text-paragraph-hover: #0808087A; --inverse-text-paragraph-active: #080808A3; + --inverse-text-accent-hover: #79A7FBFF; + --inverse-text-accent-active: #0D5FF8FF; + --inverse-text-positive-hover: #1EB83AFF; + --inverse-text-positive-active: #15842AFF; + --inverse-text-warning-hover: #FB7223FF; + --inverse-text-warning-active: #DC5304FF; + --inverse-text-negative-hover: #F5384BFF; + --inverse-text-negative-active: #E40C22FF; + --inverse-text-accent-minor-hover: #DCE8FEFF; + --inverse-text-accent-minor-active: #6FA0FBFF; + --inverse-text-accent: #2A72F8; + --inverse-text-accent-minor: #8BB2FC; + --inverse-text-positive: #1A9E32; + --inverse-text-warning: #FA5F05; + --inverse-text-negative: #F31B31; + --inverse-text-info: #2A72F8; + --inverse-text-info-hover: #79A7FBFF; + --inverse-text-info-active: #0D5FF8FF; + --inverse-text-positive-minor: #28D247; + --inverse-text-positive-minor-hover: #3EDA5BFF; + --inverse-text-positive-minor-active: #23B83EFF; + --inverse-text-warning-minor: #FD9C68; + --inverse-text-warning-minor-hover: #FDB086FF; + --inverse-text-warning-minor-active: #FC884AFF; + --inverse-text-negative-minor: #FF8F9A; + --inverse-text-negative-minor-hover: #FFADB6FF; + --inverse-text-negative-minor-active: #FF707EFF; + --inverse-text-info-minor: #8BB2FC; + --inverse-text-info-minor-hover: #DCE8FEFF; + --inverse-text-info-minor-active: #6FA0FBFF; --surface-solid-primary: #171717; --surface-solid-primary-brightness: #262626FF; --surface-solid-secondary: #262626; @@ -382,10 +412,93 @@ export const plasma_b2c__dark = ([ --on-light-surface-negative-active: #F31228FF; --on-light-surface-transparent-deep-hover: #080808C2; --on-light-surface-transparent-deep-active: #08080894; + --inverse-surface-solid-primary-brightness: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #F31B31; + --inverse-surface-solid-default-hover: #0D0D0DFF; + --inverse-surface-solid-default-active: #030303FF; + --inverse-surface-solid-primary-hover: #FAFAFAFF; + --inverse-surface-solid-primary-active: #F0F0F0FF; + --inverse-surface-solid-secondary-hover: #F7F7F7FF; + --inverse-surface-solid-secondary-active: #E8E8E8FF; + --inverse-surface-solid-tertiary-hover: #E8E8E8FF; + --inverse-surface-solid-tertiary-active: #D9D9D9FF; + --inverse-surface-solid-card-hover: #FFFFFFFF; + --inverse-surface-solid-card-active: #FFFFFFFF; + --inverse-surface-transparent-primary-hover: #08080812; + --inverse-surface-transparent-primary-active: #08080803; + --inverse-surface-transparent-secondary-hover: #0808081F; + --inverse-surface-transparent-secondary-active: #0808080A; + --inverse-surface-transparent-tertiary-hover: #0808083D; + --inverse-surface-transparent-tertiary-active: #0808080F; + --inverse-surface-transparent-card-hover: #FFFFFFFF; + --inverse-surface-transparent-card-active: #FFFFFFFF; + --inverse-surface-accent-hover: #4886F9FF; + --inverse-surface-accent-active: #206CF8FF; + --inverse-surface-positive-hover: #1DAF37FF; + --inverse-surface-positive-active: #18952FFF; + --inverse-surface-warning-hover: #FB7223FF; + --inverse-surface-warning-active: #F05B05FF; + --inverse-surface-negative-hover: #F5384BFF; + --inverse-surface-negative-active: #F31228FF; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-secondary: #ECECEC; + --inverse-surface-solid-tertiary: #DDDDDD; + --inverse-surface-solid-default: #080808; + --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-primary: #08080808; + --inverse-surface-transparent-secondary: #0808080F; + --inverse-surface-transparent-tertiary: #0808081F; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-transparent-deep-hover: #080808C2; + --inverse-surface-transparent-deep-active: #08080894; + --inverse-surface-clear: #00000000; + --inverse-surface-accent: #2A72F8; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-accent-minor-hover: #EBF1FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-transparent-accent-hover: #2A72F83D; + --inverse-surface-transparent-accent-active: #2A72F80F; + --inverse-surface-info: #2A72F8; + --inverse-surface-info-hover: #4886F9FF; + --inverse-surface-info-active: #206CF8FF; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #94F9A7FF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-warning-minor-hover: #FEE9DCFF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-negative-minor-hover: #FFEBEDFF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-info-minor-hover: #EBF1FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive: #1A9E321F; + --inverse-surface-transparent-positive-hover: #1A9E323D; + --inverse-surface-transparent-positive-active: #1A9E320F; + --inverse-surface-transparent-warning: #FA5F051F; + --inverse-surface-transparent-warning-hover: #FA5F053D; + --inverse-surface-transparent-warning-active: #FA5F050F; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-negative-hover: #F31B313D; + --inverse-surface-transparent-negative-active: #F31B310F; + --inverse-surface-transparent-info: #2A72F81F; + --inverse-surface-transparent-info-hover: #2A72F83D; + --inverse-surface-transparent-info-active: #2A72F80F; --background-primary: #080808; --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; @@ -395,6 +508,9 @@ export const plasma_b2c__dark = ([ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; --outline-primary: #262626; --outline-primary-hover: #303030FF; --outline-primary-active: #212121FF; @@ -598,8 +714,75 @@ export const plasma_b2c__dark = ([ --on-light-outline-info: #3F81FD; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; - --inverse-outline-primary-hover: #CCCCCCFF; - --inverse-outline-primary-active: #E6E6E6FF; + --inverse-outline-primary-hover: #ABABABFF; + --inverse-outline-primary-active: #C4C4C4FF; + --inverse-outline-primary: #DDDDDD; + --inverse-outline-secondary: #949494; + --inverse-outline-secondary-hover: #FFFFFFFF; + --inverse-outline-secondary-active: #575757FF; + --inverse-outline-tertiary: #707070; + --inverse-outline-tertiary-hover: #FFFFFFFF; + --inverse-outline-tertiary-active: #737373FF; + --inverse-outline-default: #080808; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-transparent-primary: #08080833; + --inverse-outline-transparent-primary-hover: #080808FF; + --inverse-outline-transparent-primary-active: #0808083D; + --inverse-outline-transparent-secondary: #08080866; + --inverse-outline-transparent-secondary-hover: #080808FF; + --inverse-outline-transparent-secondary-active: #0808087A; + --inverse-outline-transparent-tertiary: #0808088F; + --inverse-outline-transparent-tertiary-hover: #080808FF; + --inverse-outline-transparent-tertiary-active: #080808AB; + --inverse-outline-transparent-clear: #FFFFFF00; + --inverse-outline-transparent-clear-hover: #FFFFFFFF; + --inverse-outline-transparent-clear-active: #FFFFFFFF; + --inverse-outline-accent: #2A72F8; + --inverse-outline-accent-hover: #79A7FBFF; + --inverse-outline-accent-active: #0D5FF8FF; + --inverse-outline-accent-minor: #8BB2FC; + --inverse-outline-accent-minor-hover: #DCE8FEFF; + --inverse-outline-accent-minor-active: #6FA0FBFF; + --inverse-outline-transparent-accent: #2A72F833; + --inverse-outline-transparent-accent-hover: #2A72F8FF; + --inverse-outline-transparent-accent-active: #2A72F83D; + --inverse-outline-positive: #1A9E32; + --inverse-outline-positive-hover: #1EB83AFF; + --inverse-outline-positive-active: #15842AFF; + --inverse-outline-warning: #FA5F05; + --inverse-outline-warning-hover: #FB7223FF; + --inverse-outline-warning-active: #DC5304FF; + --inverse-outline-negative: #F31B31; + --inverse-outline-negative-hover: #F5384BFF; + --inverse-outline-negative-active: #E40C22FF; + --inverse-outline-info: #2A72F8; + --inverse-outline-info-hover: #79A7FBFF; + --inverse-outline-info-active: #0D5FF8FF; + --inverse-outline-positive-minor: #28D247; + --inverse-outline-positive-minor-hover: #3EDA5BFF; + --inverse-outline-positive-minor-active: #23B83EFF; + --inverse-outline-warning-minor: #FD9C68; + --inverse-outline-warning-minor-hover: #FDB086FF; + --inverse-outline-warning-minor-active: #FC884AFF; + --inverse-outline-negative-minor: #FF8F9A; + --inverse-outline-negative-minor-hover: #FFADB6FF; + --inverse-outline-negative-minor-active: #FF707EFF; + --inverse-outline-info-minor: #8BB2FC; + --inverse-outline-info-minor-hover: #DCE8FEFF; + --inverse-outline-info-minor-active: #6FA0FBFF; + --inverse-outline-transparent-positive: #1A9E3233; + --inverse-outline-transparent-positive-hover: #1A9E32FF; + --inverse-outline-transparent-positive-active: #1A9E323D; + --inverse-outline-transparent-warning: #FA5F0533; + --inverse-outline-transparent-warning-hover: #FA5F05FF; + --inverse-outline-transparent-warning-active: #FA5F053D; + --inverse-outline-transparent-negative: #F31B3133; + --inverse-outline-transparent-negative-hover: #F31B31FF; + --inverse-outline-transparent-negative-active: #F31B313D; + --inverse-outline-transparent-info: #2A72F833; + --inverse-outline-transparent-info-hover: #2A72F8FF; + --inverse-outline-transparent-info-active: #2A72F83D; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -647,6 +830,9 @@ export const plasma_b2c__dark = ([ --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --on-light-text-accent-gradient-hover: #CCCCCCFF; --on-light-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%),linear-gradient(89.83deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; @@ -674,6 +860,9 @@ export const plasma_b2c__dark = ([ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -699,11 +888,11 @@ export const plasma_b2c__dark = ([ :root { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts b/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts index 3b5ab5140b..2bec023a57 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts @@ -137,6 +137,9 @@ export const plasma_b2c__light = ([ --inverse-text-secondary: #FFFFFF8F; --inverse-text-tertiary: #FFFFFF47; --inverse-text-paragraph: #FFFFFFCC; + --inverse-text-positive: #1A9E32; + --inverse-text-warning: #FA5F05; + --inverse-text-negative: #FF293E; --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-secondary-hover: #FFFFFFFF; @@ -145,6 +148,33 @@ export const plasma_b2c__light = ([ --inverse-text-tertiary-active: #FFFFFF56; --inverse-text-paragraph-hover: #FFFFFF7A; --inverse-text-paragraph-active: #FFFFFFA3; + --inverse-text-accent-hover: #689CFDFF; + --inverse-text-accent-active: #1767FDFF; + --inverse-text-positive-hover: #1FC13DFF; + --inverse-text-positive-active: #147B27FF; + --inverse-text-warning-hover: #FB782DFF; + --inverse-text-warning-active: #D25004FF; + --inverse-text-negative-hover: #FF5263FF; + --inverse-text-negative-active: #FF001AFF; + --inverse-text-accent-minor: #1549AB; + --inverse-text-accent-minor-hover: #FFFFFFFF; + --inverse-text-accent-minor-active: #113B88FF; + --inverse-text-info-hover: #689CFDFF; + --inverse-text-info-active: #1767FDFF; + --inverse-text-positive-minor-hover: #11A72CFF; + --inverse-text-positive-minor-active: #0D8222FF; + --inverse-text-warning-minor-hover: #CD5713FF; + --inverse-text-warning-minor-active: #A84710FF; + --inverse-text-negative-minor-hover: #C2192AFF; + --inverse-text-negative-minor-active: #7A101AFF; + --inverse-text-info-minor-hover: #FFFFFFFF; + --inverse-text-info-minor-active: #113B88FF; + --inverse-text-accent: #3F81FD; + --inverse-text-info: #3F81FD; + --inverse-text-positive-minor: #095C18; + --inverse-text-warning-minor: #85380C; + --inverse-text-negative-minor: #9C1422; + --inverse-text-info-minor: #1549AB; --surface-solid-default: #080808; --surface-solid-primary: #F5F5F5; --surface-solid-primary-brightness: #FFFFFFFF; @@ -382,10 +412,87 @@ export const plasma_b2c__light = ([ --on-light-surface-negative-active: #ED0C23FF; --on-light-surface-transparent-deep-hover: #0808088F; --on-light-surface-transparent-deep-active: #080808AD; + --inverse-surface-solid-default: #FFFFFFFF; + --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #262626FF; + --inverse-surface-solid-secondary: #262626; + --inverse-surface-solid-tertiary: #363636; + --inverse-surface-solid-card: #171717; + --inverse-surface-solid-card-brightness: #262626FF; + --inverse-surface-transparent-primary: #171717; + --inverse-surface-transparent-secondary: #262626; + --inverse-surface-transparent-tertiary: #363636; + --inverse-surface-transparent-card: #080808; + --inverse-surface-transparent-card-brightness: #171717FF; + --inverse-surface-accent: #FFFFFFFF; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #FF293E; + --inverse-surface-clear: #00000000; + --inverse-surface-solid-default-hover: #FFFFFFFF; + --inverse-surface-solid-default-active: #FFFFFFFF; + --inverse-surface-solid-primary-hover: #363636FF; + --inverse-surface-solid-primary-active: #0D0D0DFF; + --inverse-surface-solid-secondary-hover: #3B3B3BFF; + --inverse-surface-solid-secondary-active: #1C1C1CFF; + --inverse-surface-solid-tertiary-hover: #4A4A4AFF; + --inverse-surface-solid-tertiary-active: #2B2B2BFF; + --inverse-surface-solid-card-hover: #363636FF; + --inverse-surface-solid-card-active: #0D0D0DFF; + --inverse-surface-transparent-primary-hover: #363636FF; + --inverse-surface-transparent-primary-active: #0D0D0DFF; + --inverse-surface-transparent-secondary-hover: #3B3B3BFF; + --inverse-surface-transparent-secondary-active: #1C1C1CFF; + --inverse-surface-transparent-tertiary-hover: #4A4A4AFF; + --inverse-surface-transparent-tertiary-active: #2B2B2BFF; + --inverse-surface-transparent-card-hover: #262626FF; + --inverse-surface-transparent-card-active: #030303FF; + --inverse-surface-accent-hover: #FFFFFFFF; + --inverse-surface-accent-active: #FFFFFFFF; + --inverse-surface-clear-hover: #00000000; + --inverse-surface-clear-active: #00000000; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-transparent-deep-hover: #0808088F; + --inverse-surface-transparent-deep-active: #080808AD; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-accent-minor-hover: #F5F8FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-transparent-accent-hover: #2A72F80A; + --inverse-surface-transparent-accent-active: #2A72F829; + --inverse-surface-info: #2A72F8; + --inverse-surface-info-hover: #528DFAFF; + --inverse-surface-info-active: #1665F8FF; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #8BF99FFF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-warning-minor-hover: #FEEFE6FF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-negative-minor-hover: #FFF5F6FF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-info-minor-hover: #F5F8FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive: #1A9E321F; + --inverse-surface-transparent-positive-hover: #1A9E320A; + --inverse-surface-transparent-positive-active: #1A9E3229; + --inverse-surface-transparent-warning: #FA5F051F; + --inverse-surface-transparent-warning-hover: #FA5F050A; + --inverse-surface-transparent-warning-active: #FA5F0529; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-negative-hover: #F31B310A; + --inverse-surface-transparent-negative-active: #F31B3129; + --inverse-surface-transparent-info: #2A72F81F; + --inverse-surface-transparent-info-hover: #2A72F80A; + --inverse-surface-transparent-info-active: #2A72F829; --background-primary: #F9F9F9; --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #0F0F0FFF; + --inverse-background-primary: #080808; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; @@ -395,6 +502,9 @@ export const plasma_b2c__light = ([ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-hard: #080808F5; + --inverse-overlay-soft: #0808088F; + --inverse-overlay-blur: #08080847; --outline-secondary-hover: #A3A3A3FF; --outline-secondary-active: #8A8A8AFF; --outline-tertiary-hover: #858585FF; @@ -598,8 +708,75 @@ export const plasma_b2c__light = ([ --on-light-outline-info: #3F81FD; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; - --inverse-outline-primary-hover: #000000FF; - --inverse-outline-primary-active: #CCCCCCFF; + --inverse-outline-primary-hover: #787878FF; + --inverse-outline-primary-active: #4F4F4FFF; + --inverse-outline-secondary-hover: #FFFFFFFF; + --inverse-outline-secondary-active: #404040FF; + --inverse-outline-tertiary-hover: #FFFFFFFF; + --inverse-outline-tertiary-active: #595959FF; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-transparent-primary-hover: #FFFFFFFF; + --inverse-outline-transparent-primary-active: #FFFFFF25; + --inverse-outline-transparent-secondary-hover: #FFFFFFFF; + --inverse-outline-transparent-secondary-active: #FFFFFF3D; + --inverse-outline-transparent-tertiary-hover: #FFFFFFFF; + --inverse-outline-transparent-tertiary-active: #FFFFFF7A; + --inverse-outline-transparent-clear-hover: #FFFFFFFF; + --inverse-outline-transparent-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #689CFDFF; + --inverse-outline-accent-active: #1767FDFF; + --inverse-outline-accent-minor-hover: #FFFFFFFF; + --inverse-outline-accent-minor-active: #113B88FF; + --inverse-outline-transparent-accent-hover: #3F82FDFF; + --inverse-outline-transparent-accent-active: #3F82FD56; + --inverse-outline-positive-hover: #2BD44AFF; + --inverse-outline-positive-active: #1D9032FF; + --inverse-outline-warning-hover: #FF8B4DFF; + --inverse-outline-warning-active: #FA5700FF; + --inverse-outline-negative-hover: #FF6675FF; + --inverse-outline-negative-active: #FF142CFF; + --inverse-outline-info-hover: #689CFDFF; + --inverse-outline-info-active: #1767FDFF; + --inverse-outline-positive-minor-hover: #11A72CFF; + --inverse-outline-positive-minor-active: #0D8222FF; + --inverse-outline-warning-minor-hover: #CD5713FF; + --inverse-outline-warning-minor-active: #A84710FF; + --inverse-outline-negative-minor-hover: #C2192AFF; + --inverse-outline-negative-minor-active: #7A101AFF; + --inverse-outline-info-minor-hover: #FFFFFFFF; + --inverse-outline-info-minor-active: #113B88FF; + --inverse-outline-transparent-positive-hover: #1A9E32FF; + --inverse-outline-transparent-positive-active: #1A9E3256; + --inverse-outline-transparent-warning-hover: #FA5F05FF; + --inverse-outline-transparent-warning-active: #FA5F0556; + --inverse-outline-transparent-negative-hover: #FF293EFF; + --inverse-outline-transparent-negative-active: #FF293E56; + --inverse-outline-transparent-info-hover: #3F82FDFF; + --inverse-outline-transparent-info-active: #3F82FD56; + --inverse-outline-primary: #262626; + --inverse-outline-secondary: #4E4E4E; + --inverse-outline-tertiary: #707070; + --inverse-outline-default: #F9F9F9; + --inverse-outline-transparent-primary: #FFFFFF1F; + --inverse-outline-transparent-secondary: #FFFFFF33; + --inverse-outline-transparent-tertiary: #FFFFFF66; + --inverse-outline-transparent-clear: #FFFFFF00; + --inverse-outline-accent: #3F81FD; + --inverse-outline-accent-minor: #1549AB; + --inverse-outline-transparent-accent: #3F81FD47; + --inverse-outline-positive: #24B23E; + --inverse-outline-warning: #FF7024; + --inverse-outline-negative: #FF3D51; + --inverse-outline-info: #3F81FD; + --inverse-outline-positive-minor: #095C18; + --inverse-outline-warning-minor: #85380C; + --inverse-outline-negative-minor: #9C1422; + --inverse-outline-info-minor: #1549AB; + --inverse-outline-transparent-positive: #1A9E3247; + --inverse-outline-transparent-warning: #FA5F0547; + --inverse-outline-transparent-negative: #FF293E47; + --inverse-outline-transparent-info: #3F81FD47; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -647,6 +824,9 @@ export const plasma_b2c__light = ([ --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --on-light-text-accent-gradient-hover: #000000FF; --on-light-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient-hover: #FFFFFFFF; + --inverse-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient: linear-gradient(90deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; @@ -674,6 +854,9 @@ export const plasma_b2c__light = ([ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(135deg, #000000FF 0%, #FFFFFFFF 100%); + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; --inverse-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -699,11 +882,11 @@ export const plasma_b2c__light = ([ :root { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts b/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts index e01d2c4036..1d9a860dbe 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts @@ -145,6 +145,36 @@ export const plasma_web__dark = ([ --inverse-text-paragraph-hover: #0808087A; --inverse-text-paragraph-active: #080808A3; --inverse-text-paragraph: #080808CC; + --inverse-text-accent-hover: #79A7FBFF; + --inverse-text-accent-active: #0D5FF8FF; + --inverse-text-accent-minor-hover: #DCE8FEFF; + --inverse-text-accent-minor-active: #6FA0FBFF; + --inverse-text-positive-hover: #13AA2CFF; + --inverse-text-positive-active: #0D731EFF; + --inverse-text-warning-hover: #FD650DFF; + --inverse-text-warning-active: #CA4B02FF; + --inverse-text-negative-hover: #F5384BFF; + --inverse-text-negative-active: #E40C22FF; + --inverse-text-info-hover: #79A7FBFF; + --inverse-text-info-active: #0D5FF8FF; + --inverse-text-positive-minor-hover: #3EDA5BFF; + --inverse-text-positive-minor-active: #23B83EFF; + --inverse-text-warning-minor-hover: #FDB086FF; + --inverse-text-warning-minor-active: #FC884AFF; + --inverse-text-negative-minor-hover: #FFADB6FF; + --inverse-text-negative-minor-active: #FF707EFF; + --inverse-text-info-minor-hover: #DCE8FEFF; + --inverse-text-info-minor-active: #6FA0FBFF; + --inverse-text-accent: #2A72F8; + --inverse-text-accent-minor: #8BB2FC; + --inverse-text-positive: #108E26; + --inverse-text-warning: #E85702; + --inverse-text-negative: #F31B31; + --inverse-text-info: #2A72F8; + --inverse-text-positive-minor: #28D247; + --inverse-text-warning-minor: #FD9C68; + --inverse-text-negative-minor: #FF8F9A; + --inverse-text-info-minor: #8BB2FC; --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; @@ -382,10 +412,93 @@ export const plasma_web__dark = ([ --on-light-surface-info: #2A72F8; --on-light-surface-info-minor: #DEE9FF; --on-light-surface-transparent-info: #2A72F81F; + --inverse-surface-solid-primary-hover: #FAFAFAFF; + --inverse-surface-solid-primary-active: #F0F0F0FF; + --inverse-surface-solid-primary-brightness: #FFFFFFFF; + --inverse-surface-solid-secondary-hover: #F7F7F7FF; + --inverse-surface-solid-secondary-active: #E8E8E8FF; + --inverse-surface-solid-tertiary-hover: #E8E8E8FF; + --inverse-surface-solid-tertiary-active: #D9D9D9FF; + --inverse-surface-solid-card-hover: #FFFFFFFF; + --inverse-surface-solid-card-active: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; + --inverse-surface-solid-default-hover: #0D0D0DFF; + --inverse-surface-solid-default-active: #030303FF; + --inverse-surface-transparent-primary-hover: #08080812; + --inverse-surface-transparent-primary-active: #08080803; + --inverse-surface-transparent-secondary-hover: #0808081F; + --inverse-surface-transparent-secondary-active: #0808080A; + --inverse-surface-transparent-tertiary-hover: #0808083D; + --inverse-surface-transparent-tertiary-active: #0808080F; + --inverse-surface-transparent-deep-hover: #080808C2; + --inverse-surface-transparent-deep-active: #08080894; + --inverse-surface-transparent-card-hover: #FFFFFFFF; + --inverse-surface-transparent-card-active: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-accent-hover: #4886F9FF; + --inverse-surface-accent-active: #206CF8FF; + --inverse-surface-accent-minor-hover: #EBF1FFFF; + --inverse-surface-accent-minor-active: #D6E4FFFF; + --inverse-surface-transparent-accent-hover: #2A72F83D; + --inverse-surface-transparent-accent-active: #2A72F80F; + --inverse-surface-positive-hover: #12A12AFF; + --inverse-surface-positive-active: #0F8523FF; + --inverse-surface-warning-hover: #FC5E03FF; + --inverse-surface-warning-active: #DE5302FF; + --inverse-surface-negative-hover: #F5384BFF; + --inverse-surface-negative-active: #F31228FF; + --inverse-surface-info-hover: #4886F9FF; + --inverse-surface-info-active: #206CF8FF; + --inverse-surface-positive-minor-hover: #B1FBBFFF; + --inverse-surface-positive-minor-active: #94F9A7FF; + --inverse-surface-warning-minor-hover: #FEE9DCFF; + --inverse-surface-warning-minor-active: #FEDCC8FF; + --inverse-surface-negative-minor-hover: #FFEBEDFF; + --inverse-surface-negative-minor-active: #FFD6DAFF; + --inverse-surface-info-minor-hover: #EBF1FFFF; + --inverse-surface-info-minor-active: #D6E4FFFF; + --inverse-surface-transparent-positive-hover: #108E253D; + --inverse-surface-transparent-positive-active: #108E250F; + --inverse-surface-transparent-warning-hover: #E857023D; + --inverse-surface-transparent-warning-active: #E857020F; + --inverse-surface-transparent-negative-hover: #F31B313D; + --inverse-surface-transparent-negative-active: #F31B310F; + --inverse-surface-transparent-info-hover: #2A72F83D; + --inverse-surface-transparent-info-active: #2A72F80F; + --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-secondary: #ECECEC; + --inverse-surface-solid-tertiary: #DDDDDD; + --inverse-surface-solid-default: #080808; + --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-primary: #08080808; + --inverse-surface-transparent-secondary: #0808080F; + --inverse-surface-transparent-tertiary: #0808081F; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-clear: #FFFFFF00; + --inverse-surface-accent: #2A72F8; + --inverse-surface-accent-minor: #DEE9FF; + --inverse-surface-transparent-accent: #2A72F81F; + --inverse-surface-positive: #108E26; + --inverse-surface-warning: #E85702; + --inverse-surface-negative: #F31B31; + --inverse-surface-info: #2A72F8; + --inverse-surface-positive-minor: #9EFAAF; + --inverse-surface-warning-minor: #FEE2D2; + --inverse-surface-negative-minor: #FFE0E3; + --inverse-surface-info-minor: #DEE9FF; + --inverse-surface-transparent-positive: #108E261F; + --inverse-surface-transparent-warning: #E857021F; + --inverse-surface-transparent-negative: #F31B311F; + --inverse-surface-transparent-info: #2A72F81F; --background-primary: #080808; --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; @@ -395,6 +508,9 @@ export const plasma_web__dark = ([ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; --outline-solid-primary-hover: #303030FF; --outline-solid-primary-active: #212121FF; --outline-solid-secondary-hover: #595959FF; @@ -596,6 +712,75 @@ export const plasma_web__dark = ([ --on-light-outline-info: #2A72F8; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; + --inverse-outline-solid-primary-hover: #ABABABFF; + --inverse-outline-solid-primary-active: #C4C4C4FF; + --inverse-outline-solid-secondary-hover: #FFFFFFFF; + --inverse-outline-solid-secondary-active: #575757FF; + --inverse-outline-solid-tertiary-hover: #FFFFFFFF; + --inverse-outline-solid-tertiary-active: #737373FF; + --inverse-outline-transparent-primary-hover: #080808FF; + --inverse-outline-transparent-primary-active: #0808083D; + --inverse-outline-transparent-secondary-hover: #080808FF; + --inverse-outline-transparent-secondary-active: #0808087A; + --inverse-outline-transparent-tertiary-hover: #080808FF; + --inverse-outline-transparent-tertiary-active: #080808AB; + --inverse-outline-clear-hover: #FFFFFFFF; + --inverse-outline-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #79A7FBFF; + --inverse-outline-accent-active: #0D5FF8FF; + --inverse-outline-accent-minor-hover: #DCE8FEFF; + --inverse-outline-accent-minor-active: #6FA0FBFF; + --inverse-outline-transparent-accent-hover: #2A72F8FF; + --inverse-outline-transparent-accent-active: #2A72F83D; + --inverse-outline-positive-hover: #13AA2CFF; + --inverse-outline-positive-active: #0D731EFF; + --inverse-outline-warning-hover: #FD650DFF; + --inverse-outline-warning-active: #CA4B02FF; + --inverse-outline-negative-hover: #F5384BFF; + --inverse-outline-negative-active: #E40C22FF; + --inverse-outline-info-hover: #79A7FBFF; + --inverse-outline-info-active: #0D5FF8FF; + --inverse-outline-positive-minor-hover: #3EDA5BFF; + --inverse-outline-positive-minor-active: #23B83EFF; + --inverse-outline-warning-minor-hover: #FDB086FF; + --inverse-outline-warning-minor-active: #FC884AFF; + --inverse-outline-negative-minor-hover: #FFADB6FF; + --inverse-outline-negative-minor-active: #FF707EFF; + --inverse-outline-info-minor-hover: #DCE8FEFF; + --inverse-outline-info-minor-active: #6FA0FBFF; + --inverse-outline-transparent-positive-hover: #108E25FF; + --inverse-outline-transparent-positive-active: #108E253D; + --inverse-outline-transparent-warning-hover: #E85702FF; + --inverse-outline-transparent-warning-active: #E857023D; + --inverse-outline-transparent-negative-hover: #F31B31FF; + --inverse-outline-transparent-negative-active: #F31B313D; + --inverse-outline-transparent-info-hover: #2A72F8FF; + --inverse-outline-transparent-info-active: #2A72F83D; + --inverse-outline-solid-primary: #DDDDDD; + --inverse-outline-solid-secondary: #949494; + --inverse-outline-solid-tertiary: #707070; + --inverse-outline-transparent-primary: #08080833; + --inverse-outline-transparent-secondary: #08080866; + --inverse-outline-transparent-tertiary: #0808088F; + --inverse-outline-clear: #FFFFFF00; + --inverse-outline-default: #080808; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-accent: #2A72F8; + --inverse-outline-accent-minor: #8BB2FC; + --inverse-outline-transparent-accent: #2A72F833; + --inverse-outline-positive: #108E26; + --inverse-outline-warning: #E85702; + --inverse-outline-negative: #F31B31; + --inverse-outline-info: #2A72F8; + --inverse-outline-positive-minor: #28D247; + --inverse-outline-warning-minor: #FD9C68; + --inverse-outline-negative-minor: #FF8F9A; + --inverse-outline-info-minor: #8BB2FC; + --inverse-outline-transparent-positive: #108E2633; + --inverse-outline-transparent-warning: #E8570233; + --inverse-outline-transparent-negative: #F31B3133; + --inverse-outline-transparent-info: #2A72F833; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -643,6 +828,9 @@ export const plasma_web__dark = ([ --on-light-text-accent-gradient-hover: #CCCCCCFF; --on-light-text-accent-gradient-active: #E6E6E6FF; --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%),linear-gradient(89.83deg, #5E94FFFF 0%, #43DBFAFF 100%); @@ -670,6 +858,9 @@ export const plasma_web__dark = ([ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -695,11 +886,11 @@ export const plasma_web__dark = ([ :root { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/themes/plasma_web__light.ts b/packages/themes/plasma-themes/src/themes/plasma_web__light.ts index 9d1688281f..44e8f0fcbc 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_web__light.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_web__light.ts @@ -145,6 +145,36 @@ export const plasma_web__light = ([ --inverse-text-paragraph-hover: #FFFFFF7A; --inverse-text-paragraph-active: #FFFFFFA3; --inverse-text-paragraph: #FFFFFFCC; + --inverse-text-accent-hover: #7AA9FFFF; + --inverse-text-accent-active: #2974FFFF; + --inverse-text-accent-minor-hover: #FFFFFFFF; + --inverse-text-accent-minor-active: #113B88FF; + --inverse-text-positive-hover: #2BD44AFF; + --inverse-text-positive-active: #1D9032FF; + --inverse-text-warning-hover: #FF8B4DFF; + --inverse-text-warning-active: #FA5700FF; + --inverse-text-negative-hover: #FF6675FF; + --inverse-text-negative-active: #FF142CFF; + --inverse-text-info-hover: #7AA9FFFF; + --inverse-text-info-active: #2974FFFF; + --inverse-text-positive-minor-hover: #11A72CFF; + --inverse-text-positive-minor-active: #0D8222FF; + --inverse-text-warning-minor-hover: #CD5713FF; + --inverse-text-warning-minor-active: #A84710FF; + --inverse-text-negative-minor-hover: #C2192AFF; + --inverse-text-negative-minor-active: #7A101AFF; + --inverse-text-info-minor-hover: #FFFFFFFF; + --inverse-text-info-minor-active: #113B88FF; + --inverse-text-accent: #528EFF; + --inverse-text-accent-minor: #1549AB; + --inverse-text-positive: #24B23E; + --inverse-text-warning: #FF7024; + --inverse-text-negative: #FF3D51; + --inverse-text-info: #528EFF; + --inverse-text-positive-minor: #095C18; + --inverse-text-warning-minor: #85380C; + --inverse-text-negative-minor: #9C1422; + --inverse-text-info-minor: #1549AB; --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; @@ -382,10 +412,93 @@ export const plasma_web__light = ([ --on-light-surface-transparent-negative: #F31B311F; --on-light-surface-info: #2A72F8; --on-light-surface-transparent-info: #2A72F81F; + --inverse-surface-solid-primary-hover: #363636FF; + --inverse-surface-solid-primary-active: #0D0D0DFF; + --inverse-surface-solid-primary-brightness: #262626FF; + --inverse-surface-solid-secondary-hover: #3B3B3BFF; + --inverse-surface-solid-secondary-active: #1C1C1CFF; + --inverse-surface-solid-tertiary-hover: #4A4A4AFF; + --inverse-surface-solid-tertiary-active: #2B2B2BFF; + --inverse-surface-solid-card-hover: #363636FF; + --inverse-surface-solid-card-active: #0D0D0DFF; + --inverse-surface-solid-card-brightness: #262626FF; + --inverse-surface-solid-default-hover: #FFFFFFFF; + --inverse-surface-solid-default-active: #F5F5F5FF; + --inverse-surface-transparent-primary-hover: #FFFFFF05; + --inverse-surface-transparent-primary-active: #FFFFFF1A; + --inverse-surface-transparent-secondary-hover: #FFFFFF0A; + --inverse-surface-transparent-secondary-active: #FFFFFF29; + --inverse-surface-transparent-tertiary-hover: #FFFFFF1F; + --inverse-surface-transparent-tertiary-active: #FFFFFF3D; + --inverse-surface-transparent-deep-hover: #FFFFFF8F; + --inverse-surface-transparent-deep-active: #FFFFFFAD; + --inverse-surface-transparent-card-hover: #FFFFFF0A; + --inverse-surface-transparent-card-active: #FFFFFF29; + --inverse-surface-transparent-card-brightness: #FFFFFF1F; + --inverse-surface-clear-hover: #FFFFFFFF; + --inverse-surface-clear-active: #FFFFFFFF; + --inverse-surface-accent-hover: #689CFDFF; + --inverse-surface-accent-active: #2B74FDFF; + --inverse-surface-accent-minor-hover: #0A2A67FF; + --inverse-surface-accent-minor-active: #061B41FF; + --inverse-surface-transparent-accent-hover: #FFFFFFFF; + --inverse-surface-transparent-accent-active: #FFFFFFFF; + --inverse-surface-positive-hover: #1EB83AFF; + --inverse-surface-positive-active: #178C2CFF; + --inverse-surface-warning-hover: #FB782DFF; + --inverse-surface-warning-active: #E65705FF; + --inverse-surface-negative-hover: #FF5263FF; + --inverse-surface-negative-active: #FF142CFF; + --inverse-surface-info-hover: #689CFDFF; + --inverse-surface-info-active: #2B74FDFF; + --inverse-surface-positive-minor-hover: #0E3A16FF; + --inverse-surface-positive-minor-active: #061909FF; + --inverse-surface-warning-minor-hover: #58290EFF; + --inverse-surface-warning-minor-active: #2C1507FF; + --inverse-surface-negative-minor-hover: #64121AFF; + --inverse-surface-negative-minor-active: #380A0FFF; + --inverse-surface-info-minor-hover: #0A2A67FF; + --inverse-surface-info-minor-active: #061B41FF; + --inverse-surface-transparent-positive-hover: #1A9E321F; + --inverse-surface-transparent-positive-active: #1A9E323D; + --inverse-surface-transparent-warning-hover: #FA5F051F; + --inverse-surface-transparent-warning-active: #FA5F053D; + --inverse-surface-transparent-negative-hover: #FF293E1F; + --inverse-surface-transparent-negative-active: #FF293E3D; + --inverse-surface-transparent-info-hover: #3F82FD1F; + --inverse-surface-transparent-info-active: #3F82FD3D; + --inverse-surface-solid-card: #171717; + --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-secondary: #262626; + --inverse-surface-solid-tertiary: #363636; + --inverse-surface-solid-default: #F9F9F9; + --inverse-surface-transparent-primary: #FFFFFF0F; + --inverse-surface-transparent-card: #FFFFFF1F; + --inverse-surface-transparent-secondary: #FFFFFF1F; + --inverse-surface-transparent-tertiary: #FFFFFF33; + --inverse-surface-transparent-deep: #FFFFFFA3; + --inverse-surface-clear: #FFFFFF00; + --inverse-surface-accent: #3F81FD; + --inverse-surface-accent-minor: #082254; + --inverse-surface-transparent-accent: #3F81FD33; + --inverse-surface-positive: #1A9E32; + --inverse-surface-warning: #FA5F05; + --inverse-surface-negative: #FF293E; + --inverse-surface-info: #3F81FD; + --inverse-surface-positive-minor: #0A2B10; + --inverse-surface-warning-minor: #3D1D0A; + --inverse-surface-negative-minor: #4A0D13; + --inverse-surface-info-minor: #082254; + --inverse-surface-transparent-positive: #1A9E3233; + --inverse-surface-transparent-warning: #FA5F0533; + --inverse-surface-transparent-negative: #FF293E33; + --inverse-surface-transparent-info: #3F81FD33; --background-primary: #F9F9F9; --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #0F0F0FFF; + --inverse-background-primary: #080808; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; @@ -395,6 +508,9 @@ export const plasma_web__light = ([ --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #0808088F; + --inverse-overlay-hard: #080808F5; + --inverse-overlay-blur: #08080847; --outline-solid-primary-hover: #EDEDEDFF; --outline-solid-primary-active: #D4D4D4FF; --outline-solid-secondary-hover: #A3A3A3FF; @@ -596,6 +712,75 @@ export const plasma_web__light = ([ --on-light-outline-info: #2A72F8; --on-light-outline-info-minor: #8BB2FC; --on-light-outline-transparent-info: #2A72F833; + --inverse-outline-solid-primary-hover: #787878FF; + --inverse-outline-solid-primary-active: #4F4F4FFF; + --inverse-outline-solid-secondary-hover: #FFFFFFFF; + --inverse-outline-solid-secondary-active: #404040FF; + --inverse-outline-solid-tertiary-hover: #FFFFFFFF; + --inverse-outline-solid-tertiary-active: #595959FF; + --inverse-outline-transparent-primary-hover: #FFFFFFFF; + --inverse-outline-transparent-primary-active: #FFFFFF25; + --inverse-outline-transparent-secondary-hover: #FFFFFFFF; + --inverse-outline-transparent-secondary-active: #FFFFFF25; + --inverse-outline-transparent-tertiary-hover: #FFFFFFFF; + --inverse-outline-transparent-tertiary-active: #FFFFFF7A; + --inverse-outline-clear-hover: #FFFFFFFF; + --inverse-outline-clear-active: #FFFFFFFF; + --inverse-outline-accent-hover: #689CFDFF; + --inverse-outline-accent-active: #1767FDFF; + --inverse-outline-accent-minor-hover: #FFFFFFFF; + --inverse-outline-accent-minor-active: #113B88FF; + --inverse-outline-transparent-accent-hover: #528EFFFF; + --inverse-outline-transparent-accent-active: #528EFF56; + --inverse-outline-positive-hover: #2BD44AFF; + --inverse-outline-positive-active: #1D9032FF; + --inverse-outline-warning-hover: #FF8B4DFF; + --inverse-outline-warning-active: #FA5700FF; + --inverse-outline-negative-hover: #FF6675FF; + --inverse-outline-negative-active: #FF142CFF; + --inverse-outline-info-hover: #7AA9FFFF; + --inverse-outline-info-active: #2974FFFF; + --inverse-outline-positive-minor-hover: #11A72CFF; + --inverse-outline-positive-minor-active: #0D8222FF; + --inverse-outline-warning-minor-hover: #CD5713FF; + --inverse-outline-warning-minor-active: #A84710FF; + --inverse-outline-negative-minor-hover: #C2192AFF; + --inverse-outline-negative-minor-active: #7A101AFF; + --inverse-outline-info-minor-hover: #FFFFFFFF; + --inverse-outline-info-minor-active: #113B88FF; + --inverse-outline-transparent-positive-hover: #24B23EFF; + --inverse-outline-transparent-positive-active: #24B23E56; + --inverse-outline-transparent-warning-hover: #FF7024FF; + --inverse-outline-transparent-warning-active: #FF702456; + --inverse-outline-transparent-negative-hover: #FF3D51FF; + --inverse-outline-transparent-negative-active: #FF3D5156; + --inverse-outline-transparent-info-hover: #528EFFFF; + --inverse-outline-transparent-info-active: #528EFF56; + --inverse-outline-default-hover: #FFFFFFFF; + --inverse-outline-default-active: #C7C7C7FF; + --inverse-outline-solid-primary: #262626; + --inverse-outline-solid-secondary: #4E4E4E; + --inverse-outline-solid-tertiary: #707070; + --inverse-outline-transparent-primary: #FFFFFF1F; + --inverse-outline-transparent-tertiary: #FFFFFF66; + --inverse-outline-clear: #FFFFFF00; + --inverse-outline-default: #F9F9F9; + --inverse-outline-accent: #3F81FD; + --inverse-outline-accent-minor: #1549AB; + --inverse-outline-transparent-accent: #528EFF47; + --inverse-outline-positive: #24B23E; + --inverse-outline-warning: #FF7024; + --inverse-outline-negative: #FF3D51; + --inverse-outline-info: #528EFF; + --inverse-outline-positive-minor: #095C18; + --inverse-outline-warning-minor: #85380C; + --inverse-outline-negative-minor: #9C1422; + --inverse-outline-info-minor: #1549AB; + --inverse-outline-transparent-positive: #24B23E47; + --inverse-outline-transparent-warning: #FF702447; + --inverse-outline-transparent-negative: #FF3D5147; + --inverse-outline-transparent-info: #528EFF47; + --inverse-outline-transparent-secondary: #FFFFFF1F; color: var(--text-primary); background-color: var(--background-primary); --plasma-colors-white-primary: var(--on-dark-text-primary); @@ -643,6 +828,9 @@ export const plasma_web__light = ([ --on-light-text-accent-gradient-hover: #000000FF; --on-light-text-accent-gradient-active: #CCCCCCFF; --on-light-text-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); + --inverse-text-accent-gradient-hover: #FFFFFFFF; + --inverse-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient: linear-gradient(90deg, #5E94FFFF 0%, #43DBFAFF 100%); --surface-accent-gradient-hover: #FFFFFFFF; --surface-accent-gradient-active: #FFFFFFFF; --surface-accent-gradient: linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); @@ -670,6 +858,9 @@ export const plasma_web__light = ([ --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%); --inverse-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; --inverse-surface-skeleton-gradient-active: #FFFFFFFF; @@ -695,11 +886,11 @@ export const plasma_web__light = ([ :root { --border-radius-xxs: 4px; - --border-radius-xs: 8px; - --border-radius-s: 12px; - --border-radius-m: 16px; - --border-radius-l: 20px; - --border-radius-xl: 24px; + --border-radius-xs: 6px; + --border-radius-s: 8px; + --border-radius-m: 12px; + --border-radius-l: 16px; + --border-radius-xl: 20px; --border-radius-xxl: 32px; } diff --git a/packages/themes/plasma-themes/src/themes/stylesSalute__dark.ts b/packages/themes/plasma-themes/src/themes/stylesSalute__dark.ts index 012135ed81..0c44d61e34 100644 --- a/packages/themes/plasma-themes/src/themes/stylesSalute__dark.ts +++ b/packages/themes/plasma-themes/src/themes/stylesSalute__dark.ts @@ -732,6 +732,9 @@ export const stylesSalute__dark = ([ --background-primary: #000000FF; --background-primary-brightness: #0F0FFFFF; --background-secondary: #171717; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #F2F2F2FF; + --inverse-background-secondary: #FFFFFFFF; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; --on-dark-overlay-blur: #26262647; diff --git a/packages/themes/plasma-themes/src/themes/stylesSalute__light.ts b/packages/themes/plasma-themes/src/themes/stylesSalute__light.ts index 5d927d39b1..6bcf7f14a5 100644 --- a/packages/themes/plasma-themes/src/themes/stylesSalute__light.ts +++ b/packages/themes/plasma-themes/src/themes/stylesSalute__light.ts @@ -734,6 +734,9 @@ export const stylesSalute__light = ([ --background-primary: #F2F2F2FF; --background-primary-brightness: #F3F3F3FF; --background-secondary: #FFFFFFFF; + --inverse-background-primary-brightness: #FFFFFFFF; + --inverse-background-primary: #000000FF; + --inverse-background-secondary: #171717; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; --on-dark-overlay-blur: #26262647; diff --git a/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts b/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts index 473f5b5f08..f26c9ab467 100644 --- a/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts +++ b/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts @@ -426,6 +426,96 @@ export const inverseTextParagraphHover = 'var(--inverse-text-paragraph-hover, #0 /** Инвертированный cплошной наборный текст */ export const inverseTextParagraphActive = 'var(--inverse-text-paragraph-active, #080808A3)'; +/** Инвертированный акцентный цвет */ +export const inverseTextAccentHover = 'var(--inverse-text-accent-hover, #79A7FBFF)'; + +/** Инвертированный акцентный цвет */ +export const inverseTextAccentActive = 'var(--inverse-text-accent-active, #0D5FF8FF)'; + +/** Инвертированный цвет успеха */ +export const inverseTextPositiveHover = 'var(--inverse-text-positive-hover, #1EB83AFF)'; + +/** Инвертированный цвет успеха */ +export const inverseTextPositiveActive = 'var(--inverse-text-positive-active, #15842AFF)'; + +/** Инвертированный цвет предупреждения */ +export const inverseTextWarningHover = 'var(--inverse-text-warning-hover, #FB7223FF)'; + +/** Инвертированный цвет предупреждения */ +export const inverseTextWarningActive = 'var(--inverse-text-warning-active, #DC5304FF)'; + +/** Инвертированный цвет ошибки */ +export const inverseTextNegativeHover = 'var(--inverse-text-negative-hover, #F5384BFF)'; + +/** Инвертированный цвет ошибки */ +export const inverseTextNegativeActive = 'var(--inverse-text-negative-active, #E40C22FF)'; + +/** dark text inverse textAccentMinorHover */ +export const inverseTextAccentMinorHover = 'var(--inverse-text-accent-minor-hover, #DCE8FEFF)'; + +/** dark text inverse textAccentMinorActive */ +export const inverseTextAccentMinorActive = 'var(--inverse-text-accent-minor-active, #6FA0FBFF)'; + +/** Инвертированный акцентный цвет */ +export const inverseTextAccent = 'var(--inverse-text-accent, #2A72F8)'; + +/** dark text inverse textAccentMinor */ +export const inverseTextAccentMinor = 'var(--inverse-text-accent-minor, #8BB2FC)'; + +/** Инвертированный цвет успеха */ +export const inverseTextPositive = 'var(--inverse-text-positive, #1A9E32)'; + +/** Инвертированный цвет предупреждения */ +export const inverseTextWarning = 'var(--inverse-text-warning, #FA5F05)'; + +/** Инвертированный цвет ошибки */ +export const inverseTextNegative = 'var(--inverse-text-negative, #F31B31)'; + +/** dark text inverse textInfo */ +export const inverseTextInfo = 'var(--inverse-text-info, #2A72F8)'; + +/** dark text inverse textInfoHover */ +export const inverseTextInfoHover = 'var(--inverse-text-info-hover, #79A7FBFF)'; + +/** dark text inverse textInfoActive */ +export const inverseTextInfoActive = 'var(--inverse-text-info-active, #0D5FF8FF)'; + +/** dark text inverse textPositiveMinor */ +export const inverseTextPositiveMinor = 'var(--inverse-text-positive-minor, #28D247)'; + +/** dark text inverse textPositiveMinorHover */ +export const inverseTextPositiveMinorHover = 'var(--inverse-text-positive-minor-hover, #3EDA5BFF)'; + +/** dark text inverse textPositiveMinorActive */ +export const inverseTextPositiveMinorActive = 'var(--inverse-text-positive-minor-active, #23B83EFF)'; + +/** dark text inverse textWarningMinor */ +export const inverseTextWarningMinor = 'var(--inverse-text-warning-minor, #FD9C68)'; + +/** dark text inverse textWarningMinorHover */ +export const inverseTextWarningMinorHover = 'var(--inverse-text-warning-minor-hover, #FDB086FF)'; + +/** dark text inverse textWarningMinorActive */ +export const inverseTextWarningMinorActive = 'var(--inverse-text-warning-minor-active, #FC884AFF)'; + +/** dark text inverse textNegativeMinor */ +export const inverseTextNegativeMinor = 'var(--inverse-text-negative-minor, #FF8F9A)'; + +/** dark text inverse textNegativeMinorHover */ +export const inverseTextNegativeMinorHover = 'var(--inverse-text-negative-minor-hover, #FFADB6FF)'; + +/** dark text inverse textNegativeMinorActive */ +export const inverseTextNegativeMinorActive = 'var(--inverse-text-negative-minor-active, #FF707EFF)'; + +/** dark text inverse textInfoMinor */ +export const inverseTextInfoMinor = 'var(--inverse-text-info-minor, #8BB2FC)'; + +/** dark text inverse textInfoMinorHover */ +export const inverseTextInfoMinorHover = 'var(--inverse-text-info-minor-hover, #DCE8FEFF)'; + +/** dark text inverse textInfoMinorActive */ +export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active, #6FA0FBFF)'; + /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #171717)'; @@ -1138,6 +1228,250 @@ export const onLightSurfaceTransparentDeepHover = 'var(--on-light-surface-transp /** dark surface onLight surfaceTransparentDeepActive */ export const onLightSurfaceTransparentDeepActive = 'var(--on-light-surface-transparent-deep-active, #08080894)'; +/** Инвертированный осн. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness, #FFFFFFFF)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness, #FFFFFFFF)'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness, #FFFFFFFF)'; + +/** dark surface inverse surfacePositive */ +export const inverseSurfacePositive = 'var(--inverse-surface-positive, #1A9E32)'; + +/** dark surface inverse surfaceWarning */ +export const inverseSurfaceWarning = 'var(--inverse-surface-warning, #FA5F05)'; + +/** dark surface inverse surfaceNegative */ +export const inverseSurfaceNegative = 'var(--inverse-surface-negative, #F31B31)'; + +/** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ +export const inverseSurfaceSolidDefaultHover = 'var(--inverse-surface-solid-default-hover, #0D0D0DFF)'; + +/** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ +export const inverseSurfaceSolidDefaultActive = 'var(--inverse-surface-solid-default-active, #030303FF)'; + +/** Инвертированный осн. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryHover = 'var(--inverse-surface-solid-primary-hover, #FAFAFAFF)'; + +/** Инвертированный осн. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryActive = 'var(--inverse-surface-solid-primary-active, #F0F0F0FF)'; + +/** Инвертированный втор. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidSecondaryHover = 'var(--inverse-surface-solid-secondary-hover, #F7F7F7FF)'; + +/** Инвертированный втор. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidSecondaryActive = 'var(--inverse-surface-solid-secondary-active, #E8E8E8FF)'; + +/** Инвертированный трет.непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidTertiaryHover = 'var(--inverse-surface-solid-tertiary-hover, #E8E8E8FF)'; + +/** Инвертированный трет.непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidTertiaryActive = 'var(--inverse-surface-solid-tertiary-active, #D9D9D9FF)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardHover = 'var(--inverse-surface-solid-card-hover, #FFFFFFFF)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardActive = 'var(--inverse-surface-solid-card-active, #FFFFFFFF)'; + +/** Инвертированный основной прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentPrimaryHover = 'var(--inverse-surface-transparent-primary-hover, #08080812)'; + +/** Инвертированный основной прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentPrimaryActive = 'var(--inverse-surface-transparent-primary-active, #08080803)'; + +/** Инвертированный вторичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentSecondaryHover = 'var(--inverse-surface-transparent-secondary-hover, #0808081F)'; + +/** Инвертированный вторичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentSecondaryActive = + 'var(--inverse-surface-transparent-secondary-active, #0808080A)'; + +/** Инвертированный третичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentTertiaryHover = 'var(--inverse-surface-transparent-tertiary-hover, #0808083D)'; + +/** Инвертированный третичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentTertiaryActive = 'var(--inverse-surface-transparent-tertiary-active, #0808080F)'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardHover = 'var(--inverse-surface-transparent-card-hover, #FFFFFFFF)'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardActive = 'var(--inverse-surface-transparent-card-active, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceAccentHover = 'var(--inverse-surface-accent-hover, #4886F9FF)'; + +/** Инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceAccentActive = 'var(--inverse-surface-accent-active, #206CF8FF)'; + +/** dark surface inverse surfacePositiveHover */ +export const inverseSurfacePositiveHover = 'var(--inverse-surface-positive-hover, #1DAF37FF)'; + +/** dark surface inverse surfacePositiveActive */ +export const inverseSurfacePositiveActive = 'var(--inverse-surface-positive-active, #18952FFF)'; + +/** dark surface inverse surfaceWarningHover */ +export const inverseSurfaceWarningHover = 'var(--inverse-surface-warning-hover, #FB7223FF)'; + +/** dark surface inverse surfaceWarningActive */ +export const inverseSurfaceWarningActive = 'var(--inverse-surface-warning-active, #F05B05FF)'; + +/** dark surface inverse surfaceNegativeHover */ +export const inverseSurfaceNegativeHover = 'var(--inverse-surface-negative-hover, #F5384BFF)'; + +/** dark surface inverse surfaceNegativeActive */ +export const inverseSurfaceNegativeActive = 'var(--inverse-surface-negative-active, #F31228FF)'; + +/** Инвертированный фон поверхности/контрола без заливки */ +export const inverseSurfaceClearHover = 'var(--inverse-surface-clear-hover, #FFFFFFFF)'; + +/** Инвертированный фон поверхности/контрола без заливки */ +export const inverseSurfaceClearActive = 'var(--inverse-surface-clear-active, #FFFFFFFF)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #FFFFFFFF)'; + +/** Инвертированный осн. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F5F5F5)'; + +/** Инвертированный втор. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidSecondary = 'var(--inverse-surface-solid-secondary, #ECECEC)'; + +/** Инвертированный трет.непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidTertiary = 'var(--inverse-surface-solid-tertiary, #DDDDDD)'; + +/** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ +export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default, #080808)'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card, #FFFFFFFF)'; + +/** Инвертированный основной прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentPrimary = 'var(--inverse-surface-transparent-primary, #08080808)'; + +/** Инвертированный вторичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentSecondary = 'var(--inverse-surface-transparent-secondary, #0808080F)'; + +/** Инвертированный третичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentTertiary = 'var(--inverse-surface-transparent-tertiary, #0808081F)'; + +/** dark surface inverse surfaceTransparentDeep */ +export const inverseSurfaceTransparentDeep = 'var(--inverse-surface-transparent-deep, #080808A3)'; + +/** dark surface inverse surfaceTransparentDeepHover */ +export const inverseSurfaceTransparentDeepHover = 'var(--inverse-surface-transparent-deep-hover, #080808C2)'; + +/** dark surface inverse surfaceTransparentDeepActive */ +export const inverseSurfaceTransparentDeepActive = 'var(--inverse-surface-transparent-deep-active, #08080894)'; + +/** Инвертированный фон поверхности/контрола без заливки */ +export const inverseSurfaceClear = 'var(--inverse-surface-clear, #00000000)'; + +/** Инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceAccent = 'var(--inverse-surface-accent, #2A72F8)'; + +/** dark surface inverse surfaceAccentMinor */ +export const inverseSurfaceAccentMinor = 'var(--inverse-surface-accent-minor, #DEE9FF)'; + +/** dark surface inverse surfaceAccentMinorHover */ +export const inverseSurfaceAccentMinorHover = 'var(--inverse-surface-accent-minor-hover, #EBF1FFFF)'; + +/** dark surface inverse surfaceAccentMinorActive */ +export const inverseSurfaceAccentMinorActive = 'var(--inverse-surface-accent-minor-active, #D6E4FFFF)'; + +/** dark surface inverse surfaceTransparentAccent */ +export const inverseSurfaceTransparentAccent = 'var(--inverse-surface-transparent-accent, #2A72F81F)'; + +/** dark surface inverse surfaceTransparentAccentHover */ +export const inverseSurfaceTransparentAccentHover = 'var(--inverse-surface-transparent-accent-hover, #2A72F83D)'; + +/** dark surface inverse surfaceTransparentAccentActive */ +export const inverseSurfaceTransparentAccentActive = 'var(--inverse-surface-transparent-accent-active, #2A72F80F)'; + +/** dark surface inverse surfaceInfo */ +export const inverseSurfaceInfo = 'var(--inverse-surface-info, #2A72F8)'; + +/** dark surface inverse surfaceInfoHover */ +export const inverseSurfaceInfoHover = 'var(--inverse-surface-info-hover, #4886F9FF)'; + +/** dark surface inverse surfaceInfoActive */ +export const inverseSurfaceInfoActive = 'var(--inverse-surface-info-active, #206CF8FF)'; + +/** dark surface inverse surfacePositiveMinor */ +export const inverseSurfacePositiveMinor = 'var(--inverse-surface-positive-minor, #9EFAAF)'; + +/** dark surface inverse surfacePositiveMinorHover */ +export const inverseSurfacePositiveMinorHover = 'var(--inverse-surface-positive-minor-hover, #B1FBBFFF)'; + +/** dark surface inverse surfacePositiveMinorActive */ +export const inverseSurfacePositiveMinorActive = 'var(--inverse-surface-positive-minor-active, #94F9A7FF)'; + +/** dark surface inverse surfaceWarningMinor */ +export const inverseSurfaceWarningMinor = 'var(--inverse-surface-warning-minor, #FEE2D2)'; + +/** dark surface inverse surfaceWarningMinorHover */ +export const inverseSurfaceWarningMinorHover = 'var(--inverse-surface-warning-minor-hover, #FEE9DCFF)'; + +/** dark surface inverse surfaceWarningMinorActive */ +export const inverseSurfaceWarningMinorActive = 'var(--inverse-surface-warning-minor-active, #FEDCC8FF)'; + +/** dark surface inverse surfaceNegativeMinor */ +export const inverseSurfaceNegativeMinor = 'var(--inverse-surface-negative-minor, #FFE0E3)'; + +/** dark surface inverse surfaceNegativeMinorHover */ +export const inverseSurfaceNegativeMinorHover = 'var(--inverse-surface-negative-minor-hover, #FFEBEDFF)'; + +/** dark surface inverse surfaceNegativeMinorActive */ +export const inverseSurfaceNegativeMinorActive = 'var(--inverse-surface-negative-minor-active, #FFD6DAFF)'; + +/** dark surface inverse surfaceInfoMinor */ +export const inverseSurfaceInfoMinor = 'var(--inverse-surface-info-minor, #DEE9FF)'; + +/** dark surface inverse surfaceInfoMinorHover */ +export const inverseSurfaceInfoMinorHover = 'var(--inverse-surface-info-minor-hover, #EBF1FFFF)'; + +/** dark surface inverse surfaceInfoMinorActive */ +export const inverseSurfaceInfoMinorActive = 'var(--inverse-surface-info-minor-active, #D6E4FFFF)'; + +/** dark surface inverse surfaceTransparentPositive */ +export const inverseSurfaceTransparentPositive = 'var(--inverse-surface-transparent-positive, #1A9E321F)'; + +/** dark surface inverse surfaceTransparentPositiveHover */ +export const inverseSurfaceTransparentPositiveHover = 'var(--inverse-surface-transparent-positive-hover, #1A9E323D)'; + +/** dark surface inverse surfaceTransparentPositiveActive */ +export const inverseSurfaceTransparentPositiveActive = 'var(--inverse-surface-transparent-positive-active, #1A9E320F)'; + +/** dark surface inverse surfaceTransparentWarning */ +export const inverseSurfaceTransparentWarning = 'var(--inverse-surface-transparent-warning, #FA5F051F)'; + +/** dark surface inverse surfaceTransparentWarningHover */ +export const inverseSurfaceTransparentWarningHover = 'var(--inverse-surface-transparent-warning-hover, #FA5F053D)'; + +/** dark surface inverse surfaceTransparentWarningActive */ +export const inverseSurfaceTransparentWarningActive = 'var(--inverse-surface-transparent-warning-active, #FA5F050F)'; + +/** dark surface inverse surfaceTransparentNegative */ +export const inverseSurfaceTransparentNegative = 'var(--inverse-surface-transparent-negative, #F31B311F)'; + +/** dark surface inverse surfaceTransparentNegativeHover */ +export const inverseSurfaceTransparentNegativeHover = 'var(--inverse-surface-transparent-negative-hover, #F31B313D)'; + +/** dark surface inverse surfaceTransparentNegativeActive */ +export const inverseSurfaceTransparentNegativeActive = 'var(--inverse-surface-transparent-negative-active, #F31B310F)'; + +/** dark surface inverse surfaceTransparentInfo */ +export const inverseSurfaceTransparentInfo = 'var(--inverse-surface-transparent-info, #2A72F81F)'; + +/** dark surface inverse surfaceTransparentInfoHover */ +export const inverseSurfaceTransparentInfoHover = 'var(--inverse-surface-transparent-info-hover, #2A72F83D)'; + +/** dark surface inverse surfaceTransparentInfoActive */ +export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transparent-info-active, #2A72F80F)'; + /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #080808)'; @@ -1150,6 +1484,12 @@ export const darkBackgroundPrimary = 'var(--dark-background-primary, #080808)'; /** Основной фон на светлом фоне */ export const lightBackgroundPrimary = 'var(--light-background-primary, #F9F9F9)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness, #FFFFFFFF)'; + +/** Инвертированный основной фон */ +export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F9F9F9)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft, #0808088F)'; @@ -1177,6 +1517,15 @@ export const onLightOverlayHard = 'var(--on-light-overlay-hard, #F9F9F9F5)'; /** dark overlay onLight overlayBlur */ export const onLightOverlayBlur = 'var(--on-light-overlay-blur, #F9F9F947)'; +/** Инвертированный цвет фона паранжи светлый */ +export const inverseOverlaySoft = 'var(--inverse-overlay-soft, #F9F9F98F)'; + +/** Инвертированный цвет фона паранжи темный */ +export const inverseOverlayHard = 'var(--inverse-overlay-hard, #F9F9F9F5)'; + +/** dark overlay inverse overlayBlur */ +export const inverseOverlayBlur = 'var(--inverse-overlay-blur, #F9F9F947)'; + /** dark outline default outlinePrimary */ export const outlinePrimary = 'var(--outline-primary, #262626)'; @@ -1788,10 +2137,212 @@ export const onLightOutlineInfoMinor = 'var(--on-light-outline-info-minor, #8BB2 export const onLightOutlineTransparentInfo = 'var(--on-light-outline-transparent-info, #2A72F833)'; /** dark outline inverse outlinePrimaryHover */ -export const inverseOutlinePrimaryHover = 'var(--inverse-outline-primary-hover, #CCCCCCFF)'; +export const inverseOutlinePrimaryHover = 'var(--inverse-outline-primary-hover, #ABABABFF)'; /** dark outline inverse outlinePrimaryActive */ -export const inverseOutlinePrimaryActive = 'var(--inverse-outline-primary-active, #E6E6E6FF)'; +export const inverseOutlinePrimaryActive = 'var(--inverse-outline-primary-active, #C4C4C4FF)'; + +/** dark outline inverse outlinePrimary */ +export const inverseOutlinePrimary = 'var(--inverse-outline-primary, #DDDDDD)'; + +/** dark outline inverse outlineSecondary */ +export const inverseOutlineSecondary = 'var(--inverse-outline-secondary, #949494)'; + +/** dark outline inverse outlineSecondaryHover */ +export const inverseOutlineSecondaryHover = 'var(--inverse-outline-secondary-hover, #FFFFFFFF)'; + +/** dark outline inverse outlineSecondaryActive */ +export const inverseOutlineSecondaryActive = 'var(--inverse-outline-secondary-active, #575757FF)'; + +/** dark outline inverse outlineTertiary */ +export const inverseOutlineTertiary = 'var(--inverse-outline-tertiary, #707070)'; + +/** dark outline inverse outlineTertiaryHover */ +export const inverseOutlineTertiaryHover = 'var(--inverse-outline-tertiary-hover, #FFFFFFFF)'; + +/** dark outline inverse outlineTertiaryActive */ +export const inverseOutlineTertiaryActive = 'var(--inverse-outline-tertiary-active, #737373FF)'; + +/** dark outline inverse outlineDefault */ +export const inverseOutlineDefault = 'var(--inverse-outline-default, #080808)'; + +/** dark outline inverse outlineDefaultHover */ +export const inverseOutlineDefaultHover = 'var(--inverse-outline-default-hover, #FFFFFFFF)'; + +/** dark outline inverse outlineDefaultActive */ +export const inverseOutlineDefaultActive = 'var(--inverse-outline-default-active, #C7C7C7FF)'; + +/** dark outline inverse outlineTransparentPrimary */ +export const inverseOutlineTransparentPrimary = 'var(--inverse-outline-transparent-primary, #08080833)'; + +/** dark outline inverse outlineTransparentPrimaryHover */ +export const inverseOutlineTransparentPrimaryHover = 'var(--inverse-outline-transparent-primary-hover, #080808FF)'; + +/** dark outline inverse outlineTransparentPrimaryActive */ +export const inverseOutlineTransparentPrimaryActive = 'var(--inverse-outline-transparent-primary-active, #0808083D)'; + +/** dark outline inverse outlineTransparentSecondary */ +export const inverseOutlineTransparentSecondary = 'var(--inverse-outline-transparent-secondary, #08080866)'; + +/** dark outline inverse outlineTransparentSecondaryHover */ +export const inverseOutlineTransparentSecondaryHover = 'var(--inverse-outline-transparent-secondary-hover, #080808FF)'; + +/** dark outline inverse outlineTransparentSecondaryActive */ +export const inverseOutlineTransparentSecondaryActive = + 'var(--inverse-outline-transparent-secondary-active, #0808087A)'; + +/** dark outline inverse outlineTransparentTertiary */ +export const inverseOutlineTransparentTertiary = 'var(--inverse-outline-transparent-tertiary, #0808088F)'; + +/** dark outline inverse outlineTransparentTertiaryHover */ +export const inverseOutlineTransparentTertiaryHover = 'var(--inverse-outline-transparent-tertiary-hover, #080808FF)'; + +/** dark outline inverse outlineTransparentTertiaryActive */ +export const inverseOutlineTransparentTertiaryActive = 'var(--inverse-outline-transparent-tertiary-active, #080808AB)'; + +/** dark outline inverse outlineTransparentClear */ +export const inverseOutlineTransparentClear = 'var(--inverse-outline-transparent-clear, #FFFFFF00)'; + +/** dark outline inverse outlineTransparentClearHover */ +export const inverseOutlineTransparentClearHover = 'var(--inverse-outline-transparent-clear-hover, #FFFFFFFF)'; + +/** dark outline inverse outlineTransparentClearActive */ +export const inverseOutlineTransparentClearActive = 'var(--inverse-outline-transparent-clear-active, #FFFFFFFF)'; + +/** dark outline inverse outlineAccent */ +export const inverseOutlineAccent = 'var(--inverse-outline-accent, #2A72F8)'; + +/** dark outline inverse outlineAccentHover */ +export const inverseOutlineAccentHover = 'var(--inverse-outline-accent-hover, #79A7FBFF)'; + +/** dark outline inverse outlineAccentActive */ +export const inverseOutlineAccentActive = 'var(--inverse-outline-accent-active, #0D5FF8FF)'; + +/** dark outline inverse outlineAccentMinor */ +export const inverseOutlineAccentMinor = 'var(--inverse-outline-accent-minor, #8BB2FC)'; + +/** dark outline inverse outlineAccentMinorHover */ +export const inverseOutlineAccentMinorHover = 'var(--inverse-outline-accent-minor-hover, #DCE8FEFF)'; + +/** dark outline inverse outlineAccentMinorActive */ +export const inverseOutlineAccentMinorActive = 'var(--inverse-outline-accent-minor-active, #6FA0FBFF)'; + +/** dark outline inverse outlineTransparentAccent */ +export const inverseOutlineTransparentAccent = 'var(--inverse-outline-transparent-accent, #2A72F833)'; + +/** dark outline inverse outlineTransparentAccentHover */ +export const inverseOutlineTransparentAccentHover = 'var(--inverse-outline-transparent-accent-hover, #2A72F8FF)'; + +/** dark outline inverse outlineTransparentAccentActive */ +export const inverseOutlineTransparentAccentActive = 'var(--inverse-outline-transparent-accent-active, #2A72F83D)'; + +/** dark outline inverse outlinePositive */ +export const inverseOutlinePositive = 'var(--inverse-outline-positive, #1A9E32)'; + +/** dark outline inverse outlinePositiveHover */ +export const inverseOutlinePositiveHover = 'var(--inverse-outline-positive-hover, #1EB83AFF)'; + +/** dark outline inverse outlinePositiveActive */ +export const inverseOutlinePositiveActive = 'var(--inverse-outline-positive-active, #15842AFF)'; + +/** dark outline inverse outlineWarning */ +export const inverseOutlineWarning = 'var(--inverse-outline-warning, #FA5F05)'; + +/** dark outline inverse outlineWarningHover */ +export const inverseOutlineWarningHover = 'var(--inverse-outline-warning-hover, #FB7223FF)'; + +/** dark outline inverse outlineWarningActive */ +export const inverseOutlineWarningActive = 'var(--inverse-outline-warning-active, #DC5304FF)'; + +/** dark outline inverse outlineNegative */ +export const inverseOutlineNegative = 'var(--inverse-outline-negative, #F31B31)'; + +/** dark outline inverse outlineNegativeHover */ +export const inverseOutlineNegativeHover = 'var(--inverse-outline-negative-hover, #F5384BFF)'; + +/** dark outline inverse outlineNegativeActive */ +export const inverseOutlineNegativeActive = 'var(--inverse-outline-negative-active, #E40C22FF)'; + +/** dark outline inverse outlineInfo */ +export const inverseOutlineInfo = 'var(--inverse-outline-info, #2A72F8)'; + +/** dark outline inverse outlineInfoHover */ +export const inverseOutlineInfoHover = 'var(--inverse-outline-info-hover, #79A7FBFF)'; + +/** dark outline inverse outlineInfoActive */ +export const inverseOutlineInfoActive = 'var(--inverse-outline-info-active, #0D5FF8FF)'; + +/** dark outline inverse outlinePositiveMinor */ +export const inverseOutlinePositiveMinor = 'var(--inverse-outline-positive-minor, #28D247)'; + +/** dark outline inverse outlinePositiveMinorHover */ +export const inverseOutlinePositiveMinorHover = 'var(--inverse-outline-positive-minor-hover, #3EDA5BFF)'; + +/** dark outline inverse outlinePositiveMinorActive */ +export const inverseOutlinePositiveMinorActive = 'var(--inverse-outline-positive-minor-active, #23B83EFF)'; + +/** dark outline inverse outlineWarningMinor */ +export const inverseOutlineWarningMinor = 'var(--inverse-outline-warning-minor, #FD9C68)'; + +/** dark outline inverse outlineWarningMinorHover */ +export const inverseOutlineWarningMinorHover = 'var(--inverse-outline-warning-minor-hover, #FDB086FF)'; + +/** dark outline inverse outlineWarningMinorActive */ +export const inverseOutlineWarningMinorActive = 'var(--inverse-outline-warning-minor-active, #FC884AFF)'; + +/** dark outline inverse outlineNegativeMinor */ +export const inverseOutlineNegativeMinor = 'var(--inverse-outline-negative-minor, #FF8F9A)'; + +/** dark outline inverse outlineNegativeMinorHover */ +export const inverseOutlineNegativeMinorHover = 'var(--inverse-outline-negative-minor-hover, #FFADB6FF)'; + +/** dark outline inverse outlineNegativeMinorActive */ +export const inverseOutlineNegativeMinorActive = 'var(--inverse-outline-negative-minor-active, #FF707EFF)'; + +/** dark outline inverse outlineInfoMinor */ +export const inverseOutlineInfoMinor = 'var(--inverse-outline-info-minor, #8BB2FC)'; + +/** dark outline inverse outlineInfoMinorHover */ +export const inverseOutlineInfoMinorHover = 'var(--inverse-outline-info-minor-hover, #DCE8FEFF)'; + +/** dark outline inverse outlineInfoMinorActive */ +export const inverseOutlineInfoMinorActive = 'var(--inverse-outline-info-minor-active, #6FA0FBFF)'; + +/** dark outline inverse outlineTransparentPositive */ +export const inverseOutlineTransparentPositive = 'var(--inverse-outline-transparent-positive, #1A9E3233)'; + +/** dark outline inverse outlineTransparentPositiveHover */ +export const inverseOutlineTransparentPositiveHover = 'var(--inverse-outline-transparent-positive-hover, #1A9E32FF)'; + +/** dark outline inverse outlineTransparentPositiveActive */ +export const inverseOutlineTransparentPositiveActive = 'var(--inverse-outline-transparent-positive-active, #1A9E323D)'; + +/** dark outline inverse outlineTransparentWarning */ +export const inverseOutlineTransparentWarning = 'var(--inverse-outline-transparent-warning, #FA5F0533)'; + +/** dark outline inverse outlineTransparentWarningHover */ +export const inverseOutlineTransparentWarningHover = 'var(--inverse-outline-transparent-warning-hover, #FA5F05FF)'; + +/** dark outline inverse outlineTransparentWarningActive */ +export const inverseOutlineTransparentWarningActive = 'var(--inverse-outline-transparent-warning-active, #FA5F053D)'; + +/** dark outline inverse outlineTransparentNegative */ +export const inverseOutlineTransparentNegative = 'var(--inverse-outline-transparent-negative, #F31B3133)'; + +/** dark outline inverse outlineTransparentNegativeHover */ +export const inverseOutlineTransparentNegativeHover = 'var(--inverse-outline-transparent-negative-hover, #F31B31FF)'; + +/** dark outline inverse outlineTransparentNegativeActive */ +export const inverseOutlineTransparentNegativeActive = 'var(--inverse-outline-transparent-negative-active, #F31B313D)'; + +/** dark outline inverse outlineTransparentInfo */ +export const inverseOutlineTransparentInfo = 'var(--inverse-outline-transparent-info, #2A72F833)'; + +/** dark outline inverse outlineTransparentInfoHover */ +export const inverseOutlineTransparentInfoHover = 'var(--inverse-outline-transparent-info-hover, #2A72F8FF)'; + +/** dark outline inverse outlineTransparentInfoActive */ +export const inverseOutlineTransparentInfoActive = 'var(--inverse-outline-transparent-info-active, #2A72F83D)'; /** @deprecated instead use onDarkTextPrimary */ export const whitePrimary = 'var(--plasma-colors-white-primary, var(--on-dark-text-primary))'; @@ -1924,6 +2475,16 @@ export const onLightTextAccentGradientHover = 'var(--on-light-text-accent-gradie /** Акцентный цвет с градиентом на светлом фоне */ export const onLightTextAccentGradientActive = 'var(--on-light-text-accent-gradient-active, #E6E6E6FF)'; +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradientHover = 'var(--inverse-text-accent-gradient-hover, #CCCCCCFF)'; + +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradientActive = 'var(--inverse-text-accent-gradient-active, #E6E6E6FF)'; + +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradient = + 'var(--inverse-text-accent-gradient, linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%))'; + /** Акцентный фон поверхности/контрола с градиентом */ export const surfaceAccentGradient = 'var(--surface-accent-gradient, linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%),linear-gradient(89.83deg, #5E94FFFF 0%, #43DBFAFF 100%))'; @@ -2017,6 +2578,16 @@ export const onLightSurfaceSkeletonDeepGradientHover = export const onLightSurfaceSkeletonDeepGradientActive = 'var(--on-light-surface-skeleton-deep-gradient-active, #FFFFFFFF)'; +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradientHover = 'var(--inverse-surface-accent-gradient-hover, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradientActive = 'var(--inverse-surface-accent-gradient-active, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradient = + 'var(--inverse-surface-accent-gradient, linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%))'; + /** Фон для скелетона */ export const inverseSurfaceSkeletonGradient = 'var(--inverse-surface-skeleton-gradient, linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%))'; @@ -2078,19 +2649,19 @@ export const shadowUpHardL = 'var(--shadow-up-hard-l, 0px -60px 112px -8px #0000 export const borderRadiusXxs = 'var(--border-radius-xxs, 4px)'; /** borderRadius xs */ -export const borderRadiusXs = 'var(--border-radius-xs, 8px)'; +export const borderRadiusXs = 'var(--border-radius-xs, 6px)'; /** borderRadius s */ -export const borderRadiusS = 'var(--border-radius-s, 12px)'; +export const borderRadiusS = 'var(--border-radius-s, 8px)'; /** borderRadius m */ -export const borderRadiusM = 'var(--border-radius-m, 16px)'; +export const borderRadiusM = 'var(--border-radius-m, 12px)'; /** borderRadius l */ -export const borderRadiusL = 'var(--border-radius-l, 20px)'; +export const borderRadiusL = 'var(--border-radius-l, 16px)'; /** borderRadius xl */ -export const borderRadiusXl = 'var(--border-radius-xl, 24px)'; +export const borderRadiusXl = 'var(--border-radius-xl, 20px)'; /** borderRadius xxl */ export const borderRadiusXxl = 'var(--border-radius-xxl, 32px)'; @@ -2493,6 +3064,36 @@ export const viewContainer = { --inverse-text-tertiary-active: var(--on-light-text-tertiary-active); --inverse-text-paragraph-hover: var(--on-light-text-paragraph-hover); --inverse-text-paragraph-active: var(--on-light-text-paragraph-active); + --inverse-text-accent-hover: var(--on-light-text-accent-hover); + --inverse-text-accent-active: var(--on-light-text-accent-active); + --inverse-text-positive-hover: var(--on-light-text-positive-hover); + --inverse-text-positive-active: var(--on-light-text-positive-active); + --inverse-text-warning-hover: var(--on-light-text-warning-hover); + --inverse-text-warning-active: var(--on-light-text-warning-active); + --inverse-text-negative-hover: var(--on-light-text-negative-hover); + --inverse-text-negative-active: var(--on-light-text-negative-active); + --inverse-text-accent-minor-hover: var(--on-light-text-accent-minor-hover); + --inverse-text-accent-minor-active: var(--on-light-text-accent-minor-active); + --inverse-text-accent: var(--on-light-text-accent); + --inverse-text-accent-minor: var(--on-light-text-accent-minor); + --inverse-text-positive: var(--on-light-text-positive); + --inverse-text-warning: var(--on-light-text-warning); + --inverse-text-negative: var(--on-light-text-negative); + --inverse-text-info: var(--on-light-text-info); + --inverse-text-info-hover: var(--on-light-text-info-hover); + --inverse-text-info-active: var(--on-light-text-info-active); + --inverse-text-positive-minor: var(--on-light-text-positive-minor); + --inverse-text-positive-minor-hover: var(--on-light-text-positive-minor-hover); + --inverse-text-positive-minor-active: var(--on-light-text-positive-minor-active); + --inverse-text-warning-minor: var(--on-light-text-warning-minor); + --inverse-text-warning-minor-hover: var(--on-light-text-warning-minor-hover); + --inverse-text-warning-minor-active: var(--on-light-text-warning-minor-active); + --inverse-text-negative-minor: var(--on-light-text-negative-minor); + --inverse-text-negative-minor-hover: var(--on-light-text-negative-minor-hover); + --inverse-text-negative-minor-active: var(--on-light-text-negative-minor-active); + --inverse-text-info-minor: var(--on-light-text-info-minor); + --inverse-text-info-minor-hover: var(--on-light-text-info-minor-hover); + --inverse-text-info-minor-active: var(--on-light-text-info-minor-active); --surface-solid-primary: var(--on-dark-surface-solid-primary); --surface-solid-primary-brightness: var(--on-dark-surface-solid-primary-brightness); --surface-solid-secondary: var(--on-dark-surface-solid-secondary); @@ -2574,11 +3175,97 @@ export const viewContainer = { --surface-negative-active: var(--on-dark-surface-negative-active); --surface-clear-hover: var(--on-dark-surface-clear-hover); --surface-clear-active: var(--on-dark-surface-clear-active); + --inverse-surface-solid-primary-brightness: var(--on-light-surface-solid-primary-brightness); + --inverse-surface-solid-card-brightness: var(--on-light-surface-solid-card-brightness); + --inverse-surface-transparent-card-brightness: var(--on-light-surface-transparent-card-brightness); + --inverse-surface-positive: var(--on-light-surface-positive); + --inverse-surface-warning: var(--on-light-surface-warning); + --inverse-surface-negative: var(--on-light-surface-negative); + --inverse-surface-solid-default-hover: var(--on-light-surface-solid-default-hover); + --inverse-surface-solid-default-active: var(--on-light-surface-solid-default-active); + --inverse-surface-solid-primary-hover: var(--on-light-surface-solid-primary-hover); + --inverse-surface-solid-primary-active: var(--on-light-surface-solid-primary-active); + --inverse-surface-solid-secondary-hover: var(--on-light-surface-solid-secondary-hover); + --inverse-surface-solid-secondary-active: var(--on-light-surface-solid-secondary-active); + --inverse-surface-solid-tertiary-hover: var(--on-light-surface-solid-tertiary-hover); + --inverse-surface-solid-tertiary-active: var(--on-light-surface-solid-tertiary-active); + --inverse-surface-solid-card-hover: var(--on-light-surface-solid-card-hover); + --inverse-surface-solid-card-active: var(--on-light-surface-solid-card-active); + --inverse-surface-transparent-primary-hover: var(--on-light-surface-transparent-primary-hover); + --inverse-surface-transparent-primary-active: var(--on-light-surface-transparent-primary-active); + --inverse-surface-transparent-secondary-hover: var(--on-light-surface-transparent-secondary-hover); + --inverse-surface-transparent-secondary-active: var(--on-light-surface-transparent-secondary-active); + --inverse-surface-transparent-tertiary-hover: var(--on-light-surface-transparent-tertiary-hover); + --inverse-surface-transparent-tertiary-active: var(--on-light-surface-transparent-tertiary-active); + --inverse-surface-transparent-card-hover: var(--on-light-surface-transparent-card-hover); + --inverse-surface-transparent-card-active: var(--on-light-surface-transparent-card-active); + --inverse-surface-accent-hover: var(--on-light-surface-accent-hover); + --inverse-surface-accent-active: var(--on-light-surface-accent-active); + --inverse-surface-positive-hover: var(--on-light-surface-positive-hover); + --inverse-surface-positive-active: var(--on-light-surface-positive-active); + --inverse-surface-warning-hover: var(--on-light-surface-warning-hover); + --inverse-surface-warning-active: var(--on-light-surface-warning-active); + --inverse-surface-negative-hover: var(--on-light-surface-negative-hover); + --inverse-surface-negative-active: var(--on-light-surface-negative-active); + --inverse-surface-clear-hover: var(--on-light-surface-clear-hover); + --inverse-surface-clear-active: var(--on-light-surface-clear-active); + --inverse-surface-solid-card: var(--on-light-surface-solid-card); + --inverse-surface-solid-primary: var(--on-light-surface-solid-primary); + --inverse-surface-solid-secondary: var(--on-light-surface-solid-secondary); + --inverse-surface-solid-tertiary: var(--on-light-surface-solid-tertiary); + --inverse-surface-solid-default: var(--on-light-surface-solid-default); + --inverse-surface-transparent-card: var(--on-light-surface-transparent-card); + --inverse-surface-transparent-primary: var(--on-light-surface-transparent-primary); + --inverse-surface-transparent-secondary: var(--on-light-surface-transparent-secondary); + --inverse-surface-transparent-tertiary: var(--on-light-surface-transparent-tertiary); + --inverse-surface-transparent-deep: var(--on-light-surface-transparent-deep); + --inverse-surface-transparent-deep-hover: var(--on-light-surface-transparent-deep-hover); + --inverse-surface-transparent-deep-active: var(--on-light-surface-transparent-deep-active); + --inverse-surface-clear: var(--on-light-surface-clear); + --inverse-surface-accent: var(--on-light-surface-accent); + --inverse-surface-accent-minor: var(--on-light-surface-accent-minor); + --inverse-surface-accent-minor-hover: var(--on-light-surface-accent-minor-hover); + --inverse-surface-accent-minor-active: var(--on-light-surface-accent-minor-active); + --inverse-surface-transparent-accent: var(--on-light-surface-transparent-accent); + --inverse-surface-transparent-accent-hover: var(--on-light-surface-transparent-accent-hover); + --inverse-surface-transparent-accent-active: var(--on-light-surface-transparent-accent-active); + --inverse-surface-info: var(--on-light-surface-info); + --inverse-surface-info-hover: var(--on-light-surface-info-hover); + --inverse-surface-info-active: var(--on-light-surface-info-active); + --inverse-surface-positive-minor: var(--on-light-surface-positive-minor); + --inverse-surface-positive-minor-hover: var(--on-light-surface-positive-minor-hover); + --inverse-surface-positive-minor-active: var(--on-light-surface-positive-minor-active); + --inverse-surface-warning-minor: var(--on-light-surface-warning-minor); + --inverse-surface-warning-minor-hover: var(--on-light-surface-warning-minor-hover); + --inverse-surface-warning-minor-active: var(--on-light-surface-warning-minor-active); + --inverse-surface-negative-minor: var(--on-light-surface-negative-minor); + --inverse-surface-negative-minor-hover: var(--on-light-surface-negative-minor-hover); + --inverse-surface-negative-minor-active: var(--on-light-surface-negative-minor-active); + --inverse-surface-info-minor: var(--on-light-surface-info-minor); + --inverse-surface-info-minor-hover: var(--on-light-surface-info-minor-hover); + --inverse-surface-info-minor-active: var(--on-light-surface-info-minor-active); + --inverse-surface-transparent-positive: var(--on-light-surface-transparent-positive); + --inverse-surface-transparent-positive-hover: var(--on-light-surface-transparent-positive-hover); + --inverse-surface-transparent-positive-active: var(--on-light-surface-transparent-positive-active); + --inverse-surface-transparent-warning: var(--on-light-surface-transparent-warning); + --inverse-surface-transparent-warning-hover: var(--on-light-surface-transparent-warning-hover); + --inverse-surface-transparent-warning-active: var(--on-light-surface-transparent-warning-active); + --inverse-surface-transparent-negative: var(--on-light-surface-transparent-negative); + --inverse-surface-transparent-negative-hover: var(--on-light-surface-transparent-negative-hover); + --inverse-surface-transparent-negative-active: var(--on-light-surface-transparent-negative-active); + --inverse-surface-transparent-info: var(--on-light-surface-transparent-info); + --inverse-surface-transparent-info-hover: var(--on-light-surface-transparent-info-hover); + --inverse-surface-transparent-info-active: var(--on-light-surface-transparent-info-active); --background-primary: var(--dark-background-primary); --background-primary-brightness: var(--dark-background-primary-brightness); + --inverse-background-primary-brightness: var(--light-background-primary-brightness); + --inverse-background-primary: var(--light-background-primary); --overlay-soft: var(--on-dark-overlay-soft); --overlay-hard: var(--on-dark-overlay-hard); --overlay-blur: var(--on-dark-overlay-blur); + --inverse-overlay-soft: var(--on-light-overlay-soft); + --inverse-overlay-hard: var(--on-light-overlay-hard); + --inverse-overlay-blur: var(--on-light-overlay-blur); --outline-primary: var(--on-dark-outline-primary); --outline-primary-hover: var(--on-dark-outline-primary-hover); --outline-primary-active: var(--on-dark-outline-primary-active); @@ -2652,9 +3339,79 @@ export const viewContainer = { --outline-info: var(--on-dark-outline-info); --inverse-outline-primary-hover: var(--on-light-outline-primary-hover); --inverse-outline-primary-active: var(--on-light-outline-primary-active); + --inverse-outline-primary: var(--on-light-outline-primary); + --inverse-outline-secondary: var(--on-light-outline-secondary); + --inverse-outline-secondary-hover: var(--on-light-outline-secondary-hover); + --inverse-outline-secondary-active: var(--on-light-outline-secondary-active); + --inverse-outline-tertiary: var(--on-light-outline-tertiary); + --inverse-outline-tertiary-hover: var(--on-light-outline-tertiary-hover); + --inverse-outline-tertiary-active: var(--on-light-outline-tertiary-active); + --inverse-outline-default: var(--on-light-outline-default); + --inverse-outline-default-hover: var(--on-light-outline-default-hover); + --inverse-outline-default-active: var(--on-light-outline-default-active); + --inverse-outline-transparent-primary: var(--on-light-outline-transparent-primary); + --inverse-outline-transparent-primary-hover: var(--on-light-outline-transparent-primary-hover); + --inverse-outline-transparent-primary-active: var(--on-light-outline-transparent-primary-active); + --inverse-outline-transparent-secondary: var(--on-light-outline-transparent-secondary); + --inverse-outline-transparent-secondary-hover: var(--on-light-outline-transparent-secondary-hover); + --inverse-outline-transparent-secondary-active: var(--on-light-outline-transparent-secondary-active); + --inverse-outline-transparent-tertiary: var(--on-light-outline-transparent-tertiary); + --inverse-outline-transparent-tertiary-hover: var(--on-light-outline-transparent-tertiary-hover); + --inverse-outline-transparent-tertiary-active: var(--on-light-outline-transparent-tertiary-active); + --inverse-outline-transparent-clear: var(--on-light-outline-transparent-clear); + --inverse-outline-transparent-clear-hover: var(--on-light-outline-transparent-clear-hover); + --inverse-outline-transparent-clear-active: var(--on-light-outline-transparent-clear-active); + --inverse-outline-accent: var(--on-light-outline-accent); + --inverse-outline-accent-hover: var(--on-light-outline-accent-hover); + --inverse-outline-accent-active: var(--on-light-outline-accent-active); + --inverse-outline-accent-minor: var(--on-light-outline-accent-minor); + --inverse-outline-accent-minor-hover: var(--on-light-outline-accent-minor-hover); + --inverse-outline-accent-minor-active: var(--on-light-outline-accent-minor-active); + --inverse-outline-transparent-accent: var(--on-light-outline-transparent-accent); + --inverse-outline-transparent-accent-hover: var(--on-light-outline-transparent-accent-hover); + --inverse-outline-transparent-accent-active: var(--on-light-outline-transparent-accent-active); + --inverse-outline-positive: var(--on-light-outline-positive); + --inverse-outline-positive-hover: var(--on-light-outline-positive-hover); + --inverse-outline-positive-active: var(--on-light-outline-positive-active); + --inverse-outline-warning: var(--on-light-outline-warning); + --inverse-outline-warning-hover: var(--on-light-outline-warning-hover); + --inverse-outline-warning-active: var(--on-light-outline-warning-active); + --inverse-outline-negative: var(--on-light-outline-negative); + --inverse-outline-negative-hover: var(--on-light-outline-negative-hover); + --inverse-outline-negative-active: var(--on-light-outline-negative-active); + --inverse-outline-info: var(--on-light-outline-info); + --inverse-outline-info-hover: var(--on-light-outline-info-hover); + --inverse-outline-info-active: var(--on-light-outline-info-active); + --inverse-outline-positive-minor: var(--on-light-outline-positive-minor); + --inverse-outline-positive-minor-hover: var(--on-light-outline-positive-minor-hover); + --inverse-outline-positive-minor-active: var(--on-light-outline-positive-minor-active); + --inverse-outline-warning-minor: var(--on-light-outline-warning-minor); + --inverse-outline-warning-minor-hover: var(--on-light-outline-warning-minor-hover); + --inverse-outline-warning-minor-active: var(--on-light-outline-warning-minor-active); + --inverse-outline-negative-minor: var(--on-light-outline-negative-minor); + --inverse-outline-negative-minor-hover: var(--on-light-outline-negative-minor-hover); + --inverse-outline-negative-minor-active: var(--on-light-outline-negative-minor-active); + --inverse-outline-info-minor: var(--on-light-outline-info-minor); + --inverse-outline-info-minor-hover: var(--on-light-outline-info-minor-hover); + --inverse-outline-info-minor-active: var(--on-light-outline-info-minor-active); + --inverse-outline-transparent-positive: var(--on-light-outline-transparent-positive); + --inverse-outline-transparent-positive-hover: var(--on-light-outline-transparent-positive-hover); + --inverse-outline-transparent-positive-active: var(--on-light-outline-transparent-positive-active); + --inverse-outline-transparent-warning: var(--on-light-outline-transparent-warning); + --inverse-outline-transparent-warning-hover: var(--on-light-outline-transparent-warning-hover); + --inverse-outline-transparent-warning-active: var(--on-light-outline-transparent-warning-active); + --inverse-outline-transparent-negative: var(--on-light-outline-transparent-negative); + --inverse-outline-transparent-negative-hover: var(--on-light-outline-transparent-negative-hover); + --inverse-outline-transparent-negative-active: var(--on-light-outline-transparent-negative-active); + --inverse-outline-transparent-info: var(--on-light-outline-transparent-info); + --inverse-outline-transparent-info-hover: var(--on-light-outline-transparent-info-hover); + --inverse-outline-transparent-info-active: var(--on-light-outline-transparent-info-active); --text-accent-gradient: var(--on-dark-text-accent-gradient); --text-accent-gradient-hover: var(--on-dark-text-accent-gradient-hover); --text-accent-gradient-active: var(--on-dark-text-accent-gradient-active); + --inverse-text-accent-gradient-hover: var(--on-light-text-accent-gradient-hover); + --inverse-text-accent-gradient-active: var(--on-light-text-accent-gradient-active); + --inverse-text-accent-gradient: var(--on-light-text-accent-gradient); --surface-accent-gradient: var(--on-dark-surface-accent-gradient); --surface-accent-gradient-hover: var(--on-dark-surface-accent-gradient-hover); --surface-accent-gradient-active: var(--on-dark-surface-accent-gradient-active); @@ -2664,6 +3421,9 @@ export const viewContainer = { --surface-skeleton-deep-gradient: var(--on-dark-surface-skeleton-deep-gradient); --surface-skeleton-deep-gradient-hover: var(--on-dark-surface-skeleton-deep-gradient-hover); --surface-skeleton-deep-gradient-active: var(--on-dark-surface-skeleton-deep-gradient-active); + --inverse-surface-accent-gradient-hover: var(--on-light-surface-accent-gradient-hover); + --inverse-surface-accent-gradient-active: var(--on-light-surface-accent-gradient-active); + --inverse-surface-accent-gradient: var(--on-light-surface-accent-gradient); --inverse-surface-skeleton-gradient: var(--on-light-surface-skeleton-gradient); --inverse-surface-skeleton-gradient-hover: var(--on-light-surface-skeleton-gradient-hover); --inverse-surface-skeleton-gradient-active: var(--on-light-surface-skeleton-gradient-active); @@ -2720,6 +3480,9 @@ export const viewContainer = { --inverse-text-secondary: var(--on-dark-text-secondary); --inverse-text-tertiary: var(--on-dark-text-tertiary); --inverse-text-paragraph: var(--on-dark-text-paragraph); + --inverse-text-positive: var(--on-dark-text-positive); + --inverse-text-warning: var(--on-dark-text-warning); + --inverse-text-negative: var(--on-dark-text-negative); --inverse-text-primary-hover: var(--on-dark-text-primary-hover); --inverse-text-primary-active: var(--on-dark-text-primary-active); --inverse-text-secondary-hover: var(--on-dark-text-secondary-hover); @@ -2728,6 +3491,33 @@ export const viewContainer = { --inverse-text-tertiary-active: var(--on-dark-text-tertiary-active); --inverse-text-paragraph-hover: var(--on-dark-text-paragraph-hover); --inverse-text-paragraph-active: var(--on-dark-text-paragraph-active); + --inverse-text-accent-hover: var(--on-dark-text-accent-hover); + --inverse-text-accent-active: var(--on-dark-text-accent-active); + --inverse-text-positive-hover: var(--on-dark-text-positive-hover); + --inverse-text-positive-active: var(--on-dark-text-positive-active); + --inverse-text-warning-hover: var(--on-dark-text-warning-hover); + --inverse-text-warning-active: var(--on-dark-text-warning-active); + --inverse-text-negative-hover: var(--on-dark-text-negative-hover); + --inverse-text-negative-active: var(--on-dark-text-negative-active); + --inverse-text-accent-minor: var(--on-dark-text-accent-minor); + --inverse-text-accent-minor-hover: var(--on-dark-text-accent-minor-hover); + --inverse-text-accent-minor-active: var(--on-dark-text-accent-minor-active); + --inverse-text-info-hover: var(--on-dark-text-info-hover); + --inverse-text-info-active: var(--on-dark-text-info-active); + --inverse-text-positive-minor-hover: var(--on-dark-text-positive-minor-hover); + --inverse-text-positive-minor-active: var(--on-dark-text-positive-minor-active); + --inverse-text-warning-minor-hover: var(--on-dark-text-warning-minor-hover); + --inverse-text-warning-minor-active: var(--on-dark-text-warning-minor-active); + --inverse-text-negative-minor-hover: var(--on-dark-text-negative-minor-hover); + --inverse-text-negative-minor-active: var(--on-dark-text-negative-minor-active); + --inverse-text-info-minor-hover: var(--on-dark-text-info-minor-hover); + --inverse-text-info-minor-active: var(--on-dark-text-info-minor-active); + --inverse-text-accent: var(--on-dark-text-accent); + --inverse-text-info: var(--on-dark-text-info); + --inverse-text-positive-minor: var(--on-dark-text-positive-minor); + --inverse-text-warning-minor: var(--on-dark-text-warning-minor); + --inverse-text-negative-minor: var(--on-dark-text-negative-minor); + --inverse-text-info-minor: var(--on-dark-text-info-minor); --surface-solid-default: var(--on-light-surface-solid-default); --surface-solid-primary: var(--on-light-surface-solid-primary); --surface-solid-primary-brightness: var(--on-light-surface-solid-primary-brightness); @@ -2809,11 +3599,91 @@ export const viewContainer = { --surface-clear-active: var(--on-light-surface-clear-active); --surface-transparent-deep-hover: var(--on-light-surface-transparent-deep-hover); --surface-transparent-deep-active: var(--on-light-surface-transparent-deep-active); + --inverse-surface-solid-default: var(--on-dark-surface-solid-default); + --inverse-surface-solid-primary: var(--on-dark-surface-solid-primary); + --inverse-surface-solid-primary-brightness: var(--on-dark-surface-solid-primary-brightness); + --inverse-surface-solid-secondary: var(--on-dark-surface-solid-secondary); + --inverse-surface-solid-tertiary: var(--on-dark-surface-solid-tertiary); + --inverse-surface-solid-card: var(--on-dark-surface-solid-card); + --inverse-surface-solid-card-brightness: var(--on-dark-surface-solid-card-brightness); + --inverse-surface-transparent-primary: var(--on-dark-surface-transparent-primary); + --inverse-surface-transparent-secondary: var(--on-dark-surface-transparent-secondary); + --inverse-surface-transparent-tertiary: var(--on-dark-surface-transparent-tertiary); + --inverse-surface-transparent-card: var(--on-dark-surface-transparent-card); + --inverse-surface-transparent-card-brightness: var(--on-dark-surface-transparent-card-brightness); + --inverse-surface-accent: var(--on-dark-surface-accent); + --inverse-surface-positive: var(--on-dark-surface-positive); + --inverse-surface-warning: var(--on-dark-surface-warning); + --inverse-surface-negative: var(--on-dark-surface-negative); + --inverse-surface-clear: var(--on-dark-surface-clear); + --inverse-surface-solid-default-hover: var(--on-dark-surface-solid-default-hover); + --inverse-surface-solid-default-active: var(--on-dark-surface-solid-default-active); + --inverse-surface-solid-primary-hover: var(--on-dark-surface-solid-primary-hover); + --inverse-surface-solid-primary-active: var(--on-dark-surface-solid-primary-active); + --inverse-surface-solid-secondary-hover: var(--on-dark-surface-solid-secondary-hover); + --inverse-surface-solid-secondary-active: var(--on-dark-surface-solid-secondary-active); + --inverse-surface-solid-tertiary-hover: var(--on-dark-surface-solid-tertiary-hover); + --inverse-surface-solid-tertiary-active: var(--on-dark-surface-solid-tertiary-active); + --inverse-surface-solid-card-hover: var(--on-dark-surface-solid-card-hover); + --inverse-surface-solid-card-active: var(--on-dark-surface-solid-card-active); + --inverse-surface-transparent-primary-hover: var(--on-dark-surface-transparent-primary-hover); + --inverse-surface-transparent-primary-active: var(--on-dark-surface-transparent-primary-active); + --inverse-surface-transparent-secondary-hover: var(--on-dark-surface-transparent-secondary-hover); + --inverse-surface-transparent-secondary-active: var(--on-dark-surface-transparent-secondary-active); + --inverse-surface-transparent-tertiary-hover: var(--on-dark-surface-transparent-tertiary-hover); + --inverse-surface-transparent-tertiary-active: var(--on-dark-surface-transparent-tertiary-active); + --inverse-surface-transparent-card-hover: var(--on-dark-surface-transparent-card-hover); + --inverse-surface-transparent-card-active: var(--on-dark-surface-transparent-card-active); + --inverse-surface-accent-hover: var(--on-dark-surface-accent-hover); + --inverse-surface-accent-active: var(--on-dark-surface-accent-active); + --inverse-surface-clear-hover: var(--on-dark-surface-clear-hover); + --inverse-surface-clear-active: var(--on-dark-surface-clear-active); + --inverse-surface-transparent-deep: var(--on-dark-surface-transparent-deep); + --inverse-surface-transparent-deep-hover: var(--on-dark-surface-transparent-deep-hover); + --inverse-surface-transparent-deep-active: var(--on-dark-surface-transparent-deep-active); + --inverse-surface-accent-minor: var(--on-dark-surface-accent-minor); + --inverse-surface-accent-minor-hover: var(--on-dark-surface-accent-minor-hover); + --inverse-surface-accent-minor-active: var(--on-dark-surface-accent-minor-active); + --inverse-surface-transparent-accent: var(--on-dark-surface-transparent-accent); + --inverse-surface-transparent-accent-hover: var(--on-dark-surface-transparent-accent-hover); + --inverse-surface-transparent-accent-active: var(--on-dark-surface-transparent-accent-active); + --inverse-surface-info: var(--on-dark-surface-info); + --inverse-surface-info-hover: var(--on-dark-surface-info-hover); + --inverse-surface-info-active: var(--on-dark-surface-info-active); + --inverse-surface-positive-minor: var(--on-dark-surface-positive-minor); + --inverse-surface-positive-minor-hover: var(--on-dark-surface-positive-minor-hover); + --inverse-surface-positive-minor-active: var(--on-dark-surface-positive-minor-active); + --inverse-surface-warning-minor: var(--on-dark-surface-warning-minor); + --inverse-surface-warning-minor-hover: var(--on-dark-surface-warning-minor-hover); + --inverse-surface-warning-minor-active: var(--on-dark-surface-warning-minor-active); + --inverse-surface-negative-minor: var(--on-dark-surface-negative-minor); + --inverse-surface-negative-minor-hover: var(--on-dark-surface-negative-minor-hover); + --inverse-surface-negative-minor-active: var(--on-dark-surface-negative-minor-active); + --inverse-surface-info-minor: var(--on-dark-surface-info-minor); + --inverse-surface-info-minor-hover: var(--on-dark-surface-info-minor-hover); + --inverse-surface-info-minor-active: var(--on-dark-surface-info-minor-active); + --inverse-surface-transparent-positive: var(--on-dark-surface-transparent-positive); + --inverse-surface-transparent-positive-hover: var(--on-dark-surface-transparent-positive-hover); + --inverse-surface-transparent-positive-active: var(--on-dark-surface-transparent-positive-active); + --inverse-surface-transparent-warning: var(--on-dark-surface-transparent-warning); + --inverse-surface-transparent-warning-hover: var(--on-dark-surface-transparent-warning-hover); + --inverse-surface-transparent-warning-active: var(--on-dark-surface-transparent-warning-active); + --inverse-surface-transparent-negative: var(--on-dark-surface-transparent-negative); + --inverse-surface-transparent-negative-hover: var(--on-dark-surface-transparent-negative-hover); + --inverse-surface-transparent-negative-active: var(--on-dark-surface-transparent-negative-active); + --inverse-surface-transparent-info: var(--on-dark-surface-transparent-info); + --inverse-surface-transparent-info-hover: var(--on-dark-surface-transparent-info-hover); + --inverse-surface-transparent-info-active: var(--on-dark-surface-transparent-info-active); --background-primary: var(--light-background-primary); --background-primary-brightness: var(--light-background-primary-brightness); + --inverse-background-primary-brightness: var(--dark-background-primary-brightness); + --inverse-background-primary: var(--dark-background-primary); --overlay-soft: var(--on-light-overlay-soft); --overlay-hard: var(--on-light-overlay-hard); --overlay-blur: var(--on-light-overlay-blur); + --inverse-overlay-hard: var(--on-dark-overlay-hard); + --inverse-overlay-soft: var(--on-dark-overlay-soft); + --inverse-overlay-blur: var(--on-dark-overlay-blur); --outline-secondary-hover: var(--on-light-outline-secondary-hover); --outline-secondary-active: var(--on-light-outline-secondary-active); --outline-tertiary-hover: var(--on-light-outline-tertiary-hover); @@ -2887,9 +3757,79 @@ export const viewContainer = { --outline-transparent-info: var(--on-light-outline-transparent-info); --inverse-outline-primary-hover: var(--on-dark-outline-primary-hover); --inverse-outline-primary-active: var(--on-dark-outline-primary-active); + --inverse-outline-secondary-hover: var(--on-dark-outline-secondary-hover); + --inverse-outline-secondary-active: var(--on-dark-outline-secondary-active); + --inverse-outline-tertiary-hover: var(--on-dark-outline-tertiary-hover); + --inverse-outline-tertiary-active: var(--on-dark-outline-tertiary-active); + --inverse-outline-default-hover: var(--on-dark-outline-default-hover); + --inverse-outline-default-active: var(--on-dark-outline-default-active); + --inverse-outline-transparent-primary-hover: var(--on-dark-outline-transparent-primary-hover); + --inverse-outline-transparent-primary-active: var(--on-dark-outline-transparent-primary-active); + --inverse-outline-transparent-secondary-hover: var(--on-dark-outline-transparent-secondary-hover); + --inverse-outline-transparent-secondary-active: var(--on-dark-outline-transparent-secondary-active); + --inverse-outline-transparent-tertiary-hover: var(--on-dark-outline-transparent-tertiary-hover); + --inverse-outline-transparent-tertiary-active: var(--on-dark-outline-transparent-tertiary-active); + --inverse-outline-transparent-clear-hover: var(--on-dark-outline-transparent-clear-hover); + --inverse-outline-transparent-clear-active: var(--on-dark-outline-transparent-clear-active); + --inverse-outline-accent-hover: var(--on-dark-outline-accent-hover); + --inverse-outline-accent-active: var(--on-dark-outline-accent-active); + --inverse-outline-accent-minor-hover: var(--on-dark-outline-accent-minor-hover); + --inverse-outline-accent-minor-active: var(--on-dark-outline-accent-minor-active); + --inverse-outline-transparent-accent-hover: var(--on-dark-outline-transparent-accent-hover); + --inverse-outline-transparent-accent-active: var(--on-dark-outline-transparent-accent-active); + --inverse-outline-positive-hover: var(--on-dark-outline-positive-hover); + --inverse-outline-positive-active: var(--on-dark-outline-positive-active); + --inverse-outline-warning-hover: var(--on-dark-outline-warning-hover); + --inverse-outline-warning-active: var(--on-dark-outline-warning-active); + --inverse-outline-negative-hover: var(--on-dark-outline-negative-hover); + --inverse-outline-negative-active: var(--on-dark-outline-negative-active); + --inverse-outline-info-hover: var(--on-dark-outline-info-hover); + --inverse-outline-info-active: var(--on-dark-outline-info-active); + --inverse-outline-positive-minor-hover: var(--on-dark-outline-positive-minor-hover); + --inverse-outline-positive-minor-active: var(--on-dark-outline-positive-minor-active); + --inverse-outline-warning-minor-hover: var(--on-dark-outline-warning-minor-hover); + --inverse-outline-warning-minor-active: var(--on-dark-outline-warning-minor-active); + --inverse-outline-negative-minor-hover: var(--on-dark-outline-negative-minor-hover); + --inverse-outline-negative-minor-active: var(--on-dark-outline-negative-minor-active); + --inverse-outline-info-minor-hover: var(--on-dark-outline-info-minor-hover); + --inverse-outline-info-minor-active: var(--on-dark-outline-info-minor-active); + --inverse-outline-transparent-positive-hover: var(--on-dark-outline-transparent-positive-hover); + --inverse-outline-transparent-positive-active: var(--on-dark-outline-transparent-positive-active); + --inverse-outline-transparent-warning-hover: var(--on-dark-outline-transparent-warning-hover); + --inverse-outline-transparent-warning-active: var(--on-dark-outline-transparent-warning-active); + --inverse-outline-transparent-negative-hover: var(--on-dark-outline-transparent-negative-hover); + --inverse-outline-transparent-negative-active: var(--on-dark-outline-transparent-negative-active); + --inverse-outline-transparent-info-hover: var(--on-dark-outline-transparent-info-hover); + --inverse-outline-transparent-info-active: var(--on-dark-outline-transparent-info-active); + --inverse-outline-primary: var(--on-dark-outline-primary); + --inverse-outline-secondary: var(--on-dark-outline-secondary); + --inverse-outline-tertiary: var(--on-dark-outline-tertiary); + --inverse-outline-default: var(--on-dark-outline-default); + --inverse-outline-transparent-primary: var(--on-dark-outline-transparent-primary); + --inverse-outline-transparent-secondary: var(--on-dark-outline-transparent-secondary); + --inverse-outline-transparent-tertiary: var(--on-dark-outline-transparent-tertiary); + --inverse-outline-transparent-clear: var(--on-dark-outline-transparent-clear); + --inverse-outline-accent: var(--on-dark-outline-accent); + --inverse-outline-accent-minor: var(--on-dark-outline-accent-minor); + --inverse-outline-transparent-accent: var(--on-dark-outline-transparent-accent); + --inverse-outline-positive: var(--on-dark-outline-positive); + --inverse-outline-warning: var(--on-dark-outline-warning); + --inverse-outline-negative: var(--on-dark-outline-negative); + --inverse-outline-info: var(--on-dark-outline-info); + --inverse-outline-positive-minor: var(--on-dark-outline-positive-minor); + --inverse-outline-warning-minor: var(--on-dark-outline-warning-minor); + --inverse-outline-negative-minor: var(--on-dark-outline-negative-minor); + --inverse-outline-info-minor: var(--on-dark-outline-info-minor); + --inverse-outline-transparent-positive: var(--on-dark-outline-transparent-positive); + --inverse-outline-transparent-warning: var(--on-dark-outline-transparent-warning); + --inverse-outline-transparent-negative: var(--on-dark-outline-transparent-negative); + --inverse-outline-transparent-info: var(--on-dark-outline-transparent-info); --text-accent-gradient: var(--on-light-text-accent-gradient); --text-accent-gradient-hover: var(--on-light-text-accent-gradient-hover); --text-accent-gradient-active: var(--on-light-text-accent-gradient-active); + --inverse-text-accent-gradient-hover: var(--on-dark-text-accent-gradient-hover); + --inverse-text-accent-gradient-active: var(--on-dark-text-accent-gradient-active); + --inverse-text-accent-gradient: var(--on-dark-text-accent-gradient); --surface-accent-gradient: var(--on-light-surface-accent-gradient); --surface-accent-gradient-hover: var(--on-light-surface-accent-gradient-hover); --surface-accent-gradient-active: var(--on-light-surface-accent-gradient-active); @@ -2899,6 +3839,9 @@ export const viewContainer = { --surface-skeleton-deep-gradient: var(--on-light-surface-skeleton-deep-gradient); --surface-skeleton-deep-gradient-hover: var(--on-light-surface-skeleton-deep-gradient-hover); --surface-skeleton-deep-gradient-active: var(--on-light-surface-skeleton-deep-gradient-active); + --inverse-surface-accent-gradient: var(--on-dark-surface-accent-gradient); + --inverse-surface-accent-gradient-hover: var(--on-dark-surface-accent-gradient-hover); + --inverse-surface-accent-gradient-active: var(--on-dark-surface-accent-gradient-active); --inverse-surface-skeleton-gradient: var(--on-dark-surface-skeleton-gradient); --inverse-surface-skeleton-gradient-hover: var(--on-dark-surface-skeleton-gradient-hover); --inverse-surface-skeleton-gradient-active: var(--on-dark-surface-skeleton-gradient-active); diff --git a/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts b/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts index fbd655a6ec..3c07264702 100644 --- a/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts +++ b/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts @@ -426,6 +426,96 @@ export const inverseTextParagraphActive = 'var(--inverse-text-paragraph-active, /** Инвертированный cплошной наборный текст */ export const inverseTextParagraph = 'var(--inverse-text-paragraph, #080808CC)'; +/** Инвертированный акцентный цвет */ +export const inverseTextAccentHover = 'var(--inverse-text-accent-hover, #79A7FBFF)'; + +/** Инвертированный акцентный цвет */ +export const inverseTextAccentActive = 'var(--inverse-text-accent-active, #0D5FF8FF)'; + +/** Инвертированный минорный акцентный цвет */ +export const inverseTextAccentMinorHover = 'var(--inverse-text-accent-minor-hover, #DCE8FEFF)'; + +/** Инвертированный минорный акцентный цвет */ +export const inverseTextAccentMinorActive = 'var(--inverse-text-accent-minor-active, #6FA0FBFF)'; + +/** Инвертированный цвет успеха */ +export const inverseTextPositiveHover = 'var(--inverse-text-positive-hover, #13AA2CFF)'; + +/** Инвертированный цвет успеха */ +export const inverseTextPositiveActive = 'var(--inverse-text-positive-active, #0D731EFF)'; + +/** Инвертированный цвет предупреждения */ +export const inverseTextWarningHover = 'var(--inverse-text-warning-hover, #FD650DFF)'; + +/** Инвертированный цвет предупреждения */ +export const inverseTextWarningActive = 'var(--inverse-text-warning-active, #CA4B02FF)'; + +/** Инвертированный цвет ошибки */ +export const inverseTextNegativeHover = 'var(--inverse-text-negative-hover, #F5384BFF)'; + +/** Инвертированный цвет ошибки */ +export const inverseTextNegativeActive = 'var(--inverse-text-negative-active, #E40C22FF)'; + +/** Инвертированный цвет информации */ +export const inverseTextInfoHover = 'var(--inverse-text-info-hover, #79A7FBFF)'; + +/** Инвертированный цвет информации */ +export const inverseTextInfoActive = 'var(--inverse-text-info-active, #0D5FF8FF)'; + +/** Инвертированный минорный цвет успеха */ +export const inverseTextPositiveMinorHover = 'var(--inverse-text-positive-minor-hover, #3EDA5BFF)'; + +/** Инвертированный минорный цвет успеха */ +export const inverseTextPositiveMinorActive = 'var(--inverse-text-positive-minor-active, #23B83EFF)'; + +/** Инвертированный минорный цвет предупреждения */ +export const inverseTextWarningMinorHover = 'var(--inverse-text-warning-minor-hover, #FDB086FF)'; + +/** Инвертированный минорный цвет предупреждения */ +export const inverseTextWarningMinorActive = 'var(--inverse-text-warning-minor-active, #FC884AFF)'; + +/** Инвертированный минорный цвет ошибки */ +export const inverseTextNegativeMinorHover = 'var(--inverse-text-negative-minor-hover, #FFADB6FF)'; + +/** Инвертированный минорный цвет ошибки */ +export const inverseTextNegativeMinorActive = 'var(--inverse-text-negative-minor-active, #FF707EFF)'; + +/** Инвертированный минорный цвет информации */ +export const inverseTextInfoMinorHover = 'var(--inverse-text-info-minor-hover, #DCE8FEFF)'; + +/** Инвертированный минорный цвет информации */ +export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active, #6FA0FBFF)'; + +/** Инвертированный акцентный цвет */ +export const inverseTextAccent = 'var(--inverse-text-accent, #2A72F8)'; + +/** Инвертированный минорный акцентный цвет */ +export const inverseTextAccentMinor = 'var(--inverse-text-accent-minor, #8BB2FC)'; + +/** Инвертированный цвет успеха */ +export const inverseTextPositive = 'var(--inverse-text-positive, #108E26)'; + +/** Инвертированный цвет предупреждения */ +export const inverseTextWarning = 'var(--inverse-text-warning, #E85702)'; + +/** Инвертированный цвет ошибки */ +export const inverseTextNegative = 'var(--inverse-text-negative, #F31B31)'; + +/** Инвертированный цвет информации */ +export const inverseTextInfo = 'var(--inverse-text-info, #2A72F8)'; + +/** Инвертированный минорный цвет успеха */ +export const inverseTextPositiveMinor = 'var(--inverse-text-positive-minor, #28D247)'; + +/** Инвертированный минорный цвет предупреждения */ +export const inverseTextWarningMinor = 'var(--inverse-text-warning-minor, #FD9C68)'; + +/** Инвертированный минорный цвет ошибки */ +export const inverseTextNegativeMinor = 'var(--inverse-text-negative-minor, #FF8F9A)'; + +/** Инвертированный минорный цвет информации */ +export const inverseTextInfoMinor = 'var(--inverse-text-info-minor, #8BB2FC)'; + /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimaryHover = 'var(--surface-solid-primary-hover, #1C1C1CFF)'; @@ -1138,6 +1228,250 @@ export const onLightSurfaceInfoMinor = 'var(--on-light-surface-info-minor, #DEE9 /** Прозрачный цвет фона поверхности/контрола информация на светлом фоне */ export const onLightSurfaceTransparentInfo = 'var(--on-light-surface-transparent-info, #2A72F81F)'; +/** Инвертированный осн. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryHover = 'var(--inverse-surface-solid-primary-hover, #FAFAFAFF)'; + +/** Инвертированный осн. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryActive = 'var(--inverse-surface-solid-primary-active, #F0F0F0FF)'; + +/** Инвертированный осн. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness, #FFFFFFFF)'; + +/** Инвертированный втор. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidSecondaryHover = 'var(--inverse-surface-solid-secondary-hover, #F7F7F7FF)'; + +/** Инвертированный втор. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidSecondaryActive = 'var(--inverse-surface-solid-secondary-active, #E8E8E8FF)'; + +/** Инвертированный трет.непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidTertiaryHover = 'var(--inverse-surface-solid-tertiary-hover, #E8E8E8FF)'; + +/** Инвертированный трет.непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidTertiaryActive = 'var(--inverse-surface-solid-tertiary-active, #D9D9D9FF)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardHover = 'var(--inverse-surface-solid-card-hover, #FFFFFFFF)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardActive = 'var(--inverse-surface-solid-card-active, #FFFFFFFF)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness, #FFFFFFFF)'; + +/** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ +export const inverseSurfaceSolidDefaultHover = 'var(--inverse-surface-solid-default-hover, #0D0D0DFF)'; + +/** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ +export const inverseSurfaceSolidDefaultActive = 'var(--inverse-surface-solid-default-active, #030303FF)'; + +/** Инвертированный основной прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentPrimaryHover = 'var(--inverse-surface-transparent-primary-hover, #08080812)'; + +/** Инвертированный основной прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentPrimaryActive = 'var(--inverse-surface-transparent-primary-active, #08080803)'; + +/** Инвертированный вторичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentSecondaryHover = 'var(--inverse-surface-transparent-secondary-hover, #0808081F)'; + +/** Инвертированный вторичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentSecondaryActive = + 'var(--inverse-surface-transparent-secondary-active, #0808080A)'; + +/** Инвертированный третичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentTertiaryHover = 'var(--inverse-surface-transparent-tertiary-hover, #0808083D)'; + +/** Инвертированный третичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentTertiaryActive = 'var(--inverse-surface-transparent-tertiary-active, #0808080F)'; + +/** Инвертированный глубокий прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentDeepHover = 'var(--inverse-surface-transparent-deep-hover, #080808C2)'; + +/** Инвертированный глубокий прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentDeepActive = 'var(--inverse-surface-transparent-deep-active, #08080894)'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardHover = 'var(--inverse-surface-transparent-card-hover, #FFFFFFFF)'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardActive = 'var(--inverse-surface-transparent-card-active, #FFFFFFFF)'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness, #FFFFFFFF)'; + +/** Инвертированный фон поверхности/контрола без заливки */ +export const inverseSurfaceClearHover = 'var(--inverse-surface-clear-hover, #FFFFFFFF)'; + +/** Инвертированный фон поверхности/контрола без заливки */ +export const inverseSurfaceClearActive = 'var(--inverse-surface-clear-active, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceAccentHover = 'var(--inverse-surface-accent-hover, #4886F9FF)'; + +/** Инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceAccentActive = 'var(--inverse-surface-accent-active, #206CF8FF)'; + +/** Инвертированный акцентный минорный непрозрачный фон поверхности/контрола */ +export const inverseSurfaceAccentMinorHover = 'var(--inverse-surface-accent-minor-hover, #EBF1FFFF)'; + +/** Инвертированный акцентный минорный непрозрачный фон поверхности/контрола */ +export const inverseSurfaceAccentMinorActive = 'var(--inverse-surface-accent-minor-active, #D6E4FFFF)'; + +/** Прозрачный инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceTransparentAccentHover = 'var(--inverse-surface-transparent-accent-hover, #2A72F83D)'; + +/** Прозрачный инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceTransparentAccentActive = 'var(--inverse-surface-transparent-accent-active, #2A72F80F)'; + +/** Инвертированный цвет фона поверхности/контрола успех */ +export const inverseSurfacePositiveHover = 'var(--inverse-surface-positive-hover, #12A12AFF)'; + +/** Инвертированный цвет фона поверхности/контрола успех */ +export const inverseSurfacePositiveActive = 'var(--inverse-surface-positive-active, #0F8523FF)'; + +/** Инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceWarningHover = 'var(--inverse-surface-warning-hover, #FC5E03FF)'; + +/** Инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceWarningActive = 'var(--inverse-surface-warning-active, #DE5302FF)'; + +/** Инвертированный цвет фона поверхности/контрола ошибка */ +export const inverseSurfaceNegativeHover = 'var(--inverse-surface-negative-hover, #F5384BFF)'; + +/** Инвертированный цвет фона поверхности/контрола ошибка */ +export const inverseSurfaceNegativeActive = 'var(--inverse-surface-negative-active, #F31228FF)'; + +/** Инвертированный цвет фона поверхности/контрола информация */ +export const inverseSurfaceInfoHover = 'var(--inverse-surface-info-hover, #4886F9FF)'; + +/** Инвертированный цвет фона поверхности/контрола информация */ +export const inverseSurfaceInfoActive = 'var(--inverse-surface-info-active, #206CF8FF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола успех */ +export const inverseSurfacePositiveMinorHover = 'var(--inverse-surface-positive-minor-hover, #B1FBBFFF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола успех */ +export const inverseSurfacePositiveMinorActive = 'var(--inverse-surface-positive-minor-active, #94F9A7FF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceWarningMinorHover = 'var(--inverse-surface-warning-minor-hover, #FEE9DCFF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceWarningMinorActive = 'var(--inverse-surface-warning-minor-active, #FEDCC8FF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола ошибка */ +export const inverseSurfaceNegativeMinorHover = 'var(--inverse-surface-negative-minor-hover, #FFEBEDFF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола ошибка */ +export const inverseSurfaceNegativeMinorActive = 'var(--inverse-surface-negative-minor-active, #FFD6DAFF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола информация */ +export const inverseSurfaceInfoMinorHover = 'var(--inverse-surface-info-minor-hover, #EBF1FFFF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола информация */ +export const inverseSurfaceInfoMinorActive = 'var(--inverse-surface-info-minor-active, #D6E4FFFF)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола успех */ +export const inverseSurfaceTransparentPositiveHover = 'var(--inverse-surface-transparent-positive-hover, #108E253D)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола успех */ +export const inverseSurfaceTransparentPositiveActive = 'var(--inverse-surface-transparent-positive-active, #108E250F)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceTransparentWarningHover = 'var(--inverse-surface-transparent-warning-hover, #E857023D)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceTransparentWarningActive = 'var(--inverse-surface-transparent-warning-active, #E857020F)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceTransparentNegativeHover = 'var(--inverse-surface-transparent-negative-hover, #F31B313D)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceTransparentNegativeActive = 'var(--inverse-surface-transparent-negative-active, #F31B310F)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола информация */ +export const inverseSurfaceTransparentInfoHover = 'var(--inverse-surface-transparent-info-hover, #2A72F83D)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола информация */ +export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transparent-info-active, #2A72F80F)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #FFFFFFFF)'; + +/** Инвертированный осн. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F5F5F5)'; + +/** Инвертированный втор. непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidSecondary = 'var(--inverse-surface-solid-secondary, #ECECEC)'; + +/** Инвертированный трет.непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidTertiary = 'var(--inverse-surface-solid-tertiary, #DDDDDD)'; + +/** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ +export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default, #080808)'; + +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card, #FFFFFFFF)'; + +/** Инвертированный основной прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentPrimary = 'var(--inverse-surface-transparent-primary, #08080808)'; + +/** Инвертированный вторичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentSecondary = 'var(--inverse-surface-transparent-secondary, #0808080F)'; + +/** Инвертированный третичный прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentTertiary = 'var(--inverse-surface-transparent-tertiary, #0808081F)'; + +/** Инвертированный глубокий прозрачный фон поверхности/контрола */ +export const inverseSurfaceTransparentDeep = 'var(--inverse-surface-transparent-deep, #080808A3)'; + +/** Инвертированный фон поверхности/контрола без заливки */ +export const inverseSurfaceClear = 'var(--inverse-surface-clear, #FFFFFF00)'; + +/** Инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceAccent = 'var(--inverse-surface-accent, #2A72F8)'; + +/** Инвертированный акцентный минорный непрозрачный фон поверхности/контрола */ +export const inverseSurfaceAccentMinor = 'var(--inverse-surface-accent-minor, #DEE9FF)'; + +/** Прозрачный инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceTransparentAccent = 'var(--inverse-surface-transparent-accent, #2A72F81F)'; + +/** Инвертированный цвет фона поверхности/контрола успех */ +export const inverseSurfacePositive = 'var(--inverse-surface-positive, #108E26)'; + +/** Инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceWarning = 'var(--inverse-surface-warning, #E85702)'; + +/** Инвертированный цвет фона поверхности/контрола ошибка */ +export const inverseSurfaceNegative = 'var(--inverse-surface-negative, #F31B31)'; + +/** Инвертированный цвет фона поверхности/контрола информация */ +export const inverseSurfaceInfo = 'var(--inverse-surface-info, #2A72F8)'; + +/** Инвертированный минорный цвет фона поверхности/контрола успех */ +export const inverseSurfacePositiveMinor = 'var(--inverse-surface-positive-minor, #9EFAAF)'; + +/** Инвертированный минорный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceWarningMinor = 'var(--inverse-surface-warning-minor, #FEE2D2)'; + +/** Инвертированный минорный цвет фона поверхности/контрола ошибка */ +export const inverseSurfaceNegativeMinor = 'var(--inverse-surface-negative-minor, #FFE0E3)'; + +/** Инвертированный минорный цвет фона поверхности/контрола информация */ +export const inverseSurfaceInfoMinor = 'var(--inverse-surface-info-minor, #DEE9FF)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола успех */ +export const inverseSurfaceTransparentPositive = 'var(--inverse-surface-transparent-positive, #108E261F)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceTransparentWarning = 'var(--inverse-surface-transparent-warning, #E857021F)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ +export const inverseSurfaceTransparentNegative = 'var(--inverse-surface-transparent-negative, #F31B311F)'; + +/** Прозрачный инвертированный цвет фона поверхности/контрола информация */ +export const inverseSurfaceTransparentInfo = 'var(--inverse-surface-transparent-info, #2A72F81F)'; + /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #080808)'; @@ -1150,6 +1484,12 @@ export const darkBackgroundPrimary = 'var(--dark-background-primary, #080808)'; /** Основной фон на светлом фоне */ export const lightBackgroundPrimary = 'var(--light-background-primary, #F9F9F9)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness, #FFFFFFFF)'; + +/** Инвертированный основной фон */ +export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F9F9F9)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft, #0808088F)'; @@ -1177,6 +1517,15 @@ export const onLightOverlayHard = 'var(--on-light-overlay-hard, #F9F9F9F5)'; /** dark overlay onLight overlayBlur */ export const onLightOverlayBlur = 'var(--on-light-overlay-blur, #F9F9F947)'; +/** Инвертированный цвет фона паранжи светлый */ +export const inverseOverlaySoft = 'var(--inverse-overlay-soft, #F9F9F98F)'; + +/** Инвертированный цвет фона паранжи темный */ +export const inverseOverlayHard = 'var(--inverse-overlay-hard, #F9F9F9F5)'; + +/** Инвертированный цвет фона паранжи размытый */ +export const inverseOverlayBlur = 'var(--inverse-overlay-blur, #F9F9F947)'; + /** Основной непрозрачный цвет обводки */ export const outlineSolidPrimaryHover = 'var(--outline-solid-primary-hover, #303030FF)'; @@ -1781,6 +2130,214 @@ export const onLightOutlineInfoMinor = 'var(--on-light-outline-info-minor, #8BB2 /** Прозрачный цвет обводки информация на светлом фоне */ export const onLightOutlineTransparentInfo = 'var(--on-light-outline-transparent-info, #2A72F833)'; +/** Инвертированный основной непрозрачный цвет обводки */ +export const inverseOutlineSolidPrimaryHover = 'var(--inverse-outline-solid-primary-hover, #ABABABFF)'; + +/** Инвертированный основной непрозрачный цвет обводки */ +export const inverseOutlineSolidPrimaryActive = 'var(--inverse-outline-solid-primary-active, #C4C4C4FF)'; + +/** Инвертированный вторичный непрозрачный цвет обводки */ +export const inverseOutlineSolidSecondaryHover = 'var(--inverse-outline-solid-secondary-hover, #FFFFFFFF)'; + +/** Инвертированный вторичный непрозрачный цвет обводки */ +export const inverseOutlineSolidSecondaryActive = 'var(--inverse-outline-solid-secondary-active, #575757FF)'; + +/** Инвертированный третичный непрозрачный цвет обводки */ +export const inverseOutlineSolidTertiaryHover = 'var(--inverse-outline-solid-tertiary-hover, #FFFFFFFF)'; + +/** Инвертированный третичный непрозрачный цвет обводки */ +export const inverseOutlineSolidTertiaryActive = 'var(--inverse-outline-solid-tertiary-active, #737373FF)'; + +/** Инвертированный основной прозрачный цвет обводки */ +export const inverseOutlineTransparentPrimaryHover = 'var(--inverse-outline-transparent-primary-hover, #080808FF)'; + +/** Инвертированный основной прозрачный цвет обводки */ +export const inverseOutlineTransparentPrimaryActive = 'var(--inverse-outline-transparent-primary-active, #0808083D)'; + +/** Инвертированный вторичный прозрачный цвет обводки */ +export const inverseOutlineTransparentSecondaryHover = 'var(--inverse-outline-transparent-secondary-hover, #080808FF)'; + +/** Инвертированный вторичный прозрачный цвет обводки */ +export const inverseOutlineTransparentSecondaryActive = + 'var(--inverse-outline-transparent-secondary-active, #0808087A)'; + +/** Инвертированный третичный прозрачный цвет обводки */ +export const inverseOutlineTransparentTertiaryHover = 'var(--inverse-outline-transparent-tertiary-hover, #080808FF)'; + +/** Инвертированный третичный прозрачный цвет обводки */ +export const inverseOutlineTransparentTertiaryActive = 'var(--inverse-outline-transparent-tertiary-active, #080808AB)'; + +/** Инвертированная бесцветная обводка */ +export const inverseOutlineClearHover = 'var(--inverse-outline-clear-hover, #FFFFFFFF)'; + +/** Инвертированная бесцветная обводка */ +export const inverseOutlineClearActive = 'var(--inverse-outline-clear-active, #FFFFFFFF)'; + +/** Инвертированный акцентный цвет обводки */ +export const inverseOutlineAccentHover = 'var(--inverse-outline-accent-hover, #79A7FBFF)'; + +/** Инвертированный акцентный цвет обводки */ +export const inverseOutlineAccentActive = 'var(--inverse-outline-accent-active, #0D5FF8FF)'; + +/** Инвертированный акцентный минорный непрозрачный цвет обводки */ +export const inverseOutlineAccentMinorHover = 'var(--inverse-outline-accent-minor-hover, #DCE8FEFF)'; + +/** Инвертированный акцентный минорный непрозрачный цвет обводки */ +export const inverseOutlineAccentMinorActive = 'var(--inverse-outline-accent-minor-active, #6FA0FBFF)'; + +/** Прозрачный инвертированный акцентный цвет обводки */ +export const inverseOutlineTransparentAccentHover = 'var(--inverse-outline-transparent-accent-hover, #2A72F8FF)'; + +/** Прозрачный инвертированный акцентный цвет обводки */ +export const inverseOutlineTransparentAccentActive = 'var(--inverse-outline-transparent-accent-active, #2A72F83D)'; + +/** Инвертированный цвет обводки успех */ +export const inverseOutlinePositiveHover = 'var(--inverse-outline-positive-hover, #13AA2CFF)'; + +/** Инвертированный цвет обводки успех */ +export const inverseOutlinePositiveActive = 'var(--inverse-outline-positive-active, #0D731EFF)'; + +/** Инвертированный цвет обводки предупреждение */ +export const inverseOutlineWarningHover = 'var(--inverse-outline-warning-hover, #FD650DFF)'; + +/** Инвертированный цвет обводки предупреждение */ +export const inverseOutlineWarningActive = 'var(--inverse-outline-warning-active, #CA4B02FF)'; + +/** Инвертированный цвет обводки ошибка */ +export const inverseOutlineNegativeHover = 'var(--inverse-outline-negative-hover, #F5384BFF)'; + +/** Инвертированный цвет обводки ошибка */ +export const inverseOutlineNegativeActive = 'var(--inverse-outline-negative-active, #E40C22FF)'; + +/** Инвертированный цвет обводки информация */ +export const inverseOutlineInfoHover = 'var(--inverse-outline-info-hover, #79A7FBFF)'; + +/** Инвертированный цвет обводки информация */ +export const inverseOutlineInfoActive = 'var(--inverse-outline-info-active, #0D5FF8FF)'; + +/** Инвертированный минорный цвет обводки успех */ +export const inverseOutlinePositiveMinorHover = 'var(--inverse-outline-positive-minor-hover, #3EDA5BFF)'; + +/** Инвертированный минорный цвет обводки успех */ +export const inverseOutlinePositiveMinorActive = 'var(--inverse-outline-positive-minor-active, #23B83EFF)'; + +/** Инвертированный минорный цвет обводки предупреждение */ +export const inverseOutlineWarningMinorHover = 'var(--inverse-outline-warning-minor-hover, #FDB086FF)'; + +/** Инвертированный минорный цвет обводки предупреждение */ +export const inverseOutlineWarningMinorActive = 'var(--inverse-outline-warning-minor-active, #FC884AFF)'; + +/** Инвертированный минорный цвет обводки ошибка */ +export const inverseOutlineNegativeMinorHover = 'var(--inverse-outline-negative-minor-hover, #FFADB6FF)'; + +/** Инвертированный минорный цвет обводки ошибка */ +export const inverseOutlineNegativeMinorActive = 'var(--inverse-outline-negative-minor-active, #FF707EFF)'; + +/** Инвертированный минорный цвет обводки информация */ +export const inverseOutlineInfoMinorHover = 'var(--inverse-outline-info-minor-hover, #DCE8FEFF)'; + +/** Инвертированный минорный цвет обводки информация */ +export const inverseOutlineInfoMinorActive = 'var(--inverse-outline-info-minor-active, #6FA0FBFF)'; + +/** Прозрачный инвертированный цвет обводки успех */ +export const inverseOutlineTransparentPositiveHover = 'var(--inverse-outline-transparent-positive-hover, #108E25FF)'; + +/** Прозрачный инвертированный цвет обводки успех */ +export const inverseOutlineTransparentPositiveActive = 'var(--inverse-outline-transparent-positive-active, #108E253D)'; + +/** Прозрачный инвертированный цвет обводки предупреждение */ +export const inverseOutlineTransparentWarningHover = 'var(--inverse-outline-transparent-warning-hover, #E85702FF)'; + +/** Прозрачный инвертированный цвет обводки предупреждение */ +export const inverseOutlineTransparentWarningActive = 'var(--inverse-outline-transparent-warning-active, #E857023D)'; + +/** Прозрачный инвертированный цвет обводки предупреждение */ +export const inverseOutlineTransparentNegativeHover = 'var(--inverse-outline-transparent-negative-hover, #F31B31FF)'; + +/** Прозрачный инвертированный цвет обводки предупреждение */ +export const inverseOutlineTransparentNegativeActive = 'var(--inverse-outline-transparent-negative-active, #F31B313D)'; + +/** Прозрачный инвертированный цвет обводки информация */ +export const inverseOutlineTransparentInfoHover = 'var(--inverse-outline-transparent-info-hover, #2A72F8FF)'; + +/** Прозрачный инвертированный цвет обводки информация */ +export const inverseOutlineTransparentInfoActive = 'var(--inverse-outline-transparent-info-active, #2A72F83D)'; + +/** Инвертированный основной непрозрачный цвет обводки */ +export const inverseOutlineSolidPrimary = 'var(--inverse-outline-solid-primary, #DDDDDD)'; + +/** Инвертированный вторичный непрозрачный цвет обводки */ +export const inverseOutlineSolidSecondary = 'var(--inverse-outline-solid-secondary, #949494)'; + +/** Инвертированный третичный непрозрачный цвет обводки */ +export const inverseOutlineSolidTertiary = 'var(--inverse-outline-solid-tertiary, #707070)'; + +/** Инвертированный основной прозрачный цвет обводки */ +export const inverseOutlineTransparentPrimary = 'var(--inverse-outline-transparent-primary, #08080833)'; + +/** Инвертированный вторичный прозрачный цвет обводки */ +export const inverseOutlineTransparentSecondary = 'var(--inverse-outline-transparent-secondary, #08080866)'; + +/** Инвертированный третичный прозрачный цвет обводки */ +export const inverseOutlineTransparentTertiary = 'var(--inverse-outline-transparent-tertiary, #0808088F)'; + +/** Инвертированная бесцветная обводка */ +export const inverseOutlineClear = 'var(--inverse-outline-clear, #FFFFFF00)'; + +/** dark outline inverse outlineDefault */ +export const inverseOutlineDefault = 'var(--inverse-outline-default, #080808)'; + +/** dark outline inverse outlineDefaultHover */ +export const inverseOutlineDefaultHover = 'var(--inverse-outline-default-hover, #FFFFFFFF)'; + +/** dark outline inverse outlineDefaultActive */ +export const inverseOutlineDefaultActive = 'var(--inverse-outline-default-active, #C7C7C7FF)'; + +/** Инвертированный акцентный цвет обводки */ +export const inverseOutlineAccent = 'var(--inverse-outline-accent, #2A72F8)'; + +/** Инвертированный акцентный минорный непрозрачный цвет обводки */ +export const inverseOutlineAccentMinor = 'var(--inverse-outline-accent-minor, #8BB2FC)'; + +/** Прозрачный инвертированный акцентный цвет обводки */ +export const inverseOutlineTransparentAccent = 'var(--inverse-outline-transparent-accent, #2A72F833)'; + +/** Инвертированный цвет обводки успех */ +export const inverseOutlinePositive = 'var(--inverse-outline-positive, #108E26)'; + +/** Инвертированный цвет обводки предупреждение */ +export const inverseOutlineWarning = 'var(--inverse-outline-warning, #E85702)'; + +/** Инвертированный цвет обводки ошибка */ +export const inverseOutlineNegative = 'var(--inverse-outline-negative, #F31B31)'; + +/** Инвертированный цвет обводки информация */ +export const inverseOutlineInfo = 'var(--inverse-outline-info, #2A72F8)'; + +/** Инвертированный минорный цвет обводки успех */ +export const inverseOutlinePositiveMinor = 'var(--inverse-outline-positive-minor, #28D247)'; + +/** Инвертированный минорный цвет обводки предупреждение */ +export const inverseOutlineWarningMinor = 'var(--inverse-outline-warning-minor, #FD9C68)'; + +/** Инвертированный минорный цвет обводки ошибка */ +export const inverseOutlineNegativeMinor = 'var(--inverse-outline-negative-minor, #FF8F9A)'; + +/** Инвертированный минорный цвет обводки информация */ +export const inverseOutlineInfoMinor = 'var(--inverse-outline-info-minor, #8BB2FC)'; + +/** Прозрачный инвертированный цвет обводки успех */ +export const inverseOutlineTransparentPositive = 'var(--inverse-outline-transparent-positive, #108E2633)'; + +/** Прозрачный инвертированный цвет обводки предупреждение */ +export const inverseOutlineTransparentWarning = 'var(--inverse-outline-transparent-warning, #E8570233)'; + +/** Прозрачный инвертированный цвет обводки предупреждение */ +export const inverseOutlineTransparentNegative = 'var(--inverse-outline-transparent-negative, #F31B3133)'; + +/** Прозрачный инвертированный цвет обводки информация */ +export const inverseOutlineTransparentInfo = 'var(--inverse-outline-transparent-info, #2A72F833)'; + /** @deprecated instead use onDarkTextPrimary */ export const whitePrimary = 'var(--plasma-colors-white-primary, var(--on-dark-text-primary))'; @@ -1912,6 +2469,16 @@ export const onLightTextAccentGradientActive = 'var(--on-light-text-accent-gradi export const onLightTextAccentGradient = 'var(--on-light-text-accent-gradient, linear-gradient(93.97deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%))'; +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradientHover = 'var(--inverse-text-accent-gradient-hover, #CCCCCCFF)'; + +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradientActive = 'var(--inverse-text-accent-gradient-active, #E6E6E6FF)'; + +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradient = + 'var(--inverse-text-accent-gradient, linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%))'; + /** Акцентный фон поверхности/контрола с градиентом */ export const surfaceAccentGradientHover = 'var(--surface-accent-gradient-hover, #FFFFFFFF)'; @@ -2005,6 +2572,16 @@ export const onLightSurfaceSkeletonDeepGradientHover = export const onLightSurfaceSkeletonDeepGradientActive = 'var(--on-light-surface-skeleton-deep-gradient-active, #FFFFFFFF)'; +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradientHover = 'var(--inverse-surface-accent-gradient-hover, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradientActive = 'var(--inverse-surface-accent-gradient-active, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradient = + 'var(--inverse-surface-accent-gradient, linear-gradient(94deg, #3E79F0FF 6.49%, #27C6E5FF 93.51%))'; + /** Фон для скелетона */ export const inverseSurfaceSkeletonGradient = 'var(--inverse-surface-skeleton-gradient, linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%))'; @@ -2066,19 +2643,19 @@ export const shadowUpHardL = 'var(--shadow-up-hard-l, 0px -60px 112px -8px #0000 export const borderRadiusXxs = 'var(--border-radius-xxs, 4px)'; /** borderRadius xs */ -export const borderRadiusXs = 'var(--border-radius-xs, 8px)'; +export const borderRadiusXs = 'var(--border-radius-xs, 6px)'; /** borderRadius s */ -export const borderRadiusS = 'var(--border-radius-s, 12px)'; +export const borderRadiusS = 'var(--border-radius-s, 8px)'; /** borderRadius m */ -export const borderRadiusM = 'var(--border-radius-m, 16px)'; +export const borderRadiusM = 'var(--border-radius-m, 12px)'; /** borderRadius l */ -export const borderRadiusL = 'var(--border-radius-l, 20px)'; +export const borderRadiusL = 'var(--border-radius-l, 16px)'; /** borderRadius xl */ -export const borderRadiusXl = 'var(--border-radius-xl, 24px)'; +export const borderRadiusXl = 'var(--border-radius-xl, 20px)'; /** borderRadius xxl */ export const borderRadiusXxl = 'var(--border-radius-xxl, 32px)'; @@ -2481,6 +3058,36 @@ export const viewContainer = { --inverse-text-paragraph-hover: var(--on-light-text-paragraph-hover); --inverse-text-paragraph-active: var(--on-light-text-paragraph-active); --inverse-text-paragraph: var(--on-light-text-paragraph); + --inverse-text-accent-hover: var(--on-light-text-accent-hover); + --inverse-text-accent-active: var(--on-light-text-accent-active); + --inverse-text-accent-minor-hover: var(--on-light-text-accent-minor-hover); + --inverse-text-accent-minor-active: var(--on-light-text-accent-minor-active); + --inverse-text-positive-hover: var(--on-light-text-positive-hover); + --inverse-text-positive-active: var(--on-light-text-positive-active); + --inverse-text-warning-hover: var(--on-light-text-warning-hover); + --inverse-text-warning-active: var(--on-light-text-warning-active); + --inverse-text-negative-hover: var(--on-light-text-negative-hover); + --inverse-text-negative-active: var(--on-light-text-negative-active); + --inverse-text-info-hover: var(--on-light-text-info-hover); + --inverse-text-info-active: var(--on-light-text-info-active); + --inverse-text-positive-minor-hover: var(--on-light-text-positive-minor-hover); + --inverse-text-positive-minor-active: var(--on-light-text-positive-minor-active); + --inverse-text-warning-minor-hover: var(--on-light-text-warning-minor-hover); + --inverse-text-warning-minor-active: var(--on-light-text-warning-minor-active); + --inverse-text-negative-minor-hover: var(--on-light-text-negative-minor-hover); + --inverse-text-negative-minor-active: var(--on-light-text-negative-minor-active); + --inverse-text-info-minor-hover: var(--on-light-text-info-minor-hover); + --inverse-text-info-minor-active: var(--on-light-text-info-minor-active); + --inverse-text-accent: var(--on-light-text-accent); + --inverse-text-accent-minor: var(--on-light-text-accent-minor); + --inverse-text-positive: var(--on-light-text-positive); + --inverse-text-warning: var(--on-light-text-warning); + --inverse-text-negative: var(--on-light-text-negative); + --inverse-text-info: var(--on-light-text-info); + --inverse-text-positive-minor: var(--on-light-text-positive-minor); + --inverse-text-warning-minor: var(--on-light-text-warning-minor); + --inverse-text-negative-minor: var(--on-light-text-negative-minor); + --inverse-text-info-minor: var(--on-light-text-info-minor); --surface-solid-primary-hover: var(--on-dark-surface-solid-primary-hover); --surface-solid-primary-active: var(--on-dark-surface-solid-primary-active); --surface-solid-primary: var(--on-dark-surface-solid-primary); @@ -2562,11 +3169,97 @@ export const viewContainer = { --surface-info-minor: var(--on-dark-surface-info-minor); --surface-transparent-accent: var(--on-dark-surface-transparent-accent); --surface-transparent-info: var(--on-dark-surface-transparent-info); + --inverse-surface-solid-primary-hover: var(--on-light-surface-solid-primary-hover); + --inverse-surface-solid-primary-active: var(--on-light-surface-solid-primary-active); + --inverse-surface-solid-primary-brightness: var(--on-light-surface-solid-primary-brightness); + --inverse-surface-solid-secondary-hover: var(--on-light-surface-solid-secondary-hover); + --inverse-surface-solid-secondary-active: var(--on-light-surface-solid-secondary-active); + --inverse-surface-solid-tertiary-hover: var(--on-light-surface-solid-tertiary-hover); + --inverse-surface-solid-tertiary-active: var(--on-light-surface-solid-tertiary-active); + --inverse-surface-solid-card-hover: var(--on-light-surface-solid-card-hover); + --inverse-surface-solid-card-active: var(--on-light-surface-solid-card-active); + --inverse-surface-solid-card-brightness: var(--on-light-surface-solid-card-brightness); + --inverse-surface-solid-default-hover: var(--on-light-surface-solid-default-hover); + --inverse-surface-solid-default-active: var(--on-light-surface-solid-default-active); + --inverse-surface-transparent-primary-hover: var(--on-light-surface-transparent-primary-hover); + --inverse-surface-transparent-primary-active: var(--on-light-surface-transparent-primary-active); + --inverse-surface-transparent-secondary-hover: var(--on-light-surface-transparent-secondary-hover); + --inverse-surface-transparent-secondary-active: var(--on-light-surface-transparent-secondary-active); + --inverse-surface-transparent-tertiary-hover: var(--on-light-surface-transparent-tertiary-hover); + --inverse-surface-transparent-tertiary-active: var(--on-light-surface-transparent-tertiary-active); + --inverse-surface-transparent-deep-hover: var(--on-light-surface-transparent-deep-hover); + --inverse-surface-transparent-deep-active: var(--on-light-surface-transparent-deep-active); + --inverse-surface-transparent-card-hover: var(--on-light-surface-transparent-card-hover); + --inverse-surface-transparent-card-active: var(--on-light-surface-transparent-card-active); + --inverse-surface-transparent-card-brightness: var(--on-light-surface-transparent-card-brightness); + --inverse-surface-clear-hover: var(--on-light-surface-clear-hover); + --inverse-surface-clear-active: var(--on-light-surface-clear-active); + --inverse-surface-accent-hover: var(--on-light-surface-accent-hover); + --inverse-surface-accent-active: var(--on-light-surface-accent-active); + --inverse-surface-accent-minor-hover: var(--on-light-surface-accent-minor-hover); + --inverse-surface-accent-minor-active: var(--on-light-surface-accent-minor-active); + --inverse-surface-transparent-accent-hover: var(--on-light-surface-transparent-accent-hover); + --inverse-surface-transparent-accent-active: var(--on-light-surface-transparent-accent-active); + --inverse-surface-positive-hover: var(--on-light-surface-positive-hover); + --inverse-surface-positive-active: var(--on-light-surface-positive-active); + --inverse-surface-warning-hover: var(--on-light-surface-warning-hover); + --inverse-surface-warning-active: var(--on-light-surface-warning-active); + --inverse-surface-negative-hover: var(--on-light-surface-negative-hover); + --inverse-surface-negative-active: var(--on-light-surface-negative-active); + --inverse-surface-info-hover: var(--on-light-surface-info-hover); + --inverse-surface-info-active: var(--on-light-surface-info-active); + --inverse-surface-positive-minor-hover: var(--on-light-surface-positive-minor-hover); + --inverse-surface-positive-minor-active: var(--on-light-surface-positive-minor-active); + --inverse-surface-warning-minor-hover: var(--on-light-surface-warning-minor-hover); + --inverse-surface-warning-minor-active: var(--on-light-surface-warning-minor-active); + --inverse-surface-negative-minor-hover: var(--on-light-surface-negative-minor-hover); + --inverse-surface-negative-minor-active: var(--on-light-surface-negative-minor-active); + --inverse-surface-info-minor-hover: var(--on-light-surface-info-minor-hover); + --inverse-surface-info-minor-active: var(--on-light-surface-info-minor-active); + --inverse-surface-transparent-positive-hover: var(--on-light-surface-transparent-positive-hover); + --inverse-surface-transparent-positive-active: var(--on-light-surface-transparent-positive-active); + --inverse-surface-transparent-warning-hover: var(--on-light-surface-transparent-warning-hover); + --inverse-surface-transparent-warning-active: var(--on-light-surface-transparent-warning-active); + --inverse-surface-transparent-negative-hover: var(--on-light-surface-transparent-negative-hover); + --inverse-surface-transparent-negative-active: var(--on-light-surface-transparent-negative-active); + --inverse-surface-transparent-info-hover: var(--on-light-surface-transparent-info-hover); + --inverse-surface-transparent-info-active: var(--on-light-surface-transparent-info-active); + --inverse-surface-solid-card: var(--on-light-surface-solid-card); + --inverse-surface-solid-primary: var(--on-light-surface-solid-primary); + --inverse-surface-solid-secondary: var(--on-light-surface-solid-secondary); + --inverse-surface-solid-tertiary: var(--on-light-surface-solid-tertiary); + --inverse-surface-solid-default: var(--on-light-surface-solid-default); + --inverse-surface-transparent-card: var(--on-light-surface-transparent-card); + --inverse-surface-transparent-primary: var(--on-light-surface-transparent-primary); + --inverse-surface-transparent-secondary: var(--on-light-surface-transparent-secondary); + --inverse-surface-transparent-tertiary: var(--on-light-surface-transparent-tertiary); + --inverse-surface-transparent-deep: var(--on-light-surface-transparent-deep); + --inverse-surface-clear: var(--on-light-surface-clear); + --inverse-surface-accent: var(--on-light-surface-accent); + --inverse-surface-accent-minor: var(--on-light-surface-accent-minor); + --inverse-surface-transparent-accent: var(--on-light-surface-transparent-accent); + --inverse-surface-positive: var(--on-light-surface-positive); + --inverse-surface-warning: var(--on-light-surface-warning); + --inverse-surface-negative: var(--on-light-surface-negative); + --inverse-surface-info: var(--on-light-surface-info); + --inverse-surface-positive-minor: var(--on-light-surface-positive-minor); + --inverse-surface-warning-minor: var(--on-light-surface-warning-minor); + --inverse-surface-negative-minor: var(--on-light-surface-negative-minor); + --inverse-surface-info-minor: var(--on-light-surface-info-minor); + --inverse-surface-transparent-positive: var(--on-light-surface-transparent-positive); + --inverse-surface-transparent-warning: var(--on-light-surface-transparent-warning); + --inverse-surface-transparent-negative: var(--on-light-surface-transparent-negative); + --inverse-surface-transparent-info: var(--on-light-surface-transparent-info); --background-primary: var(--dark-background-primary); --background-primary-brightness: var(--dark-background-primary-brightness); + --inverse-background-primary-brightness: var(--light-background-primary-brightness); + --inverse-background-primary: var(--light-background-primary); --overlay-soft: var(--on-dark-overlay-soft); --overlay-hard: var(--on-dark-overlay-hard); --overlay-blur: var(--on-dark-overlay-blur); + --inverse-overlay-soft: var(--on-light-overlay-soft); + --inverse-overlay-hard: var(--on-light-overlay-hard); + --inverse-overlay-blur: var(--on-light-overlay-blur); --outline-solid-primary-hover: var(--on-dark-outline-solid-primary-hover); --outline-solid-primary-active: var(--on-dark-outline-solid-primary-active); --outline-solid-secondary-hover: var(--on-dark-outline-solid-secondary-hover); @@ -2636,9 +3329,81 @@ export const viewContainer = { --outline-info: var(--on-dark-outline-info); --outline-info-minor: var(--on-dark-outline-info-minor); --outline-transparent-info: var(--on-dark-outline-transparent-info); + --inverse-outline-solid-primary-hover: var(--on-light-outline-solid-primary-hover); + --inverse-outline-solid-primary-active: var(--on-light-outline-solid-primary-active); + --inverse-outline-solid-secondary-hover: var(--on-light-outline-solid-secondary-hover); + --inverse-outline-solid-secondary-active: var(--on-light-outline-solid-secondary-active); + --inverse-outline-solid-tertiary-hover: var(--on-light-outline-solid-tertiary-hover); + --inverse-outline-solid-tertiary-active: var(--on-light-outline-solid-tertiary-active); + --inverse-outline-transparent-primary-hover: var(--on-light-outline-transparent-primary-hover); + --inverse-outline-transparent-primary-active: var(--on-light-outline-transparent-primary-active); + --inverse-outline-transparent-secondary-hover: var(--on-light-outline-transparent-secondary-hover); + --inverse-outline-transparent-secondary-active: var(--on-light-outline-transparent-secondary-active); + --inverse-outline-transparent-tertiary-hover: var(--on-light-outline-transparent-tertiary-hover); + --inverse-outline-transparent-tertiary-active: var(--on-light-outline-transparent-tertiary-active); + --inverse-outline-clear-hover: var(--on-light-outline-clear-hover); + --inverse-outline-clear-active: var(--on-light-outline-clear-active); + --inverse-outline-accent-hover: var(--on-light-outline-accent-hover); + --inverse-outline-accent-active: var(--on-light-outline-accent-active); + --inverse-outline-accent-minor-hover: var(--on-light-outline-accent-minor-hover); + --inverse-outline-accent-minor-active: var(--on-light-outline-accent-minor-active); + --inverse-outline-transparent-accent-hover: var(--on-light-outline-transparent-accent-hover); + --inverse-outline-transparent-accent-active: var(--on-light-outline-transparent-accent-active); + --inverse-outline-positive-hover: var(--on-light-outline-positive-hover); + --inverse-outline-positive-active: var(--on-light-outline-positive-active); + --inverse-outline-warning-hover: var(--on-light-outline-warning-hover); + --inverse-outline-warning-active: var(--on-light-outline-warning-active); + --inverse-outline-negative-hover: var(--on-light-outline-negative-hover); + --inverse-outline-negative-active: var(--on-light-outline-negative-active); + --inverse-outline-info-hover: var(--on-light-outline-info-hover); + --inverse-outline-info-active: var(--on-light-outline-info-active); + --inverse-outline-positive-minor-hover: var(--on-light-outline-positive-minor-hover); + --inverse-outline-positive-minor-active: var(--on-light-outline-positive-minor-active); + --inverse-outline-warning-minor-hover: var(--on-light-outline-warning-minor-hover); + --inverse-outline-warning-minor-active: var(--on-light-outline-warning-minor-active); + --inverse-outline-negative-minor-hover: var(--on-light-outline-negative-minor-hover); + --inverse-outline-negative-minor-active: var(--on-light-outline-negative-minor-active); + --inverse-outline-info-minor-hover: var(--on-light-outline-info-minor-hover); + --inverse-outline-info-minor-active: var(--on-light-outline-info-minor-active); + --inverse-outline-transparent-positive-hover: var(--on-light-outline-transparent-positive-hover); + --inverse-outline-transparent-positive-active: var(--on-light-outline-transparent-positive-active); + --inverse-outline-transparent-warning-hover: var(--on-light-outline-transparent-warning-hover); + --inverse-outline-transparent-warning-active: var(--on-light-outline-transparent-warning-active); + --inverse-outline-transparent-negative-hover: var(--on-light-outline-transparent-negative-hover); + --inverse-outline-transparent-negative-active: var(--on-light-outline-transparent-negative-active); + --inverse-outline-transparent-info-hover: var(--on-light-outline-transparent-info-hover); + --inverse-outline-transparent-info-active: var(--on-light-outline-transparent-info-active); + --inverse-outline-solid-primary: var(--on-light-outline-solid-primary); + --inverse-outline-solid-secondary: var(--on-light-outline-solid-secondary); + --inverse-outline-solid-tertiary: var(--on-light-outline-solid-tertiary); + --inverse-outline-transparent-primary: var(--on-light-outline-transparent-primary); + --inverse-outline-transparent-secondary: var(--on-light-outline-transparent-secondary); + --inverse-outline-transparent-tertiary: var(--on-light-outline-transparent-tertiary); + --inverse-outline-clear: var(--on-light-outline-clear); + --inverse-outline-default: var(--on-light-outline-default); + --inverse-outline-default-hover: var(--on-light-outline-default-hover); + --inverse-outline-default-active: var(--on-light-outline-default-active); + --inverse-outline-accent: var(--on-light-outline-accent); + --inverse-outline-accent-minor: var(--on-light-outline-accent-minor); + --inverse-outline-transparent-accent: var(--on-light-outline-transparent-accent); + --inverse-outline-positive: var(--on-light-outline-positive); + --inverse-outline-warning: var(--on-light-outline-warning); + --inverse-outline-negative: var(--on-light-outline-negative); + --inverse-outline-info: var(--on-light-outline-info); + --inverse-outline-positive-minor: var(--on-light-outline-positive-minor); + --inverse-outline-warning-minor: var(--on-light-outline-warning-minor); + --inverse-outline-negative-minor: var(--on-light-outline-negative-minor); + --inverse-outline-info-minor: var(--on-light-outline-info-minor); + --inverse-outline-transparent-positive: var(--on-light-outline-transparent-positive); + --inverse-outline-transparent-warning: var(--on-light-outline-transparent-warning); + --inverse-outline-transparent-negative: var(--on-light-outline-transparent-negative); + --inverse-outline-transparent-info: var(--on-light-outline-transparent-info); --text-accent-gradient-hover: var(--on-dark-text-accent-gradient-hover); --text-accent-gradient-active: var(--on-dark-text-accent-gradient-active); --text-accent-gradient: var(--on-dark-text-accent-gradient); + --inverse-text-accent-gradient-hover: var(--on-light-text-accent-gradient-hover); + --inverse-text-accent-gradient-active: var(--on-light-text-accent-gradient-active); + --inverse-text-accent-gradient: var(--on-light-text-accent-gradient); --surface-accent-gradient-hover: var(--on-dark-surface-accent-gradient-hover); --surface-accent-gradient-active: var(--on-dark-surface-accent-gradient-active); --surface-accent-gradient: var(--on-dark-surface-accent-gradient); @@ -2648,6 +3413,9 @@ export const viewContainer = { --surface-skeleton-deep-gradient: var(--on-dark-surface-skeleton-deep-gradient); --surface-skeleton-deep-gradient-hover: var(--on-dark-surface-skeleton-deep-gradient-hover); --surface-skeleton-deep-gradient-active: var(--on-dark-surface-skeleton-deep-gradient-active); + --inverse-surface-accent-gradient-hover: var(--on-light-surface-accent-gradient-hover); + --inverse-surface-accent-gradient-active: var(--on-light-surface-accent-gradient-active); + --inverse-surface-accent-gradient: var(--on-light-surface-accent-gradient); --inverse-surface-skeleton-gradient: var(--on-light-surface-skeleton-gradient); --inverse-surface-skeleton-gradient-hover: var(--on-light-surface-skeleton-gradient-hover); --inverse-surface-skeleton-gradient-active: var(--on-light-surface-skeleton-gradient-active); @@ -2712,6 +3480,36 @@ export const viewContainer = { --inverse-text-paragraph-hover: var(--on-dark-text-paragraph-hover); --inverse-text-paragraph-active: var(--on-dark-text-paragraph-active); --inverse-text-paragraph: var(--on-dark-text-paragraph); + --inverse-text-accent-hover: var(--on-dark-text-accent-hover); + --inverse-text-accent-active: var(--on-dark-text-accent-active); + --inverse-text-accent-minor-hover: var(--on-dark-text-accent-minor-hover); + --inverse-text-accent-minor-active: var(--on-dark-text-accent-minor-active); + --inverse-text-positive-hover: var(--on-dark-text-positive-hover); + --inverse-text-positive-active: var(--on-dark-text-positive-active); + --inverse-text-warning-hover: var(--on-dark-text-warning-hover); + --inverse-text-warning-active: var(--on-dark-text-warning-active); + --inverse-text-negative-hover: var(--on-dark-text-negative-hover); + --inverse-text-negative-active: var(--on-dark-text-negative-active); + --inverse-text-info-hover: var(--on-dark-text-info-hover); + --inverse-text-info-active: var(--on-dark-text-info-active); + --inverse-text-positive-minor-hover: var(--on-dark-text-positive-minor-hover); + --inverse-text-positive-minor-active: var(--on-dark-text-positive-minor-active); + --inverse-text-warning-minor-hover: var(--on-dark-text-warning-minor-hover); + --inverse-text-warning-minor-active: var(--on-dark-text-warning-minor-active); + --inverse-text-negative-minor-hover: var(--on-dark-text-negative-minor-hover); + --inverse-text-negative-minor-active: var(--on-dark-text-negative-minor-active); + --inverse-text-info-minor-hover: var(--on-dark-text-info-minor-hover); + --inverse-text-info-minor-active: var(--on-dark-text-info-minor-active); + --inverse-text-accent: var(--on-dark-text-accent); + --inverse-text-accent-minor: var(--on-dark-text-accent-minor); + --inverse-text-positive: var(--on-dark-text-positive); + --inverse-text-warning: var(--on-dark-text-warning); + --inverse-text-negative: var(--on-dark-text-negative); + --inverse-text-info: var(--on-dark-text-info); + --inverse-text-positive-minor: var(--on-dark-text-positive-minor); + --inverse-text-warning-minor: var(--on-dark-text-warning-minor); + --inverse-text-negative-minor: var(--on-dark-text-negative-minor); + --inverse-text-info-minor: var(--on-dark-text-info-minor); --surface-solid-primary-hover: var(--on-light-surface-solid-primary-hover); --surface-solid-primary-active: var(--on-light-surface-solid-primary-active); --surface-solid-primary: var(--on-light-surface-solid-primary); @@ -2793,11 +3591,97 @@ export const viewContainer = { --surface-info: var(--on-light-surface-info); --surface-info-minor: var(--on-light-surface-info-minor); --surface-transparent-info: var(--on-light-surface-transparent-info); + --inverse-surface-solid-primary-hover: var(--on-dark-surface-solid-primary-hover); + --inverse-surface-solid-primary-active: var(--on-dark-surface-solid-primary-active); + --inverse-surface-solid-primary-brightness: var(--on-dark-surface-solid-primary-brightness); + --inverse-surface-solid-secondary-hover: var(--on-dark-surface-solid-secondary-hover); + --inverse-surface-solid-secondary-active: var(--on-dark-surface-solid-secondary-active); + --inverse-surface-solid-tertiary-hover: var(--on-dark-surface-solid-tertiary-hover); + --inverse-surface-solid-tertiary-active: var(--on-dark-surface-solid-tertiary-active); + --inverse-surface-solid-card-hover: var(--on-dark-surface-solid-card-hover); + --inverse-surface-solid-card-active: var(--on-dark-surface-solid-card-active); + --inverse-surface-solid-card-brightness: var(--on-dark-surface-solid-card-brightness); + --inverse-surface-solid-default-hover: var(--on-dark-surface-solid-default-hover); + --inverse-surface-solid-default-active: var(--on-dark-surface-solid-default-active); + --inverse-surface-transparent-primary-hover: var(--on-dark-surface-transparent-primary-hover); + --inverse-surface-transparent-primary-active: var(--on-dark-surface-transparent-primary-active); + --inverse-surface-transparent-secondary-hover: var(--on-dark-surface-transparent-secondary-hover); + --inverse-surface-transparent-secondary-active: var(--on-dark-surface-transparent-secondary-active); + --inverse-surface-transparent-tertiary-hover: var(--on-dark-surface-transparent-tertiary-hover); + --inverse-surface-transparent-tertiary-active: var(--on-dark-surface-transparent-tertiary-active); + --inverse-surface-transparent-deep-hover: var(--on-dark-surface-transparent-deep-hover); + --inverse-surface-transparent-deep-active: var(--on-dark-surface-transparent-deep-active); + --inverse-surface-transparent-card-hover: var(--on-dark-surface-transparent-card-hover); + --inverse-surface-transparent-card-active: var(--on-dark-surface-transparent-card-active); + --inverse-surface-transparent-card-brightness: var(--on-dark-surface-transparent-card-brightness); + --inverse-surface-clear-hover: var(--on-dark-surface-clear-hover); + --inverse-surface-clear-active: var(--on-dark-surface-clear-active); + --inverse-surface-accent-hover: var(--on-dark-surface-accent-hover); + --inverse-surface-accent-active: var(--on-dark-surface-accent-active); + --inverse-surface-accent-minor-hover: var(--on-dark-surface-accent-minor-hover); + --inverse-surface-accent-minor-active: var(--on-dark-surface-accent-minor-active); + --inverse-surface-transparent-accent-hover: var(--on-dark-surface-transparent-accent-hover); + --inverse-surface-transparent-accent-active: var(--on-dark-surface-transparent-accent-active); + --inverse-surface-positive-hover: var(--on-dark-surface-positive-hover); + --inverse-surface-positive-active: var(--on-dark-surface-positive-active); + --inverse-surface-warning-hover: var(--on-dark-surface-warning-hover); + --inverse-surface-warning-active: var(--on-dark-surface-warning-active); + --inverse-surface-negative-hover: var(--on-dark-surface-negative-hover); + --inverse-surface-negative-active: var(--on-dark-surface-negative-active); + --inverse-surface-info-hover: var(--on-dark-surface-info-hover); + --inverse-surface-info-active: var(--on-dark-surface-info-active); + --inverse-surface-positive-minor-hover: var(--on-dark-surface-positive-minor-hover); + --inverse-surface-positive-minor-active: var(--on-dark-surface-positive-minor-active); + --inverse-surface-warning-minor-hover: var(--on-dark-surface-warning-minor-hover); + --inverse-surface-warning-minor-active: var(--on-dark-surface-warning-minor-active); + --inverse-surface-negative-minor-hover: var(--on-dark-surface-negative-minor-hover); + --inverse-surface-negative-minor-active: var(--on-dark-surface-negative-minor-active); + --inverse-surface-info-minor-hover: var(--on-dark-surface-info-minor-hover); + --inverse-surface-info-minor-active: var(--on-dark-surface-info-minor-active); + --inverse-surface-transparent-positive-hover: var(--on-dark-surface-transparent-positive-hover); + --inverse-surface-transparent-positive-active: var(--on-dark-surface-transparent-positive-active); + --inverse-surface-transparent-warning-hover: var(--on-dark-surface-transparent-warning-hover); + --inverse-surface-transparent-warning-active: var(--on-dark-surface-transparent-warning-active); + --inverse-surface-transparent-negative-hover: var(--on-dark-surface-transparent-negative-hover); + --inverse-surface-transparent-negative-active: var(--on-dark-surface-transparent-negative-active); + --inverse-surface-transparent-info-hover: var(--on-dark-surface-transparent-info-hover); + --inverse-surface-transparent-info-active: var(--on-dark-surface-transparent-info-active); + --inverse-surface-solid-card: var(--on-dark-surface-solid-card); + --inverse-surface-solid-primary: var(--on-dark-surface-solid-primary); + --inverse-surface-solid-secondary: var(--on-dark-surface-solid-secondary); + --inverse-surface-solid-tertiary: var(--on-dark-surface-solid-tertiary); + --inverse-surface-solid-default: var(--on-dark-surface-solid-default); + --inverse-surface-transparent-primary: var(--on-dark-surface-transparent-primary); + --inverse-surface-transparent-card: var(--on-dark-surface-transparent-card); + --inverse-surface-transparent-secondary: var(--on-dark-surface-transparent-secondary); + --inverse-surface-transparent-tertiary: var(--on-dark-surface-transparent-tertiary); + --inverse-surface-transparent-deep: var(--on-dark-surface-transparent-deep); + --inverse-surface-clear: var(--on-dark-surface-clear); + --inverse-surface-accent: var(--on-dark-surface-accent); + --inverse-surface-accent-minor: var(--on-dark-surface-accent-minor); + --inverse-surface-transparent-accent: var(--on-dark-surface-transparent-accent); + --inverse-surface-positive: var(--on-dark-surface-positive); + --inverse-surface-warning: var(--on-dark-surface-warning); + --inverse-surface-negative: var(--on-dark-surface-negative); + --inverse-surface-info: var(--on-dark-surface-info); + --inverse-surface-positive-minor: var(--on-dark-surface-positive-minor); + --inverse-surface-warning-minor: var(--on-dark-surface-warning-minor); + --inverse-surface-negative-minor: var(--on-dark-surface-negative-minor); + --inverse-surface-info-minor: var(--on-dark-surface-info-minor); + --inverse-surface-transparent-positive: var(--on-dark-surface-transparent-positive); + --inverse-surface-transparent-warning: var(--on-dark-surface-transparent-warning); + --inverse-surface-transparent-negative: var(--on-dark-surface-transparent-negative); + --inverse-surface-transparent-info: var(--on-dark-surface-transparent-info); --background-primary: var(--light-background-primary); --background-primary-brightness: var(--light-background-primary-brightness); + --inverse-background-primary-brightness: var(--dark-background-primary-brightness); + --inverse-background-primary: var(--dark-background-primary); --overlay-soft: var(--on-light-overlay-soft); --overlay-hard: var(--on-light-overlay-hard); --overlay-blur: var(--on-light-overlay-blur); + --inverse-overlay-soft: var(--on-dark-overlay-soft); + --inverse-overlay-hard: var(--on-dark-overlay-hard); + --inverse-overlay-blur: var(--on-dark-overlay-blur); --outline-solid-primary-hover: var(--on-light-outline-solid-primary-hover); --outline-solid-primary-active: var(--on-light-outline-solid-primary-active); --outline-solid-secondary-hover: var(--on-light-outline-solid-secondary-hover); @@ -2867,9 +3751,81 @@ export const viewContainer = { --outline-info: var(--on-light-outline-info); --outline-info-minor: var(--on-light-outline-info-minor); --outline-transparent-info: var(--on-light-outline-transparent-info); + --inverse-outline-solid-primary-hover: var(--on-dark-outline-solid-primary-hover); + --inverse-outline-solid-primary-active: var(--on-dark-outline-solid-primary-active); + --inverse-outline-solid-secondary-hover: var(--on-dark-outline-solid-secondary-hover); + --inverse-outline-solid-secondary-active: var(--on-dark-outline-solid-secondary-active); + --inverse-outline-solid-tertiary-hover: var(--on-dark-outline-solid-tertiary-hover); + --inverse-outline-solid-tertiary-active: var(--on-dark-outline-solid-tertiary-active); + --inverse-outline-transparent-primary-hover: var(--on-dark-outline-transparent-primary-hover); + --inverse-outline-transparent-primary-active: var(--on-dark-outline-transparent-primary-active); + --inverse-outline-transparent-secondary-hover: var(--on-dark-outline-transparent-secondary-hover); + --inverse-outline-transparent-secondary-active: var(--on-dark-outline-transparent-secondary-active); + --inverse-outline-transparent-tertiary-hover: var(--on-dark-outline-transparent-tertiary-hover); + --inverse-outline-transparent-tertiary-active: var(--on-dark-outline-transparent-tertiary-active); + --inverse-outline-clear-hover: var(--on-dark-outline-clear-hover); + --inverse-outline-clear-active: var(--on-dark-outline-clear-active); + --inverse-outline-accent-hover: var(--on-dark-outline-accent-hover); + --inverse-outline-accent-active: var(--on-dark-outline-accent-active); + --inverse-outline-accent-minor-hover: var(--on-dark-outline-accent-minor-hover); + --inverse-outline-accent-minor-active: var(--on-dark-outline-accent-minor-active); + --inverse-outline-transparent-accent-hover: var(--on-dark-outline-transparent-accent-hover); + --inverse-outline-transparent-accent-active: var(--on-dark-outline-transparent-accent-active); + --inverse-outline-positive-hover: var(--on-dark-outline-positive-hover); + --inverse-outline-positive-active: var(--on-dark-outline-positive-active); + --inverse-outline-warning-hover: var(--on-dark-outline-warning-hover); + --inverse-outline-warning-active: var(--on-dark-outline-warning-active); + --inverse-outline-negative-hover: var(--on-dark-outline-negative-hover); + --inverse-outline-negative-active: var(--on-dark-outline-negative-active); + --inverse-outline-info-hover: var(--on-dark-outline-info-hover); + --inverse-outline-info-active: var(--on-dark-outline-info-active); + --inverse-outline-positive-minor-hover: var(--on-dark-outline-positive-minor-hover); + --inverse-outline-positive-minor-active: var(--on-dark-outline-positive-minor-active); + --inverse-outline-warning-minor-hover: var(--on-dark-outline-warning-minor-hover); + --inverse-outline-warning-minor-active: var(--on-dark-outline-warning-minor-active); + --inverse-outline-negative-minor-hover: var(--on-dark-outline-negative-minor-hover); + --inverse-outline-negative-minor-active: var(--on-dark-outline-negative-minor-active); + --inverse-outline-info-minor-hover: var(--on-dark-outline-info-minor-hover); + --inverse-outline-info-minor-active: var(--on-dark-outline-info-minor-active); + --inverse-outline-transparent-positive-hover: var(--on-dark-outline-transparent-positive-hover); + --inverse-outline-transparent-positive-active: var(--on-dark-outline-transparent-positive-active); + --inverse-outline-transparent-warning-hover: var(--on-dark-outline-transparent-warning-hover); + --inverse-outline-transparent-warning-active: var(--on-dark-outline-transparent-warning-active); + --inverse-outline-transparent-negative-hover: var(--on-dark-outline-transparent-negative-hover); + --inverse-outline-transparent-negative-active: var(--on-dark-outline-transparent-negative-active); + --inverse-outline-transparent-info-hover: var(--on-dark-outline-transparent-info-hover); + --inverse-outline-transparent-info-active: var(--on-dark-outline-transparent-info-active); + --inverse-outline-default-hover: var(--on-dark-outline-default-hover); + --inverse-outline-default-active: var(--on-dark-outline-default-active); + --inverse-outline-solid-primary: var(--on-dark-outline-solid-primary); + --inverse-outline-solid-secondary: var(--on-dark-outline-solid-secondary); + --inverse-outline-solid-tertiary: var(--on-dark-outline-solid-tertiary); + --inverse-outline-transparent-primary: var(--on-dark-outline-transparent-primary); + --inverse-outline-transparent-tertiary: var(--on-dark-outline-transparent-tertiary); + --inverse-outline-clear: var(--on-dark-outline-clear); + --inverse-outline-default: var(--on-dark-outline-default); + --inverse-outline-accent: var(--on-dark-outline-accent); + --inverse-outline-accent-minor: var(--on-dark-outline-accent-minor); + --inverse-outline-transparent-accent: var(--on-dark-outline-transparent-accent); + --inverse-outline-positive: var(--on-dark-outline-positive); + --inverse-outline-warning: var(--on-dark-outline-warning); + --inverse-outline-negative: var(--on-dark-outline-negative); + --inverse-outline-info: var(--on-dark-outline-info); + --inverse-outline-positive-minor: var(--on-dark-outline-positive-minor); + --inverse-outline-warning-minor: var(--on-dark-outline-warning-minor); + --inverse-outline-negative-minor: var(--on-dark-outline-negative-minor); + --inverse-outline-info-minor: var(--on-dark-outline-info-minor); + --inverse-outline-transparent-positive: var(--on-dark-outline-transparent-positive); + --inverse-outline-transparent-warning: var(--on-dark-outline-transparent-warning); + --inverse-outline-transparent-negative: var(--on-dark-outline-transparent-negative); + --inverse-outline-transparent-info: var(--on-dark-outline-transparent-info); + --inverse-outline-transparent-secondary: var(--on-dark-outline-transparent-secondary); --text-accent-gradient-hover: var(--on-light-text-accent-gradient-hover); --text-accent-gradient-active: var(--on-light-text-accent-gradient-active); --text-accent-gradient: var(--on-light-text-accent-gradient); + --inverse-text-accent-gradient-hover: var(--on-dark-text-accent-gradient-hover); + --inverse-text-accent-gradient-active: var(--on-dark-text-accent-gradient-active); + --inverse-text-accent-gradient: var(--on-dark-text-accent-gradient); --surface-accent-gradient-hover: var(--on-light-surface-accent-gradient-hover); --surface-accent-gradient-active: var(--on-light-surface-accent-gradient-active); --surface-accent-gradient: var(--on-light-surface-accent-gradient); @@ -2879,6 +3835,9 @@ export const viewContainer = { --surface-skeleton-deep-gradient: var(--on-light-surface-skeleton-deep-gradient); --surface-skeleton-deep-gradient-hover: var(--on-light-surface-skeleton-deep-gradient-hover); --surface-skeleton-deep-gradient-active: var(--on-light-surface-skeleton-deep-gradient-active); + --inverse-surface-accent-gradient-hover: var(--on-dark-surface-accent-gradient-hover); + --inverse-surface-accent-gradient-active: var(--on-dark-surface-accent-gradient-active); + --inverse-surface-accent-gradient: var(--on-dark-surface-accent-gradient); --inverse-surface-skeleton-gradient: var(--on-dark-surface-skeleton-gradient); --inverse-surface-skeleton-gradient-hover: var(--on-dark-surface-skeleton-gradient-hover); --inverse-surface-skeleton-gradient-active: var(--on-dark-surface-skeleton-gradient-active); diff --git a/packages/themes/plasma-themes/src/tokens/stylesSalute/index.ts b/packages/themes/plasma-themes/src/tokens/stylesSalute/index.ts index 8d927b78f6..4806077466 100644 --- a/packages/themes/plasma-themes/src/tokens/stylesSalute/index.ts +++ b/packages/themes/plasma-themes/src/tokens/stylesSalute/index.ts @@ -2216,6 +2216,15 @@ export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, /** Вторичный фон */ export const backgroundSecondary = 'var(--background-secondary, #171717)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness, #FFFFFFFF)'; + +/** Инвертированный основной фон */ +export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F2F2F2FF)'; + +/** Инвертированный вторичный фон */ +export const inverseBackgroundSecondary = 'var(--inverse-background-secondary, #FFFFFFFF)'; + /** Цвет фона паранжи светлый на темном фоне */ export const onDarkOverlaySoft = 'var(--on-dark-overlay-soft, #0000008F)'; @@ -4595,6 +4604,9 @@ export const viewContainer = { --background-primary: var(--dark-background-primary); --background-primary-brightness: var(--dark-background-primary-brightness); --background-secondary: var(--dark-background-secondary); + --inverse-background-primary-brightness: var(--light-background-primary-brightness); + --inverse-background-primary: var(--light-background-primary); + --inverse-background-secondary: var(--light-background-secondary); --outline-solid-primary-hover: var(--on-dark-outline-solid-primary-hover); --outline-solid-primary-active: var(--on-dark-outline-solid-primary-active); --outline-solid-secondary-hover: var(--on-dark-outline-solid-secondary-hover); @@ -5228,6 +5240,9 @@ export const viewContainer = { --background-primary: var(--light-background-primary); --background-primary-brightness: var(--light-background-primary-brightness); --background-secondary: var(--light-background-secondary); + --inverse-background-primary-brightness: var(--dark-background-primary-brightness); + --inverse-background-primary: var(--dark-background-primary); + --inverse-background-secondary: var(--dark-background-secondary); --outline-solid-primary-hover: var(--on-light-outline-solid-primary-hover); --outline-solid-primary-active: var(--on-light-outline-solid-primary-active); --outline-solid-secondary-hover: var(--on-light-outline-solid-secondary-hover);