danvics/ProzillaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated themes with new color palette

Browse source
This commit is contained in:
Prozilla 2024-06-04 22:07:58 +02:00
parent 7cdaf60a8f
commit 74daced759
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
9 changed files with 72 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/apps/calculator/Calculator.module.css
View file

@ -53,7 +53,7 @@
.Input-row:first-of-type .Button {
--normal-color: var(--background-color-1);
--hover-color: var(--background-color-1a);
--hover-color: var(--background-color-2);
}
.Input-row .Button:last-of-type {

3
src/components/apps/settings/Settings.module.css
View file

@ -18,7 +18,7 @@
max-width: 50%;
padding: 0.5rem;
margin: 0;
background-color: var(--background-color-1a);
background-color: var(--background-color-2);
resize: horizontal;
overflow: hidden;
}
@ -59,6 +59,7 @@
align-content: flex-start;
height: 100%;
padding: 0.5rem 1rem;
background-color: var(--background-color-3);
overflow: auto;
}

4
src/components/desktop/Desktop.module.css
View file

@ -35,7 +35,7 @@
.Item {
padding: 0.25rem;
text-shadow: 0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--background-color-0) 75%, transparent);
text-shadow: 0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--black-0) 75%, transparent);
}
.Item p {
@ -43,5 +43,5 @@
}
.Item svg {
filter: drop-shadow(0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--background-color-0) 50%, transparent));
filter: var(--svg-drop-shadow-0);
}

12
src/components/taskbar/Taskbar.module.css
View file

