yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI/theme/config: remove unneccessary rgb wrapper

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-11-20 16:47:08 +01:00
parent 9c550a2001
commit a4a3a646e5
8 changed files with 66 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-flyout.css
View File

@@ -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);
}

2
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-header.css
View File

@@ -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);

4
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css
View File

@@ -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));
}
}

6
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css
View File

@@ -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;
}

7
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css
View File

@@ -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);
}

12
pkgs/webview-ui/app/src/components/Typography/css/typography-color.css
View File

@@ -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);
}

2
pkgs/webview-ui/app/src/layout/layout.tsx
View File

@@ -18,7 +18,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
});
return (
<div class="h-screen bg-base-100 p-4">
<div class="h-screen p-4 bg-def-3">
<div class="drawer h-full lg:drawer-open ">
<input
id="toplevel-drawer"

48
pkgs/webview-ui/app/tailwind/core-plugin.ts
View File

@@ -4,11 +4,45 @@ import { typography } from "./typography";
import { parseColor } from "tailwindcss/lib/util/color";
/* Converts HEX color to RGB */
const toRGB = (value: string) => 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,
},