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

Merge pull request #28052 from backstage/canon-remove-vanilla-extract

Browse Source 
Canon - Remove vanilla extract in favour of pure CSS
This commit is contained in:
Charles de Dreuille
2024-12-10 14:56:24 +00:00
committed by GitHub
parent 0330de4d18 4368a953ed
commit 0e4aacc7ad
54 changed files with 600 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/docs/components/Banner/index.tsx → packages/canon/docs/components/Banner/Banner.tsx
+2 -3
View File
@@ -14,7 +14,6 @@
* limitations under the License.
*/
import React from 'react';
import { bannerIconStyles, bannerStyles } from './banner.css';
export const Banner = ({
children,
@@ -24,8 +23,8 @@ export const Banner = ({
variant?: 'info' | 'warning';
}) => {
return (
<div className={bannerStyles({ variant })}>
<div className={bannerIconStyles}>
<div className={`banner ${variant}`}>
<div className="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
packages/canon/docs/components/Banner/banner.css.ts
-61
View File
@@ -1,61 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { recipe } from '@vanilla-extract/recipes';
import { globalStyle, style } from '@vanilla-extract/css';
export const bannerStyles = recipe({
base: {
display: 'flex',
alignItems: 'center',
fontFamily: '"Geist", sans-serif',
fontSize: '16px',
lineHeight: '28px',
padding: '16px',
borderRadius: '6px',
marginBottom: '16px',
border: '1px solid #e0e0e0',
},
variants: {
variant: {
info: {
backgroundColor: '#F2F2F2',
borderColor: '#CDCDCD',
color: '#888888',
},
warning: {
backgroundColor: '#FFF2B9',
borderColor: '#FFD000',
color: '#D79927',
},
},
},
});
globalStyle(`${bannerStyles.classNames.base} p`, {
margin: '0',
});
export const bannerIconStyles = style({
width: '32px',
height: '32px',
backgroundColor: 'rgba(215, 153, 39, 0.2)',
borderRadius: '6px',
marginRight: '16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
});
packages/canon/docs/components/Columns/columns.css.ts → packages/canon/docs/components/Banner/index.ts
+1 -9
View File
@@ -13,12 +13,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { style } from '@vanilla-extract/css';
export const styles = style({
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
rowGap: '20px',
columnGap: '80px',
});
export { Banner } from './Banner';
packages/canon/docs/components/Banner/styles.css
+38
View File
@@ -0,0 +1,38 @@
.banner {
display: flex;
align-items: center;
font-family: 'Geist', sans-serif;
font-size: 16px;
line-height: 28px;
padding: 16px;
border-radius: 6px;
margin-bottom: 16px;
border: 1px solid #e0e0e0;
& > p {
margin: 0;
}
&.info {
background-color: #f2f2f2;
border-color: #cdcdcd;
color: #888888;
}
&.warning {
background-color: #fff2b9;
border-color: #ffd000;
color: #d79927;
}
& .icon {
width: 32px;
height: 32px;
background-color: rgba(215, 153, 39, 0.2);
border-radius: 6px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
}
}
packages/canon/docs/components/Chip/index.tsx → packages/canon/docs/components/Chip/Chip.tsx
+1 -2
View File
@@ -15,7 +15,6 @@
*/
import React from 'react';
import { chipStyles } from './chip.css';
export const Chip = ({
children,
@@ -24,5 +23,5 @@ export const Chip = ({
children: React.ReactNode;
head?: boolean;
}) => {
return <span className={chipStyles({ head })}>{children}</span>;
return <span className={`chip ${head ? 'head' : ''}`}>{children}</span>;
};
packages/canon/docs/components/Chip/chip.css.ts
-42
View File
@@ -1,42 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { recipe } from '@vanilla-extract/recipes';
export const chipStyles = recipe({
base: {
display: 'inline-flex',
alignItems: 'center',
fontFamily: 'Geist Mono, monospace',
fontSize: '13px',
borderRadius: '6px',
padding: '0px 8px',
height: '24px',
marginRight: '4px',
},
variants: {
head: {
true: {
backgroundColor: '#eaf2fd',
color: '#2563eb',
},
false: {
backgroundColor: '#f0f0f0',
color: '#5d5d5d',
},
},
},
});
packages/canon/docs/components/Chip/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Chip } from './Chip';
packages/canon/docs/components/Chip/styles.css
+33
View File
@@ -0,0 +1,33 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.chip {
display: inline-flex;
align-items: center;
font-family: 'Geist Mono', monospace;
font-size: 13px;
border-radius: 6px;
padding: 0px 8px;
height: 24px;
margin-right: 4px;
background-color: #f0f0f0;
color: #5d5d5d;
&.head {
background-color: #eaf2fd;
color: #2563eb;
}
}
packages/canon/docs/components/Columns/index.tsx → packages/canon/docs/components/Columns/Columns.tsx
+1 -2
View File
@@ -15,7 +15,6 @@
*/
import React from 'react';
import { styles } from './columns.css';
export const Columns = ({
children,
@@ -25,7 +24,7 @@ export const Columns = ({
style?: React.CSSProperties;
}) => {
return (
<div className={styles} style={style}>
<div className="columns" style={style}>
{children}
</div>
);
packages/canon/docs/components/Columns/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Columns } from './Columns';
packages/canon/src/components/Box/box.css.ts → packages/canon/docs/components/Columns/styles.css
+6 -6
View File
@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { style } from '@vanilla-extract/css';
export const base = style({
fontFamily: 'var(--canon-font-regular)',
color: 'var(--canon-text-primary)',
});
.columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 80px;
}
packages/canon/docs/components/ComponentStatus/index.tsx → packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx
+4 -5
View File
@@ -15,7 +15,6 @@
*/
import React from 'react';
import { container, pill, title } from './component-status.css';
export const ComponentStatus = ({
name,
@@ -29,15 +28,15 @@ export const ComponentStatus = ({
link?: string;
}) => {
return (
<div className={container} style={style}>
<div className="component-status" style={style}>
{link ? (
<a href={link} className={title}>
<a href={link} className="title">
{name}
</a>
) : (
<span className={title}>{name}</span>
<span className="title">{name}</span>
)}
<span className={pill({ status })}>
<span className={`pill ${status}`}>
{status === 'notStarted' && 'Not Started'}
{status === 'inProgress' && 'In Progress'}
{status === 'alpha' && 'Alpha'}
packages/canon/docs/components/ComponentStatus/component-status.css.ts
-77
View File
@@ -1,77 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { style } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';
export const container = style({
display: 'flex',
justifyContent: 'space-between',
});
export const title = style({
color: '#3b59ff',
fontFamily: '"Geist", sans-serif',
fontSize: '16px',
fontWeight: 400,
textDecoration: 'none',
});
export const pill = recipe({
base: {
fontFamily: '"Geist", sans-serif',
display: 'inline-flex',
alignItems: 'center',
color: '#000',
borderRadius: '40px',
padding: '0px 8px',
height: '24px',
fontSize: '12px',
fontWeight: 600,
borderStyle: 'solid',
borderWidth: '1px',
marginLeft: '8px',
},
variants: {
status: {
notStarted: {
backgroundColor: '#F2F2F2',
borderColor: '#CDCDCD',
color: '#888888',
},
inProgress: {
backgroundColor: '#FFF2B9',
borderColor: '#FFD000',
color: '#D79927',
},
alpha: {
backgroundColor: '#D7F9D7',
borderColor: '#4ED14A',
color: '#3A9837',
},
beta: {
backgroundColor: '#D7F9D7',
borderColor: '#4ED14A',
color: '#3A9837',
},
stable: {
backgroundColor: '#D7F9D7',
borderColor: '#4ED14A',
color: '#3A9837',
},
},
},
});
packages/canon/docs/components/ComponentStatus/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { ComponentStatus } from './ComponentStatus';
packages/canon/docs/components/ComponentStatus/styles.css
+73
View File
@@ -0,0 +1,73 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.component-status {
display: flex;
justify-content: space-between;
& .title {
color: #3b59ff;
font-family: 'Geist', sans-serif;
font-size: 16px;
font-weight: 400;
text-decoration: none;
}
& .pill {
font-family: 'Geist', sans-serif;
display: inline-flex;
align-items: center;
color: #000;
border-radius: 40px;
padding: 0px 8px;
height: 24px;
font-size: 12px;
font-weight: 600;
border-style: solid;
border-width: 1px;
margin-left: 8px;
&.notStarted {
background-color: #f2f2f2;
border-color: #cdcdcd;
color: #888888;
}
&.inProgress {
background-color: #fff2b9;
border-color: #ffd000;
color: #d79927;
}
&.alpha {
background-color: #d7f9d7;
border-color: #4ed14a;
color: #3a9837;
}
&.beta {
background-color: #d7f9d7;
border-color: #4ed14a;
color: #3a9837;
}
&.stable {
background-color: #d7f9d7;
border-color: #4ed14a;
color: #3a9837;
}
}
}
packages/canon/docs/components/IconLibrary/index.tsx → packages/canon/docs/components/IconLibrary/IconLibrary.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ import React from 'react';
import { Icon } from '@backstage/canon';
import type { IconNames } from '@backstage/canon';
import { defaultIcons } from '../../../src/components/Icon/icons';
import { Text } from '../Text';
import { Text } from '../Text/Text';
export const IconLibrary = () => {
const icons = Object.keys(defaultIcons);
packages/canon/docs/components/IconLibrary/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { IconLibrary } from './IconLibrary';
packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx
+64
View File
@@ -0,0 +1,64 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { BoxSvg } from './svgs/box';
import { StackSvg } from './svgs/stack';
import { GridSvg } from './svgs/grid';
import { InlineSvg } from './svgs/inline';
import { ContainerSvg } from './svgs/container';
export const LayoutComponents = () => {
return (
<div className="layout-components">
<div className="box">
<a className="content" href="/?path=/docs/components-box--docs">
<BoxSvg />
</a>
<div className="title">Box</div>
<div className="description">The most basic layout component</div>
</div>
<div className="box">
<a className="content" href="/?path=/docs/components-stack--docs">
<StackSvg />
</a>
<div className="title">Stack</div>
<div className="description">Arrange your components vertically</div>
</div>
<div className="box">
<a className="content" href="/?path=/docs/components-grid--docs">
<GridSvg />
</a>
<div className="title">Grid</div>
<div className="description">Arrange your components in a grid</div>
</div>
<div className="box">
<a className="content" href="/?path=/docs/components-inline--docs">
<InlineSvg />
</a>
<div className="title">Inline</div>
<div className="description">Arrange your components in a row</div>
</div>
<div className="box">
<a className="content" href="/?path=/docs/components-container--docs">
<ContainerSvg />
</a>
<div className="title">Container</div>
<div className="description">A container for your components</div>
</div>
</div>
);
};
packages/canon/docs/components/LayoutComponents/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { LayoutComponents } from './LayoutComponents';
packages/canon/docs/components/LayoutComponents/index.tsx
-71
View File
@@ -1,71 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import {
container,
box,
content,
title,
description,
} from './layout-components.css';
import { BoxSvg } from './box';
import { StackSvg } from './stack';
import { GridSvg } from './grid';
import { InlineSvg } from './inline';
import { ContainerSvg } from './container';
export const LayoutComponents = () => {
return (
<div className={container}>
<div className={box}>
<a className={content} href="/?path=/docs/components-box--docs">
<BoxSvg />
</a>
<div className={title}>Box</div>
<div className={description}>The most basic layout component</div>
</div>
<div className={box}>
<a className={content} href="/?path=/docs/components-stack--docs">
<StackSvg />
</a>
<div className={title}>Stack</div>
<div className={description}>Arrange your components vertically</div>
</div>
<div className={box}>
<a className={content} href="/?path=/docs/components-grid--docs">
<GridSvg />
</a>
<div className={title}>Grid</div>
<div className={description}>Arrange your components in a grid</div>
</div>
<div className={box}>
<a className={content} href="/?path=/docs/components-inline--docs">
<InlineSvg />
</a>
<div className={title}>Inline</div>
<div className={description}>Arrange your components in a row</div>
</div>
<div className={box}>
<a className={content} href="/?path=/docs/components-container--docs">
<ContainerSvg />
</a>
<div className={title}>Container</div>
<div className={description}>A container for your components</div>
</div>
</div>
);
};
packages/canon/docs/components/LayoutComponents/layout-components.css.ts
-63
View File
@@ -1,63 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { style } from '@vanilla-extract/css';
export const container = style({
display: 'flex',
justifyContent: 'flex-start',
gap: '1rem',
flexWrap: 'wrap',
});
export const box = style({
display: 'flex',
flexDirection: 'column',
width: 'calc(33.33% - 0.67rem)',
marginBottom: '1rem',
alignItems: 'flex-start',
});
export const content = style({
flex: 'none',
background: 'linear-gradient(180deg, #F3F3F3 0%, #FFF 100%)',
borderRadius: '4px',
width: '100%',
height: '180px',
transition: 'all 0.2s ease-in-out',
marginBottom: '0.75rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
selectors: {
[`${box}:hover &`]: {
transform: 'translateY(-4px)',
},
},
});
export const title = style({
fontSize: '16px',
fontFamily: 'var(--canon-font-regular)',
transition: 'color 0.2s ease-in-out',
marginBottom: '0.25rem',
});
export const description = style({
fontSize: '16px',
fontFamily: 'var(--canon-font-regular)',
color: '#9e9e9e',
});
packages/canon/docs/components/LayoutComponents/styles.css
+60
View File
@@ -0,0 +1,60 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.layout-components {
display: flex;
justify-content: flex-start;
gap: 1rem;
flex-wrap: wrap;
& .box {
display: flex;
flex-direction: column;
width: calc(33.33% - 0.67rem);
margin-bottom: 1rem;
align-items: flex-start;
}
& .content {
flex: none;
background: linear-gradient(180deg, #f3f3f3 0%, #fff 100%);
border-radius: 4px;
width: 100%;
height: 180px;
transition: all 0.2s ease-in-out;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
&:hover {
transform: translateY(-4px);
}
}
& .title {
font-size: 16px;
font-family: 'Geist', sans-serif;
transition: color 0.2s ease-in-out;
margin-bottom: 0.25rem;
}
& .description {
font-size: 16px;
font-family: 'Geist', sans-serif;
color: #9e9e9e;
}
}
packages/canon/docs/components/LayoutComponents/box.tsx → packages/canon/docs/components/LayoutComponents/svgs/box.tsx
View File
packages/canon/docs/components/LayoutComponents/container.tsx → packages/canon/docs/components/LayoutComponents/svgs/container.tsx
View File
packages/canon/docs/components/LayoutComponents/grid.tsx → packages/canon/docs/components/LayoutComponents/svgs/grid.tsx
View File
packages/canon/docs/components/LayoutComponents/inline.tsx → packages/canon/docs/components/LayoutComponents/svgs/inline.tsx
View File
packages/canon/docs/components/LayoutComponents/stack.tsx → packages/canon/docs/components/LayoutComponents/svgs/stack.tsx
View File
packages/canon/docs/components/PropsTable/getProps.ts
+1 -1
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export function getBoxProps(styles: Record<string, any>) {
export function getProps(styles: Record<string, any>) {
return Object.keys(styles).reduce(
(acc: Record<string, { type: any[]; responsive: boolean }>, n) => {
const style = styles[n];
packages/canon/docs/components/PropsTable/index.ts
+1 -1
View File
@@ -14,4 +14,4 @@
* limitations under the License.
*/
export { PropsTable } from './PropsTable';
export { getBoxProps } from './getProps';
export { getProps } from './getProps';
packages/canon/docs/components/Roadmap/index.tsx → packages/canon/docs/components/Roadmap/Roadmap.tsx
View File
packages/canon/docs/components/Roadmap/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Roadmap } from './Roadmap';
packages/canon/docs/components/Table/index.tsx → packages/canon/docs/components/Table/Table.tsx
+5 -12
View File
@@ -15,18 +15,11 @@
*/
import React from 'react';
import {
cellStyles,
headerCellStyles,
tableStyles,
wrapperStyles,
rowStyles,
} from './table.css';
export const Root = ({ children }: { children: React.ReactNode }) => {
return (
<div className={wrapperStyles}>
<table className={tableStyles}>{children}</table>
<div className="table-wrapper">
<table className="table">{children}</table>
</div>
);
};
@@ -44,13 +37,13 @@ export const HeaderRow = ({ children }: { children: React.ReactNode }) => {
};
export const HeaderCell = ({ children }: { children: React.ReactNode }) => {
return <th className={`${cellStyles} ${headerCellStyles}`}>{children}</th>;
return <th className="table-cell table-header-cell">{children}</th>;
};
export const Row = ({ children }: { children: React.ReactNode }) => {
return <tr className={rowStyles}>{children}</tr>;
return <tr className="table-row">{children}</tr>;
};
export const Cell = ({ children }: { children: React.ReactNode }) => {
return <td className={cellStyles}>{children}</td>;
return <td className="table-cell">{children}</td>;
};
packages/canon/docs/components/Table/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Root, Header, Body, Row, Cell, HeaderRow, HeaderCell } from './Table';
packages/canon/docs/components/Table/styles.css
+74
View File
@@ -0,0 +1,74 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.table-wrapper {
border: 1px solid #e7e7e7;
border-radius: 4px;
overflow: hidden;
& .table {
width: 100%;
margin: 0 !important;
padding: 0 !important;
border-spacing: 0px;
border-collapse: collapse;
}
& .table-cell {
padding: 12px 16px !important;
border: none !important;
text-align: left;
background-color: white !important;
font-family: 'Geist', sans-serif;
font-size: 16px;
font-weight: 300;
& p {
margin: 0;
}
}
& .table-header-cell {
background-color: #f5f5f5 !important;
border-bottom: 1px solid #e7e7e7 !important;
font-weight: 500;
font-size: 14px;
}
& .table-row {
border: none;
border-bottom: 1px solid #e7e7e7;
&:last-child {
border-bottom: none;
}
}
& .table-chip {
display: inline-block;
font-size: 14px !important;
border: 1px solid #e7e7e7;
border-radius: 6px;
padding: 0px 6px;
height: 24px;
}
& .table-type {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 8px;
}
}
packages/canon/docs/components/Table/table.css.ts
-83
View File
@@ -1,83 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { style, globalStyle } from '@vanilla-extract/css';
export const wrapperStyles = style({
border: '1px solid #e7e7e7',
borderRadius: '4px',
overflow: 'hidden',
});
export const tableStyles = style({
width: '100%',
margin: '0 !important',
padding: '0 !important',
borderSpacing: '0px',
borderCollapse: 'collapse',
});
export const cellStyles = style({
padding: '12px 16px !important',
border: 'none !important',
textAlign: 'left',
backgroundColor: 'white !important',
fontFamily: '"Geist", sans-serif',
fontSize: '16px',
fontWeight: 300,
});
// Apply global styles to <p> elements inside cellStyles
globalStyle(`${cellStyles} p`, {
margin: '0',
});
export const headerRowStyles = style({
borderBottom: '1px solid #e7e7e7',
});
export const headerCellStyles = style({
backgroundColor: '#f5f5f5 !important',
borderBottom: '1px solid #e7e7e7 !important',
fontWeight: 500,
fontSize: '14px',
});
export const rowStyles = style({
border: 'none',
borderBottom: '1px solid #e7e7e7',
selectors: {
'&:last-child': {
borderBottom: 'none',
},
},
});
export const chipStyles = style({
display: 'inline-block',
fontSize: '14px !important',
border: '1px solid #e7e7e7',
borderRadius: '6px',
padding: '0px 6px',
height: '24px',
});
export const typeStyles = style({
display: 'flex',
flexWrap: 'wrap',
flexDirection: 'row',
gap: '8px',
});
packages/canon/docs/components/Text/index.tsx → packages/canon/docs/components/Text/Text.tsx
+1 -2
View File
@@ -15,7 +15,6 @@
*/
import React from 'react';
import { textStyles } from './text.css';
export const Text = ({
children,
@@ -25,7 +24,7 @@ export const Text = ({
style?: React.CSSProperties;
}) => {
return (
<div className={textStyles} style={style}>
<div className="text" style={style}>
{children}
</div>
);
packages/canon/docs/components/Text/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Text } from './Text';
packages/canon/docs/components/Text/styles.css
+32
View File
@@ -0,0 +1,32 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.text {
font-family: 'Geist', sans-serif;
font-size: 16px;
line-height: 28px;
margin: 0;
font-weight: 300;
margin-bottom: 16px;
& p {
font-family: 'Geist', sans-serif;
font-size: 16px;
line-height: 28px;
margin: 0;
font-weight: 300;
}
}
packages/canon/docs/components/Title/index.tsx → packages/canon/docs/components/Title/Title.tsx
+1 -2
View File
@@ -15,7 +15,6 @@
*/
import React from 'react';
import { titleStyles } from './title.css';
export const Title = ({
children,
@@ -32,7 +31,7 @@ export const Title = ({
if (type === 'h3') Component = 'h3';
return React.createElement(Component, {
className: titleStyles({ type }),
className: `title ${type}`,
style,
children,
});
packages/canon/docs/components/Title/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Title } from './Title';
packages/canon/docs/components/Text/text.css.ts → packages/canon/docs/components/Title/styles.css
+25 -16
View File
@@ -14,21 +14,30 @@
* limitations under the License.
*/
import { globalStyle, style } from '@vanilla-extract/css';
.title {
font-family: 'Geist', sans-serif;
margin: 0;
font-weight: 500;
border: none;
export const textStyles = style({
fontFamily: '"Geist", sans-serif',
fontSize: '16px',
lineHeight: '28px',
margin: '0',
fontWeight: 300,
marginBottom: '16px',
});
&.h1 {
font-size: 36px;
line-height: 44px;
margin-bottom: 8px;
margin-top: 0px;
}
globalStyle(`${textStyles} p`, {
fontFamily: '"Geist", sans-serif',
fontSize: '16px',
lineHeight: '28px',
margin: '0',
fontWeight: 300,
});
&.h2 {
font-size: 24px;
line-height: 32px;
margin-bottom: 12px;
margin-top: 52px;
}
&.h3 {
font-size: 20px;
line-height: 28px;
margin-bottom: 12px;
margin-top: 40px;
}
}
packages/canon/docs/components/Title/title.css.ts
-48
View File
@@ -1,48 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { recipe } from '@vanilla-extract/recipes';
export const titleStyles = recipe({
base: {
fontFamily: '"Geist", sans-serif',
margin: '0',
fontWeight: 500,
border: 'none',
},
variants: {
type: {
h1: {
fontSize: '36px',
lineHeight: '44px',
marginBottom: '8px',
marginTop: '0px',
},
h2: {
fontSize: '24px',
lineHeight: '32px',
marginBottom: '12px',
marginTop: '52px',
},
h3: {
fontSize: '20px',
lineHeight: '28px',
marginBottom: '12px',
marginTop: '40px',
},
},
},
});
packages/canon/docs/components/index.ts
+6 -5
View File
@@ -14,13 +14,14 @@
* limitations under the License.
*/
export * from './Banner';
export * from './Chip';
export * from './Table';
export * from './Title';
export * from './Text';
export * from './Columns';
export * from './ComponentStatus';
export * from './LayoutComponents';
export * from './Banner';
export * from './IconLibrary';
export * from './LayoutComponents';
export * from './PropsTable';
export * from './Roadmap';
export * from './Table';
export * from './Text';
export * from './Title';
packages/canon/docs/components/styles.css
+8
View File
@@ -1,2 +1,10 @@
@import './Banner/styles.css';
@import './Chip/styles.css';
@import './Columns/styles.css';
@import './ComponentStatus/styles.css';
@import './IconLibrary/styles.css';
@import './LayoutComponents/styles.css';
@import './Roadmap/styles.css';
@import './Table/styles.css';
@import './Text/styles.css';
@import './Title/styles.css';
packages/canon/package.json
-3
View File
@@ -39,9 +39,6 @@
"dependencies": {
"@base_ui/react": "^1.0.0-alpha.3",
"@remixicon/react": "^4.5.0",
"@vanilla-extract/css": "^1.16.0",
"@vanilla-extract/dynamic": "^2.1.2",
"@vanilla-extract/recipes": "^0.5.5",
"@vanilla-extract/sprinkles": "^1.6.3"
},
"devDependencies": {
packages/canon/src/components/Box/Box.tsx
+1 -2
View File
@@ -16,7 +16,6 @@
import { createElement, forwardRef } from 'react';
import { boxSprinkles } from './sprinkles.css';
import { base } from './box.css';
import { BoxProps } from './types';
/** @public */
@@ -27,7 +26,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
const sprinklesClassName = boxSprinkles(restProps);
// Combine the base class name, the sprinkles class name, and any additional class names
const classNames = [base, sprinklesClassName, className]
const classNames = ['box', sprinklesClassName, className]
.filter(Boolean)
.join(' ');
packages/canon/src/components/Box/Docs.mdx
+3 -3
View File
@@ -2,7 +2,7 @@ import { Meta, Unstyled, Source } from '@storybook/blocks';
import * as BoxStories from './Box.stories';
import { Title, Text } from '../../../docs/components';
import { Padding } from './docs/padding';
import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
import { PropsTable, getProps } from '../../../docs/components';
import { boxProperties } from './sprinkles.css';
import { spacingProperties } from '../../layout/sprinkles.css';
@@ -29,7 +29,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
<PropsTable
data={{
...getBoxProps(boxProperties.styles),
...getProps(boxProperties.styles),
children: {
type: 'ReactNode',
required: false,
@@ -53,7 +53,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
<Padding />
<PropsTable data={getBoxProps(spacingProperties.styles)} />
<PropsTable data={getProps(spacingProperties.styles)} />
<Title type="h2">Examples</Title>
<Text>Here are some examples of how you can use the Box component.</Text>
packages/canon/src/components/Box/styles.css
+4
View File
@@ -0,0 +1,4 @@
.box {
font-family: 'var(--canon-font-regular)';
color: 'var(--canon-text-primary)';
}
packages/canon/src/components/Button/Docs.mdx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
import { Title, Text } from '../../../docs/components';
import { PropsTable } from '../../../docs/components/PropsTable';
import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
<Meta of={ButtonStories} />
packages/canon/src/components/Container/Docs.mdx
+2 -3
View File
@@ -1,7 +1,6 @@
import { Meta, Unstyled, Source } from '@storybook/blocks';
import * as ContainerStories from './Container.stories';
import { Title, Text } from '../../../docs/components';
import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
import { spacingProperties } from '../../layout/sprinkles.css';
import { containerProperties } from './sprinkles.css';
@@ -29,7 +28,7 @@ import { containerProperties } from './sprinkles.css';
<PropsTable
data={{
...getBoxProps(containerProperties.styles),
...getProps(containerProperties.styles),
children: {
type: 'ReactNode',
required: false,
packages/canon/src/components/Grid/Docs.mdx
+2 -3
View File
@@ -1,7 +1,6 @@
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
import * as GridStories from './Grid.stories';
import { Title, Text } from '../../../docs/components';
import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
import { spacingProperties } from '../../layout/sprinkles.css';
<Meta of={GridStories} />
@@ -71,7 +70,7 @@ export default () => (
The grid component also accepts all the spacing props from the Box component.
</Text>
<PropsTable data={getBoxProps(spacingProperties.styles)} />
<PropsTable data={getProps(spacingProperties.styles)} />
<Title type="h3">Grid Item</Title>
<Text>
packages/canon/src/components/Inline/Docs.mdx
+2 -3
View File
@@ -1,7 +1,6 @@
import { Meta, Unstyled, Source } from '@storybook/blocks';
import * as InlineStories from './Inline.stories';
import { Title, Text } from '../../../docs/components';
import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
import { spacingProperties } from '../../layout/sprinkles.css';
import { inlineProperties } from './sprinkles.css';
@@ -57,7 +56,7 @@ import { inlineProperties } from './sprinkles.css';
The grid component also accepts all the spacing props from the Box component.
</Text>
<PropsTable data={getBoxProps(spacingProperties.styles)} />
<PropsTable data={getProps(spacingProperties.styles)} />
<Title type="h2">Examples</Title>
packages/canon/src/components/Stack/Docs.mdx
+2 -3
View File
@@ -1,7 +1,6 @@
import { Meta, Unstyled, Source } from '@storybook/blocks';
import * as StackStories from './Stack.stories';
import { Title, Text } from '../../../docs/components';
import { PropsTable, getBoxProps } from '../../../docs/components/PropsTable';
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
import { spacingProperties } from '../../layout/sprinkles.css';
<Meta of={StackStories} />
@@ -52,7 +51,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
The grid component also accepts all the spacing props from the Box component.
</Text>
<PropsTable data={getBoxProps(spacingProperties.styles)} />
<PropsTable data={getProps(spacingProperties.styles)} />
<Title type="h2">Common questions</Title>
yarn.lock
+1 -22
View File
@@ -3842,9 +3842,6 @@ __metadata:
"@testing-library/jest-dom": ^6.0.0
"@types/react": ^18.0.0
"@types/react-dom": ^18.0.0
"@vanilla-extract/css": ^1.16.0
"@vanilla-extract/dynamic": ^2.1.2
"@vanilla-extract/recipes": ^0.5.5
"@vanilla-extract/rollup-plugin": ^1.3.10
"@vanilla-extract/sprinkles": ^1.6.3
"@vanilla-extract/webpack-plugin": ^2.3.14
@@ -21548,7 +21545,7 @@ __metadata:
languageName: node
linkType: hard
"@vanilla-extract/css@npm:^1.16.0, @vanilla-extract/css@npm:^1.16.1":
"@vanilla-extract/css@npm:^1.16.1":
version: 1.16.1
resolution: "@vanilla-extract/css@npm:1.16.1"
dependencies:
@@ -21568,15 +21565,6 @@ __metadata:
languageName: node
linkType: hard
"@vanilla-extract/dynamic@npm:^2.1.2":
version: 2.1.2
resolution: "@vanilla-extract/dynamic@npm:2.1.2"
dependencies:
"@vanilla-extract/private": ^1.0.6
checksum: ec6ec9b02c7ec8a9d60aebf63225fd3f930c06ad824321f03f683f1948eb6d4e554d934303da140b3230b4af2fa15bab494c6da2a3b9a172e4118c245b4f942a
languageName: node
linkType: hard
"@vanilla-extract/integration@npm:^7.1.11":
version: 7.1.11
resolution: "@vanilla-extract/integration@npm:7.1.11"
@@ -21604,15 +21592,6 @@ __metadata:
languageName: node
linkType: hard
"@vanilla-extract/recipes@npm:^0.5.5":
version: 0.5.5
resolution: "@vanilla-extract/recipes@npm:0.5.5"
peerDependencies:
"@vanilla-extract/css": ^1.0.0
checksum: 8d2b4f8163369424226ec9a47e754002b8a095bcf86c1a60a91b2183f59508519bd31ed41baefc950ad7ca225d75b3184c3b84d3c741c5c60d91618dd70452aa
languageName: node
linkType: hard
"@vanilla-extract/rollup-plugin@npm:^1.3.10":
version: 1.3.11
resolution: "@vanilla-extract/rollup-plugin@npm:1.3.11"