diff --git a/.storybook/components/checkered-background/CheckeredBackground.css b/.storybook/components/checkered-background/CheckeredBackground.css index dccca7918..fd4e73597 100644 --- a/.storybook/components/checkered-background/CheckeredBackground.css +++ b/.storybook/components/checkered-background/CheckeredBackground.css @@ -1,7 +1,7 @@ .o-ui-sb-checkered-background-preview { - background-size: 30px 30px; + background-size: 1.875rem 1.875rem; background-color: var(--o-ui-bg-alias-surface); /* stylelint-disable-next-line */ background-image: linear-gradient(45deg, var(--o-ui-bg-alias-soft-break) 25%, transparent 25%), linear-gradient(-45deg, var(--o-ui-bg-alias-soft-break) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--o-ui-bg-alias-soft-break) 75%), linear-gradient(-45deg, transparent 75%, var(--o-ui-bg-alias-soft-break) 75%); - background-position: 0 0, 0 15px, 15px -15px, -15px 0; + background-position: 0 0, 0 0.9375rem, 0.9375rem -0.9375rem, -0.9375rem 0; } diff --git a/.storybook/components/component-info/ComponentInfo.css b/.storybook/components/component-info/ComponentInfo.css index 611522bca..20d1ca14a 100644 --- a/.storybook/components/component-info/ComponentInfo.css +++ b/.storybook/components/component-info/ComponentInfo.css @@ -10,7 +10,7 @@ .o-ui-sb-component-info-item { display: flex; align-items: center; - min-height: 28px; + min-height: 1.75rem; } .o-ui-sb-component-info-title { @@ -21,7 +21,7 @@ font-style: normal !important; width: var(--o-ui-sz-11) !important; margin: 0 !important; - min-width: 80px; + min-width: 5rem; } .o-ui-sb-component-info-value { @@ -42,7 +42,7 @@ display: flex; padding: 0; margin: 0; - column-gap: 8px; + column-gap: 0.5rem; } .o-ui-sb-component-info code { diff --git a/.storybook/components/preview/Preview.css b/.storybook/components/preview/Preview.css index 389014d36..d9fff6efc 100644 --- a/.storybook/components/preview/Preview.css +++ b/.storybook/components/preview/Preview.css @@ -18,7 +18,7 @@ /* SOURCE | EDITABLE LABEL */ .o-ui-sb-preview-editable-label { position: absolute; - top: 3px; + top: 0.1875rem; left: 50%; transform: translateX(-50%); color: var(--o-ui-white); @@ -32,7 +32,7 @@ /* SOURCE | EDITOR */ .o-ui-sb-preview-editor { - font-size: 15px; + font-size: 0.9375rem; overflow-x: auto; } @@ -45,7 +45,7 @@ .o-ui-sb-preview-error { background-color: var(--o-ui-bg-alias-alert-light); color: var(--o-ui-text-alias-primary); - font-size: 15px; + font-size: 0.9375rem; padding: var(--o-ui-sp-3) var(--o-ui-sp-5); margin: 0; } diff --git a/.storybook/components/snippet/Snippet.css b/.storybook/components/snippet/Snippet.css index 81466b8e2..ab65e9288 100644 --- a/.storybook/components/snippet/Snippet.css +++ b/.storybook/components/snippet/Snippet.css @@ -4,7 +4,7 @@ .o-ui-sb-snippet pre.prism-code { padding: var(--o-ui-sp-5) !important; - font-size: 15px; + font-size: 0.9375rem; border-radius: var(--o-ui-br-4); overflow-x: auto; margin: 0; diff --git a/.storybook/decorators/withCenteredCanvas.jsx b/.storybook/decorators/withCenteredCanvas.jsx index 66e2aec51..f936172ea 100644 --- a/.storybook/decorators/withCenteredCanvas.jsx +++ b/.storybook/decorators/withCenteredCanvas.jsx @@ -22,7 +22,7 @@ export function withCenteredCanvas(story, context) {
{story()} diff --git a/.storybook/preview.js b/.storybook/preview.js index 11ac4dab7..ce3dbdf50 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -69,35 +69,35 @@ export const parameters = { xs: { name: "xs (640px)", styles: { - width: "640px", + width: "40rem", height: "100%" } }, sm: { name: "sm (768px)", styles: { - width: "768px", + width: "48rem", height: "100%" } }, md: { name: "md (1024px)", styles: { - width: "1024px", + width: "64rem", height: "100%" } }, lg: { name: "lg (1280px)", styles: { - width: "1280px", + width: "80rem", height: "100%" } }, xl: { name: "xl (1536px)", styles: { - width: "1536px", + width: "96rem", height: "100%" } } diff --git a/.storybook/styles/app.css b/.storybook/styles/app.css index 3c647dd1a..b6bc2feb1 100644 --- a/.storybook/styles/app.css +++ b/.storybook/styles/app.css @@ -2,5 +2,4 @@ html, body { font-family: "TT Interphases Variable", Arial, Helvetica, serif !important; -webkit-font-smoothing: antialiased; - font-size: 16px; } diff --git a/.storybook/styles/docs.css b/.storybook/styles/docs.css index e49a67e6f..4c3e546e7 100644 --- a/.storybook/styles/docs.css +++ b/.storybook/styles/docs.css @@ -9,7 +9,7 @@ } .sbdocs.sbdocs-content { - max-width: 1280px; + max-width: 80rem; font-size: var(--o-ui-fs-4); } @@ -21,7 +21,7 @@ /* ARGS TABLE */ .docblock-argstable { - min-width: 220px; + min-width: 13.75rem; margin-bottom: 0; } @@ -72,7 +72,7 @@ } .docblock-argstable-body td label input[type=radio]:focus { - outline-offset: 1px; + outline-offset: 0.0625rem; } .docblock-argstable-body td label span { @@ -98,13 +98,13 @@ color: var(--o-ui-accent-6) !important; font-family: var(--orbit-font-family) !important; font-size: var(--o-ui-fs-2) !important; - padding-left: 2px !important; + padding-left: 0.125rem !important; } /* EMPTY BLOCK */ .docblock-emptyblock { color: var(--o-ui-neutral-6) !important; - border: 1px dashed var(--o-ui-neutral-2) !important; + border: 0.0625rem dashed var(--o-ui-neutral-2) !important; } .docblock-emptyblock a { @@ -114,7 +114,7 @@ /* SOURCE BLOCK */ .docblock-source { margin-top: var(--o-ui-sp-7) !important; - margin-bottom: 35px !important; + margin-bottom: 2.1875rem !important; } .sbdocs.sbdocs-preview, @@ -171,7 +171,7 @@ } .sbdocs.sbdocs-h2 { - border-bottom: 1px solid var(--o-ui-neutral-2); + border-bottom: 0.0625rem solid var(--o-ui-neutral-2); } .sbdocs.sbdocs-h2, @@ -209,7 +209,7 @@ border: none !important; border-radius: 0 !important; background-color: transparent !important; - font-size: 15px !important; + font-size: 0.9375rem !important; } /* ELEMENTS | LINK */ @@ -233,7 +233,7 @@ .sbdocs.sbdocs-a:focus { border-radius: var(--o-ui-br-4); background-color: rgba(0, 0, 0, 0.04); - box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04); + box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.04); } .sbdocs .sbdocs-a code { @@ -250,7 +250,7 @@ /* ELEMENTS | TABLE */ .sbdocs.sbdocs-table tr { - border-top: 1px solid var(--o-ui-neutral-2); + border-top: 0.0625rem solid var(--o-ui-neutral-2); } .sbdocs.sbdocs-table .thead tr th { @@ -259,9 +259,9 @@ } .sbdocs.sbdocs-table thead tr { - border-top: 1px solid var(--o-ui-b-alias-low-break); - border-left: 1px solid var(--o-ui-b-alias-low-break); - border-right: 1px solid var(--o-ui-b-alias-low-break); + border-top: 0.0625rem solid var(--o-ui-b-alias-low-break); + border-left: 0.0625rem solid var(--o-ui-b-alias-low-break); + border-right: 0.0625rem solid var(--o-ui-b-alias-low-break); color: var(--o-ui-text-alias-primary); } @@ -277,8 +277,8 @@ .sbdocs.sbdocs-table tr td, .sbdocs.sbdocs-table tr th { - border-top: 1px solid var(--o-ui-b-alias-low-break); - border-bottom: 1px solid var(--o-ui-b-alias-low-break); + border-top: 0.0625rem solid var(--o-ui-b-alias-low-break); + border-bottom: 0.0625rem solid var(--o-ui-b-alias-low-break); border-left: 0; border-right: 0; color: var(--o-ui-text-alias-primary); @@ -286,7 +286,7 @@ } .sbdocs.sbdocs-table tbody { - border: 1px solid var(--o-ui-b-alias-low-break); + border: 0.0625rem solid var(--o-ui-b-alias-low-break); } .sbdocs.sbdocs-table a { @@ -319,7 +319,7 @@ } .sb-show-main details { - padding: 8px; + padding: 0.5rem; border-radius: var(--o-ui-br-4); background-color: var(--o-ui-purple-1); } @@ -337,12 +337,12 @@ /* ELEMENTS | KBD */ .sbdocs kbd { line-height: var(--o-ui-lh-1); - margin: 0 2px; - padding: 3px 5px; + margin: 0 0.125rem; + padding: 0.8125rem 0.3125rem; white-space: nowrap; - border-radius: 3px; - font-size: 13px; - border: 1px solid #EEEEEE; + border-radius: 0.8125rem; + font-size: 0.8125rem; + border: 0.0625rem solid #EEEEEE; color: rgba(51, 51, 51, 0.9); background-color: #F8F8F8; } @@ -360,7 +360,7 @@ /* ELEMENTS | LINK ICON */ .sbdocs.sbdocs-h1 a { - margin-left: -28px; + margin-left: -1.75rem; } .sbdocs.sbdocs-h1 a svg { @@ -393,8 +393,8 @@ position: absolute; top: 50%; left: 50%; - border-radius: 50px; - border: 2px solid var(--o-ui-b-alias-low-break); + border-radius: var(--o-ui-br-circular); + border: 0.125rem solid var(--o-ui-b-alias-low-break); border-top-color: var(--o-ui-white); animation: o-ui-sb-spinner 1s linear infinite; transform: translate(-50%, -50%) rotate(0deg); @@ -411,11 +411,11 @@ /* Token Specific Styles */ .token-table tr td:last-child { - padding: 0 0 0 13px !important; + padding: 0 0 0 0.8125rem !important; } /* HACK OVERRIDES - INPUT */ -@media screen and (max-width: 420px) { +@media screen and (max-width: 26.25rem) { .sbdocs .o-ui .o-ui-input { width: 100%; } diff --git a/.storybook/styles/stories.css b/.storybook/styles/stories.css index 3c47955f2..2a922aa72 100644 --- a/.storybook/styles/stories.css +++ b/.storybook/styles/stories.css @@ -7,7 +7,7 @@ } .border-red { - border: 1px solid red !important; + border: 0.0625rem solid red !important; } .red { @@ -31,7 +31,7 @@ } .border-blue { - border: 1px solid blue !important; + border: 0.0625rem solid blue !important; } .fill-blue { diff --git a/docs/features/ResponsiveStyles.stories.mdx b/docs/features/ResponsiveStyles.stories.mdx index 68c4e14c3..26898adc9 100644 --- a/docs/features/ResponsiveStyles.stories.mdx +++ b/docs/features/ResponsiveStyles.stories.mdx @@ -47,18 +47,18 @@ The following responsive breakpoints are supported by Orbit [style props](?path= diff --git a/docs/features/style-props/PropsReferenceTable.jsx b/docs/features/style-props/PropsReferenceTable.jsx index 3c4c385b6..dbfabb52d 100644 --- a/docs/features/style-props/PropsReferenceTable.jsx +++ b/docs/features/style-props/PropsReferenceTable.jsx @@ -30,11 +30,11 @@ export function PropsReferenceTable({ rows }) { return (
toRowValues(x))} /> diff --git a/docs/features/style-props/StyleProps.stories.mdx b/docs/features/style-props/StyleProps.stories.mdx index 7d434ed2c..80314b999 100644 --- a/docs/features/style-props/StyleProps.stories.mdx +++ b/docs/features/style-props/StyleProps.stories.mdx @@ -68,16 +68,16 @@ Since the following user action pseudo-classes are often used, some style props
@@ -373,7 +373,7 @@ Border props (border, borderBottom, borderTop, borderRight, borderLeft) uses an ```jsx
``` diff --git a/docs/features/theming/ThemeSpecificationTable.jsx b/docs/features/theming/ThemeSpecificationTable.jsx index db2167285..f63864bac 100644 --- a/docs/features/theming/ThemeSpecificationTable.jsx +++ b/docs/features/theming/ThemeSpecificationTable.jsx @@ -33,9 +33,9 @@ export function ThemeSpecificationTable({ rows, ...rest }) {
toRowValues(x))} /> diff --git a/docs/features/theming/Theming.stories.mdx b/docs/features/theming/Theming.stories.mdx index 59e91d30d..9afe8458f 100644 --- a/docs/features/theming/Theming.stories.mdx +++ b/docs/features/theming/Theming.stories.mdx @@ -32,8 +32,8 @@ An Orbit theme object is composed of the following *8 keys*: ["borderRadii", "border-radius", "border-radius-scale"] ]} style={{ - marginTop: "24px", - marginBottom: "24px" + marginTop: "1.5rem", + marginBottom: "1.5rem" }} /> @@ -43,8 +43,8 @@ When rendered with the `createThemeVars` function, the following CSS variables w
diff --git a/docs/features/tokens/ColorPaletteTable.jsx b/docs/features/tokens/ColorPaletteTable.jsx index 9adfa6141..0d3c62410 100644 --- a/docs/features/tokens/ColorPaletteTable.jsx +++ b/docs/features/tokens/ColorPaletteTable.jsx @@ -24,10 +24,10 @@ export function ColorPaletteTable({ colors }) { return (
toRowValues(x))} /> diff --git a/docs/features/tokens/TokenTable.jsx b/docs/features/tokens/TokenTable.jsx index f98b0dec2..a2abcff2a 100644 --- a/docs/features/tokens/TokenTable.jsx +++ b/docs/features/tokens/TokenTable.jsx @@ -40,10 +40,10 @@ export function TokenTable({ colors }) {
toRowValues(x, docsContext))} /> diff --git a/docs/materials/motion/Motion.stories.mdx b/docs/materials/motion/Motion.stories.mdx index 3bccacf5c..0578dc5af 100644 --- a/docs/materials/motion/Motion.stories.mdx +++ b/docs/materials/motion/Motion.stories.mdx @@ -48,8 +48,8 @@ Orbit exposes 5 [durations](?path=/docs/tokens--page#durations), they help conve
Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System. - + -

Mars

- Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System. +

Mars

+ Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System. diff --git a/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite.jsx b/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite.jsx index f3279615c..1f2c5eb2e 100644 --- a/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite.jsx +++ b/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite.jsx @@ -168,7 +168,7 @@ export function createAccordionTestSuite(element, stories) { ) .add("narrow container", () => -
+

Mars

@@ -254,7 +254,7 @@ export function createAccordionTestSuite(element, stories) { style: { backgroundColor: expandedKeys.includes(key) ? "blue" : "red" }, header, headingType: H1, - headingProps: { padding: "10px" } + headingProps: { padding: "0.625rem" } } )} > diff --git a/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx b/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx index 581569b06..94484cc17 100644 --- a/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx +++ b/packages/components/src/alert/tests/chromatic/Alert.chroma.jsx @@ -40,9 +40,9 @@ stories() .add("styles", () => - Launch - Are you sure you want to launch the space shuttle? + Launch + Are you sure you want to launch the space shuttle? ); diff --git a/packages/components/src/autocomplete/src/Autocomplete.css b/packages/components/src/autocomplete/src/Autocomplete.css index cf2adb778..4483d37e5 100644 --- a/packages/components/src/autocomplete/src/Autocomplete.css +++ b/packages/components/src/autocomplete/src/Autocomplete.css @@ -6,7 +6,7 @@ overflow: hidden; display: inline-flex; align-items: center; - border: 1px solid var(--o-ui-b-alias-low-break); + border: 0.0625rem solid var(--o-ui-b-alias-low-break); border-radius: var(--o-ui-br-2); box-shadow: var(--o-ui-bs-alias-floating); background-color: var(--o-ui-bg-alias-surface); @@ -14,6 +14,6 @@ padding-left: var(--o-ui-sp-3); position: relative; cursor: default; - height: calc(var(--o-ui-sz-5) + 2px); + height: calc(var(--o-ui-sz-5) + 0.125rem); min-width: 100%; } diff --git a/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx b/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx index fc9dd7830..910dd1cb2 100644 --- a/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx +++ b/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx @@ -414,7 +414,7 @@ export const CustomTriggerWidth: AutocompleteStory = { export const CustomMenuWidth: AutocompleteStory = { storyName: "custom menu width", render: () => ( - + Earth Mars Saturn @@ -447,9 +447,9 @@ export const DirectionTop: AutocompleteStory = { export const AlignStart: AutocompleteStory = { storyName: "align start", - decorators: [Story =>
], + decorators: [Story =>
], render: () => ( - + Earth Mars Saturn @@ -459,9 +459,9 @@ export const AlignStart: AutocompleteStory = { export const AlignEnd: AutocompleteStory = { storyName: "align end", - decorators: [Story =>
], + decorators: [Story =>
], render: () => ( - + Earth Mars Saturn @@ -516,7 +516,7 @@ export const Styling: AutocompleteStory = { Jupiter Mars - + Earth Jupiter Mars diff --git a/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx b/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx index e5d9af843..0c604cda2 100644 --- a/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx +++ b/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx @@ -121,7 +121,7 @@ export const Styling: AvatarStory = { - + ) }; diff --git a/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx b/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx index fdbf71bfd..4072d8656 100644 --- a/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx +++ b/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx @@ -223,7 +223,7 @@ export const Styling: AvatarGroupStory = { - + diff --git a/packages/components/src/badge/docs/Circle.jsx b/packages/components/src/badge/docs/Circle.jsx index 77d4bcd01..9221bb849 100644 --- a/packages/components/src/badge/docs/Circle.jsx +++ b/packages/components/src/badge/docs/Circle.jsx @@ -1,5 +1,5 @@ import { Div } from "@components/html"; export function Circle() { - return
; + return
; } diff --git a/packages/components/src/badge/docs/Square.jsx b/packages/components/src/badge/docs/Square.jsx index 3d9903fd6..2f264500e 100644 --- a/packages/components/src/badge/docs/Square.jsx +++ b/packages/components/src/badge/docs/Square.jsx @@ -1,5 +1,5 @@ import { Div } from "@components/html"; export function Square() { - return
; + return
; } diff --git a/packages/components/src/badge/tests/chromatic/BadgeCount.stories.tsx b/packages/components/src/badge/tests/chromatic/BadgeCount.stories.tsx index 96a5b0e3b..a74bd6ddd 100644 --- a/packages/components/src/badge/tests/chromatic/BadgeCount.stories.tsx +++ b/packages/components/src/badge/tests/chromatic/BadgeCount.stories.tsx @@ -80,7 +80,7 @@ export const Styling: BadgeStory = { 100 - + 100 diff --git a/packages/components/src/badge/tests/chromatic/BadgeDot.stories.tsx b/packages/components/src/badge/tests/chromatic/BadgeDot.stories.tsx index 23933f188..d79cc8244 100644 --- a/packages/components/src/badge/tests/chromatic/BadgeDot.stories.tsx +++ b/packages/components/src/badge/tests/chromatic/BadgeDot.stories.tsx @@ -35,7 +35,7 @@ export const Styling: BadgeStory = { - + ) }; diff --git a/packages/components/src/badge/tests/chromatic/BadgeIcon.stories.tsx b/packages/components/src/badge/tests/chromatic/BadgeIcon.stories.tsx index f9aa2b84d..9b37dd2f2 100644 --- a/packages/components/src/badge/tests/chromatic/BadgeIcon.stories.tsx +++ b/packages/components/src/badge/tests/chromatic/BadgeIcon.stories.tsx @@ -50,7 +50,7 @@ export const Styling: BadgeStory = { - + diff --git a/packages/components/src/badge/tests/chromatic/BadgeUtils.tsx b/packages/components/src/badge/tests/chromatic/BadgeUtils.tsx index 661229700..712117a86 100644 --- a/packages/components/src/badge/tests/chromatic/BadgeUtils.tsx +++ b/packages/components/src/badge/tests/chromatic/BadgeUtils.tsx @@ -21,7 +21,7 @@ export function CircleBadge({ children, ...rest }: BadgeUtilsProps) { overlap="circle" > {children} -
+
); } diff --git a/packages/components/src/badge/tests/jest/Badge.ssr.test.tsx b/packages/components/src/badge/tests/jest/Badge.ssr.test.tsx index bb3ecb6c6..94917fe61 100644 --- a/packages/components/src/badge/tests/jest/Badge.ssr.test.tsx +++ b/packages/components/src/badge/tests/jest/Badge.ssr.test.tsx @@ -15,7 +15,7 @@ const SquareBadge = forwardRef(({ children, ...rest }, ref={ref} > {children} -
+
); }); diff --git a/packages/components/src/badge/tests/jest/Badge.test.tsx b/packages/components/src/badge/tests/jest/Badge.test.tsx index ee2aa11ce..4c79f549f 100644 --- a/packages/components/src/badge/tests/jest/Badge.test.tsx +++ b/packages/components/src/badge/tests/jest/Badge.test.tsx @@ -11,7 +11,7 @@ const SquareBadge = forwardRef(({ children, ...rest }, ref={ref} > {children} -
+
); }); diff --git a/packages/components/src/button/src/Button.css b/packages/components/src/button/src/Button.css index 7efbafed1..e149eba7a 100644 --- a/packages/components/src/button/src/Button.css +++ b/packages/components/src/button/src/Button.css @@ -126,15 +126,15 @@ a.o-ui-button { /* SECONDARY */ .o-ui-button-secondary { - border: 1px solid var(--o-ui-b-alias-mid-break); + border: 0.0625rem solid var(--o-ui-b-alias-mid-break); color: var(--o-ui-text-alias-primary); } .o-ui-button-secondary:after { - top: -1px; - left: -1px; - right: -1px; - bottom: -1px; + top: -0.0625rem; + left: -0.0625rem; + right: -0.0625rem; + bottom: -0.0625rem; } /* SECONDARY | HOVER */ @@ -156,7 +156,7 @@ a.o-ui-button { /* TERTIARY */ .o-ui-button-tertiary { background-color: var(--o-ui-transparent); - border: 1px solid transparent; + border: 0.0625rem solid transparent; color: var(--o-ui-text-alias-primary); } @@ -246,8 +246,8 @@ a.o-ui-button { .o-ui-button-loading:before { content: ""; - border-radius: 50px; - border: 2px solid var(--o-ui-b-alias-low-break); + border-radius: var(--o-ui-br-circular); + border: 0.125rem solid var(--o-ui-b-alias-low-break); border-top-color: var(--o-ui-b-alias-high-break); animation: o-ui-button-spinner 1s linear infinite; transform: rotate(0deg); @@ -268,7 +268,7 @@ a.o-ui-button { /* LOADING | SOLID */ .o-ui-button-loading.o-ui-button-solid:before { - border: solid 2px var(--o-ui-button-loading-spinner-background); + border: solid 0.125rem var(--o-ui-button-loading-spinner-background); border-top-color: var(--o-ui-white); } @@ -332,14 +332,14 @@ a.o-ui-button { /* INHERIT | SECONDARY */ .o-ui-button-inherit-style.o-ui-button-secondary { color: inherit; - border: 1px solid currentColor; + border: 0.0625rem solid currentColor; } .o-ui-button:hover:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary, .o-ui-button-hover:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary { background-color: rgba(0, 0, 0, 0.1); color: inherit; - border: 1px solid currentColor; + border: 0.0625rem solid currentColor; } /* INHERIT | SECONDARY | ACTIVE */ @@ -353,7 +353,7 @@ a.o-ui-button { .o-ui-button-active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic { background-color: rgba(0, 0, 0, 0.15); color: inherit; - border: 1px solid currentColor; + border: 0.0625rem solid currentColor; } .o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-text, diff --git a/packages/components/src/card/docs/Card.stories.mdx b/packages/components/src/card/docs/Card.stories.mdx index 2ca72ad42..353fa7aa2 100644 --- a/packages/components/src/card/docs/Card.stories.mdx +++ b/packages/components/src/card/docs/Card.stories.mdx @@ -89,7 +89,7 @@ Or an [illustration](?path=/docs/illustration--horizontal): - + NASA Headquarters diff --git a/packages/components/src/card/src/Card.css b/packages/components/src/card/src/Card.css index 0fc21491a..eea4d458b 100644 --- a/packages/components/src/card/src/Card.css +++ b/packages/components/src/card/src/Card.css @@ -10,7 +10,7 @@ } .o-ui-card-outline { - border: 1px solid var(--o-ui-b-alias-low-break); + border: 0.0625rem solid var(--o-ui-b-alias-low-break); border-radius: var(--o-ui-br-3); } @@ -82,7 +82,7 @@ align-items: center; justify-self: end; flex-shrink: 0; - max-width: 200px; + max-width: 12.5rem; width: max-content; } diff --git a/packages/components/src/card/tests/chromatic/Card.chroma.jsx b/packages/components/src/card/tests/chromatic/Card.chroma.jsx index 8d95d08a7..e14deea21 100644 --- a/packages/components/src/card/tests/chromatic/Card.chroma.jsx +++ b/packages/components/src/card/tests/chromatic/Card.chroma.jsx @@ -46,7 +46,7 @@ stories() Nasa The National Aeronautics and Space Administration - + Nasa The National Aeronautics and Space Administration @@ -60,7 +60,7 @@ stories() The National Aeronautics and Space Administration - + Nasa The National Aeronautics and Space Administration @@ -74,7 +74,7 @@ stories() The National Aeronautics and Space Administration - + Nasa The National Aeronautics and Space Administration diff --git a/packages/components/src/card/tests/chromatic/createTestSuite.jsx b/packages/components/src/card/tests/chromatic/createTestSuite.jsx index 3cdee8167..34c71e198 100644 --- a/packages/components/src/card/tests/chromatic/createTestSuite.jsx +++ b/packages/components/src/card/tests/chromatic/createTestSuite.jsx @@ -125,13 +125,13 @@ export function createTestSuite(element, stories) { .add("illustration 2", () => - + Nasa The National Aeronautics and Space Administration - + @@ -529,7 +529,7 @@ export function createTestSuite(element, stories) { .add("all sections 2", () => - + Nasa
diff --git a/packages/components/src/checkbox/src/Checkbox.css b/packages/components/src/checkbox/src/Checkbox.css index e82ddbdd0..76df48b88 100644 --- a/packages/components/src/checkbox/src/Checkbox.css +++ b/packages/components/src/checkbox/src/Checkbox.css @@ -1,7 +1,3 @@ -.o-ui { - --o-ui-checkbox-indeterminate-stroke-width: 5px; -} - .o-ui-checkbox { outline: transparent; display: inline-flex; @@ -22,7 +18,7 @@ display: inline-block; width: var(--o-ui-sz-3); height: var(--o-ui-sz-3); - border: 1px solid var(--o-ui-b-alias-mid-break); + border: 0.0625rem solid var(--o-ui-b-alias-mid-break); background-color: var(--o-ui-bg-alias-surface); border-radius: var(--o-ui-br-2); transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive); @@ -33,10 +29,10 @@ .o-ui-checkbox-box:before { opacity: 0; content: ""; - top: -1px; - left: -1px; - right: -1px; - bottom: -1px; + top: -0.0625rem; + left: -0.0625rem; + right: -0.0625rem; + bottom: -0.0625rem; display: block; position: absolute; box-shadow: 0 0 0 var(--o-ui-focus-ring-thickness-md) var(--o-ui-focus-ring-color-alias-default); @@ -110,21 +106,21 @@ } .o-ui-checkbox-invalid .o-ui-checkbox-box { - border: 1px solid var(--o-ui-b-alias-alert); + border: 0.0625rem solid var(--o-ui-b-alias-alert); } .o-ui-checkbox-checked.o-ui-checkbox-invalid .o-ui-checkbox-box { background-color: var(--o-ui-bg-alias-alert); - border: 1px solid var(--o-ui-b-alias-alert); + border: 0.0625rem solid var(--o-ui-b-alias-alert); } .o-ui-checkbox.o-ui-checkbox-invalid:hover .o-ui-checkbox-box { - border: 1px solid var(--o-ui-b-alias-alert); + border: 0.0625rem solid var(--o-ui-b-alias-alert); } /* STATE | CHECKED */ .o-ui-checkbox-checked .o-ui-checkbox-box { - border: 1px solid var(--o-ui-bg-alias-accent); + border: 0.0625rem solid var(--o-ui-bg-alias-accent); background-color: var(--o-ui-bg-alias-accent); } @@ -149,13 +145,13 @@ /* STATE | ACTIVE */ .o-ui-checkbox:not(.o-ui-checkbox-checked) input[type="checkbox"]:active:not([disabled]) + .o-ui-checkbox-box, .o-ui-checkbox:not(.o-ui-checkbox-checked).o-ui-checkbox-active input[type="checkbox"]:not([disabled]) + .o-ui-checkbox-box { - border: 1px solid var(--o-ui-b-alias-high-break); + border: 0.0625rem solid var(--o-ui-b-alias-high-break); } /* STATE | HOVER */ .o-ui-checkbox:hover:not(.o-ui-checkbox-checked) > input[type="checkbox"]:not([disabled]) + .o-ui-checkbox-box, .o-ui-checkbox-hover:not(.o-ui-checkbox-checked):not(.o-ui-checkbox-disabled) .o-ui-checkbox-box { - border: 1px solid var(--o-ui-b-alias-high-break); + border: 0.0625rem solid var(--o-ui-b-alias-high-break); } /* STATE | HOVER | CHECKED | FOCUS | BOX */ diff --git a/packages/components/src/counter/src/Counter.css b/packages/components/src/counter/src/Counter.css index 0036e5309..bb4be3d64 100644 --- a/packages/components/src/counter/src/Counter.css +++ b/packages/components/src/counter/src/Counter.css @@ -44,7 +44,7 @@ left: 0; bottom: 0; height: 80%; - border-left: 1px solid currentColor; + border-left: 0.0625rem solid currentColor; opacity: 0.4; } @@ -56,7 +56,7 @@ .o-ui-counter-divider.o-ui-counter-reverse::before { border-left: 0; - border-right: 1px solid currentColor; + border-right: 0.0625rem solid currentColor; } /* DIVIDER | COLOR | INHERIT */ diff --git a/packages/components/src/date-input/src/DateInput.css b/packages/components/src/date-input/src/DateInput.css index a294981ec..276783ff2 100644 --- a/packages/components/src/date-input/src/DateInput.css +++ b/packages/components/src/date-input/src/DateInput.css @@ -1,5 +1,5 @@ .o-ui-date-input { - width: 160px; + width: 10rem; } /* BUTTON PRESETS */ @@ -23,5 +23,5 @@ /* IN GROUP */ .o-ui-date-input-in-group { - width: 140px; + width: 8.75rem; } diff --git a/packages/components/src/date-input/src/DateRangeInput.css b/packages/components/src/date-input/src/DateRangeInput.css index c48044935..7e99fcf75 100644 --- a/packages/components/src/date-input/src/DateRangeInput.css +++ b/packages/components/src/date-input/src/DateRangeInput.css @@ -10,7 +10,7 @@ /* For clear button */ padding-right: var(--o-ui-sp-7); border-radius: var(--o-ui-br-2); - border: 1px solid var(--o-ui-date-range-input-border-color); + border: 0.0625rem solid var(--o-ui-date-range-input-border-color); color: var(--o-ui-text-alias-primary); background-color: var(--o-ui-bg-alias-surface); } @@ -84,7 +84,7 @@ outline: transparent; transition: all .12s ease-in, padding 0s linear; width: 100%; - min-height: calc(var(--o-ui-sz-6) - 2px); + min-height: calc(var(--o-ui-sz-6) - 0.125rem); background-color: transparent; } @@ -102,7 +102,7 @@ .o-ui-date-range-input-divider[aria-orientation="vertical"] { flex-shrink: 0; align-self: auto; - height: 25px !important; + height: 1.5625rem !important; } /* CLEAR BUTTON */ @@ -130,5 +130,5 @@ /* IN GROUP */ .o-ui-date-range-input-in-group:not(.o-ui-date-range-input-fluid) { width: 100%; - max-width: 300px; + max-width: 18.75rem; } diff --git a/packages/components/src/date-input/tests/chromatic/createDateInputTestSuite.jsx b/packages/components/src/date-input/tests/chromatic/createDateInputTestSuite.jsx index da5d58027..14c646933 100644 --- a/packages/components/src/date-input/tests/chromatic/createDateInputTestSuite.jsx +++ b/packages/components/src/date-input/tests/chromatic/createDateInputTestSuite.jsx @@ -81,9 +81,9 @@ export function createDateInputTestSuite(element, stories) { - + - + ); } diff --git a/packages/components/src/date-input/tests/chromatic/createDateRangeInputTestSuite.jsx b/packages/components/src/date-input/tests/chromatic/createDateRangeInputTestSuite.jsx index 1ffeb14c1..16a99181b 100644 --- a/packages/components/src/date-input/tests/chromatic/createDateRangeInputTestSuite.jsx +++ b/packages/components/src/date-input/tests/chromatic/createDateRangeInputTestSuite.jsx @@ -79,7 +79,7 @@ export function createDateRangeInputTestSuite(element, stories) { - + ); } diff --git a/packages/components/src/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css index 1c73fe853..224e4c605 100644 --- a/packages/components/src/dialog/src/Dialog.css +++ b/packages/components/src/dialog/src/Dialog.css @@ -29,7 +29,7 @@ grid-template-rows: min-content auto; } -@media screen and (min-width: 768px) { +@media screen and (min-width: 48rem) { .o-ui-dialog { grid-template-rows: unset; grid-template-areas: "image aside"; @@ -48,15 +48,15 @@ /* DIALOG | SIZES */ .o-ui-dialog-sm { - width: 544px; + width: 34rem; } .o-ui-dialog-md { - width: 800px; + width: 50rem; } .o-ui-dialog-lg { - width: 960px; + width: 60rem; } /* DIALOG | IMAGE & ILLUSTRATION */ @@ -68,7 +68,7 @@ overflow: hidden; } -@media screen and (min-width: 768px) { +@media screen and (min-width: 48rem) { .o-ui-dialog-image, .o-ui-dialog-illustration { width: var(--o-ui-sz-15); diff --git a/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx b/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx index a4f41d049..d902e9562 100644 --- a/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx +++ b/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx @@ -446,7 +446,7 @@ export const WrapperClassName: DialogStory = { export const WrapperStyle: DialogStory = { storyName: "wrapper style", render: () => ( - + Iconic Arecibo Observatory collapses This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." @@ -520,7 +520,7 @@ export const ZoomOut: DialogStory = { export const Style: DialogStory = { storyName: "style", render: () => ( - + Iconic Arecibo Observatory collapses This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." diff --git a/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.stories.tsx b/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.stories.tsx index 702d3183f..c32ff4ed6 100644 --- a/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.stories.tsx +++ b/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.stories.tsx @@ -50,7 +50,7 @@ export const Styling:DisclosureArrowStory = { render: () => ( - + ) }; diff --git a/packages/components/src/divider/docs/Divider.stories.mdx b/packages/components/src/divider/docs/Divider.stories.mdx index 165287f07..3e77b5ca9 100644 --- a/packages/components/src/divider/docs/Divider.stories.mdx +++ b/packages/components/src/divider/docs/Divider.stories.mdx @@ -62,7 +62,7 @@ Or vertically: -
+
Last 30 days
diff --git a/packages/components/src/divider/src/Divider.css b/packages/components/src/divider/src/Divider.css index b0fe4d581..8b1c8bd0d 100644 --- a/packages/components/src/divider/src/Divider.css +++ b/packages/components/src/divider/src/Divider.css @@ -16,7 +16,7 @@ } .o-ui-divider[aria-orientation="horizontal"]:not(.o-ui-divider-has-label) { - border-bottom: 1px solid var(--o-ui-b-alias-low-break); + border-bottom: 0.0625rem solid var(--o-ui-b-alias-low-break); } /* LABELLED */ @@ -29,7 +29,7 @@ .o-ui-divider-has-label[aria-orientation="horizontal"]::after { content: ""; flex: 1; - border-bottom: 1px solid var(--o-ui-b-alias-low-break); + border-bottom: 0.0625rem solid var(--o-ui-b-alias-low-break); } .o-ui-divider-has-label[aria-orientation="horizontal"]::before { @@ -50,7 +50,7 @@ } .o-ui-divider[aria-orientation="vertical"]:not(.o-ui-divider-has-label) { - border-left: 1px solid var(--o-ui-b-alias-low-break); + border-left: 0.0625rem solid var(--o-ui-b-alias-low-break); } /* VERTICAL | LABELLED */ @@ -62,7 +62,7 @@ .o-ui-divider-has-label[aria-orientation="vertical"]::after { content: ""; flex: 1; - border-left: 1px solid var(--o-ui-b-alias-low-break); + border-left: 0.0625rem solid var(--o-ui-b-alias-low-break); } .o-ui-divider-has-label[aria-orientation="vertical"]::before { diff --git a/packages/components/src/divider/tests/chromatic/Divider.stories.tsx b/packages/components/src/divider/tests/chromatic/Divider.stories.tsx index c4c3b1a2d..c0eba1823 100644 --- a/packages/components/src/divider/tests/chromatic/Divider.stories.tsx +++ b/packages/components/src/divider/tests/chromatic/Divider.stories.tsx @@ -89,7 +89,7 @@ export const Styling: DividerStory = { - + ) }; diff --git a/packages/components/src/divider/tests/chromatic/DividerVertical.stories.tsx b/packages/components/src/divider/tests/chromatic/DividerVertical.stories.tsx index a3ed04c7b..a084486d8 100644 --- a/packages/components/src/divider/tests/chromatic/DividerVertical.stories.tsx +++ b/packages/components/src/divider/tests/chromatic/DividerVertical.stories.tsx @@ -106,7 +106,7 @@ export const Styling: DividerStory = { - + ) }; diff --git a/packages/components/src/dot/tests/chromatic/Dot.stories.tsx b/packages/components/src/dot/tests/chromatic/Dot.stories.tsx index 59f82f186..c28dabde6 100644 --- a/packages/components/src/dot/tests/chromatic/Dot.stories.tsx +++ b/packages/components/src/dot/tests/chromatic/Dot.stories.tsx @@ -61,12 +61,12 @@ export const Styling: DotStory = { - + Habitable Habitable - Habitable + Habitable ) diff --git a/packages/components/src/field/tests/chromatic/Field.stories.tsx b/packages/components/src/field/tests/chromatic/Field.stories.tsx index 206c99abf..12c6c14a9 100644 --- a/packages/components/src/field/tests/chromatic/Field.stories.tsx +++ b/packages/components/src/field/tests/chromatic/Field.stories.tsx @@ -301,7 +301,7 @@ export const Styling: FieldStory = { - + diff --git a/packages/components/src/field/tests/chromatic/GroupField.stories.tsx b/packages/components/src/field/tests/chromatic/GroupField.stories.tsx index 7700e0c18..637f7043d 100644 --- a/packages/components/src/field/tests/chromatic/GroupField.stories.tsx +++ b/packages/components/src/field/tests/chromatic/GroupField.stories.tsx @@ -120,7 +120,7 @@ export const Styling: GroupFieldStory = { 3 - + 1 2 diff --git a/packages/components/src/form/tests/chromatic/Fieldset.stories.tsx b/packages/components/src/form/tests/chromatic/Fieldset.stories.tsx index b0b538761..aabeac110 100644 --- a/packages/components/src/form/tests/chromatic/Fieldset.stories.tsx +++ b/packages/components/src/form/tests/chromatic/Fieldset.stories.tsx @@ -166,7 +166,7 @@ export const Styling: FieldsetStory = { -
+
diff --git a/packages/components/src/form/tests/chromatic/Form.stories.tsx b/packages/components/src/form/tests/chromatic/Form.stories.tsx index 52f302abc..42be047c1 100644 --- a/packages/components/src/form/tests/chromatic/Form.stories.tsx +++ b/packages/components/src/form/tests/chromatic/Form.stories.tsx @@ -222,7 +222,7 @@ export const Styling: FormStory = { -
+ diff --git a/packages/components/src/html/tests/chromatic/html.stories.tsx b/packages/components/src/html/tests/chromatic/html.stories.tsx index 516152ecf..401a7f7c6 100644 --- a/packages/components/src/html/tests/chromatic/html.stories.tsx +++ b/packages/components/src/html/tests/chromatic/html.stories.tsx @@ -45,7 +45,7 @@ export const Styling: StyleProviderStory = { Google Google - Google + Google ) }; diff --git a/packages/components/src/html/tests/typescript/html.tsx b/packages/components/src/html/tests/typescript/html.tsx index 60146b487..28e6433a4 100644 --- a/packages/components/src/html/tests/typescript/html.tsx +++ b/packages/components/src/html/tests/typescript/html.tsx @@ -6,9 +6,9 @@ type AProps = ComponentProps; expectAssignable({ href: "https://www.google.com", rel: "external", target: "_blank" }); -expectAssignable({ width: "100px", display: "block", color: "red" }); +expectAssignable({ width: "6.25rem", display: "block", color: "red" }); -expectAssignable({ className: "toto", style: { border: "1px solid red" } }); +expectAssignable({ className: "toto", style: { border: "0.0625rem solid red" } }); expectAssignable({ ref: createRef() }); diff --git a/packages/components/src/icons/tests/chromatic/IconList.stories.tsx b/packages/components/src/icons/tests/chromatic/IconList.stories.tsx index 8a0f93f5f..53e0de0d1 100644 --- a/packages/components/src/icons/tests/chromatic/IconList.stories.tsx +++ b/packages/components/src/icons/tests/chromatic/IconList.stories.tsx @@ -32,7 +32,7 @@ export const Styling: IconListStory = { - + ) }; diff --git a/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage.stories.tsx b/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage.stories.tsx index 95ea6d701..b57d45420 100644 --- a/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage.stories.tsx +++ b/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage.stories.tsx @@ -20,7 +20,7 @@ export const Default: IllustratedMessageStory = { storyName: "default", render: () => ( - + Can't find "Saturn" Try searching for something else. @@ -31,12 +31,12 @@ export const Horizontal: IllustratedMessageStory = { storyName: "horizontal", render: () => ( - + Can't find "Saturn" Try searching for something else. - + Can't find "Saturn" @@ -51,12 +51,12 @@ export const Vertical: IllustratedMessageStory = { storyName: "vertical", render: () => ( - + Can't find "Saturn" Try searching for something else. - + Can't find "Saturn" @@ -70,7 +70,7 @@ export const Vertical: IllustratedMessageStory = { export const VeryLongTitle: IllustratedMessageStory = { storyName: "very long title", render: () => ( - + Can't find "Saturn" or "Mars" or another continent. Try searching for something else. @@ -81,7 +81,7 @@ export const VeryLongTitle: IllustratedMessageStory = { export const VeryLongContent: IllustratedMessageStory = { storyName: "very long content", render: () => ( - + Can't find "Saturn" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit metus neque, non pharetra enim tincidunt dictum. Fusce in ultricies turpis, vitae finibus nunc. Quisque laoreet sit amet eros eget volutpat. Pellentesque non nulla dui. Sed nec felis quam. Vestibulum velit magna, fringilla ut neque cursus, porta rhoncus nulla. Suspendisse auctor sollicitudin tortor, quis viverra tellus egestas sed. Pellentesque ut dignissim nisi. Duis sit amet ex bibendum, pharetra purus eget, varius massa. In pulvinar dui quis dignissim commodo. Nulla facilisi.. @@ -92,7 +92,7 @@ export const VeryLongContent: IllustratedMessageStory = { export const NoTitle: IllustratedMessageStory = { storyName: "no title", render: () => ( - + Try searching for something else. @@ -104,12 +104,12 @@ export const NoDimensions: IllustratedMessageStory = { render: () => ( - + Can't find "Saturn" Try searching for something else. - + Can't find "Saturn" Try searching for something else. @@ -122,14 +122,14 @@ export const Zoom: IllustratedMessageStory = { render: () => (
- + Can't find "Saturn" Try searching for something else.
- + Can't find "Saturn" Try searching for something else. @@ -143,17 +143,17 @@ export const Styling: IllustratedMessageStory = { storyName: "styling", render: () => ( - + Can't find "Saturn" Try searching for something else. - + Can't find "Saturn" Try searching for something else. - + Can't find "Saturn" Try searching for something else. diff --git a/packages/components/src/illustration/tests/chromatic/Illustration.stories.tsx b/packages/components/src/illustration/tests/chromatic/Illustration.stories.tsx index 57123f623..3cacc4936 100644 --- a/packages/components/src/illustration/tests/chromatic/Illustration.stories.tsx +++ b/packages/components/src/illustration/tests/chromatic/Illustration.stories.tsx @@ -17,7 +17,7 @@ export const Default: IllustrationStory = { storyName: "default", render: () => ( - + ) }; @@ -26,10 +26,10 @@ export const Horizontal: IllustrationStory = { storyName: "horizontal", render: () => ( - + - + @@ -42,10 +42,10 @@ export const Vertical: IllustrationStory = { storyName: "vertical", render: () => ( - + - + @@ -57,7 +57,7 @@ export const Vertical: IllustrationStory = { export const Straight: IllustrationStory = { storyName: "straight", render: () => ( - + ) @@ -66,7 +66,7 @@ export const Straight: IllustrationStory = { export const Rounded: IllustrationStory = { storyName: "rounded", render: () => ( - + ) @@ -77,18 +77,18 @@ export const Color: IllustrationStory = { render: () => ( - + - + - + - + @@ -101,12 +101,12 @@ export const Zoom: IllustrationStory = { render: () => (
- +
- +
@@ -118,13 +118,13 @@ export const Styling: IllustrationStory = { storyName: "styling", render: () => ( - + - + - + diff --git a/packages/components/src/image/docs/Image.stories.mdx b/packages/components/src/image/docs/Image.stories.mdx index 2adfbe690..7e7b5d581 100644 --- a/packages/components/src/image/docs/Image.stories.mdx +++ b/packages/components/src/image/docs/Image.stories.mdx @@ -46,7 +46,7 @@ An image size can be specifyied with the `width` and `height` props. - + @@ -60,7 +60,7 @@ _Avoid serving images that are unecessary big, images should be resized to the i - + @@ -80,7 +80,7 @@ An SVG image size can be specified with the `width` and `height` props. - + diff --git a/packages/components/src/image/tests/chromatic/Image.stories.tsx b/packages/components/src/image/tests/chromatic/Image.stories.tsx index e119f109e..ae352f8fc 100644 --- a/packages/components/src/image/tests/chromatic/Image.stories.tsx +++ b/packages/components/src/image/tests/chromatic/Image.stories.tsx @@ -21,7 +21,7 @@ export const Default: ImageStory = { export const Contained: ImageStory = { storyName: "contained", render: () => ( -
+
) @@ -31,8 +31,8 @@ export const Size: ImageStory = { storyName: "size", render: () => ( - - + + ) }; @@ -41,10 +41,10 @@ export const Straight: ImageStory = { storyName: "straight", render: () => ( - - - - + + + + ) @@ -54,10 +54,10 @@ export const Rounded: ImageStory = { storyName: "rounded", render: () => ( - - - - + + + + ) @@ -67,10 +67,10 @@ export const Circular: ImageStory = { storyName: "circular", render: () => ( - - - - + + + + ) @@ -80,19 +80,19 @@ export const ObjectFit: ImageStory = { storyName: "object fit", render: () => ( -
+
-
+
-
+
-
+
-
+
@@ -103,10 +103,10 @@ export const ObjectPosition: ImageStory = { storyName: "object position", render: () => ( - - - - + + + + ) }; @@ -131,7 +131,7 @@ export const Styling: ImageStory = { - + ) }; diff --git a/packages/components/src/image/tests/chromatic/SvgImage.stories.tsx b/packages/components/src/image/tests/chromatic/SvgImage.stories.tsx index 9ffa37fbd..2d3c4129a 100644 --- a/packages/components/src/image/tests/chromatic/SvgImage.stories.tsx +++ b/packages/components/src/image/tests/chromatic/SvgImage.stories.tsx @@ -27,14 +27,14 @@ export const Fill: SvgImageStory = { export const Width: SvgImageStory = { storyName: "width", render: () => ( - + ) }; export const Height: SvgImageStory = { storyName: "height", render: () => ( - + ) }; diff --git a/packages/components/src/index.css b/packages/components/src/index.css index 42e8c95be..48e12127c 100644 --- a/packages/components/src/index.css +++ b/packages/components/src/index.css @@ -56,15 +56,17 @@ Sadly, we encountered CSS ordering issues when the components are bundled in our --o-ui-disabled-opacity: 0.4; /* FOCUS RING */ - --o-ui-focus-ring-thickness-sm: 1px; - --o-ui-focus-ring-thickness-md: 3px; - --o-ui-focus-ring-thickness-lg: 5px; + --o-ui-focus-ring-thickness-sm: 0.0625rem; + --o-ui-focus-ring-thickness-md: 0.1875rem; + --o-ui-focus-ring-thickness-lg: 0.3125rem; --o-ui-focus-ring-inset-sm: 0 0 0 var(--o-ui-focus-ring-thickness-sm) var(--o-ui-focus-ring-color-alias-default); --o-ui-focus-ring-inset-md: 0 0 0 var(--o-ui-focus-ring-thickness-md) var(--o-ui-focus-ring-color-alias-default); --o-ui-focus-ring-inset-lg: 0 0 0 var(--o-ui-focus-ring-thickness-lg) var(--o-ui-focus-ring-color-alias-default); - --o-ui-focus-ring-outset-inner-offset: 1px; - --o-ui-focus-ring-outset: 0 0 0 var(--o-ui-focus-ring-outset-outer-offset) var(--o-ui-white), 0 0 0 calc(2px + var(o-ui-focus-ring-outset-outer-offset)) var(--o-ui-focus-ring-color-alias-default); + --o-ui-focus-ring-outset-inner-offset: 0.0625rem; + --o-ui-focus-ring-outset: + 0 0 0 var(--o-ui-focus-ring-outset-outer-offset) var(--o-ui-white), + 0 0 0 calc(0.125rem + var(o-ui-focus-ring-outset-outer-offset)) var(--o-ui-focus-ring-color-alias-default); --o-ui-focus-ring-transition: all var(--o-ui-easing-duration-1) var(--o-ui-easing-focus); /* TRANSITIONS | TIMING */ diff --git a/packages/components/src/input-group/docs/CustomAddon.sample.jsx b/packages/components/src/input-group/docs/CustomAddon.sample.jsx index 8b2de581c..813ebc45e 100644 --- a/packages/components/src/input-group/docs/CustomAddon.sample.jsx +++ b/packages/components/src/input-group/docs/CustomAddon.sample.jsx @@ -11,7 +11,7 @@ function CustomAddon({ children, ...props }) { alignItems: "center", height: 6, border: "#ADACAC", - padding: "0px 10px", + padding: "0 0.625rem", style: { borderTopRightRadius: "var(--o-ui-input-border-radius)", borderBottomRightRadius: "var(--o-ui-input-border-radius)" diff --git a/packages/components/src/input-group/docs/CustomInput.sample.jsx b/packages/components/src/input-group/docs/CustomInput.sample.jsx index 39ce5618e..cc4986b9c 100644 --- a/packages/components/src/input-group/docs/CustomInput.sample.jsx +++ b/packages/components/src/input-group/docs/CustomInput.sample.jsx @@ -7,7 +7,7 @@ function CustomInput(props) { props, { type: "text", - width: "225px", + width: "14.0625rem", height: 6, border: "hsla(223, 12%, 87%, 1)", style: { diff --git a/packages/components/src/input-group/src/InputGroup.css b/packages/components/src/input-group/src/InputGroup.css index 1eb6b91ca..2dbf49f5a 100644 --- a/packages/components/src/input-group/src/InputGroup.css +++ b/packages/components/src/input-group/src/InputGroup.css @@ -37,11 +37,11 @@ /* ADDON */ .o-ui-input-group > :first-child:not(.o-ui-input-group-input) { - margin-right: -1px; + margin-right: -0.0625rem; } .o-ui-input-group > :last-child:not(.o-ui-input-group-input) { - margin-left: -1px; + margin-left: -0.0625rem; } /* ADDON | START */ @@ -77,7 +77,7 @@ padding: 0 var(--o-ui-sp-3); min-height: var(--o-ui-sz-6); border-radius: var(--o-ui-br-2); - border: 1px solid var(--o-ui-b-alias-mid-break); + border: 0.0625rem solid var(--o-ui-b-alias-mid-break); color: var(--o-ui-text-alias-primary); background-color: var(--o-ui-bg-alias-mid-break); flex-shrink: 0; @@ -91,5 +91,5 @@ /* SELECT ADDON */ .o-ui-input-group-select-addon { width: auto !important; - min-width: 85px; + min-width: 5.3125rem; } diff --git a/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx b/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx index 698df51cf..9649e4f22 100644 --- a/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx +++ b/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx @@ -987,7 +987,7 @@ export const Styling: InputGroupStory = { Days - + Days diff --git a/packages/components/src/input/src/Input.css b/packages/components/src/input/src/Input.css index 05036cee2..6c6b03e7a 100644 --- a/packages/components/src/input/src/Input.css +++ b/packages/components/src/input/src/Input.css @@ -26,7 +26,7 @@ width: 100%; background-color: inherit; color: inherit; - min-height: calc(var(--o-ui-sz-6) - 2px); + min-height: calc(var(--o-ui-sz-6) - 0.125rem); margin: 0; padding: 0; } @@ -50,7 +50,7 @@ font-size: var(--o-ui-fs-3); padding: 0; border-radius: var(--o-ui-input-border-radius); - border: 1px solid var(--o-ui-input-border-color); + border: 0.0625rem solid var(--o-ui-input-border-color); background-color: var(--o-ui-bg-alias-surface); transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive), padding 0s linear; line-height: inherit; @@ -95,7 +95,7 @@ /* AUTOFILL */ .o-ui-input input:-webkit-autofill, .o-ui-input textarea:-webkit-autofill { - -webkit-box-shadow: 0 0 0 1000px var(--o-ui-bg-alias-accent-faint) inset !important; + -webkit-box-shadow: 0 0 0 62.5rem var(--o-ui-bg-alias-accent-faint) inset !important; -webkit-text-fill-color: var(--o-ui-text-alias-primary) !important; } @@ -214,8 +214,8 @@ position: absolute; top: 50%; z-index: 1; - border-radius: 50px; - border: 2px solid var(--o-ui-b-alias-low-break); + border-radius: var(--o-ui-br-circular); + border: 0.125rem solid var(--o-ui-b-alias-low-break); border-top-color: var(--o-ui-b-alias-mid-break); transform: translate(0, -50%) rotate(0deg); animation: o-ui-input-spinner 1s linear infinite; diff --git a/packages/components/src/input/tests/jest/adaptInputStylingProps.test.ts b/packages/components/src/input/tests/jest/adaptInputStylingProps.test.ts index 66481d772..3dd3bce66 100644 --- a/packages/components/src/input/tests/jest/adaptInputStylingProps.test.ts +++ b/packages/components/src/input/tests/jest/adaptInputStylingProps.test.ts @@ -9,7 +9,7 @@ test("when the input have a className prop, return the className value as a root test("when the input have a style prop, return the style value as a root prop", () => { const styleProp = { - border: "1px solid red" + border: "0.0625rem solid red" }; const result = adaptInputStylingProps({ style: styleProp }, {}); @@ -28,7 +28,7 @@ test("when the input wrapper have a className prop, return the className value a test("when the input wrapper have a style prop, return the style value as a wrapper prop", () => { const styleProp = { - border: "1px solid red" + border: "0.0625rem solid red" }; const result = adaptInputStylingProps({ wrapperProps: { style: styleProp } }, {}); @@ -64,7 +64,7 @@ test("when the context props have a className prop, return the className value a test("when the context props have a style prop, return the styles value as a wrapper prop", () => { const styleProp = { - border: "1px solid red" + border: "0.0625rem solid red" }; const result = adaptInputStylingProps({}, { style: styleProp }); @@ -84,7 +84,7 @@ test("when the input wrapper have a className prop and the context props have a test("when the input wrapper have a style prop and the context prop have a style prop, return the merged value as a wrapper prop", () => { const wrapperStyleProp = { - border: "1px solid red" + border: "0.0625rem solid red" }; const contextStyleProp = { diff --git a/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx b/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx index b21804d22..c3bccd903 100644 --- a/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx @@ -191,7 +191,7 @@ export const Styling: FlexStory = {
Bravo
Charlie
- +
Alpha
Bravo
Charlie
diff --git a/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx b/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx index 34889a322..e1ce94aea 100644 --- a/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx @@ -191,7 +191,7 @@ export const Styling: FlexStory = {
Bravo
Charlie
 - +
Alpha
Bravo
Charlie
diff --git a/packages/components/src/layout/tests/chromatic/Grid.stories.tsx b/packages/components/src/layout/tests/chromatic/Grid.stories.tsx index dd3040beb..5778d2158 100644 --- a/packages/components/src/layout/tests/chromatic/Grid.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/Grid.stories.tsx @@ -105,7 +105,7 @@ export const TemplateColumns: GridStory = { storyName: "template columns", render: () => ( - +
Alpha
Bravo
Charlie
@@ -121,7 +121,7 @@ export const TemplateColumns: GridStory = {
Echo
Foxtrot
 - +
Alpha
Bravo
Charlie
@@ -137,7 +137,7 @@ export const TemplateRows: GridStory = { storyName: "template rows", render: () => ( - +
Alpha
Bravo
Charlie
@@ -147,7 +147,7 @@ export const TemplateRows: GridStory = {
Bravo
Charlie
 - +
Alpha
Bravo
Charlie
@@ -218,14 +218,14 @@ export const AutoColumns: GridStory = {
Delta
Echo
 - +
Alpha
Bravo
Charlie
Delta
Echo
 - +
Alpha
Bravo
Charlie
@@ -292,7 +292,7 @@ export const ColumnSpan: GridStory = { export const AlignContentStart: GridStory = { storyName: "align content start", render: () => ( - +
Alpha
Bravo
Charlie
@@ -303,7 +303,7 @@ export const AlignContentStart: GridStory = { export const AlignContentCenter: GridStory = { storyName: "align content center", render: () => ( - +
Alpha
Bravo
Charlie
@@ -314,7 +314,7 @@ export const AlignContentCenter: GridStory = { export const AlignContentSpaceBetween: GridStory = { storyName: "align content space-between", render: () => ( - +
Alpha
Bravo
Charlie
@@ -325,7 +325,7 @@ export const AlignContentSpaceBetween: GridStory = { export const AlignContentSpaceAround: GridStory = { storyName: "align content space-around", render: () => ( - +
Alpha
Bravo
Charlie
@@ -336,7 +336,7 @@ export const AlignContentSpaceAround: GridStory = { export const AlignItemsStart: GridStory = { storyName: "align items start", render: () => ( - +
Alpha
Bravo
Charlie
@@ -347,7 +347,7 @@ export const AlignItemsStart: GridStory = { export const AlignItemsCenter: GridStory = { storyName: "align items center", render: () => ( - +
Alpha
Bravo
Charlie
@@ -358,7 +358,7 @@ export const AlignItemsCenter: GridStory = { export const AlignItemsEnd: GridStory = { storyName: "align items end", render: () => ( - +
Alpha
Bravo
Charlie
@@ -369,7 +369,7 @@ export const AlignItemsEnd: GridStory = { export const JustifyContentStart: GridStory = { storyName: "justify content start", render: () => ( - +
Alpha
Bravo
Charlie
@@ -380,7 +380,7 @@ export const JustifyContentStart: GridStory = { export const JustifyContentCenter: GridStory = { storyName: "justify content center", render: () => ( - +
Alpha
Bravo
Charlie
@@ -391,7 +391,7 @@ export const JustifyContentCenter: GridStory = { export const JustifyContentEnd: GridStory = { storyName: "justify content end", render: () => ( - +
Alpha
Bravo
Charlie
@@ -402,7 +402,7 @@ export const JustifyContentEnd: GridStory = { export const JustifyContentLeft: GridStory = { storyName: "justify content left", render: () => ( - +
Alpha
Bravo
Charlie
@@ -413,7 +413,7 @@ export const JustifyContentLeft: GridStory = { export const JustifyContentRight: GridStory = { storyName: "justify content right", render: () => ( - +
Alpha
Bravo
Charlie
@@ -424,7 +424,7 @@ export const JustifyContentRight: GridStory = { export const JustifyContentSpaceBetween: GridStory = { storyName: "justify content space between", render: () => ( - +
Alpha
Bravo
Charlie
@@ -435,7 +435,7 @@ export const JustifyContentSpaceBetween: GridStory = { export const JustifyContentSpaceAround: GridStory = { storyName: "justify content space around", render: () => ( - +
Alpha
Bravo
Charlie
@@ -446,7 +446,7 @@ export const JustifyContentSpaceAround: GridStory = { export const JustifyContentSpaceEvenly: GridStory = { storyName: "justify content space evenly", render: () => ( - +
Alpha
Bravo
Charlie
@@ -457,7 +457,7 @@ export const JustifyContentSpaceEvenly: GridStory = { export const JustifyItemsStart: GridStory = { storyName: "justify items start", render: () => ( - +
Alpha
Bravo
Charlie
@@ -468,7 +468,7 @@ export const JustifyItemsStart: GridStory = { export const JustifyItemsCenter: GridStory = { storyName: "justify items center", render: () => ( - +
Alpha
Bravo
Charlie
@@ -479,7 +479,7 @@ export const JustifyItemsCenter: GridStory = { export const JustifyItemsEnd: GridStory = { storyName: "justify items end", render: () => ( - +
Alpha
Bravo
Charlie
@@ -490,7 +490,7 @@ export const JustifyItemsEnd: GridStory = { export const JustifyItemsLeft: GridStory = { storyName: "justify items left", render: () => ( - +
Alpha
Bravo
Charlie
@@ -501,7 +501,7 @@ export const JustifyItemsLeft: GridStory = { export const JustifyItemsRight: GridStory = { storyName: "justify items right", render: () => ( - +
Alpha
Bravo
Charlie
@@ -569,7 +569,7 @@ export const Minmax: GridStory = {
Echo
Foxtrot
 - +
Alpha
Bravo
Charlie
diff --git a/packages/components/src/link/docs/Link.stories.mdx b/packages/components/src/link/docs/Link.stories.mdx index 2b38a8e23..64e3a7807 100644 --- a/packages/components/src/link/docs/Link.stories.mdx +++ b/packages/components/src/link/docs/Link.stories.mdx @@ -177,13 +177,13 @@ A link can use a different shape to match his content shape on focus state. - + - + - + diff --git a/packages/components/src/link/src/Link.css b/packages/components/src/link/src/Link.css index b69b90838..07fd59629 100644 --- a/packages/components/src/link/src/Link.css +++ b/packages/components/src/link/src/Link.css @@ -37,7 +37,7 @@ bottom: calc(-1 * var(--o-ui-focus-ring-outset-outer-offset)); display: block; position: absolute; - box-shadow: 0 0 0 2px var(--o-ui-focus-ring-color-alias-default); + box-shadow: 0 0 0 0.125rem var(--o-ui-focus-ring-color-alias-default); border-radius: var(--o-ui-br-2); transition: var(--o-ui-focus-ring-transition); } diff --git a/packages/components/src/link/tests/chromatic/Link.chroma.jsx b/packages/components/src/link/tests/chromatic/Link.chroma.jsx index c2fc60d4a..91f87d35d 100644 --- a/packages/components/src/link/tests/chromatic/Link.chroma.jsx +++ b/packages/components/src/link/tests/chromatic/Link.chroma.jsx @@ -63,7 +63,7 @@ stories() - + diff --git a/packages/components/src/link/tests/chromatic/createTextLinkTestSuite.jsx b/packages/components/src/link/tests/chromatic/createTextLinkTestSuite.jsx index 985384e32..6a7bde01e 100644 --- a/packages/components/src/link/tests/chromatic/createTextLinkTestSuite.jsx +++ b/packages/components/src/link/tests/chromatic/createTextLinkTestSuite.jsx @@ -19,7 +19,7 @@ export function createTextLinkTestSuite(element, stories) {
Flight details
-
+
NASA selected SpaceX to develop a lunar optimized Starship to transport crew between lunar orbit and the surface of the Moon as part of NASA’s Artemis program. @@ -38,7 +38,7 @@ export function createTextLinkTestSuite(element, stories) { -
+
NASA selected SpaceX to develop a lunar optimized Starship to transport crew between lunar orbit and the surface of the Moon as part of NASA’s Artemis program. @@ -58,7 +58,7 @@ export function createTextLinkTestSuite(element, stories) { Flight details -
+
NASA selected SpaceX to develop a lunar optimized Starship to transport crew between lunar orbit and the surface of the Moon as part of NASA’s Artemis program. @@ -140,7 +140,7 @@ export function createTextLinkTestSuite(element, stories) { Flight details Flight details -
+
NASA selected SpaceX to develop a lunar optimized Starship to transport crew between lunar orbit and the surface of the Moon as part of NASA’s Artemis program. diff --git a/packages/components/src/listbox/src/Listbox.css b/packages/components/src/listbox/src/Listbox.css index a9ece7d83..1c77e6f51 100644 --- a/packages/components/src/listbox/src/Listbox.css +++ b/packages/components/src/listbox/src/Listbox.css @@ -4,7 +4,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc */ .o-ui { - --o-ui-listbox-border-size: 1px; + --o-ui-listbox-border-size: 0.0625rem; --o-ui-listbox-option-height: var(--o-ui-sz-5); --o-ui-listbox-option-checkmark-size: var(--o-ui-sz-3); } @@ -98,7 +98,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc position: absolute; left: 0; height: var(--o-ui-listbox-option-height); - width: 2px; + width: 0.125rem; background-color: var(--o-ui-bg-alias-accent); } diff --git a/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx b/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx index ad9fcdc9f..a9b320ec5 100644 --- a/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx +++ b/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx @@ -716,9 +716,9 @@ export const Styling: ListboxStory = { Jupiter Mars - + Earth - Jupiter + Jupiter Mars diff --git a/packages/components/src/lozenge/tests/chromatic/Lozenge.stories.tsx b/packages/components/src/lozenge/tests/chromatic/Lozenge.stories.tsx index e752c4bbd..d71db03d9 100644 --- a/packages/components/src/lozenge/tests/chromatic/Lozenge.stories.tsx +++ b/packages/components/src/lozenge/tests/chromatic/Lozenge.stories.tsx @@ -187,7 +187,7 @@ export const InheritParentProperties: LozengeStory = { export const Fluid: LozengeStory = { storyName: "fluid", render: () => ( -
+
New @@ -222,7 +222,7 @@ export const Styling: LozengeStory = { New New diff --git a/packages/components/src/menu/src/Menu.css b/packages/components/src/menu/src/Menu.css index 70b483d29..712eca35f 100644 --- a/packages/components/src/menu/src/Menu.css +++ b/packages/components/src/menu/src/Menu.css @@ -4,7 +4,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol */ .o-ui { - --o-ui-menu-border-size: 1px; + --o-ui-menu-border-size: 0.0625rem; --o-ui-menu-item-height: var(--o-ui-sz-5); --o-ui-menu-item-checkmark-size: var(--o-ui-sz-2); } @@ -16,7 +16,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol margin: 0; border-radius: var(--o-ui-br-2); width: max-content; - min-width: 200px; + min-width: 12.5rem; max-width: var(--o-ui-sz-16); height: max-content; box-shadow: var(--o-ui-bs-alias-floating); @@ -98,7 +98,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol position: absolute; left: 0; height: 100%; - width: 2px; + width: 0.125rem; opacity: 0; background-color: var(--o-ui-bg-alias-accent); } diff --git a/packages/components/src/menu/tests/chromatic/Menu.stories.tsx b/packages/components/src/menu/tests/chromatic/Menu.stories.tsx index 9c5a3d1b9..b33d5e37e 100644 --- a/packages/components/src/menu/tests/chromatic/Menu.stories.tsx +++ b/packages/components/src/menu/tests/chromatic/Menu.stories.tsx @@ -787,9 +787,9 @@ export const Styling: MenuStory = { Jupiter Mars - + Earth - Jupiter + Jupiter Mars diff --git a/packages/components/src/menu/tests/chromatic/MenuTrigger.stories.tsx b/packages/components/src/menu/tests/chromatic/MenuTrigger.stories.tsx index 30480f0db..f22a3f3de 100644 --- a/packages/components/src/menu/tests/chromatic/MenuTrigger.stories.tsx +++ b/packages/components/src/menu/tests/chromatic/MenuTrigger.stories.tsx @@ -135,7 +135,7 @@ export const DirectionBottom: MenuTriggerStory = { export const DirectionTop: MenuTriggerStory = { storyName: "direction top", - decorators: [Story =>
], + decorators: [Story =>
], render: () => ( @@ -150,7 +150,7 @@ export const DirectionTop: MenuTriggerStory = { export const AlignStart: MenuTriggerStory = { storyName: "align start", - decorators: [Story =>
], + decorators: [Story =>
], render: () => ( @@ -165,7 +165,7 @@ export const AlignStart: MenuTriggerStory = { export const AlignEnd: MenuTriggerStory = { storyName: "align end", - decorators: [Story =>
], + decorators: [Story =>
], render: () => ( @@ -301,7 +301,7 @@ export const ClassName: MenuTriggerStory = { export const Style: MenuTriggerStory = { storyName: "style", render: () => ( - + Earth diff --git a/packages/components/src/message/docs/ControlledMessage.sample.jsx b/packages/components/src/message/docs/ControlledMessage.sample.jsx index f9ebf184f..9a2d6d4df 100644 --- a/packages/components/src/message/docs/ControlledMessage.sample.jsx +++ b/packages/components/src/message/docs/ControlledMessage.sample.jsx @@ -7,7 +7,7 @@ }, [show, setShow]); return ( - +