From 1e9933eb6b7a26eb6f6ccb8f98a33f90062a999a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 2 Jul 2025 13:35:33 +0100 Subject: [PATCH 1/2] Reduce flickering when switching theme Signed-off-by: Charles de Dreuille --- canon-docs/src/components/Chip/styles.module.css | 1 - canon-docs/src/components/CodeBlock/styles.module.css | 1 - canon-docs/src/components/Sidebar/Sidebar.module.css | 3 +-- canon-docs/src/components/Snippet/styles.module.css | 1 - canon-docs/src/components/Table/styles.module.css | 1 - canon-docs/src/components/Tabs/styles.module.css | 4 +++- canon-docs/src/components/Toolbar/nav.module.css | 4 ++-- canon-docs/src/components/Toolbar/styles.module.css | 1 - canon-docs/src/components/Toolbar/theme-name.module.css | 1 - canon-docs/src/components/Toolbar/theme.module.css | 4 +--- canon-docs/src/css/globals.css | 1 - 11 files changed, 7 insertions(+), 15 deletions(-) diff --git a/canon-docs/src/components/Chip/styles.module.css b/canon-docs/src/components/Chip/styles.module.css index b96899e6d5..9b80b937d5 100644 --- a/canon-docs/src/components/Chip/styles.module.css +++ b/canon-docs/src/components/Chip/styles.module.css @@ -9,7 +9,6 @@ margin-right: 4px; background-color: #f0f0f0; color: #5d5d5d; - transition: background-color 0.2s ease-in-out; } .head { diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css index 8b17c11b86..c522573f37 100644 --- a/canon-docs/src/components/CodeBlock/styles.module.css +++ b/canon-docs/src/components/CodeBlock/styles.module.css @@ -6,7 +6,6 @@ overflow-x: auto; font-family: var(--canon-font-monospace); background-color: #fff; - transition: background-color 0.2s ease-in-out; margin-bottom: 1rem; } diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css index 4eb49682df..91fb0fff1f 100644 --- a/canon-docs/src/components/Sidebar/Sidebar.module.css +++ b/canon-docs/src/components/Sidebar/Sidebar.module.css @@ -15,7 +15,6 @@ color: var(--primary); background-color: var(--panel); border: 1px solid var(--border); - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; overflow: hidden; } } @@ -74,10 +73,10 @@ height: 26px; padding: 0 12px; border-radius: 4px; - transition: background-color 0.2s ease-in-out; &:hover { background-color: var(--surface-1); + transition: background-color 0.2s ease-in-out; } } diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css index 41dc9ed684..7371b29c40 100644 --- a/canon-docs/src/components/Snippet/styles.module.css +++ b/canon-docs/src/components/Snippet/styles.module.css @@ -8,7 +8,6 @@ border-radius: 4px; box-shadow: inset 0 0 0 1px var(--border); background-color: var(--bg); - transition: all 0.2s ease-in-out; padding: 1px; position: relative; } diff --git a/canon-docs/src/components/Table/styles.module.css b/canon-docs/src/components/Table/styles.module.css index 3381f39e58..5a5ebab450 100644 --- a/canon-docs/src/components/Table/styles.module.css +++ b/canon-docs/src/components/Table/styles.module.css @@ -19,7 +19,6 @@ text-align: left; background-color: var(--panel) !important; font-size: 16px; - transition: background-color 0.2s ease-in-out; & p { margin: 0 !important; diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css index 82e744b8b2..5789b08345 100644 --- a/canon-docs/src/components/Tabs/styles.module.css +++ b/canon-docs/src/components/Tabs/styles.module.css @@ -23,5 +23,7 @@ width: var(--active-tab-width); height: 1px; background-color: var(--primary); - transition: all 0.2s ease-in-out; + transition-property: left, width; + transition-duration: 200ms; + transition-timing-function: ease-in-out; } diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css index 95228fa917..c102b2bd6f 100644 --- a/canon-docs/src/components/Toolbar/nav.module.css +++ b/canon-docs/src/components/Toolbar/nav.module.css @@ -30,9 +30,9 @@ font-size: var(--canon-font-size-3); font-weight: var(--canon-font-weight-bold); cursor: pointer; - transition: color 0.2s ease-in-out; &:hover { + transition: color 0.2s ease-in-out; color: var(--primary); } @@ -72,7 +72,7 @@ height: 1px; border-radius: 0.25rem; background-color: var(--primary); - transition-property: translate, width, background-color; + transition-property: translate, width; transition-duration: 200ms; transition-timing-function: ease-in-out; } diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css index 5379e2047c..f74ce57b77 100644 --- a/canon-docs/src/components/Toolbar/styles.module.css +++ b/canon-docs/src/components/Toolbar/styles.module.css @@ -11,7 +11,6 @@ align-items: center; justify-content: space-between; padding: 0 var(--canon-space-6); - transition: background-color 0.2s ease-in-out; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025); border: 1px solid var(--border); } diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css index 87d6538e81..3d46705d94 100644 --- a/canon-docs/src/components/Toolbar/theme-name.module.css +++ b/canon-docs/src/components/Toolbar/theme-name.module.css @@ -18,7 +18,6 @@ cursor: pointer; user-select: none; background-color: var(--surface-1); - transition: background-color 0.2s ease-in-out; &:focus-visible { outline: 2px solid var(--color-blue); diff --git a/canon-docs/src/components/Toolbar/theme.module.css b/canon-docs/src/components/Toolbar/theme.module.css index 641909ac1e..a7895ad840 100644 --- a/canon-docs/src/components/Toolbar/theme.module.css +++ b/canon-docs/src/components/Toolbar/theme.module.css @@ -2,14 +2,12 @@ border-radius: 0.375rem; width: 100%; background-color: var(--surface-1); - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .tabsTheme { width: 100px; border-radius: 0.375rem; background-color: var(--surface-1); - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .list { @@ -77,7 +75,7 @@ height: 1.5rem; border-radius: 0.25rem; background-color: var(--panel); - transition-property: translate, width, background-color; + transition-property: translate, width; transition-duration: 200ms; transition-timing-function: ease-in-out; } diff --git a/canon-docs/src/css/globals.css b/canon-docs/src/css/globals.css index db10115dc3..f8ac189113 100644 --- a/canon-docs/src/css/globals.css +++ b/canon-docs/src/css/globals.css @@ -31,7 +31,6 @@ body { background-color: var(--bg); color: var(--primary); font-family: var(--font-regular); - transition: background-color 0.2s ease-in-out; } iframe { From a303d64c6f3f14ec63816b8338cc1b1d0b629f20 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 2 Jul 2025 13:49:29 +0100 Subject: [PATCH 2/2] Removing the use of Canon in the docs Signed-off-by: Charles de Dreuille --- .../components/CodeBlock/styles.module.css | 2 +- .../components/CustomTheme/customTheme.tsx | 4 ++-- .../HeadlessBanners/styles.module.css | 20 +++++++++---------- .../src/components/Sidebar/Sidebar.module.css | 4 ++-- canon-docs/src/components/Tabs/parts.tsx | 11 ++-------- .../src/components/Tabs/styles.module.css | 18 ++++++++++++++--- .../src/components/Toolbar/nav.module.css | 6 +++--- .../src/components/Toolbar/styles.module.css | 6 +++--- .../components/Toolbar/theme-name.module.css | 8 ++++---- 9 files changed, 42 insertions(+), 37 deletions(-) diff --git a/canon-docs/src/components/CodeBlock/styles.module.css b/canon-docs/src/components/CodeBlock/styles.module.css index c522573f37..03ec72d6c4 100644 --- a/canon-docs/src/components/CodeBlock/styles.module.css +++ b/canon-docs/src/components/CodeBlock/styles.module.css @@ -4,7 +4,7 @@ position: relative; background: transparent; overflow-x: auto; - font-family: var(--canon-font-monospace); + font-family: var(--font-mono); background-color: #fff; margin-bottom: 1rem; } diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx index 66b4afc47c..87c72ecdcb 100644 --- a/canon-docs/src/components/CustomTheme/customTheme.tsx +++ b/canon-docs/src/components/CustomTheme/customTheme.tsx @@ -11,13 +11,13 @@ import { createTheme } from '@uiw/codemirror-themes'; import { tags as t } from '@lezer/highlight'; const defaultTheme = `:root { - --canon-bg-accent: #000; + --canon-bg-solid: #000; }`; const myTheme = createTheme({ theme: 'light', settings: { - background: 'var(--canon-bg-surface-1)', + background: 'var(--surface-1)', backgroundImage: '', foreground: '#6182B8', caret: '#5d00ff', diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css index c87787634e..384327c394 100644 --- a/canon-docs/src/components/HeadlessBanners/styles.module.css +++ b/canon-docs/src/components/HeadlessBanners/styles.module.css @@ -1,16 +1,16 @@ .container { display: flex; background-color: var(--panel); - padding: var(--canon-space-6); - border-radius: var(--canon-radius-2); + padding: 1.5rem; + border-radius: 0.25rem; border: 1px solid var(--border); - margin-bottom: var(--canon-space-6); - gap: var(--canon-space-6); + margin-bottom: 1.5rem; + gap: 1.5rem; transition: background-color 0.2s ease-in-out; } .icon path { - fill: var(--canon-fg-primary); + fill: var(--primary); } .content { @@ -31,12 +31,12 @@ cursor: pointer; background-color: var(--bg); border: 1px solid var(--border); - border-radius: var(--canon-radius-2); - padding: 0 var(--canon-space-3); + border-radius: 0.25rem; + padding: 0 0.75rem; height: 28px; border-radius: 100px; - margin-top: var(--canon-space-3); - font-size: var(--canon-font-size-3); + margin-top: 0.75rem; + font-size: 0.875rem; color: var(--primary); - gap: var(--canon-space-2); + gap: 0.5rem; } diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css index 91fb0fff1f..bfb2e6f648 100644 --- a/canon-docs/src/components/Sidebar/Sidebar.module.css +++ b/canon-docs/src/components/Sidebar/Sidebar.module.css @@ -55,8 +55,8 @@ } .sectionTitle { - font-size: var(--canon-font-size-3); - font-weight: var(--canon-font-weight-bold); + font-size: 0.875rem; + font-weight: 600; padding: 12px 0; color: var(--primary); margin-top: 24px; diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx index 3d02683cef..2a394d248b 100644 --- a/canon-docs/src/components/Tabs/parts.tsx +++ b/canon-docs/src/components/Tabs/parts.tsx @@ -1,7 +1,6 @@ 'use client'; import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs'; -import { Text } from '../../../../packages/canon'; import styles from './styles.module.css'; export const Root = ({ @@ -27,14 +26,8 @@ export const Tab = (props: React.ComponentProps) => ( {...props} render={({ children, ...rest }, state) => { return ( - ); }} diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css index 5789b08345..8fdffc3f4b 100644 --- a/canon-docs/src/components/Tabs/styles.module.css +++ b/canon-docs/src/components/Tabs/styles.module.css @@ -4,16 +4,28 @@ .list { display: flex; - gap: var(--canon-space-6); + gap: 24px; border-bottom: 1px solid var(--border); position: relative; - margin-bottom: var(--canon-space-6); + margin-bottom: 24px; } .tab { all: unset; cursor: pointer; - padding-bottom: 8px; + padding-bottom: 12px; + font-size: 14px; + font-weight: 600; + color: var(--primary); + + &[data-selected='false'] { + color: var(--secondary); + } + + &[data-selected='false']:hover { + color: var(--primary); + transition: color 0.2s ease-in-out; + } } .indicator { diff --git a/canon-docs/src/components/Toolbar/nav.module.css b/canon-docs/src/components/Toolbar/nav.module.css index c102b2bd6f..56501f186e 100644 --- a/canon-docs/src/components/Toolbar/nav.module.css +++ b/canon-docs/src/components/Toolbar/nav.module.css @@ -20,15 +20,15 @@ display: flex; position: relative; z-index: 0; - gap: var(--canon-space-8); + gap: 2rem; } .tab { all: unset; height: 60px; color: var(--secondary); - font-size: var(--canon-font-size-3); - font-weight: var(--canon-font-weight-bold); + font-size: 0.875rem; + font-weight: 600; cursor: pointer; &:hover { diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css index f74ce57b77..5700e876ab 100644 --- a/canon-docs/src/components/Toolbar/styles.module.css +++ b/canon-docs/src/components/Toolbar/styles.module.css @@ -3,14 +3,14 @@ top: 16px; left: 0; right: 0; - border-radius: 8px; + border-radius: 0.5rem; z-index: 10; background-color: var(--panel); height: 60px; display: flex; align-items: center; justify-content: space-between; - padding: 0 var(--canon-space-6); + padding: 0 1.5rem; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025); border: 1px solid var(--border); } @@ -18,5 +18,5 @@ .actions { display: flex; align-items: center; - gap: var(--canon-space-4); + gap: 1rem; } diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css index 3d46705d94..02644e8ea0 100644 --- a/canon-docs/src/components/Toolbar/theme-name.module.css +++ b/canon-docs/src/components/Toolbar/theme-name.module.css @@ -30,8 +30,8 @@ } .SelectValue { - font-size: var(--canon-font-size-3); - font-weight: var(--canon-font-weight-regular); + font-size: 0.875rem; + font-weight: 400; } .Positioner { @@ -81,8 +81,8 @@ padding-block: 0.5rem; padding-left: 0.625rem; padding-right: 1rem; - font-size: var(--canon-font-size-3); - font-weight: var(--canon-font-weight-bold); + font-size: 0.875rem; + font-weight: 600; display: grid; gap: 0.5rem; align-items: center;