Improve structure
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
+6
-4
@@ -1,8 +1,9 @@
|
||||
import { coreConcepts } from '@/utils/data';
|
||||
import { overview } from '@/utils/data';
|
||||
import { notFound } from 'next/navigation';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import styles from './page.module.css';
|
||||
import styles from '../page.module.css';
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
}: {
|
||||
@@ -13,8 +14,9 @@ export default async function Page({
|
||||
|
||||
if (fs.existsSync(filePath)) {
|
||||
const { default: Post } = await import(`@/content/${slug}.mdx`);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.pageContainer}>
|
||||
<Post />
|
||||
</div>
|
||||
);
|
||||
@@ -24,7 +26,7 @@ export default async function Page({
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return coreConcepts.map(concept => ({ slug: concept.slug }));
|
||||
return overview.map(page => ({ slug: page.slug }));
|
||||
}
|
||||
|
||||
export const dynamicParams = false;
|
||||
@@ -1,6 +0,0 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px 64px;
|
||||
}
|
||||
@@ -6,9 +6,9 @@ import { Providers } from './providers';
|
||||
import { cookies } from 'next/headers';
|
||||
|
||||
import './globals.css';
|
||||
import '../../packages/canon/src/css/core.css';
|
||||
import '../../packages/canon/src/css/components.css';
|
||||
import '../../packages/canon/.storybook/themes/backstage.css';
|
||||
import '@/public/core.css';
|
||||
import '@/public/components.css';
|
||||
import '@/public/backstage.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Canon',
|
||||
@@ -22,16 +22,10 @@ export default async function RootLayout({
|
||||
}>) {
|
||||
const cookieStore = await cookies();
|
||||
const theme = cookieStore.get('theme')?.value || 'light';
|
||||
const version = cookieStore.get('version')?.value || 'v1';
|
||||
|
||||
let dataTheme = 'light';
|
||||
if (version === 'v1' && theme === 'light') dataTheme = 'backstage-light';
|
||||
if (version === 'v1' && theme === 'dark') dataTheme = 'backstage-dark';
|
||||
if (version === 'v2' && theme === 'light') dataTheme = 'light';
|
||||
if (version === 'v2' && theme === 'dark') dataTheme = 'dark';
|
||||
const version = cookieStore.get('version')?.value || 'v2';
|
||||
|
||||
return (
|
||||
<html lang="en" data-theme={dataTheme}>
|
||||
<html lang="en" data-theme={theme} data-version={version}>
|
||||
<body>
|
||||
<Providers>
|
||||
<div className={styles.global}>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: 280px;
|
||||
padding-left: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -35,3 +35,10 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pageContainer {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px 64px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import styles from './page.module.css';
|
||||
|
||||
export default async function Page() {
|
||||
const { default: Post } = await import(`@/content/home.mdx`);
|
||||
|
||||
@@ -8,5 +9,3 @@ export default async function Page() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const dynamicParams = false;
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
import { theme } from '@/utils/data';
|
||||
import { notFound } from 'next/navigation';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import styles from '../../page.module.css';
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const slug = (await params).slug;
|
||||
const filePath = path.resolve(process.cwd(), `content/${slug}.mdx`);
|
||||
|
||||
if (fs.existsSync(filePath)) {
|
||||
const { default: Post } = await import(`@/content/${slug}.mdx`);
|
||||
return (
|
||||
<div className={styles.pageContainer}>
|
||||
<Post />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return notFound();
|
||||
}
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return theme.map(component => ({
|
||||
slug: component.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export const dynamicParams = false;
|
||||
@@ -2,7 +2,7 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 280px;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
color: var(--canon-text-primary);
|
||||
background-color: var(--canon-surface-1);
|
||||
@@ -30,7 +30,6 @@
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
|
||||
@@ -1,11 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { components, coreConcepts, layoutComponents } from '@/utils/data';
|
||||
import { components, overview, layoutComponents, theme } from '@/utils/data';
|
||||
import { Box, Text } from '@backstage/canon';
|
||||
import { motion } from 'framer-motion';
|
||||
import styles from './Sidebar.module.css';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Fragment } from 'react';
|
||||
|
||||
const data = [
|
||||
{
|
||||
title: 'Overview',
|
||||
content: overview,
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'Theme',
|
||||
content: theme,
|
||||
url: '/theme',
|
||||
},
|
||||
{
|
||||
title: 'Layout Components',
|
||||
content: layoutComponents,
|
||||
url: '/components',
|
||||
},
|
||||
{
|
||||
title: 'Components',
|
||||
content: components,
|
||||
url: '/components',
|
||||
},
|
||||
];
|
||||
|
||||
export const Docs = () => {
|
||||
const pathname = usePathname();
|
||||
@@ -26,35 +50,33 @@ export const Docs = () => {
|
||||
}}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Box marginTop="md" marginBottom="xs">
|
||||
<Text variant="subtitle" weight="bold">
|
||||
Core Concepts
|
||||
</Text>
|
||||
</Box>
|
||||
{coreConcepts.map(concept => (
|
||||
<Link href={`/core-concepts/${concept.slug}`} key={concept.slug}>
|
||||
<Text variant="body">{concept.title}</Text>
|
||||
</Link>
|
||||
))}
|
||||
<Box marginTop="md" marginBottom="xs">
|
||||
<Text variant="subtitle" weight="bold">
|
||||
Layout Components
|
||||
</Text>
|
||||
</Box>
|
||||
{layoutComponents.map(component => (
|
||||
<Link href={`/components/${component.slug}`} key={component.slug}>
|
||||
<Text variant="body">{component.title}</Text>
|
||||
</Link>
|
||||
))}
|
||||
<Box marginTop="md" marginBottom="xs">
|
||||
<Text variant="subtitle" weight="bold">
|
||||
Components
|
||||
</Text>
|
||||
</Box>
|
||||
{components.map(component => (
|
||||
<Link href={`/components/${component.slug}`} key={component.slug}>
|
||||
<Text variant="body">{component.title}</Text>
|
||||
</Link>
|
||||
{data.map(section => (
|
||||
<Fragment key={section.title}>
|
||||
<Box marginTop="lg" marginBottom="2xs">
|
||||
<Text variant="body" weight="bold">
|
||||
{section.title}
|
||||
</Text>
|
||||
</Box>
|
||||
{section.content.map(item => (
|
||||
<Link
|
||||
href={`${section.url}/${item.slug}`}
|
||||
key={item.slug}
|
||||
className={styles.line}
|
||||
>
|
||||
<Text variant="body">{item.title}</Text>
|
||||
<Text
|
||||
variant="body"
|
||||
style={{ color: 'var(--canon-text-secondary)' }}
|
||||
>
|
||||
{item.status === 'alpha' && 'Alpha'}
|
||||
{item.status === 'beta' && 'Beta'}
|
||||
{item.status === 'inProgress' && 'In Progress'}
|
||||
{item.status === 'stable' && 'Stable'}
|
||||
{item.status === 'deprecated' && 'Deprecated'}
|
||||
</Text>
|
||||
</Link>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@@ -52,8 +52,8 @@ export const Playground = () => {
|
||||
transition={{ duration: 0.2 }}
|
||||
style={{ position: 'absolute' }}
|
||||
>
|
||||
<Box marginTop="md" marginBottom="xs">
|
||||
<Text variant="subtitle" weight="bold">
|
||||
<Box marginTop="lg" marginBottom="2xs">
|
||||
<Text variant="body" weight="bold">
|
||||
Components
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -66,8 +66,8 @@ export const Playground = () => {
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Box marginTop="md" marginBottom="xs">
|
||||
<Text variant="subtitle" weight="bold">
|
||||
<Box marginTop="lg" marginBottom="2xs">
|
||||
<Text variant="body" weight="bold">
|
||||
Screen sizes
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
.tabs {
|
||||
border-radius: 0.375rem;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background-color: var(--canon-surface-2);
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.tabsTheme {
|
||||
width: 142px;
|
||||
border-radius: 0.375rem;
|
||||
background-color: var(--canon-surface-2);
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -23,7 +29,7 @@
|
||||
outline: 0;
|
||||
background: none;
|
||||
appearance: none;
|
||||
color: var(--canon-text-secondary);
|
||||
color: var(--canon-text-secondary) !important;
|
||||
font-family: inherit;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
@@ -34,7 +40,11 @@
|
||||
cursor: pointer;
|
||||
|
||||
&[data-selected] {
|
||||
color: var(--canon-text-primary);
|
||||
color: var(--canon-text-primary) !important;
|
||||
|
||||
& p {
|
||||
color: var(--canon-text-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
@@ -57,6 +67,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tab p {
|
||||
color: var(--canon-text-secondary) !important;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
@@ -21,12 +21,12 @@ export const TabsVersion = ({
|
||||
<Tabs.List className={styles.list}>
|
||||
<Tabs.Tab className={styles.tab} value="v1">
|
||||
<Text variant="caption" weight="bold">
|
||||
V1
|
||||
Theme 1
|
||||
</Text>
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab className={styles.tab} value="v2">
|
||||
<Text variant="caption" weight="bold">
|
||||
V2
|
||||
Theme 2
|
||||
</Text>
|
||||
</Tabs.Tab>
|
||||
<Tabs.Indicator className={styles.indicator} />
|
||||
@@ -42,7 +42,7 @@ export const TabsTheme = ({
|
||||
}) => {
|
||||
return (
|
||||
<Tabs.Root
|
||||
className={styles.tabs}
|
||||
className={styles.tabsTheme}
|
||||
onValueChange={setThemeCookie}
|
||||
value={theme?.value || 'light'}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
# About
|
||||
|
||||
This is the about page.
|
||||
@@ -1 +1,71 @@
|
||||
:root{--canon-font-regular:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;& .cn-button{text-transform:uppercase;box-shadow:none;background-color:#1f5493;border-radius:4px;padding:6px 16px;font-size:.875rem;font-weight:400;line-height:1.75;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border .25s cubic-bezier(.4,0,.2,1);&:hover{box-shadow:none}&.cn-button-primary{color:#fff;background-color:#153a66;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;&:hover{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}}&.cn-button-secondary{color:#1f5493;background-color:#0000;border:1px solid #1f549380;&:hover{background-color:#1f54930a;border:1px solid #1f5493}}&.cn-button-tertiary{color:#1f5493;background-color:#0000;border:none}}}[data-theme=backstage-light]{--canon-accent:#2e77d0;--canon-background:#f8f8f8;--canon-surface-1:#fff;--canon-surface-2:#f4f4f4;--canon-text-primary:#000;--canon-text-primary-on-accent:#fff;--canon-text-secondary:#646464}[data-theme=backstage-dark]{--canon-accent:#fff;--canon-background:#000;--canon-surface-1:#121212;--canon-surface-2:#1a1a1a;--canon-border-base:#fff3;--canon-border-warning:#f50000;--canon-border-error:#f87503;--canon-border-selected:#25d262;--canon-error:#f50000;--canon-text-primary:#fff;--canon-text-primary-on-accent:#000;--canon-text-secondary:#b3b3b3}
|
||||
:root {
|
||||
--canon-font-regular: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
|
||||
& .cn-button {
|
||||
text-transform: uppercase;
|
||||
box-shadow: none;
|
||||
background-color: #1f5493;
|
||||
border-radius: 4px;
|
||||
padding: 6px 16px;
|
||||
font-size: .875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75;
|
||||
transition: background-color .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), border .25s cubic-bezier(.4, 0, .2, 1);
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.cn-button-primary {
|
||||
color: #fff;
|
||||
background-color: #153a66;
|
||||
box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-button-secondary {
|
||||
color: #1f5493;
|
||||
background-color: #0000;
|
||||
border: 1px solid #1f549380;
|
||||
|
||||
&:hover {
|
||||
background-color: #1f54930a;
|
||||
border: 1px solid #1f5493;
|
||||
}
|
||||
}
|
||||
|
||||
&.cn-button-tertiary {
|
||||
color: #1f5493;
|
||||
background-color: #0000;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="backstage-light"] {
|
||||
--canon-accent: #2e77d0;
|
||||
--canon-background: #f8f8f8;
|
||||
--canon-surface-1: #fff;
|
||||
--canon-surface-2: #f4f4f4;
|
||||
--canon-text-primary: #000;
|
||||
--canon-text-primary-on-accent: #fff;
|
||||
--canon-text-secondary: #646464;
|
||||
}
|
||||
|
||||
[data-theme="backstage-dark"] {
|
||||
--canon-accent: #fff;
|
||||
--canon-background: #000;
|
||||
--canon-surface-1: #121212;
|
||||
--canon-surface-2: #1a1a1a;
|
||||
--canon-border-base: #fff3;
|
||||
--canon-border-warning: #f50000;
|
||||
--canon-border-error: #f87503;
|
||||
--canon-border-selected: #25d262;
|
||||
--canon-error: #f50000;
|
||||
--canon-text-primary: #fff;
|
||||
--canon-text-primary-on-accent: #000;
|
||||
--canon-text-secondary: #b3b3b3;
|
||||
}
|
||||
|
||||
@@ -1 +1,279 @@
|
||||
.cn-button{all:unset;user-select:none;font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-bold);font-size:var(--canon-font-size-body);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}.cn-button-primary{background-color:var(--canon-accent);color:var(--canon-text-primary-on-accent);&:hover{box-shadow:inset 0 0 0 1px var(--canon-border-focus);color:var(--canon-text-primary);background-color:#0000}}.cn-button-secondary{box-shadow:inset 0 0 0 1px var(--canon-border-base);color:var(--canon-text-primary);background-color:#0000;&:hover{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}}.cn-button-tertiary{color:var(--canon-text-primary);background-color:#0000;&:hover{color:var(--canon-text-secondary)}}.cn-button-small{height:32px;padding-left:6px;padding-right:6px}.cn-button-medium{height:40px;padding-left:8px;padding-right:8px}.cn-button-content{align-items:center;gap:var(--canon-spacing-xs);font-weight:var(--canon-font-weight-bold);display:flex}.cn-button-content-icon-both{flex:1}.canon-stack{flex-direction:column;display:flex}.canon-inline{flex-wrap:wrap;display:flex}.canon-grid{display:grid}.canon-container{max-width:var(--canon-container-max-width);padding:0 var(--canon-container-padding);margin:0 auto}.icon-12{width:12px;height:12px}.icon-16{width:16px;height:16px}.icon-24{width:24px;height:24px}.checkbox-label{justify-content:center;align-items:center;gap:var(--canon-spacing-xs);font-size:var(--canon-font-size-xs);font-family:var(--canon-font-regular);color:var(--canon-text-primary);user-select:none;flex-direction:row;display:flex;&:hover{& .checkbox{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}}}.checkbox{all:unset;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--canon-border-base);cursor:pointer;border-radius:2px;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex;&[data-checked]{background-color:var(--canon-accent)}}.checkbox-indicator{color:var(--canon-text-primary-on-accent);justify-content:center;align-items:center;display:flex}.table{background-color:var(--canon-surface-1);border-radius:var(--canon-border-radius-xs);width:100%;padding-bottom:var(--canon-spacing-5xs);padding-top:var(--canon-spacing-5xs);font-size:var(--canon-font-size-body);position:relative;overflow:auto;& table{caption-side:bottom;width:100%;font-size:var(--canon-font-size-sm);border-collapse:collapse}}.table-head{text-align:left;padding:var(--canon-spacing-xs)}.table-body{& tr:last-child{border-bottom:none}}.table-row{transition:color .2s ease-in-out;&:hover td{background-color:var(--canon-surface-3)}& .table-cell:first-child{border-top-left-radius:var(--canon-border-radius-xs);border-bottom-left-radius:var(--canon-border-radius-xs);box-shadow:inset 4px 2px 0 0 var(--canon-surface-1),inset 4px -2px 0 0 var(--canon-surface-1);padding-left:var(--canon-spacing-xs)}& .table-cell:last-child{border-top-right-radius:var(--canon-border-radius-xs);border-bottom-right-radius:var(--canon-border-radius-xs);box-shadow:inset -4px 2px 0 0 var(--canon-surface-1),inset -4px -2px 0 0 var(--canon-surface-1);padding-right:var(--canon-spacing-xs)}}.table-cell{padding:var(--canon-spacing-xs);background-color:var(--canon-surface-2);box-shadow:inset 0px 2px 0 0 var(--canon-surface-1),inset 0px -2px 0 0 var(--canon-surface-1)}.text{font-family:var(--canon-font-regular);color:var(--canon-text-primary);margin:0;padding:0;&.text-body{font-size:var(--canon-font-size-body);line-height:140%}&.text-subtitle{font-size:var(--canon-font-size-subtitle);line-height:140%}&.text-caption{font-size:var(--canon-font-size-caption);line-height:140%}&.text-label{font-size:var(--canon-font-size-label);line-height:140%}&.text-regular{font-weight:var(--canon-font-weight-regular)}&.text-bold{font-weight:var(--canon-font-weight-bold)}}.text{font-family:var(--canon-font-regular);color:var(--canon-text-primary);margin:0;padding:0;&.text-display{font-size:var(--canon-font-size-display);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title1{font-size:var(--canon-font-size-title1);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title2{font-size:var(--canon-font-size-title2);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title3{font-size:var(--canon-font-size-title3);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title4{font-size:var(--canon-font-size-title4);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title5{font-size:var(--canon-font-size-title5);line-height:100%;font-weight:var(--canon-font-weight-bold)}}
|
||||
.cn-button {
|
||||
all: unset;
|
||||
user-select: none;
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
font-size: var(--canon-font-size-body);
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
transition: all .15s;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.cn-button-primary {
|
||||
background-color: var(--canon-accent);
|
||||
color: var(--canon-text-primary-on-accent);
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-focus);
|
||||
color: var(--canon-text-primary);
|
||||
background-color: #0000;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-button-secondary {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-base);
|
||||
color: var(--canon-text-primary);
|
||||
background-color: #0000;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.cn-button-tertiary {
|
||||
color: var(--canon-text-primary);
|
||||
background-color: #0000;
|
||||
|
||||
&:hover {
|
||||
color: var(--canon-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.cn-button-small {
|
||||
height: 32px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.cn-button-medium {
|
||||
height: 40px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.cn-button-content {
|
||||
align-items: center;
|
||||
gap: var(--canon-spacing-xs);
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cn-button-content-icon-both {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.canon-stack {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-inline {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.canon-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.canon-container {
|
||||
max-width: var(--canon-container-max-width);
|
||||
padding: 0 var(--canon-container-padding);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon-12 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.icon-16 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.icon-24 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--canon-spacing-xs);
|
||||
font-size: var(--canon-font-size-xs);
|
||||
font-family: var(--canon-font-regular);
|
||||
color: var(--canon-text-primary);
|
||||
user-select: none;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
& .checkbox {
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
all: unset;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
box-shadow: inset 0 0 0 1px var(--canon-border-base);
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all .2s ease-in-out;
|
||||
display: flex;
|
||||
|
||||
&[data-checked] {
|
||||
background-color: var(--canon-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-indicator {
|
||||
color: var(--canon-text-primary-on-accent);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: var(--canon-surface-1);
|
||||
border-radius: var(--canon-border-radius-xs);
|
||||
width: 100%;
|
||||
padding-bottom: var(--canon-spacing-5xs);
|
||||
padding-top: var(--canon-spacing-5xs);
|
||||
font-size: var(--canon-font-size-body);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
& table {
|
||||
caption-side: bottom;
|
||||
width: 100%;
|
||||
font-size: var(--canon-font-size-sm);
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head {
|
||||
text-align: left;
|
||||
padding: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.table-body {
|
||||
& tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
transition: color .2s ease-in-out;
|
||||
|
||||
&:hover td {
|
||||
background-color: var(--canon-surface-3);
|
||||
}
|
||||
|
||||
& .table-cell:first-child {
|
||||
border-top-left-radius: var(--canon-border-radius-xs);
|
||||
border-bottom-left-radius: var(--canon-border-radius-xs);
|
||||
box-shadow: inset 4px 2px 0 0 var(--canon-surface-1), inset 4px -2px 0 0 var(--canon-surface-1);
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
& .table-cell:last-child {
|
||||
border-top-right-radius: var(--canon-border-radius-xs);
|
||||
border-bottom-right-radius: var(--canon-border-radius-xs);
|
||||
box-shadow: inset -4px 2px 0 0 var(--canon-surface-1), inset -4px -2px 0 0 var(--canon-surface-1);
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
padding: var(--canon-spacing-xs);
|
||||
background-color: var(--canon-surface-2);
|
||||
box-shadow: inset 0px 2px 0 0 var(--canon-surface-1), inset 0px -2px 0 0 var(--canon-surface-1);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: var(--canon-font-regular);
|
||||
color: var(--canon-text-primary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.text-body {
|
||||
font-size: var(--canon-font-size-body);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
&.text-subtitle {
|
||||
font-size: var(--canon-font-size-subtitle);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
&.text-caption {
|
||||
font-size: var(--canon-font-size-caption);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
&.text-label {
|
||||
font-size: var(--canon-font-size-label);
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
&.text-regular {
|
||||
font-weight: var(--canon-font-weight-regular);
|
||||
}
|
||||
|
||||
&.text-bold {
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: var(--canon-font-regular);
|
||||
color: var(--canon-text-primary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.text-display {
|
||||
font-size: var(--canon-font-size-display);
|
||||
line-height: 100%;
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
&.text-title1 {
|
||||
font-size: var(--canon-font-size-title1);
|
||||
line-height: 100%;
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
&.text-title2 {
|
||||
font-size: var(--canon-font-size-title2);
|
||||
line-height: 100%;
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
&.text-title3 {
|
||||
font-size: var(--canon-font-size-title3);
|
||||
line-height: 100%;
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
&.text-title4 {
|
||||
font-size: var(--canon-font-size-title4);
|
||||
line-height: 100%;
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
|
||||
&.text-title5 {
|
||||
font-size: var(--canon-font-size-title5);
|
||||
line-height: 100%;
|
||||
font-weight: var(--canon-font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
+5725
-1
File diff suppressed because one or more lines are too long
@@ -21,7 +21,7 @@ const bundleAndCopyFile = async (source, destination) => {
|
||||
try {
|
||||
const result = await bundle({
|
||||
filename: source,
|
||||
minify: true, // Optional: Minify the output
|
||||
minify: false,
|
||||
});
|
||||
|
||||
fs.writeFileSync(destination, result.code);
|
||||
|
||||
@@ -1,4 +1,21 @@
|
||||
export const coreConcepts = [
|
||||
interface Page {
|
||||
title: string;
|
||||
slug: string;
|
||||
status?: 'alpha' | 'beta' | 'stable' | 'deprecated' | 'inProgress';
|
||||
}
|
||||
|
||||
export const overview: Page[] = [
|
||||
{
|
||||
title: 'Getting Started',
|
||||
slug: '',
|
||||
},
|
||||
{
|
||||
title: 'About',
|
||||
slug: 'about',
|
||||
},
|
||||
];
|
||||
|
||||
export const theme: Page[] = [
|
||||
{
|
||||
title: 'Iconography',
|
||||
slug: 'iconography',
|
||||
@@ -21,53 +38,64 @@ export const coreConcepts = [
|
||||
},
|
||||
];
|
||||
|
||||
export const layoutComponents = [
|
||||
export const layoutComponents: Page[] = [
|
||||
{
|
||||
title: 'Box',
|
||||
slug: 'box',
|
||||
status: 'alpha',
|
||||
},
|
||||
{
|
||||
title: 'Container',
|
||||
slug: 'container',
|
||||
status: 'alpha',
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
slug: 'grid',
|
||||
status: 'alpha',
|
||||
},
|
||||
{
|
||||
title: 'Inline',
|
||||
slug: 'inline',
|
||||
status: 'alpha',
|
||||
},
|
||||
{
|
||||
title: 'Stack',
|
||||
slug: 'stack',
|
||||
status: 'alpha',
|
||||
},
|
||||
];
|
||||
|
||||
export const components = [
|
||||
export const components: Page[] = [
|
||||
{
|
||||
title: 'Button',
|
||||
slug: 'button',
|
||||
status: 'alpha',
|
||||
},
|
||||
{
|
||||
title: 'Checkbox',
|
||||
slug: 'checkbox',
|
||||
status: 'inProgress',
|
||||
},
|
||||
{
|
||||
title: 'Heading',
|
||||
slug: 'heading',
|
||||
status: 'alpha',
|
||||
},
|
||||
{
|
||||
title: 'Icon',
|
||||
slug: 'icon',
|
||||
status: 'alpha',
|
||||
},
|
||||
{
|
||||
title: 'Table',
|
||||
slug: 'table',
|
||||
status: 'inProgress',
|
||||
},
|
||||
{
|
||||
title: 'Text',
|
||||
slug: 'text',
|
||||
status: 'alpha',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -27,6 +27,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
|
||||
children,
|
||||
variant = 'body',
|
||||
weight = 'regular',
|
||||
style,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
@@ -39,10 +40,11 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
|
||||
return (
|
||||
<p
|
||||
ref={ref}
|
||||
{...restProps}
|
||||
className={`text ${
|
||||
responsiveVariant ? `text-${responsiveVariant}` : ''
|
||||
} ${responsiveWeight ? `text-${responsiveWeight}` : ''}`}
|
||||
style={style}
|
||||
{...restProps}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
import type { Breakpoint } from '../../types';
|
||||
|
||||
/** @public */
|
||||
@@ -27,4 +27,5 @@ export interface TextProps {
|
||||
| 'label'
|
||||
| Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
|
||||
weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
@@ -377,6 +377,10 @@
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-m-2xs {
|
||||
margin: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -405,6 +409,10 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -433,6 +441,10 @@
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -461,6 +473,10 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-2xs {
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -489,6 +505,10 @@
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -518,6 +538,11 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
@@ -553,6 +578,11 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-my-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
@@ -587,6 +617,10 @@
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-p-2xs {
|
||||
padding: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -615,6 +649,10 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -643,6 +681,10 @@
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -671,6 +713,10 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-2xs {
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -699,6 +745,10 @@
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -728,6 +778,11 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-px-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
@@ -763,6 +818,11 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-2xl-py-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-2xl-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
|
||||
@@ -377,6 +377,10 @@
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-m-2xs {
|
||||
margin: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -405,6 +409,10 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -433,6 +441,10 @@
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-ml-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -461,6 +473,10 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mr-2xs {
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -489,6 +505,10 @@
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -518,6 +538,11 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-mx-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
@@ -553,6 +578,11 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-my-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
@@ -587,6 +617,10 @@
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-p-2xs {
|
||||
padding: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -615,6 +649,10 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -643,6 +681,10 @@
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pl-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -671,6 +713,10 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pr-2xs {
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -699,6 +745,10 @@
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -728,6 +778,11 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-px-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
@@ -763,6 +818,11 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-lg-py-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-lg-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
|
||||
@@ -377,6 +377,10 @@
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-m-2xs {
|
||||
margin: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -405,6 +409,10 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -433,6 +441,10 @@
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-ml-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -461,6 +473,10 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mr-2xs {
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -489,6 +505,10 @@
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -518,6 +538,11 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-mx-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
@@ -553,6 +578,11 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-my-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
@@ -587,6 +617,10 @@
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-p-2xs {
|
||||
padding: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -615,6 +649,10 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -643,6 +681,10 @@
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pl-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -671,6 +713,10 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pr-2xs {
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -699,6 +745,10 @@
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -728,6 +778,11 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-px-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
@@ -763,6 +818,11 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-md-py-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-md-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
|
||||
@@ -377,6 +377,10 @@
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-m-2xs {
|
||||
margin: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -405,6 +409,10 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -433,6 +441,10 @@
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-ml-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -461,6 +473,10 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mr-2xs {
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -489,6 +505,10 @@
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -518,6 +538,11 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-mx-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
@@ -553,6 +578,11 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-my-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
@@ -587,6 +617,10 @@
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-p-2xs {
|
||||
padding: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -615,6 +649,10 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -643,6 +681,10 @@
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pl-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -671,6 +713,10 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pr-2xs {
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -699,6 +745,10 @@
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -728,6 +778,11 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-px-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
@@ -763,6 +818,11 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-sm-py-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-sm-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
|
||||
@@ -377,6 +377,10 @@
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-m-2xs {
|
||||
margin: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -405,6 +409,10 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -433,6 +441,10 @@
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-ml-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -461,6 +473,10 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mr-2xs {
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -489,6 +505,10 @@
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -518,6 +538,11 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-mx-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
@@ -553,6 +578,11 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-my-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
@@ -587,6 +617,10 @@
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-p-2xs {
|
||||
padding: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -615,6 +649,10 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -643,6 +681,10 @@
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pl-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -671,6 +713,10 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pr-2xs {
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -699,6 +745,10 @@
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -728,6 +778,11 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-px-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
@@ -763,6 +818,11 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-xl-py-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-xl-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
|
||||
@@ -376,6 +376,10 @@
|
||||
margin: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-m-2xs {
|
||||
margin: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-m-lg {
|
||||
margin: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -404,6 +408,10 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mb-2xs {
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-mb-lg {
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -432,6 +440,10 @@
|
||||
margin-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-ml-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-ml-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -460,6 +472,10 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mr-2xs {
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-mr-lg {
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -488,6 +504,10 @@
|
||||
margin-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mt-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-mt-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -517,6 +537,11 @@
|
||||
margin-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-mx-2xs {
|
||||
margin-left: var(--canon-spacing-2xs);
|
||||
margin-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-mx-lg {
|
||||
margin-left: var(--canon-spacing-lg);
|
||||
margin-right: var(--canon-spacing-lg);
|
||||
@@ -552,6 +577,11 @@
|
||||
margin-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-my-2xs {
|
||||
margin-top: var(--canon-spacing-2xs);
|
||||
margin-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-my-lg {
|
||||
margin-top: var(--canon-spacing-lg);
|
||||
margin-bottom: var(--canon-spacing-lg);
|
||||
@@ -586,6 +616,10 @@
|
||||
padding: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-p-2xs {
|
||||
padding: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-p-lg {
|
||||
padding: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -614,6 +648,10 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pb-2xs {
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-pb-lg {
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -642,6 +680,10 @@
|
||||
padding-left: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pl-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-pl-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -670,6 +712,10 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pr-2xs {
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-pr-lg {
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -698,6 +744,10 @@
|
||||
padding-top: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-pt-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-pt-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
}
|
||||
@@ -727,6 +777,11 @@
|
||||
padding-right: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-px-2xs {
|
||||
padding-left: var(--canon-spacing-2xs);
|
||||
padding-right: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-px-lg {
|
||||
padding-left: var(--canon-spacing-lg);
|
||||
padding-right: var(--canon-spacing-lg);
|
||||
@@ -762,6 +817,11 @@
|
||||
padding-bottom: var(--canon-spacing-2xl);
|
||||
}
|
||||
|
||||
.cu-py-2xs {
|
||||
padding-top: var(--canon-spacing-2xs);
|
||||
padding-bottom: var(--canon-spacing-2xs);
|
||||
}
|
||||
|
||||
.cu-py-lg {
|
||||
padding-top: var(--canon-spacing-lg);
|
||||
padding-bottom: var(--canon-spacing-lg);
|
||||
|
||||
Reference in New Issue
Block a user