diff --git a/packages/ui/src/styles/colors.css b/packages/ui/src/styles/colors.css index 5ef17d1cc..893f252aa 100644 --- a/packages/ui/src/styles/colors.css +++ b/packages/ui/src/styles/colors.css @@ -1,52 +1,52 @@ :root { --gray-dark-1: #161616; - --gray-dark-2: #1C1C1C; + --gray-dark-2: #1c1c1c; --gray-dark-3: #232323; --gray-dark-4: #282828; - --gray-dark-5: #2E2E2E; + --gray-dark-5: #2e2e2e; --gray-dark-6: #343434; - --gray-dark-7: #3E3E3E; + --gray-dark-7: #3e3e3e; --gray-dark-8: #505050; --gray-dark-9: #707070; - --gray-dark-10: #7E7E7E; - --gray-dark-11: #A0A0A0; - --gray-dark-12: #EDEDED; - --gray-light-1: #FCFCFC; - --gray-light-2: #F8F8F8; - --gray-light-3: #F3F3F3; - --gray-light-4: #EDEDED; - --gray-light-5: #E8E8E8; - --gray-light-6: #E2E2E2; - --gray-light-7: #DBDBDB; - --gray-light-8: #C7C7C7; - --gray-light-9: #8F8F8F; + --gray-dark-10: #7e7e7e; + --gray-dark-11: #a0a0a0; + --gray-dark-12: #ededed; + --gray-light-1: #fcfcfc; + --gray-light-2: #f8f8f8; + --gray-light-3: #f3f3f3; + --gray-light-4: #ededed; + --gray-light-5: #e8e8e8; + --gray-light-6: #e2e2e2; + --gray-light-7: #dbdbdb; + --gray-light-8: #c7c7c7; + --gray-light-9: #8f8f8f; --gray-light-10: #858585; - --gray-light-11: #6F6F6F; + --gray-light-11: #6f6f6f; --gray-light-12: #171717; --gray-dark-alpha-1: #00000000; - --gray-dark-alpha-2: #FFFFFF08; - --gray-dark-alpha-3: #FFFFFF0F; - --gray-dark-alpha-4: #FFFFFF14; - --gray-dark-alpha-5: #FFFFFF1A; - --gray-dark-alpha-6: #FFFFFF21; - --gray-dark-alpha-7: #FFFFFF2B; - --gray-dark-alpha-8: #FFFFFF40; - --gray-dark-alpha-9: #FFFFFF63; - --gray-dark-alpha-10: #FFFFFF73; - --gray-dark-alpha-11: #FFFFFF96; - --gray-dark-alpha-12: #FFFFFFEB; + --gray-dark-alpha-2: #ffffff08; + --gray-dark-alpha-3: #ffffff0f; + --gray-dark-alpha-4: #ffffff14; + --gray-dark-alpha-5: #ffffff1a; + --gray-dark-alpha-6: #ffffff21; + --gray-dark-alpha-7: #ffffff2b; + --gray-dark-alpha-8: #ffffff40; + --gray-dark-alpha-9: #ffffff63; + --gray-dark-alpha-10: #ffffff73; + --gray-dark-alpha-11: #ffffff96; + --gray-dark-alpha-12: #ffffffeb; --gray-light-alpha-1: #00000003; --gray-light-alpha-2: #00000008; - --gray-light-alpha-3: #0000000D; + --gray-light-alpha-3: #0000000d; --gray-light-alpha-4: #00000012; --gray-light-alpha-5: #00000017; - --gray-light-alpha-6: #0000001C; + --gray-light-alpha-6: #0000001c; --gray-light-alpha-7: #00000024; --gray-light-alpha-8: #00000038; --gray-light-alpha-9: #00000070; - --gray-light-alpha-10: #0000007A; - --gray-light-alpha-11: #0000008F; - --gray-light-alpha-12: #000000E8; + --gray-light-alpha-10: #0000007a; + --gray-light-alpha-11: #0000008f; + --gray-light-alpha-12: #000000e8; --gray-dark-1: #131010; --gray-dark-2: #1b1818; --gray-dark-3: #252121; @@ -95,6 +95,54 @@ --gray-light-alpha-10: #0400009c; --gray-light-alpha-11: #0700007e; --gray-light-alpha-12: #020000df; + --smoke-dark-1: #131010; + --smoke-dark-2: #1b1818; + --smoke-dark-3: #252121; + --smoke-dark-4: #2d2828; + --smoke-dark-5: #343030; + --smoke-dark-6: #3e3939; + --smoke-dark-7: #4b4646; + --smoke-dark-8: #645f5f; + --smoke-dark-9: #716c6b; + --smoke-dark-10: #7f7979; + --smoke-dark-11: #b7b1b1; + --smoke-dark-12: #f1ecec; + --smoke-light-1: #fdfcfc; + --smoke-light-2: #f9f8f8; + --smoke-light-3: #f1f0f0; + --smoke-light-4: #e9e8e8; + --smoke-light-5: #e2e0e0; + --smoke-light-6: #dad9d9; + --smoke-light-7: #cfcecd; + --smoke-light-8: #bcbbbb; + --smoke-light-9: #8e8b8b; + --smoke-light-10: #848181; + --smoke-light-11: #656363; + --smoke-light-12: #211e1e; + --smoke-dark-alpha-1: #82383803; + --smoke-dark-alpha-2: #e6c6c60b; + --smoke-dark-alpha-3: #edd5d516; + --smoke-dark-alpha-4: #f2e1e11e; + --smoke-dark-alpha-5: #f5e8e826; + --smoke-dark-alpha-6: #f5e8e831; + --smoke-dark-alpha-7: #f7ecec3f; + --smoke-dark-alpha-8: #faf5f559; + --smoke-dark-alpha-9: #faf5f467; + --smoke-dark-alpha-10: #fbf5f576; + --smoke-dark-alpha-11: #fcf9f9b2; + --smoke-dark-alpha-12: #fdfbfbf0; + --smoke-light-alpha-1: #55000003; + --smoke-light-alpha-2: #25000007; + --smoke-light-alpha-3: #1100000f; + --smoke-light-alpha-4: #0c000017; + --smoke-light-alpha-5: #1100001f; + --smoke-light-alpha-6: #07000026; + --smoke-light-alpha-7: #0b060032; + --smoke-light-alpha-8: #04000044; + --smoke-light-alpha-9: #07000074; + --smoke-light-alpha-10: #0400009c; + --smoke-light-alpha-11: #0700007e; + --smoke-light-alpha-12: #020000df; --yuzu-dark-1: #11120c; --yuzu-light-1: #fdfdfb; --yuzu-light-2: #fbfceb; @@ -637,4 +685,88 @@ --amber-dark-alpha-10: #ffce48f9; --amber-dark-alpha-11: #ffab0eef; --amber-dark-alpha-12: #fff8e1f9; + + /* Legacy palette aliases (keeps older themes working) */ + --smoke-light-1: var(--gray-light-1); + --smoke-light-2: var(--gray-light-2); + --smoke-light-3: var(--gray-light-3); + --smoke-light-4: var(--gray-light-4); + --smoke-light-5: var(--gray-light-5); + --smoke-light-6: var(--gray-light-6); + --smoke-light-7: var(--gray-light-7); + --smoke-light-8: var(--gray-light-8); + --smoke-light-9: var(--gray-light-9); + --smoke-light-10: var(--gray-light-10); + --smoke-light-11: var(--gray-light-11); + --smoke-light-12: var(--gray-light-12); + + --smoke-dark-1: var(--gray-dark-1); + --smoke-dark-2: var(--gray-dark-2); + --smoke-dark-3: var(--gray-dark-3); + --smoke-dark-4: var(--gray-dark-4); + --smoke-dark-5: var(--gray-dark-5); + --smoke-dark-6: var(--gray-dark-6); + --smoke-dark-7: var(--gray-dark-7); + --smoke-dark-8: var(--gray-dark-8); + --smoke-dark-9: var(--gray-dark-9); + --smoke-dark-10: var(--gray-dark-10); + --smoke-dark-11: var(--gray-dark-11); + --smoke-dark-12: var(--gray-dark-12); + + --smoke-light-alpha-1: var(--gray-light-alpha-1); + --smoke-light-alpha-2: var(--gray-light-alpha-2); + --smoke-light-alpha-3: var(--gray-light-alpha-3); + --smoke-light-alpha-4: var(--gray-light-alpha-4); + --smoke-light-alpha-5: var(--gray-light-alpha-5); + --smoke-light-alpha-6: var(--gray-light-alpha-6); + --smoke-light-alpha-7: var(--gray-light-alpha-7); + --smoke-light-alpha-8: var(--gray-light-alpha-8); + --smoke-light-alpha-9: var(--gray-light-alpha-9); + --smoke-light-alpha-10: var(--gray-light-alpha-10); + --smoke-light-alpha-11: var(--gray-light-alpha-11); + --smoke-light-alpha-12: var(--gray-light-alpha-12); + + --smoke-dark-alpha-1: var(--gray-dark-alpha-1); + --smoke-dark-alpha-2: var(--gray-dark-alpha-2); + --smoke-dark-alpha-3: var(--gray-dark-alpha-3); + --smoke-dark-alpha-4: var(--gray-dark-alpha-4); + --smoke-dark-alpha-5: var(--gray-dark-alpha-5); + --smoke-dark-alpha-6: var(--gray-dark-alpha-6); + --smoke-dark-alpha-7: var(--gray-dark-alpha-7); + --smoke-dark-alpha-8: var(--gray-dark-alpha-8); + --smoke-dark-alpha-9: var(--gray-dark-alpha-9); + --smoke-dark-alpha-10: var(--gray-dark-alpha-10); + --smoke-dark-alpha-11: var(--gray-dark-alpha-11); + --smoke-dark-alpha-12: var(--gray-dark-alpha-12); + + --amber-lightalpha-1: var(--amber-light-alpha-1); + --amber-lightalpha-2: var(--amber-light-alpha-2); + --amber-lightalpha-3: var(--amber-light-alpha-3); + --amber-lightalpha-4: var(--amber-light-alpha-4); + --amber-lightalpha-5: var(--amber-light-alpha-5); + --amber-lightalpha-6: var(--amber-light-alpha-6); + --amber-lightalpha-7: var(--amber-light-alpha-7); + --amber-lightalpha-8: var(--amber-light-alpha-8); + --amber-lightalpha-9: var(--amber-light-alpha-9); + --amber-lightalpha-10: var(--amber-light-alpha-10); + --amber-lightalpha-11: var(--amber-light-alpha-11); + --amber-lightalpha-12: var(--amber-light-alpha-12); + + --amber-darkalpha-1: var(--amber-dark-alpha-1); + --amber-darkalpha-2: var(--amber-dark-alpha-2); + --amber-darkalpha-3: var(--amber-dark-alpha-3); + --amber-darkalpha-4: var(--amber-dark-alpha-4); + --amber-darkalpha-5: var(--amber-dark-alpha-5); + --amber-darkalpha-6: var(--amber-dark-alpha-6); + --amber-darkalpha-7: var(--amber-dark-alpha-7); + --amber-darkalpha-8: var(--amber-dark-alpha-8); + --amber-darkalpha-9: var(--amber-dark-alpha-9); + --amber-darkalpha-10: var(--amber-dark-alpha-10); + --amber-darkalpha-11: var(--amber-dark-alpha-11); + --amber-darkalpha-12: var(--amber-dark-alpha-12); + + --purple-light-9: var(--lilac-light-9); + --purple-dark-9: var(--lilac-dark-9); + --cyan-light-9: var(--blue-light-9); + --cyan-dark-9: var(--blue-dark-9); }