From fd5d32a8fb7ef66ec5cd3e09214d841a3e264a93 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 31 Jan 2023 21:13:47 -0500 Subject: [PATCH 1/4] replaced uses of px to rem - removed root font size --- docs/materials/motion/MotionPreview.css | 2 +- packages/components/src/button/src/Button.css | 6 ++--- packages/components/src/card/src/Card.css | 2 +- .../components/src/checkbox/src/Checkbox.css | 4 --- .../src/date-input/src/DateInput.css | 4 +-- .../src/date-input/src/DateRangeInput.css | 4 +-- packages/components/src/dialog/src/Dialog.css | 6 ++--- .../src/input-group/src/InputGroup.css | 2 +- packages/components/src/input/src/Input.css | 6 ++--- packages/components/src/menu/src/Menu.css | 2 +- .../components/src/message/src/Message.css | 2 +- .../src/number-input/src/NumberInput.css | 2 +- .../components/src/overlay/src/Overlay.css | 26 +++++++++---------- packages/components/src/tabs/src/Tabs.css | 10 +++---- packages/components/src/tile/src/Tile.css | 8 +++--- packages/css/src/normalize.css | 2 +- packages/icons/docs/icon-gallery/IconItem.css | 2 +- .../icon-gallery/details/MultiVariant.css | 2 +- .../docs/icon-gallery/details/Variants.css | 2 +- .../CheckeredBackground.css | 4 +-- .../component-info/ComponentInfo.css | 6 ++--- storybook/components/preview/Preview.css | 6 ++--- storybook/components/snippet/Snippet.css | 2 +- storybook/styles/app.css | 1 - storybook/styles/docs.css | 22 ++++++++-------- 25 files changed, 66 insertions(+), 69 deletions(-) diff --git a/docs/materials/motion/MotionPreview.css b/docs/materials/motion/MotionPreview.css index f754284af..7a2e1d05e 100644 --- a/docs/materials/motion/MotionPreview.css +++ b/docs/materials/motion/MotionPreview.css @@ -13,5 +13,5 @@ } .o-ui-sb-object-animated { - transform: translateX(100px); + transform: translateX(6.25rem); } diff --git a/packages/components/src/button/src/Button.css b/packages/components/src/button/src/Button.css index e4f3631d5..434a69d32 100644 --- a/packages/components/src/button/src/Button.css +++ b/packages/components/src/button/src/Button.css @@ -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); } diff --git a/packages/components/src/card/src/Card.css b/packages/components/src/card/src/Card.css index 59d968b67..9470c6d47 100644 --- a/packages/components/src/card/src/Card.css +++ b/packages/components/src/card/src/Card.css @@ -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/checkbox/src/Checkbox.css b/packages/components/src/checkbox/src/Checkbox.css index e71f9466c..b5d3ff5de 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; 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..16235d38c 100644 --- a/packages/components/src/date-input/src/DateRangeInput.css +++ b/packages/components/src/date-input/src/DateRangeInput.css @@ -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/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css index c59568cf2..e12431731 100644 --- a/packages/components/src/dialog/src/Dialog.css +++ b/packages/components/src/dialog/src/Dialog.css @@ -47,15 +47,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 */ diff --git a/packages/components/src/input-group/src/InputGroup.css b/packages/components/src/input-group/src/InputGroup.css index 1eb6b91ca..082cb676d 100644 --- a/packages/components/src/input-group/src/InputGroup.css +++ b/packages/components/src/input-group/src/InputGroup.css @@ -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/src/Input.css b/packages/components/src/input/src/Input.css index 98bc4c83e..5c9624b1f 100644 --- a/packages/components/src/input/src/Input.css +++ b/packages/components/src/input/src/Input.css @@ -93,7 +93,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; } @@ -212,8 +212,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/menu/src/Menu.css b/packages/components/src/menu/src/Menu.css index fda10174c..1dca011cb 100644 --- a/packages/components/src/menu/src/Menu.css +++ b/packages/components/src/menu/src/Menu.css @@ -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); diff --git a/packages/components/src/message/src/Message.css b/packages/components/src/message/src/Message.css index 065bd42ff..faf37df5a 100644 --- a/packages/components/src/message/src/Message.css +++ b/packages/components/src/message/src/Message.css @@ -36,7 +36,7 @@ /* Ugly fix unti Chroma have decent support for height: min-content + absolute */ height: auto !important; flex-shrink: 0; - max-width: 180px; + max-width: 11.25rem; } /* DISMISS */ diff --git a/packages/components/src/number-input/src/NumberInput.css b/packages/components/src/number-input/src/NumberInput.css index d0537204b..9a554f58b 100644 --- a/packages/components/src/number-input/src/NumberInput.css +++ b/packages/components/src/number-input/src/NumberInput.css @@ -109,5 +109,5 @@ /* IN GROUP */ .o-ui-number-input-in-group { - width: 100px; + width: 6.25rem; } diff --git a/packages/components/src/overlay/src/Overlay.css b/packages/components/src/overlay/src/Overlay.css index cce0ef3b6..ebe52f7e1 100644 --- a/packages/components/src/overlay/src/Overlay.css +++ b/packages/components/src/overlay/src/Overlay.css @@ -1,7 +1,7 @@ .o-ui { --o-ui-overlay-border-offset: 0; --o-ui-overlay-arrow-border-color: var(--o-ui-focus-ring-color-alias-default); - --o-ui-overlay-arrow-dimension: 10px; + --o-ui-overlay-arrow-dimension: 0.625rem; } .o-ui-overlay { @@ -17,8 +17,8 @@ .o-ui-overlay-arrow, .o-ui-overlay-arrow::before { position: absolute; - width: 10px; - height: 10px; + width: 0.625rem; + height: 0.625rem; z-index: 1; } @@ -31,8 +31,8 @@ .o-ui-overlay-arrow::after { content: ""; - width: 20px; - height: 10px; + width: 1.25rem; + height: 0.625rem; background-color: var(--o-ui-bg-alias-surface); position: absolute; top: calc(var(--o-ui-overlay-arrow-dimension) / 2); @@ -70,16 +70,16 @@ /* RIGHT ARROW */ .o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-arrow::after { - width: 10px; - height: 20px; + width: 0.625rem; + height: 1.25rem; left: calc(var(--o-ui-overlay-arrow-dimension) / 2); top: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2)); } /* LEFT ARROW */ .o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-arrow::after { - width: 10px; - height: 20px; + width: 0.625rem; + height: 1.25rem; left: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2)); top: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2)); } @@ -87,7 +87,7 @@ /* ARROW | BORDER | STATE | FOCUS */ /* RIGHT ARROW */ .o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after { - left: 8px; + left: 0.5rem; } .o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before { @@ -97,7 +97,7 @@ /* BOTTOM ARROW */ .o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after { - top: 8px; + top: 0.5rem; } .o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before { @@ -107,7 +107,7 @@ /* LEFT ARROW */ .o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after { - left: -8px; + left: -0.5rem; } .o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before { @@ -117,7 +117,7 @@ /* TOP ARROW */ .o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after { - top: -8px; + top: -0.5rem; } .o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before { diff --git a/packages/components/src/tabs/src/Tabs.css b/packages/components/src/tabs/src/Tabs.css index 69b336dfc..7d8a6cc98 100644 --- a/packages/components/src/tabs/src/Tabs.css +++ b/packages/components/src/tabs/src/Tabs.css @@ -1,7 +1,7 @@ /* TABS */ .o-ui-tabs { height: max-content; - --o-ui-tab-stroke-width: 4px; + --o-ui-tab-stroke-width: 0.25rem; } /* TABS | ORIENTATION | VERTICAL */ @@ -74,8 +74,8 @@ /* TAB LIST | POPOVER | FOCUS */ .o-ui-tab-list-popover .o-ui-tab::before { - left: 8px; - right: 8px; + left: 0.5rem; + right: 0.5rem; } /* TAB LIST | HIDDEN TABS */ @@ -137,8 +137,8 @@ /* TAB | STATE | FOCUS | ORIENTATION | HORIZONTAL */ .o-ui-tabs-horizontal .o-ui-tab::before { - left: 8px; - right: 8px; + left: 0.5rem; + right: 0.5rem; } .o-ui-tabs-horizontal .o-ui-tab { diff --git a/packages/components/src/tile/src/Tile.css b/packages/components/src/tile/src/Tile.css index 329f296c0..3631ed138 100644 --- a/packages/components/src/tile/src/Tile.css +++ b/packages/components/src/tile/src/Tile.css @@ -1,6 +1,6 @@ .o-ui-tile { width: 100%; - min-width: 100px; + min-width: 6.25rem; border: none; background-color: var(--o-ui-bg-alias-surface); padding: 0; @@ -91,8 +91,8 @@ content: ""; opacity: 0; position: absolute; - right: 8px; - top: 8px; + right: 0.5rem; + top: 0.5rem; border-radius: var(--o-ui-br-4); width: var(--o-ui-sz-4); height: var(--o-ui-sz-4); @@ -101,6 +101,8 @@ justify-content: center; background-color: var(--o-ui-text-alias-accent); mask-image: url("~@orbit-ui/icons/dist/icon-check-circle-24.svg"); + mask-repeat: no-repeat; + mask-size: cover; } .o-ui-tile[aria-checked="true"] .o-ui-tile-main::before, diff --git a/packages/css/src/normalize.css b/packages/css/src/normalize.css index 67719faa4..143d2403d 100644 --- a/packages/css/src/normalize.css +++ b/packages/css/src/normalize.css @@ -1,6 +1,6 @@ body { font-family: "TT Interphases Variable", Arial, Helvetica, sans-serif; - font-size: 16px; + font-size: 1rem; margin: 0; padding: 0; } diff --git a/packages/icons/docs/icon-gallery/IconItem.css b/packages/icons/docs/icon-gallery/IconItem.css index bd7095a3a..e03e7b8fa 100644 --- a/packages/icons/docs/icon-gallery/IconItem.css +++ b/packages/icons/docs/icon-gallery/IconItem.css @@ -1,4 +1,4 @@ .o-ui-sb-gallery-item { flex: 0 1 calc(13%); - margin: 0 10px 30px 0; + margin: 0 0.625rem 1.875rem 0; } diff --git a/packages/icons/docs/icon-gallery/details/MultiVariant.css b/packages/icons/docs/icon-gallery/details/MultiVariant.css index 26a0ac2cc..39fbc18a3 100644 --- a/packages/icons/docs/icon-gallery/details/MultiVariant.css +++ b/packages/icons/docs/icon-gallery/details/MultiVariant.css @@ -1,3 +1,3 @@ .o-ui-sb-gallery-item-multi-variant-usage { - margin-top: -30px; + margin-top: -1.875rem; } diff --git a/packages/icons/docs/icon-gallery/details/Variants.css b/packages/icons/docs/icon-gallery/details/Variants.css index 345cdcc54..0f69eb70e 100644 --- a/packages/icons/docs/icon-gallery/details/Variants.css +++ b/packages/icons/docs/icon-gallery/details/Variants.css @@ -2,7 +2,7 @@ display: flex; align-items: center; width: 100%; - padding: 8px; + padding: 0.5rem; border-radius: var(--o-ui-br-2); background-color: var(--o-ui-bg-alias-mid-break); cursor: pointer; 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/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..35d412d84 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; } @@ -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, @@ -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 */ @@ -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); } @@ -338,10 +338,10 @@ .sbdocs kbd { line-height: var(--o-ui-lh-1); margin: 0 2px; - padding: 3px 5px; + padding: 0.8125rem 0.3125rem; white-space: nowrap; - border-radius: 3px; - font-size: 13px; + border-radius: 0.8125rem; + font-size: 0.8125rem; border: 1px 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,7 +393,7 @@ position: absolute; top: 50%; left: 50%; - border-radius: 50px; + border-radius: var(--o-ui-br-circular); border: 2px solid var(--o-ui-b-alias-low-break); border-top-color: var(--o-ui-white); animation: o-ui-sb-spinner 1s linear infinite; @@ -411,7 +411,7 @@ /* 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 */ From d7d1709efb4805ea28e3f40f8e82162b218d7d83 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 1 Feb 2023 10:48:00 -0500 Subject: [PATCH 2/4] removed all traces of px in Orbit except for visually hidden as we want it to be 1px anyways --- .../src/accordion/src/Accordion.css | 4 +- .../src/autocomplete/src/Autocomplete.css | 4 +- packages/components/src/button/src/Button.css | 18 ++++---- packages/components/src/card/src/Card.css | 2 +- .../components/src/checkbox/src/Checkbox.css | 22 +++++----- .../components/src/counter/src/Counter.css | 4 +- .../src/date-input/src/DateRangeInput.css | 4 +- packages/components/src/dialog/src/Dialog.css | 4 +- .../components/src/divider/src/Divider.css | 8 ++-- packages/components/src/index.css | 10 ++--- .../src/input-group/src/InputGroup.css | 6 +-- packages/components/src/input/src/Input.css | 4 +- packages/components/src/link/src/Link.css | 2 +- .../components/src/listbox/src/Listbox.css | 4 +- packages/components/src/menu/src/Menu.css | 4 +- .../src/number-input/src/NumberInput.css | 7 ++-- .../components/src/overlay/src/Overlay.css | 8 ++-- packages/components/src/radio/src/Radio.css | 4 +- packages/components/src/select/src/Select.css | 16 +++---- packages/components/src/switch/src/Switch.css | 8 ++-- packages/components/src/tabs/src/Tabs.css | 10 ++--- packages/components/src/tag/src/Tag.css | 16 +++---- packages/components/src/tile/src/Tile.css | 42 +++++++++---------- storybook/styles/docs.css | 32 +++++++------- storybook/styles/stories.css | 4 +- 25 files changed, 123 insertions(+), 124 deletions(-) diff --git a/packages/components/src/accordion/src/Accordion.css b/packages/components/src/accordion/src/Accordion.css index 645180f68..bd967f8d0 100644 --- a/packages/components/src/accordion/src/Accordion.css +++ b/packages/components/src/accordion/src/Accordion.css @@ -52,8 +52,8 @@ /* TRIGGER | BORDERED */ .o-ui-accordion-bordered .o-ui-accordion-trigger { background-color: var(--o-ui-bg-alias-surface); - padding: calc(var(--o-ui-sp-4) - 1px) var(--o-ui-sp-5) var(--o-ui-sp-4) var(--o-ui-sp-6); - border-top: 1px solid var(--o-ui-b-alias-low-break); + padding: calc(var(--o-ui-sp-4) - 0.0625rem) var(--o-ui-sp-5) var(--o-ui-sp-4) var(--o-ui-sp-6); + border-top: 0.0625rem solid var(--o-ui-b-alias-low-break); } /* TRIGGER | BORDERED | HOVER */ 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/button/src/Button.css b/packages/components/src/button/src/Button.css index 434a69d32..d9c6d1c6b 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); } @@ -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/src/Card.css b/packages/components/src/card/src/Card.css index 9470c6d47..2d04c4bde 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); } diff --git a/packages/components/src/checkbox/src/Checkbox.css b/packages/components/src/checkbox/src/Checkbox.css index b5d3ff5de..6e866bdb8 100644 --- a/packages/components/src/checkbox/src/Checkbox.css +++ b/packages/components/src/checkbox/src/Checkbox.css @@ -18,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); @@ -29,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); @@ -120,21 +120,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); } @@ -159,13 +159,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/DateRangeInput.css b/packages/components/src/date-input/src/DateRangeInput.css index 16235d38c..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; } diff --git a/packages/components/src/dialog/src/Dialog.css b/packages/components/src/dialog/src/Dialog.css index e12431731..39c124e88 100644 --- a/packages/components/src/dialog/src/Dialog.css +++ b/packages/components/src/dialog/src/Dialog.css @@ -28,7 +28,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"; @@ -69,7 +69,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/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/index.css b/packages/components/src/index.css index 42e8c95be..dfcc66630 100644 --- a/packages/components/src/index.css +++ b/packages/components/src/index.css @@ -56,15 +56,15 @@ 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/src/InputGroup.css b/packages/components/src/input-group/src/InputGroup.css index 082cb676d..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; diff --git a/packages/components/src/input/src/Input.css b/packages/components/src/input/src/Input.css index 5c9624b1f..97409e994 100644 --- a/packages/components/src/input/src/Input.css +++ b/packages/components/src/input/src/Input.css @@ -24,7 +24,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; } @@ -48,7 +48,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; diff --git a/packages/components/src/link/src/Link.css b/packages/components/src/link/src/Link.css index dd37fce5b..ae6188293 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/listbox/src/Listbox.css b/packages/components/src/listbox/src/Listbox.css index 1003292b3..fb5e8f5d4 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-1); } @@ -96,7 +96,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/menu/src/Menu.css b/packages/components/src/menu/src/Menu.css index 1dca011cb..720d09d7e 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-1); } @@ -96,7 +96,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/number-input/src/NumberInput.css b/packages/components/src/number-input/src/NumberInput.css index 9a554f58b..cc8a91b0e 100644 --- a/packages/components/src/number-input/src/NumberInput.css +++ b/packages/components/src/number-input/src/NumberInput.css @@ -3,7 +3,6 @@ } .o-ui-number-input { - /* 150px @ 16px */ width: 9.365rem; padding-right: var(--o-ui-spinner-width); } @@ -26,7 +25,7 @@ visibility: hidden; flex-direction: column; width: var(--o-ui-spinner-width); - min-height: calc(var(--o-ui-sz-6) - 2px); + min-height: calc(var(--o-ui-sz-6) - 0.125rem); position: absolute; right: 0; bottom: 0; @@ -46,7 +45,7 @@ padding: 0; margin: 0; border: 0; - border-left: 1px solid var(--o-ui-input-border-color); + border-left: 0.0625rem solid var(--o-ui-input-border-color); outline: transparent; cursor: pointer; background-color: var(--o-ui-bg-alias-surface); @@ -54,7 +53,7 @@ .o-ui-number-input-spinner-increment { border-top-right-radius: var(--o-ui-input-border-radius); - border-bottom: 1px solid var(--o-ui-input-border-color); + border-bottom: 0.0625rem solid var(--o-ui-input-border-color); } .o-ui-number-input-spinner-decrement { diff --git a/packages/components/src/overlay/src/Overlay.css b/packages/components/src/overlay/src/Overlay.css index ebe52f7e1..046960ad5 100644 --- a/packages/components/src/overlay/src/Overlay.css +++ b/packages/components/src/overlay/src/Overlay.css @@ -42,19 +42,19 @@ /* ARROW | POSITION */ .o-ui-overlay[data-popper-placement^="top"] .o-ui > .o-ui-overlay-arrow { - bottom: calc(-1 * 0.25rem - 1px); + bottom: calc(-1 * 0.25rem - 0.0625rem); } .o-ui-overlay[data-popper-placement^="bottom"] .o-ui > .o-ui-overlay-arrow { - top: calc(-1 * 0.25rem - 1px); + top: calc(-1 * 0.25rem - 0.0625rem); } .o-ui-overlay[data-popper-placement^="left"] .o-ui > .o-ui-overlay-arrow { - right: calc(-1 * 0.25rem - 1px); + right: calc(-1 * 0.25rem - 0.0625rem); } .o-ui-overlay[data-popper-placement^="right"] .o-ui > .o-ui-overlay-arrow { - left: calc(-1 * 0.25rem - 1px); + left: calc(-1 * 0.25rem - 0.0625rem); } /* ARROW | BORDER */ diff --git a/packages/components/src/radio/src/Radio.css b/packages/components/src/radio/src/Radio.css index 6e835f96d..4f4f03faf 100644 --- a/packages/components/src/radio/src/Radio.css +++ b/packages/components/src/radio/src/Radio.css @@ -14,7 +14,7 @@ display: inline-block; background-color: var(--o-ui-bg-alias-surface); border-radius: var(--o-ui-br-circular); - border: 1px solid var(--o-ui-b-alias-mid-break); + border: 0.0625rem solid var(--o-ui-b-alias-mid-break); position: relative; width: var(--o-ui-sz-3); height: var(--o-ui-sz-3); @@ -134,7 +134,7 @@ /* STATE | HOVER */ .o-ui-radio:hover input[type="radio"]:not([disabled]) + .o-ui-radio-button, .o-ui-radio-hover:not(.o-ui-radio-disabled) .o-ui-radio-button { - border: 1px solid var(--o-ui-b-alias-high-break); + border: 0.0625rem solid var(--o-ui-b-alias-high-break); } /* STATE | DISABLED */ diff --git a/packages/components/src/select/src/Select.css b/packages/components/src/select/src/Select.css index 56149d59f..cde20740c 100644 --- a/packages/components/src/select/src/Select.css +++ b/packages/components/src/select/src/Select.css @@ -52,7 +52,7 @@ /* TRIGGER | GHOST */ .o-ui-select-trigger-ghost { - border: 1px solid transparent; + border: 0.0625rem solid transparent; } /* TRIGGER | GHOST | STATE | FOCUS */ @@ -82,34 +82,34 @@ width: 100%; max-width: var(--o-ui-sz-16); background-color: var(--o-ui-bg-alias-surface); - border: 1px solid var(--o-ui-b-alias-mid-break); + border: 0.0625rem solid var(--o-ui-b-alias-mid-break); } /* TRIGGER | OUTLINE | STATE | OPENED */ .o-ui-select-trigger-outline[aria-expanded="true"] { - border: 1px solid var(--o-ui-b-alias-high-break); + border: 0.0625rem solid var(--o-ui-b-alias-high-break); } /* TRIGGER | OUTLINE | STATE | HOVER */ .o-ui-select-trigger-outline:not([disabled]):hover, .o-ui-select-trigger-outline:not([disabled]).o-ui-select-trigger-hover { - border: 1px solid var(--o-ui-b-alias-high-break); + border: 0.0625rem solid var(--o-ui-b-alias-high-break); } /* TRIGGER | OUTLINE | STATE | INVALID */ .o-ui-select-trigger-invalid.o-ui-select-trigger-outline { - border: 1px solid var(--o-ui-b-alias-alert); + border: 0.0625rem solid var(--o-ui-b-alias-alert); } /* TRIGGER | OUTLINE | STATE | OPENED | INVALID */ .o-ui-select-trigger-outline[aria-expanded="true"].o-ui-select-trigger-invalid { - border: 1px solid var(--o-ui-b-alias-alert-active); + border: 0.0625rem solid var(--o-ui-b-alias-alert-active); } /* TRIGGER | OUTLINE | STATE | HOVER | INVALID */ .o-ui-select-trigger-outline:not([disabled]):hover.o-ui-select-trigger-invalid, .o-ui-select-trigger-hover.o-ui-select-trigger-outline:not([disabled]).o-ui-select-trigger-invalid { - border: 1px solid var(--o-ui-b-alias-alert-hover); + border: 0.0625rem solid var(--o-ui-b-alias-alert-hover); } /* TRIGGER | OUTLINE | STATE | FOCUS */ @@ -125,7 +125,7 @@ /* TRIGGER | OUTLINE | STATE | INVALID | FOCUS && HOVER */ .o-ui-select-trigger-outline:not([disabled]):hover:focus-visible.o-ui-select-trigger-invalid { - border: 1px solid var(--o-ui-b-alias-alert-hover); + border: 0.0625rem solid var(--o-ui-b-alias-alert-hover); } /* SELECT VALUE */ diff --git a/packages/components/src/switch/src/Switch.css b/packages/components/src/switch/src/Switch.css index 1b6eec1d0..7f5e3b022 100644 --- a/packages/components/src/switch/src/Switch.css +++ b/packages/components/src/switch/src/Switch.css @@ -25,7 +25,7 @@ background-color: var(--o-ui-bg-alias-static-white); border-radius: var(--o-ui-br-circular); position: absolute; - transform: translate(2px, 2px); + transform: translate(0.125rem, 0.125rem); transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-focus); } @@ -81,7 +81,7 @@ } .o-ui-switch-checked .o-ui-switch-control::before { - transform: translate(calc(var(--o-ui-sz-6) / 2 + 2px), 2px); + transform: translate(calc(var(--o-ui-sz-6) / 2 + 0.125rem), 0.125rem); } /* STATE | FOCUS */ @@ -124,7 +124,7 @@ } .o-ui-switch-sm.o-ui-switch-checked .o-ui-switch-control::before { - transform: translate(calc(var(--o-ui-sz-5) / 2 + 2px), 2px); + transform: translate(calc(var(--o-ui-sz-5) / 2 + 0.125rem), 0.125rem); } /* MEDIUM */ @@ -140,5 +140,5 @@ } .o-ui-switch-md.o-ui-switch-checked .o-ui-switch-control::before { - transform: translate(calc(var(--o-ui-sz-6) / 2 + 2px), 2px); + transform: translate(calc(var(--o-ui-sz-6) / 2 + 0.125rem), 0.125rem); } diff --git a/packages/components/src/tabs/src/Tabs.css b/packages/components/src/tabs/src/Tabs.css index 7d8a6cc98..8571043f2 100644 --- a/packages/components/src/tabs/src/Tabs.css +++ b/packages/components/src/tabs/src/Tabs.css @@ -51,7 +51,7 @@ /* TAB LIST | POPOVER */ .o-ui-tab-list-popover { background-color: var(--o-ui-bg-alias-surface); - 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); box-shadow: var(--o-ui-bs-alias-floating); margin-top: var(--o-ui-sp-2); @@ -59,7 +59,7 @@ /* TAB LIST | POPOVER | TAB */ .o-ui-tab-list-popover .o-ui-tab { - padding-left: calc(var(--o-ui-sp-3) + 1px); + padding-left: calc(var(--o-ui-sp-3) + 0.0625rem); padding-right: var(--o-ui-sp-8); justify-content: start; width: 100%; @@ -118,7 +118,7 @@ /* TAB | WITH ICON */ .o-ui-tab-has-icon, .o-ui-tab-list-popover .o-ui-tab-has-icon { - padding-left: calc(0.5rem + 1px); + padding-left: calc(0.5rem + 0.0625rem); } /* TAB | STATE | FOCUS */ @@ -148,7 +148,7 @@ /* TAB | STATE | FOCUS | ORIENTATION | VERTICAL */ .o-ui-tabs-vertical .o-ui-tab::before { - left: 1px; + left: 0.0625rem; right: 0; } @@ -257,7 +257,7 @@ /* PANEL | ORIENTATION | VERTICAL */ .o-ui-tabs-vertical .o-ui-tab-panel { - padding: calc(var(--o-ui-sp-3) + 1px) var(--o-ui-sp-4); + padding: calc(var(--o-ui-sp-3) + 0.0625rem) var(--o-ui-sp-4); } /* PANEL | FLUID */ diff --git a/packages/components/src/tag/src/Tag.css b/packages/components/src/tag/src/Tag.css index f6fab19eb..e4c131fbd 100644 --- a/packages/components/src/tag/src/Tag.css +++ b/packages/components/src/tag/src/Tag.css @@ -120,15 +120,15 @@ a.o-ui-tag-solid.o-ui-tag-disabled { /* OUTLINE */ .o-ui-tag-outline { background-color: var(--o-ui-bg-alias-surface); - border: 1px solid var(--o-ui-b-alias-mid-break); + border: 0.0625rem solid var(--o-ui-b-alias-mid-break); } button.o-ui-tag-outline::after, a.o-ui-tag-outline::after { - top: -1px; - left: -1px; - right: -1px; - bottom: -1px; + top: -0.0625rem; + left: -0.0625rem; + right: -0.0625rem; + bottom: -0.0625rem; } /* OUTLINE | AS ANCHOR / BUTTON | STATES */ @@ -138,7 +138,7 @@ a:not([disabled]).o-ui-tag-outline:hover, button:not([disabled]).o-ui-tag-outline.o-ui-tag-hover, a:not([disabled]).o-ui-tag-outline.o-ui-tag-hover { background-color: var(--o-ui-bg-alias-basic-transparent-hover); - border: 1px solid var(--o-ui-b-alias-mid-break); + border: 0.0625rem solid var(--o-ui-b-alias-mid-break); } /* OUTLINE | AS ANCHOR / BUTTON | STATES | ACTIVE */ @@ -147,7 +147,7 @@ a:not([disabled]).o-ui-tag-outline:active, button:not([disabled]).o-ui-tag-outline.o-ui-tag-active, a:not([disabled]).o-ui-tag-outline.o-ui-tag-active { background-color: var(--o-ui-bg-alias-basic-transparent-active); - border: 1px solid var(--o-ui-b-alias-high-break); + border: 0.0625rem solid var(--o-ui-b-alias-high-break); } /* OUTLINE | AS ANCHOR / BUTTON | STATES | DISABLED */ @@ -173,7 +173,7 @@ a.o-ui-tag-outline.o-ui-tag-disabled { } .o-ui-tag.o-ui-tag-fluid .o-ui-tag-dot { - margin-right: calc(var(--o-ui-sp-2) + 1px); + margin-right: calc(var(--o-ui-sp-2) + 0.0625rem); } /* CONTENT | START ICON */ diff --git a/packages/components/src/tile/src/Tile.css b/packages/components/src/tile/src/Tile.css index 3631ed138..4a4338fa9 100644 --- a/packages/components/src/tile/src/Tile.css +++ b/packages/components/src/tile/src/Tile.css @@ -15,12 +15,12 @@ } .o-ui-tile::before { - border: 1px solid transparent; + border: 0.0625rem solid transparent; 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; border-radius: inherit; @@ -47,10 +47,10 @@ .o-ui-tile:after { 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); @@ -123,13 +123,13 @@ } .o-ui-tile-vertical .o-ui-tile-thumbnail { - border-top-left-radius: calc(var(--o-ui-br-4) - 1px); - border-top-right-radius: calc(var(--o-ui-br-4) - 1px); + border-top-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); + border-top-right-radius: calc(var(--o-ui-br-4) - 0.0625rem); } .o-ui-tile-horizontal .o-ui-tile-thumbnail { - border-top-left-radius: calc(var(--o-ui-br-4) - 1px); - border-bottom-left-radius: calc(var(--o-ui-br-4) - 1px); + border-top-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); + border-bottom-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); } /* IMAGE */ @@ -139,13 +139,13 @@ } .o-ui-tile-vertical .o-ui-tile-image { - border-top-left-radius: calc(var(--o-ui-br-4) - 1px); - border-top-right-radius: calc(var(--o-ui-br-4) - 1px); + border-top-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); + border-top-right-radius: calc(var(--o-ui-br-4) - 0.0625rem); } .o-ui-tile-horizontal .o-ui-tile-image { - border-top-left-radius: calc(var(--o-ui-br-4) - 1px); - border-bottom-left-radius: calc(var(--o-ui-br-4) - 1px); + border-top-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); + border-bottom-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); } /* ILLUSTRATION */ @@ -154,13 +154,13 @@ } .o-ui-tile-vertical .o-ui-tile-illustration { - border-top-left-radius: calc(var(--o-ui-br-4) - 1px); - border-top-right-radius: calc(var(--o-ui-br-4) - 1px); + border-top-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); + border-top-right-radius: calc(var(--o-ui-br-4) - 0.0625rem); } .o-ui-tile-horizontal .o-ui-tile-illustration { - border-top-left-radius: calc(var(--o-ui-br-4) - 1px); - border-bottom-left-radius: calc(var(--o-ui-br-4) - 1px); + border-top-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); + border-bottom-left-radius: calc(var(--o-ui-br-4) - 0.0625rem); } /* MAIN SECTION */ diff --git a/storybook/styles/docs.css b/storybook/styles/docs.css index 35d412d84..4c3e546e7 100644 --- a/storybook/styles/docs.css +++ b/storybook/styles/docs.css @@ -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 { @@ -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, @@ -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 { @@ -337,12 +337,12 @@ /* ELEMENTS | KBD */ .sbdocs kbd { line-height: var(--o-ui-lh-1); - margin: 0 2px; + margin: 0 0.125rem; padding: 0.8125rem 0.3125rem; white-space: nowrap; border-radius: 0.8125rem; font-size: 0.8125rem; - border: 1px solid #EEEEEE; + border: 0.0625rem solid #EEEEEE; color: rgba(51, 51, 51, 0.9); background-color: #F8F8F8; } @@ -394,7 +394,7 @@ top: 50%; left: 50%; border-radius: var(--o-ui-br-circular); - border: 2px solid var(--o-ui-b-alias-low-break); + 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); @@ -415,7 +415,7 @@ } /* 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 { From fd10091955b6ad99a0eecd07543bdceaf7e98d34 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 1 Feb 2023 13:57:48 -0500 Subject: [PATCH 3/4] converted px to rems --- docs/features/ResponsiveStyles.stories.mdx | 18 +- .../style-props/PropsReferenceTable.jsx | 10 +- .../style-props/StyleProps.stories.mdx | 10 +- .../theming/ThemeSpecificationTable.jsx | 6 +- docs/features/theming/Theming.stories.mdx | 12 +- docs/features/tokens/ColorPaletteTable.jsx | 8 +- docs/features/tokens/TokenTable.jsx | 8 +- docs/materials/motion/Motion.stories.mdx | 4 +- .../tests/chromatic/Accordion.chroma.jsx | 6 +- .../chromatic/createAccordionTestSuite.jsx | 4 +- .../alert/tests/chromatic/Alert.chroma.jsx | 6 +- .../tests/chromatic/Autocomplete.stories.tsx | 12 +- .../avatar/tests/chromatic/Avatar.stories.tsx | 2 +- .../tests/chromatic/AvatarGroup.stories.tsx | 2 +- packages/components/src/badge/docs/Circle.jsx | 2 +- packages/components/src/badge/docs/Square.jsx | 2 +- .../tests/chromatic/BadgeCount.stories.tsx | 2 +- .../tests/chromatic/BadgeDot.stories.tsx | 2 +- .../tests/chromatic/BadgeIcon.stories.tsx | 2 +- .../src/badge/tests/chromatic/BadgeUtils.tsx | 2 +- .../src/badge/tests/jest/Badge.ssr.test.tsx | 2 +- .../src/badge/tests/jest/Badge.test.tsx | 2 +- .../components/src/card/docs/Card.stories.mdx | 2 +- .../src/card/tests/chromatic/Card.chroma.jsx | 6 +- .../card/tests/chromatic/createTestSuite.jsx | 6 +- .../chromatic/createDateInputTestSuite.jsx | 4 +- .../createDateRangeInputTestSuite.jsx | 2 +- .../dialog/tests/chromatic/Dialog.stories.tsx | 4 +- .../chromatic/DisclosureArrow.stories.tsx | 2 +- .../src/divider/docs/Divider.stories.mdx | 2 +- .../tests/chromatic/Divider.stories.tsx | 2 +- .../chromatic/DividerVertical.stories.tsx | 2 +- .../src/dot/tests/chromatic/Dot.stories.tsx | 4 +- .../field/tests/chromatic/Field.stories.tsx | 2 +- .../tests/chromatic/GroupField.stories.tsx | 2 +- .../form/tests/chromatic/Fieldset.stories.tsx | 2 +- .../src/form/tests/chromatic/Form.stories.tsx | 2 +- .../src/html/tests/chromatic/html.stories.tsx | 2 +- .../src/html/tests/typescript/html.tsx | 4 +- .../tests/chromatic/IconList.stories.tsx | 2 +- .../chromatic/IllustratedMessage.stories.tsx | 30 +- .../tests/chromatic/Illustration.stories.tsx | 32 +- .../src/image/docs/Image.stories.mdx | 6 +- .../image/tests/chromatic/Image.stories.tsx | 50 +- .../tests/chromatic/SvgImage.stories.tsx | 4 +- .../input-group/docs/CustomAddon.sample.jsx | 2 +- .../input-group/docs/CustomInput.sample.jsx | 2 +- .../tests/chromatic/InputGroup.stories.tsx | 2 +- .../tests/jest/adaptInputStylingProps.test.ts | 8 +- .../tests/chromatic/FlexColumn.stories.tsx | 2 +- .../tests/chromatic/FlexRow.stories.tsx | 2 +- .../layout/tests/chromatic/Grid.stories.tsx | 54 +- .../components/src/link/docs/Link.stories.mdx | 6 +- .../src/link/tests/chromatic/Link.chroma.jsx | 2 +- .../chromatic/createTextLinkTestSuite.jsx | 8 +- .../tests/chromatic/Listbox.stories.tsx | 4 +- .../tests/chromatic/Lozenge.stories.tsx | 4 +- .../src/menu/tests/chromatic/Menu.stories.tsx | 4 +- .../tests/chromatic/MenuTrigger.stories.tsx | 8 +- .../message/docs/ControlledMessage.sample.jsx | 2 +- .../tests/chromatic/Message.stories.tsx | 2 +- .../modal/tests/chromatic/Modal.stories.tsx | 2 +- .../tests/chromatic/NumberInput.stories.tsx | 4 +- .../tests/chromatic/Overlay.stories.tsx | 2 +- .../tests/chromatic/Underlay.stories.tsx | 2 +- .../tests/chromatic/Popover.stories.tsx | 2 +- .../tests/chromatic/RadioGroup.stories.tsx | 2 +- .../src/select/docs/CustomSelect.sample.jsx | 2 +- .../select/tests/chromatic/Select.chroma.jsx | 2 +- .../tests/chromatic/createTestSuite.jsx | 6 +- .../src/styling/src/BreakpointProvider.tsx | 10 +- .../src/styled-system/useStyledSystem.ts | 6 +- .../useStyledSystem.test.tsx.snap | 4442 ++++++++--------- .../tests/jest/useStyledSystem.test.tsx | 2 +- .../switch/tests/chromatic/Switch.chroma.jsx | 2 +- .../components/src/tabs/docs/Tabs.stories.mdx | 2 +- packages/components/src/tabs/src/TabList.tsx | 4 +- .../src/tabs/tests/chromatic/Tabs.stories.tsx | 12 +- .../components/src/tag/docs/Tag.stories.mdx | 2 +- .../tag/tests/chromatic/TagList.stories.tsx | 4 +- .../tests/chromatic/TextArea.stories.tsx | 2 +- .../tests/chromatic/PasswordInput.stories.tsx | 4 +- .../tests/chromatic/SearchInput.stories.tsx | 4 +- .../tests/chromatic/TextInput.stories.tsx | 2 +- .../text-input/tests/jest/TextInput.test.tsx | 8 +- .../components/src/tile/docs/Tile.stories.mdx | 4 +- .../components/src/tile/src/TileGroup.tsx | 4 +- .../src/tile/tests/chromatic/Tile.chroma.jsx | 24 +- .../tests/chromatic/TileGroup.stories.tsx | 2 +- .../tile/tests/chromatic/TileLink.chroma.jsx | 4 +- .../chromatic/createTileLinkTestSuite.jsx | 2 +- .../tests/chromatic/createTileTestSuite.jsx | 6 +- .../src/toolbar/docs/Toolbar.stories.mdx | 4 +- .../tests/chromatic/Toolbar.stories.tsx | 2 +- .../tests/chromatic/Tooltip.stories.tsx | 8 +- .../docs/ControlledTransition.sample.jsx | 2 +- .../tests/chromatic/Heading.stories.tsx | 2 +- .../chromatic/ContextualHelp.stories.tsx | 2 +- storybook/decorators/withCenteredCanvas.jsx | 2 +- storybook/decorators/withThemeProvider.jsx | 2 +- storybook/preview.js | 10 +- 101 files changed, 2510 insertions(+), 2510 deletions(-) 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 573ff9e43..86bba79ba 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 aff52bfed..41139012d 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/tests/chromatic/Autocomplete.stories.tsx b/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx index bdeb99712..8eee2c97e 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 24fcce43f..e85de2cef 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 7aa8952f7..fb131c7b7 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/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/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/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/tests/chromatic/Dialog.stories.tsx b/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx index 29cc0a765..70a296e25 100644 --- a/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx +++ b/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx @@ -467,7 +467,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." @@ -541,7 +541,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/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 53579b291..c0471891b 100644 --- a/packages/components/src/icons/tests/chromatic/IconList.stories.tsx +++ b/packages/components/src/icons/tests/chromatic/IconList.stories.tsx @@ -45,7 +45,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/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/tests/chromatic/InputGroup.stories.tsx b/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx index 039279a12..203f2b07b 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/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 f08a294d1..dbaebec90 100644 --- a/packages/components/src/link/docs/Link.stories.mdx +++ b/packages/components/src/link/docs/Link.stories.mdx @@ -172,13 +172,13 @@ A link can use a different shape to match his content shape on focus state. - + - + - + 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 2f37e368c..4be5aeba2 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/tests/chromatic/Listbox.stories.tsx b/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx index 75a40a534..164eb1757 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 b01587a13..25e7cc8b8 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/tests/chromatic/Menu.stories.tsx b/packages/components/src/menu/tests/chromatic/Menu.stories.tsx index 5df42a996..bf1f1b509 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 1d166d6e5..ed1f7d5ab 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 ( - +