From f677331f8082fc4a8f023ee96b26035ed78fe559 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Sun, 15 Dec 2024 23:09:20 +0000 Subject: [PATCH 1/6] 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'; From 980446f3958ca2fa91564e57634d15771d5ce5a3 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 16 Dec 2024 16:48:00 +0000 Subject: [PATCH 2/6] Improve responsive hook Signed-off-by: Charles de Dreuille --- packages/canon/.storybook/preview.tsx | 7 ++++ .../canon/src/components/Button/Button.tsx | 16 +------- .../canon/src/components/Button/index.tsx | 2 +- .../Button/types.ts} | 39 +++++++------------ .../components/Heading/Heading.stories.tsx | 2 +- .../canon/src/components/Heading/Heading.tsx | 8 ++-- packages/canon/src/components/Text/Text.tsx | 8 ++-- packages/canon/src/theme/context.tsx | 28 ++++++++++++- 8 files changed, 60 insertions(+), 50 deletions(-) rename packages/canon/src/{utils/getResponsiveValue.ts => components/Button/types.ts} (52%) diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index db17d95afa..0c2a75332d 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -32,6 +32,13 @@ const preview: Preview = { }, viewport: { viewports: { + xs: { + name: 'XSmall', + styles: { + width: '320px', + height: '100%', + }, + }, small: { name: 'Small', styles: { diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx index b168705952..50233f3d45 100644 --- a/packages/canon/src/components/Button/Button.tsx +++ b/packages/canon/src/components/Button/Button.tsx @@ -16,21 +16,7 @@ import React, { forwardRef } from 'react'; import { Icon } from '../Icon'; -import type { IconNames } from '../Icon/types'; - -/** - * Properties for {@link Button} - * - * @public - */ -export interface ButtonProps { - size?: 'small' | 'medium'; - variant?: 'primary' | 'secondary' | 'tertiary'; - children: React.ReactNode; - disabled?: boolean; - iconStart?: IconNames; - iconEnd?: IconNames; -} +import { ButtonProps } from './types'; /** @public */ export const Button = forwardRef( diff --git a/packages/canon/src/components/Button/index.tsx b/packages/canon/src/components/Button/index.tsx index bc6714754d..c323ba0329 100644 --- a/packages/canon/src/components/Button/index.tsx +++ b/packages/canon/src/components/Button/index.tsx @@ -14,4 +14,4 @@ * limitations under the License. */ export { Button } from './Button'; -export type { ButtonProps } from './Button'; +export type { ButtonProps } from './types'; diff --git a/packages/canon/src/utils/getResponsiveValue.ts b/packages/canon/src/components/Button/types.ts similarity index 52% rename from packages/canon/src/utils/getResponsiveValue.ts rename to packages/canon/src/components/Button/types.ts index 858d0c8bcb..4f3a907ee7 100644 --- a/packages/canon/src/utils/getResponsiveValue.ts +++ b/packages/canon/src/components/Button/types.ts @@ -13,29 +13,18 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Breakpoints } from '../types'; +import { IconNames } from '../Icon'; -export const getResponsiveValue = ( - value: any, - breakpoint: keyof Breakpoints, -) => { - if (typeof value === 'object') { - const breakpointsOrder: (keyof Breakpoints)[] = [ - 'xs', - 'sm', - 'md', - 'lg', - 'xl', - '2xl', - ]; - const index = breakpointsOrder.indexOf(breakpoint); - - for (let i = index; i >= 0; i--) { - if (value[breakpointsOrder[i]]) { - return value[breakpointsOrder[i]]; - } - } - return value['xs']; - } - return value; -}; +/** + * Properties for {@link Button} + * + * @public + */ +export interface ButtonProps { + size?: 'small' | 'medium'; + variant?: 'primary' | 'secondary' | 'tertiary'; + children: React.ReactNode; + disabled?: boolean; + iconStart?: IconNames; + iconEnd?: IconNames; +} diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx index d956961503..8c46528a2f 100644 --- a/packages/canon/src/components/Heading/Heading.stories.tsx +++ b/packages/canon/src/components/Heading/Heading.stories.tsx @@ -60,7 +60,7 @@ export const Responsive: Story = { ...Default.args, variant: { xs: 'title4', - sm: 'display', + md: 'display', }, }, }; diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx index 6e45433b91..0050ad79b7 100644 --- a/packages/canon/src/components/Heading/Heading.tsx +++ b/packages/canon/src/components/Heading/Heading.tsx @@ -17,14 +17,16 @@ import React, { forwardRef } from 'react'; import { HeadingProps } from './types'; import { useTheme } from '../../theme/context'; -import { getResponsiveValue } from '../../utils/getResponsiveValue'; export const Heading = forwardRef( (props, ref) => { const { children, variant = 'title1', as = 'h1', ...restProps } = props; - const { breakpoint } = useTheme(); - const responsiveVariant = getResponsiveValue(variant, breakpoint); + const { getResponsiveValue } = useTheme(); + // Get the responsive value for the variant + const responsiveVariant = getResponsiveValue(variant); + + // Determine the component to render based on the variant let Component = as; if (variant === 'title2') Component = 'h2'; if (variant === 'title3') Component = 'h3'; diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx index 1c718786fa..852d52ff46 100644 --- a/packages/canon/src/components/Text/Text.tsx +++ b/packages/canon/src/components/Text/Text.tsx @@ -17,7 +17,6 @@ import React, { forwardRef } from 'react'; import { TextProps } from './types'; import { useTheme } from '../../theme/context'; -import { getResponsiveValue } from '../../utils/getResponsiveValue'; export const Text = forwardRef( (props, ref) => { @@ -28,10 +27,11 @@ export const Text = forwardRef( ...restProps } = props; - const { breakpoint } = useTheme(); + const { getResponsiveValue } = useTheme(); - const responsiveVariant = getResponsiveValue(variant, breakpoint); - const responsiveWeight = getResponsiveValue(weight, breakpoint); + // Get the responsive values for the variant and weight + const responsiveVariant = getResponsiveValue(variant); + const responsiveWeight = getResponsiveValue(weight); return (

) => string; } const ThemeContext = createContext({ icons: defaultIcons, breakpoint: 'md', + getResponsiveValue: () => '', }); interface ThemeProviderProps { @@ -68,8 +70,32 @@ export const ThemeProvider = (props: ThemeProviderProps) => { return 'xs'; })(); + const getResponsiveValue = (value: string | Partial) => { + if (typeof value === 'object') { + const breakpointsOrder: (keyof Breakpoints)[] = [ + 'xs', + 'sm', + 'md', + 'lg', + 'xl', + '2xl', + ]; + const index = breakpointsOrder.indexOf(breakpoint); + + for (let i = index; i >= 0; i--) { + if (value[breakpointsOrder[i]]) { + return value[breakpointsOrder[i]] as string; + } + } + return value['xs'] as string; + } + return value; + }; + return ( - + {children} ); From f9ead917103f821e8ccf7b99a9e0f398c929c3d4 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 16 Dec 2024 17:16:46 +0000 Subject: [PATCH 3/6] Improve responsive values for Button Signed-off-by: Charles de Dreuille --- packages/canon/.storybook/preview.tsx | 6 +- .../canon/.storybook/themes/backstage.css | 57 ++++++------ packages/canon/docs/Responsive.mdx | 2 +- .../src/components/Button/Button.stories.tsx | 15 ++++ .../canon/src/components/Button/Button.tsx | 18 +++- packages/canon/src/components/Button/Docs.mdx | 4 +- .../canon/src/components/Button/styles.css | 86 +++++++++---------- packages/canon/src/components/Button/types.ts | 9 +- .../canon/src/components/Heading/Heading.tsx | 4 +- .../src/components/Icon/Icon.stories.tsx | 6 +- packages/canon/src/components/Icon/Icon.tsx | 4 +- packages/canon/src/components/Text/Text.tsx | 4 +- .../{theme/context.tsx => contexts/canon.tsx} | 14 +-- 13 files changed, 132 insertions(+), 97 deletions(-) rename packages/canon/src/{theme/context.tsx => contexts/canon.tsx} (90%) diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index 0c2a75332d..bb8bbea4ef 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -11,7 +11,7 @@ import '../src/css/components.css'; // Custom themes import './themes/backstage.css'; -import { ThemeProvider } from '../src/theme/context'; +import { CanonProvider } from '../src/contexts/canon'; const preview: Preview = { parameters: { @@ -98,9 +98,9 @@ const preview: Preview = { }); return ( - + - + ); }, ], diff --git a/packages/canon/.storybook/themes/backstage.css b/packages/canon/.storybook/themes/backstage.css index 4a7821cda2..5777f303b6 100644 --- a/packages/canon/.storybook/themes/backstage.css +++ b/packages/canon/.storybook/themes/backstage.css @@ -12,7 +12,7 @@ --canon-font-regular: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; - .button { + .cn-button { border-radius: 60px; font-weight: 400; text-transform: uppercase; @@ -25,39 +25,40 @@ background-color: #1f5493; padding: 6px 16px; box-shadow: none; - } - .button:hover { - box-shadow: none; - } + &:hover { + box-shadow: none; + } - .button.primary { - color: #fff; - background-color: rgb(21, 58, 102); - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } + &.cn-button-primary { + color: #fff; + background-color: rgb(21, 58, 102); + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - .button.primary:hover { - box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), - 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); - } + &:hover { + box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), + 0px 4px 5px 0px rgba(0, 0, 0, 0.14), + 0px 1px 10px 0px rgba(0, 0, 0, 0.12); + } + } - .button.secondary { - background-color: transparent; - border: 1px solid rgba(31, 84, 147, 0.5); - color: #1f5493; - } + &.cn-button-secondary { + background-color: transparent; + border: 1px solid rgba(31, 84, 147, 0.5); + color: #1f5493; - .button.secondary:hover { - border: 1px solid #1f5493; - background-color: rgba(31, 84, 147, 0.04); - } + &:hover { + border: 1px solid #1f5493; + background-color: rgba(31, 84, 147, 0.04); + } + } - .button.tertiary { - background-color: transparent; - border: none; - color: #1f5493; + &.cn-button-tertiary { + background-color: transparent; + border: none; + color: #1f5493; + } } } diff --git a/packages/canon/docs/Responsive.mdx b/packages/canon/docs/Responsive.mdx index 447bd3cbf0..85292ee555 100644 --- a/packages/canon/docs/Responsive.mdx +++ b/packages/canon/docs/Responsive.mdx @@ -136,7 +136,7 @@ import { Chip } from './components/Chip'; ( @@ -30,15 +31,28 @@ export const Button = forwardRef( children, } = props; + const { getResponsiveValue } = useCanon(); + + // Get the responsive value for the variant + const responsiveSize = getResponsiveValue(size); + const responsiveVariant = getResponsiveValue(variant); + return ( + + + + ), }; export const Sizes: Story = { args: { children: 'Button', }, - render: args => ( + render: () => ( - + ), }; diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx index 2dabace9b2..e4b069cbcd 100644 --- a/packages/canon/src/components/Button/Docs.mdx +++ b/packages/canon/src/components/Button/Docs.mdx @@ -51,4 +51,85 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; }} /> +Examples + +Variants +Here's a view when buttons have different variants. + + + + + + + +`} + language="tsx" + dark +/> + +Sizes +Here's a view when buttons have different sizes. + + + + + + +`} + language="tsx" + dark +/> + +With Icons +Here's a view when buttons have icons. + + + + + + + +`} + language="tsx" + dark +/> + +Full width +Here's a view when buttons are full width. + + + + + + + +`} + language="tsx" + dark +/> + +Disabled +Here's a view when buttons are disabled. + + + +Button`} language="tsx" dark /> + +Responsive +Here's a view when buttons are responsive. + + + + + Button +`} + language="tsx" + dark +/> + diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index 914dd08c65..9d24e6b452 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -21,8 +21,8 @@ justify-content: center; user-select: none; font-family: var(--canon-font-regular); - font-weight: var(--canon-font-bold); - font-size: var(--canon-font-size-md); + font-weight: var(--canon-font-weight-bold); + font-size: var(--canon-font-size-body); padding: 0; transition: all 150ms ease; cursor: pointer; @@ -70,10 +70,11 @@ height: 40px; } - &.cn-button-content { + & .cn-button-content { display: flex; align-items: center; gap: var(--canon-spacing-xs); + font-weight: var(--canon-font-weight-bold); &.cn-button-content-icon-both { flex: 1; From 4e82be56d03937ab5918ea253dfff99f27dfad15 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 17 Dec 2024 13:10:08 +0000 Subject: [PATCH 6/6] Flatten styles Signed-off-by: Charles de Dreuille --- .../canon/src/components/Button/styles.css | 96 +++++++++---------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index 9d24e6b452..52fcb57a18 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -27,57 +27,57 @@ transition: all 150ms ease; cursor: pointer; border-radius: 8px; +} - &.cn-button-primary { - background-color: var(--canon-accent); - color: var(--canon-text-primary-on-accent); +.cn-button-primary { + background-color: var(--canon-accent); + color: var(--canon-text-primary-on-accent); - &:hover { - background-color: transparent; - box-shadow: inset 0 0 0 1px var(--canon-outline-focus); - color: var(--canon-text-primary); - } - } - - &.cn-button-secondary { + &:hover { background-color: transparent; - box-shadow: inset 0 0 0 1px var(--canon-outline); + box-shadow: inset 0 0 0 1px var(--canon-outline-focus); color: var(--canon-text-primary); - - &:hover { - box-shadow: inset 0 0 0 1px var(--canon-outline-hover); - } - } - - &.cn-button-tertiary { - background-color: transparent; - color: var(--canon-text-primary); - - &:hover { - color: var(--canon-text-secondary); - } - } - - &.cn-button-small { - padding-left: 6px; - padding-right: 6px; - height: 32px; - } - - &.cn-button-medium { - padding-left: 8px; - padding-right: 8px; - height: 40px; - } - - & .cn-button-content { - display: flex; - align-items: center; - gap: var(--canon-spacing-xs); - font-weight: var(--canon-font-weight-bold); - - &.cn-button-content-icon-both { - flex: 1; - } } } + +.cn-button-secondary { + background-color: transparent; + box-shadow: inset 0 0 0 1px var(--canon-outline); + color: var(--canon-text-primary); + + &:hover { + box-shadow: inset 0 0 0 1px var(--canon-outline-hover); + } +} + +.cn-button-tertiary { + background-color: transparent; + color: var(--canon-text-primary); + + &:hover { + color: var(--canon-text-secondary); + } +} + +.cn-button-small { + padding-left: 6px; + padding-right: 6px; + height: 32px; +} + +.cn-button-medium { + padding-left: 8px; + padding-right: 8px; + height: 40px; +} + +.cn-button-content { + display: flex; + align-items: center; + gap: var(--canon-spacing-xs); + font-weight: var(--canon-font-weight-bold); +} + +.cn-button-content-icon-both { + flex: 1; +}