From 9ce9ea7cb1f4d5035dc6ce3278bdc1e81ca2ea11 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Fri, 16 Aug 2024 17:19:35 +0500 Subject: [PATCH] feat(*-themes): Add brightness tokens to all themes --- .../src/css/caldera_online.module.css | 36 +++++ .../src/css/caldera_online__dark.css | 18 +++ .../src/css/caldera_online__light.css | 18 +++ .../src/themes/caldera_online__dark.ts | 18 +++ .../src/themes/caldera_online__light.ts | 18 +++ .../src/tokens/caldera_online/index.ts | 54 +++++++ .../caldera-online-themes/src/tokens/index.ts | 54 +++++++ .../src/css/flamingo.module.css | 22 +++ .../src/css/flamingo__dark.css | 11 ++ .../src/css/flamingo__light.css | 11 ++ .../src/themes/flamingo__dark.ts | 11 ++ .../src/themes/flamingo__light.ts | 11 ++ .../src/tokens/flamingo/index.ts | 33 ++++ .../flamingo-themes/src/tokens/index.ts | 54 +++++++ .../src/css/plasma_b2c.module.css | 94 ++++-------- .../src/css/plasma_b2c__dark.css | 47 ++---- .../src/css/plasma_b2c__light.css | 47 ++---- .../src/css/plasma_web.module.css | 94 ++++-------- .../src/css/plasma_web__dark.css | 47 ++---- .../src/css/plasma_web__light.css | 47 ++---- .../src/css/stylesSalute.module.css | 28 ++++ .../src/css/stylesSalute__dark.css | 14 ++ .../src/css/stylesSalute__light.css | 14 ++ .../src/themes/plasma_b2c__dark.ts | 47 ++---- .../src/themes/plasma_b2c__light.ts | 47 ++---- .../src/themes/plasma_web__dark.ts | 47 ++---- .../src/themes/plasma_web__light.ts | 47 ++---- .../src/themes/stylesSalute__dark.ts | 14 ++ .../src/themes/stylesSalute__light.ts | 14 ++ .../themes/plasma-themes/src/tokens/index.ts | 54 +++++++ .../src/tokens/plasma_b2c/index.ts | 143 +++++------------- .../src/tokens/plasma_web/index.ts | 143 +++++------------- .../src/tokens/stylesSalute/index.ts | 42 +++++ .../sdds-themes/src/css/sdds_cs.module.css | 26 ++++ .../sdds-themes/src/css/sdds_cs__dark.css | 13 ++ .../sdds-themes/src/css/sdds_cs__light.css | 13 ++ .../sdds-themes/src/css/sdds_dfa.module.css | 36 +++++ .../sdds-themes/src/css/sdds_dfa__dark.css | 18 +++ .../sdds-themes/src/css/sdds_dfa__light.css | 18 +++ .../sdds-themes/src/css/sdds_serv.module.css | 36 +++++ .../sdds-themes/src/css/sdds_serv__dark.css | 18 +++ .../sdds-themes/src/css/sdds_serv__light.css | 18 +++ .../sdds-themes/src/themes/sdds_cs__dark.ts | 13 ++ .../sdds-themes/src/themes/sdds_cs__light.ts | 13 ++ .../sdds-themes/src/themes/sdds_dfa__dark.ts | 18 +++ .../sdds-themes/src/themes/sdds_dfa__light.ts | 18 +++ .../sdds-themes/src/themes/sdds_serv__dark.ts | 18 +++ .../src/themes/sdds_serv__light.ts | 18 +++ .../themes/sdds-themes/src/tokens/index.ts | 54 +++++++ .../sdds-themes/src/tokens/sdds_cs/index.ts | 39 +++++ .../sdds-themes/src/tokens/sdds_dfa/index.ts | 54 +++++++ .../sdds-themes/src/tokens/sdds_serv/index.ts | 54 +++++++ 52 files changed, 1296 insertions(+), 598 deletions(-) diff --git a/packages/themes/caldera-online-themes/src/css/caldera_online.module.css b/packages/themes/caldera-online-themes/src/css/caldera_online.module.css index a7ffcb3e75..73bca9b060 100644 --- a/packages/themes/caldera-online-themes/src/css/caldera_online.module.css +++ b/packages/themes/caldera-online-themes/src/css/caldera_online.module.css @@ -4,6 +4,7 @@ --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; --text-secondary: #F5F5F58F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #17171793; --inverse-text-primary-active: #171717C4; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #2525F6FF; --inverse-text-secondary-hover: #171717FF; --inverse-text-secondary-active: #171717AB; --inverse-text-secondary: #1717178F; @@ -100,6 +104,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -109,6 +114,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #F5F5F5FF; --surface-solid-default: #F9F9F9; @@ -127,6 +133,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFF1DFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -190,6 +200,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -199,6 +210,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -217,6 +229,7 @@ --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; --on-light-surface-transparent-card: #0808080F; + --on-light-surface-transparent-card-brightness: #171717FF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -235,6 +248,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -244,6 +258,7 @@ --inverse-surface-solid-card-hover: #FFFFFFFF; --inverse-surface-solid-card-active: #FFFFFFFF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default-hover: #0D0D0DFF; --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; @@ -262,6 +277,7 @@ --inverse-surface-transparent-card-hover: #FFFFFFFF; --inverse-surface-transparent-card-active: #FFFFFFFF; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -278,9 +294,11 @@ --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #F9F9F9FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; @@ -352,6 +370,7 @@ --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; --text-secondary: #F5F5F58F; @@ -376,6 +395,7 @@ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -400,6 +420,7 @@ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -424,6 +445,7 @@ --inverse-text-primary-hover: #17171793; --inverse-text-primary-active: #171717C4; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #2525F6FF; --inverse-text-secondary-hover: #171717FF; --inverse-text-secondary-active: #171717AB; --inverse-text-secondary: #1717178F; @@ -448,6 +470,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -457,6 +480,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #F5F5F5FF; --surface-solid-default: #F9F9F9; @@ -475,6 +499,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFF1DFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -493,6 +518,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -502,6 +528,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -520,6 +547,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -538,6 +566,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -547,6 +576,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -565,6 +595,7 @@ --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; --on-light-surface-transparent-card: #0808080F; + --on-light-surface-transparent-card-brightness: #171717FF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -583,6 +614,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -592,6 +624,7 @@ --inverse-surface-solid-card-hover: #FFFFFFFF; --inverse-surface-solid-card-active: #FFFFFFFF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default-hover: #0D0D0DFF; --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; @@ -610,6 +643,7 @@ --inverse-surface-transparent-card-hover: #FFFFFFFF; --inverse-surface-transparent-card-active: #FFFFFFFF; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -626,9 +660,11 @@ --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #F9F9F9FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; diff --git a/packages/themes/caldera-online-themes/src/css/caldera_online__dark.css b/packages/themes/caldera-online-themes/src/css/caldera_online__dark.css index fa94a1d9f6..96ec2a2dce 100644 --- a/packages/themes/caldera-online-themes/src/css/caldera_online__dark.css +++ b/packages/themes/caldera-online-themes/src/css/caldera_online__dark.css @@ -4,6 +4,7 @@ --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; --text-secondary: #F5F5F58F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #17171793; --inverse-text-primary-active: #171717C4; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #2525F6FF; --inverse-text-secondary-hover: #171717FF; --inverse-text-secondary-active: #171717AB; --inverse-text-secondary: #1717178F; @@ -100,6 +104,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -109,6 +114,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #F5F5F5FF; --surface-solid-default: #F9F9F9; @@ -127,6 +133,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFF1DFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -190,6 +200,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -199,6 +210,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -217,6 +229,7 @@ --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; --on-light-surface-transparent-card: #0808080F; + --on-light-surface-transparent-card-brightness: #171717FF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -235,6 +248,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -244,6 +258,7 @@ --inverse-surface-solid-card-hover: #FFFFFFFF; --inverse-surface-solid-card-active: #FFFFFFFF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default-hover: #0D0D0DFF; --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; @@ -262,6 +277,7 @@ --inverse-surface-transparent-card-hover: #FFFFFFFF; --inverse-surface-transparent-card-active: #FFFFFFFF; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -278,9 +294,11 @@ --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #F9F9F9FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; diff --git a/packages/themes/caldera-online-themes/src/css/caldera_online__light.css b/packages/themes/caldera-online-themes/src/css/caldera_online__light.css index ab85b3fe6f..ce40505ebe 100644 --- a/packages/themes/caldera-online-themes/src/css/caldera_online__light.css +++ b/packages/themes/caldera-online-themes/src/css/caldera_online__light.css @@ -4,6 +4,7 @@ --text-primary-hover: #17171793; --text-primary-active: #171717C4; --text-primary: #171717F5; + --text-primary-brightness: #2525F6FF; --text-secondary-hover: #171717FF; --text-secondary-active: #171717AB; --text-secondary: #1717178F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #F5F5F593; --inverse-text-primary-active: #F5F5F5C4; --inverse-text-primary: #F5F5F5F5; + --inverse-text-primary-brightness: #F6F6F6FF; --inverse-text-secondary-hover: #F5F5F5FF; --inverse-text-secondary-active: #F5F5F5AB; --inverse-text-secondary: #F5F5F58F; @@ -100,6 +104,7 @@ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -109,6 +114,7 @@ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -127,6 +133,7 @@ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF05; --on-dark-surface-transparent-card-active: #FFFFFF1A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -190,6 +200,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -199,6 +210,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -217,6 +229,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -235,6 +248,7 @@ --inverse-surface-solid-primary-hover: #363636FF; --inverse-surface-solid-primary-active: #0D0D0DFF; --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #252525FF; --inverse-surface-solid-secondary-hover: #3B3B3BFF; --inverse-surface-solid-secondary-active: #1C1C1CFF; --inverse-surface-solid-secondary: #262626; @@ -244,6 +258,7 @@ --inverse-surface-solid-card-hover: #363636FF; --inverse-surface-solid-card-active: #0D0D0DFF; --inverse-surface-solid-card: #171717; + --inverse-surface-solid-card-brightness: #252525FF; --inverse-surface-solid-default-hover: #FFFFFFFF; --inverse-surface-solid-default-active: #F5F5F5FF; --inverse-surface-solid-default: #F9F9F9; @@ -262,6 +277,7 @@ --inverse-surface-transparent-card-hover: #FFFFFF05; --inverse-surface-transparent-card-active: #FFFFFF1A; --inverse-surface-transparent-card: #FFFFFF0F; + --inverse-surface-transparent-card-brightness: #FFFF1DFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -278,9 +294,11 @@ --inverse-surface-negative-active: #FF142CFF; --inverse-surface-negative: #FF293E; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #080808; + --inverse-background-primary-brightness: #171717FF; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; diff --git a/packages/themes/caldera-online-themes/src/themes/caldera_online__dark.ts b/packages/themes/caldera-online-themes/src/themes/caldera_online__dark.ts index 11e0e24c6c..69f2b526ce 100644 --- a/packages/themes/caldera-online-themes/src/themes/caldera_online__dark.ts +++ b/packages/themes/caldera-online-themes/src/themes/caldera_online__dark.ts @@ -6,6 +6,7 @@ export const caldera_online__dark = ([ --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; --text-secondary: #F5F5F58F; @@ -30,6 +31,7 @@ export const caldera_online__dark = ([ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -54,6 +56,7 @@ export const caldera_online__dark = ([ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -78,6 +81,7 @@ export const caldera_online__dark = ([ --inverse-text-primary-hover: #17171793; --inverse-text-primary-active: #171717C4; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #2525F6FF; --inverse-text-secondary-hover: #171717FF; --inverse-text-secondary-active: #171717AB; --inverse-text-secondary: #1717178F; @@ -102,6 +106,7 @@ export const caldera_online__dark = ([ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -111,6 +116,7 @@ export const caldera_online__dark = ([ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #F5F5F5FF; --surface-solid-default: #F9F9F9; @@ -129,6 +135,7 @@ export const caldera_online__dark = ([ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFF1DFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -147,6 +154,7 @@ export const caldera_online__dark = ([ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -156,6 +164,7 @@ export const caldera_online__dark = ([ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -174,6 +183,7 @@ export const caldera_online__dark = ([ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -192,6 +202,7 @@ export const caldera_online__dark = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -201,6 +212,7 @@ export const caldera_online__dark = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -219,6 +231,7 @@ export const caldera_online__dark = ([ --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; --on-light-surface-transparent-card: #0808080F; + --on-light-surface-transparent-card-brightness: #171717FF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -237,6 +250,7 @@ export const caldera_online__dark = ([ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -246,6 +260,7 @@ export const caldera_online__dark = ([ --inverse-surface-solid-card-hover: #FFFFFFFF; --inverse-surface-solid-card-active: #FFFFFFFF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default-hover: #0D0D0DFF; --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; @@ -264,6 +279,7 @@ export const caldera_online__dark = ([ --inverse-surface-transparent-card-hover: #FFFFFFFF; --inverse-surface-transparent-card-active: #FFFFFFFF; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -280,9 +296,11 @@ export const caldera_online__dark = ([ --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #F9F9F9FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; diff --git a/packages/themes/caldera-online-themes/src/themes/caldera_online__light.ts b/packages/themes/caldera-online-themes/src/themes/caldera_online__light.ts index 991727882c..646619100d 100644 --- a/packages/themes/caldera-online-themes/src/themes/caldera_online__light.ts +++ b/packages/themes/caldera-online-themes/src/themes/caldera_online__light.ts @@ -6,6 +6,7 @@ export const caldera_online__light = ([ --text-primary-hover: #17171793; --text-primary-active: #171717C4; --text-primary: #171717F5; + --text-primary-brightness: #2525F6FF; --text-secondary-hover: #171717FF; --text-secondary-active: #171717AB; --text-secondary: #1717178F; @@ -30,6 +31,7 @@ export const caldera_online__light = ([ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -54,6 +56,7 @@ export const caldera_online__light = ([ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -78,6 +81,7 @@ export const caldera_online__light = ([ --inverse-text-primary-hover: #F5F5F593; --inverse-text-primary-active: #F5F5F5C4; --inverse-text-primary: #F5F5F5F5; + --inverse-text-primary-brightness: #F6F6F6FF; --inverse-text-secondary-hover: #F5F5F5FF; --inverse-text-secondary-active: #F5F5F5AB; --inverse-text-secondary: #F5F5F58F; @@ -102,6 +106,7 @@ export const caldera_online__light = ([ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -111,6 +116,7 @@ export const caldera_online__light = ([ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -129,6 +135,7 @@ export const caldera_online__light = ([ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -147,6 +154,7 @@ export const caldera_online__light = ([ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -156,6 +164,7 @@ export const caldera_online__light = ([ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -174,6 +183,7 @@ export const caldera_online__light = ([ --on-dark-surface-transparent-card-hover: #FFFFFF05; --on-dark-surface-transparent-card-active: #FFFFFF1A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -192,6 +202,7 @@ export const caldera_online__light = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -201,6 +212,7 @@ export const caldera_online__light = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -219,6 +231,7 @@ export const caldera_online__light = ([ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -237,6 +250,7 @@ export const caldera_online__light = ([ --inverse-surface-solid-primary-hover: #363636FF; --inverse-surface-solid-primary-active: #0D0D0DFF; --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #252525FF; --inverse-surface-solid-secondary-hover: #3B3B3BFF; --inverse-surface-solid-secondary-active: #1C1C1CFF; --inverse-surface-solid-secondary: #262626; @@ -246,6 +260,7 @@ export const caldera_online__light = ([ --inverse-surface-solid-card-hover: #363636FF; --inverse-surface-solid-card-active: #0D0D0DFF; --inverse-surface-solid-card: #171717; + --inverse-surface-solid-card-brightness: #252525FF; --inverse-surface-solid-default-hover: #FFFFFFFF; --inverse-surface-solid-default-active: #F5F5F5FF; --inverse-surface-solid-default: #F9F9F9; @@ -264,6 +279,7 @@ export const caldera_online__light = ([ --inverse-surface-transparent-card-hover: #FFFFFF05; --inverse-surface-transparent-card-active: #FFFFFF1A; --inverse-surface-transparent-card: #FFFFFF0F; + --inverse-surface-transparent-card-brightness: #FFFF1DFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -280,9 +296,11 @@ export const caldera_online__light = ([ --inverse-surface-negative-active: #FF142CFF; --inverse-surface-negative: #FF293E; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #080808; + --inverse-background-primary-brightness: #171717FF; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; diff --git a/packages/themes/caldera-online-themes/src/tokens/caldera_online/index.ts b/packages/themes/caldera-online-themes/src/tokens/caldera_online/index.ts index fc2c246b6b..e9c675f786 100644 --- a/packages/themes/caldera-online-themes/src/tokens/caldera_online/index.ts +++ b/packages/themes/caldera-online-themes/src/tokens/caldera_online/index.ts @@ -9,6 +9,9 @@ export const textPrimaryActive = 'var(--text-primary-active, #F5F5F5C4)'; /** Основной цвет текста */ export const textPrimary = 'var(--text-primary, #F5F5F5F5)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness, #F6F6F6FF)'; + /** Вторичный цвет текста */ export const textSecondaryHover = 'var(--text-secondary-hover, #F5F5F5FF)'; @@ -81,6 +84,9 @@ export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active, #F5F5 /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary, #F5F5F5F5)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness, #F6F6F6FF)'; + /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #F5F5F5FF)'; @@ -153,6 +159,9 @@ export const onLightTextPrimaryActive = 'var(--on-light-text-primary-active, #17 /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary, #171717F5)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness, #2525F6FF)'; + /** Вторичный цвет текста на светлом фоне */ export const onLightTextSecondaryHover = 'var(--on-light-text-secondary-hover, #171717FF)'; @@ -225,6 +234,9 @@ export const inverseTextPrimaryActive = 'var(--inverse-text-primary-active, #171 /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary, #171717F5)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness, #2525F6FF)'; + /** Инвертированный вторичный цвет текста */ export const inverseTextSecondaryHover = 'var(--inverse-text-secondary-hover, #171717FF)'; @@ -297,6 +309,9 @@ export const surfaceSolidPrimaryActive = 'var(--surface-solid-primary-active, #1 /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности/контрола */ export const surfaceSolidSecondaryHover = 'var(--surface-solid-secondary-hover, #303030FF)'; @@ -324,6 +339,9 @@ export const surfaceSolidCardActive = 'var(--surface-solid-card-active, #121212F /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card, #171717)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness, #252525FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию */ export const surfaceSolidDefaultHover = 'var(--surface-solid-default-hover, #FFFFFFFF)'; @@ -378,6 +396,9 @@ export const surfaceTransparentCardActive = 'var(--surface-transparent-card-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card, #FFFFFF0F)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness, #FFFF1DFF)'; + /** Фон поверхности/контрола без заливки */ export const surfaceClearHover = 'var(--surface-clear-hover, #00000000)'; @@ -432,6 +453,9 @@ export const onDarkSurfaceSolidPrimaryActive = 'var(--on-dark-surface-solid-prim /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности на темном фоне */ export const onDarkSurfaceSolidSecondaryHover = 'var(--on-dark-surface-solid-secondary-hover, #303030FF)'; @@ -459,6 +483,9 @@ export const onDarkSurfaceSolidCardActive = 'var(--on-dark-surface-solid-card-ac /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #171717)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness, #252525FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ export const onDarkSurfaceSolidDefaultHover = 'var(--on-dark-surface-solid-default-hover, #FFFFFFFF)'; @@ -513,6 +540,9 @@ export const onDarkSurfaceTransparentCardActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #FFFFFF0F)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness, #FFFF1DFF)'; + /** Фон поверхности/контрола без заливки на темном фоне */ export const onDarkSurfaceClearHover = 'var(--on-dark-surface-clear-hover, #00000000)'; @@ -567,6 +597,9 @@ export const onLightSurfaceSolidPrimaryActive = 'var(--on-light-surface-solid-pr /** Основной непрозрачный фон поверхности на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F5F5F5)'; +/** Основной непрозрачный фон поверхности на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Вторичный непрозрачный фон поверхности на светлом фоне */ export const onLightSurfaceSolidSecondaryHover = 'var(--on-light-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -594,6 +627,9 @@ export const onLightSurfaceSolidCardActive = 'var(--on-light-surface-solid-card- /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFFFF)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness, #FFFFFFFF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ export const onLightSurfaceSolidDefaultHover = 'var(--on-light-surface-solid-default-hover, #0D0D0DFF)'; @@ -649,6 +685,9 @@ export const onLightSurfaceTransparentCardActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, #0808080F)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness, #171717FF)'; + /** Фон поверхности/контрола без заливки на светлом фоне */ export const onLightSurfaceClearHover = 'var(--on-light-surface-clear-hover, #00000000)'; @@ -703,6 +742,9 @@ export const inverseSurfaceSolidPrimaryActive = 'var(--inverse-surface-solid-pri /** Инвертированный основной непрозрачный фон поверхности */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F5F5F5)'; +/** Инвертированный основной непрозрачный фон поверхности */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Инвертированный вторичный непрозрачный фон поверхности */ export const inverseSurfaceSolidSecondaryHover = 'var(--inverse-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -730,6 +772,9 @@ export const inverseSurfaceSolidCardActive = 'var(--inverse-surface-solid-card-a /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #FFFFFFFF)'; +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness, #FFFFFFFF)'; + /** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ export const inverseSurfaceSolidDefaultHover = 'var(--inverse-surface-solid-default-hover, #0D0D0DFF)'; @@ -785,6 +830,9 @@ export const inverseSurfaceTransparentCardActive = 'var(--inverse-surface-transp /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card, #FFFFFFFF)'; +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Инвертированный фон поверхности/контрола без заливки */ export const inverseSurfaceClearHover = 'var(--inverse-surface-clear-hover, #00000000)'; @@ -833,6 +881,9 @@ export const inverseSurfaceNegative = 'var(--inverse-surface-negative, #FF293E)' /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #080808)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, #171717FF)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary, #080808)'; @@ -842,6 +893,9 @@ export const lightBackgroundPrimary = 'var(--light-background-primary, #F9F9F9)' /** Инвертированный основной фон */ export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F9F9F9)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness, #F9F9F9FF)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft, #0808088F)'; diff --git a/packages/themes/caldera-online-themes/src/tokens/index.ts b/packages/themes/caldera-online-themes/src/tokens/index.ts index 11f2e012df..f2bca95253 100644 --- a/packages/themes/caldera-online-themes/src/tokens/index.ts +++ b/packages/themes/caldera-online-themes/src/tokens/index.ts @@ -3,6 +3,9 @@ /** Основной цвет текста */ export const textPrimary = 'var(--text-primary)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness)'; + /** Основной цвет текста */ export const textPrimaryHover = 'var(--text-primary-hover)'; @@ -129,6 +132,9 @@ export const textInfoMinorActive = 'var(--text-info-minor-active)'; /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness)'; + /** Основной цвет текста на темном фоне */ export const onDarkTextPrimaryHover = 'var(--on-dark-text-primary-hover)'; @@ -255,6 +261,9 @@ export const onDarkTextInfoMinorActive = 'var(--on-dark-text-info-minor-active)' /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness)'; + /** Основной цвет текста на светлом фоне */ export const onLightTextPrimaryHover = 'var(--on-light-text-primary-hover)'; @@ -381,6 +390,9 @@ export const onLightTextInfoMinorActive = 'var(--on-light-text-info-minor-active /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness)'; + /** Инвертированный основной цвет текста */ export const inverseTextPrimaryHover = 'var(--inverse-text-primary-hover)'; @@ -507,6 +519,9 @@ export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active) /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimaryHover = 'var(--surface-solid-primary-hover)'; @@ -534,6 +549,9 @@ export const surfaceSolidTertiaryActive = 'var(--surface-solid-tertiary-active)' /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness)'; + /** Основной фон для карточек */ export const surfaceSolidCardHover = 'var(--surface-solid-card-hover)'; @@ -588,6 +606,9 @@ export const surfaceTransparentDeepActive = 'var(--surface-transparent-deep-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек */ export const surfaceTransparentCardHover = 'var(--surface-transparent-card-hover)'; @@ -741,6 +762,9 @@ export const surfaceTransparentInfoActive = 'var(--surface-transparent-info-acti /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimaryHover = 'var(--on-dark-surface-solid-primary-hover)'; @@ -768,6 +792,9 @@ export const onDarkSurfaceSolidTertiaryActive = 'var(--on-dark-surface-solid-ter /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness)'; + /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCardHover = 'var(--on-dark-surface-solid-card-hover)'; @@ -822,6 +849,9 @@ export const onDarkSurfaceTransparentDeepActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCardHover = 'var(--on-dark-surface-transparent-card-hover)'; @@ -975,6 +1005,9 @@ export const onDarkSurfaceTransparentInfoActive = 'var(--on-dark-surface-transpa /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimaryHover = 'var(--on-light-surface-solid-primary-hover)'; @@ -1002,6 +1035,9 @@ export const onLightSurfaceSolidTertiaryActive = 'var(--on-light-surface-solid-t /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness)'; + /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCardHover = 'var(--on-light-surface-solid-card-hover)'; @@ -1056,6 +1092,9 @@ export const onLightSurfaceTransparentDeepActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCardHover = 'var(--on-light-surface-transparent-card-hover)'; @@ -1209,6 +1248,9 @@ export const onLightSurfaceTransparentInfoActive = 'var(--on-light-surface-trans /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary)'; +/** Инвертированный основной непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness)'; + /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimaryHover = 'var(--inverse-surface-solid-primary-hover)'; @@ -1236,6 +1278,9 @@ export const inverseSurfaceSolidTertiaryActive = 'var(--inverse-surface-solid-te /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card)'; +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness)'; + /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCardHover = 'var(--inverse-surface-solid-card-hover)'; @@ -1290,6 +1335,9 @@ export const inverseSurfaceTransparentDeepActive = 'var(--inverse-surface-transp /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card)'; +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness)'; + /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCardHover = 'var(--inverse-surface-transparent-card-hover)'; @@ -1443,6 +1491,9 @@ export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transp /** Основной фон */ export const backgroundPrimary = 'var(--background-primary)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary)'; @@ -1452,6 +1503,9 @@ export const lightBackgroundPrimary = 'var(--light-background-primary)'; /** Инвертированный основной фон */ export const inverseBackgroundPrimary = 'var(--inverse-background-primary)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft)'; diff --git a/packages/themes/flamingo-themes/src/css/flamingo.module.css b/packages/themes/flamingo-themes/src/css/flamingo.module.css index 123c7e9b2f..04f746b4f6 100644 --- a/packages/themes/flamingo-themes/src/css/flamingo.module.css +++ b/packages/themes/flamingo-themes/src/css/flamingo.module.css @@ -4,6 +4,7 @@ --text-primary-hover: #CCCCCCFF; --text-primary-active: #E6E6E6FF; --text-primary: #FFFFFFFF; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #3D3D3DFF; --text-secondary: #B3B3B3; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #CCCCCCFF; --on-dark-text-primary-active: #E6E6E6FF; --on-dark-text-primary: #FFFFFFFF; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #3D3D3DFF; --on-dark-text-secondary: #B3B3B3; @@ -37,6 +39,7 @@ --on-light-text-primary-hover: #FFFFFFFF; --on-light-text-primary-active: #ADADADFF; --on-light-text-primary: #262626; + --on-light-text-primary-brightness: #333333FF; --on-light-text-secondary-hover: #FFFFFFFF; --on-light-text-secondary-active: #8C8C8CFF; --on-light-text-secondary: #4E4E4E; @@ -46,6 +49,7 @@ --inverse-text-primary-hover: #FFFFFFFF; --inverse-text-primary-active: #ADADADFF; --inverse-text-primary: #262626; + --inverse-text-primary-brightness: #333333FF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #8C8C8CFF; --inverse-text-secondary: #4E4E4E; @@ -70,6 +74,7 @@ --surface-solid-primary-hover: #303030FF; --surface-solid-primary-active: #212121FF; --surface-solid-primary: #262626; + --surface-solid-primary-brightness: #333333FF; --surface-solid-secondary-hover: #404040FF; --surface-solid-secondary-active: #303030FF; --surface-solid-secondary: #363636; @@ -79,6 +84,7 @@ --surface-solid-card-hover: #303030FF; --surface-solid-card-active: #212121FF; --surface-solid-card: #262626; + --surface-solid-card-brightness: #333333FF; --surface-solid-default-hover: #0D0D0DFF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -136,6 +142,7 @@ --on-dark-surface-solid-primary-hover: #FAFAFAFF; --on-dark-surface-solid-primary-active: #F0F0F0FF; --on-dark-surface-solid-primary: #F5F5F5; + --on-dark-surface-solid-primary-brightness: #F6F6F6FF; --on-dark-surface-solid-secondary-hover: #F7F7F7FF; --on-dark-surface-solid-secondary-active: #E8E8E8FF; --on-dark-surface-solid-secondary: #ECECEC; @@ -157,9 +164,11 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-solid-primary-hover: #303030FF; --on-light-surface-solid-primary-active: #212121FF; --on-light-surface-solid-primary: #262626; + --on-light-surface-solid-primary-brightness: #333333FF; --on-light-surface-solid-secondary-hover: #404040FF; --on-light-surface-solid-secondary-active: #303030FF; --on-light-surface-solid-secondary: #363636; @@ -169,6 +178,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -176,6 +186,7 @@ --inverse-surface-solid-default-active: #FFFFFFFF; --inverse-surface-solid-default: #FFFFFFFF; --background-primary: #080808; + --background-primary-brightness: #171717FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080833; @@ -284,6 +295,7 @@ --text-primary-hover: #CCCCCCFF; --text-primary-active: #E6E6E6FF; --text-primary: #FFFFFFFF; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #3D3D3DFF; --text-secondary: #B3B3B3; @@ -308,6 +320,7 @@ --on-dark-text-primary-hover: #CCCCCCFF; --on-dark-text-primary-active: #E6E6E6FF; --on-dark-text-primary: #FFFFFFFF; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #3D3D3DFF; --on-dark-text-secondary: #B3B3B3; @@ -317,6 +330,7 @@ --on-light-text-primary-hover: #FFFFFFFF; --on-light-text-primary-active: #ADADADFF; --on-light-text-primary: #262626; + --on-light-text-primary-brightness: #333333FF; --on-light-text-secondary-hover: #FFFFFFFF; --on-light-text-secondary-active: #8C8C8CFF; --on-light-text-secondary: #4E4E4E; @@ -326,6 +340,7 @@ --inverse-text-primary-hover: #FFFFFFFF; --inverse-text-primary-active: #ADADADFF; --inverse-text-primary: #262626; + --inverse-text-primary-brightness: #333333FF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #8C8C8CFF; --inverse-text-secondary: #4E4E4E; @@ -350,6 +365,7 @@ --surface-solid-primary-hover: #303030FF; --surface-solid-primary-active: #212121FF; --surface-solid-primary: #262626; + --surface-solid-primary-brightness: #333333FF; --surface-solid-secondary-hover: #404040FF; --surface-solid-secondary-active: #303030FF; --surface-solid-secondary: #363636; @@ -359,6 +375,7 @@ --surface-solid-card-hover: #303030FF; --surface-solid-card-active: #212121FF; --surface-solid-card: #262626; + --surface-solid-card-brightness: #333333FF; --surface-solid-default-hover: #0D0D0DFF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -416,6 +433,7 @@ --on-dark-surface-solid-primary-hover: #FAFAFAFF; --on-dark-surface-solid-primary-active: #F0F0F0FF; --on-dark-surface-solid-primary: #F5F5F5; + --on-dark-surface-solid-primary-brightness: #F6F6F6FF; --on-dark-surface-solid-secondary-hover: #F7F7F7FF; --on-dark-surface-solid-secondary-active: #E8E8E8FF; --on-dark-surface-solid-secondary: #ECECEC; @@ -437,9 +455,11 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-solid-primary-hover: #303030FF; --on-light-surface-solid-primary-active: #212121FF; --on-light-surface-solid-primary: #262626; + --on-light-surface-solid-primary-brightness: #333333FF; --on-light-surface-solid-secondary-hover: #404040FF; --on-light-surface-solid-secondary-active: #303030FF; --on-light-surface-solid-secondary: #363636; @@ -449,6 +469,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -456,6 +477,7 @@ --inverse-surface-solid-default-active: #FFFFFFFF; --inverse-surface-solid-default: #FFFFFFFF; --background-primary: #080808; + --background-primary-brightness: #171717FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080833; diff --git a/packages/themes/flamingo-themes/src/css/flamingo__dark.css b/packages/themes/flamingo-themes/src/css/flamingo__dark.css index 5e036e870c..9c94c83fcb 100644 --- a/packages/themes/flamingo-themes/src/css/flamingo__dark.css +++ b/packages/themes/flamingo-themes/src/css/flamingo__dark.css @@ -4,6 +4,7 @@ --text-primary-hover: #CCCCCCFF; --text-primary-active: #E6E6E6FF; --text-primary: #FFFFFFFF; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #3D3D3DFF; --text-secondary: #B3B3B3; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #CCCCCCFF; --on-dark-text-primary-active: #E6E6E6FF; --on-dark-text-primary: #FFFFFFFF; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #3D3D3DFF; --on-dark-text-secondary: #B3B3B3; @@ -37,6 +39,7 @@ --on-light-text-primary-hover: #FFFFFFFF; --on-light-text-primary-active: #ADADADFF; --on-light-text-primary: #262626; + --on-light-text-primary-brightness: #333333FF; --on-light-text-secondary-hover: #FFFFFFFF; --on-light-text-secondary-active: #8C8C8CFF; --on-light-text-secondary: #4E4E4E; @@ -46,6 +49,7 @@ --inverse-text-primary-hover: #FFFFFFFF; --inverse-text-primary-active: #ADADADFF; --inverse-text-primary: #262626; + --inverse-text-primary-brightness: #333333FF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #8C8C8CFF; --inverse-text-secondary: #4E4E4E; @@ -70,6 +74,7 @@ --surface-solid-primary-hover: #303030FF; --surface-solid-primary-active: #212121FF; --surface-solid-primary: #262626; + --surface-solid-primary-brightness: #333333FF; --surface-solid-secondary-hover: #404040FF; --surface-solid-secondary-active: #303030FF; --surface-solid-secondary: #363636; @@ -79,6 +84,7 @@ --surface-solid-card-hover: #303030FF; --surface-solid-card-active: #212121FF; --surface-solid-card: #262626; + --surface-solid-card-brightness: #333333FF; --surface-solid-default-hover: #0D0D0DFF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -136,6 +142,7 @@ --on-dark-surface-solid-primary-hover: #FAFAFAFF; --on-dark-surface-solid-primary-active: #F0F0F0FF; --on-dark-surface-solid-primary: #F5F5F5; + --on-dark-surface-solid-primary-brightness: #F6F6F6FF; --on-dark-surface-solid-secondary-hover: #F7F7F7FF; --on-dark-surface-solid-secondary-active: #E8E8E8FF; --on-dark-surface-solid-secondary: #ECECEC; @@ -157,9 +164,11 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-solid-primary-hover: #303030FF; --on-light-surface-solid-primary-active: #212121FF; --on-light-surface-solid-primary: #262626; + --on-light-surface-solid-primary-brightness: #333333FF; --on-light-surface-solid-secondary-hover: #404040FF; --on-light-surface-solid-secondary-active: #303030FF; --on-light-surface-solid-secondary: #363636; @@ -169,6 +178,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -176,6 +186,7 @@ --inverse-surface-solid-default-active: #FFFFFFFF; --inverse-surface-solid-default: #FFFFFFFF; --background-primary: #080808; + --background-primary-brightness: #171717FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080833; diff --git a/packages/themes/flamingo-themes/src/css/flamingo__light.css b/packages/themes/flamingo-themes/src/css/flamingo__light.css index 2825e3942e..c246b600d6 100644 --- a/packages/themes/flamingo-themes/src/css/flamingo__light.css +++ b/packages/themes/flamingo-themes/src/css/flamingo__light.css @@ -4,6 +4,7 @@ --text-primary-hover: #787878FF; --text-primary-active: #4F4F4FFF; --text-primary: #262626; + --text-primary-brightness: #333333FF; --text-secondary-hover: #000000FF; --text-secondary-active: #404040FF; --text-secondary: #4E4E4E; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #000000FF; --on-dark-text-primary-active: #CCCCCCFF; --on-dark-text-primary: #FFFFFFFF; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #000000FF; --on-dark-text-secondary-active: #8F8F8FFF; --on-dark-text-secondary: #B3B3B3; @@ -37,6 +39,7 @@ --on-light-text-primary-hover: #787878FF; --on-light-text-primary-active: #4F4F4FFF; --on-light-text-primary: #262626; + --on-light-text-primary-brightness: #333333FF; --on-light-text-secondary-hover: #000000FF; --on-light-text-secondary-active: #404040FF; --on-light-text-secondary: #4E4E4E; @@ -46,6 +49,7 @@ --inverse-text-primary-hover: #000000FF; --inverse-text-primary-active: #CCCCCCFF; --inverse-text-primary: #FFFFFFFF; + --inverse-text-primary-brightness: #FFFFFFFF; --inverse-text-secondary-hover: #000000FF; --inverse-text-secondary-active: #8F8F8FFF; --inverse-text-secondary: #B3B3B3; @@ -70,6 +74,7 @@ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -79,6 +84,7 @@ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #0F0F1DFF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -136,6 +142,7 @@ --on-dark-surface-solid-primary-hover: #FAFAFAFF; --on-dark-surface-solid-primary-active: #F0F0F0FF; --on-dark-surface-solid-primary: #F5F5F5; + --on-dark-surface-solid-primary-brightness: #F6F6F6FF; --on-dark-surface-solid-secondary-hover: #F7F7F7FF; --on-dark-surface-solid-secondary-active: #E8E8E8FF; --on-dark-surface-solid-secondary: #ECECEC; @@ -157,9 +164,11 @@ --on-dark-surface-transparent-card-hover: #FFFFFF05; --on-dark-surface-transparent-card-active: #FFFFFF1A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-solid-primary-hover: #3B3B3BFF; --on-light-surface-solid-primary-active: #1C1C1CFF; --on-light-surface-solid-primary: #262626; + --on-light-surface-solid-primary-brightness: #333333FF; --on-light-surface-solid-secondary-hover: #4A4A4AFF; --on-light-surface-solid-secondary-active: #2B2B2BFF; --on-light-surface-solid-secondary: #363636; @@ -169,6 +178,7 @@ --inverse-surface-solid-primary-hover: #3B3B3BFF; --inverse-surface-solid-primary-active: #1C1C1CFF; --inverse-surface-solid-primary: #262626; + --inverse-surface-solid-primary-brightness: #333333FF; --inverse-surface-solid-secondary-hover: #4A4A4AFF; --inverse-surface-solid-secondary-active: #2B2B2BFF; --inverse-surface-solid-secondary: #363636; @@ -176,6 +186,7 @@ --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F933; diff --git a/packages/themes/flamingo-themes/src/themes/flamingo__dark.ts b/packages/themes/flamingo-themes/src/themes/flamingo__dark.ts index 38726b145d..4e788bdca0 100644 --- a/packages/themes/flamingo-themes/src/themes/flamingo__dark.ts +++ b/packages/themes/flamingo-themes/src/themes/flamingo__dark.ts @@ -6,6 +6,7 @@ export const flamingo__dark = ([ --text-primary-hover: #CCCCCCFF; --text-primary-active: #E6E6E6FF; --text-primary: #FFFFFFFF; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #3D3D3DFF; --text-secondary: #B3B3B3; @@ -30,6 +31,7 @@ export const flamingo__dark = ([ --on-dark-text-primary-hover: #CCCCCCFF; --on-dark-text-primary-active: #E6E6E6FF; --on-dark-text-primary: #FFFFFFFF; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #3D3D3DFF; --on-dark-text-secondary: #B3B3B3; @@ -39,6 +41,7 @@ export const flamingo__dark = ([ --on-light-text-primary-hover: #FFFFFFFF; --on-light-text-primary-active: #ADADADFF; --on-light-text-primary: #262626; + --on-light-text-primary-brightness: #333333FF; --on-light-text-secondary-hover: #FFFFFFFF; --on-light-text-secondary-active: #8C8C8CFF; --on-light-text-secondary: #4E4E4E; @@ -48,6 +51,7 @@ export const flamingo__dark = ([ --inverse-text-primary-hover: #FFFFFFFF; --inverse-text-primary-active: #ADADADFF; --inverse-text-primary: #262626; + --inverse-text-primary-brightness: #333333FF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #8C8C8CFF; --inverse-text-secondary: #4E4E4E; @@ -72,6 +76,7 @@ export const flamingo__dark = ([ --surface-solid-primary-hover: #303030FF; --surface-solid-primary-active: #212121FF; --surface-solid-primary: #262626; + --surface-solid-primary-brightness: #333333FF; --surface-solid-secondary-hover: #404040FF; --surface-solid-secondary-active: #303030FF; --surface-solid-secondary: #363636; @@ -81,6 +86,7 @@ export const flamingo__dark = ([ --surface-solid-card-hover: #303030FF; --surface-solid-card-active: #212121FF; --surface-solid-card: #262626; + --surface-solid-card-brightness: #333333FF; --surface-solid-default-hover: #0D0D0DFF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -138,6 +144,7 @@ export const flamingo__dark = ([ --on-dark-surface-solid-primary-hover: #FAFAFAFF; --on-dark-surface-solid-primary-active: #F0F0F0FF; --on-dark-surface-solid-primary: #F5F5F5; + --on-dark-surface-solid-primary-brightness: #F6F6F6FF; --on-dark-surface-solid-secondary-hover: #F7F7F7FF; --on-dark-surface-solid-secondary-active: #E8E8E8FF; --on-dark-surface-solid-secondary: #ECECEC; @@ -159,9 +166,11 @@ export const flamingo__dark = ([ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-solid-primary-hover: #303030FF; --on-light-surface-solid-primary-active: #212121FF; --on-light-surface-solid-primary: #262626; + --on-light-surface-solid-primary-brightness: #333333FF; --on-light-surface-solid-secondary-hover: #404040FF; --on-light-surface-solid-secondary-active: #303030FF; --on-light-surface-solid-secondary: #363636; @@ -171,6 +180,7 @@ export const flamingo__dark = ([ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -178,6 +188,7 @@ export const flamingo__dark = ([ --inverse-surface-solid-default-active: #FFFFFFFF; --inverse-surface-solid-default: #FFFFFFFF; --background-primary: #080808; + --background-primary-brightness: #171717FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080833; diff --git a/packages/themes/flamingo-themes/src/themes/flamingo__light.ts b/packages/themes/flamingo-themes/src/themes/flamingo__light.ts index ef8d2c9226..9ab3df3d46 100644 --- a/packages/themes/flamingo-themes/src/themes/flamingo__light.ts +++ b/packages/themes/flamingo-themes/src/themes/flamingo__light.ts @@ -6,6 +6,7 @@ export const flamingo__light = ([ --text-primary-hover: #787878FF; --text-primary-active: #4F4F4FFF; --text-primary: #262626; + --text-primary-brightness: #333333FF; --text-secondary-hover: #000000FF; --text-secondary-active: #404040FF; --text-secondary: #4E4E4E; @@ -30,6 +31,7 @@ export const flamingo__light = ([ --on-dark-text-primary-hover: #000000FF; --on-dark-text-primary-active: #CCCCCCFF; --on-dark-text-primary: #FFFFFFFF; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #000000FF; --on-dark-text-secondary-active: #8F8F8FFF; --on-dark-text-secondary: #B3B3B3; @@ -39,6 +41,7 @@ export const flamingo__light = ([ --on-light-text-primary-hover: #787878FF; --on-light-text-primary-active: #4F4F4FFF; --on-light-text-primary: #262626; + --on-light-text-primary-brightness: #333333FF; --on-light-text-secondary-hover: #000000FF; --on-light-text-secondary-active: #404040FF; --on-light-text-secondary: #4E4E4E; @@ -48,6 +51,7 @@ export const flamingo__light = ([ --inverse-text-primary-hover: #000000FF; --inverse-text-primary-active: #CCCCCCFF; --inverse-text-primary: #FFFFFFFF; + --inverse-text-primary-brightness: #FFFFFFFF; --inverse-text-secondary-hover: #000000FF; --inverse-text-secondary-active: #8F8F8FFF; --inverse-text-secondary: #B3B3B3; @@ -72,6 +76,7 @@ export const flamingo__light = ([ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -81,6 +86,7 @@ export const flamingo__light = ([ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #0F0F1DFF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -138,6 +144,7 @@ export const flamingo__light = ([ --on-dark-surface-solid-primary-hover: #FAFAFAFF; --on-dark-surface-solid-primary-active: #F0F0F0FF; --on-dark-surface-solid-primary: #F5F5F5; + --on-dark-surface-solid-primary-brightness: #F6F6F6FF; --on-dark-surface-solid-secondary-hover: #F7F7F7FF; --on-dark-surface-solid-secondary-active: #E8E8E8FF; --on-dark-surface-solid-secondary: #ECECEC; @@ -159,9 +166,11 @@ export const flamingo__light = ([ --on-dark-surface-transparent-card-hover: #FFFFFF05; --on-dark-surface-transparent-card-active: #FFFFFF1A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-solid-primary-hover: #3B3B3BFF; --on-light-surface-solid-primary-active: #1C1C1CFF; --on-light-surface-solid-primary: #262626; + --on-light-surface-solid-primary-brightness: #333333FF; --on-light-surface-solid-secondary-hover: #4A4A4AFF; --on-light-surface-solid-secondary-active: #2B2B2BFF; --on-light-surface-solid-secondary: #363636; @@ -171,6 +180,7 @@ export const flamingo__light = ([ --inverse-surface-solid-primary-hover: #3B3B3BFF; --inverse-surface-solid-primary-active: #1C1C1CFF; --inverse-surface-solid-primary: #262626; + --inverse-surface-solid-primary-brightness: #333333FF; --inverse-surface-solid-secondary-hover: #4A4A4AFF; --inverse-surface-solid-secondary-active: #2B2B2BFF; --inverse-surface-solid-secondary: #363636; @@ -178,6 +188,7 @@ export const flamingo__light = ([ --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F933; diff --git a/packages/themes/flamingo-themes/src/tokens/flamingo/index.ts b/packages/themes/flamingo-themes/src/tokens/flamingo/index.ts index 7699385d66..33f4f40df1 100644 --- a/packages/themes/flamingo-themes/src/tokens/flamingo/index.ts +++ b/packages/themes/flamingo-themes/src/tokens/flamingo/index.ts @@ -9,6 +9,9 @@ export const textPrimaryActive = 'var(--text-primary-active, #E6E6E6FF)'; /** Основной цвет текста */ export const textPrimary = 'var(--text-primary, #FFFFFFFF)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness, #FFFFFFFF)'; + /** Вторичный цвет текста */ export const textSecondaryHover = 'var(--text-secondary-hover, #FFFFFFFF)'; @@ -81,6 +84,9 @@ export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active, #E6E6 /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary, #FFFFFFFF)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness, #FFFFFFFF)'; + /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #FFFFFFFF)'; @@ -108,6 +114,9 @@ export const onLightTextPrimaryActive = 'var(--on-light-text-primary-active, #AD /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary, #262626)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness, #333333FF)'; + /** Вторичный цвет текста на светлом фоне */ export const onLightTextSecondaryHover = 'var(--on-light-text-secondary-hover, #FFFFFFFF)'; @@ -135,6 +144,9 @@ export const inverseTextPrimaryActive = 'var(--inverse-text-primary-active, #ADA /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary, #262626)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness, #333333FF)'; + /** Инвертированный вторичный цвет текста */ export const inverseTextSecondaryHover = 'var(--inverse-text-secondary-hover, #FFFFFFFF)'; @@ -207,6 +219,9 @@ export const surfaceSolidPrimaryActive = 'var(--surface-solid-primary-active, #2 /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #262626)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness, #333333FF)'; + /** Вторичный непрозрачный фон поверхности/контрола */ export const surfaceSolidSecondaryHover = 'var(--surface-solid-secondary-hover, #404040FF)'; @@ -234,6 +249,9 @@ export const surfaceSolidCardActive = 'var(--surface-solid-card-active, #212121F /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card, #262626)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness, #333333FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию */ export const surfaceSolidDefaultHover = 'var(--surface-solid-default-hover, #0D0D0DFF)'; @@ -405,6 +423,9 @@ export const onDarkSurfaceSolidPrimaryActive = 'var(--on-dark-surface-solid-prim /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #F5F5F5)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Вторичный непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidSecondaryHover = 'var(--on-dark-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -468,6 +489,9 @@ export const onDarkSurfaceTransparentCardActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #FFFFFF0F)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimaryHover = 'var(--on-light-surface-solid-primary-hover, #303030FF)'; @@ -477,6 +501,9 @@ export const onLightSurfaceSolidPrimaryActive = 'var(--on-light-surface-solid-pr /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #262626)'; +/** Основной непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness, #333333FF)'; + /** Вторичный непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidSecondaryHover = 'var(--on-light-surface-solid-secondary-hover, #404040FF)'; @@ -504,6 +531,9 @@ export const inverseSurfaceSolidPrimaryActive = 'var(--inverse-surface-solid-pri /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F5F5F5)'; +/** Инвертированный основной непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Инвертированный вторичный непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidSecondaryHover = 'var(--inverse-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -525,6 +555,9 @@ export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default, /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #080808)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, #171717FF)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft, #0808088F)'; diff --git a/packages/themes/flamingo-themes/src/tokens/index.ts b/packages/themes/flamingo-themes/src/tokens/index.ts index 11f2e012df..f2bca95253 100644 --- a/packages/themes/flamingo-themes/src/tokens/index.ts +++ b/packages/themes/flamingo-themes/src/tokens/index.ts @@ -3,6 +3,9 @@ /** Основной цвет текста */ export const textPrimary = 'var(--text-primary)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness)'; + /** Основной цвет текста */ export const textPrimaryHover = 'var(--text-primary-hover)'; @@ -129,6 +132,9 @@ export const textInfoMinorActive = 'var(--text-info-minor-active)'; /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness)'; + /** Основной цвет текста на темном фоне */ export const onDarkTextPrimaryHover = 'var(--on-dark-text-primary-hover)'; @@ -255,6 +261,9 @@ export const onDarkTextInfoMinorActive = 'var(--on-dark-text-info-minor-active)' /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness)'; + /** Основной цвет текста на светлом фоне */ export const onLightTextPrimaryHover = 'var(--on-light-text-primary-hover)'; @@ -381,6 +390,9 @@ export const onLightTextInfoMinorActive = 'var(--on-light-text-info-minor-active /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness)'; + /** Инвертированный основной цвет текста */ export const inverseTextPrimaryHover = 'var(--inverse-text-primary-hover)'; @@ -507,6 +519,9 @@ export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active) /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimaryHover = 'var(--surface-solid-primary-hover)'; @@ -534,6 +549,9 @@ export const surfaceSolidTertiaryActive = 'var(--surface-solid-tertiary-active)' /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness)'; + /** Основной фон для карточек */ export const surfaceSolidCardHover = 'var(--surface-solid-card-hover)'; @@ -588,6 +606,9 @@ export const surfaceTransparentDeepActive = 'var(--surface-transparent-deep-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек */ export const surfaceTransparentCardHover = 'var(--surface-transparent-card-hover)'; @@ -741,6 +762,9 @@ export const surfaceTransparentInfoActive = 'var(--surface-transparent-info-acti /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimaryHover = 'var(--on-dark-surface-solid-primary-hover)'; @@ -768,6 +792,9 @@ export const onDarkSurfaceSolidTertiaryActive = 'var(--on-dark-surface-solid-ter /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness)'; + /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCardHover = 'var(--on-dark-surface-solid-card-hover)'; @@ -822,6 +849,9 @@ export const onDarkSurfaceTransparentDeepActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCardHover = 'var(--on-dark-surface-transparent-card-hover)'; @@ -975,6 +1005,9 @@ export const onDarkSurfaceTransparentInfoActive = 'var(--on-dark-surface-transpa /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimaryHover = 'var(--on-light-surface-solid-primary-hover)'; @@ -1002,6 +1035,9 @@ export const onLightSurfaceSolidTertiaryActive = 'var(--on-light-surface-solid-t /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness)'; + /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCardHover = 'var(--on-light-surface-solid-card-hover)'; @@ -1056,6 +1092,9 @@ export const onLightSurfaceTransparentDeepActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCardHover = 'var(--on-light-surface-transparent-card-hover)'; @@ -1209,6 +1248,9 @@ export const onLightSurfaceTransparentInfoActive = 'var(--on-light-surface-trans /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary)'; +/** Инвертированный основной непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness)'; + /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimaryHover = 'var(--inverse-surface-solid-primary-hover)'; @@ -1236,6 +1278,9 @@ export const inverseSurfaceSolidTertiaryActive = 'var(--inverse-surface-solid-te /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card)'; +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness)'; + /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCardHover = 'var(--inverse-surface-solid-card-hover)'; @@ -1290,6 +1335,9 @@ export const inverseSurfaceTransparentDeepActive = 'var(--inverse-surface-transp /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card)'; +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness)'; + /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCardHover = 'var(--inverse-surface-transparent-card-hover)'; @@ -1443,6 +1491,9 @@ export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transp /** Основной фон */ export const backgroundPrimary = 'var(--background-primary)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary)'; @@ -1452,6 +1503,9 @@ export const lightBackgroundPrimary = 'var(--light-background-primary)'; /** Инвертированный основной фон */ export const inverseBackgroundPrimary = 'var(--inverse-background-primary)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft)'; 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 d75b8a9486..37cbb4ba71 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c.module.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c.module.css @@ -4,6 +4,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -88,6 +92,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -97,6 +102,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -115,6 +121,7 @@ --surface-transparent-card-hover: #FFFFFF3D; --surface-transparent-card-active: #FFFFFF0F; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF3D; --on-dark-surface-transparent-card-active: #FFFFFF0F; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #5D95FDFF; --on-dark-surface-accent-active: #357BFDFF; --on-dark-surface-accent: #3F81FD; @@ -187,6 +197,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -196,6 +207,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -214,6 +226,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #4886F9FF; --on-light-surface-accent-active: #206CF8FF; --on-light-surface-accent: #2A72F8; @@ -227,6 +240,7 @@ --on-light-surface-negative-active: #F31228FF; --on-light-surface-negative: #F31B31; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #0808088F; @@ -240,39 +254,6 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } .dark { @@ -324,6 +305,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -348,6 +330,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -372,6 +355,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -396,6 +380,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -408,6 +393,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -417,6 +403,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -435,6 +422,7 @@ --surface-transparent-card-hover: #FFFFFF3D; --surface-transparent-card-active: #FFFFFF0F; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -465,6 +453,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -474,6 +463,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -492,6 +482,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF3D; --on-dark-surface-transparent-card-active: #FFFFFF0F; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #5D95FDFF; --on-dark-surface-accent-active: #357BFDFF; --on-dark-surface-accent: #3F81FD; @@ -507,6 +498,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -516,6 +508,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -534,6 +527,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #4886F9FF; --on-light-surface-accent-active: #206CF8FF; --on-light-surface-accent: #2A72F8; @@ -547,6 +541,7 @@ --on-light-surface-negative-active: #F31228FF; --on-light-surface-negative: #F31B31; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #0808088F; @@ -560,39 +555,6 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } .light { 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 880df204f7..7bc1f803fd 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c__dark.css @@ -4,6 +4,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -88,6 +92,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -97,6 +102,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -115,6 +121,7 @@ --surface-transparent-card-hover: #FFFFFF3D; --surface-transparent-card-active: #FFFFFF0F; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF3D; --on-dark-surface-transparent-card-active: #FFFFFF0F; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #5D95FDFF; --on-dark-surface-accent-active: #357BFDFF; --on-dark-surface-accent: #3F81FD; @@ -187,6 +197,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -196,6 +207,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -214,6 +226,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #4886F9FF; --on-light-surface-accent-active: #206CF8FF; --on-light-surface-accent: #2A72F8; @@ -227,6 +240,7 @@ --on-light-surface-negative-active: #F31228FF; --on-light-surface-negative: #F31B31; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #0808088F; @@ -240,39 +254,6 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } :root { 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 c84a589aa6..0adeb4c515 100644 --- a/packages/themes/plasma-themes/src/css/plasma_b2c__light.css +++ b/packages/themes/plasma-themes/src/css/plasma_b2c__light.css @@ -4,6 +4,7 @@ --text-primary-hover: #08080893; --text-primary-active: #080808C4; --text-primary: #080808F5; + --text-primary-brightness: #171717FF; --text-secondary-hover: #080808FF; --text-secondary-active: #080808AB; --text-secondary: #0808088F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-primary: #FFFFFFF5; + --inverse-text-primary-brightness: #FFFFFFFF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #FFFFFFAB; --inverse-text-secondary: #FFFFFF8F; @@ -88,6 +92,7 @@ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -97,6 +102,7 @@ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -115,6 +121,7 @@ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF0A; --on-dark-surface-transparent-card-active: #FFFFFF29; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #689CFDFF; --on-dark-surface-accent-active: #2B74FDFF; --on-dark-surface-accent: #3F81FD; @@ -187,6 +197,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -196,6 +207,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -214,6 +226,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #528DFAFF; --on-light-surface-accent-active: #1665F8FF; --on-light-surface-accent: #2A72F8; @@ -227,6 +240,7 @@ --on-light-surface-negative-active: #ED0C23FF; --on-light-surface-negative: #F31B31; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #F9F9F98F; @@ -240,39 +254,6 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } :root { 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 d75b8a9486..37cbb4ba71 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web.module.css +++ b/packages/themes/plasma-themes/src/css/plasma_web.module.css @@ -4,6 +4,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -88,6 +92,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -97,6 +102,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -115,6 +121,7 @@ --surface-transparent-card-hover: #FFFFFF3D; --surface-transparent-card-active: #FFFFFF0F; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF3D; --on-dark-surface-transparent-card-active: #FFFFFF0F; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #5D95FDFF; --on-dark-surface-accent-active: #357BFDFF; --on-dark-surface-accent: #3F81FD; @@ -187,6 +197,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -196,6 +207,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -214,6 +226,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #4886F9FF; --on-light-surface-accent-active: #206CF8FF; --on-light-surface-accent: #2A72F8; @@ -227,6 +240,7 @@ --on-light-surface-negative-active: #F31228FF; --on-light-surface-negative: #F31B31; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #0808088F; @@ -240,39 +254,6 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } .dark { @@ -324,6 +305,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -348,6 +330,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -372,6 +355,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -396,6 +380,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -408,6 +393,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -417,6 +403,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -435,6 +422,7 @@ --surface-transparent-card-hover: #FFFFFF3D; --surface-transparent-card-active: #FFFFFF0F; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -465,6 +453,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -474,6 +463,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -492,6 +482,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF3D; --on-dark-surface-transparent-card-active: #FFFFFF0F; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #5D95FDFF; --on-dark-surface-accent-active: #357BFDFF; --on-dark-surface-accent: #3F81FD; @@ -507,6 +498,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -516,6 +508,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -534,6 +527,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #4886F9FF; --on-light-surface-accent-active: #206CF8FF; --on-light-surface-accent: #2A72F8; @@ -547,6 +541,7 @@ --on-light-surface-negative-active: #F31228FF; --on-light-surface-negative: #F31B31; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #0808088F; @@ -560,39 +555,6 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } .light { 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 880df204f7..7bc1f803fd 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web__dark.css +++ b/packages/themes/plasma-themes/src/css/plasma_web__dark.css @@ -4,6 +4,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -88,6 +92,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -97,6 +102,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -115,6 +121,7 @@ --surface-transparent-card-hover: #FFFFFF3D; --surface-transparent-card-active: #FFFFFF0F; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF3D; --on-dark-surface-transparent-card-active: #FFFFFF0F; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #5D95FDFF; --on-dark-surface-accent-active: #357BFDFF; --on-dark-surface-accent: #3F81FD; @@ -187,6 +197,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -196,6 +207,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -214,6 +226,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #4886F9FF; --on-light-surface-accent-active: #206CF8FF; --on-light-surface-accent: #2A72F8; @@ -227,6 +240,7 @@ --on-light-surface-negative-active: #F31228FF; --on-light-surface-negative: #F31B31; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #0808088F; @@ -240,39 +254,6 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } :root { 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 c84a589aa6..0adeb4c515 100644 --- a/packages/themes/plasma-themes/src/css/plasma_web__light.css +++ b/packages/themes/plasma-themes/src/css/plasma_web__light.css @@ -4,6 +4,7 @@ --text-primary-hover: #08080893; --text-primary-active: #080808C4; --text-primary: #080808F5; + --text-primary-brightness: #171717FF; --text-secondary-hover: #080808FF; --text-secondary-active: #080808AB; --text-secondary: #0808088F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-primary: #FFFFFFF5; + --inverse-text-primary-brightness: #FFFFFFFF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #FFFFFFAB; --inverse-text-secondary: #FFFFFF8F; @@ -88,6 +92,7 @@ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -97,6 +102,7 @@ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -115,6 +121,7 @@ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -145,6 +152,7 @@ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -154,6 +162,7 @@ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -172,6 +181,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF0A; --on-dark-surface-transparent-card-active: #FFFFFF29; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #689CFDFF; --on-dark-surface-accent-active: #2B74FDFF; --on-dark-surface-accent: #3F81FD; @@ -187,6 +197,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -196,6 +207,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -214,6 +226,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #528DFAFF; --on-light-surface-accent-active: #1665F8FF; --on-light-surface-accent: #2A72F8; @@ -227,6 +240,7 @@ --on-light-surface-negative-active: #ED0C23FF; --on-light-surface-negative: #F31B31; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #F9F9F98F; @@ -240,39 +254,6 @@ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/css/stylesSalute.module.css b/packages/themes/plasma-themes/src/css/stylesSalute.module.css index 97276d7d0f..611557e8c5 100644 --- a/packages/themes/plasma-themes/src/css/stylesSalute.module.css +++ b/packages/themes/plasma-themes/src/css/stylesSalute.module.css @@ -4,6 +4,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFF6FF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -40,6 +41,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFF6FF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -76,6 +78,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -112,6 +115,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -124,6 +128,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -133,6 +138,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -148,6 +154,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -186,6 +193,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -195,6 +203,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -210,6 +219,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-positive-hover: #1DAF37FF; --on-dark-surface-positive-active: #18952FFF; --on-dark-surface-positive: #1A9E32; @@ -237,6 +247,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -246,6 +257,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -264,6 +276,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-positive-hover: #1DAF37FF; --on-light-surface-positive-active: #18952FFF; --on-light-surface-positive: #1A9E32; @@ -289,6 +302,7 @@ --on-light-surface-accent-main-active: #18952FFF; --on-light-surface-accent-main: #1A9E32; --background-primary: #000000FF; + --background-primary-brightness: #0F0FFFFF; --background-secondary: #171717; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; @@ -389,6 +403,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFF6FF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -425,6 +440,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFF6FF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -461,6 +477,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -497,6 +514,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -509,6 +527,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -518,6 +537,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -533,6 +553,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -571,6 +592,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -580,6 +602,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -595,6 +618,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-positive-hover: #1DAF37FF; --on-dark-surface-positive-active: #18952FFF; --on-dark-surface-positive: #1A9E32; @@ -622,6 +646,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -631,6 +656,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -649,6 +675,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-positive-hover: #1DAF37FF; --on-light-surface-positive-active: #18952FFF; --on-light-surface-positive: #1A9E32; @@ -674,6 +701,7 @@ --on-light-surface-accent-main-active: #18952FFF; --on-light-surface-accent-main: #1A9E32; --background-primary: #000000FF; + --background-primary-brightness: #0F0FFFFF; --background-secondary: #171717; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; diff --git a/packages/themes/plasma-themes/src/css/stylesSalute__dark.css b/packages/themes/plasma-themes/src/css/stylesSalute__dark.css index 8c6bcfe41d..aec96158ab 100644 --- a/packages/themes/plasma-themes/src/css/stylesSalute__dark.css +++ b/packages/themes/plasma-themes/src/css/stylesSalute__dark.css @@ -4,6 +4,7 @@ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFF6FF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -40,6 +41,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFF6FF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -76,6 +78,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -112,6 +115,7 @@ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -124,6 +128,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -133,6 +138,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -148,6 +154,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -186,6 +193,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -195,6 +203,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -210,6 +219,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-positive-hover: #1DAF37FF; --on-dark-surface-positive-active: #18952FFF; --on-dark-surface-positive: #1A9E32; @@ -237,6 +247,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -246,6 +257,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -264,6 +276,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-positive-hover: #1DAF37FF; --on-light-surface-positive-active: #18952FFF; --on-light-surface-positive: #1A9E32; @@ -289,6 +302,7 @@ --on-light-surface-accent-main-active: #18952FFF; --on-light-surface-accent-main: #1A9E32; --background-primary: #000000FF; + --background-primary-brightness: #0F0FFFFF; --background-secondary: #171717; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; diff --git a/packages/themes/plasma-themes/src/css/stylesSalute__light.css b/packages/themes/plasma-themes/src/css/stylesSalute__light.css index 7180d368fb..e27ea38208 100644 --- a/packages/themes/plasma-themes/src/css/stylesSalute__light.css +++ b/packages/themes/plasma-themes/src/css/stylesSalute__light.css @@ -4,6 +4,7 @@ --text-primary-hover: #08080893; --text-primary-active: #080808C4; --text-primary: #080808F5; + --text-primary-brightness: #171717FF; --text-secondary-hover: #080808FF; --text-secondary-active: #080808AB; --text-secondary: #0808088F; @@ -40,6 +41,7 @@ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFF6FF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -76,6 +78,7 @@ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -112,6 +115,7 @@ --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-primary: #FFFFFFF5; + --inverse-text-primary-brightness: #FFFFF6FF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #FFFFFFAB; --inverse-text-secondary: #FFFFFF8F; @@ -124,6 +128,7 @@ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -133,6 +138,7 @@ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -148,6 +154,7 @@ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -186,6 +193,7 @@ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -195,6 +203,7 @@ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -210,6 +219,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF05; --on-dark-surface-transparent-card-active: #FFFFFF1A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-positive-hover: #1EB83AFF; --on-dark-surface-positive-active: #178C2CFF; --on-dark-surface-positive: #1A9E32; @@ -237,6 +247,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -246,6 +257,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -264,6 +276,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-positive-hover: #1EB83AFF; --on-light-surface-positive-active: #178C2CFF; --on-light-surface-positive: #1A9E32; @@ -289,6 +302,7 @@ --on-light-surface-accent-main-active: #178C2CFF; --on-light-surface-accent-main: #1A9E32; --background-primary: #F2F2F2FF; + --background-primary-brightness: #F3F3F3FF; --background-secondary: #FFFFFFFF; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; 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 004c3bfc8e..69a3a97485 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_b2c__dark.ts @@ -6,6 +6,7 @@ export const plasma_b2c__dark = ([ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -30,6 +31,7 @@ export const plasma_b2c__dark = ([ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -54,6 +56,7 @@ export const plasma_b2c__dark = ([ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -78,6 +81,7 @@ export const plasma_b2c__dark = ([ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -90,6 +94,7 @@ export const plasma_b2c__dark = ([ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -99,6 +104,7 @@ export const plasma_b2c__dark = ([ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -117,6 +123,7 @@ export const plasma_b2c__dark = ([ --surface-transparent-card-hover: #FFFFFF3D; --surface-transparent-card-active: #FFFFFF0F; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -147,6 +154,7 @@ export const plasma_b2c__dark = ([ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -156,6 +164,7 @@ export const plasma_b2c__dark = ([ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -174,6 +183,7 @@ export const plasma_b2c__dark = ([ --on-dark-surface-transparent-card-hover: #FFFFFF3D; --on-dark-surface-transparent-card-active: #FFFFFF0F; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #5D95FDFF; --on-dark-surface-accent-active: #357BFDFF; --on-dark-surface-accent: #3F81FD; @@ -189,6 +199,7 @@ export const plasma_b2c__dark = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -198,6 +209,7 @@ export const plasma_b2c__dark = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -216,6 +228,7 @@ export const plasma_b2c__dark = ([ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #4886F9FF; --on-light-surface-accent-active: #206CF8FF; --on-light-surface-accent: #2A72F8; @@ -229,6 +242,7 @@ export const plasma_b2c__dark = ([ --on-light-surface-negative-active: #F31228FF; --on-light-surface-negative: #F31B31; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #0808088F; @@ -242,39 +256,6 @@ export const plasma_b2c__dark = ([ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } :root { 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 e15b02884d..e4b22148fc 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_b2c__light.ts @@ -6,6 +6,7 @@ export const plasma_b2c__light = ([ --text-primary-hover: #08080893; --text-primary-active: #080808C4; --text-primary: #080808F5; + --text-primary-brightness: #171717FF; --text-secondary-hover: #080808FF; --text-secondary-active: #080808AB; --text-secondary: #0808088F; @@ -30,6 +31,7 @@ export const plasma_b2c__light = ([ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -54,6 +56,7 @@ export const plasma_b2c__light = ([ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -78,6 +81,7 @@ export const plasma_b2c__light = ([ --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-primary: #FFFFFFF5; + --inverse-text-primary-brightness: #FFFFFFFF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #FFFFFFAB; --inverse-text-secondary: #FFFFFF8F; @@ -90,6 +94,7 @@ export const plasma_b2c__light = ([ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -99,6 +104,7 @@ export const plasma_b2c__light = ([ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -117,6 +123,7 @@ export const plasma_b2c__light = ([ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -147,6 +154,7 @@ export const plasma_b2c__light = ([ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -156,6 +164,7 @@ export const plasma_b2c__light = ([ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -174,6 +183,7 @@ export const plasma_b2c__light = ([ --on-dark-surface-transparent-card-hover: #FFFFFF0A; --on-dark-surface-transparent-card-active: #FFFFFF29; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #689CFDFF; --on-dark-surface-accent-active: #2B74FDFF; --on-dark-surface-accent: #3F81FD; @@ -189,6 +199,7 @@ export const plasma_b2c__light = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -198,6 +209,7 @@ export const plasma_b2c__light = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -216,6 +228,7 @@ export const plasma_b2c__light = ([ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #528DFAFF; --on-light-surface-accent-active: #1665F8FF; --on-light-surface-accent: #2A72F8; @@ -229,6 +242,7 @@ export const plasma_b2c__light = ([ --on-light-surface-negative-active: #ED0C23FF; --on-light-surface-negative: #F31B31; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #F9F9F98F; @@ -242,39 +256,6 @@ export const plasma_b2c__light = ([ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } :root { 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 61c8893230..0c8d3272ba 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_web__dark.ts @@ -6,6 +6,7 @@ export const plasma_web__dark = ([ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -30,6 +31,7 @@ export const plasma_web__dark = ([ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -54,6 +56,7 @@ export const plasma_web__dark = ([ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -78,6 +81,7 @@ export const plasma_web__dark = ([ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -90,6 +94,7 @@ export const plasma_web__dark = ([ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -99,6 +104,7 @@ export const plasma_web__dark = ([ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -117,6 +123,7 @@ export const plasma_web__dark = ([ --surface-transparent-card-hover: #FFFFFF3D; --surface-transparent-card-active: #FFFFFF0F; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -147,6 +154,7 @@ export const plasma_web__dark = ([ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -156,6 +164,7 @@ export const plasma_web__dark = ([ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -174,6 +183,7 @@ export const plasma_web__dark = ([ --on-dark-surface-transparent-card-hover: #FFFFFF3D; --on-dark-surface-transparent-card-active: #FFFFFF0F; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #5D95FDFF; --on-dark-surface-accent-active: #357BFDFF; --on-dark-surface-accent: #3F81FD; @@ -189,6 +199,7 @@ export const plasma_web__dark = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -198,6 +209,7 @@ export const plasma_web__dark = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -216,6 +228,7 @@ export const plasma_web__dark = ([ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #4886F9FF; --on-light-surface-accent-active: #206CF8FF; --on-light-surface-accent: #2A72F8; @@ -229,6 +242,7 @@ export const plasma_web__dark = ([ --on-light-surface-negative-active: #F31228FF; --on-light-surface-negative: #F31B31; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #0808088F; @@ -242,39 +256,6 @@ export const plasma_web__dark = ([ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } :root { 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 96c9828141..5ad033afef 100644 --- a/packages/themes/plasma-themes/src/themes/plasma_web__light.ts +++ b/packages/themes/plasma-themes/src/themes/plasma_web__light.ts @@ -6,6 +6,7 @@ export const plasma_web__light = ([ --text-primary-hover: #08080893; --text-primary-active: #080808C4; --text-primary: #080808F5; + --text-primary-brightness: #171717FF; --text-secondary-hover: #080808FF; --text-secondary-active: #080808AB; --text-secondary: #0808088F; @@ -30,6 +31,7 @@ export const plasma_web__light = ([ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -54,6 +56,7 @@ export const plasma_web__light = ([ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -78,6 +81,7 @@ export const plasma_web__light = ([ --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-primary: #FFFFFFF5; + --inverse-text-primary-brightness: #FFFFFFFF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #FFFFFFAB; --inverse-text-secondary: #FFFFFF8F; @@ -90,6 +94,7 @@ export const plasma_web__light = ([ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -99,6 +104,7 @@ export const plasma_web__light = ([ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -117,6 +123,7 @@ export const plasma_web__light = ([ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #FFFFFF00; --surface-clear-active: #FFFFFF00; --surface-clear: #FFFFFF00; @@ -147,6 +154,7 @@ export const plasma_web__light = ([ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -156,6 +164,7 @@ export const plasma_web__light = ([ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -174,6 +183,7 @@ export const plasma_web__light = ([ --on-dark-surface-transparent-card-hover: #FFFFFF0A; --on-dark-surface-transparent-card-active: #FFFFFF29; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-accent-hover: #689CFDFF; --on-dark-surface-accent-active: #2B74FDFF; --on-dark-surface-accent: #3F81FD; @@ -189,6 +199,7 @@ export const plasma_web__light = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -198,6 +209,7 @@ export const plasma_web__light = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -216,6 +228,7 @@ export const plasma_web__light = ([ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-accent-hover: #528DFAFF; --on-light-surface-accent-active: #1665F8FF; --on-light-surface-accent: #2A72F8; @@ -229,6 +242,7 @@ export const plasma_web__light = ([ --on-light-surface-negative-active: #ED0C23FF; --on-light-surface-negative: #F31B31; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --overlay-soft: #F9F9F98F; @@ -242,39 +256,6 @@ export const plasma_web__light = ([ --on-light-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); - --plasma-colors-white-primary: var(--on-dark-text-primary); - --plasma-colors-white-secondary: var(--on-dark-text-secondary); - --plasma-colors-white-tertiary: var(--on-dark-text-tertiary); - --plasma-colors-black-primary: var(--on-light-text-primary); - --plasma-colors-black-secondary: var(--on-light-text-secondary); - --plasma-colors-black-tertiary: var(--on-light-text-tertiary); - --plasma-colors-button-black: var(--on-light-surface-solid-default); - --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary); - --plasma-colors-button-white: var(--on-dark-surface-solid-default); - --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary); - --plasma-colors-text: var(--text-primary); - --plasma-colors-primary: var(--text-primary); - --plasma-colors-secondary: var(--text-secondary); - --plasma-colors-tertiary: var(--text-tertiary); - --plasma-colors-paragraph: var(--text-paragraph); - --plasma-colors-background: var(--background-primary); - --plasma-colors-accent: var(--text-accent); - --plasma-colors-success: var(--text-positive); - --plasma-colors-warning: var(--text-warning); - --plasma-colors-critical: var(--text-negative); - --plasma-colors-overlay: var(--overlay-soft); - --plasma-colors-surface-liquid01: var(--surface-transparent-primary); - --plasma-colors-surface-liquid02: var(--surface-transparent-secondary); - --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary); - --plasma-colors-surface-solid01: var(--surface-solid-primary); - --plasma-colors-surface-solid02: var(--surface-solid-secondary); - --plasma-colors-surface-solid03: var(--surface-solid-tertiary); - --plasma-colors-surface-card: var(--surface-transparent-card); - --plasma-colors-button-secondary: var(--surface-transparent-secondary); - --plasma-colors-button-accent: var(--text-accent); - --plasma-colors-button-success: var(--surface-positive); - --plasma-colors-button-warning: var(--surface-warning); - --plasma-colors-button-critical: var(--surface-negative); } :root { diff --git a/packages/themes/plasma-themes/src/themes/stylesSalute__dark.ts b/packages/themes/plasma-themes/src/themes/stylesSalute__dark.ts index b853cf7e5d..6d77c1521a 100644 --- a/packages/themes/plasma-themes/src/themes/stylesSalute__dark.ts +++ b/packages/themes/plasma-themes/src/themes/stylesSalute__dark.ts @@ -6,6 +6,7 @@ export const stylesSalute__dark = ([ --text-primary-hover: #FFFFFF93; --text-primary-active: #FFFFFFC4; --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFF6FF; --text-secondary-hover: #FFFFFFFF; --text-secondary-active: #FFFFFFAB; --text-secondary: #FFFFFF8F; @@ -42,6 +43,7 @@ export const stylesSalute__dark = ([ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFF6FF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -78,6 +80,7 @@ export const stylesSalute__dark = ([ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -114,6 +117,7 @@ export const stylesSalute__dark = ([ --inverse-text-primary-hover: #08080893; --inverse-text-primary-active: #080808C4; --inverse-text-primary: #080808F5; + --inverse-text-primary-brightness: #171717FF; --inverse-text-secondary-hover: #080808FF; --inverse-text-secondary-active: #080808AB; --inverse-text-secondary: #0808088F; @@ -126,6 +130,7 @@ export const stylesSalute__dark = ([ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -135,6 +140,7 @@ export const stylesSalute__dark = ([ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #FFFFFFFF; --surface-solid-default: #FFFFFFFF; @@ -150,6 +156,7 @@ export const stylesSalute__dark = ([ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -188,6 +195,7 @@ export const stylesSalute__dark = ([ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -197,6 +205,7 @@ export const stylesSalute__dark = ([ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -212,6 +221,7 @@ export const stylesSalute__dark = ([ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-positive-hover: #1DAF37FF; --on-dark-surface-positive-active: #18952FFF; --on-dark-surface-positive: #1A9E32; @@ -239,6 +249,7 @@ export const stylesSalute__dark = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -248,6 +259,7 @@ export const stylesSalute__dark = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -266,6 +278,7 @@ export const stylesSalute__dark = ([ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-positive-hover: #1DAF37FF; --on-light-surface-positive-active: #18952FFF; --on-light-surface-positive: #1A9E32; @@ -291,6 +304,7 @@ export const stylesSalute__dark = ([ --on-light-surface-accent-main-active: #18952FFF; --on-light-surface-accent-main: #1A9E32; --background-primary: #000000FF; + --background-primary-brightness: #0F0FFFFF; --background-secondary: #171717; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; diff --git a/packages/themes/plasma-themes/src/themes/stylesSalute__light.ts b/packages/themes/plasma-themes/src/themes/stylesSalute__light.ts index 3a43678cfb..e30c52a8e1 100644 --- a/packages/themes/plasma-themes/src/themes/stylesSalute__light.ts +++ b/packages/themes/plasma-themes/src/themes/stylesSalute__light.ts @@ -6,6 +6,7 @@ export const stylesSalute__light = ([ --text-primary-hover: #08080893; --text-primary-active: #080808C4; --text-primary: #080808F5; + --text-primary-brightness: #171717FF; --text-secondary-hover: #080808FF; --text-secondary-active: #080808AB; --text-secondary: #0808088F; @@ -42,6 +43,7 @@ export const stylesSalute__light = ([ --on-dark-text-primary-hover: #FFFFFF93; --on-dark-text-primary-active: #FFFFFFC4; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFF6FF; --on-dark-text-secondary-hover: #FFFFFFFF; --on-dark-text-secondary-active: #FFFFFFAB; --on-dark-text-secondary: #FFFFFF8F; @@ -78,6 +80,7 @@ export const stylesSalute__light = ([ --on-light-text-primary-hover: #08080893; --on-light-text-primary-active: #080808C4; --on-light-text-primary: #080808F5; + --on-light-text-primary-brightness: #171717FF; --on-light-text-secondary-hover: #080808FF; --on-light-text-secondary-active: #080808AB; --on-light-text-secondary: #0808088F; @@ -114,6 +117,7 @@ export const stylesSalute__light = ([ --inverse-text-primary-hover: #FFFFFF93; --inverse-text-primary-active: #FFFFFFC4; --inverse-text-primary: #FFFFFFF5; + --inverse-text-primary-brightness: #FFFFF6FF; --inverse-text-secondary-hover: #FFFFFFFF; --inverse-text-secondary-active: #FFFFFFAB; --inverse-text-secondary: #FFFFFF8F; @@ -126,6 +130,7 @@ export const stylesSalute__light = ([ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -135,6 +140,7 @@ export const stylesSalute__light = ([ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -150,6 +156,7 @@ export const stylesSalute__light = ([ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -188,6 +195,7 @@ export const stylesSalute__light = ([ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -197,6 +205,7 @@ export const stylesSalute__light = ([ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #FFFFFFFF; --on-dark-surface-solid-default: #FFFFFFFF; @@ -212,6 +221,7 @@ export const stylesSalute__light = ([ --on-dark-surface-transparent-card-hover: #FFFFFF05; --on-dark-surface-transparent-card-active: #FFFFFF1A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-positive-hover: #1EB83AFF; --on-dark-surface-positive-active: #178C2CFF; --on-dark-surface-positive: #1A9E32; @@ -239,6 +249,7 @@ export const stylesSalute__light = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -248,6 +259,7 @@ export const stylesSalute__light = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -266,6 +278,7 @@ export const stylesSalute__light = ([ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-positive-hover: #1EB83AFF; --on-light-surface-positive-active: #178C2CFF; --on-light-surface-positive: #1A9E32; @@ -291,6 +304,7 @@ export const stylesSalute__light = ([ --on-light-surface-accent-main-active: #178C2CFF; --on-light-surface-accent-main: #1A9E32; --background-primary: #F2F2F2FF; + --background-primary-brightness: #F3F3F3FF; --background-secondary: #FFFFFFFF; --on-dark-overlay-soft: #0000008F; --on-dark-overlay-hard: #000000EB; diff --git a/packages/themes/plasma-themes/src/tokens/index.ts b/packages/themes/plasma-themes/src/tokens/index.ts index 11f2e012df..f2bca95253 100644 --- a/packages/themes/plasma-themes/src/tokens/index.ts +++ b/packages/themes/plasma-themes/src/tokens/index.ts @@ -3,6 +3,9 @@ /** Основной цвет текста */ export const textPrimary = 'var(--text-primary)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness)'; + /** Основной цвет текста */ export const textPrimaryHover = 'var(--text-primary-hover)'; @@ -129,6 +132,9 @@ export const textInfoMinorActive = 'var(--text-info-minor-active)'; /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness)'; + /** Основной цвет текста на темном фоне */ export const onDarkTextPrimaryHover = 'var(--on-dark-text-primary-hover)'; @@ -255,6 +261,9 @@ export const onDarkTextInfoMinorActive = 'var(--on-dark-text-info-minor-active)' /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness)'; + /** Основной цвет текста на светлом фоне */ export const onLightTextPrimaryHover = 'var(--on-light-text-primary-hover)'; @@ -381,6 +390,9 @@ export const onLightTextInfoMinorActive = 'var(--on-light-text-info-minor-active /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness)'; + /** Инвертированный основной цвет текста */ export const inverseTextPrimaryHover = 'var(--inverse-text-primary-hover)'; @@ -507,6 +519,9 @@ export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active) /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimaryHover = 'var(--surface-solid-primary-hover)'; @@ -534,6 +549,9 @@ export const surfaceSolidTertiaryActive = 'var(--surface-solid-tertiary-active)' /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness)'; + /** Основной фон для карточек */ export const surfaceSolidCardHover = 'var(--surface-solid-card-hover)'; @@ -588,6 +606,9 @@ export const surfaceTransparentDeepActive = 'var(--surface-transparent-deep-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек */ export const surfaceTransparentCardHover = 'var(--surface-transparent-card-hover)'; @@ -741,6 +762,9 @@ export const surfaceTransparentInfoActive = 'var(--surface-transparent-info-acti /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimaryHover = 'var(--on-dark-surface-solid-primary-hover)'; @@ -768,6 +792,9 @@ export const onDarkSurfaceSolidTertiaryActive = 'var(--on-dark-surface-solid-ter /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness)'; + /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCardHover = 'var(--on-dark-surface-solid-card-hover)'; @@ -822,6 +849,9 @@ export const onDarkSurfaceTransparentDeepActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCardHover = 'var(--on-dark-surface-transparent-card-hover)'; @@ -975,6 +1005,9 @@ export const onDarkSurfaceTransparentInfoActive = 'var(--on-dark-surface-transpa /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimaryHover = 'var(--on-light-surface-solid-primary-hover)'; @@ -1002,6 +1035,9 @@ export const onLightSurfaceSolidTertiaryActive = 'var(--on-light-surface-solid-t /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness)'; + /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCardHover = 'var(--on-light-surface-solid-card-hover)'; @@ -1056,6 +1092,9 @@ export const onLightSurfaceTransparentDeepActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCardHover = 'var(--on-light-surface-transparent-card-hover)'; @@ -1209,6 +1248,9 @@ export const onLightSurfaceTransparentInfoActive = 'var(--on-light-surface-trans /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary)'; +/** Инвертированный основной непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness)'; + /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimaryHover = 'var(--inverse-surface-solid-primary-hover)'; @@ -1236,6 +1278,9 @@ export const inverseSurfaceSolidTertiaryActive = 'var(--inverse-surface-solid-te /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card)'; +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness)'; + /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCardHover = 'var(--inverse-surface-solid-card-hover)'; @@ -1290,6 +1335,9 @@ export const inverseSurfaceTransparentDeepActive = 'var(--inverse-surface-transp /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card)'; +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness)'; + /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCardHover = 'var(--inverse-surface-transparent-card-hover)'; @@ -1443,6 +1491,9 @@ export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transp /** Основной фон */ export const backgroundPrimary = 'var(--background-primary)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary)'; @@ -1452,6 +1503,9 @@ export const lightBackgroundPrimary = 'var(--light-background-primary)'; /** Инвертированный основной фон */ export const inverseBackgroundPrimary = 'var(--inverse-background-primary)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft)'; 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 4b96cd62c7..3a43bbbad3 100644 --- a/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts +++ b/packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts @@ -9,6 +9,9 @@ export const textPrimaryActive = 'var(--text-primary-active, #FFFFFFC4)'; /** Основной цвет текста */ export const textPrimary = 'var(--text-primary, #FFFFFFF5)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness, #FFFFFFFF)'; + /** Вторичный цвет текста */ export const textSecondaryHover = 'var(--text-secondary-hover, #FFFFFFFF)'; @@ -81,6 +84,9 @@ export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active, #FFFF /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary, #FFFFFFF5)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness, #FFFFFFFF)'; + /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #FFFFFFFF)'; @@ -153,6 +159,9 @@ export const onLightTextPrimaryActive = 'var(--on-light-text-primary-active, #08 /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary, #080808F5)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness, #171717FF)'; + /** Вторичный цвет текста на светлом фоне */ export const onLightTextSecondaryHover = 'var(--on-light-text-secondary-hover, #080808FF)'; @@ -225,6 +234,9 @@ export const inverseTextPrimaryActive = 'var(--inverse-text-primary-active, #080 /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary, #080808F5)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness, #171717FF)'; + /** Инвертированный вторичный цвет текста */ export const inverseTextSecondaryHover = 'var(--inverse-text-secondary-hover, #080808FF)'; @@ -261,6 +273,9 @@ export const surfaceSolidPrimaryActive = 'var(--surface-solid-primary-active, #1 /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности/контрола */ export const surfaceSolidSecondaryHover = 'var(--surface-solid-secondary-hover, #303030FF)'; @@ -288,6 +303,9 @@ export const surfaceSolidCardActive = 'var(--surface-solid-card-active, #121212F /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card, #171717)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness, #252525FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию */ export const surfaceSolidDefaultHover = 'var(--surface-solid-default-hover, #FFFFFFFF)'; @@ -342,6 +360,9 @@ export const surfaceTransparentCardActive = 'var(--surface-transparent-card-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card, #FFFFFF1F)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness, #FFFFFFFF)'; + /** Фон поверхности/контрола без заливки */ export const surfaceClearHover = 'var(--surface-clear-hover, #FFFFFF00)'; @@ -432,6 +453,9 @@ export const onDarkSurfaceSolidPrimaryActive = 'var(--on-dark-surface-solid-prim /** Осн. непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #171717)'; +/** Осн. непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непр. фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidSecondaryHover = 'var(--on-dark-surface-solid-secondary-hover, #303030FF)'; @@ -459,6 +483,9 @@ export const onDarkSurfaceSolidCardActive = 'var(--on-dark-surface-solid-card-ac /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #171717)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness, #252525FF)'; + /** Непр. фон поверхности/контрола по умолчанию на тем. фоне */ export const onDarkSurfaceSolidDefaultHover = 'var(--on-dark-surface-solid-default-hover, #FFFFFFFF)'; @@ -513,6 +540,9 @@ export const onDarkSurfaceTransparentCardActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #FFFFFF1F)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Акцентный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceAccentHover = 'var(--on-dark-surface-accent-hover, #5D95FDFF)'; @@ -558,6 +588,9 @@ export const onLightSurfaceSolidPrimaryActive = 'var(--on-light-surface-solid-pr /** Осн. непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F5F5F5)'; +/** Осн. непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Втор. непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidSecondaryHover = 'var(--on-light-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -585,6 +618,9 @@ export const onLightSurfaceSolidCardActive = 'var(--on-light-surface-solid-card- /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFFFF)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness, #FFFFFFFF)'; + /** Непр. фон поверхности/контрола по умолчанию на светлом фоне */ export const onLightSurfaceSolidDefaultHover = 'var(--on-light-surface-solid-default-hover, #0D0D0DFF)'; @@ -640,6 +676,9 @@ export const onLightSurfaceTransparentCardActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, #FFFFFFFF)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Акцентный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceAccentHover = 'var(--on-light-surface-accent-hover, #4886F9FF)'; @@ -679,6 +718,9 @@ export const onLightSurfaceNegative = 'var(--on-light-surface-negative, #F31B31) /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #080808)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, #171717FF)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary, #080808)'; @@ -712,107 +754,6 @@ export const onLightOverlayHard = 'var(--on-light-overlay-hard, #F9F9F9F5)'; /** dark overlay onLight overlayBlur */ export const onLightOverlayBlur = 'var(--on-light-overlay-blur, #F9F9F947)'; -/** @deprecated instead use onDarkTextPrimary */ -export const whitePrimary = 'var(--plasma-colors-white-primary, var(--on-dark-text-primary))'; - -/** @deprecated instead use onDarkTextSecondary */ -export const whiteSecondary = 'var(--plasma-colors-white-secondary, var(--on-dark-text-secondary))'; - -/** @deprecated instead use onDarkTextTertiary */ -export const whiteTertiary = 'var(--plasma-colors-white-tertiary, var(--on-dark-text-tertiary))'; - -/** @deprecated instead use onLightTextPrimary */ -export const blackPrimary = 'var(--plasma-colors-black-primary, var(--on-light-text-primary))'; - -/** @deprecated instead use onLightTextSecondary */ -export const blackSecondary = 'var(--plasma-colors-black-secondary, var(--on-light-text-secondary))'; - -/** @deprecated instead use onLightTextTertiary */ -export const blackTertiary = 'var(--plasma-colors-black-tertiary, var(--on-light-text-tertiary))'; - -/** @deprecated instead use onLightSurfaceSolidDefault */ -export const buttonBlack = 'var(--plasma-colors-button-black, var(--on-light-surface-solid-default))'; - -/** @deprecated instead use onLightSurfaceTransparentSecondary */ -export const buttonBlackSecondary = - 'var(--plasma-colors-button-black-secondary, var(--on-light-surface-transparent-secondary))'; - -/** @deprecated instead use onDarkSurfaceSolidDefault */ -export const buttonWhite = 'var(--plasma-colors-button-white, var(--on-dark-surface-solid-default))'; - -/** @deprecated instead use onDarkSurfaceTransparentSecondary */ -export const buttonWhiteSecondary = - 'var(--plasma-colors-button-white-secondary, var(--on-dark-surface-transparent-secondary))'; - -/** @deprecated instead use textPrimary */ -export const text = 'var(--plasma-colors-text, var(--text-primary))'; - -/** @deprecated instead use textPrimary */ -export const primary = 'var(--plasma-colors-primary, var(--text-primary))'; - -/** @deprecated instead use textSecondary */ -export const secondary = 'var(--plasma-colors-secondary, var(--text-secondary))'; - -/** @deprecated instead use textTertiary */ -export const tertiary = 'var(--plasma-colors-tertiary, var(--text-tertiary))'; - -/** @deprecated instead use textParagraph */ -export const paragraph = 'var(--plasma-colors-paragraph, var(--text-paragraph))'; - -/** @deprecated instead use backgroundPrimary */ -export const background = 'var(--plasma-colors-background, var(--background-primary))'; - -/** @deprecated instead use textAccent */ -export const accent = 'var(--plasma-colors-accent, var(--text-accent))'; - -/** @deprecated instead use textPositive */ -export const success = 'var(--plasma-colors-success, var(--text-positive))'; - -/** @deprecated instead use textWarning */ -export const warning = 'var(--plasma-colors-warning, var(--text-warning))'; - -/** @deprecated instead use textNegative */ -export const critical = 'var(--plasma-colors-critical, var(--text-negative))'; - -/** @deprecated instead use overlaySoft */ -export const overlay = 'var(--plasma-colors-overlay, var(--overlay-soft))'; - -/** @deprecated instead use surfaceTransparentPrimary */ -export const surfaceLiquid01 = 'var(--plasma-colors-surface-liquid01, var(--surface-transparent-primary))'; - -/** @deprecated instead use surfaceTransparentSecondary */ -export const surfaceLiquid02 = 'var(--plasma-colors-surface-liquid02, var(--surface-transparent-secondary))'; - -/** @deprecated instead use surfaceTransparentTertiary */ -export const surfaceLiquid03 = 'var(--plasma-colors-surface-liquid03, var(--surface-transparent-tertiary))'; - -/** @deprecated instead use surfaceSolidPrimary */ -export const surfaceSolid01 = 'var(--plasma-colors-surface-solid01, var(--surface-solid-primary))'; - -/** @deprecated instead use surfaceSolidSecondary */ -export const surfaceSolid02 = 'var(--plasma-colors-surface-solid02, var(--surface-solid-secondary))'; - -/** @deprecated instead use surfaceSolidTertiary */ -export const surfaceSolid03 = 'var(--plasma-colors-surface-solid03, var(--surface-solid-tertiary))'; - -/** @deprecated instead use surfaceTransparentCard */ -export const surfaceCard = 'var(--plasma-colors-surface-card, var(--surface-transparent-card))'; - -/** @deprecated instead use surfaceTransparentSecondary */ -export const buttonSecondary = 'var(--plasma-colors-button-secondary, var(--surface-transparent-secondary))'; - -/** @deprecated instead use textAccent */ -export const buttonAccent = 'var(--plasma-colors-button-accent, var(--text-accent))'; - -/** @deprecated instead use surfacePositive */ -export const buttonSuccess = 'var(--plasma-colors-button-success, var(--surface-positive))'; - -/** @deprecated instead use surfaceWarning */ -export const buttonWarning = 'var(--plasma-colors-button-warning, var(--surface-warning))'; - -/** @deprecated instead use surfaceNegative */ -export const buttonCritical = 'var(--plasma-colors-button-critical, var(--surface-negative))'; - /** Акцентный цвет с градиентом */ export const textAccentGradientHover = 'var(--text-accent-gradient-hover, #CCCCCCFF)'; 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 4b96cd62c7..3a43bbbad3 100644 --- a/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts +++ b/packages/themes/plasma-themes/src/tokens/plasma_web/index.ts @@ -9,6 +9,9 @@ export const textPrimaryActive = 'var(--text-primary-active, #FFFFFFC4)'; /** Основной цвет текста */ export const textPrimary = 'var(--text-primary, #FFFFFFF5)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness, #FFFFFFFF)'; + /** Вторичный цвет текста */ export const textSecondaryHover = 'var(--text-secondary-hover, #FFFFFFFF)'; @@ -81,6 +84,9 @@ export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active, #FFFF /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary, #FFFFFFF5)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness, #FFFFFFFF)'; + /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #FFFFFFFF)'; @@ -153,6 +159,9 @@ export const onLightTextPrimaryActive = 'var(--on-light-text-primary-active, #08 /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary, #080808F5)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness, #171717FF)'; + /** Вторичный цвет текста на светлом фоне */ export const onLightTextSecondaryHover = 'var(--on-light-text-secondary-hover, #080808FF)'; @@ -225,6 +234,9 @@ export const inverseTextPrimaryActive = 'var(--inverse-text-primary-active, #080 /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary, #080808F5)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness, #171717FF)'; + /** Инвертированный вторичный цвет текста */ export const inverseTextSecondaryHover = 'var(--inverse-text-secondary-hover, #080808FF)'; @@ -261,6 +273,9 @@ export const surfaceSolidPrimaryActive = 'var(--surface-solid-primary-active, #1 /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности/контрола */ export const surfaceSolidSecondaryHover = 'var(--surface-solid-secondary-hover, #303030FF)'; @@ -288,6 +303,9 @@ export const surfaceSolidCardActive = 'var(--surface-solid-card-active, #121212F /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card, #171717)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness, #252525FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию */ export const surfaceSolidDefaultHover = 'var(--surface-solid-default-hover, #FFFFFFFF)'; @@ -342,6 +360,9 @@ export const surfaceTransparentCardActive = 'var(--surface-transparent-card-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card, #FFFFFF1F)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness, #FFFFFFFF)'; + /** Фон поверхности/контрола без заливки */ export const surfaceClearHover = 'var(--surface-clear-hover, #FFFFFF00)'; @@ -432,6 +453,9 @@ export const onDarkSurfaceSolidPrimaryActive = 'var(--on-dark-surface-solid-prim /** Осн. непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #171717)'; +/** Осн. непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непр. фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidSecondaryHover = 'var(--on-dark-surface-solid-secondary-hover, #303030FF)'; @@ -459,6 +483,9 @@ export const onDarkSurfaceSolidCardActive = 'var(--on-dark-surface-solid-card-ac /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #171717)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness, #252525FF)'; + /** Непр. фон поверхности/контрола по умолчанию на тем. фоне */ export const onDarkSurfaceSolidDefaultHover = 'var(--on-dark-surface-solid-default-hover, #FFFFFFFF)'; @@ -513,6 +540,9 @@ export const onDarkSurfaceTransparentCardActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #FFFFFF1F)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Акцентный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceAccentHover = 'var(--on-dark-surface-accent-hover, #5D95FDFF)'; @@ -558,6 +588,9 @@ export const onLightSurfaceSolidPrimaryActive = 'var(--on-light-surface-solid-pr /** Осн. непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F5F5F5)'; +/** Осн. непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Втор. непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidSecondaryHover = 'var(--on-light-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -585,6 +618,9 @@ export const onLightSurfaceSolidCardActive = 'var(--on-light-surface-solid-card- /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFFFF)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness, #FFFFFFFF)'; + /** Непр. фон поверхности/контрола по умолчанию на светлом фоне */ export const onLightSurfaceSolidDefaultHover = 'var(--on-light-surface-solid-default-hover, #0D0D0DFF)'; @@ -640,6 +676,9 @@ export const onLightSurfaceTransparentCardActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, #FFFFFFFF)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Акцентный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceAccentHover = 'var(--on-light-surface-accent-hover, #4886F9FF)'; @@ -679,6 +718,9 @@ export const onLightSurfaceNegative = 'var(--on-light-surface-negative, #F31B31) /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #080808)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, #171717FF)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary, #080808)'; @@ -712,107 +754,6 @@ export const onLightOverlayHard = 'var(--on-light-overlay-hard, #F9F9F9F5)'; /** dark overlay onLight overlayBlur */ export const onLightOverlayBlur = 'var(--on-light-overlay-blur, #F9F9F947)'; -/** @deprecated instead use onDarkTextPrimary */ -export const whitePrimary = 'var(--plasma-colors-white-primary, var(--on-dark-text-primary))'; - -/** @deprecated instead use onDarkTextSecondary */ -export const whiteSecondary = 'var(--plasma-colors-white-secondary, var(--on-dark-text-secondary))'; - -/** @deprecated instead use onDarkTextTertiary */ -export const whiteTertiary = 'var(--plasma-colors-white-tertiary, var(--on-dark-text-tertiary))'; - -/** @deprecated instead use onLightTextPrimary */ -export const blackPrimary = 'var(--plasma-colors-black-primary, var(--on-light-text-primary))'; - -/** @deprecated instead use onLightTextSecondary */ -export const blackSecondary = 'var(--plasma-colors-black-secondary, var(--on-light-text-secondary))'; - -/** @deprecated instead use onLightTextTertiary */ -export const blackTertiary = 'var(--plasma-colors-black-tertiary, var(--on-light-text-tertiary))'; - -/** @deprecated instead use onLightSurfaceSolidDefault */ -export const buttonBlack = 'var(--plasma-colors-button-black, var(--on-light-surface-solid-default))'; - -/** @deprecated instead use onLightSurfaceTransparentSecondary */ -export const buttonBlackSecondary = - 'var(--plasma-colors-button-black-secondary, var(--on-light-surface-transparent-secondary))'; - -/** @deprecated instead use onDarkSurfaceSolidDefault */ -export const buttonWhite = 'var(--plasma-colors-button-white, var(--on-dark-surface-solid-default))'; - -/** @deprecated instead use onDarkSurfaceTransparentSecondary */ -export const buttonWhiteSecondary = - 'var(--plasma-colors-button-white-secondary, var(--on-dark-surface-transparent-secondary))'; - -/** @deprecated instead use textPrimary */ -export const text = 'var(--plasma-colors-text, var(--text-primary))'; - -/** @deprecated instead use textPrimary */ -export const primary = 'var(--plasma-colors-primary, var(--text-primary))'; - -/** @deprecated instead use textSecondary */ -export const secondary = 'var(--plasma-colors-secondary, var(--text-secondary))'; - -/** @deprecated instead use textTertiary */ -export const tertiary = 'var(--plasma-colors-tertiary, var(--text-tertiary))'; - -/** @deprecated instead use textParagraph */ -export const paragraph = 'var(--plasma-colors-paragraph, var(--text-paragraph))'; - -/** @deprecated instead use backgroundPrimary */ -export const background = 'var(--plasma-colors-background, var(--background-primary))'; - -/** @deprecated instead use textAccent */ -export const accent = 'var(--plasma-colors-accent, var(--text-accent))'; - -/** @deprecated instead use textPositive */ -export const success = 'var(--plasma-colors-success, var(--text-positive))'; - -/** @deprecated instead use textWarning */ -export const warning = 'var(--plasma-colors-warning, var(--text-warning))'; - -/** @deprecated instead use textNegative */ -export const critical = 'var(--plasma-colors-critical, var(--text-negative))'; - -/** @deprecated instead use overlaySoft */ -export const overlay = 'var(--plasma-colors-overlay, var(--overlay-soft))'; - -/** @deprecated instead use surfaceTransparentPrimary */ -export const surfaceLiquid01 = 'var(--plasma-colors-surface-liquid01, var(--surface-transparent-primary))'; - -/** @deprecated instead use surfaceTransparentSecondary */ -export const surfaceLiquid02 = 'var(--plasma-colors-surface-liquid02, var(--surface-transparent-secondary))'; - -/** @deprecated instead use surfaceTransparentTertiary */ -export const surfaceLiquid03 = 'var(--plasma-colors-surface-liquid03, var(--surface-transparent-tertiary))'; - -/** @deprecated instead use surfaceSolidPrimary */ -export const surfaceSolid01 = 'var(--plasma-colors-surface-solid01, var(--surface-solid-primary))'; - -/** @deprecated instead use surfaceSolidSecondary */ -export const surfaceSolid02 = 'var(--plasma-colors-surface-solid02, var(--surface-solid-secondary))'; - -/** @deprecated instead use surfaceSolidTertiary */ -export const surfaceSolid03 = 'var(--plasma-colors-surface-solid03, var(--surface-solid-tertiary))'; - -/** @deprecated instead use surfaceTransparentCard */ -export const surfaceCard = 'var(--plasma-colors-surface-card, var(--surface-transparent-card))'; - -/** @deprecated instead use surfaceTransparentSecondary */ -export const buttonSecondary = 'var(--plasma-colors-button-secondary, var(--surface-transparent-secondary))'; - -/** @deprecated instead use textAccent */ -export const buttonAccent = 'var(--plasma-colors-button-accent, var(--text-accent))'; - -/** @deprecated instead use surfacePositive */ -export const buttonSuccess = 'var(--plasma-colors-button-success, var(--surface-positive))'; - -/** @deprecated instead use surfaceWarning */ -export const buttonWarning = 'var(--plasma-colors-button-warning, var(--surface-warning))'; - -/** @deprecated instead use surfaceNegative */ -export const buttonCritical = 'var(--plasma-colors-button-critical, var(--surface-negative))'; - /** Акцентный цвет с градиентом */ export const textAccentGradientHover = 'var(--text-accent-gradient-hover, #CCCCCCFF)'; diff --git a/packages/themes/plasma-themes/src/tokens/stylesSalute/index.ts b/packages/themes/plasma-themes/src/tokens/stylesSalute/index.ts index bfa51e6ffe..19f539b1f0 100644 --- a/packages/themes/plasma-themes/src/tokens/stylesSalute/index.ts +++ b/packages/themes/plasma-themes/src/tokens/stylesSalute/index.ts @@ -9,6 +9,9 @@ export const textPrimaryActive = 'var(--text-primary-active, #FFFFFFC4)'; /** Основной цвет текста */ export const textPrimary = 'var(--text-primary, #FFFFFFF5)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness, #FFFFF6FF)'; + /** Вторичный цвет текста */ export const textSecondaryHover = 'var(--text-secondary-hover, #FFFFFFFF)'; @@ -117,6 +120,9 @@ export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active, #FFFF /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary, #FFFFFFF5)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness, #FFFFF6FF)'; + /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #FFFFFFFF)'; @@ -225,6 +231,9 @@ export const onLightTextPrimaryActive = 'var(--on-light-text-primary-active, #08 /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary, #080808F5)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness, #171717FF)'; + /** Вторичный цвет текста на светлом фоне */ export const onLightTextSecondaryHover = 'var(--on-light-text-secondary-hover, #080808FF)'; @@ -333,6 +342,9 @@ export const inverseTextPrimaryActive = 'var(--inverse-text-primary-active, #080 /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary, #080808F5)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness, #171717FF)'; + /** Инвертированный вторичный цвет текста */ export const inverseTextSecondaryHover = 'var(--inverse-text-secondary-hover, #080808FF)'; @@ -369,6 +381,9 @@ export const surfaceSolidPrimaryActive = 'var(--surface-solid-primary-active, #1 /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности/контрола */ export const surfaceSolidSecondaryHover = 'var(--surface-solid-secondary-hover, #303030FF)'; @@ -396,6 +411,9 @@ export const surfaceSolidCardActive = 'var(--surface-solid-card-active, #121212F /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card, #171717)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness, #252525FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию */ export const surfaceSolidDefaultHover = 'var(--surface-solid-default-hover, #FFFFFFFF)'; @@ -441,6 +459,9 @@ export const surfaceTransparentCardActive = 'var(--surface-transparent-card-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card, #FFFFFF0F)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness, #FFFFFFFF)'; + /** Фон поверхности/контрола без заливки */ export const surfaceClearHover = 'var(--surface-clear-hover, #00000000)'; @@ -555,6 +576,9 @@ export const onDarkSurfaceSolidPrimaryActive = 'var(--on-dark-surface-solid-prim /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности/контрола на темном */ export const onDarkSurfaceSolidSecondaryHover = 'var(--on-dark-surface-solid-secondary-hover, #303030FF)'; @@ -582,6 +606,9 @@ export const onDarkSurfaceSolidCardActive = 'var(--on-dark-surface-solid-card-ac /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #171717)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness, #252525FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ export const onDarkSurfaceSolidDefaultHover = 'var(--on-dark-surface-solid-default-hover, #FFFFFFFF)'; @@ -627,6 +654,9 @@ export const onDarkSurfaceTransparentCardActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #FFFFFF0F)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Цвет фона поверхности/контрола успех на темном фоне */ export const onDarkSurfacePositiveHover = 'var(--on-dark-surface-positive-hover, #1DAF37FF)'; @@ -708,6 +738,9 @@ export const onLightSurfaceSolidPrimaryActive = 'var(--on-light-surface-solid-pr /** Основной непрозрачный фон поверхности/контрола на светлом */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F5F5F5)'; +/** Основной непрозрачный фон поверхности/контрола на светлом */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Вторичный непрозрачный фон поверхности/контрола на светлом */ export const onLightSurfaceSolidSecondaryHover = 'var(--on-light-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -735,6 +768,9 @@ export const onLightSurfaceSolidCardActive = 'var(--on-light-surface-solid-card- /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFFFF)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness, #FFFFFFFF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ export const onLightSurfaceSolidDefaultHover = 'var(--on-light-surface-solid-default-hover, #0D0D0DFF)'; @@ -790,6 +826,9 @@ export const onLightSurfaceTransparentCardActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, #FFFFFFFF)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Цвет фона поверхности/контрола успех на светлом фоне */ export const onLightSurfacePositiveHover = 'var(--on-light-surface-positive-hover, #1DAF37FF)'; @@ -865,6 +904,9 @@ export const onLightSurfaceAccentMain = 'var(--on-light-surface-accent-main, #1A /** Первичный фон */ export const backgroundPrimary = 'var(--background-primary, #000000FF)'; +/** Первичный фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, #0F0FFFFF)'; + /** Вторичный фон */ export const backgroundSecondary = 'var(--background-secondary, #171717)'; diff --git a/packages/themes/sdds-themes/src/css/sdds_cs.module.css b/packages/themes/sdds-themes/src/css/sdds_cs.module.css index aa2b4f984b..fd7738b9fd 100644 --- a/packages/themes/sdds-themes/src/css/sdds_cs.module.css +++ b/packages/themes/sdds-themes/src/css/sdds_cs.module.css @@ -2,54 +2,67 @@ .dark { --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary: #FFFFFF8F; --text-accent: #0C9C0C; --text-positive: #1A9E32; --text-negative: #FF293E; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary: #FFFFFF8F; --on-dark-text-accent: #0C9C0C; --on-dark-text-accent-minor: #94FF94; --on-dark-text-positive: #1A9E32; --on-dark-text-negative: #FF293E; --inverse-text-primary: #060A0CF5; + --inverse-text-primary-brightness: #191BF6FF; --inverse-text-secondary: #060A0C8F; --inverse-text-accent: #108210; --inverse-text-accent-minor: #082B08; --inverse-text-positive: #108E26; --inverse-text-negative: #F31B31; --surface-solid-primary: #13181B; + --surface-solid-primary-brightness: #212629FF; --surface-solid-card: #13181B; + --surface-solid-card-brightness: #212629FF; --surface-solid-default: #F7F9FB; --surface-accent: #0C9C0C; --surface-positive: #1A9E32; --surface-negative: #FF293E; --surface-info: #118CDF; --on-dark-surface-solid-primary: #13181B; + --on-dark-surface-solid-primary-brightness: #212629FF; --on-dark-surface-solid-card: #13181B; + --on-dark-surface-solid-card-brightness: #212629FF; --on-dark-surface-solid-default: #F7F9FB; --on-dark-surface-accent: #0C9C0C; --on-dark-surface-positive: #1A9E32; --on-dark-surface-negative: #FF293E; --on-dark-surface-info: #118CDF; --on-light-surface-solid-primary: #F2F5F8; + --on-light-surface-solid-primary-brightness: #F3F6F8FF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #060A0C; --on-light-surface-accent: #108210; --on-light-surface-positive: #1A9E32; --on-light-surface-negative: #FF293E; --on-light-surface-info: #118CDF; --inverse-surface-solid-primary: #F2F5F8; + --inverse-surface-solid-primary-brightness: #F3F6F8FF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default: #060A0C; --inverse-surface-accent: #108210; --inverse-surface-positive: #1A9E32; --inverse-surface-negative: #FF293E; --inverse-surface-info: #118CDF; --background-primary: #060A0C; + --background-primary-brightness: #15191BFF; --dark-background-primary: #060A0C; --light-background-primary: #F7F9FB; --inverse-background-primary: #F7F9FB; + --inverse-background-primary-brightness: #F7F9FBFF; --outline-solid-primary: #23292D; --outline-solid-secondary: #30373C; --outline-accent: #0C9C0C; @@ -107,54 +120,67 @@ .light { --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary: #FFFFFF8F; --text-accent: #0C9C0C; --text-positive: #1A9E32; --text-negative: #FF293E; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary: #FFFFFF8F; --on-dark-text-accent: #0C9C0C; --on-dark-text-accent-minor: #94FF94; --on-dark-text-positive: #1A9E32; --on-dark-text-negative: #FF293E; --inverse-text-primary: #060A0CF5; + --inverse-text-primary-brightness: #191BF6FF; --inverse-text-secondary: #060A0C8F; --inverse-text-accent: #108210; --inverse-text-accent-minor: #082B08; --inverse-text-positive: #108E26; --inverse-text-negative: #F31B31; --surface-solid-primary: #13181B; + --surface-solid-primary-brightness: #212629FF; --surface-solid-card: #13181B; + --surface-solid-card-brightness: #212629FF; --surface-solid-default: #F7F9FB; --surface-accent: #0C9C0C; --surface-positive: #1A9E32; --surface-negative: #FF293E; --surface-info: #118CDF; --on-dark-surface-solid-primary: #13181B; + --on-dark-surface-solid-primary-brightness: #212629FF; --on-dark-surface-solid-card: #13181B; + --on-dark-surface-solid-card-brightness: #212629FF; --on-dark-surface-solid-default: #F7F9FB; --on-dark-surface-accent: #0C9C0C; --on-dark-surface-positive: #1A9E32; --on-dark-surface-negative: #FF293E; --on-dark-surface-info: #118CDF; --on-light-surface-solid-primary: #F2F5F8; + --on-light-surface-solid-primary-brightness: #F3F6F8FF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #060A0C; --on-light-surface-accent: #108210; --on-light-surface-positive: #1A9E32; --on-light-surface-negative: #FF293E; --on-light-surface-info: #118CDF; --inverse-surface-solid-primary: #F2F5F8; + --inverse-surface-solid-primary-brightness: #F3F6F8FF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default: #060A0C; --inverse-surface-accent: #108210; --inverse-surface-positive: #1A9E32; --inverse-surface-negative: #FF293E; --inverse-surface-info: #118CDF; --background-primary: #060A0C; + --background-primary-brightness: #15191BFF; --dark-background-primary: #060A0C; --light-background-primary: #F7F9FB; --inverse-background-primary: #F7F9FB; + --inverse-background-primary-brightness: #F7F9FBFF; --outline-solid-primary: #23292D; --outline-solid-secondary: #30373C; --outline-accent: #0C9C0C; diff --git a/packages/themes/sdds-themes/src/css/sdds_cs__dark.css b/packages/themes/sdds-themes/src/css/sdds_cs__dark.css index d775de09f4..941c550e7d 100644 --- a/packages/themes/sdds-themes/src/css/sdds_cs__dark.css +++ b/packages/themes/sdds-themes/src/css/sdds_cs__dark.css @@ -2,54 +2,67 @@ :root { --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary: #FFFFFF8F; --text-accent: #0C9C0C; --text-positive: #1A9E32; --text-negative: #FF293E; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary: #FFFFFF8F; --on-dark-text-accent: #0C9C0C; --on-dark-text-accent-minor: #94FF94; --on-dark-text-positive: #1A9E32; --on-dark-text-negative: #FF293E; --inverse-text-primary: #060A0CF5; + --inverse-text-primary-brightness: #191BF6FF; --inverse-text-secondary: #060A0C8F; --inverse-text-accent: #108210; --inverse-text-accent-minor: #082B08; --inverse-text-positive: #108E26; --inverse-text-negative: #F31B31; --surface-solid-primary: #13181B; + --surface-solid-primary-brightness: #212629FF; --surface-solid-card: #13181B; + --surface-solid-card-brightness: #212629FF; --surface-solid-default: #F7F9FB; --surface-accent: #0C9C0C; --surface-positive: #1A9E32; --surface-negative: #FF293E; --surface-info: #118CDF; --on-dark-surface-solid-primary: #13181B; + --on-dark-surface-solid-primary-brightness: #212629FF; --on-dark-surface-solid-card: #13181B; + --on-dark-surface-solid-card-brightness: #212629FF; --on-dark-surface-solid-default: #F7F9FB; --on-dark-surface-accent: #0C9C0C; --on-dark-surface-positive: #1A9E32; --on-dark-surface-negative: #FF293E; --on-dark-surface-info: #118CDF; --on-light-surface-solid-primary: #F2F5F8; + --on-light-surface-solid-primary-brightness: #F3F6F8FF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #060A0C; --on-light-surface-accent: #108210; --on-light-surface-positive: #1A9E32; --on-light-surface-negative: #FF293E; --on-light-surface-info: #118CDF; --inverse-surface-solid-primary: #F2F5F8; + --inverse-surface-solid-primary-brightness: #F3F6F8FF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default: #060A0C; --inverse-surface-accent: #108210; --inverse-surface-positive: #1A9E32; --inverse-surface-negative: #FF293E; --inverse-surface-info: #118CDF; --background-primary: #060A0C; + --background-primary-brightness: #15191BFF; --dark-background-primary: #060A0C; --light-background-primary: #F7F9FB; --inverse-background-primary: #F7F9FB; + --inverse-background-primary-brightness: #F7F9FBFF; --outline-solid-primary: #23292D; --outline-solid-secondary: #30373C; --outline-accent: #0C9C0C; diff --git a/packages/themes/sdds-themes/src/css/sdds_cs__light.css b/packages/themes/sdds-themes/src/css/sdds_cs__light.css index cdf7cfa589..4e60de152a 100644 --- a/packages/themes/sdds-themes/src/css/sdds_cs__light.css +++ b/packages/themes/sdds-themes/src/css/sdds_cs__light.css @@ -2,54 +2,67 @@ :root { --text-primary: #23292D; + --text-primary-brightness: #30363AFF; --text-secondary: #7B868E; --text-accent: #108210; --text-negative: #E31227; --text-positive: #108210; --on-dark-text-primary: #F7F9FB; + --on-dark-text-primary-brightness: #F7F9FBFF; --on-dark-text-secondary: #7B868E; --on-dark-text-accent: #15B015; --on-dark-text-accent-minor: #94FF94; --on-dark-text-negative: #FF293E; --on-dark-text-positive: #15B015; --inverse-text-primary: #F7F9FB; + --inverse-text-primary-brightness: #F7F9FBFF; --inverse-text-secondary: #7B868E; --inverse-text-accent: #15B015; --inverse-text-accent-minor: #94FF94; --inverse-text-positive: #15B015; --inverse-text-negative: #FF293E; --surface-solid-primary: #E8EEF2; + --surface-solid-primary-brightness: #E9EFF3FF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default: #657179; --surface-accent: #0B8C0B; --surface-positive: #0B8C0B; --surface-negative: #F31B31; --surface-info: #2A72F8; --on-dark-surface-solid-primary: #30373C; + --on-dark-surface-solid-primary-brightness: #3C4348FF; --on-dark-surface-solid-card: #13181B; + --on-dark-surface-solid-card-brightness: #212629FF; --on-dark-surface-solid-default: #E8EEF2; --on-dark-surface-accent: #0C9C0C; --on-dark-surface-positive: #0C9C0C; --on-dark-surface-negative: #FF293E; --on-dark-surface-info: #3F81FD; --on-light-surface-solid-primary: #E8EEF2; + --on-light-surface-solid-primary-brightness: #E9EFF3FF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #657179; --on-light-surface-accent: #0B8C0B; --on-light-surface-positive: #0B8C0B; --on-light-surface-negative: #F31B31; --on-light-surface-info: #2A72F8; --inverse-surface-solid-primary: #30373C; + --inverse-surface-solid-primary-brightness: #3C4348FF; --inverse-surface-solid-card: #13181B; + --inverse-surface-solid-card-brightness: #212629FF; --inverse-surface-solid-default: #E8EEF2; --inverse-surface-accent: #0C9C0C; --inverse-surface-positive: #0C9C0C; --inverse-surface-negative: #FF293E; --inverse-surface-info: #3F81FD; --background-primary: #F2F5F8; + --background-primary-brightness: #F3F6F8FF; --dark-background-primary: #060A0C; --light-background-primary: #F2F5F8; --inverse-background-primary: #060A0C; + --inverse-background-primary-brightness: #15191BFF; --outline-solid-primary: #C0CBD3; --outline-solid-secondary: #7B868E; --outline-positive: #108210; diff --git a/packages/themes/sdds-themes/src/css/sdds_dfa.module.css b/packages/themes/sdds-themes/src/css/sdds_dfa.module.css index 154ebe63ac..ed77a4c786 100644 --- a/packages/themes/sdds-themes/src/css/sdds_dfa.module.css +++ b/packages/themes/sdds-themes/src/css/sdds_dfa.module.css @@ -30,6 +30,7 @@ --text-info-minor-hover: #94D4FFFF; --text-info-minor-active: #B3E0FFFF; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary: #F5F5F58F; --text-tertiary: #F5F5F547; --text-paragraph: #F5F5F5CC; @@ -66,6 +67,7 @@ --on-dark-text-info-minor-hover: #94D4FFFF; --on-dark-text-info-minor-active: #B3E0FFFF; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary: #F5F5F547; --on-dark-text-paragraph: #F5F5F5CC; @@ -102,6 +104,7 @@ --on-light-text-info-minor-hover: #174B6EFF; --on-light-text-info-minor-active: #113A55FF; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #252525FF; --on-light-text-secondary: #1717178F; --on-light-text-tertiary: #17171747; --on-light-text-paragraph: #171717CC; @@ -138,6 +141,7 @@ --inverse-text-info-minor-hover: #174B6EFF; --inverse-text-info-minor-active: #113A55FF; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #252525FF; --inverse-text-secondary: #1717178F; --inverse-text-tertiary: #17171747; --inverse-text-paragraph: #171717CC; @@ -199,7 +203,9 @@ --surface-transparent-info-active: #118CDF38; --surface-clear: #FFFFFF00; --surface-solid-card: #262626; + --surface-solid-card-brightness: #333333FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary: #262626; --surface-solid-tertiary: #363636; --surface-solid-default: #F9F9F9; @@ -208,6 +214,7 @@ --surface-warning: #FF7024; --surface-negative: #FF3D51; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-transparent-primary: #FFFFFF0F; --surface-transparent-secondary: #FFFFFF1F; --surface-transparent-tertiary: #FFFFFF33; @@ -269,15 +276,18 @@ --on-dark-surface-transparent-info-active: #118CDF38; --on-dark-surface-clear: #FFFFFF00; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary: #262626; --on-dark-surface-solid-tertiary: #363636; --on-dark-surface-solid-card: #262626; + --on-dark-surface-solid-card-brightness: #333333FF; --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-accent: #00AC7B; --on-dark-surface-positive: #24B23E; --on-dark-surface-warning: #FF7024; --on-dark-surface-negative: #FF3D51; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary: #FFFFFF33; @@ -338,9 +348,11 @@ --on-light-surface-transparent-info-hover: #118CDF66; --on-light-surface-transparent-info-active: #118CDF38; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary: #DDDDDD; --on-light-surface-solid-tertiary: #C7C7C7; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #080808; --on-light-surface-clear: #FFFFFF00; --on-light-surface-accent: #05996F; @@ -348,6 +360,7 @@ --on-light-surface-warning: #FA5F05; --on-light-surface-negative: #FF293E; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary: #0808081F; @@ -408,9 +421,11 @@ --inverse-surface-transparent-info-hover: #118CDF66; --inverse-surface-transparent-info-active: #118CDF38; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary: #DDDDDD; --inverse-surface-solid-tertiary: #C7C7C7; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default: #080808; --inverse-surface-clear: #FFFFFF00; --inverse-surface-accent: #05996F; @@ -418,6 +433,7 @@ --inverse-surface-warning: #FA5F05; --inverse-surface-negative: #FF293E; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-transparent-primary: #08080805; --inverse-surface-transparent-secondary: #0808080F; --inverse-surface-transparent-tertiary: #0808081F; @@ -426,9 +442,11 @@ --inverse-surface-transparent-warning: #FA5F051F; --inverse-surface-transparent-negative: #FF293E1F; --background-primary: #171717; + --background-primary-brightness: #252525FF; --dark-background-primary: #171717; --light-background-primary: #F5F5F5; --inverse-background-primary: #F5F5F5; + --inverse-background-primary-brightness: #F6F6F6FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080833; @@ -526,6 +544,7 @@ --text-info-minor-hover: #94D4FFFF; --text-info-minor-active: #B3E0FFFF; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary: #F5F5F58F; --text-tertiary: #F5F5F547; --text-paragraph: #F5F5F5CC; @@ -562,6 +581,7 @@ --on-dark-text-info-minor-hover: #94D4FFFF; --on-dark-text-info-minor-active: #B3E0FFFF; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary: #F5F5F547; --on-dark-text-paragraph: #F5F5F5CC; @@ -598,6 +618,7 @@ --on-light-text-info-minor-hover: #174B6EFF; --on-light-text-info-minor-active: #113A55FF; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #252525FF; --on-light-text-secondary: #1717178F; --on-light-text-tertiary: #17171747; --on-light-text-paragraph: #171717CC; @@ -634,6 +655,7 @@ --inverse-text-info-minor-hover: #174B6EFF; --inverse-text-info-minor-active: #113A55FF; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #252525FF; --inverse-text-secondary: #1717178F; --inverse-text-tertiary: #17171747; --inverse-text-paragraph: #171717CC; @@ -695,7 +717,9 @@ --surface-transparent-info-active: #118CDF38; --surface-clear: #FFFFFF00; --surface-solid-card: #262626; + --surface-solid-card-brightness: #333333FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary: #262626; --surface-solid-tertiary: #363636; --surface-solid-default: #F9F9F9; @@ -704,6 +728,7 @@ --surface-warning: #FF7024; --surface-negative: #FF3D51; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-transparent-primary: #FFFFFF0F; --surface-transparent-secondary: #FFFFFF1F; --surface-transparent-tertiary: #FFFFFF33; @@ -765,15 +790,18 @@ --on-dark-surface-transparent-info-active: #118CDF38; --on-dark-surface-clear: #FFFFFF00; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary: #262626; --on-dark-surface-solid-tertiary: #363636; --on-dark-surface-solid-card: #262626; + --on-dark-surface-solid-card-brightness: #333333FF; --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-accent: #00AC7B; --on-dark-surface-positive: #24B23E; --on-dark-surface-warning: #FF7024; --on-dark-surface-negative: #FF3D51; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary: #FFFFFF33; @@ -834,9 +862,11 @@ --on-light-surface-transparent-info-hover: #118CDF66; --on-light-surface-transparent-info-active: #118CDF38; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary: #DDDDDD; --on-light-surface-solid-tertiary: #C7C7C7; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #080808; --on-light-surface-clear: #FFFFFF00; --on-light-surface-accent: #05996F; @@ -844,6 +874,7 @@ --on-light-surface-warning: #FA5F05; --on-light-surface-negative: #FF293E; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary: #0808081F; @@ -904,9 +935,11 @@ --inverse-surface-transparent-info-hover: #118CDF66; --inverse-surface-transparent-info-active: #118CDF38; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary: #DDDDDD; --inverse-surface-solid-tertiary: #C7C7C7; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default: #080808; --inverse-surface-clear: #FFFFFF00; --inverse-surface-accent: #05996F; @@ -914,6 +947,7 @@ --inverse-surface-warning: #FA5F05; --inverse-surface-negative: #FF293E; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-transparent-primary: #08080805; --inverse-surface-transparent-secondary: #0808080F; --inverse-surface-transparent-tertiary: #0808081F; @@ -922,9 +956,11 @@ --inverse-surface-transparent-warning: #FA5F051F; --inverse-surface-transparent-negative: #FF293E1F; --background-primary: #171717; + --background-primary-brightness: #252525FF; --dark-background-primary: #171717; --light-background-primary: #F5F5F5; --inverse-background-primary: #F5F5F5; + --inverse-background-primary-brightness: #F6F6F6FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080833; diff --git a/packages/themes/sdds-themes/src/css/sdds_dfa__dark.css b/packages/themes/sdds-themes/src/css/sdds_dfa__dark.css index 81ed9ac510..edc17cfc31 100644 --- a/packages/themes/sdds-themes/src/css/sdds_dfa__dark.css +++ b/packages/themes/sdds-themes/src/css/sdds_dfa__dark.css @@ -30,6 +30,7 @@ --text-info-minor-hover: #94D4FFFF; --text-info-minor-active: #B3E0FFFF; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary: #F5F5F58F; --text-tertiary: #F5F5F547; --text-paragraph: #F5F5F5CC; @@ -66,6 +67,7 @@ --on-dark-text-info-minor-hover: #94D4FFFF; --on-dark-text-info-minor-active: #B3E0FFFF; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary: #F5F5F547; --on-dark-text-paragraph: #F5F5F5CC; @@ -102,6 +104,7 @@ --on-light-text-info-minor-hover: #174B6EFF; --on-light-text-info-minor-active: #113A55FF; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #252525FF; --on-light-text-secondary: #1717178F; --on-light-text-tertiary: #17171747; --on-light-text-paragraph: #171717CC; @@ -138,6 +141,7 @@ --inverse-text-info-minor-hover: #174B6EFF; --inverse-text-info-minor-active: #113A55FF; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #252525FF; --inverse-text-secondary: #1717178F; --inverse-text-tertiary: #17171747; --inverse-text-paragraph: #171717CC; @@ -199,7 +203,9 @@ --surface-transparent-info-active: #118CDF38; --surface-clear: #FFFFFF00; --surface-solid-card: #262626; + --surface-solid-card-brightness: #333333FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary: #262626; --surface-solid-tertiary: #363636; --surface-solid-default: #F9F9F9; @@ -208,6 +214,7 @@ --surface-warning: #FF7024; --surface-negative: #FF3D51; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-transparent-primary: #FFFFFF0F; --surface-transparent-secondary: #FFFFFF1F; --surface-transparent-tertiary: #FFFFFF33; @@ -269,15 +276,18 @@ --on-dark-surface-transparent-info-active: #118CDF38; --on-dark-surface-clear: #FFFFFF00; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary: #262626; --on-dark-surface-solid-tertiary: #363636; --on-dark-surface-solid-card: #262626; + --on-dark-surface-solid-card-brightness: #333333FF; --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-accent: #00AC7B; --on-dark-surface-positive: #24B23E; --on-dark-surface-warning: #FF7024; --on-dark-surface-negative: #FF3D51; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary: #FFFFFF33; @@ -338,9 +348,11 @@ --on-light-surface-transparent-info-hover: #118CDF66; --on-light-surface-transparent-info-active: #118CDF38; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary: #DDDDDD; --on-light-surface-solid-tertiary: #C7C7C7; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #080808; --on-light-surface-clear: #FFFFFF00; --on-light-surface-accent: #05996F; @@ -348,6 +360,7 @@ --on-light-surface-warning: #FA5F05; --on-light-surface-negative: #FF293E; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary: #0808081F; @@ -408,9 +421,11 @@ --inverse-surface-transparent-info-hover: #118CDF66; --inverse-surface-transparent-info-active: #118CDF38; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary: #DDDDDD; --inverse-surface-solid-tertiary: #C7C7C7; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default: #080808; --inverse-surface-clear: #FFFFFF00; --inverse-surface-accent: #05996F; @@ -418,6 +433,7 @@ --inverse-surface-warning: #FA5F05; --inverse-surface-negative: #FF293E; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-transparent-primary: #08080805; --inverse-surface-transparent-secondary: #0808080F; --inverse-surface-transparent-tertiary: #0808081F; @@ -426,9 +442,11 @@ --inverse-surface-transparent-warning: #FA5F051F; --inverse-surface-transparent-negative: #FF293E1F; --background-primary: #171717; + --background-primary-brightness: #252525FF; --dark-background-primary: #171717; --light-background-primary: #F5F5F5; --inverse-background-primary: #F5F5F5; + --inverse-background-primary-brightness: #F6F6F6FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080833; diff --git a/packages/themes/sdds-themes/src/css/sdds_dfa__light.css b/packages/themes/sdds-themes/src/css/sdds_dfa__light.css index 383fee5411..da9df94def 100644 --- a/packages/themes/sdds-themes/src/css/sdds_dfa__light.css +++ b/packages/themes/sdds-themes/src/css/sdds_dfa__light.css @@ -30,6 +30,7 @@ --text-info-minor-hover: #1A577FFF; --text-info-minor-active: #13405DFF; --text-primary: #171717F5; + --text-primary-brightness: #252525FF; --text-secondary: #1717178F; --text-tertiary: #17171747; --text-paragraph: #171717CC; @@ -66,6 +67,7 @@ --on-dark-text-info-minor-hover: #FAFDFFFF; --on-dark-text-info-minor-active: #A8DCFFFF; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary: #F5F5F547; --on-dark-text-paragraph: #F5F5F5CC; @@ -102,6 +104,7 @@ --on-light-text-info-minor-hover: #1A577FFF; --on-light-text-info-minor-active: #13405DFF; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #252525FF; --on-light-text-secondary: #1717178F; --on-light-text-tertiary: #17171747; --on-light-text-paragraph: #171717CC; @@ -138,6 +141,7 @@ --inverse-text-info-minor-hover: #FAFDFFFF; --inverse-text-info-minor-active: #A8DCFFFF; --inverse-text-primary: #F5F5F5F5; + --inverse-text-primary-brightness: #F6F6F6FF; --inverse-text-secondary: #F5F5F58F; --inverse-text-tertiary: #F5F5F547; --inverse-text-paragraph: #F5F5F5CC; @@ -198,15 +202,18 @@ --surface-transparent-info-hover: #118CDF33; --surface-transparent-info-active: #118CDF52; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary: #DDDDDD; --surface-solid-tertiary: #C7C7C7; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default: #080808; --surface-transparent-primary: #08080805; --surface-transparent-secondary: #0808080F; --surface-transparent-tertiary: #0808081F; --surface-transparent-deep: #080808A3; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear: #FFFFFF00; --surface-accent: #00AC7B; --surface-negative: #FF293E; @@ -268,7 +275,9 @@ --on-dark-surface-transparent-info-hover: #118CDF33; --on-dark-surface-transparent-info-active: #118CDF52; --on-dark-surface-solid-card: #262626; + --on-dark-surface-solid-card-brightness: #333333FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary: #262626; --on-dark-surface-solid-tertiary: #363636; --on-dark-surface-solid-default: #F9F9F9; @@ -277,6 +286,7 @@ --on-dark-surface-transparent-tertiary: #FFFFFF33; --on-dark-surface-transparent-deep: #FFFFFFA3; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-clear: #FFFFFF00; --on-dark-surface-accent: #00AC7B; --on-dark-surface-positive: #24B23E; @@ -338,12 +348,15 @@ --on-light-surface-transparent-info-hover: #118CDF33; --on-light-surface-transparent-info-active: #118CDF52; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary: #DDDDDD; --on-light-surface-solid-tertiary: #C7C7C7; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #080808; --on-light-surface-clear: #FFFFFF00; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary: #0808081F; @@ -409,11 +422,14 @@ --inverse-surface-transparent-info-active: #118CDF52; --inverse-surface-clear: #FFFFFF00; --inverse-surface-solid-card: #262626; + --inverse-surface-solid-card-brightness: #333333FF; --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #252525FF; --inverse-surface-solid-secondary: #262626; --inverse-surface-solid-tertiary: #363636; --inverse-surface-solid-default: #F9F9F9; --inverse-surface-transparent-card: #FFFFFF1F; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-transparent-primary: #FFFFFF0F; --inverse-surface-transparent-secondary: #FFFFFF1F; --inverse-surface-transparent-tertiary: #FFFFFF33; @@ -426,9 +442,11 @@ --inverse-surface-transparent-warning: #FF702433; --inverse-surface-transparent-negative: #FF3D5133; --background-primary: #F5F5F5; + --background-primary-brightness: #F6F6F6FF; --dark-background-primary: #171717; --light-background-primary: #F5F5F5; --inverse-background-primary: #171717; + --inverse-background-primary-brightness: #252525FF; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F933; diff --git a/packages/themes/sdds-themes/src/css/sdds_serv.module.css b/packages/themes/sdds-themes/src/css/sdds_serv.module.css index 2f1d47e5a6..1888c33002 100644 --- a/packages/themes/sdds-themes/src/css/sdds_serv.module.css +++ b/packages/themes/sdds-themes/src/css/sdds_serv.module.css @@ -4,6 +4,7 @@ --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; --text-secondary: #F5F5F58F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #17171793; --inverse-text-primary-active: #171717C4; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #2525F6FF; --inverse-text-secondary-hover: #171717FF; --inverse-text-secondary-active: #171717AB; --inverse-text-secondary: #1717178F; @@ -100,6 +104,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -109,6 +114,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #F5F5F5FF; --surface-solid-default: #F9F9F9; @@ -127,6 +133,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFF1DFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -154,6 +161,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -163,6 +171,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -181,6 +190,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -199,6 +209,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -208,6 +219,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -226,6 +238,7 @@ --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; --on-light-surface-transparent-card: #0808080F; + --on-light-surface-transparent-card-brightness: #171717FF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -244,6 +257,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -253,6 +267,7 @@ --inverse-surface-solid-card-hover: #FFFFFFFF; --inverse-surface-solid-card-active: #FFFFFFFF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default-hover: #0D0D0DFF; --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; @@ -271,6 +286,7 @@ --inverse-surface-transparent-card-hover: #FFFFFFFF; --inverse-surface-transparent-card-active: #FFFFFFFF; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -287,9 +303,11 @@ --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #F9F9F9FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; @@ -361,6 +379,7 @@ --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; --text-secondary: #F5F5F58F; @@ -385,6 +404,7 @@ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -409,6 +429,7 @@ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -433,6 +454,7 @@ --inverse-text-primary-hover: #17171793; --inverse-text-primary-active: #171717C4; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #2525F6FF; --inverse-text-secondary-hover: #171717FF; --inverse-text-secondary-active: #171717AB; --inverse-text-secondary: #1717178F; @@ -457,6 +479,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -466,6 +489,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #F5F5F5FF; --surface-solid-default: #F9F9F9; @@ -484,6 +508,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFF1DFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -511,6 +536,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -520,6 +546,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -538,6 +565,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -556,6 +584,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -565,6 +594,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -583,6 +613,7 @@ --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; --on-light-surface-transparent-card: #0808080F; + --on-light-surface-transparent-card-brightness: #171717FF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -601,6 +632,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -610,6 +642,7 @@ --inverse-surface-solid-card-hover: #FFFFFFFF; --inverse-surface-solid-card-active: #FFFFFFFF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default-hover: #0D0D0DFF; --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; @@ -628,6 +661,7 @@ --inverse-surface-transparent-card-hover: #FFFFFFFF; --inverse-surface-transparent-card-active: #FFFFFFFF; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -644,9 +678,11 @@ --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #F9F9F9FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; diff --git a/packages/themes/sdds-themes/src/css/sdds_serv__dark.css b/packages/themes/sdds-themes/src/css/sdds_serv__dark.css index 3556f2f2f3..272606d90f 100644 --- a/packages/themes/sdds-themes/src/css/sdds_serv__dark.css +++ b/packages/themes/sdds-themes/src/css/sdds_serv__dark.css @@ -4,6 +4,7 @@ --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; --text-secondary: #F5F5F58F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #17171793; --inverse-text-primary-active: #171717C4; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #2525F6FF; --inverse-text-secondary-hover: #171717FF; --inverse-text-secondary-active: #171717AB; --inverse-text-secondary: #1717178F; @@ -100,6 +104,7 @@ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -109,6 +114,7 @@ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #F5F5F5FF; --surface-solid-default: #F9F9F9; @@ -127,6 +133,7 @@ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFF1DFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -154,6 +161,7 @@ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -163,6 +171,7 @@ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -181,6 +190,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -199,6 +209,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -208,6 +219,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -226,6 +238,7 @@ --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; --on-light-surface-transparent-card: #0808080F; + --on-light-surface-transparent-card-brightness: #171717FF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -244,6 +257,7 @@ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -253,6 +267,7 @@ --inverse-surface-solid-card-hover: #FFFFFFFF; --inverse-surface-solid-card-active: #FFFFFFFF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default-hover: #0D0D0DFF; --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; @@ -271,6 +286,7 @@ --inverse-surface-transparent-card-hover: #FFFFFFFF; --inverse-surface-transparent-card-active: #FFFFFFFF; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -287,9 +303,11 @@ --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #F9F9F9FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; diff --git a/packages/themes/sdds-themes/src/css/sdds_serv__light.css b/packages/themes/sdds-themes/src/css/sdds_serv__light.css index 9e6b252fc7..e611f19932 100644 --- a/packages/themes/sdds-themes/src/css/sdds_serv__light.css +++ b/packages/themes/sdds-themes/src/css/sdds_serv__light.css @@ -4,6 +4,7 @@ --text-primary-hover: #17171793; --text-primary-active: #171717C4; --text-primary: #171717F5; + --text-primary-brightness: #2525F6FF; --text-secondary-hover: #171717FF; --text-secondary-active: #171717AB; --text-secondary: #1717178F; @@ -28,6 +29,7 @@ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -52,6 +54,7 @@ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -76,6 +79,7 @@ --inverse-text-primary-hover: #F5F5F593; --inverse-text-primary-active: #F5F5F5C4; --inverse-text-primary: #F5F5F5F5; + --inverse-text-primary-brightness: #F6F6F6FF; --inverse-text-secondary-hover: #F5F5F5FF; --inverse-text-secondary-active: #F5F5F5AB; --inverse-text-secondary: #F5F5F58F; @@ -100,6 +104,7 @@ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -109,6 +114,7 @@ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -127,6 +133,7 @@ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -154,6 +161,7 @@ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -163,6 +171,7 @@ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -181,6 +190,7 @@ --on-dark-surface-transparent-card-hover: #FFFFFF05; --on-dark-surface-transparent-card-active: #FFFFFF1A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -199,6 +209,7 @@ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -208,6 +219,7 @@ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -226,6 +238,7 @@ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -244,6 +257,7 @@ --inverse-surface-solid-primary-hover: #363636FF; --inverse-surface-solid-primary-active: #0D0D0DFF; --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #252525FF; --inverse-surface-solid-secondary-hover: #3B3B3BFF; --inverse-surface-solid-secondary-active: #1C1C1CFF; --inverse-surface-solid-secondary: #262626; @@ -253,6 +267,7 @@ --inverse-surface-solid-card-hover: #363636FF; --inverse-surface-solid-card-active: #0D0D0DFF; --inverse-surface-solid-card: #171717; + --inverse-surface-solid-card-brightness: #252525FF; --inverse-surface-solid-default-hover: #FFFFFFFF; --inverse-surface-solid-default-active: #F5F5F5FF; --inverse-surface-solid-default: #F9F9F9; @@ -271,6 +286,7 @@ --inverse-surface-transparent-card-hover: #FFFFFF05; --inverse-surface-transparent-card-active: #FFFFFF1A; --inverse-surface-transparent-card: #FFFFFF0F; + --inverse-surface-transparent-card-brightness: #FFFF1DFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -287,9 +303,11 @@ --inverse-surface-negative-active: #FF142CFF; --inverse-surface-negative: #FF293E; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #080808; + --inverse-background-primary-brightness: #171717FF; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; diff --git a/packages/themes/sdds-themes/src/themes/sdds_cs__dark.ts b/packages/themes/sdds-themes/src/themes/sdds_cs__dark.ts index a4bbfe95bc..0cb2a8d7b2 100644 --- a/packages/themes/sdds-themes/src/themes/sdds_cs__dark.ts +++ b/packages/themes/sdds-themes/src/themes/sdds_cs__dark.ts @@ -4,54 +4,67 @@ export const sdds_cs__dark = ([ ` :root { --text-primary: #FFFFFFF5; + --text-primary-brightness: #FFFFFFFF; --text-secondary: #FFFFFF8F; --text-accent: #0C9C0C; --text-positive: #1A9E32; --text-negative: #FF293E; --on-dark-text-primary: #FFFFFFF5; + --on-dark-text-primary-brightness: #FFFFFFFF; --on-dark-text-secondary: #FFFFFF8F; --on-dark-text-accent: #0C9C0C; --on-dark-text-accent-minor: #94FF94; --on-dark-text-positive: #1A9E32; --on-dark-text-negative: #FF293E; --inverse-text-primary: #060A0CF5; + --inverse-text-primary-brightness: #191BF6FF; --inverse-text-secondary: #060A0C8F; --inverse-text-accent: #108210; --inverse-text-accent-minor: #082B08; --inverse-text-positive: #108E26; --inverse-text-negative: #F31B31; --surface-solid-primary: #13181B; + --surface-solid-primary-brightness: #212629FF; --surface-solid-card: #13181B; + --surface-solid-card-brightness: #212629FF; --surface-solid-default: #F7F9FB; --surface-accent: #0C9C0C; --surface-positive: #1A9E32; --surface-negative: #FF293E; --surface-info: #118CDF; --on-dark-surface-solid-primary: #13181B; + --on-dark-surface-solid-primary-brightness: #212629FF; --on-dark-surface-solid-card: #13181B; + --on-dark-surface-solid-card-brightness: #212629FF; --on-dark-surface-solid-default: #F7F9FB; --on-dark-surface-accent: #0C9C0C; --on-dark-surface-positive: #1A9E32; --on-dark-surface-negative: #FF293E; --on-dark-surface-info: #118CDF; --on-light-surface-solid-primary: #F2F5F8; + --on-light-surface-solid-primary-brightness: #F3F6F8FF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #060A0C; --on-light-surface-accent: #108210; --on-light-surface-positive: #1A9E32; --on-light-surface-negative: #FF293E; --on-light-surface-info: #118CDF; --inverse-surface-solid-primary: #F2F5F8; + --inverse-surface-solid-primary-brightness: #F3F6F8FF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default: #060A0C; --inverse-surface-accent: #108210; --inverse-surface-positive: #1A9E32; --inverse-surface-negative: #FF293E; --inverse-surface-info: #118CDF; --background-primary: #060A0C; + --background-primary-brightness: #15191BFF; --dark-background-primary: #060A0C; --light-background-primary: #F7F9FB; --inverse-background-primary: #F7F9FB; + --inverse-background-primary-brightness: #F7F9FBFF; --outline-solid-primary: #23292D; --outline-solid-secondary: #30373C; --outline-accent: #0C9C0C; diff --git a/packages/themes/sdds-themes/src/themes/sdds_cs__light.ts b/packages/themes/sdds-themes/src/themes/sdds_cs__light.ts index 0e5dc4fb0e..1723edd377 100644 --- a/packages/themes/sdds-themes/src/themes/sdds_cs__light.ts +++ b/packages/themes/sdds-themes/src/themes/sdds_cs__light.ts @@ -4,54 +4,67 @@ export const sdds_cs__light = ([ ` :root { --text-primary: #23292D; + --text-primary-brightness: #30363AFF; --text-secondary: #7B868E; --text-accent: #108210; --text-negative: #E31227; --text-positive: #108210; --on-dark-text-primary: #F7F9FB; + --on-dark-text-primary-brightness: #F7F9FBFF; --on-dark-text-secondary: #7B868E; --on-dark-text-accent: #15B015; --on-dark-text-accent-minor: #94FF94; --on-dark-text-negative: #FF293E; --on-dark-text-positive: #15B015; --inverse-text-primary: #F7F9FB; + --inverse-text-primary-brightness: #F7F9FBFF; --inverse-text-secondary: #7B868E; --inverse-text-accent: #15B015; --inverse-text-accent-minor: #94FF94; --inverse-text-positive: #15B015; --inverse-text-negative: #FF293E; --surface-solid-primary: #E8EEF2; + --surface-solid-primary-brightness: #E9EFF3FF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default: #657179; --surface-accent: #0B8C0B; --surface-positive: #0B8C0B; --surface-negative: #F31B31; --surface-info: #2A72F8; --on-dark-surface-solid-primary: #30373C; + --on-dark-surface-solid-primary-brightness: #3C4348FF; --on-dark-surface-solid-card: #13181B; + --on-dark-surface-solid-card-brightness: #212629FF; --on-dark-surface-solid-default: #E8EEF2; --on-dark-surface-accent: #0C9C0C; --on-dark-surface-positive: #0C9C0C; --on-dark-surface-negative: #FF293E; --on-dark-surface-info: #3F81FD; --on-light-surface-solid-primary: #E8EEF2; + --on-light-surface-solid-primary-brightness: #E9EFF3FF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #657179; --on-light-surface-accent: #0B8C0B; --on-light-surface-positive: #0B8C0B; --on-light-surface-negative: #F31B31; --on-light-surface-info: #2A72F8; --inverse-surface-solid-primary: #30373C; + --inverse-surface-solid-primary-brightness: #3C4348FF; --inverse-surface-solid-card: #13181B; + --inverse-surface-solid-card-brightness: #212629FF; --inverse-surface-solid-default: #E8EEF2; --inverse-surface-accent: #0C9C0C; --inverse-surface-positive: #0C9C0C; --inverse-surface-negative: #FF293E; --inverse-surface-info: #3F81FD; --background-primary: #F2F5F8; + --background-primary-brightness: #F3F6F8FF; --dark-background-primary: #060A0C; --light-background-primary: #F2F5F8; --inverse-background-primary: #060A0C; + --inverse-background-primary-brightness: #15191BFF; --outline-solid-primary: #C0CBD3; --outline-solid-secondary: #7B868E; --outline-positive: #108210; diff --git a/packages/themes/sdds-themes/src/themes/sdds_dfa__dark.ts b/packages/themes/sdds-themes/src/themes/sdds_dfa__dark.ts index f019fdb647..59c25f240f 100644 --- a/packages/themes/sdds-themes/src/themes/sdds_dfa__dark.ts +++ b/packages/themes/sdds-themes/src/themes/sdds_dfa__dark.ts @@ -32,6 +32,7 @@ export const sdds_dfa__dark = ([ --text-info-minor-hover: #94D4FFFF; --text-info-minor-active: #B3E0FFFF; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary: #F5F5F58F; --text-tertiary: #F5F5F547; --text-paragraph: #F5F5F5CC; @@ -68,6 +69,7 @@ export const sdds_dfa__dark = ([ --on-dark-text-info-minor-hover: #94D4FFFF; --on-dark-text-info-minor-active: #B3E0FFFF; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary: #F5F5F547; --on-dark-text-paragraph: #F5F5F5CC; @@ -104,6 +106,7 @@ export const sdds_dfa__dark = ([ --on-light-text-info-minor-hover: #174B6EFF; --on-light-text-info-minor-active: #113A55FF; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #252525FF; --on-light-text-secondary: #1717178F; --on-light-text-tertiary: #17171747; --on-light-text-paragraph: #171717CC; @@ -140,6 +143,7 @@ export const sdds_dfa__dark = ([ --inverse-text-info-minor-hover: #174B6EFF; --inverse-text-info-minor-active: #113A55FF; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #252525FF; --inverse-text-secondary: #1717178F; --inverse-text-tertiary: #17171747; --inverse-text-paragraph: #171717CC; @@ -201,7 +205,9 @@ export const sdds_dfa__dark = ([ --surface-transparent-info-active: #118CDF38; --surface-clear: #FFFFFF00; --surface-solid-card: #262626; + --surface-solid-card-brightness: #333333FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary: #262626; --surface-solid-tertiary: #363636; --surface-solid-default: #F9F9F9; @@ -210,6 +216,7 @@ export const sdds_dfa__dark = ([ --surface-warning: #FF7024; --surface-negative: #FF3D51; --surface-transparent-card: #FFFFFF1F; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-transparent-primary: #FFFFFF0F; --surface-transparent-secondary: #FFFFFF1F; --surface-transparent-tertiary: #FFFFFF33; @@ -271,15 +278,18 @@ export const sdds_dfa__dark = ([ --on-dark-surface-transparent-info-active: #118CDF38; --on-dark-surface-clear: #FFFFFF00; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary: #262626; --on-dark-surface-solid-tertiary: #363636; --on-dark-surface-solid-card: #262626; + --on-dark-surface-solid-card-brightness: #333333FF; --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-accent: #00AC7B; --on-dark-surface-positive: #24B23E; --on-dark-surface-warning: #FF7024; --on-dark-surface-negative: #FF3D51; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary: #FFFFFF33; @@ -340,9 +350,11 @@ export const sdds_dfa__dark = ([ --on-light-surface-transparent-info-hover: #118CDF66; --on-light-surface-transparent-info-active: #118CDF38; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary: #DDDDDD; --on-light-surface-solid-tertiary: #C7C7C7; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #080808; --on-light-surface-clear: #FFFFFF00; --on-light-surface-accent: #05996F; @@ -350,6 +362,7 @@ export const sdds_dfa__dark = ([ --on-light-surface-warning: #FA5F05; --on-light-surface-negative: #FF293E; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary: #0808081F; @@ -410,9 +423,11 @@ export const sdds_dfa__dark = ([ --inverse-surface-transparent-info-hover: #118CDF66; --inverse-surface-transparent-info-active: #118CDF38; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary: #DDDDDD; --inverse-surface-solid-tertiary: #C7C7C7; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default: #080808; --inverse-surface-clear: #FFFFFF00; --inverse-surface-accent: #05996F; @@ -420,6 +435,7 @@ export const sdds_dfa__dark = ([ --inverse-surface-warning: #FA5F05; --inverse-surface-negative: #FF293E; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-transparent-primary: #08080805; --inverse-surface-transparent-secondary: #0808080F; --inverse-surface-transparent-tertiary: #0808081F; @@ -428,9 +444,11 @@ export const sdds_dfa__dark = ([ --inverse-surface-transparent-warning: #FA5F051F; --inverse-surface-transparent-negative: #FF293E1F; --background-primary: #171717; + --background-primary-brightness: #252525FF; --dark-background-primary: #171717; --light-background-primary: #F5F5F5; --inverse-background-primary: #F5F5F5; + --inverse-background-primary-brightness: #F6F6F6FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080833; diff --git a/packages/themes/sdds-themes/src/themes/sdds_dfa__light.ts b/packages/themes/sdds-themes/src/themes/sdds_dfa__light.ts index 128c909099..1645fe6883 100644 --- a/packages/themes/sdds-themes/src/themes/sdds_dfa__light.ts +++ b/packages/themes/sdds-themes/src/themes/sdds_dfa__light.ts @@ -32,6 +32,7 @@ export const sdds_dfa__light = ([ --text-info-minor-hover: #1A577FFF; --text-info-minor-active: #13405DFF; --text-primary: #171717F5; + --text-primary-brightness: #252525FF; --text-secondary: #1717178F; --text-tertiary: #17171747; --text-paragraph: #171717CC; @@ -68,6 +69,7 @@ export const sdds_dfa__light = ([ --on-dark-text-info-minor-hover: #FAFDFFFF; --on-dark-text-info-minor-active: #A8DCFFFF; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary: #F5F5F547; --on-dark-text-paragraph: #F5F5F5CC; @@ -104,6 +106,7 @@ export const sdds_dfa__light = ([ --on-light-text-info-minor-hover: #1A577FFF; --on-light-text-info-minor-active: #13405DFF; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #252525FF; --on-light-text-secondary: #1717178F; --on-light-text-tertiary: #17171747; --on-light-text-paragraph: #171717CC; @@ -140,6 +143,7 @@ export const sdds_dfa__light = ([ --inverse-text-info-minor-hover: #FAFDFFFF; --inverse-text-info-minor-active: #A8DCFFFF; --inverse-text-primary: #F5F5F5F5; + --inverse-text-primary-brightness: #F6F6F6FF; --inverse-text-secondary: #F5F5F58F; --inverse-text-tertiary: #F5F5F547; --inverse-text-paragraph: #F5F5F5CC; @@ -200,15 +204,18 @@ export const sdds_dfa__light = ([ --surface-transparent-info-hover: #118CDF33; --surface-transparent-info-active: #118CDF52; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary: #DDDDDD; --surface-solid-tertiary: #C7C7C7; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default: #080808; --surface-transparent-primary: #08080805; --surface-transparent-secondary: #0808080F; --surface-transparent-tertiary: #0808081F; --surface-transparent-deep: #080808A3; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear: #FFFFFF00; --surface-accent: #00AC7B; --surface-negative: #FF293E; @@ -270,7 +277,9 @@ export const sdds_dfa__light = ([ --on-dark-surface-transparent-info-hover: #118CDF33; --on-dark-surface-transparent-info-active: #118CDF52; --on-dark-surface-solid-card: #262626; + --on-dark-surface-solid-card-brightness: #333333FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary: #262626; --on-dark-surface-solid-tertiary: #363636; --on-dark-surface-solid-default: #F9F9F9; @@ -279,6 +288,7 @@ export const sdds_dfa__light = ([ --on-dark-surface-transparent-tertiary: #FFFFFF33; --on-dark-surface-transparent-deep: #FFFFFFA3; --on-dark-surface-transparent-card: #FFFFFF1F; + --on-dark-surface-transparent-card-brightness: #FFFFFFFF; --on-dark-surface-clear: #FFFFFF00; --on-dark-surface-accent: #00AC7B; --on-dark-surface-positive: #24B23E; @@ -340,12 +350,15 @@ export const sdds_dfa__light = ([ --on-light-surface-transparent-info-hover: #118CDF33; --on-light-surface-transparent-info-active: #118CDF52; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary: #DDDDDD; --on-light-surface-solid-tertiary: #C7C7C7; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default: #080808; --on-light-surface-clear: #FFFFFF00; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary: #0808081F; @@ -411,11 +424,14 @@ export const sdds_dfa__light = ([ --inverse-surface-transparent-info-active: #118CDF52; --inverse-surface-clear: #FFFFFF00; --inverse-surface-solid-card: #262626; + --inverse-surface-solid-card-brightness: #333333FF; --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #252525FF; --inverse-surface-solid-secondary: #262626; --inverse-surface-solid-tertiary: #363636; --inverse-surface-solid-default: #F9F9F9; --inverse-surface-transparent-card: #FFFFFF1F; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-transparent-primary: #FFFFFF0F; --inverse-surface-transparent-secondary: #FFFFFF1F; --inverse-surface-transparent-tertiary: #FFFFFF33; @@ -428,9 +444,11 @@ export const sdds_dfa__light = ([ --inverse-surface-transparent-warning: #FF702433; --inverse-surface-transparent-negative: #FF3D5133; --background-primary: #F5F5F5; + --background-primary-brightness: #F6F6F6FF; --dark-background-primary: #171717; --light-background-primary: #F5F5F5; --inverse-background-primary: #171717; + --inverse-background-primary-brightness: #252525FF; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F933; diff --git a/packages/themes/sdds-themes/src/themes/sdds_serv__dark.ts b/packages/themes/sdds-themes/src/themes/sdds_serv__dark.ts index bed27049dd..aff0938946 100644 --- a/packages/themes/sdds-themes/src/themes/sdds_serv__dark.ts +++ b/packages/themes/sdds-themes/src/themes/sdds_serv__dark.ts @@ -6,6 +6,7 @@ export const sdds_serv__dark = ([ --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; --text-primary: #F5F5F5F5; + --text-primary-brightness: #F6F6F6FF; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; --text-secondary: #F5F5F58F; @@ -30,6 +31,7 @@ export const sdds_serv__dark = ([ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -54,6 +56,7 @@ export const sdds_serv__dark = ([ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -78,6 +81,7 @@ export const sdds_serv__dark = ([ --inverse-text-primary-hover: #17171793; --inverse-text-primary-active: #171717C4; --inverse-text-primary: #171717F5; + --inverse-text-primary-brightness: #2525F6FF; --inverse-text-secondary-hover: #171717FF; --inverse-text-secondary-active: #171717AB; --inverse-text-secondary: #1717178F; @@ -102,6 +106,7 @@ export const sdds_serv__dark = ([ --surface-solid-primary-hover: #1C1C1CFF; --surface-solid-primary-active: #121212FF; --surface-solid-primary: #171717; + --surface-solid-primary-brightness: #252525FF; --surface-solid-secondary-hover: #303030FF; --surface-solid-secondary-active: #212121FF; --surface-solid-secondary: #262626; @@ -111,6 +116,7 @@ export const sdds_serv__dark = ([ --surface-solid-card-hover: #1C1C1CFF; --surface-solid-card-active: #121212FF; --surface-solid-card: #171717; + --surface-solid-card-brightness: #252525FF; --surface-solid-default-hover: #FFFFFFFF; --surface-solid-default-active: #F5F5F5FF; --surface-solid-default: #F9F9F9; @@ -129,6 +135,7 @@ export const sdds_serv__dark = ([ --surface-transparent-card-hover: #FFFFFF1F; --surface-transparent-card-active: #FFFFFF0A; --surface-transparent-card: #FFFFFF0F; + --surface-transparent-card-brightness: #FFFF1DFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -156,6 +163,7 @@ export const sdds_serv__dark = ([ --on-dark-surface-solid-primary-hover: #1C1C1CFF; --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #303030FF; --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; @@ -165,6 +173,7 @@ export const sdds_serv__dark = ([ --on-dark-surface-solid-card-hover: #1C1C1CFF; --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -183,6 +192,7 @@ export const sdds_serv__dark = ([ --on-dark-surface-transparent-card-hover: #FFFFFF1F; --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -201,6 +211,7 @@ export const sdds_serv__dark = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -210,6 +221,7 @@ export const sdds_serv__dark = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -228,6 +240,7 @@ export const sdds_serv__dark = ([ --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; --on-light-surface-transparent-card: #0808080F; + --on-light-surface-transparent-card-brightness: #171717FF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -246,6 +259,7 @@ export const sdds_serv__dark = ([ --inverse-surface-solid-primary-hover: #FAFAFAFF; --inverse-surface-solid-primary-active: #F0F0F0FF; --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-primary-brightness: #F6F6F6FF; --inverse-surface-solid-secondary-hover: #F7F7F7FF; --inverse-surface-solid-secondary-active: #E8E8E8FF; --inverse-surface-solid-secondary: #ECECEC; @@ -255,6 +269,7 @@ export const sdds_serv__dark = ([ --inverse-surface-solid-card-hover: #FFFFFFFF; --inverse-surface-solid-card-active: #FFFFFFFF; --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-card-brightness: #FFFFFFFF; --inverse-surface-solid-default-hover: #0D0D0DFF; --inverse-surface-solid-default-active: #030303FF; --inverse-surface-solid-default: #080808; @@ -273,6 +288,7 @@ export const sdds_serv__dark = ([ --inverse-surface-transparent-card-hover: #FFFFFFFF; --inverse-surface-transparent-card-active: #FFFFFFFF; --inverse-surface-transparent-card: #FFFFFFFF; + --inverse-surface-transparent-card-brightness: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -289,9 +305,11 @@ export const sdds_serv__dark = ([ --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; --background-primary: #080808; + --background-primary-brightness: #171717FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; + --inverse-background-primary-brightness: #F9F9F9FF; --overlay-soft: #0808088F; --overlay-hard: #080808F5; --overlay-blur: #08080847; diff --git a/packages/themes/sdds-themes/src/themes/sdds_serv__light.ts b/packages/themes/sdds-themes/src/themes/sdds_serv__light.ts index 944f8c15ad..72ce5b1e84 100644 --- a/packages/themes/sdds-themes/src/themes/sdds_serv__light.ts +++ b/packages/themes/sdds-themes/src/themes/sdds_serv__light.ts @@ -6,6 +6,7 @@ export const sdds_serv__light = ([ --text-primary-hover: #17171793; --text-primary-active: #171717C4; --text-primary: #171717F5; + --text-primary-brightness: #2525F6FF; --text-secondary-hover: #171717FF; --text-secondary-active: #171717AB; --text-secondary: #1717178F; @@ -30,6 +31,7 @@ export const sdds_serv__light = ([ --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; + --on-dark-text-primary-brightness: #F6F6F6FF; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; --on-dark-text-secondary: #F5F5F58F; @@ -54,6 +56,7 @@ export const sdds_serv__light = ([ --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; --on-light-text-primary: #171717F5; + --on-light-text-primary-brightness: #2525F6FF; --on-light-text-secondary-hover: #171717FF; --on-light-text-secondary-active: #171717AB; --on-light-text-secondary: #1717178F; @@ -78,6 +81,7 @@ export const sdds_serv__light = ([ --inverse-text-primary-hover: #F5F5F593; --inverse-text-primary-active: #F5F5F5C4; --inverse-text-primary: #F5F5F5F5; + --inverse-text-primary-brightness: #F6F6F6FF; --inverse-text-secondary-hover: #F5F5F5FF; --inverse-text-secondary-active: #F5F5F5AB; --inverse-text-secondary: #F5F5F58F; @@ -102,6 +106,7 @@ export const sdds_serv__light = ([ --surface-solid-primary-hover: #FAFAFAFF; --surface-solid-primary-active: #F0F0F0FF; --surface-solid-primary: #F5F5F5; + --surface-solid-primary-brightness: #F6F6F6FF; --surface-solid-secondary-hover: #F7F7F7FF; --surface-solid-secondary-active: #E8E8E8FF; --surface-solid-secondary: #ECECEC; @@ -111,6 +116,7 @@ export const sdds_serv__light = ([ --surface-solid-card-hover: #FFFFFFFF; --surface-solid-card-active: #FFFFFFFF; --surface-solid-card: #FFFFFFFF; + --surface-solid-card-brightness: #FFFFFFFF; --surface-solid-default-hover: #262626FF; --surface-solid-default-active: #030303FF; --surface-solid-default: #080808; @@ -129,6 +135,7 @@ export const sdds_serv__light = ([ --surface-transparent-card-hover: #FFFFFFFF; --surface-transparent-card-active: #FFFFFFFF; --surface-transparent-card: #FFFFFFFF; + --surface-transparent-card-brightness: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; --surface-clear: #00000000; @@ -156,6 +163,7 @@ export const sdds_serv__light = ([ --on-dark-surface-solid-primary-hover: #363636FF; --on-dark-surface-solid-primary-active: #0D0D0DFF; --on-dark-surface-solid-primary: #171717; + --on-dark-surface-solid-primary-brightness: #252525FF; --on-dark-surface-solid-secondary-hover: #3B3B3BFF; --on-dark-surface-solid-secondary-active: #1C1C1CFF; --on-dark-surface-solid-secondary: #262626; @@ -165,6 +173,7 @@ export const sdds_serv__light = ([ --on-dark-surface-solid-card-hover: #363636FF; --on-dark-surface-solid-card-active: #0D0D0DFF; --on-dark-surface-solid-card: #171717; + --on-dark-surface-solid-card-brightness: #252525FF; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; @@ -183,6 +192,7 @@ export const sdds_serv__light = ([ --on-dark-surface-transparent-card-hover: #FFFFFF05; --on-dark-surface-transparent-card-active: #FFFFFF1A; --on-dark-surface-transparent-card: #FFFFFF0F; + --on-dark-surface-transparent-card-brightness: #FFFF1DFF; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; --on-dark-surface-clear: #00000000; @@ -201,6 +211,7 @@ export const sdds_serv__light = ([ --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; --on-light-surface-solid-primary: #F5F5F5; + --on-light-surface-solid-primary-brightness: #F6F6F6FF; --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; @@ -210,6 +221,7 @@ export const sdds_serv__light = ([ --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; + --on-light-surface-solid-card-brightness: #FFFFFFFF; --on-light-surface-solid-default-hover: #262626FF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; @@ -228,6 +240,7 @@ export const sdds_serv__light = ([ --on-light-surface-transparent-card-hover: #FFFFFFFF; --on-light-surface-transparent-card-active: #FFFFFFFF; --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-brightness: #FFFFFFFF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; --on-light-surface-clear: #00000000; @@ -246,6 +259,7 @@ export const sdds_serv__light = ([ --inverse-surface-solid-primary-hover: #363636FF; --inverse-surface-solid-primary-active: #0D0D0DFF; --inverse-surface-solid-primary: #171717; + --inverse-surface-solid-primary-brightness: #252525FF; --inverse-surface-solid-secondary-hover: #3B3B3BFF; --inverse-surface-solid-secondary-active: #1C1C1CFF; --inverse-surface-solid-secondary: #262626; @@ -255,6 +269,7 @@ export const sdds_serv__light = ([ --inverse-surface-solid-card-hover: #363636FF; --inverse-surface-solid-card-active: #0D0D0DFF; --inverse-surface-solid-card: #171717; + --inverse-surface-solid-card-brightness: #252525FF; --inverse-surface-solid-default-hover: #FFFFFFFF; --inverse-surface-solid-default-active: #F5F5F5FF; --inverse-surface-solid-default: #F9F9F9; @@ -273,6 +288,7 @@ export const sdds_serv__light = ([ --inverse-surface-transparent-card-hover: #FFFFFF05; --inverse-surface-transparent-card-active: #FFFFFF1A; --inverse-surface-transparent-card: #FFFFFF0F; + --inverse-surface-transparent-card-brightness: #FFFF1DFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; --inverse-surface-clear: #00000000; @@ -289,9 +305,11 @@ export const sdds_serv__light = ([ --inverse-surface-negative-active: #FF142CFF; --inverse-surface-negative: #FF293E; --background-primary: #F9F9F9; + --background-primary-brightness: #F9F9F9FF; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; --inverse-background-primary: #080808; + --inverse-background-primary-brightness: #171717FF; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; --overlay-blur: #F9F9F947; diff --git a/packages/themes/sdds-themes/src/tokens/index.ts b/packages/themes/sdds-themes/src/tokens/index.ts index 11f2e012df..f2bca95253 100644 --- a/packages/themes/sdds-themes/src/tokens/index.ts +++ b/packages/themes/sdds-themes/src/tokens/index.ts @@ -3,6 +3,9 @@ /** Основной цвет текста */ export const textPrimary = 'var(--text-primary)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness)'; + /** Основной цвет текста */ export const textPrimaryHover = 'var(--text-primary-hover)'; @@ -129,6 +132,9 @@ export const textInfoMinorActive = 'var(--text-info-minor-active)'; /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness)'; + /** Основной цвет текста на темном фоне */ export const onDarkTextPrimaryHover = 'var(--on-dark-text-primary-hover)'; @@ -255,6 +261,9 @@ export const onDarkTextInfoMinorActive = 'var(--on-dark-text-info-minor-active)' /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness)'; + /** Основной цвет текста на светлом фоне */ export const onLightTextPrimaryHover = 'var(--on-light-text-primary-hover)'; @@ -381,6 +390,9 @@ export const onLightTextInfoMinorActive = 'var(--on-light-text-info-minor-active /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness)'; + /** Инвертированный основной цвет текста */ export const inverseTextPrimaryHover = 'var(--inverse-text-primary-hover)'; @@ -507,6 +519,9 @@ export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active) /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimaryHover = 'var(--surface-solid-primary-hover)'; @@ -534,6 +549,9 @@ export const surfaceSolidTertiaryActive = 'var(--surface-solid-tertiary-active)' /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness)'; + /** Основной фон для карточек */ export const surfaceSolidCardHover = 'var(--surface-solid-card-hover)'; @@ -588,6 +606,9 @@ export const surfaceTransparentDeepActive = 'var(--surface-transparent-deep-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек */ export const surfaceTransparentCardHover = 'var(--surface-transparent-card-hover)'; @@ -741,6 +762,9 @@ export const surfaceTransparentInfoActive = 'var(--surface-transparent-info-acti /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimaryHover = 'var(--on-dark-surface-solid-primary-hover)'; @@ -768,6 +792,9 @@ export const onDarkSurfaceSolidTertiaryActive = 'var(--on-dark-surface-solid-ter /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness)'; + /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCardHover = 'var(--on-dark-surface-solid-card-hover)'; @@ -822,6 +849,9 @@ export const onDarkSurfaceTransparentDeepActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCardHover = 'var(--on-dark-surface-transparent-card-hover)'; @@ -975,6 +1005,9 @@ export const onDarkSurfaceTransparentInfoActive = 'var(--on-dark-surface-transpa /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary)'; +/** Основной непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness)'; + /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimaryHover = 'var(--on-light-surface-solid-primary-hover)'; @@ -1002,6 +1035,9 @@ export const onLightSurfaceSolidTertiaryActive = 'var(--on-light-surface-solid-t /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness)'; + /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCardHover = 'var(--on-light-surface-solid-card-hover)'; @@ -1056,6 +1092,9 @@ export const onLightSurfaceTransparentDeepActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness)'; + /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCardHover = 'var(--on-light-surface-transparent-card-hover)'; @@ -1209,6 +1248,9 @@ export const onLightSurfaceTransparentInfoActive = 'var(--on-light-surface-trans /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary)'; +/** Инвертированный основной непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness)'; + /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimaryHover = 'var(--inverse-surface-solid-primary-hover)'; @@ -1236,6 +1278,9 @@ export const inverseSurfaceSolidTertiaryActive = 'var(--inverse-surface-solid-te /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card)'; +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness)'; + /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCardHover = 'var(--inverse-surface-solid-card-hover)'; @@ -1290,6 +1335,9 @@ export const inverseSurfaceTransparentDeepActive = 'var(--inverse-surface-transp /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card)'; +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness)'; + /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCardHover = 'var(--inverse-surface-transparent-card-hover)'; @@ -1443,6 +1491,9 @@ export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transp /** Основной фон */ export const backgroundPrimary = 'var(--background-primary)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary)'; @@ -1452,6 +1503,9 @@ export const lightBackgroundPrimary = 'var(--light-background-primary)'; /** Инвертированный основной фон */ export const inverseBackgroundPrimary = 'var(--inverse-background-primary)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft)'; diff --git a/packages/themes/sdds-themes/src/tokens/sdds_cs/index.ts b/packages/themes/sdds-themes/src/tokens/sdds_cs/index.ts index 30709f2760..5413323a40 100644 --- a/packages/themes/sdds-themes/src/tokens/sdds_cs/index.ts +++ b/packages/themes/sdds-themes/src/tokens/sdds_cs/index.ts @@ -3,6 +3,9 @@ /** Основной цвет текста */ export const textPrimary = 'var(--text-primary, #FFFFFFF5)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness, #FFFFFFFF)'; + /** Вторичный цвет текста */ export const textSecondary = 'var(--text-secondary, #FFFFFF8F)'; @@ -18,6 +21,9 @@ export const textNegative = 'var(--text-negative, #FF293E)'; /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary, #FFFFFFF5)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness, #FFFFFFFF)'; + /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondary = 'var(--on-dark-text-secondary, #FFFFFF8F)'; @@ -36,6 +42,9 @@ export const onDarkTextNegative = 'var(--on-dark-text-negative, #FF293E)'; /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary, #060A0CF5)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness, #191BF6FF)'; + /** Инвертированный вторичный цвет текста */ export const inverseTextSecondary = 'var(--inverse-text-secondary, #060A0C8F)'; @@ -54,9 +63,15 @@ export const inverseTextNegative = 'var(--inverse-text-negative, #F31B31)'; /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #13181B)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness, #212629FF)'; + /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card, #13181B)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness, #212629FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию */ export const surfaceSolidDefault = 'var(--surface-solid-default, #F7F9FB)'; @@ -75,9 +90,15 @@ export const surfaceInfo = 'var(--surface-info, #118CDF)'; /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #13181B)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness, #212629FF)'; + /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #13181B)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness, #212629FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ export const onDarkSurfaceSolidDefault = 'var(--on-dark-surface-solid-default, #F7F9FB)'; @@ -96,9 +117,15 @@ export const onDarkSurfaceInfo = 'var(--on-dark-surface-info, #118CDF)'; /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F2F5F8)'; +/** Основной непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness, #F3F6F8FF)'; + /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFFFF)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness, #FFFFFFFF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ export const onLightSurfaceSolidDefault = 'var(--on-light-surface-solid-default, #060A0C)'; @@ -117,9 +144,15 @@ export const onLightSurfaceInfo = 'var(--on-light-surface-info, #118CDF)'; /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F2F5F8)'; +/** Инвертированный основной непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness, #F3F6F8FF)'; + /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #FFFFFFFF)'; +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness, #FFFFFFFF)'; + /** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default, #060A0C)'; @@ -138,6 +171,9 @@ export const inverseSurfaceInfo = 'var(--inverse-surface-info, #118CDF)'; /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #060A0C)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, #15191BFF)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary, #060A0C)'; @@ -147,6 +183,9 @@ export const lightBackgroundPrimary = 'var(--light-background-primary, #F7F9FB)' /** Инвертированный основной фон */ export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F7F9FB)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness, #F7F9FBFF)'; + /** Основной непрозрачный цвет обводки */ export const outlineSolidPrimary = 'var(--outline-solid-primary, #23292D)'; diff --git a/packages/themes/sdds-themes/src/tokens/sdds_dfa/index.ts b/packages/themes/sdds-themes/src/tokens/sdds_dfa/index.ts index 11b9978f93..09aad81e9b 100644 --- a/packages/themes/sdds-themes/src/tokens/sdds_dfa/index.ts +++ b/packages/themes/sdds-themes/src/tokens/sdds_dfa/index.ts @@ -87,6 +87,9 @@ export const textInfoMinorActive = 'var(--text-info-minor-active, #B3E0FFFF)'; /** Основной цвет текста */ export const textPrimary = 'var(--text-primary, #F5F5F5F5)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness, #F6F6F6FF)'; + /** Вторичный цвет текста */ export const textSecondary = 'var(--text-secondary, #F5F5F58F)'; @@ -195,6 +198,9 @@ export const onDarkTextInfoMinorActive = 'var(--on-dark-text-info-minor-active, /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary, #F5F5F5F5)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness, #F6F6F6FF)'; + /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondary = 'var(--on-dark-text-secondary, #F5F5F58F)'; @@ -303,6 +309,9 @@ export const onLightTextInfoMinorActive = 'var(--on-light-text-info-minor-active /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary, #171717F5)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness, #252525FF)'; + /** Вторичный цвет текста на светлом фоне */ export const onLightTextSecondary = 'var(--on-light-text-secondary, #1717178F)'; @@ -411,6 +420,9 @@ export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active, /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary, #171717F5)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness, #252525FF)'; + /** Инвертированный вторичный цвет текста */ export const inverseTextSecondary = 'var(--inverse-text-secondary, #1717178F)'; @@ -594,9 +606,15 @@ export const surfaceClear = 'var(--surface-clear, #FFFFFF00)'; /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card, #262626)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness, #333333FF)'; + /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности/контрола */ export const surfaceSolidSecondary = 'var(--surface-solid-secondary, #262626)'; @@ -621,6 +639,9 @@ export const surfaceNegative = 'var(--surface-negative, #FF3D51)'; /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card, #FFFFFF1F)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness, #FFFFFFFF)'; + /** Основной прозрачный фон поверхности/контрола */ export const surfaceTransparentPrimary = 'var(--surface-transparent-primary, #FFFFFF0F)'; @@ -804,6 +825,9 @@ export const onDarkSurfaceClear = 'var(--on-dark-surface-clear, #FFFFFF00)'; /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidSecondary = 'var(--on-dark-surface-solid-secondary, #262626)'; @@ -813,6 +837,9 @@ export const onDarkSurfaceSolidTertiary = 'var(--on-dark-surface-solid-tertiary, /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #262626)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness, #333333FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ export const onDarkSurfaceSolidDefault = 'var(--on-dark-surface-solid-default, #F9F9F9)'; @@ -831,6 +858,9 @@ export const onDarkSurfaceNegative = 'var(--on-dark-surface-negative, #FF3D51)'; /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #FFFFFF1F)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Основной прозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceTransparentPrimary = 'var(--on-dark-surface-transparent-primary, #FFFFFF0F)'; @@ -1012,6 +1042,9 @@ export const onLightSurfaceTransparentInfoActive = 'var(--on-light-surface-trans /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F5F5F5)'; +/** Основной непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Вторичный непрозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceSolidSecondary = 'var(--on-light-surface-solid-secondary, #DDDDDD)'; @@ -1021,6 +1054,9 @@ export const onLightSurfaceSolidTertiary = 'var(--on-light-surface-solid-tertiar /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFFFF)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness, #FFFFFFFF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ export const onLightSurfaceSolidDefault = 'var(--on-light-surface-solid-default, #080808)'; @@ -1042,6 +1078,9 @@ export const onLightSurfaceNegative = 'var(--on-light-surface-negative, #FF293E) /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, #FFFFFFFF)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Основной прозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceTransparentPrimary = 'var(--on-light-surface-transparent-primary, #08080805)'; @@ -1223,6 +1262,9 @@ export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transp /** Инвертированный основной непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F5F5F5)'; +/** Инвертированный основной непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Инвертированный вторичный непрозрачный фон поверхности/контрола */ export const inverseSurfaceSolidSecondary = 'var(--inverse-surface-solid-secondary, #DDDDDD)'; @@ -1232,6 +1274,9 @@ export const inverseSurfaceSolidTertiary = 'var(--inverse-surface-solid-tertiary /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #FFFFFFFF)'; +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness, #FFFFFFFF)'; + /** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default, #080808)'; @@ -1253,6 +1298,9 @@ export const inverseSurfaceNegative = 'var(--inverse-surface-negative, #FF293E)' /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card, #FFFFFFFF)'; +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Инвертированный основной прозрачный фон поверхности/контрола */ export const inverseSurfaceTransparentPrimary = 'var(--inverse-surface-transparent-primary, #08080805)'; @@ -1277,6 +1325,9 @@ export const inverseSurfaceTransparentNegative = 'var(--inverse-surface-transpar /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #171717)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, #252525FF)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary, #171717)'; @@ -1286,6 +1337,9 @@ export const lightBackgroundPrimary = 'var(--light-background-primary, #F5F5F5)' /** Инвертированный основной фон */ export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F5F5F5)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness, #F6F6F6FF)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft, #0808088F)'; diff --git a/packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts b/packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts index 48de0d9bec..70edfa19f2 100644 --- a/packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts +++ b/packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts @@ -9,6 +9,9 @@ export const textPrimaryActive = 'var(--text-primary-active, #F5F5F5C4)'; /** Основной цвет текста */ export const textPrimary = 'var(--text-primary, #F5F5F5F5)'; +/** Основной цвет текста */ +export const textPrimaryBrightness = 'var(--text-primary-brightness, #F6F6F6FF)'; + /** Вторичный цвет текста */ export const textSecondaryHover = 'var(--text-secondary-hover, #F5F5F5FF)'; @@ -81,6 +84,9 @@ export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active, #F5F5 /** Основной цвет текста на темном фоне */ export const onDarkTextPrimary = 'var(--on-dark-text-primary, #F5F5F5F5)'; +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimaryBrightness = 'var(--on-dark-text-primary-brightness, #F6F6F6FF)'; + /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #F5F5F5FF)'; @@ -153,6 +159,9 @@ export const onLightTextPrimaryActive = 'var(--on-light-text-primary-active, #17 /** Основной цвет текста на светлом фоне */ export const onLightTextPrimary = 'var(--on-light-text-primary, #171717F5)'; +/** Основной цвет текста на светлом фоне */ +export const onLightTextPrimaryBrightness = 'var(--on-light-text-primary-brightness, #2525F6FF)'; + /** Вторичный цвет текста на светлом фоне */ export const onLightTextSecondaryHover = 'var(--on-light-text-secondary-hover, #171717FF)'; @@ -225,6 +234,9 @@ export const inverseTextPrimaryActive = 'var(--inverse-text-primary-active, #171 /** Инвертированный основной цвет текста */ export const inverseTextPrimary = 'var(--inverse-text-primary, #171717F5)'; +/** Инвертированный основной цвет текста */ +export const inverseTextPrimaryBrightness = 'var(--inverse-text-primary-brightness, #2525F6FF)'; + /** Инвертированный вторичный цвет текста */ export const inverseTextSecondaryHover = 'var(--inverse-text-secondary-hover, #171717FF)'; @@ -297,6 +309,9 @@ export const surfaceSolidPrimaryActive = 'var(--surface-solid-primary-active, #1 /** Основной непрозрачный фон поверхности/контрола */ export const surfaceSolidPrimary = 'var(--surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimaryBrightness = 'var(--surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности/контрола */ export const surfaceSolidSecondaryHover = 'var(--surface-solid-secondary-hover, #303030FF)'; @@ -324,6 +339,9 @@ export const surfaceSolidCardActive = 'var(--surface-solid-card-active, #121212F /** Основной фон для карточек */ export const surfaceSolidCard = 'var(--surface-solid-card, #171717)'; +/** Основной фон для карточек */ +export const surfaceSolidCardBrightness = 'var(--surface-solid-card-brightness, #252525FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию */ export const surfaceSolidDefaultHover = 'var(--surface-solid-default-hover, #FFFFFFFF)'; @@ -378,6 +396,9 @@ export const surfaceTransparentCardActive = 'var(--surface-transparent-card-acti /** Прозрачный фон для карточек */ export const surfaceTransparentCard = 'var(--surface-transparent-card, #FFFFFF0F)'; +/** Прозрачный фон для карточек */ +export const surfaceTransparentCardBrightness = 'var(--surface-transparent-card-brightness, #FFFF1DFF)'; + /** Фон поверхности/контрола без заливки */ export const surfaceClearHover = 'var(--surface-clear-hover, #00000000)'; @@ -459,6 +480,9 @@ export const onDarkSurfaceSolidPrimaryActive = 'var(--on-dark-surface-solid-prim /** Основной непрозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #171717)'; +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimaryBrightness = 'var(--on-dark-surface-solid-primary-brightness, #252525FF)'; + /** Вторичный непрозрачный фон поверхности на темном фоне */ export const onDarkSurfaceSolidSecondaryHover = 'var(--on-dark-surface-solid-secondary-hover, #303030FF)'; @@ -486,6 +510,9 @@ export const onDarkSurfaceSolidCardActive = 'var(--on-dark-surface-solid-card-ac /** Основной фон для карточек на темном фоне */ export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #171717)'; +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCardBrightness = 'var(--on-dark-surface-solid-card-brightness, #252525FF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ export const onDarkSurfaceSolidDefaultHover = 'var(--on-dark-surface-solid-default-hover, #FFFFFFFF)'; @@ -540,6 +567,9 @@ export const onDarkSurfaceTransparentCardActive = 'var(--on-dark-surface-transpa /** Прозрачный фон для карточек на темном фоне */ export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #FFFFFF0F)'; +/** Прозрачный фон для карточек на темном фоне */ +export const onDarkSurfaceTransparentCardBrightness = 'var(--on-dark-surface-transparent-card-brightness, #FFFF1DFF)'; + /** Фон поверхности/контрола без заливки на темном фоне */ export const onDarkSurfaceClearHover = 'var(--on-dark-surface-clear-hover, #00000000)'; @@ -594,6 +624,9 @@ export const onLightSurfaceSolidPrimaryActive = 'var(--on-light-surface-solid-pr /** Основной непрозрачный фон поверхности на светлом фоне */ export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F5F5F5)'; +/** Основной непрозрачный фон поверхности на светлом фоне */ +export const onLightSurfaceSolidPrimaryBrightness = 'var(--on-light-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Вторичный непрозрачный фон поверхности на светлом фоне */ export const onLightSurfaceSolidSecondaryHover = 'var(--on-light-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -621,6 +654,9 @@ export const onLightSurfaceSolidCardActive = 'var(--on-light-surface-solid-card- /** Основной фон для карточек на светлом фоне */ export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFFFF)'; +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCardBrightness = 'var(--on-light-surface-solid-card-brightness, #FFFFFFFF)'; + /** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ export const onLightSurfaceSolidDefaultHover = 'var(--on-light-surface-solid-default-hover, #0D0D0DFF)'; @@ -676,6 +712,9 @@ export const onLightSurfaceTransparentCardActive = 'var(--on-light-surface-trans /** Прозрачный фон для карточек на светлом фоне */ export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, #0808080F)'; +/** Прозрачный фон для карточек на светлом фоне */ +export const onLightSurfaceTransparentCardBrightness = 'var(--on-light-surface-transparent-card-brightness, #171717FF)'; + /** Фон поверхности/контрола без заливки на светлом фоне */ export const onLightSurfaceClearHover = 'var(--on-light-surface-clear-hover, #00000000)'; @@ -730,6 +769,9 @@ export const inverseSurfaceSolidPrimaryActive = 'var(--inverse-surface-solid-pri /** Инвертированный основной непрозрачный фон поверхности */ export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F5F5F5)'; +/** Инвертированный основной непрозрачный фон поверхности */ +export const inverseSurfaceSolidPrimaryBrightness = 'var(--inverse-surface-solid-primary-brightness, #F6F6F6FF)'; + /** Инвертированный вторичный непрозрачный фон поверхности */ export const inverseSurfaceSolidSecondaryHover = 'var(--inverse-surface-solid-secondary-hover, #F7F7F7FF)'; @@ -757,6 +799,9 @@ export const inverseSurfaceSolidCardActive = 'var(--inverse-surface-solid-card-a /** Инвертированный основной фон для карточек */ export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #FFFFFFFF)'; +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCardBrightness = 'var(--inverse-surface-solid-card-brightness, #FFFFFFFF)'; + /** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ export const inverseSurfaceSolidDefaultHover = 'var(--inverse-surface-solid-default-hover, #0D0D0DFF)'; @@ -812,6 +857,9 @@ export const inverseSurfaceTransparentCardActive = 'var(--inverse-surface-transp /** Инвертированный прозрачный фон для карточек */ export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card, #FFFFFFFF)'; +/** Инвертированный прозрачный фон для карточек */ +export const inverseSurfaceTransparentCardBrightness = 'var(--inverse-surface-transparent-card-brightness, #FFFFFFFF)'; + /** Инвертированный фон поверхности/контрола без заливки */ export const inverseSurfaceClearHover = 'var(--inverse-surface-clear-hover, #00000000)'; @@ -860,6 +908,9 @@ export const inverseSurfaceNegative = 'var(--inverse-surface-negative, #FF293E)' /** Основной фон */ export const backgroundPrimary = 'var(--background-primary, #080808)'; +/** Основной фон */ +export const backgroundPrimaryBrightness = 'var(--background-primary-brightness, #171717FF)'; + /** Основной фон на темном фоне */ export const darkBackgroundPrimary = 'var(--dark-background-primary, #080808)'; @@ -869,6 +920,9 @@ export const lightBackgroundPrimary = 'var(--light-background-primary, #F9F9F9)' /** Инвертированный основной фон */ export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F9F9F9)'; +/** Инвертированный основной фон */ +export const inverseBackgroundPrimaryBrightness = 'var(--inverse-background-primary-brightness, #F9F9F9FF)'; + /** Цвет фона паранжи светлый */ export const overlaySoft = 'var(--overlay-soft, #0808088F)';