paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 37 Packages Projects Releases Wiki Activity

Merge pull request #30432 from backstage/canon-docs-themes

Browse Source 
Canon docs - Improve theme switching
This commit is contained in:
Charles de Dreuille
2025-07-03 17:30:37 +01:00
committed by GitHub
parent f4906890ba a303d64c6f
commit 6ef06cc84e
14 changed files with 49 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/src/components/Chip/styles.module.css
-1
View File
@@ -9,7 +9,6 @@
margin-right: 4px;
background-color: #f0f0f0;
color: #5d5d5d;
transition: background-color 0.2s ease-in-out;
}
.head {
canon-docs/src/components/CodeBlock/styles.module.css
+1 -2
View File
@@ -4,9 +4,8 @@
position: relative;
background: transparent;
overflow-x: auto;
font-family: var(--canon-font-monospace);
font-family: var(--font-mono);
background-color: #fff;
transition: background-color 0.2s ease-in-out;
margin-bottom: 1rem;
}
canon-docs/src/components/CustomTheme/customTheme.tsx
+2 -2
View File
@@ -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',
canon-docs/src/components/HeadlessBanners/styles.module.css
+10 -10
View File
@@ -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;
}
canon-docs/src/components/Sidebar/Sidebar.module.css
+3 -4
View File
@@ -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;
}
}
@@ -56,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;
@@ -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;
}
}
canon-docs/src/components/Snippet/styles.module.css
-1
View File
@@ -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;
}
canon-docs/src/components/Table/styles.module.css
-1
View File
@@ -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;
canon-docs/src/components/Tabs/parts.tsx
+2 -9
View File
@@ -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<typeof TabsPrimitive.Tab>) => (
{...props}
render={({ children, ...rest }, state) => {
return (
<button className={styles.tab} {...rest}>
<Text
variant="subtitle"
weight="bold"
color={state.selected ? 'primary' : 'secondary'}
>
{children}
</Text>
<button className={styles.tab} data-selected={state.selected} {...rest}>
{children}
</button>
);
}}
canon-docs/src/components/Tabs/styles.module.css
+18 -4
View File
@@ -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 {
@@ -23,5 +35,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;
}
canon-docs/src/components/Toolbar/nav.module.css
+5 -5
View File
@@ -20,19 +20,19 @@
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;
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;
}
canon-docs/src/components/Toolbar/styles.module.css
+3 -4
View File
@@ -3,15 +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);
transition: background-color 0.2s ease-in-out;
padding: 0 1.5rem;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
border: 1px solid var(--border);
}
@@ -19,5 +18,5 @@
.actions {
display: flex;
align-items: center;
gap: var(--canon-space-4);
gap: 1rem;
}
canon-docs/src/components/Toolbar/theme-name.module.css
+4 -5
View File
@@ -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);
@@ -31,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 {
@@ -82,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;
canon-docs/src/components/Toolbar/theme.module.css
+1 -3
View File
@@ -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;
}
canon-docs/src/css/globals.css
-1
View File
@@ -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 {