davenh99/progressa

style improvements: #83

New issue

Open

opened 2025-09-18 11:51:46 +10:00 by Ghost · 1 comment

Ghost commented

2025-09-18 11:51:46 +10:00

(Migrated from codeberg.org)

finalise colours: 500 is 'default' (from coolors), use this mainly mixed with whites and blacks, colors should mainly be accents
general styles being coherent (whether to use or not borders, or prefer areas with different bg colours)
user friendly date appearance (like 1st Sep or something)
avoid drop indicator flicker, make it have some offset from the top and bottom so it is in same position

just use daisyui with one of their themes

eliminate Types.ts

go for monkeytype style ui! https://github.com/monkeytypegame/monkeytype

- finalise colours: 500 is 'default' (from coolors), use this mainly mixed with whites and blacks, colors should mainly be accents - general styles being coherent (whether to use or not borders, or prefer areas with different bg colours) - user friendly date appearance (like 1st Sep or something) - avoid drop indicator flicker, make it have some offset from the top and bottom so it is in same position just use daisyui with one of their themes eliminate Types.ts go for monkeytype style ui! https://github.com/monkeytypegame/monkeytype

davenh99 commented

2026-06-12 11:33:01 +10:00

Owner

theme:

app.css
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "everforest-light";
default: true; /* set as default /
prefersdark: false; / set as default dark mode (prefers-color-scheme:dark) /
color-scheme: light; / color of browser-provided UI */

--color-base-100: oklch(97.35% 0.026 90.10);
--color-base-200: oklch(95.22% 0.031 98.86);
--color-base-300: oklch(91.01% 0.030 98.50);
--color-base-content: oklch(51.54% 0.021 232.87);
--color-primary: oklch(66.97% 0.156 118.23);
--color-primary-content: oklch(97.35% 0.026 90.10);
--color-secondary: oklch(65.35% 0.121 163.88);
--color-secondary-content: oklch(97.35% 0.026 90.10);
--color-accent: oklch(63.43% 0.112 236.35);
--color-accent-content: oklch(97.35% 0.026 90.10);
--color-neutral: oklch(68.88% 0.024 141.21);
--color-neutral-content: oklch(51.54% 0.021 232.87);
--color-info: oklch(68.71% 0.174 340.99);
--color-info-content: oklch(97.35% 0.026 90.10);
--color-success: oklch(72.05% 0.122 125.19);
--color-success-content: oklch(97.35% 0.026 90.10);
--color-warning: oklch(71.47% 0.173 50.75);
--color-warning-content: oklch(97.35% 0.026 90.10);
--color-error: oklch(67.07% 0.200 25.20);
--color-error-content: oklch(97.35% 0.026 90.10);

/* border radius */
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;

/* base sizes */
--size-selector: 0.25rem;
--size-field: 0.25rem;

/* border size */
--border: 1px;

/* effects */
--depth: 1;
--noise: 0;
}

{
name: "everforest-dark";
default: false; /* set as default /
prefersdark: true; / set as default dark mode (prefers-color-scheme:dark) /
color-scheme: dark; / color of browser-provided UI */

--color-base-100: oklch(32.39% 0.015 240.42);
--color-base-200: oklch(35.97% 0.017 227.06);
--color-base-300: oklch(43.12% 0.017 231.60);
--color-base-content: oklch(82.99% 0.041 86.05);
--color-primary: oklch(77.32% 0.091 125.78);
--color-primary-content: oklch(32.39% 0.015 240.42);
--color-secondary: oklch(75.36% 0.091 151.45);
--color-secondary-content: oklch(32.39% 0.015 240.42);
--color-accent: oklch(74.87% 0.063 185.50);
--color-accent-content: oklch(32.39% 0.015 240.42);
--color-neutral: oklch(64.67% 0.020 155.58);
--color-neutral-content: oklch(82.99% 0.041 86.05);
--color-info: oklch(75.01% 0.082 349.18);
--color-info-content: oklch(32.39% 0.015 240.42);
--color-success: oklch(77.32% 0.091 125.78);
--color-success-content: oklch(32.39% 0.015 240.42);
--color-warning: oklch(74.98% 0.106 44.86);
--color-warning-content: oklch(32.39% 0.015 240.42);
--color-error: oklch(70.86% 0.128 19.62);
--color-error-content: oklch(32.39% 0.015 240.42);

/* border radius */
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;

/* base sizes */
--size-selector: 0.25rem;
--size-field: 0.25rem;

/* border size */
--border: 1px;

/* effects */
--depth: 1;
--noise: 0;
}

