Merge pull request #29461 from backstage/canon-new-release-page

Canon - Add new release page

canon-docs/src/app/(docs)/releases/page.mdx

@@ -0,0 +1,31 @@
+# Releases
+
+## Version 0.2.0
+
+### Main updates
+
+- New `Tooltip` component ([#29241](https://github.com/backstage/backstage/pull/29241))
+- New `Menu` component. ([#29151](https://github.com/backstage/backstage/pull/29151))
+- New `IconButton` component. ([#29239](https://github.com/backstage/backstage/pull/29239))
+- New `ScrollArea` component. ([#29240](https://github.com/backstage/backstage/pull/29240))
+- Improve `Button` & `Checkbox` styles. ([#29127](https://github.com/backstage/backstage/pull/29127)) ([#28789](https://github.com/backstage/backstage/pull/28789))
+- Improve `Text` styles. ([#29200](https://github.com/backstage/backstage/pull/29200))
+- Renamed `CanonProvider` to `IconProvider`. ([#29002](https://github.com/backstage/backstage/pull/29002))
+- Added about 40+ new icons. ([#29264](https://github.com/backstage/backstage/pull/29264))
+- Simplified styling into a unique styles.css file ([#29199](https://github.com/backstage/backstage/pull/29199))
+- Added Canon styles to Backstage ([#29137](https://github.com/backstage/backstage/pull/29137))
+- Update global CSS tokens ([#28804](https://github.com/backstage/backstage/pull/28804))
+- Merge Stack + Inline into Flex ([#28634](https://github.com/backstage/backstage/pull/28634))
+
+### Notable fixes:
+
+- Improve `Button` types. ([#29205](https://github.com/backstage/backstage/pull/29205))
+- Move font weight and family back to each components ([#28972](https://github.com/backstage/backstage/pull/28972))
+- Fix custom values in spacing props ([#28770](https://github.com/backstage/backstage/pull/28770))
+- Multiple updates on the Canon Docs site ([#28760](https://github.com/backstage/backstage/pull/28760)) ([#28591](https://github.com/backstage/backstage/pull/28591))
+
+## Version 0.1.0
+
+We're excited to share the initial release of Canon 💚 In this first alpha version, you'll find the foundation of our design system:
+a set of versatile layout components and a handful of essential atomic elements to help you get started. While Canon is still in its
+early stages, it's ready for exploration and we'd love for you to give it a try and share your feedback.

canon-docs/src/css/globals.css

@@ -3,6 +3,7 @@
   --panel: #fff;
   --primary: #000;
   --secondary: #757575;
+  --link: #4f5ce0;
   --font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
@@ -18,6 +19,7 @@
   --panel: #222222;
   --primary: #fff;
   --secondary: #9e9e9e;
+  --link: #4856e8;
   --border: rgba(255, 255, 255, 0.1);
 }
 

canon-docs/src/css/mdx.module.css

@@ -27,6 +27,21 @@
   color: var(--secondary);
 }
 
-.p:first-of-type {
-  margin-bottom: 2rem;
+.ul {
+  margin: 0;
+  padding-left: 2rem;
+}
+
+.li {
+  color: var(--secondary);
+  margin-bottom: 0.5rem;
+}
+
+.a {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.a:hover {
+  text-decoration: underline;
 }

canon-docs/src/mdx-components.tsx

@@ -17,12 +17,15 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     ),
     p: ({ children }) => <p className={styles.p}>{children as ReactNode}</p>,
     a: ({ children, href }) => (
-      <a href={href} style={{ color: 'var(--primary)' }}>
+      <a href={href} className={styles.a}>
         {children as ReactNode}
       </a>
     ),
+    ul: ({ children }) => (
+      <ul className={styles.ul}>{children as ReactNode}</ul>
+    ),
     li: ({ children }) => (
-      <li style={{ marginBottom: '0.5rem' }}>{children as ReactNode}</li>
+      <li className={styles.li}>{children as ReactNode}</li>
     ),
     pre: ({ children }) => {
       const codeContent = React.isValidElement(children)

canon-docs/src/utils/data.ts

@@ -13,6 +13,10 @@ export const overview: Page[] = [
     title: 'About',
     slug: 'about',
   },
+  {
+    title: 'Releases',
+    slug: 'releases',
+  },
 ];
 
 export const theme: Page[] = [