jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify frontend theme setup

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-05-07 16:35:47 -04:00
parent 9768a37252
commit 6ac05e1a10
9 changed files with 70 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/assets/main.css
View File

@@ -2,80 +2,25 @@
@custom-variant dark (&:where(.dark, .dark *));
@theme inline {
--color-hBackground: var(--h-background);
--color-hOnBackground: var(--h-on-background);
--color-hSurface: var(--h-surface);
--color-hOnSurface: var(--h-on-surface);
--color-hPrimary: var(--h-primary);
--color-hOnPrimary: var(--h-on-primary);
--color-hSecondary: var(--h-secondary);
--color-hOnSecondary: var(--h-on-secondary);
--color-hTertiary: var(--h-tertiary);
--color-hOnTertiary: var(--h-on-tertiary);
--color-hError: var(--h-error);
--color-hOnError: var(--h-on-error);
}
:root {
--socialize-primary: #172033;
--socialize-accent: #ff8a3d;
--socialize-accent-strong: #ef4444;
--socialize-brand-gradient: linear-gradient(135deg, var(--socialize-accent) 0%, var(--socialize-accent-strong) 100%);
--socialize-accent-shadow: rgba(255, 138, 61, 0.28);
--socialize-accent-strong-shadow: rgba(239, 68, 68, 0.28);
--socialize-highlight: #2fa58d;
--h-background: #f4f6f3;
--h-on-background: #172033;
--h-surface: #fbfaf6;
--h-surface-muted: #f1f5f2;
--h-on-surface: #172033;
--h-control: #eef3ef;
--h-control-hover: #e7eee9;
--h-control-focus: #ffffff;
--h-border: #c7d2cc;
--h-border-strong: #94a39d;
--h-primary: #172033;
--h-on-primary: #fbfaf6;
--h-secondary: #fff3e2;
--h-on-secondary: #172033;
--h-tertiary: #d9f6ee;
--h-on-tertiary: #0f766e;
--h-error: #bc2f2f;
--h-on-error: #ffffff;
--color-hBackground: rgb(var(--v-theme-background));
--color-hOnBackground: rgb(var(--v-theme-on-background));
--color-hSurface: rgb(var(--v-theme-surface));
--color-hOnSurface: rgb(var(--v-theme-on-surface));
--color-hPrimary: rgb(var(--v-theme-primary));
--color-hOnPrimary: rgb(var(--v-theme-on-primary));
--color-hSecondary: rgb(var(--v-theme-secondary));
--color-hOnSecondary: rgb(var(--v-theme-on-secondary));
--color-hTertiary: rgb(var(--v-theme-tertiary));
--color-hOnTertiary: rgb(var(--v-theme-on-tertiary));
--color-hError: rgb(var(--v-theme-error));
--color-hOnError: rgb(var(--v-theme-on-error));
}
html,
body,
#app {
min-height: 100%;
background: var(--h-background);
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
select,
textarea {
background-color: var(--h-control) !important;
border-color: var(--h-border) !important;
color: var(--h-on-surface);
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):hover,
select:hover,
textarea:hover {
background-color: var(--h-control-hover) !important;
border-color: var(--h-border-strong) !important;
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):focus,
select:focus,
textarea:focus,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):focus-visible,
select:focus-visible,
textarea:focus-visible {
background-color: var(--h-control-focus) !important;
border-color: var(--socialize-highlight) !important;
box-shadow: 0 0 0 3px rgba(47, 165, 141, 0.16);
outline: none;
background: #f4f6f3;
}
input::placeholder,
@@ -85,8 +30,8 @@ textarea::placeholder {
}
.v-application {
background: var(--h-background) !important;
color: var(--h-on-background);
background: rgb(var(--v-theme-background)) !important;
color: rgb(var(--v-theme-on-background));
}
.v-card,
@@ -94,41 +39,47 @@ textarea::placeholder {
.v-list,
.v-menu > .v-overlay__content,
.v-dialog > .v-overlay__content {
background-color: var(--h-surface) !important;
border: 1px solid var(--h-border);
background-color: rgb(var(--v-theme-surface)) !important;
border: 1px solid rgb(var(--v-theme-border));
}
.v-field {
background-color: var(--h-control) !important;
color: var(--h-on-surface);
background-color: rgb(var(--v-theme-control)) !important;
color: rgb(var(--v-theme-on-surface));
}
.v-field:hover {
background-color: var(--h-control-hover) !important;
background-color: rgb(var(--v-theme-control-hover)) !important;
}
.v-field--focused {
background-color: var(--h-control-focus) !important;
background-color: rgb(var(--v-theme-control-focus)) !important;
}
.v-field__outline {
color: var(--h-border-strong);
color: rgb(var(--v-theme-border-strong));
}
.v-field--focused .v-field__outline {
color: var(--socialize-highlight);
color: rgb(var(--v-theme-highlight));
}
.v-field__input,
.v-field-label {
color: var(--h-on-surface);
color: rgb(var(--v-theme-on-surface));
}
.v-select .v-field .v-field__input > input,
.v-select .v-field .v-field__input > input::placeholder {
color: transparent !important;
caret-color: transparent;
}
.panel,
[class$='-panel'],
[class$='-card'],
div.card {
border-color: var(--h-border) !important;
border-color: rgb(var(--v-theme-border)) !important;
}
@layer components {