theme: app.css @import "tailwindcss"; @plugin "daisyui"; @plugin "daisyui/theme" { name: "everforest-light"; default: true; /* set as default */ prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ color-scheme: light; /* color of browser-provided UI */ --color-base-100: oklch(97.35% 0.026 90.10); --color-base-200: oklch(95.22% 0.031 98.86); --color-base-300: oklch(91.01% 0.030 98.50); --color-base-content: oklch(51.54% 0.021 232.87); --color-primary: oklch(66.97% 0.156 118.23); --color-primary-content: oklch(97.35% 0.026 90.10); --color-secondary: oklch(65.35% 0.121 163.88); --color-secondary-content: oklch(97.35% 0.026 90.10); --color-accent: oklch(63.43% 0.112 236.35); --color-accent-content: oklch(97.35% 0.026 90.10); --color-neutral: oklch(68.88% 0.024 141.21); --color-neutral-content: oklch(51.54% 0.021 232.87); --color-info: oklch(68.71% 0.174 340.99); --color-info-content: oklch(97.35% 0.026 90.10); --color-success: oklch(72.05% 0.122 125.19); --color-success-content: oklch(97.35% 0.026 90.10); --color-warning: oklch(71.47% 0.173 50.75); --color-warning-content: oklch(97.35% 0.026 90.10); --color-error: oklch(67.07% 0.200 25.20); --color-error-content: oklch(97.35% 0.026 90.10); /* border radius */ --radius-selector: 1rem; --radius-field: 0.25rem; --radius-box: 0.5rem; /* base sizes */ --size-selector: 0.25rem; --size-field: 0.25rem; /* border size */ --border: 1px; /* effects */ --depth: 1; --noise: 0; } { name: "everforest-dark"; default: false; /* set as default */ prefersdark: true; /* set as default dark mode (prefers-color-scheme:dark) */ color-scheme: dark; /* color of browser-provided UI */ --color-base-100: oklch(32.39% 0.015 240.42); --color-base-200: oklch(35.97% 0.017 227.06); --color-base-300: oklch(43.12% 0.017 231.60); --color-base-content: oklch(82.99% 0.041 86.05); --color-primary: oklch(77.32% 0.091 125.78); --color-primary-content: oklch(32.39% 0.015 240.42); --color-secondary: oklch(75.36% 0.091 151.45); --color-secondary-content: oklch(32.39% 0.015 240.42); --color-accent: oklch(74.87% 0.063 185.50); --color-accent-content: oklch(32.39% 0.015 240.42); --color-neutral: oklch(64.67% 0.020 155.58); --color-neutral-content: oklch(82.99% 0.041 86.05); --color-info: oklch(75.01% 0.082 349.18); --color-info-content: oklch(32.39% 0.015 240.42); --color-success: oklch(77.32% 0.091 125.78); --color-success-content: oklch(32.39% 0.015 240.42); --color-warning: oklch(74.98% 0.106 44.86); --color-warning-content: oklch(32.39% 0.015 240.42); --color-error: oklch(70.86% 0.128 19.62); --color-error-content: oklch(32.39% 0.015 240.42); /* border radius */ --radius-selector: 1rem; --radius-field: 0.25rem; --radius-box: 0.5rem; /* base sizes */ --size-selector: 0.25rem; --size-field: 0.25rem; /* border size */ --border: 1px; /* effects */ --depth: 1; --noise: 0; }