Converted px to rems in the base code.

.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;
 }

.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 {

.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;
 }

.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;

.storybook/decorators/withCenteredCanvas.jsx

@@ -22,7 +22,7 @@ export function withCenteredCanvas(story, context) {
             <Div
                 width="90%"
                 // Important for chromatic tests.
-                height="600px"
+                height="37.5rem"
                 marginRight="auto"
                 marginLeft="auto"
                 style={canvasLayout}

.storybook/decorators/withThemeProvider.jsx

@@ -12,7 +12,7 @@ export function withThemeProvider(story, context) {
             theme={ShareGateTheme}
             colorScheme={globals.colorScheme}
             // min-height ensure popup components renders correctly in chromatic tests.
-            height={viewMode === "story" || isChromatic ? "600px" : undefined}
+            height={viewMode === "story" || isChromatic ? "37.5rem" : undefined}
         >
             {story()}
         </ThemeProvider>

.storybook/preview.js

@@ -69,35 +69,35 @@ export const parameters = {
             xs: {
                 name: "xs (640px)",
                 styles: {
-                    width: "640px",
+                    width: "40rem",
                     height: "100%"
                 }
             },
             sm: {
                 name: "sm (768px)",
                 styles: {
-                    width: "768px",
+                    width: "48rem",
                     height: "100%"
                 }
             },
             md: {
                 name: "md (1024px)",
                 styles: {
-                    width: "1024px",
+                    width: "64rem",
                     height: "100%"
                 }
             },
             lg: {
                 name: "lg (1280px)",
                 styles: {
-                    width: "1280px",
+                    width: "80rem",
                     height: "100%"
                 }
             },
             xl: {
                 name: "xl (1536px)",
                 styles: {
-                    width: "1536px",
+                    width: "96rem",
                     height: "100%"
                 }
             }

.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;
 }

.storybook/styles/docs.css

@@ -9,7 +9,7 @@
 }
 
 .sbdocs.sbdocs-content {
-    max-width: 1280px;
+    max-width: 80rem;
     font-size: var(--o-ui-fs-4);
 }
 
@@ -21,7 +21,7 @@
 
 /* ARGS TABLE */
 .docblock-argstable {
-    min-width: 220px;
+    min-width: 13.75rem;
     margin-bottom: 0;
 }
 
@@ -72,7 +72,7 @@
 }
 
 .docblock-argstable-body td label input[type=radio]:focus {
-    outline-offset: 1px;
+    outline-offset: 0.0625rem;
 }
 
 .docblock-argstable-body td label span {
@@ -98,13 +98,13 @@
     color: var(--o-ui-accent-6) !important;
     font-family: var(--orbit-font-family) !important;
     font-size: var(--o-ui-fs-2) !important;
-    padding-left: 2px !important;
+    padding-left: 0.125rem !important;
 }
 
 /* EMPTY BLOCK */
 .docblock-emptyblock {
     color: var(--o-ui-neutral-6) !important;
-    border: 1px dashed var(--o-ui-neutral-2) !important;
+    border: 0.0625rem dashed var(--o-ui-neutral-2) !important;
 }
 
 .docblock-emptyblock a {
@@ -114,7 +114,7 @@
 /* SOURCE BLOCK */
 .docblock-source {
     margin-top: var(--o-ui-sp-7) !important;
-    margin-bottom: 35px !important;
+    margin-bottom: 2.1875rem !important;
 }
 
 .sbdocs.sbdocs-preview,
@@ -171,7 +171,7 @@
 }
 
 .sbdocs.sbdocs-h2 {
-    border-bottom: 1px solid var(--o-ui-neutral-2);
+    border-bottom: 0.0625rem solid var(--o-ui-neutral-2);
 }
 
 .sbdocs.sbdocs-h2,
@@ -209,7 +209,7 @@
     border: none !important;
     border-radius: 0 !important;
     background-color: transparent !important;
-    font-size: 15px !important;
+    font-size: 0.9375rem !important;
 }
 
 /* ELEMENTS | LINK */
@@ -233,7 +233,7 @@
 .sbdocs.sbdocs-a:focus {
     border-radius: var(--o-ui-br-4);
     background-color: rgba(0, 0, 0, 0.04);
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
+    box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.04);
 }
 
 .sbdocs .sbdocs-a code {
@@ -250,7 +250,7 @@
 
 /* ELEMENTS | TABLE */
 .sbdocs.sbdocs-table tr {
-    border-top: 1px solid var(--o-ui-neutral-2);
+    border-top: 0.0625rem solid var(--o-ui-neutral-2);
 }
 
 .sbdocs.sbdocs-table .thead tr th {
@@ -259,9 +259,9 @@
 }
 
 .sbdocs.sbdocs-table thead tr {
-    border-top: 1px solid var(--o-ui-b-alias-low-break);
-    border-left: 1px solid var(--o-ui-b-alias-low-break);
-    border-right: 1px solid var(--o-ui-b-alias-low-break);
+    border-top: 0.0625rem solid var(--o-ui-b-alias-low-break);
+    border-left: 0.0625rem solid var(--o-ui-b-alias-low-break);
+    border-right: 0.0625rem solid var(--o-ui-b-alias-low-break);
     color: var(--o-ui-text-alias-primary);
 }
 
@@ -277,16 +277,16 @@
 
 .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);
     background-color: var(--o-ui-bg-alias-surface);
 }
 
 .sbdocs.sbdocs-table tbody {
-    border: 1px solid var(--o-ui-b-alias-low-break);
+    border: 0.0625rem solid var(--o-ui-b-alias-low-break);
 }
 
 .sbdocs.sbdocs-table a {
@@ -319,7 +319,7 @@
 }
 
 .sb-show-main details {
-    padding: 8px;
+    padding: 0.5rem;
     border-radius: var(--o-ui-br-4);
     background-color: var(--o-ui-purple-1);
 }
