Remove Vanilla Extract CSS from Storybook docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/docs/components/Chip/Chip.tsx

@@ -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

@@ -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/styles.css

@@ -14,21 +14,20 @@
  * limitations under the License.
  */
 
-import { globalStyle, style } from '@vanilla-extract/css';
+.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;
 
-export const textStyles = style({
-  fontFamily: '"Geist", sans-serif',
-  fontSize: '16px',
-  lineHeight: '28px',
-  margin: '0',
-  fontWeight: 300,
-  marginBottom: '16px',
-});
-
-globalStyle(`${textStyles} p`, {
-  fontFamily: '"Geist", sans-serif',
-  fontSize: '16px',
-  lineHeight: '28px',
-  margin: '0',
-  fontWeight: 300,
-});
+  &.head {
+    background-color: #eaf2fd;
+    color: #2563eb;
+  }
+}

packages/canon/docs/components/Columns/Columns.tsx

@@ -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/styles.css

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+.columns {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  row-gap: 20px;
+  column-gap: 80px;
+}

packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx

@@ -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/styles.css

@@ -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

@@ -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/LayoutComponents/index.tsx

@@ -15,13 +15,6 @@
  */
 
 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';
@@ -30,41 +23,41 @@ import { ContainerSvg } from './container';
 
 export const LayoutComponents = () => {
   return (
-    <div className={container}>
-      <div className={box}>
-        <a className={content} href="/?path=/docs/components-box--docs">
+    <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 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">
+      <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 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">
+      <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 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">
+      <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 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">
+      <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 className="title">Container</div>
+        <div className="description">A container for your components</div>
       </div>
     </div>
   );

packages/canon/docs/components/LayoutComponents/styles.css

@@ -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/Table/index.tsx

@@ -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/styles.css

@@ -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

@@ -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/Text.tsx

@@ -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/styles.css

@@ -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/Title.tsx

@@ -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/styles.css

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+.title {
+  font-family: 'Geist', sans-serif;
+  margin: 0;
+  font-weight: 500;
+  border: none;
+
+  &.h1 {
+    font-size: 36px;
+    line-height: 44px;
+    margin-bottom: 8px;
+    margin-top: 0px;
+  }
+
+  &.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

@@ -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

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-export * from './Chip';
+export * from './Chip/Chip';
 export * from './Table';
-export * from './Title';
-export * from './Text';
-export * from './Columns';
+export * from './Title/Title';
+export * from './Text/Text';
+export * from './Columns/Columns';
 export * from './ComponentStatus';
 export * from './LayoutComponents';
 export * from './Banner';

packages/canon/docs/components/styles.css

@@ -1,2 +1,7 @@
 @import './IconLibrary/styles.css';
 @import './Roadmap/styles.css';
+@import './Title/styles.css';
+@import './Text/styles.css';
+@import './Table/styles.css';
+@import './ComponentStatus/styles.css';
+@import './Columns/styles.css';