From 12520ccede8d79077307dbdee9bfb57c04287801 Mon Sep 17 00:00:00 2001 From: Sebastian Graz Date: Thu, 15 Feb 2024 11:50:04 +0100 Subject: [PATCH] Style sprint 4 (#160) * Commit * make light base lighter, improve table legiblity * improve hover leg on toc * improve tabs leg * improve tab design * improve expandable leg * slight global color tweak * hide debugger --- src/app/[spaceId]/globals.css | 12 ++-- .../DocumentView/Expandable/Expandable.tsx | 4 +- .../DocumentView/Table/RecordRow.tsx | 2 +- .../DocumentView/Table/ViewGrid.tsx | 4 +- .../DocumentView/Tabs/DynamicTabs.tsx | 65 +++++++++++-------- src/components/SpaceLayout/SpaceLayout.tsx | 2 +- .../TableOfContents/ToggleableLinkItem.tsx | 4 +- 7 files changed, 54 insertions(+), 39 deletions(-) diff --git a/src/app/[spaceId]/globals.css b/src/app/[spaceId]/globals.css index ea2a7d2ca..7662a6338 100644 --- a/src/app/[spaceId]/globals.css +++ b/src/app/[spaceId]/globals.css @@ -4,8 +4,8 @@ @layer base { :root { - --dark-base: 23 23 23; - --light-base: 249 250 250; + --dark-base: 20 20 20; + --light-base: 251 252 252; --light-1: color-mix(in srgb, rgb(var(--primary-base-600)), rgb(var(--light-base)) 99%); --light-DEFAULT: color-mix( @@ -17,15 +17,15 @@ --light-3: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 88%); --light-4: color-mix(in srgb, rgb(var(--primary-base-800)), rgb(var(--light-base)) 72%); - --dark-1: color-mix(in srgb, rgb(var(--primary-base-100)), rgb(var(--dark-base)) 99%); - --dark-DEFAULT: color-mix(in srgb, rgb(var(--primary-base-300)), rgb(var(--dark-base)) 96%); + --dark-1: color-mix(in srgb, rgb(var(--primary-base-100)), rgb(1 1 1) 96%); + --dark-DEFAULT: color-mix(in srgb, rgb(var(--primary-base-300)), rgb(var(--dark-base)) 94.5%); --dark-2: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 92%); - --dark-3: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 88%); + --dark-3: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(25 25 25) 91%); --dark-4: color-mix(in srgb, rgb(var(--primary-base-200)), rgb(var(--dark-base)) 64%); @apply leading-relaxed; } body { - @apply text-dark/9 dark:text-light/9; + @apply text-dark dark:text-light; } html { @apply gutter-stable; diff --git a/src/components/DocumentView/Expandable/Expandable.tsx b/src/components/DocumentView/Expandable/Expandable.tsx index ebdee63fa..d540d2180 100644 --- a/src/components/DocumentView/Expandable/Expandable.tsx +++ b/src/components/DocumentView/Expandable/Expandable.tsx @@ -30,7 +30,7 @@ export function Expandable(props: BlockProps) { 'to-light-1', 'border', 'border-b-0', - 'border-light-3/9', + 'border-dark-3/3', //all '[&]:mt-[0px]', //select first child @@ -45,7 +45,7 @@ export function Expandable(props: BlockProps) { '[&:not(:has(+_&))]:border-b', /* '[&:not(:has(+_&))]:shadow-1xs', */ - 'dark:border-dark-3/10', + 'dark:border-light-2/[0.06]', 'dark:from-dark-2', 'dark:to-dark-2', 'dark:shadow-none', diff --git a/src/components/DocumentView/Table/RecordRow.tsx b/src/components/DocumentView/Table/RecordRow.tsx index 29d3d010f..316b433ce 100644 --- a/src/components/DocumentView/Table/RecordRow.tsx +++ b/src/components/DocumentView/Table/RecordRow.tsx @@ -18,7 +18,7 @@ export async function RecordRow( : ['[&>*+*]:border-l', '[&>*+*]:pl-4']; return ( - + {view.columns.map((column) => { return ( ) { 'mx-auto', 'rounded-md', 'border', - 'border-dark/2', + 'border-dark/3', 'dark:border-light/2', block.data.fullWidth ? [ @@ -155,7 +155,7 @@ export function ViewGrid(props: TableViewProps) { 'align-baseline', 'text-balance', 'border-b', - 'border-b-dark/4', + 'border-b-dark/5', 'text-left', 'text-xs', 'lg:text-base', diff --git a/src/components/DocumentView/Tabs/DynamicTabs.tsx b/src/components/DocumentView/Tabs/DynamicTabs.tsx index bacffe6c6..8410a0ad6 100644 --- a/src/components/DocumentView/Tabs/DynamicTabs.tsx +++ b/src/components/DocumentView/Tabs/DynamicTabs.tsx @@ -22,12 +22,14 @@ export function DynamicTabs(props: { return (
@@ -37,9 +39,12 @@ export function DynamicTabs(props: { 'group/tabs', 'inline-flex', 'flex-row', - 'p-4', - 'self-start', - 'space-x-1.5', + 'self-stretch', + 'after:flex-[1]', + 'after:bg-dark-2/1', + // if last tab is selected, apply rounded to :after element + '[&:has(button.active-tab:last-of-type):after]:rounded-bl-md', + 'dark:after:bg-dark-1/5', )} > {tabs.map((tab) => ( @@ -53,14 +58,21 @@ export function DynamicTabs(props: { setActive(tab.id); }} className={tcls( - 'bg-transparent', + //prev from active-tab + '[&:has(+_.active-tab)]:rounded-br-md', + + //next from active-tab + '[.active-tab_+_&]:rounded-bl-md', + + //next from active-tab + '[.active-tab_+_:after]:rounded-br-md', + + 'inline-flex', 'text-sm', - 'rounded-md', 'px-3.5', 'py-2', - 'transition-colors', - 'font-semibold', - 'text-dark-3', + 'transition-[color]', + 'font-[500]', 'relative', 'after:transition-colors', @@ -68,33 +80,34 @@ export function DynamicTabs(props: { 'after:border-r', 'after:absolute', 'after:left-[unset]', - 'after:-right-[calc(0.25rem-.5px)]', + 'after:right-0', 'after:border-dark/4', - 'after:top-[10%]', - 'after:h-[80%]', + 'after:top-[15%]', + 'after:h-[70%]', 'after:w-[1px]', 'last:after:border-transparent', - 'hover:bg-light-2', - 'dark:text-light-3', - 'dark:hover:bg-dark-2', + 'text-dark-2/7', + 'bg-dark-2/1', + 'dark:bg-dark-1/5', + 'hover:text-dark-2', + + 'dark:text-light-3/8', + 'dark:after:border-light/2', + 'dark:hover:text-light-3', active === tab.id ? [ 'active-tab', - 'text-dark-3', - 'bg-light-3/7', - + 'text-dark-2', + 'bg-transparent', + 'dark:text-light', + 'dark:bg-transparent', 'after:[&.active-tab]:border-transparent', 'after:[:has(+_&.active-tab)]:border-transparent', 'after:[:has(&_+)]:border-transparent', - - 'hover:bg-light-4/6', - 'dark:bg-dark-3', - 'dark:text-light', - 'dark:hover:bg-dark-4/7', ] : null, )} diff --git a/src/components/SpaceLayout/SpaceLayout.tsx b/src/components/SpaceLayout/SpaceLayout.tsx index a6a4936d0..c2623325c 100644 --- a/src/components/SpaceLayout/SpaceLayout.tsx +++ b/src/components/SpaceLayout/SpaceLayout.tsx @@ -53,7 +53,7 @@ export function SpaceLayout(props: { return (
- {/* */} + {/* */}