diff --git a/src/app.css b/src/app.css index fd9ead1..9e7fffc 100644 --- a/src/app.css +++ b/src/app.css @@ -14,11 +14,11 @@ --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))); - --surface-1: 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-3: oklch(from var(--surface-2) calc(l + .025) c h); - --surface-4: oklch(from var(--surface-3) calc(l + .025) c h); - --surface-5: oklch(from var(--surface-4) calc(l + .025) c h); + --surface-300: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h)); + --surface-400: oklch(from var(--surface-300) calc(l + .025) c h); + --surface-500: oklch(from var(--surface-400) calc(l + .025) c h); + --surface-600: oklch(from var(--surface-500) 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-2: oklch(from var(--text-1) calc(l + .1) c h); @@ -31,6 +31,7 @@ --radii-s: .125em; --radii-m: .25em; --radii-l: .5em; + --radii-xl: 1em; --text-s: .8rem; --text-m: 1rem; @@ -40,8 +41,9 @@ --padding-s: .25em; --padding-m: .5em; - --padding-l: 1em; - --padding-xl: 1.5em; + --padding-l: .75em; + --padding-xl: 1em; + --padding-xxl: 1.5em; } html { @@ -59,7 +61,7 @@ body { display: grid; grid: 100% / 100%; - background-color: var(--surface-1); + background-color: var(--surface-300); color: var(--text-2); accent-color: var(--primary-500); @@ -95,8 +97,8 @@ p { code { padding-inline: var(--padding-s); - background-color: var(--surface-3); - border: 1px solid var(--surface-5); + background-color: var(--surface-500); + border: 1px solid var(--surface-700); border-radius: var(--radii-m); } diff --git a/src/assets/edit-blank.svg b/src/assets/edit-blank.svg index 0e95e43..229edf3 100644 --- a/src/assets/edit-blank.svg +++ b/src/assets/edit-blank.svg @@ -2,10 +2,10 @@ viewBox="0 0 952 586" xmlns:xlink="http://www.w3.org/1999/xlink"> + transform="translate(-124 -157)" fill="var(--surface-400)" /> + transform="translate(-124 -157)" fill="var(--surface-400)" /> @@ -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" transform="translate(-124 -157)" fill="var(--text-2)" /> + fill="var(--surface-400)" /> + transform="translate(-124 -157)" fill="var(--surface-300)" /> + transform="translate(-124 -157)" fill="var(--surface-500)" /> @@ -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" transform="translate(-124 -157)" fill="var(--primary-500)" /> + fill="var(--surface-300)" /> + transform="translate(-124 -157)" fill="var(--surface-500)" /> diff --git a/src/components/colorschemepicker.module.css b/src/components/colorschemepicker.module.css index 797b99f..9324005 100644 --- a/src/components/colorschemepicker.module.css +++ b/src/components/colorschemepicker.module.css @@ -8,7 +8,7 @@ & select { border: none; - background-color: var(--surface-3); + background-color: transparent; border-radius: var(--radii-m); &:focus { diff --git a/src/components/prompt.module.css b/src/components/prompt.module.css index dba74f2..c5c5da6 100644 --- a/src/components/prompt.module.css +++ b/src/components/prompt.module.css @@ -2,9 +2,9 @@ display: grid; gap: var(--padding-m); padding: var(--padding-m); - background-color: var(--surface-1); + background-color: var(--surface-700); color: var(--text-2); - border: 1px solid var(--surface-5); + border: 1px solid var(--surface-300); border-radius: var(--radii-m); &:not(&[open]) { @@ -12,7 +12,7 @@ } &[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); } diff --git a/src/components/sidebar.module.css b/src/components/sidebar.module.css index 69eee98..56c5bb3 100644 --- a/src/components/sidebar.module.css +++ b/src/components/sidebar.module.css @@ -9,7 +9,7 @@ align-items: center; inline-size: max-content; padding: 0; - background-color: var(--surface-1); + background-color: transparent; color: var(--text-1); border: none; font-size: var(--text-l); diff --git a/src/components/tabs.module.css b/src/components/tabs.module.css index 949b1d1..396b463 100644 --- a/src/components/tabs.module.css +++ b/src/components/tabs.module.css @@ -12,37 +12,49 @@ flex-direction: row; flex-wrap: nowrap; - border-block-end: 1px solid var(--surface-5); + border-block-end: 1px solid var(--surface-700); & > .handle { display: grid; grid-auto-flow: column; column-gap: var(--padding-m); - background-color: var(--surface-1); + background-color: transparent; color: var(--text-2); cursor: pointer; + border-radius: var(--radii-l) var(--radii-l) 0 0; & > button { display: grid; align-content: center; background-color: inherit; color: inherit; - padding: var(--padding-m) 0; + padding: var(--padding-l) 0; border: none; cursor: pointer; + border-radius: inherit; &:first-child { - padding-inline-start: var(--padding-l); + padding-inline-start: var(--padding-xl); } &: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 { - background-color: var(--surface-3); + background-color: var(--surface-600); color: var(--text-1); } } @@ -80,7 +92,7 @@ &[open] { & > summary { - background-color: var(--surface-2); + background-color: var(--surface-600); } &::details-content { diff --git a/src/components/tabs.tsx b/src/components/tabs.tsx index a86cdf5..fe1e09c 100644 --- a/src/components/tabs.tsx +++ b/src/components/tabs.tsx @@ -21,7 +21,7 @@ const useTabs = () => { return context!; } -export const Tabs: ParentComponent<{ active?: Setter, onClose?: CommandType<[string]> }> = (props) => { +export const Tabs: ParentComponent<{ class?: string, active?: Setter, onClose?: CommandType<[string]> }> = (props) => { const [active, setActive] = createSignal(undefined); createEffect(() => { @@ -41,11 +41,11 @@ export const Tabs: ParentComponent<{ active?: Setter, onClos }; return - <_Tabs active={active()} onClose={props.onClose}>{props.children} + <_Tabs class={props.class} active={active()} onClose={props.onClose}>{props.children} ; } -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 tabsContext = useTabs(); @@ -64,7 +64,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType return commandsContext.execute(props.onClose, e); }; - return
+ return
{ ({ id, label, options: { closable } }) => @@ -78,6 +78,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType tabsContext.activate(id) }}>{label} + @@ -106,7 +107,7 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea id={props.id} data-tab-label={props.label} data-tab-closable={props.closable} - style="dispay: contents;" + style="display: contents;" > {resolved()} diff --git a/src/features/command/contextMenu.module.css b/src/features/command/contextMenu.module.css index 2b143a7..eeac2c3 100644 --- a/src/features/command/contextMenu.module.css +++ b/src/features/command/contextMenu.module.css @@ -12,9 +12,9 @@ padding: var(--padding-m) 0; font-size: var(--text-s); - background-color: var(--surface-1); + background-color: var(--surface-700); color: var(--text-1); - border: 1px solid var(--surface-5); + border: 1px solid var(--surface-300); border-radius: var(--radii-m); & > li { @@ -31,7 +31,7 @@ } &:hover { - background-color: var(--surface-4); + background-color: var(--surface-400); } } diff --git a/src/features/file/grid.module.css b/src/features/file/grid.module.css index 2f3ab9f..05c99e3 100644 --- a/src/features/file/grid.module.css +++ b/src/features/file/grid.module.css @@ -9,7 +9,7 @@ block-size: 100%; overflow: clip auto; - background-color: var(--surface-1); + background-color: var(--surface-600); & input[type="checkbox"] { margin: .1em; @@ -20,7 +20,7 @@ min-block-size: max(2em, 100%); max-block-size: 50em; - background-color: var(--surface-1); + background-color: var(--surface-600); color: var(--text-1); border-color: var(--text-2); border-radius: var(--radii-s); @@ -59,8 +59,8 @@ & .header { position: sticky; inset-block-start: 0; - background-color: var(--surface-1); - border-block-end: 1px solid var(--surface-5); + background-color: var(--surface-600); + border-block-end: 1px solid var(--surface-300); } & .row { diff --git a/src/features/menu/index.module.css b/src/features/menu/index.module.css index d1fb4d2..f10b388 100644 --- a/src/features/menu/index.module.css +++ b/src/features/menu/index.module.css @@ -15,7 +15,7 @@ text-align: start; &:hover { - background-color: var(--surface-4); + background-color: var(--surface-500); } } @@ -31,8 +31,8 @@ padding: var(--padding-m) 0; inline-size: max-content; - background-color: var(--surface-4); - border: 1px solid var(--surface-5); + background-color: var(--surface-500); + border: 1px solid var(--surface-300); border-block-start-width: 0; margin: unset; @@ -44,7 +44,7 @@ grid-column: span 2; inline-size: calc(100% - (2 * var(--padding-m))); margin-block: 0; - border: 1px solid var(--surface-5); + border: 1px solid var(--surface-300); } & > .item { @@ -53,10 +53,10 @@ grid-template-columns: subgrid; align-items: center; - background-color: var(--surface-4); + background-color: var(--surface-500); &:hover { - background-color: var(--surface-5); + background-color: var(--surface-600); } & > sub { @@ -67,23 +67,23 @@ } :popover-open + .item { - background-color: var(--surface-4); + background-color: var(--surface-500); } .commandPalette { display: none; - background-color: var(--surface-1); + background-color: var(--surface-700); color: var(--text-1); gap: var(--padding-m); padding: var(--padding-l); - border: 1px solid var(--surface-3); + border: 1px solid var(--surface-500); &[open] { display: grid; } &::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); pointer-events: all !important; } @@ -94,7 +94,7 @@ gap: var(--padding-m); & > input { - background-color: var(--surface-2); + background-color: var(--surface-600); color: var(--text-1); border: none; padding: var(--padding-m); diff --git a/src/features/selectable/index.tsx b/src/features/selectable/index.tsx index fffac6b..6c3a81c 100644 --- a/src/features/selectable/index.tsx +++ b/src/features/selectable/index.tsx @@ -216,7 +216,11 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje }; createRenderEffect(() => { - element.dataset.selected = isSelected() ? 'true' : undefined; + if (isSelected()) { + element.dataset.selected = 'true'; + } else { + delete element.dataset.selected; + } }); const onPointerDown = (e: Event) => { diff --git a/src/routes/(editor)/edit.module.css b/src/routes/(editor)/edit.module.css index 108e015..5dd9bb4 100644 --- a/src/routes/(editor)/edit.module.css +++ b/src/routes/(editor)/edit.module.css @@ -6,9 +6,8 @@ & .sidebar { z-index: 1; - padding: var(--padding-l); - padding-block-start: calc(2 * var(--padding-l)); - background-color: var(--surface-2); + padding: var(--padding-xl); + background-color: var(--surface-300); & > ul { 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)) { color: var(--warn); @@ -37,11 +45,11 @@ & > svg { padding-inline-end: 3em; margin-inline-end: 3em; - border-inline-end: 2px solid var(--surface-5); + border-inline-end: 2px solid var(--surface-300); } & > button { - background-color: var(--surface-4); + background-color: var(--surface-400); color: var(--text-1); padding: var(--padding-l) var(--padding-xl); border: none; diff --git a/src/routes/(editor)/edit.tsx b/src/routes/(editor)/edit.tsx index bf9ba3b..37f7fc7 100644 --- a/src/routes/(editor)/edit.tsx +++ b/src/routes/(editor)/edit.tsx @@ -317,7 +317,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => { ] as const} - + { ({ key, handle, setApi, setEntries }) => * { @@ -30,19 +30,14 @@ } & > .logo { - inline-size: 3em; - block-size: 3em; - padding: .5em; - margin-block-end: -1em; - background-color: inherit; - color: inherit; - border-radius: .25em; + aspect-ratio: 1; + block-size: 100%; + padding: var(--padding-m); & > picture { display: contents; & > img { - inline-size: 100%; block-size: 100%; } }