ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(app): color themes (#30824)

Browse source 
Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>
This commit is contained in:
Aarav Sareen 2026-06-05 06:23:36 +05:30 • committed by GitHub
commit 605ae48c6f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 1040 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

5
packages/ui/src/v2/components/dialog-v2.css
View file

@ -7,7 +7,7 @@
background-color: var(--v2-overlay-simple-overlay-scrim);
}
[data-component="dialog"] {
[data-component="dialog-v2"] {
position: fixed;
inset: 0;
z-index: 50;
@ -25,7 +25,7 @@
background: var(--v2-background-bg-layer-01);
box-shadow: var(--v2-elevation-overlay);
border-radius: 6px;
overflow: visible;
overflow: hidden;
pointer-events: auto;
[data-slot="dialog-content"] {
@ -37,6 +37,7 @@
max-height: 100%;
flex: 1;
overflow: auto;
background: transparent;
scrollbar-width: none;
-ms-overflow-style: none;

2
packages/ui/src/v2/components/dialog-v2.stories.tsx
View file

@ -17,7 +17,7 @@ Dialog content wrapper built on Kobalte's dialog primitive with v2 styling.
- Focus trapping and aria attributes provided by Kobalte Dialog.
### Theming/tokens
- Uses \`data-component="dialog"\` and slot attributes.
- Uses \`data-component="dialog-v2"\` and slot attributes.
`
export default {

10
packages/ui/src/v2/components/dialog-v2.tsx
View file

@ -7,6 +7,7 @@ export interface DialogProps extends ParentProps {
description?: JSXElement
action?: JSXElement
size?: "normal" | "large" | "x-large"
variant?: "default" | "settings"
class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"]
fit?: boolean
@ -17,14 +18,19 @@ export function DialogFooter(props: ParentProps) {
}
export function Dialog(props: DialogProps) {
const [local] = splitProps(props, ["title", "description", "action", "size", "class", "classList", "fit", "children"])
const [local] = splitProps(props, ["title", "description", "action", "size", "variant", "class", "classList", "fit", "children"])
const title = children(() => local.title)
const description = children(() => local.description)
const action = children(() => local.action)
const hasHeader = () => title() || action()
return (
<div data-component="dialog" data-fit={local.fit ? true : undefined} data-size={local.size || "normal"}>
<div
data-component="dialog-v2"
data-variant={local.variant === "settings" ? "settings" : undefined}
data-fit={local.fit ? true : undefined}
data-size={local.size || "normal"}
>
<div data-slot="dialog-container">
<Kobalte.Content
data-slot="dialog-content"

2
packages/ui/src/v2/components/project-avatar-v2.css
View file

@ -20,7 +20,7 @@
letter-spacing: 0.05px;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
color: var(--v2-grey-100);
color: var(--v2-avatar-fg);
text-shadow: 0 0 4px var(--v2-alpha-dark-20);
user-select: none;
-webkit-user-select: none;

113
packages/ui/src/v2/styles/theme.css
View file

@ -63,25 +63,26 @@
--v2-state-fg-info: var(--v2-blue-800);
--v2-state-border-info: var(--v2-blue-300);
/* ── Project avatar ── */
--v2-avatar-bg-orange: var(--v2-orange-700);
--v2-avatar-border-orange: var(--v2-orange-800);
--v2-avatar-bg-yellow: var(--v2-yellow-700);
--v2-avatar-border-yellow: var(--v2-yellow-800);
--v2-avatar-bg-cyan: var(--v2-cyan-700);
--v2-avatar-border-cyan: var(--v2-cyan-800);
--v2-avatar-bg-green: var(--v2-green-700);
--v2-avatar-border-green: var(--v2-green-800);
--v2-avatar-bg-red: var(--v2-red-700);
--v2-avatar-border-red: var(--v2-red-800);
--v2-avatar-bg-pink: var(--v2-pink-700);
--v2-avatar-border-pink: var(--v2-pink-800);
--v2-avatar-bg-blue: var(--v2-blue-700);
--v2-avatar-border-blue: var(--v2-blue-800);
--v2-avatar-bg-purple: var(--v2-purple-700);
--v2-avatar-border-purple: var(--v2-purple-800);
--v2-avatar-bg-gray: var(--v2-grey-700);
--v2-avatar-border-gray: var(--v2-grey-800);
/* ── Project avatar (fixed; theme-independent) ── */
--v2-avatar-fg: #ffffffff;
--v2-avatar-bg-orange: #ee7330ff;
--v2-avatar-border-orange: #d16427ff;
--v2-avatar-bg-yellow: #e7af36ff;
--v2-avatar-border-yellow: #cb9f34ff;
--v2-avatar-bg-cyan: #0096b8ff;
--v2-avatar-border-cyan: #007d9bff;
--v2-avatar-bg-green: #2eaf5aff;
--v2-avatar-border-green: #198b43ff;
--v2-avatar-bg-red: #d92e3cff;
--v2-avatar-border-red: #b82d35ff;
--v2-avatar-bg-pink: #e4429eff;
--v2-avatar-border-pink: #c83d8bff;
--v2-avatar-bg-blue: #3250dfff;
--v2-avatar-border-blue: #2c47c8ff;
--v2-avatar-bg-purple: #623be2ff;
--v2-avatar-border-purple: #5230c2ff;
--v2-avatar-bg-gray: #5c5c5cff;
--v2-avatar-border-gray: #3a3a3aff;
/* ── Elevation ── */
--v2-elevation-raised:
@ -306,24 +307,25 @@
--v2-illustration-illustration-layer-02: var(--v2-grey-400);
--v2-illustration-illustration-layer-03: var(--v2-grey-500);
--v2-avatar-bg-orange: var(--v2-orange-700);
--v2-avatar-border-orange: var(--v2-orange-800);
--v2-avatar-bg-yellow: var(--v2-yellow-700);
--v2-avatar-border-yellow: var(--v2-yellow-800);
--v2-avatar-bg-cyan: var(--v2-cyan-700);
--v2-avatar-border-cyan: var(--v2-cyan-800);
--v2-avatar-bg-green: var(--v2-green-700);
--v2-avatar-border-green: var(--v2-green-800);
--v2-avatar-bg-red: var(--v2-red-700);
--v2-avatar-border-red: var(--v2-red-800);
--v2-avatar-bg-pink: var(--v2-pink-700);
--v2-avatar-border-pink: var(--v2-pink-800);
--v2-avatar-bg-blue: var(--v2-blue-700);
--v2-avatar-border-blue: var(--v2-blue-800);
--v2-avatar-bg-purple: var(--v2-purple-700);
--v2-avatar-border-purple: var(--v2-purple-800);
--v2-avatar-bg-gray: var(--v2-grey-700);
--v2-avatar-border-gray: var(--v2-grey-800);
--v2-avatar-fg: #ffffffff;
--v2-avatar-bg-orange: #ee7330ff;
--v2-avatar-border-orange: #d16427ff;
--v2-avatar-bg-yellow: #e7af36ff;
--v2-avatar-border-yellow: #cb9f34ff;
--v2-avatar-bg-cyan: #0096b8ff;
--v2-avatar-border-cyan: #007d9bff;
--v2-avatar-bg-green: #2eaf5aff;
--v2-avatar-border-green: #198b43ff;
--v2-avatar-bg-red: #d92e3cff;
--v2-avatar-border-red: #b82d35ff;
--v2-avatar-bg-pink: #e4429eff;
--v2-avatar-border-pink: #c83d8bff;
--v2-avatar-bg-blue: #3250dfff;
--v2-avatar-border-blue: #2c47c8ff;
--v2-avatar-bg-purple: #623be2ff;
--v2-avatar-border-purple: #5230c2ff;
--v2-avatar-bg-gray: #5c5c5cff;
--v2-avatar-border-gray: #3a3a3aff;
}
/* Explicit dark mode via data attribute (Storybook toggle, runtime JS) */
@ -385,24 +387,25 @@
--v2-state-fg-info: var(--v2-blue-500);
--v2-state-border-info: var(--v2-blue-900);
--v2-avatar-bg-orange: var(--v2-orange-1100);
--v2-avatar-border-orange: var(--v2-orange-600);
--v2-avatar-bg-yellow: var(--v2-yellow-1100);
--v2-avatar-border-yellow: var(--v2-yellow-700);
--v2-avatar-bg-cyan: var(--v2-cyan-1000);
--v2-avatar-border-cyan: var(--v2-cyan-700);
--v2-avatar-bg-green: var(--v2-green-1000);
--v2-avatar-border-green: var(--v2-green-600);
--v2-avatar-bg-red: var(--v2-red-1000);
--v2-avatar-border-red: var(--v2-red-700);
--v2-avatar-bg-pink: var(--v2-pink-1000);
--v2-avatar-border-pink: var(--v2-pink-700);
--v2-avatar-bg-blue: var(--v2-blue-900);
--v2-avatar-border-blue: var(--v2-blue-500);
--v2-avatar-bg-purple: var(--v2-purple-1000);
--v2-avatar-border-purple: var(--v2-purple-600);
--v2-avatar-bg-gray: var(--v2-grey-700);
--v2-avatar-border-gray: var(--v2-grey-500);
--v2-avatar-fg: #ffffffff;
--v2-avatar-bg-orange: #723d22ff;
--v2-avatar-border-orange: #ff8648ff;
--v2-avatar-bg-yellow: #68552bff;
--v2-avatar-border-yellow: #e7af36ff;
--v2-avatar-bg-cyan: #005a6eff;
--v2-avatar-border-cyan: #0096b8ff;
--v2-avatar-bg-green: #196130ff;
--v2-avatar-border-green: #49c970ff;
--v2-avatar-bg-red: #7a1f23ff;
--v2-avatar-border-red: #d92e3cff;
--v2-avatar-bg-pink: #8c2d61ff;
--v2-avatar-border-pink: #e4429eff;
--v2-avatar-bg-blue: #263fa9ff;
--v2-avatar-border-blue: #7698fdff;
--v2-avatar-bg-purple: #361f83ff;
--v2-avatar-border-purple: #7152f4ff;
--v2-avatar-bg-gray: #5c5c5cff;
--v2-avatar-border-gray: #aeaeaeff;
--v2-elevation-raised:
0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30),