diff --git a/app/assets/main.css b/app/assets/main.css index 1d279645bb..23d41a7c98 100644 --- a/app/assets/main.css +++ b/app/assets/main.css @@ -5,84 +5,83 @@ box-sizing: border-box; } -/* :root:not([data-theme='light']), */ -/* :root[data-theme='dark'] { */ -/* background colors */ -/* --bg: var(--bg-color, oklch(0.171 0 0)); */ -/* --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); */ -/* --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); */ -/* --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); */ - -/* text colors */ -/* --fg: oklch(0.982 0 0); */ -/* --fg-muted: oklch(0.749 0 0); */ -/* --fg-subtle: oklch(0.673 0 0); */ - -/* border, separator colors */ -/* --border: oklch(0.269 0 0); */ -/* --border-subtle: oklch(0.239 0 0); */ -/* --border-hover: oklch(0.371 0 0); */ - -/* accent color, set by user from settings */ -/* --accent: var(--accent-color, oklch(0.787 0.128 230.318)); */ -/* --accent-muted: var(--accent-color, oklch(0.922 0 0)); */ - -/* accent colors */ -/* --swatch-sky: oklch(0.787 0.128 230.318); */ -/* --swatch-coral: oklch(0.704 0.177 14.75); */ -/* --swatch-amber: oklch(0.828 0.165 84.429); */ -/* --swatch-emerald: oklch(0.792 0.153 166.95); */ -/* --swatch-violet: oklch(0.78 0.148 286.067); */ -/* --swatch-magenta: oklch(0.78 0.15 330); */ -/* --swatch-neutral: oklch(1 0 0); */ - -/* syntax highlighting colors */ -/* --syntax-fn: oklch(0.727 0.137 299.149); */ -/* --syntax-str: oklch(0.829 0.088 252.458); */ -/* --syntax-kw: oklch(0.721 0.162 15.494); */ -/* --syntax-comment: oklch(0.551 0.019 250.976); */ - -/* badge colors for background & text */ -/* --badge-orange: oklch(0.67 0.185 55); */ -/* --badge-yellow: oklch(0.588 0.183 91); */ -/* --badge-green: oklch(0.566 0.202 165); */ -/* --badge-cyan: oklch(0.571 0.181 210); */ -/* --badge-blue: oklch(0.579 0.191 252); */ -/* --badge-indigo: oklch(0.573 0.262 276.966); */ -/* --badge-purple: oklch(0.495 0.172 295); */ -/* --badge-pink: oklch(0.584 0.189 343); */ -/* } */ - -/* :root[data-theme='dark'][data-bg-theme='slate'] { */ -/* --bg: oklch(0.151 0.018 264.695); */ -/* --bg-subtle: oklch(0.179 0.015 262.421); */ -/* --bg-muted: oklch(0.214 0.018 261.234); */ -/* --bg-elevated: oklch(0.259 0.021 260.031); */ -/* } */ - -/* :root[data-theme='dark'][data-bg-theme='zinc'] { */ -/* --bg: oklch(0.158 0.005 285.823); */ -/* --bg-subtle: oklch(0.188 0.005 285.894); */ -/* --bg-muted: oklch(0.219 0.005 285.929); */ -/* --bg-elevated: oklch(0.256 0.006 286.033); */ -/* } */ - -/* :root[data-theme='dark'][data-bg-theme='stone'] { */ -/* --bg: oklch(0.164 0.004 89.25); */ -/* --bg-subtle: oklch(0.198 0.008 89.321); */ -/* --bg-muted: oklch(0.228 0.015 89.386); */ -/* --bg-elevated: oklch(0.252 0.018 84.298); */ -/* } */ - -/* :root[data-theme='dark'][data-bg-theme='black'] { */ -/* --bg: oklch(0 0 0); */ -/* --bg-subtle: oklch(0.148 0 0); */ -/* --bg-muted: oklch(0.204 0 0); */ -/* --bg-elevated: oklch(0.264 0 0); */ -/* } */ - -/* :root[data-theme='light'] { */ -:root { +:root:not([data-theme='light']), +:root[data-theme='dark'] { + /* background colors */ + --bg: var(--bg-color, oklch(0.171 0 0)); + --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); + --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); + --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); + + /* text colors */ + --fg: oklch(0.982 0 0); + --fg-muted: oklch(0.749 0 0); + --fg-subtle: oklch(0.673 0 0); + + /* border, separator colors */ + --border: oklch(0.269 0 0); + --border-subtle: oklch(0.239 0 0); + --border-hover: oklch(0.371 0 0); + + /* accent color, set by user from settings */ + --accent: var(--accent-color, oklch(0.787 0.128 230.318)); + --accent-muted: var(--accent-color, oklch(0.922 0 0)); + + /* accent colors */ + --swatch-sky: oklch(0.787 0.128 230.318); + --swatch-coral: oklch(0.704 0.177 14.75); + --swatch-amber: oklch(0.828 0.165 84.429); + --swatch-emerald: oklch(0.792 0.153 166.95); + --swatch-violet: oklch(0.78 0.148 286.067); + --swatch-magenta: oklch(0.78 0.15 330); + --swatch-neutral: oklch(1 0 0); + + /* syntax highlighting colors */ + --syntax-fn: oklch(0.727 0.137 299.149); + --syntax-str: oklch(0.829 0.088 252.458); + --syntax-kw: oklch(0.721 0.162 15.494); + --syntax-comment: oklch(0.551 0.019 250.976); + + /* badge colors for background & text */ + --badge-orange: oklch(0.67 0.185 55); + --badge-yellow: oklch(0.588 0.183 91); + --badge-green: oklch(0.566 0.202 165); + --badge-cyan: oklch(0.571 0.181 210); + --badge-blue: oklch(0.579 0.191 252); + --badge-indigo: oklch(0.573 0.262 276.966); + --badge-purple: oklch(0.495 0.172 295); + --badge-pink: oklch(0.584 0.189 343); +} + +:root[data-theme='dark'][data-bg-theme='slate'] { + --bg: oklch(0.151 0.018 264.695); + --bg-subtle: oklch(0.179 0.015 262.421); + --bg-muted: oklch(0.214 0.018 261.234); + --bg-elevated: oklch(0.259 0.021 260.031); +} + +:root[data-theme='dark'][data-bg-theme='zinc'] { + --bg: oklch(0.158 0.005 285.823); + --bg-subtle: oklch(0.188 0.005 285.894); + --bg-muted: oklch(0.219 0.005 285.929); + --bg-elevated: oklch(0.256 0.006 286.033); +} + +:root[data-theme='dark'][data-bg-theme='stone'] { + --bg: oklch(0.164 0.004 89.25); + --bg-subtle: oklch(0.198 0.008 89.321); + --bg-muted: oklch(0.228 0.015 89.386); + --bg-elevated: oklch(0.252 0.018 84.298); +} + +:root[data-theme='dark'][data-bg-theme='black'] { + --bg: oklch(0 0 0); + --bg-subtle: oklch(0.148 0 0); + --bg-muted: oklch(0.204 0 0); + --bg-elevated: oklch(0.264 0 0); +} + +:root[data-theme='light'] { --bg: var(--bg-color, oklch(1 0 0)); --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375)); --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76)); @@ -123,50 +122,44 @@ --badge-cyan: oklch(0.571 0.181 210); } -/* :root[data-theme='light'][data-bg-theme='slate'] { */ -:root[data-bg-theme='slate'] { +:root[data-theme='light'][data-bg-theme='slate'] { --bg: oklch(1 0 0); --bg-subtle: oklch(0.982 0.008 269.62); --bg-muted: oklch(0.96 0.008 261.234); --bg-elevated: oklch(0.943 0.012 255.52); } -/* :root[data-theme='light'][data-bg-theme='zinc'] { */ -:root[data-bg-theme='zinc'] { +:root[data-theme='light'][data-bg-theme='zinc'] { --bg: oklch(1 0 0); --bg-subtle: oklch(0.979 0.004 286.53); --bg-muted: oklch(0.958 0.004 286.39); --bg-elevated: oklch(0.939 0.004 286.32); } -/* :root[data-theme='light'][data-bg-theme='stone'] { */ -:root[data-bg-theme='stone'] { +:root[data-theme='light'][data-bg-theme='stone'] { --bg: oklch(1 0 0); --bg-subtle: oklch(0.979 0.004 88.762); --bg-muted: oklch(0.958 0.005 88.743); --bg-elevated: oklch(0.943 0.005 88.731); } -/* :root[data-theme='light'][data-bg-theme='black'] { */ -:root[data-bg-theme='black'] { +:root[data-theme='light'][data-bg-theme='black'] { --bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0)); } @media (prefers-contrast: more) { - /* :root[data-theme='dark'] { */ - /* text colors */ - /* --fg: oklch(1 0 0); */ - /* --fg-muted: oklch(0.769 0 0); */ - /* --fg-subtle: oklch(0.693 0 0); */ - - /* border, separator colors */ - /* --border: oklch(0.769 0 0); */ - /* --border-subtle: oklch(0.739 0 0); */ - /* --border-hover: oklch(0.771 0 0); */ - /* } */ + :root[data-theme='dark'] { + /* text colors */ + --fg: oklch(1 0 0); + --fg-muted: oklch(0.769 0 0); + --fg-subtle: oklch(0.693 0 0); + /* border, separator colors */ + --border: oklch(0.769 0 0); + --border-subtle: oklch(0.739 0 0); + --border-hover: oklch(0.771 0 0); + } - /* :root[data-theme='light'] { */ - :root { + :root[data-theme='light'] { /* text colors */ --fg: oklch(0 0 0); --fg-muted: oklch(0.329 0 0); diff --git a/app/pages/index.vue b/app/pages/index.vue index 2f094d3a1a..48c5575b00 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -92,16 +92,6 @@ defineOgImageComponent('Default', { -

- Update: - We’ve completed our user experience research and carefully reviewed the results. To - deliver the best possible experience, we’ve decided to remove the dark theme. We’re - committed to making decisions based on what works best for our users and are glad we took - the time to validate this through - user research. Thank you for participating 🤍 -