From f677331f8082fc4a8f023ee96b26035ed78fe559 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Sun, 15 Dec 2024 23:09:20 +0000 Subject: [PATCH] Fixed Storybook font Signed-off-by: Charles de Dreuille --- packages/canon/docs/Responsive.mdx | 150 ++++++++++++++++++ .../canon/docs/components/Banner/styles.css | 1 - .../components/ComponentStatus/styles.css | 2 - .../components/LayoutComponents/styles.css | 2 - .../canon/docs/components/Roadmap/styles.css | 1 - .../canon/docs/components/Table/styles.css | 3 - .../canon/docs/components/Text/styles.css | 5 - .../canon/docs/components/Title/styles.css | 2 - packages/canon/docs/components/styles.css | 5 + 9 files changed, 155 insertions(+), 16 deletions(-) create mode 100644 packages/canon/docs/Responsive.mdx diff --git a/packages/canon/docs/Responsive.mdx b/packages/canon/docs/Responsive.mdx new file mode 100644 index 0000000000..447bd3cbf0 --- /dev/null +++ b/packages/canon/docs/Responsive.mdx @@ -0,0 +1,150 @@ +import { Unstyled, Meta, Canvas, Source } from '@storybook/blocks'; +import { + Columns, + Text, + ComponentStatus, + Banner, + Title, + Roadmap, +} from './components'; +import { list } from './components/Roadmap/list'; +import * as HeadingStories from '../src/components/Heading/Heading.stories'; +import * as TextStories from '../src/components/Text/Text.stories'; +import * as Table from './components/Table'; +import { Chip } from './components/Chip'; + + + + + +Responsive + + Canon is built on a responsive design system, meaning that the components are + designed to adapt to different screen sizes. By default we offer a set of + breakpoints that you can use to create responsive components. + + + + Breakpoints + + + + + + Breakpoint prefix + Minimum width + CSS + + + + + + xs + + + 0px + + + {`{ ... }`} + + + + + sm + + + 640px + + + {`@media (min-width: 640px) { ... }`} + + + + + md + + + 768px + + + {`@media (min-width: 768px) { ... }`} + + + + + lg + + + 1024px + + + {`@media (min-width: 1024px) { ... }`} + + + + + xl + + + 1280px + + + {`@media (min-width: 1280px) { ... }`} + + + + + 2xl + + + 1536px + + + {`@media (min-width: 1536px) { ... }`} + + + + + +Responsive components + + + Canon components are designed to be responsive, meaning that they will adapt + to different screen sizes. Not every component is responsive, but the ones + that are will have a prop to control the responsive behavior. + + + + The behaviour is the same for each component. For each prop, instead of adding + the value, you add an object with the value and the breakpoint prefix. + + +Button + +// Responsive value + +`} dark /> + +How to update breakpoints + + + The set of keys are not to be changed, but you can update the minimum width of + each breakpoint in the theme provider. + + +`} + dark +/> + + diff --git a/packages/canon/docs/components/Banner/styles.css b/packages/canon/docs/components/Banner/styles.css index 6fec3345ae..d20e14ce0b 100644 --- a/packages/canon/docs/components/Banner/styles.css +++ b/packages/canon/docs/components/Banner/styles.css @@ -1,7 +1,6 @@ .banner { display: flex; align-items: center; - font-family: 'Geist', sans-serif; font-size: 16px; line-height: 28px; padding: 16px; diff --git a/packages/canon/docs/components/ComponentStatus/styles.css b/packages/canon/docs/components/ComponentStatus/styles.css index f800e659e0..6ef02ccf3f 100644 --- a/packages/canon/docs/components/ComponentStatus/styles.css +++ b/packages/canon/docs/components/ComponentStatus/styles.css @@ -20,14 +20,12 @@ & .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; diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css index c2a819cf6b..9319121224 100644 --- a/packages/canon/docs/components/LayoutComponents/styles.css +++ b/packages/canon/docs/components/LayoutComponents/styles.css @@ -47,14 +47,12 @@ & .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; } } diff --git a/packages/canon/docs/components/Roadmap/styles.css b/packages/canon/docs/components/Roadmap/styles.css index e47aecf7fa..10d177bf0f 100644 --- a/packages/canon/docs/components/Roadmap/styles.css +++ b/packages/canon/docs/components/Roadmap/styles.css @@ -4,7 +4,6 @@ } .roadmap .roadmap-item { - font-family: 'Geist', sans-serif; display: flex; align-items: center; justify-content: space-between; diff --git a/packages/canon/docs/components/Table/styles.css b/packages/canon/docs/components/Table/styles.css index fb9faf17eb..9ce32124c6 100644 --- a/packages/canon/docs/components/Table/styles.css +++ b/packages/canon/docs/components/Table/styles.css @@ -18,8 +18,6 @@ border: 1px solid #e7e7e7; border-radius: 4px; overflow: hidden; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; & .sb-table { width: 100%; @@ -34,7 +32,6 @@ border: none !important; text-align: left; background-color: white !important; - font-family: 'Geist', sans-serif; font-size: 16px; font-weight: 300; diff --git a/packages/canon/docs/components/Text/styles.css b/packages/canon/docs/components/Text/styles.css index 7255ea802b..516f7212bf 100644 --- a/packages/canon/docs/components/Text/styles.css +++ b/packages/canon/docs/components/Text/styles.css @@ -15,8 +15,6 @@ */ .sb-text { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 28px; margin: 0; @@ -24,9 +22,6 @@ margin-bottom: 16px; & p { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol'; font-size: 16px; line-height: 28px; margin: 0; diff --git a/packages/canon/docs/components/Title/styles.css b/packages/canon/docs/components/Title/styles.css index 6b4084cf3b..7c2f18815e 100644 --- a/packages/canon/docs/components/Title/styles.css +++ b/packages/canon/docs/components/Title/styles.css @@ -15,8 +15,6 @@ */ .sb-title { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; margin: 0; font-weight: 500; border: none; diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css index 670b0c3046..706b1626b3 100644 --- a/packages/canon/docs/components/styles.css +++ b/packages/canon/docs/components/styles.css @@ -1,3 +1,8 @@ +.sbdocs-content { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, + Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; +} + @import './Banner/styles.css'; @import './Chip/styles.css'; @import './Columns/styles.css';