@@ -337,12 +337,12 @@
 /* ELEMENTS | KBD */
 .sbdocs kbd {
     line-height: var(--o-ui-lh-1);
-    margin: 0 2px;
-    padding: 3px 5px;
+    margin: 0 0.125rem;
+    padding: 0.8125rem 0.3125rem;
     white-space: nowrap;
-    border-radius: 3px;
-    font-size: 13px;
-    border: 1px solid #EEEEEE;
+    border-radius: 0.8125rem;
+    font-size: 0.8125rem;
+    border: 0.0625rem solid #EEEEEE;
     color: rgba(51, 51, 51, 0.9);
     background-color: #F8F8F8;
 }
@@ -360,7 +360,7 @@
 
 /* ELEMENTS | LINK ICON */
 .sbdocs.sbdocs-h1 a {
-    margin-left: -28px;
+    margin-left: -1.75rem;
 }
 
 .sbdocs.sbdocs-h1 a svg {
@@ -393,8 +393,8 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    border-radius: 50px;
-    border: 2px solid var(--o-ui-b-alias-low-break);
+    border-radius: var(--o-ui-br-circular);
+    border: 0.125rem solid var(--o-ui-b-alias-low-break);
     border-top-color: var(--o-ui-white);
     animation: o-ui-sb-spinner 1s linear infinite;
     transform: translate(-50%, -50%) rotate(0deg);
@@ -411,11 +411,11 @@
 
 /* Token Specific Styles */
 .token-table tr td:last-child {
-    padding: 0 0 0 13px !important;
+    padding: 0 0 0 0.8125rem !important;
 }
 
 /* HACK OVERRIDES - INPUT */
-@media screen and (max-width: 420px) {
+@media screen and (max-width: 26.25rem) {
     .sbdocs .o-ui .o-ui-input {
         width: 100%;
     }

.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 {

docs/features/ResponsiveStyles.stories.mdx

@@ -47,18 +47,18 @@ The following responsive breakpoints are supported by Orbit [style props](?path=
 
 <Table
     columns={[
-        { title: "Size", headerStyle: { width: "75px" }, rowClassName: "code" },
-        { title: "Media query", headerStyle: { width: "200px" }, rowClassName: "code" }
+        { title: "Size", headerStyle: { width: "4.6875rem" }, rowClassName: "code" },
+        { title: "Media query", headerStyle: { width: "20rem" }, rowClassName: "code" }
     ]}
     rows={[
-        ["xs", "min-width: 640px"],
-        ["sm", "min-width: 768px"],
-        ["md", "min-width: 1024px"],
-        ["lg", "min-width: 1280px"],
-        ["xl", "min-width: 1536px"]
+        ["xs", "min-width: 40rem (640px@16px)"],
+        ["sm", "min-width: 48rem (768px@16px)"],
+        ["md", "min-width: 64rem (1024px@16px)"],
+        ["lg", "min-width: 80rem (1280px@16px)"],
+        ["xl", "min-width: 96rem (1536px@16px)"]
     ]}
     style={{
-        marginTop: "24px",
-        marginBottom: "24px"
+        marginTop: "1.5rem",
+        marginBottom: "1.5rem"
     }}
 />

docs/features/style-props/PropsReferenceTable.jsx

@@ -30,11 +30,11 @@ export function PropsReferenceTable({ rows }) {
     return (
         <Table
             columns={[
-                { title: "Prop", headerStyle: { width: "200px" }, rowClassName: "code" },
-                { title: "CSS property", headerStyle: { width: "250px" }, rowClassName: "code" },
-                { title: "Theme key", headerStyle: { width: "125px" }, rowClassName: "code" },
-                { title: "Scale", headerStyle: { width: "200px" }, rowClassName: "code" },
-                { title: "Supports", headerStyle: { width: "300px" }, rowClassName: "code" }
+                { title: "Prop", headerStyle: { width: "12.5rem" }, rowClassName: "code" },
+                { title: "CSS property", headerStyle: { width: "15.625rem" }, rowClassName: "code" },
+                { title: "Theme key", headerStyle: { width: "7.8125rem" }, rowClassName: "code" },
+                { title: "Scale", headerStyle: { width: "12.5rem" }, rowClassName: "code" },
+                { title: "Supports", headerStyle: { width: "18.75rem" }, rowClassName: "code" }
             ]}
             rows={rows.map(x => toRowValues(x))}
         />