From a4a3a646e5a0decb32ba845228679e9d5b92d067 Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Wed, 20 Nov 2024 16:47:08 +0100 Subject: [PATCH] UI/theme/config: remove unneccessary rgb wrapper --- .../components/Sidebar/css/sidebar-flyout.css | 5 +- .../components/Sidebar/css/sidebar-header.css | 2 +- .../Sidebar/css/sidebar-list-item.css | 4 +- .../Sidebar/css/sidebar-profile.css | 6 +-- .../src/components/Sidebar/css/sidebar.css | 7 +-- .../Typography/css/typography-color.css | 12 ++--- pkgs/webview-ui/app/src/layout/layout.tsx | 2 +- pkgs/webview-ui/app/tailwind/core-plugin.ts | 48 ++++++++++++++++++- 8 files changed, 66 insertions(+), 20 deletions(-) diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-flyout.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-flyout.css index 5090c238d..56401367e 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-flyout.css +++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-flyout.css @@ -14,7 +14,8 @@ height: inherit; padding: theme(padding.12) theme(padding.3) theme(padding.3); - background-color: rgba(var(--clr-bg-inv-4) / 0.95); - border: 1px solid rgb(var(--clr-border-inv-4)); + background-color: var(--clr-bg-inv-4); + /* / 0.95); */ + border: 1px solid var(--clr-border-inv-4); border-radius: theme(borderRadius.lg); } diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-header.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-header.css index 39efedf1c..80d6d5bf9 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-header.css +++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-header.css @@ -11,7 +11,7 @@ width: 100%; height: 100%; - background: rgb(var(--clr-bg-inv-3)); + background: var(--clr-bg-inv-3); border-bottom: 1px solid var(--clr-border-inv-3); border-top-left-radius: theme(borderRadius.xl); diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css index c883518fc..dfa21e989 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css +++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css @@ -17,7 +17,7 @@ } &:hover:after { - background: rgb(var(--clr-bg-inv-acc-2)); + background: var(--clr-bg-inv-acc-2); transform: scale(theme(scale.100)); transition: transform 0.24s ease-in-out; } @@ -28,7 +28,7 @@ } &:active:after { - background: rgb(var(--clr-bg-inv-acc-3)); + background: var(--clr-bg-inv-acc-3); transform: scale(theme(scale.100)); } } diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css index 05169862f..2ddfc79b3 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css +++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css @@ -6,14 +6,14 @@ width: theme(width.8); height: theme(height.8); - background: rgb(var(--clr-bg-inv-4)); + background: var(--clr-bg-inv-4); border-radius: 50%; } .sidebar__profile--flyout { - background: rgb(var(--clr-bg-def-2)); + background: var(--clr-bg-def-2); } .sidebar__profile--flyout > .sidebar__profile__character { - color: rgb(var(--clr-fg-def-1)) !important; + color: var(--clr-fg-def-1) !important; } diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css index 649ca70df..73b7b647b 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css +++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css @@ -10,8 +10,8 @@ .sidebar { min-width: theme(width.72); height: 100%; - background-color: rgb(var(--clr-bg-inv-2)); - border: 1px solid rgb(var(--clr-border-inv-2)); + background-color: var(--clr-bg-inv-2); + border: 1px solid var(--clr-border-inv-2); border-radius: theme(borderRadius.xl); } @@ -24,6 +24,7 @@ .sidebar__section { padding: theme(padding.2); - background-color: rgba(var(--clr-bg-inv-3) / 0.9); + /* background-color: rgba(var(--clr-bg-inv-3) / 0.9); */ + @apply bg-primary-800/90; border-radius: theme(borderRadius.md); } diff --git a/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css b/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css index 6f0952945..0a8d29913 100644 --- a/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css +++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css @@ -1,23 +1,23 @@ .fnt-clr-primary { - color: (rgb(--clr-fg-def-1)); + color: var(--clr-fg-def-1); } .fnt-clr-secondary { - color: rgb(var(--clr-fg-def-2)); + color: var(--clr-fg-def-2); } .fnt-clr-tertiary { - color: rgb(var(--clr-fg-def-3)); + color: var(--clr-fg-def-3); } .fnt-clr-primary.fnt-clr--inverted { - color: rgb(var(--clr-fg-inv-1)); + color: var(--clr-fg-inv-1); } .fnt-clr-secondary.fnt-clr--inverted { - color: rgb(var(--clr-fg-inv-2)); + color: var(--clr-fg-inv-2); } .fnt-clr-tertiary.fnt-clr--inverted { - color: rgb(var(--clr-fg-inv-3)); + color: var(--clr-fg-inv-3); } diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx index 8fee28058..0e6916c1e 100644 --- a/pkgs/webview-ui/app/src/layout/layout.tsx +++ b/pkgs/webview-ui/app/src/layout/layout.tsx @@ -18,7 +18,7 @@ export const Layout: Component = (props) => { }); return ( -
+
parseColor(value).color.join(" "); +const toRGB = (value: string) => + "rgb(" + parseColor(value).color.join(" ") + ")"; export default plugin.withOptions( (_options = {}) => - () => { + ({ addUtilities, theme }) => { + addUtilities({ + ".bg-def-1": { + backgroundColor: theme("colors.white"), + }, + ".bg-def-2": { + backgroundColor: theme("colors.secondary.50"), + }, + ".bg-def-3": { + backgroundColor: theme("colors.secondary.100"), + }, + ".bg-def-4": { + backgroundColor: theme("colors.secondary.200"), + }, + ".bg-def-5": { + backgroundColor: theme("colors.secondary.300"), + }, + // Dark mode utilities (all elements within `.dark` class) + // ".dark .bg-def-1": { + // backgroundColor: theme("colors.black"), + // }, + // ".dark .bg-def-2": { + // backgroundColor: theme("colors.primary.900"), + // }, + // ".dark .bg-def-3": { + // backgroundColor: theme("colors.primary.800"), + // }, + // ".dark .bg-def-4": { + // backgroundColor: theme("colors.primary.700"), + // }, + // ".dark .bg-def-5": { + // backgroundColor: theme("colors.primary.600"), + // }, + }); // add more base styles }, // add configuration which is merged with the final config @@ -71,6 +105,16 @@ export default plugin.withOptions( 950: toRGB("#461129"), }, }, + boxShadow: { + "inner-primary": + "2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset", + "inner-primary-active": + "0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), -2px -2px 0px 0px var(--clr-bg-inv-acc-1, #7B9B9F) inset", + "inner-secondary": + "-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px white inset", + "inner-secondary-active": + "0px 0px 0px 1px white, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), 2px 2px 0px 0px var(--clr-bg-inv-acc-2, #4F747A) inset", + }, }, ...typography, },