chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

much better! #13

Merged
chris-kruining merged 1 commit from feature/new-design into main 2024-11-28 07:32:12 +00:00
Conversation 0 Commits 1 Files changed 14 +93 -71
14 changed files with 93 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit bfb668a164 - Show all commits

22
src/app.css
View file

@ -14,11 +14,11 @@
--secondary-700: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset))); --secondary-700: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
--secondary-900: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset))); --secondary-900: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
--surface-1: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h)); --surface-300: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h));
--surface-2: oklch(from var(--surface-1) calc(l + .025) c h); --surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
--surface-3: oklch(from var(--surface-2) calc(l + .025) c h); --surface-500: oklch(from var(--surface-400) calc(l + .025) c h);
--surface-4: oklch(from var(--surface-3) calc(l + .025) c h); --surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
--surface-5: oklch(from var(--surface-4) calc(l + .025) c h); --surface-700: oklch(from var(--surface-600) calc(l + .025) c h);
--text-1: light-dark(oklch(from var(--secondary-500) .2 .02 h), oklch(from var(--secondary-500) .9 .02 h)); --text-1: light-dark(oklch(from var(--secondary-500) .2 .02 h), oklch(from var(--secondary-500) .9 .02 h));
--text-2: oklch(from var(--text-1) calc(l + .1) c h); --text-2: oklch(from var(--text-1) calc(l + .1) c h);
@ -31,6 +31,7 @@
--radii-s: .125em; --radii-s: .125em;
--radii-m: .25em; --radii-m: .25em;
--radii-l: .5em; --radii-l: .5em;
--radii-xl: 1em;
--text-s: .8rem; --text-s: .8rem;
--text-m: 1rem; --text-m: 1rem;
@ -40,8 +41,9 @@
--padding-s: .25em; --padding-s: .25em;
--padding-m: .5em; --padding-m: .5em;
--padding-l: 1em; --padding-l: .75em;
--padding-xl: 1.5em; --padding-xl: 1em;
--padding-xxl: 1.5em;
} }
html { html {
@ -59,7 +61,7 @@ body {
display: grid; display: grid;
grid: 100% / 100%; grid: 100% / 100%;
background-color: var(--surface-1); background-color: var(--surface-300);
color: var(--text-2); color: var(--text-2);
accent-color: var(--primary-500); accent-color: var(--primary-500);
@ -95,8 +97,8 @@ p {
code { code {
padding-inline: var(--padding-s); padding-inline: var(--padding-s);
background-color: var(--surface-3); background-color: var(--surface-500);
border: 1px solid var(--surface-5); border: 1px solid var(--surface-700);
border-radius: var(--radii-m); border-radius: var(--radii-m);
} }

14
src/assets/edit-blank.svg
View file

@ -2,10 +2,10 @@
viewBox="0 0 952 586" xmlns:xlink="http://www.w3.org/1999/xlink"> viewBox="0 0 952 586" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="a163713d-a7fc-4807-a77b-111ad75719e9-799" data-name="Path 133" <path id="a163713d-a7fc-4807-a77b-111ad75719e9-799" data-name="Path 133"
d="M170.63353,697.233a158.3937,158.3937,0,0,0,7.4,43.785c.1.329.211.653.319.982h27.613c-.029-.295-.059-.624-.088-.982-1.841-21.166,8.677-148.453,21.369-170.483C226.13454,572.322,168.49254,629.979,170.63353,697.233Z" d="M170.63353,697.233a158.3937,158.3937,0,0,0,7.4,43.785c.1.329.211.653.319.982h27.613c-.029-.295-.059-.624-.088-.982-1.841-21.166,8.677-148.453,21.369-170.483C226.13454,572.322,168.49254,629.979,170.63353,697.233Z"
transform="translate(-124 -157)" fill="var(--surface-4)" /> transform="translate(-124 -157)" fill="var(--surface-400)" />
<path id="a1d5a274-7181-45f3-aae5-db776f20014a-800" data-name="Path 134" <path id="a1d5a274-7181-45f3-aae5-db776f20014a-800" data-name="Path 134"
d="M172.70558,741.018c.231.329.471.658.717.982h20.716c-.157-.28-.339-.609-.55-.982-3.422-6.176-13.551-24.642-22.953-43.785-10.1-20.572-19.374-41.924-18.593-49.652C151.80058,649.323,144.80861,702.457,172.70558,741.018Z" d="M172.70558,741.018c.231.329.471.658.717.982h20.716c-.157-.28-.339-.609-.55-.982-3.422-6.176-13.551-24.642-22.953-43.785-10.1-20.572-19.374-41.924-18.593-49.652C151.80058,649.323,144.80861,702.457,172.70558,741.018Z"
transform="translate(-124 -157)" fill="var(--surface-4)" /> transform="translate(-124 -157)" fill="var(--surface-400)" />
<path <path
d="M775.29126,277.577a14.42246,14.42246,0,0,0,21.04127,6.80778l39.97977,32.06957,2.47488-26.51836-38.34489-26.38825a14.50066,14.50066,0,0,0-25.151,14.02926Z" d="M775.29126,277.577a14.42246,14.42246,0,0,0,21.04127,6.80778l39.97977,32.06957,2.47488-26.51836-38.34489-26.38825a14.50066,14.50066,0,0,0-25.151,14.02926Z"
transform="translate(-124 -157)" fill="#9f616a" /> transform="translate(-124 -157)" fill="#9f616a" />
@ -16,13 +16,13 @@
d="M833.93681,280.29582l50.28691,19.349L932.63291,267.947a24.62075,24.62075,0,0,1,31.79547,37.06016l-.433.48083-74.454,39.9183-81.32649-37.15291Z" d="M833.93681,280.29582l50.28691,19.349L932.63291,267.947a24.62075,24.62075,0,0,1,31.79547,37.06016l-.433.48083-74.454,39.9183-81.32649-37.15291Z"
transform="translate(-124 -157)" fill="var(--text-2)" /> transform="translate(-124 -157)" fill="var(--text-2)" />
<polygon points="695.76 583 171.76 583 190.76 212 272.76 212 348.374 265 714.76 265 695.76 583" <polygon points="695.76 583 171.76 583 190.76 212 272.76 212 348.374 265 714.76 265 695.76 583"
fill="var(--surface-4)" /> fill="var(--surface-400)" />
<path <path
d="M691.4891,626.86286,388.6242,502.13469a4.32609,4.32609,0,0,1-2.35009-5.64107L523.508,163.26232a4.3261,4.3261,0,0,1,5.64107-2.35009L832.014,285.6404a4.32609,4.32609,0,0,1,2.35009,5.64107L697.13017,624.51277A4.32609,4.32609,0,0,1,691.4891,626.86286Z" d="M691.4891,626.86286,388.6242,502.13469a4.32609,4.32609,0,0,1-2.35009-5.64107L523.508,163.26232a4.3261,4.3261,0,0,1,5.64107-2.35009L832.014,285.6404a4.32609,4.32609,0,0,1,2.35009,5.64107L697.13017,624.51277A4.32609,4.32609,0,0,1,691.4891,626.86286Z"
transform="translate(-124 -157)" fill="var(--surface-5)" /> transform="translate(-124 -157)" fill="var(--surface-300)" />
<path <path
d="M691.4891,626.86286,388.6242,502.13469a4.32609,4.32609,0,0,1-2.35009-5.64107L523.508,163.26232a4.3261,4.3261,0,0,1,5.64107-2.35009L832.014,285.6404a4.32609,4.32609,0,0,1,2.35009,5.64107L697.13017,624.51277A4.32609,4.32609,0,0,1,691.4891,626.86286ZM528.49088,162.51046a2.59553,2.59553,0,0,0-3.38465,1.41006L387.87234,497.15182a2.59552,2.59552,0,0,0,1.41005,3.38464l302.8649,124.72817a2.59553,2.59553,0,0,0,3.38465-1.41L832.76583,290.62327a2.59552,2.59552,0,0,0-1.41005-3.38464Z" d="M691.4891,626.86286,388.6242,502.13469a4.32609,4.32609,0,0,1-2.35009-5.64107L523.508,163.26232a4.3261,4.3261,0,0,1,5.64107-2.35009L832.014,285.6404a4.32609,4.32609,0,0,1,2.35009,5.64107L697.13017,624.51277A4.32609,4.32609,0,0,1,691.4891,626.86286ZM528.49088,162.51046a2.59553,2.59553,0,0,0-3.38465,1.41006L387.87234,497.15182a2.59552,2.59552,0,0,0,1.41005,3.38464l302.8649,124.72817a2.59553,2.59553,0,0,0,3.38465-1.41L832.76583,290.62327a2.59552,2.59552,0,0,0-1.41005-3.38464Z"
transform="translate(-124 -157)" fill="var(--surface-3)" /> transform="translate(-124 -157)" fill="var(--surface-500)" />
<path <path
d="M614.03119,325.86654,538.9143,294.93132a4.32609,4.32609,0,0,1-2.35009-5.64107l30.93522-75.11689a4.3261,4.3261,0,0,1,5.64107-2.35009l75.11689,30.93522a4.3261,4.3261,0,0,1,2.35009,5.64107l-30.93522,75.11689A4.3261,4.3261,0,0,1,614.03119,325.86654ZM572.4823,213.4215a2.59553,2.59553,0,0,0-3.38464,1.41006l-30.93522,75.11689a2.59553,2.59553,0,0,0,1.41006,3.38464l75.11688,30.93522a2.59553,2.59553,0,0,0,3.38465-1.41006l30.93521-75.11689a2.59551,2.59551,0,0,0-1.41-3.38464Z" d="M614.03119,325.86654,538.9143,294.93132a4.32609,4.32609,0,0,1-2.35009-5.64107l30.93522-75.11689a4.3261,4.3261,0,0,1,5.64107-2.35009l75.11689,30.93522a4.3261,4.3261,0,0,1,2.35009,5.64107l-30.93522,75.11689A4.3261,4.3261,0,0,1,614.03119,325.86654ZM572.4823,213.4215a2.59553,2.59553,0,0,0-3.38464,1.41006l-30.93522,75.11689a2.59553,2.59553,0,0,0,1.41006,3.38464l75.11688,30.93522a2.59553,2.59553,0,0,0,3.38465-1.41006l30.93521-75.11689a2.59551,2.59551,0,0,0-1.41-3.38464Z"
transform="translate(-124 -157)" fill="var(--text-2)" /> transform="translate(-124 -157)" fill="var(--text-2)" />
@ -57,12 +57,12 @@
d="M567.73018,550.77248a84.70308,84.70308,0,0,0,14.09436-.43c4.21238-.49243,8.60066-1.17049,12.29309-3.38536a11.6831,11.6831,0,0,0,5.8212-8.83535,8.2218,8.2218,0,0,0-4.975-8.33661,9.80892,9.80892,0,0,0-9.95124,1.3943,12.959,12.959,0,0,0-4.44981,10.35166c.194,8.00444,6.52716,15.90938,13.55947,19.23894,7.92082,3.75025,18.73754.56318,20.76617-8.67189.42194-1.92082-2.19428-2.58835-3.288-1.35411a8.72086,8.72086,0,0,0,12.17216,12.44835l-2.94431-1.21255a20.9902,20.9902,0,0,0,14.43752,15.24852,19.46991,19.46991,0,0,0,5.37174.81856c2.2119.00621,4.48428,1.11646,6.59962,1.80561l15.24432,4.96639c2.24232.73052,3.665-2.67332,1.40427-3.40985l-13.80618-4.49787c-2.30073-.74955-4.59586-1.51967-6.90308-2.24893-1.64936-.52133-3.45545-.23905-5.176-.54579a17.28811,17.28811,0,0,1-13.5191-12.64511,1.86584,1.86584,0,0,0-2.9443-1.21254,5.04821,5.04821,0,0,1-7.02188-7.25421l-3.288-1.35411c-1.30866,5.95754-8.576,8.19323-13.81358,6.47055-5.85748-1.92656-10.892-7.53271-12.639-13.4049a10.8108,10.8108,0,0,1,.7867-8.60233,6.443,6.443,0,0,1,6.75034-3.30637,4.62264,4.62264,0,0,1,3.95027,5.07015,8.26891,8.26891,0,0,1-4.60472,6.264c-3.29662,1.7695-7.24432,2.21012-10.90575,2.61181a78.79791,78.79791,0,0,1-12.57356.3577c-2.35393-.11867-2.82641,3.54144-.44763,3.66136Z" d="M567.73018,550.77248a84.70308,84.70308,0,0,0,14.09436-.43c4.21238-.49243,8.60066-1.17049,12.29309-3.38536a11.6831,11.6831,0,0,0,5.8212-8.83535,8.2218,8.2218,0,0,0-4.975-8.33661,9.80892,9.80892,0,0,0-9.95124,1.3943,12.959,12.959,0,0,0-4.44981,10.35166c.194,8.00444,6.52716,15.90938,13.55947,19.23894,7.92082,3.75025,18.73754.56318,20.76617-8.67189.42194-1.92082-2.19428-2.58835-3.288-1.35411a8.72086,8.72086,0,0,0,12.17216,12.44835l-2.94431-1.21255a20.9902,20.9902,0,0,0,14.43752,15.24852,19.46991,19.46991,0,0,0,5.37174.81856c2.2119.00621,4.48428,1.11646,6.59962,1.80561l15.24432,4.96639c2.24232.73052,3.665-2.67332,1.40427-3.40985l-13.80618-4.49787c-2.30073-.74955-4.59586-1.51967-6.90308-2.24893-1.64936-.52133-3.45545-.23905-5.176-.54579a17.28811,17.28811,0,0,1-13.5191-12.64511,1.86584,1.86584,0,0,0-2.9443-1.21254,5.04821,5.04821,0,0,1-7.02188-7.25421l-3.288-1.35411c-1.30866,5.95754-8.576,8.19323-13.81358,6.47055-5.85748-1.92656-10.892-7.53271-12.639-13.4049a10.8108,10.8108,0,0,1,.7867-8.60233,6.443,6.443,0,0,1,6.75034-3.30637,4.62264,4.62264,0,0,1,3.95027,5.07015,8.26891,8.26891,0,0,1-4.60472,6.264c-3.29662,1.7695-7.24432,2.21012-10.90575,2.61181a78.79791,78.79791,0,0,1-12.57356.3577c-2.35393-.11867-2.82641,3.54144-.44763,3.66136Z"
transform="translate(-124 -157)" fill="var(--primary-500)" /> transform="translate(-124 -157)" fill="var(--primary-500)" />
<polygon points="695.76 290 695.76 583 171.76 583 171.76 237 253.76 237 329.37 290 695.76 290" <polygon points="695.76 290 695.76 583 171.76 583 171.76 237 253.76 237 329.37 290 695.76 290"
fill="var(--surface-5)" /> fill="var(--surface-300)" />
<rect x="203.75984" y="528" width="214" height="17" fill="var(--primary-500)" /> <rect x="203.75984" y="528" width="214" height="17" fill="var(--primary-500)" />
<rect x="203.75984" y="495" width="107" height="17" fill="var(--primary-500)" /> <rect x="203.75984" y="495" width="107" height="17" fill="var(--primary-500)" />
<path <path
d="M820.75984,741h-526V393h83.31555l75.61414,53H820.75984Zm-524-2h522V448H453.05843l-75.61414-53H296.75984Z" d="M820.75984,741h-526V393h83.31555l75.61414,53H820.75984Zm-524-2h522V448H453.05843l-75.61414-53H296.75984Z"
transform="translate(-124 -157)" fill="var(--surface-3)" /> transform="translate(-124 -157)" fill="var(--surface-500)" />
<polygon <polygon
points="909.144 548.636 891.414 554.972 858.535 489.598 884.704 480.246 909.144 548.636" points="909.144 548.636 891.414 554.972 858.535 489.598 884.704 480.246 909.144 548.636"
fill="#9f616a" /> fill="#9f616a" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

2
src/components/colorschemepicker.module.css
View file

@ -8,7 +8,7 @@
& select { & select {
border: none; border: none;
background-color: var(--surface-3); background-color: transparent;
border-radius: var(--radii-m); border-radius: var(--radii-m);
&:focus { &:focus {

6
src/components/prompt.module.css
View file

@ -2,9 +2,9 @@
display: grid; display: grid;
gap: var(--padding-m); gap: var(--padding-m);
padding: var(--padding-m); padding: var(--padding-m);
background-color: var(--surface-1); background-color: var(--surface-700);
color: var(--text-2); color: var(--text-2);
border: 1px solid var(--surface-5); border: 1px solid var(--surface-300);
border-radius: var(--radii-m); border-radius: var(--radii-m);
&:not(&[open]) { &:not(&[open]) {
@ -12,7 +12,7 @@
} }
&[open]::backdrop { &[open]::backdrop {
background-color: color(from var(--surface-1) xyz x y z / .3); background-color: color(from var(--surface-700) xyz x y z / .3);
backdrop-filter: blur(.25em); backdrop-filter: blur(.25em);
} }

2
src/components/sidebar.module.css
View file

@ -9,7 +9,7 @@
align-items: center; align-items: center;
inline-size: max-content; inline-size: max-content;
padding: 0; padding: 0;
background-color: var(--surface-1); background-color: transparent;
color: var(--text-1); color: var(--text-1);
border: none; border: none;
font-size: var(--text-l); font-size: var(--text-l);

26
src/components/tabs.module.css
View file

@ -12,37 +12,49 @@
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
border-block-end: 1px solid var(--surface-5); border-block-end: 1px solid var(--surface-700);
& > .handle { & > .handle {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
column-gap: var(--padding-m); column-gap: var(--padding-m);
background-color: var(--surface-1); background-color: transparent;
color: var(--text-2); color: var(--text-2);
cursor: pointer; cursor: pointer;
border-radius: var(--radii-l) var(--radii-l) 0 0;
& > button { & > button {
display: grid; display: grid;
align-content: center; align-content: center;
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
padding: var(--padding-m) 0; padding: var(--padding-l) 0;
border: none; border: none;
cursor: pointer; cursor: pointer;
border-radius: inherit;
&:first-child { &:first-child {
padding-inline-start: var(--padding-l); padding-inline-start: var(--padding-xl);
} }
&:last-child { &:last-child {
padding-inline-end: var(--padding-l); padding-inline-end: var(--padding-xl);
}
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
} }
} }
&.active { &.active {
background-color: var(--surface-3); background-color: var(--surface-600);
color: var(--text-1); color: var(--text-1);
} }
} }
@ -80,7 +92,7 @@
&[open] { &[open] {
& > summary { & > summary {
background-color: var(--surface-2); background-color: var(--surface-600);
} }
&::details-content { &::details-content {

11
src/components/tabs.tsx
View file

@ -21,7 +21,7 @@ const useTabs = () => {
return context!; return context!;
} }
export const Tabs: ParentComponent<{ active?: Setter<string | undefined>, onClose?: CommandType<[string]> }> = (props) => { export const Tabs: ParentComponent<{ class?: string, active?: Setter<string | undefined>, onClose?: CommandType<[string]> }> = (props) => {
const [active, setActive] = createSignal<string | undefined>(undefined); const [active, setActive] = createSignal<string | undefined>(undefined);
createEffect(() => { createEffect(() => {
@ -41,11 +41,11 @@ export const Tabs: ParentComponent<{ active?: Setter<string | undefined>, onClos
}; };
return <TabsContext.Provider value={ctx}> return <TabsContext.Provider value={ctx}>
<_Tabs active={active()} onClose={props.onClose}>{props.children}</_Tabs> <_Tabs class={props.class} active={active()} onClose={props.onClose}>{props.children}</_Tabs>
</TabsContext.Provider >; </TabsContext.Provider >;
} }
const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType<[string]> }> = (props) => { const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClose?: CommandType<[string]> }> = (props) => {
const commandsContext = useCommands(); const commandsContext = useCommands();
const tabsContext = useTabs(); const tabsContext = useTabs();
@ -64,7 +64,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
return commandsContext.execute(props.onClose, e); return commandsContext.execute(props.onClose, e);
}; };
return <div class={css.tabs}> return <div class={`${css.tabs} ${props.class}`}>
<header> <header>
<For each={tabs()}>{ <For each={tabs()}>{
({ id, label, options: { closable } }) => <Command.Context for={props.onClose} with={[id]}> ({ id, label, options: { closable } }) => <Command.Context for={props.onClose} with={[id]}>
@ -78,6 +78,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
tabsContext.activate(id) tabsContext.activate(id)
}}>{label}</button> }}>{label}</button>
<Show when={closable}> <Show when={closable}>
<button onPointerDown={onClose}> <AiOutlineClose /></button> <button onPointerDown={onClose}> <AiOutlineClose /></button>
</Show> </Show>
@ -106,7 +107,7 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea
id={props.id} id={props.id}
data-tab-label={props.label} data-tab-label={props.label}
data-tab-closable={props.closable} data-tab-closable={props.closable}
style="dispay: contents;" style="display: contents;"
> >
<Show when={isActive()}> <Show when={isActive()}>
<Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context> <Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context>

6
src/features/command/contextMenu.module.css
View file

@ -12,9 +12,9 @@
padding: var(--padding-m) 0; padding: var(--padding-m) 0;
font-size: var(--text-s); font-size: var(--text-s);
background-color: var(--surface-1); background-color: var(--surface-700);
color: var(--text-1); color: var(--text-1);
border: 1px solid var(--surface-5); border: 1px solid var(--surface-300);
border-radius: var(--radii-m); border-radius: var(--radii-m);
& > li { & > li {
@ -31,7 +31,7 @@
} }
&:hover { &:hover {
background-color: var(--surface-4); background-color: var(--surface-400);
} }
} }

8
src/features/file/grid.module.css
View file

@ -9,7 +9,7 @@
block-size: 100%; block-size: 100%;
overflow: clip auto; overflow: clip auto;
background-color: var(--surface-1); background-color: var(--surface-600);
& input[type="checkbox"] { & input[type="checkbox"] {
margin: .1em; margin: .1em;
@ -20,7 +20,7 @@
min-block-size: max(2em, 100%); min-block-size: max(2em, 100%);
max-block-size: 50em; max-block-size: 50em;
background-color: var(--surface-1); background-color: var(--surface-600);
color: var(--text-1); color: var(--text-1);
border-color: var(--text-2); border-color: var(--text-2);
border-radius: var(--radii-s); border-radius: var(--radii-s);
@ -59,8 +59,8 @@
& .header { & .header {
position: sticky; position: sticky;
inset-block-start: 0; inset-block-start: 0;
background-color: var(--surface-1); background-color: var(--surface-600);
border-block-end: 1px solid var(--surface-5); border-block-end: 1px solid var(--surface-300);
} }
& .row { & .row {

22
src/features/menu/index.module.css
View file

@ -15,7 +15,7 @@
text-align: start; text-align: start;
&:hover { &:hover {
background-color: var(--surface-4); background-color: var(--surface-500);
} }
} }
@ -31,8 +31,8 @@
padding: var(--padding-m) 0; padding: var(--padding-m) 0;
inline-size: max-content; inline-size: max-content;
background-color: var(--surface-4); background-color: var(--surface-500);
border: 1px solid var(--surface-5); border: 1px solid var(--surface-300);
border-block-start-width: 0; border-block-start-width: 0;
margin: unset; margin: unset;
@ -44,7 +44,7 @@
grid-column: span 2; grid-column: span 2;
inline-size: calc(100% - (2 * var(--padding-m))); inline-size: calc(100% - (2 * var(--padding-m)));
margin-block: 0; margin-block: 0;
border: 1px solid var(--surface-5); border: 1px solid var(--surface-300);
} }
& > .item { & > .item {
@ -53,10 +53,10 @@
grid-template-columns: subgrid; grid-template-columns: subgrid;
align-items: center; align-items: center;
background-color: var(--surface-4); background-color: var(--surface-500);
&:hover { &:hover {
background-color: var(--surface-5); background-color: var(--surface-600);
} }
& > sub { & > sub {
@ -67,23 +67,23 @@
} }
:popover-open + .item { :popover-open + .item {
background-color: var(--surface-4); background-color: var(--surface-500);
} }
.commandPalette { .commandPalette {
display: none; display: none;
background-color: var(--surface-1); background-color: var(--surface-700);
color: var(--text-1); color: var(--text-1);
gap: var(--padding-m); gap: var(--padding-m);
padding: var(--padding-l); padding: var(--padding-l);
border: 1px solid var(--surface-3); border: 1px solid var(--surface-500);
&[open] { &[open] {
display: grid; display: grid;
} }
&::backdrop { &::backdrop {
background-color: color(from var(--surface-1) xyz x y z / .2); background-color: color(from var(--surface-700) xyz x y z / .2);
backdrop-filter: blur(.25em); backdrop-filter: blur(.25em);
pointer-events: all !important; pointer-events: all !important;
} }
@ -94,7 +94,7 @@
gap: var(--padding-m); gap: var(--padding-m);
& > input { & > input {
background-color: var(--surface-2); background-color: var(--surface-600);
color: var(--text-1); color: var(--text-1);
border: none; border: none;
padding: var(--padding-m); padding: var(--padding-m);

6
src/features/selectable/index.tsx
View file

@ -216,7 +216,11 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
}; };
createRenderEffect(() => { createRenderEffect(() => {
element.dataset.selected = isSelected() ? 'true' : undefined; if (isSelected()) {
element.dataset.selected = 'true';
} else {
delete element.dataset.selected;
}
}); });
const onPointerDown = (e: Event) => { const onPointerDown = (e: Event) => {

18
src/routes/(editor)/edit.module.css
View file

@ -6,9 +6,8 @@
& .sidebar { & .sidebar {
z-index: 1; z-index: 1;
padding: var(--padding-l); padding: var(--padding-xl);
padding-block-start: calc(2 * var(--padding-l)); background-color: var(--surface-300);
background-color: var(--surface-2);
& > ul { & > ul {
padding: 0; padding: 0;
@ -16,6 +15,15 @@
} }
} }
& .content {
background-color: var(--surface-500);
border-top-left-radius: var(--radii-xl);
& > header {
padding-inline-start: var(--padding-l);
}
}
:is(details, div):has(.mutated) > :is(summary, span:has(.mutated)) { :is(details, div):has(.mutated) > :is(summary, span:has(.mutated)) {
color: var(--warn); color: var(--warn);
@ -37,11 +45,11 @@
& > svg { & > svg {
padding-inline-end: 3em; padding-inline-end: 3em;
margin-inline-end: 3em; margin-inline-end: 3em;
border-inline-end: 2px solid var(--surface-5); border-inline-end: 2px solid var(--surface-300);
} }
& > button { & > button {
background-color: var(--surface-4); background-color: var(--surface-400);
color: var(--text-1); color: var(--text-1);
padding: var(--padding-l) var(--padding-xl); padding: var(--padding-l) var(--padding-xl);
border: none; border: none;

2
src/routes/(editor)/edit.tsx
View file

@ -317,7 +317,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
] as const}</Tree> ] as const}</Tree>
</Sidebar> </Sidebar>
<Tabs active={setActive} onClose={commands.closeTab}> <Tabs class={css.content} active={setActive} onClose={commands.closeTab}>
<For each={tabs()}>{ <For each={tabs()}>{
({ key, handle, setApi, setEntries }) => <Tab ({ key, handle, setApi, setEntries }) => <Tab
id={key} id={key}

19
src/routes/editor.module.css
View file

@ -4,12 +4,12 @@
inline-size: 100%; inline-size: 100%;
block-size: 100%; block-size: 100%;
overflow: clip; overflow: clip;
background-color: var(--surface-1); background-color: var(--surface-300);
.menu { .menu {
view-transition-name: menu; view-transition-name: menu;
display: grid; display: grid;
grid-template-columns: auto minmax(0, 1fr) auto; grid: 100% / auto minmax(0, 1fr) auto;
grid-auto-flow: column; grid-auto-flow: column;
justify-content: start; justify-content: start;
place-items: center start; place-items: center start;
@ -18,11 +18,11 @@
gap: .5em; gap: .5em;
padding-inline: 1em; padding-inline: 1em;
block-size: calc(env(titlebar-area-height, 2em) + .5px); block-size: calc(env(titlebar-area-height, 3em) + .5px);
inline-size: env(titlebar-area-width, 100%); inline-size: env(titlebar-area-width, 100%);
-webkit-app-region: drag; -webkit-app-region: drag;
background-color: var(--surface-3); background-color: var(--surface-300);
color: var(--text-1); color: var(--text-1);
& > * { & > * {
@ -30,19 +30,14 @@
} }
& > .logo { & > .logo {
inline-size: 3em; aspect-ratio: 1;
block-size: 3em; block-size: 100%;
padding: .5em; padding: var(--padding-m);
margin-block-end: -1em;
background-color: inherit;
color: inherit;
border-radius: .25em;
& > picture { & > picture {
display: contents; display: contents;
& > img { & > img {
inline-size: 100%;
block-size: 100%; block-size: 100%;
} }
} }