gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-21 10:03:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style sprint 4 (#160)

Browse Source 
* 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
This commit is contained in:
Sebastian Graz
2024-02-15 11:50:04 +01:00
committed by GitHub
parent ebdec4966b
commit 12520ccede
7 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[spaceId]/globals.css
+6 -6
View File
@@ -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;
src/components/DocumentView/Expandable/Expandable.tsx
+2 -2
View File
@@ -30,7 +30,7 @@ export function Expandable(props: BlockProps<DocumentBlockExpandable>) {
'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<DocumentBlockExpandable>) {
'[&: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',
src/components/DocumentView/Table/RecordRow.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export async function RecordRow(
: ['[&>*+*]:border-l', '[&>*+*]:pl-4'];
return (
<tr className={tcls(tableTR, 'border-dark/2', 'dark:border-light/2')}>
<tr className={tcls(tableTR, 'border-dark/3', 'dark:border-light/2')}>
{view.columns.map((column) => {
return (
<td
src/components/DocumentView/Table/ViewGrid.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
'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<DocumentTableViewGrid>) {
'align-baseline',
'text-balance',
'border-b',
'border-b-dark/4',
'border-b-dark/5',
'text-left',
'text-xs',
'lg:text-base',
src/components/DocumentView/Tabs/DynamicTabs.tsx
+39 -26
View File
@@ -22,12 +22,14 @@ export function DynamicTabs(props: {
return (
<div
className={tcls(
'rounded-md',
'border',
'border-dark/2',
'rounded-lg',
'ring-1',
'ring-inset',
'ring-dark/3',
'flex',
'overflow-hidden',
'flex-col',
'dark:border-light/3',
'dark:ring-light/2',
style,
)}
>
@@ -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,
)}
src/components/SpaceLayout/SpaceLayout.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export function SpaceLayout(props: {
return (
<div>
{/* <ColorDebugger /> */}
{/* <ColorDebugger /> */}
<Header
withTopHeader={withTopHeader}
space={space}
src/components/TableOfContents/ToggleableLinkItem.tsx
+3 -1
View File
@@ -125,10 +125,12 @@ export function ToggleableLinkItem(props: {
'font-normal',
'text-dark/8',
'hover:bg-dark/1',
'hover:text-dark/9',
'hover:before:border-dark/3',
'dark:text-light/7',
'dark:text-light/8',
'dark:hover:bg-light/2',
'dark:hover:before:border-light/3',
'dark:hover:text-light/9',
],
)}
>