Update to Style System

.storybook/components/checkered-background/CheckeredBackground.tsx

@@ -9,7 +9,7 @@ export function CheckeredBackground({ children, ...rest }: DivProps) {
             {...mergeProps(
                 rest,
                 {
-                    color: "alias-primary",
+                    color: "neutral",
                     paddingLeft: 2,
                     className: "o-ui-sb-checkered-background-preview"
                 }

.storybook/components/experimental-message/ExperimentalMessage.tsx

@@ -14,7 +14,7 @@ export function ExperimentalMessage({ noDoc, noTests, noVisualTesting, noFinalDe
     const hasDetails = [noDoc, noTests, noVisualTesting, noFinalDesign, noMobileSupport].some(validation => validation);
 
     return (
-        <Message variant="negative" fontSize={4} {...rest}>
+        <Message variant="negative" fontSize={160} {...rest}>
             <Content>
                 <Heading>Experimental</Heading>
                 <Text size="lg">

.storybook/components/github-link/GithubLink.tsx

@@ -14,7 +14,7 @@ export function GithubLink({ path, logo = false, children, ...rest }: GithubLink
     if (logo) {
         return (
             <Flex inline alignItems="center">
-                <Img src={GithubLogo} alt="Github" width={5} height={5} marginRight={2} />
+                <Img src={GithubLogo} alt="Github" width={320} height={320} marginRight={80} />
                 <ExternalLink href={getGithubUrl(path)} {...rest}>{children}</ExternalLink>
             </Flex>
         );

.storybook/decorators/withCenteredCanvas.jsx

@@ -16,7 +16,7 @@ export function withCenteredCanvas(story, context) {
             top="0"
             left="0"
             right="0"
-            marginTop={10}
+            marginTop="3.5rem"
             alignItems="center"
         >
             <Div

docs/features/ResponsiveStyles.stories.mdx

@@ -16,7 +16,7 @@ Orbiter [style props](?path=/docs/style-props--page) accepts a specialized synta
 By passing an object to any style props, you can specify which style will be applied at different breakpoints. These rules are on a [`min-width` basis](https://nikitahl.com/difference-between-min-width-vs-max-width) meaning that a `sm` value will apply from `768px` and up until another higher breakpoint matches.
 
 <Preview>
-    <Div backgroundColor={{ base: "green-2", xs: "purple-2", sm: "green-2", md: "accent-2", lg: "neutral-2", xl: "warning-2" }} width={18} maxWidth="100%" padding={4}>
+    <Div backgroundColor={{ base: "moss-200", xs: "sapphire-200", sm: "moss-200", md: "sapphire-200", lg: "rock-200", xl: "sunken-treasure-200" }} width="30rem" maxWidth="100%" padding={160}>
         <Paragraph fontSize={4}>Lost in space.</Paragraph>
     </Div>
 </Preview>
@@ -26,7 +26,7 @@ By passing an object to any style props, you can specify which style will be app
 Not all breakpoints must be explicitly defined. In the following example, `base` and `lg` breakpoints are explicitly declared. When match, the `xl` breakpoint will implicitly take the value set by the `lg` breakpoint since it is wider than `lg`. Everything below `lg` inherits the `base` color.
 
 <Preview>
-    <Div backgroundColor={{ base: "alias-success", lg: "alias-warning" }} width={18} maxWidth="100%" padding={4}>
+    <Div backgroundColor={{ base: "success", lg: "warning" }} width="30rem" maxWidth="100%" padding={160}>
         <Paragraph fontSize={4}>Lost in space.</Paragraph>
     </Div>
 </Preview>

docs/features/color-schemes/ColorSchemeToggle.sample.jsx

@@ -15,7 +15,7 @@ render(() => {
 
     return (
         <ThemeProvider colorScheme={parentColorScheme}>
-            <Div backgroundColor="alias-surface" padding={2}>
+            <Div backgroundColor="neutral" padding={2}>
                 <ColorSchemeToggle />
             </Div>
         </ThemeProvider>

docs/features/style-props/StyleProps.stories.mdx

@@ -25,9 +25,9 @@ To apply a style value, set a value to any [style property](#properties) of an O
     paddingTop={3}
     paddingBottom={3}
     marginBottom={3}
-    color="alias-static-white"
+    color="#FFFFFF"
     borderRadius={3}
-    backgroundColor="alias-accent">
+    backgroundColor="primary">
     Lost in space.
 </Div>
 ```
@@ -39,7 +39,7 @@ Props like `border` and `paddingX` are also provided to help you save keystrokes
 ```jsx
 <Div
     paddingY={3}
-    border="alias-accent">
+    border="primary">
     Lost in space.
 </Div>
 ```
@@ -53,7 +53,7 @@ Inspired by [Styled System](https://styled-system.com/), Orbiter's style props a
 To help achieve a consistent user interface, Orbiter style props are based on scales and values defined in a customizable [theme](?path=/docs/theming--page).
 
 <Preview>
-    <Div width={18} backgroundColor="alias-accent-light" padding={4} borderRadius={2} maxWidth="100%">
+    <Div width="30rem" backgroundColor="surface-weak" padding={160} borderRadius={2} maxWidth="100%">
         <Paragraph fontSize={4}>Lost in space.</Paragraph>
     </Div>
 </Preview>
@@ -84,7 +84,7 @@ Since the following user action pseudo-classes are often used, some style props
 > Not all style props supports user action pseudo-classes. Find out which props support user action pseudo-classes in the [reference](#properties) section.
 
 <Preview>
-    <Div backgroundColorHover="alias-success-light" backgroundColor="alias-warning-light" padding={4} width={18} maxWidth="100%" borderRadius={2}>
+    <Div backgroundColorHover="status-positive" backgroundColor="warning-weak" padding={160} width="30rem" maxWidth="100%" borderRadius={2}>
         <Paragraph fontSize={4}>Lost in space.</Paragraph>
     </Div>
 </Preview>
@@ -106,11 +106,11 @@ To facilitate layouts, Orbiter provides specialized components for [grid](https:
 When applicable, always prefer using a [`<Grid>`](?path=/docs/grid--areas) or [`<Flex>`](?path=/docs/flex--horizontal) component instead of a [`<Div>`](?path=/docs/html-div--example) component.
 
 ```jsx
-<Grid templateColumns="1fr 1fr" gap={2} height={10}>
-    <Div backgroundColor="accent-5" />
-    <Div backgroundColor="alert-5" />
-    <Div backgroundColor="green-5" />
-    <Div backgroundColor="neutral-5" />
+<Grid templateColumns="1fr 1fr" gap={80} height={800}>
+    <Div backgroundColor="sapphire-500" />
+    <Div backgroundColor="amanita-500" />
+    <Div backgroundColor="moss-500" />
+    <Div backgroundColor="rock-500" />
 </Grid>
 ```
 
@@ -163,7 +163,7 @@ The following tables provide a list of all available style props by category.
 ### Space
 
 ```jsx
-<Div padding={4}>
+<Div padding={160}>
     Galaxy
 </Div>
 ```
@@ -191,7 +191,7 @@ The following tables provide a list of all available style props by category.
 ### Color
 
 ```jsx
-<Text backgroundColor="alias-accent-faint" color="alias-static-white">
+<Text backgroundColor="primary-weak" color="#FFFFFF">
     Galaxy
 </Text>
 ```
@@ -233,7 +233,7 @@ The following tables provide a list of all available style props by category.
 ### Layout
 
 ```jsx
-<Div width={18}>
+<Div width="30rem">
     Galaxy
 </Div>
 ```
@@ -395,7 +395,7 @@ Border props (border, borderBottom, borderTop, borderRight, borderLeft) uses an
 
 ```jsx
 <Div
-    boxShadow="alias-lifted"
+    boxShadow="lifted"
 />
 ```
 

docs/features/tokens/ColorPaletteTable.jsx

@@ -16,7 +16,7 @@ function toRowValues({ value, variable, color }) {
         value,
         variable,
         color,
-        <Div backgroundColor={value} height={6}></Div>
+        <Div backgroundColor={value} height={400}></Div>
     ];
 }
 

docs/features/tokens/TokenTable.jsx

@@ -52,38 +52,38 @@ export function TokenTable({ colors }) {
 }
 
 export function backgroundRenderer(token) {
-    return <Div height={6} backgroundColor={token}></Div>;
+    return <Div height={400} backgroundColor={token}></Div>;
 }
 
 export function borderRenderer(token) {
-    return <Div padding={2}><Div height={6} border={token}></Div></Div>;
+    return <Div padding={2}><Div height={400} border={token}></Div></Div>;
 }
 
 export function boxShadowRenderer(token) {
-    return <Div paddingRight={4}><Div boxShadow={token} marginY={3} height={6}></Div></Div>;
+    return <Div paddingRight={4}><Div boxShadow={token} marginY={3} height={400}></Div></Div>;
 }
 
 export function durationRenderer() {
-    return <Div paddingRight={4}><Div marginY={3} height={6}></Div></Div>;
+    return <Div paddingRight={4}><Div marginY={3} height={400}></Div></Div>;
 }
 
 export function easingRenderer() {
-    return <Div paddingRight={4}><Div marginY={3} height={6}></Div></Div>;
+    return <Div paddingRight={4}><Div marginY={3} height={400}></Div></Div>;
 }
 
 export function fontSizeRenderer(token) {
-    return <Div height={12} display="flex" alignItems="center" justifyContent="start"><Text fontSize={token} lineHeight={1}>Ag</Text></Div>;
+    return <Div height={960} display="flex" alignItems="center" justifyContent="start"><Text fontSize={token} lineHeight={1}>Ag</Text></Div>;
 }
 
 export function fontWeightRenderer(token) {
-    return <Flex height={5} alignItems="center"><Text fontWeight={token} fontSize={6} lineHeight={1}>Ag</Text></Flex>;
+    return <Flex height={320} alignItems="center"><Text fontWeight={token} fontSize={6} lineHeight={1}>Ag</Text></Flex>;
 }
 
 export function iconRenderer(token) {
-    if (token === "alias-static-white") {
-        return <Div height={6} display="flex" alignItems="center" justifyContent="start" backgroundColor="#272626"><InfoCircleMajorIcon fill={token} /></Div>;
+    if (token === "samoyed") {
+        return <Div height={400} display="flex" alignItems="center" justifyContent="start" backgroundColor="#272626"><InfoCircleMajorIcon fill={token} /></Div>;
     } else {
-        return <Div height={6} display="flex" alignItems="center" justifyContent="start"><InfoCircleMajorIcon fill={token} /></Div>;
+        return <Div height={400} display="flex" alignItems="center" justifyContent="start"><InfoCircleMajorIcon fill={token} /></Div>;
     }
 }
 
@@ -93,9 +93,9 @@ export function lineHeightRenderer(token) {
 
 export function radiiRenderer(token) {
     if (token === "circular") {
-        return <Div height={4} width={4} borderRadius={token} border="alias-accent"></Div>;
+        return <Div height={240} width={240} borderRadius={token} border="primary"></Div>;
     } else {
-        return <Div height={4} width={8} borderRadius={token} border="alias-accent"></Div>;
+        return <Div height={240} width="3.5rem" borderRadius={token} border="primary"></Div>;
     }
 }
 
@@ -104,14 +104,14 @@ export function sizingRenderer() {
 }
 
 export function spacingRenderer(token) {
-    return <Div height={4} width={token} backgroundColor="alias-accent" borderRadius={2}></Div>;
+    return <Div height={240} width={token} backgroundColor="primary" borderRadius={2}></Div>;
 }
 
 export function textRenderer(token) {
-    if (token === "alias-static-white") {
-        return <Div height={6} display="flex" alignItems="center" justifyContent="start" backgroundColor="#272626"><Text marginLeft={1} color={token} size="lg">Moon</Text></Div>;
+    if (token === "#FFFFFF") {
+        return <Div height={400} display="flex" alignItems="center" justifyContent="start" backgroundColor="#272626"><Text marginLeft={1} color={token} size="lg">Moon</Text></Div>;
     } else {
-        return <Div height={6} display="flex" alignItems="center" justifyContent="start"><Text marginLeft={1} color={token} size="lg">Moon</Text></Div>;
+        return <Div height={400} display="flex" alignItems="center" justifyContent="start"><Text marginLeft={1} color={token} size="lg">Moon</Text></Div>;
     }
 }
 

docs/getting-started/Installation.stories.mdx

@@ -84,8 +84,8 @@ You're all set! You can start creating your application with Orbiter:
 import { Div, Text } from "@workleap/orbiter-ui";
 
 export const App = () => (
-  <Div backgroundColor="alias-warning">
-    <Text color="alias-primary">Hello World!</Text>
+  <Div backgroundColor="warning">
+    <Text color="neutral">Hello World!</Text>
   </Div>
 );
 ```

packages/components/src/accordion/docs/AccordionContext.sample.jsx

@@ -5,7 +5,7 @@ function SelectedHeader({ header, children, ...rest }) {
     return (
         <AccordionHeader
             {...rest}
-            color={expandedKeys.includes(key) ? "accent-7" : undefined}
+            color={expandedKeys.includes(key) ? "sapphire-700" : undefined}
             header={header}
             headingType={H3}
         >

packages/components/src/accordion/tests/chromatic/Accordion.chroma.jsx

@@ -34,10 +34,10 @@ stories()
     )
     .add("styling", () =>
         <Inline>
-            <Accordion border="warning-7" expandedKeys={["0"]}>
+            <Accordion border="warning" expandedKeys={["0"]}>
                 <Item>
-                    <H3 border="warning-7">Mars</H3>
-                    <Content border="warning-7">Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System.</Content>
+                    <H3 border="warning">Mars</H3>
+                    <Content border="warning">Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System.</Content>
                 </Item>
             </Accordion>
             <Accordion className="border-red" expandedKeys={["0"]}>

packages/components/src/alert/tests/chromatic/Alert.chroma.jsx

@@ -22,10 +22,10 @@ stories()
     .add("styled system", () =>
         <Alert
             primaryButtonLabel="Yes"
-            border="warning-7"
+            border="warning"
         >
-            <Heading border="warning-7">Launch</Heading>
-            <Content border="warning-7">Are you sure you want to launch the space shuttle?</Content>
+            <Heading border="warning">Launch</Heading>
+            <Content border="warning">Are you sure you want to launch the space shuttle?</Content>
         </Alert>
     )
     .add("className", () =>

packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx

@@ -363,7 +363,7 @@ export const TriggerStates: AutocompleteStory = {
 export const NoResults: AutocompleteStory = {
     storyName: "no results",
     render: () => (
-        <Stack gap={13}>
+        <Stack gap={800}>
             <Inline>
                 <Autocomplete defaultOpen placeholder="Select a planet" aria-label="Planets">
                     <Item key="earth">Earth</Item>
@@ -402,7 +402,7 @@ export const NoResults: AutocompleteStory = {
 export const CustomTriggerWidth: AutocompleteStory = {
     storyName: "custom trigger width",
     render: () => (
-        <Autocomplete width={16} placeholder="Select a planet" aria-label="Planets">
+        <Autocomplete width="20rem" placeholder="Select a planet" aria-label="Planets">
             <Item key="earth">Earth</Item>
             <Item key="mars">Mars</Item>
             <Item key="saturn">Saturn</Item>
@@ -506,7 +506,7 @@ export const Styling: AutocompleteStory = {
     storyName: "styling",
     render: () => (
         <Inline>
-            <Autocomplete border="warning-7" placeholder="Select a planet" aria-label="Planets">
+            <Autocomplete border="warning" placeholder="Select a planet" aria-label="Planets">
                 <Item key="earth">Earth</Item>
                 <Item key="jupiter">Jupiter</Item>
                 <Item key="mars">Mars</Item>

packages/components/src/avatar/src/AvatarGroup.tsx

@@ -109,7 +109,7 @@ export function InnerAvatarGroup({
                 {
                     as,
                     className: "o-ui-avatar-group",
-                    gap: 1 as const,
+                    gap: 40 as const,
                     orientation: "horizontal" as const,
                     ref: forwardedRef,
                     wrap: wrapValue

packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx

@@ -119,7 +119,7 @@ export const Styling: AvatarStory = {
     storyName: "styling",
     render: () => (
         <Inline>
-            <Avatar name="Sally Ride" border="warning-7" />
+            <Avatar name="Sally Ride" border="warning" />
             <Avatar name="Sally Ride" className="border-red" />
             <Avatar name="Sally Ride" style={{ border: "1px solid red" }} />
         </Inline>

packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx

@@ -26,7 +26,7 @@ type AvatarGroupStory = ComponentStoryObj<typeof AvatarGroup>;
 export const Default: AvatarGroupStory = {
     storyName: "default",
     render: () => (
-        <Inline gap={13}>
+        <Inline gap={800}>
             <Stack>
                 <AvatarGroup size="2xs">
                     <Avatar name="Sally Ride" />
@@ -108,7 +108,7 @@ export const Default: AvatarGroupStory = {
 export const NoWrap: AvatarGroupStory = {
     storyName: "no wrap",
     render: () => (
-        <Div width={12}>
+        <Div width={960}>
             <AvatarGroup wrap={false} size="xl">
                 <Avatar name="Sally Ride" />
                 <Avatar name="Alan Shepard" />
@@ -180,7 +180,7 @@ export const WithRemainings: AvatarGroupStory = {
 export const Overflow: AvatarGroupStory = {
     storyName: "overflow",
     render: () => (
-        <Div width={10}>
+        <Div width="4.5rem">
             <AvatarGroup size="2xl">
                 <Avatar name="Sally Ride" />
                 <Avatar name="Alan Shepard" />
@@ -215,7 +215,7 @@ export const Styling: AvatarGroupStory = {
     storyName: "styling",
     render: () => (
         <Inline>
-            <AvatarGroup border="warning-7">
+            <AvatarGroup border="warning">
                 <Avatar name="Sally Ride" />
                 <Avatar name="Alan Shepard" />
             </AvatarGroup>