dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CSS variables in app.css for improved readability and maintainability. Consolidate color and radius definitions, and enhance input focus styles for better UI consistency.

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-11 18:47:49 +07:00
parent 02ff67b606
commit c152b27aa8
1 changed files with 119 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

318
resources/css/app.css
View File

@ -14,210 +14,115 @@ @theme inline {
Instrument Sans, ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-heading:
var(--font-sans);
--color-sidebar-ring:
var(--sidebar-ring);
--color-sidebar-border:
var(--sidebar-border);
--color-sidebar-accent-foreground:
var(--sidebar-accent-foreground);
--color-sidebar-accent:
var(--sidebar-accent);
--color-sidebar-primary-foreground:
var(--sidebar-primary-foreground);
--color-sidebar-primary:
var(--sidebar-primary);
--color-sidebar-foreground:
var(--sidebar-foreground);
--color-sidebar:
var(--sidebar);
--color-chart-5:
var(--chart-5);
--color-chart-4:
var(--chart-4);
--color-chart-3:
var(--chart-3);
--color-chart-2:
var(--chart-2);
--color-chart-1:
var(--chart-1);
--color-ring:
var(--ring);
--color-input:
var(--input);
--color-border:
var(--border);
--color-destructive:
var(--destructive);
--color-accent-foreground:
var(--accent-foreground);
--color-accent:
var(--accent);
--color-muted-foreground:
var(--muted-foreground);
--color-muted:
var(--muted);
--color-secondary-foreground:
var(--secondary-foreground);
--color-secondary:
var(--secondary);
--color-primary-foreground:
var(--primary-foreground);
--color-primary:
var(--primary);
--color-popover-foreground:
var(--popover-foreground);
--color-popover:
var(--popover);
--color-card-foreground:
var(--card-foreground);
--color-card:
var(--card);
--color-foreground:
var(--foreground);
--color-background:
var(--background);
--radius-sm:
calc(var(--radius) - 4px);
--radius-md:
calc(var(--radius) - 2px);
--radius-lg:
var(--radius);
--radius-xl:
calc(var(--radius) + 4px);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
}
:root {
--radius:
0.625rem;
--background:
oklch(1 0 0);
--foreground:
oklch(0.141 0.005 285.823);
--card:
oklch(1 0 0);
--card-foreground:
oklch(0.141 0.005 285.823);
--popover:
oklch(1 0 0);
--popover-foreground:
oklch(0.141 0.005 285.823);
--primary:
oklch(0.21 0.006 285.885);
--primary-foreground:
oklch(0.985 0 0);
--secondary:
oklch(0.967 0.001 286.375);
--secondary-foreground:
oklch(0.21 0.006 285.885);
--muted:
oklch(0.967 0.001 286.375);
--muted-foreground:
oklch(0.552 0.016 285.938);
--accent:
oklch(0.967 0.001 286.375);
--accent-foreground:
oklch(0.21 0.006 285.885);
--destructive:
oklch(0.577 0.245 27.325);
--border:
oklch(0.92 0.004 286.32);
--input:
oklch(0.92 0.004 286.32);
--ring:
oklch(0.705 0.015 286.067);
--chart-1:
oklch(0.646 0.222 41.116);
--chart-2:
oklch(0.6 0.118 184.704);
--chart-3:
oklch(0.398 0.07 227.392);
--chart-4:
oklch(0.828 0.189 84.429);
--chart-5:
oklch(0.769 0.188 70.08);
--sidebar:
oklch(0.985 0 0);
--sidebar-foreground:
oklch(0.141 0.005 285.823);
--sidebar-primary:
oklch(0.21 0.006 285.885);
--sidebar-primary-foreground:
oklch(0.985 0 0);
--sidebar-accent:
oklch(0.967 0.001 286.375);
--sidebar-accent-foreground:
oklch(0.21 0.006 285.885);
--sidebar-border:
oklch(0.92 0.004 286.32);
--sidebar-ring:
oklch(0.705 0.015 286.067);
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.852 0.199 91.936);
--primary-foreground: oklch(0.421 0.095 57.708);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--input-focus-border: var(--primary);
--input-focus-ring: color-mix(in oklch, var(--primary) 50%, transparent);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.879 0.169 91.605);
--chart-2: oklch(0.769 0.188 70.08);
--chart-3: oklch(0.666 0.179 58.318);
--chart-4: oklch(0.555 0.163 48.998);
--chart-5: oklch(0.473 0.137 46.201);
--radius: 0.45rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.681 0.162 75.834);
--sidebar-primary-foreground: oklch(0.987 0.026 102.212);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background:
oklch(0.141 0.005 285.823);
--foreground:
oklch(0.985 0 0);
--card:
oklch(0.21 0.006 285.885);
--card-foreground:
oklch(0.985 0 0);
--popover:
oklch(0.21 0.006 285.885);
--popover-foreground:
oklch(0.985 0 0);
--primary:
oklch(0.92 0.004 286.32);
--primary-foreground:
oklch(0.21 0.006 285.885);
--secondary:
oklch(0.274 0.006 286.033);
--secondary-foreground:
oklch(0.985 0 0);
--muted:
oklch(0.274 0.006 286.033);
--muted-foreground:
oklch(0.705 0.015 286.067);
--accent:
oklch(0.274 0.006 286.033);
--accent-foreground:
oklch(0.985 0 0);
--destructive:
oklch(0.704 0.191 22.216);
--border:
oklch(1 0 0 / 10%);
--input:
oklch(1 0 0 / 15%);
--ring:
oklch(0.552 0.016 285.938);
--chart-1:
oklch(0.488 0.243 264.376);
--chart-2:
oklch(0.696 0.17 162.48);
--chart-3:
oklch(0.769 0.188 70.08);
--chart-4:
oklch(0.627 0.265 303.9);
--chart-5:
oklch(0.645 0.246 16.439);
--sidebar:
oklch(0.21 0.006 285.885);
--sidebar-foreground:
oklch(0.985 0 0);
--sidebar-primary:
oklch(0.488 0.243 264.376);
--sidebar-primary-foreground:
oklch(0.985 0 0);
--sidebar-accent:
oklch(0.274 0.006 286.033);
--sidebar-accent-foreground:
oklch(0.985 0 0);
--sidebar-border:
oklch(1 0 0 / 10%);
--sidebar-ring:
oklch(0.552 0.016 285.938);
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.795 0.184 86.047);
--primary-foreground: oklch(0.421 0.095 57.708);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.879 0.169 91.605);
--chart-2: oklch(0.769 0.188 70.08);
--chart-3: oklch(0.666 0.179 58.318);
--chart-4: oklch(0.555 0.163 48.998);
--chart-5: oklch(0.473 0.137 46.201);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.795 0.184 86.047);
--sidebar-primary-foreground: oklch(0.987 0.026 102.212);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
@ -228,6 +133,21 @@ @layer base {
body {
@apply bg-background text-foreground;
}
html {
@apply font-sans;
}
}
@layer utilities {
[data-slot="input"]:focus-visible:not(:disabled):not([aria-invalid="true"]),
[data-slot="textarea"]:focus-visible:not(:disabled):not([aria-invalid="true"]),
[data-slot="select-trigger"]:focus-visible:not(:disabled):not([aria-invalid="true"]),
[data-slot="rich-text-editor"]:focus-within:not([data-disabled="true"]):not([aria-invalid="true"]) {
border-color: var(--input-focus-border);
box-shadow: 0 0 0 3px var(--input-focus-ring);
}
}
/* sonner */
@ -257,4 +177,4 @@ [data-sonner-toast][data-type="info"] {
border-top: 0;
border-right: 0;
border-bottom: 0;
}
}