@ -1,14 +1,6 @@
:root {
--taskbar-height: 3rem;
--taskbar-color: var(--background-color-2);
--taskbar-opacity: 0.75;
--taskbar-menu-color: var(--background-color-1);
--taskbar-menu-opacity: 0.5;
--taskbar-button-hover-color: rgba(255, 255, 255, 5%);
--taskbar-filter: blur(1rem);
}
.Taskbar {
--svg-drop-shadow-color: var(--taskbar-color);
position: fixed;
display: flex;
bottom: 0;

2
src/components/taskbar/app-icon/AppIcon.module.css
View file

@ -8,7 +8,7 @@
}
.App-icon svg {
filter: drop-shadow(0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--taskbar-color) 50%, transparent));
filter: var(--svg-drop-shadow-0);
}
.App-icon.Hidden {

2
src/components/taskbar/menus/AppList.module.css
View file

@ -24,7 +24,7 @@
}
.App-button svg {
filter: drop-shadow(0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--taskbar-color) 50%, transparent));
filter: var(--svg-drop-shadow-0);
}
.App-button > p, .App-button > h2 {

1
src/hooks/themes/themes.tsx
View file

@ -5,7 +5,6 @@ import { SettingsManager } from "../../features/settings/settingsManager";
export const THEMES = {
0: "Dark",
1: "Light",
4: "Muted",
2: "Cherry",
3: "Mango",
5: "Aqua",

103
src/styles/global/themes.css
View file

@ -1,70 +1,67 @@
.Light-theme {
--foreground-color-a: var(--dark-grey-ca);
--foreground-color-b: var(--dark-grey-c);
--foreground-color-c: var(--dark-grey-b);
--foreground-color-0: var(--black-3);
--foreground-color-1: var(--black-2);
--foreground-color-2: var(--black-1);
--background-color-a: var(--grey-aa);
--background-color-b: var(--grey-a);
--background-color-ba: var(--white-b);
--background-color-c: var(--white-a);
--background-color-d: var(--white-b);
--background-color-0: var(--white-0);
--background-color-1: var(--white-0);
--background-color-2: var(--white-1);
--background-color-3: var(--white-1);
--background-color-4: var(--white-2);
--taskbar-color: rgba(255, 255, 255, 25%);
--background-color-c-hsl: 210, 45%, 90%;
}
.Cherry-theme, .Mango-theme, .Muted-theme, .Aqua-theme, .Grape-theme {
--hue: 0;
--saturation: 1;
--lightness: 1;
--white-a: hsl(var(--hue), calc(54% * var(--saturation)), calc(95% * var(--lightness)));
--white-b: hsl(var(--hue), calc(45% * var(--saturation)), calc(90% * var(--lightness)));
--grey-a: hsl(var(--hue), calc(36% * var(--saturation)), calc(85% * var(--lightness)));
--grey-aa: hsl(var(--hue), calc(27% * var(--saturation)), calc(72.5% * var(--lightness)));
--grey-b: hsl(var(--hue), calc(18% * var(--saturation)), calc(60% * var(--lightness)));
--dark-grey-a: hsl(var(--hue), calc(14% * var(--saturation)), calc(40% * var(--lightness)));
--dark-grey-b: hsl(var(--hue), calc(29% * var(--saturation)), calc(19% * var(--lightness)));
--dark-grey-c: hsl(var(--hue), calc(29% * var(--saturation)), calc(15% * var(--lightness)));
--dark-grey-ca: hsl(var(--hue), calc(27% * var(--saturation)), calc(12% * var(--lightness)));
--dark-grey-d: hsl(var(--hue), calc(14% * var(--saturation)), calc(10% * var(--lightness)));
--dark-grey-e: hsl(var(--hue), calc(12% * var(--saturation)), calc(8% * var(--lightness)));
--foreground-color-a: var(--white-a);
--foreground-color-b: var(--grey-a);
--foreground-color-c: var(--grey-b);
--background-color-a: var(--dark-grey-b);
--background-color-b: var(--dark-grey-c);
--background-color-ba: var(--dark-grey-ca);
--background-color-c: var(--dark-grey-d);
--background-color-d: var(--dark-grey-e);
--taskbar-color: var(--white-0);
--taskbar-menu-color: var(--white-0);
--taskbar-button-hover-color: rgba(0, 0, 0, 5%);
}
.Cherry-theme {
--hue: 0;
--saturation: 5;
--lightness: 1.5;
--background-color-0: var(--red-0);
--background-color-1: var(--red-0);
--background-color-2: var(--red-1);
--background-color-3: var(--red-1);
--background-color-4: var(--red-2);
--taskbar-color: var(--red-2);
--taskbar-menu-color: var(--red-1);
}
.Mango-theme {
--hue: 40;
--saturation: 5;
--lightness: 2.5;
}
--foreground-color-0: var(--black-3);
--foreground-color-1: var(--black-2);
--foreground-color-2: var(--black-1);
.Muted-theme {
--saturation: 0;
--background-color-0: var(--yellow-0);
--background-color-1: var(--yellow-0);
--background-color-2: var(--yellow-1);
--background-color-3: var(--yellow-1);
--background-color-4: var(--yellow-2);
--taskbar-color: var(--yellow-0);
--taskbar-menu-color: var(--yellow-0);
}
.Aqua-theme {
--hue: 180;
--saturation: 4;
--lightness: 2;
--foreground-color-0: var(--black-3);
--foreground-color-1: var(--black-2);
--foreground-color-2: var(--black-1);
--background-color-0: var(--cyan-0);
--background-color-1: var(--cyan-0);
--background-color-2: var(--cyan-1);
--background-color-3: var(--cyan-1);
--background-color-4: var(--cyan-2);
--taskbar-color: var(--cyan-0);
--taskbar-menu-color: var(--cyan-0);
}
.Grape-theme {
--hue: 310;
--saturation: 5;
--lightness: 1.5;
--background-color-0: var(--purple-0);
--background-color-1: var(--purple-0);
--background-color-2: var(--purple-1);
--background-color-3: var(--purple-1);
--background-color-4: var(--purple-2);
--taskbar-color: var(--purple-2);
--taskbar-menu-color: var(--purple-1);
}

14
src/styles/global/variables.css
View file

@ -64,6 +64,10 @@
--border-radius-0: 0.2rem;
--border-radius-1: 0.375rem;
--border-radius-99: 9999px;
--svg-drop-shadow-color: var(--black-0);
--svg-drop-shadow-0: drop-shadow(0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--svg-drop-shadow-color) 50%, transparent));
--svg-drop-shadow-1: drop-shadow(0.1rem 0.1rem 0.2rem color-mix(in srgb, var(--svg-drop-shadow-color) 75%, transparent));
--window-shadow-size: 0.3rem;
--window-shadow-opacity: 35%;
@ -71,4 +75,12 @@
--window-box-shadow: calc(var(--window-shadow-size) * -1) var(--window-shadow-size)
calc(var(--window-shadow-size) * var(--window-shadow-spread)) 0px
rgba(0, 0, 0, var(--window-shadow-opacity));
}
--taskbar-height: 3rem;
--taskbar-color: var(--background-color-2);
--taskbar-opacity: 0.75;
--taskbar-menu-color: var(--background-color-1);
--taskbar-menu-opacity: 0.5;
--taskbar-button-hover-color: rgba(255, 255, 255, 5%);
--taskbar-filter: blur(1rem);
}