@ornikar/bumper 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0 → 2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0

package/src/system/core/primitives/ScrollView/__snapshots_web__/ScrollView.features.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/ScrollView/Features HiddenIndicators 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -30,10 +30,10 @@ exports[`Bumper/Core/Primitives/ScrollView/Features HiddenIndicators 1`] = `
               class="_dsp_contents"
             >
               <div
-                class="css-view-g5y9jx r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx is_ScrollView _height-t-size-size42947727 _width-t-size-size42948634 r-scrollbarWidth-2eszeu"
+                class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx is_ScrollView _height-t-size-size42947727 _width-t-size-size42948634 r-scrollbarWidth-2eszeu"
               >
                 <div
-                  class="css-view-g5y9jx"
+                  class="css-view-175oi2r"
                 >
                   <div
                     class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166 _paddingTop-t-space-spa94482166 _paddingRight-t-space-spa94482166 _paddingBottom-t-space-spa94482166 _paddingLeft-t-space-spa94482166"
@@ -132,10 +132,10 @@ exports[`Bumper/Core/Primitives/ScrollView/Features HiddenIndicators 1`] = `
               class="_dsp_contents"
             >
               <div
-                class="css-view-g5y9jx r-WebkitOverflowScrolling-150rngu r-flexDirection-18u37iz r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-lltvgl r-overflowY-buy8e9 r-transform-agouwx is_ScrollView _height-t-size-size1385624 _width-t-size-size42948634 r-scrollbarWidth-2eszeu"
+                class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-18u37iz r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-lltvgl r-overflowY-buy8e9 r-transform-agouwx is_ScrollView _height-t-size-size1385624 _width-t-size-size42948634 r-scrollbarWidth-2eszeu"
               >
                 <div
-                  class="css-view-g5y9jx r-flexDirection-18u37iz"
+                  class="css-view-175oi2r r-flexDirection-18u37iz"
                 >
                   <div
                     class="is_HStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa94482166 _paddingTop-t-space-spa94482166 _paddingRight-t-space-spa94482166 _paddingBottom-t-space-spa94482166 _paddingLeft-t-space-spa94482166"
@@ -235,7 +235,7 @@ exports[`Bumper/Core/Primitives/ScrollView/Features HiddenIndicators 1`] = `
 exports[`Bumper/Core/Primitives/ScrollView/Features HorizontalScroll 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -253,10 +253,10 @@ exports[`Bumper/Core/Primitives/ScrollView/Features HorizontalScroll 1`] = `
             class="_dsp_contents"
           >
             <div
-              class="css-view-g5y9jx r-WebkitOverflowScrolling-150rngu r-flexDirection-18u37iz r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-lltvgl r-overflowY-buy8e9 r-transform-agouwx is_ScrollView _height-t-size-size1385661 _width-t-size-size42948634"
+              class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-18u37iz r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-lltvgl r-overflowY-buy8e9 r-transform-agouwx is_ScrollView _height-t-size-size1385661 _width-t-size-size42948634"
             >
               <div
-                class="css-view-g5y9jx r-flexDirection-18u37iz"
+                class="css-view-175oi2r r-flexDirection-18u37iz"
               >
                 <div
                   class="is_HStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa94482166 _paddingTop-t-space-spa94482166 _paddingRight-t-space-spa94482166 _paddingBottom-t-space-spa94482166 _paddingLeft-t-space-spa94482166"
@@ -375,7 +375,7 @@ exports[`Bumper/Core/Primitives/ScrollView/Features HorizontalScroll 1`] = `
 exports[`Bumper/Core/Primitives/ScrollView/Features ScrollDisabled 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -402,10 +402,10 @@ exports[`Bumper/Core/Primitives/ScrollView/Features ScrollDisabled 1`] = `
               class="_dsp_contents"
             >
               <div
-                class="css-view-g5y9jx r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-transform-agouwx is_ScrollView _height-t-size-size42947727 _width-t-size-size42948634 r-overflowX-11yh6sk r-overflowY-buy8e9 r-touchAction-19z077z"
+                class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-transform-agouwx is_ScrollView _height-t-size-size42947727 _width-t-size-size42948634 r-overflowX-11yh6sk r-overflowY-buy8e9 r-touchAction-19z077z"
               >
                 <div
-                  class="css-view-g5y9jx"
+                  class="css-view-175oi2r"
                 >
                   <div
                     class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166 _paddingTop-t-space-spa94482166 _paddingRight-t-space-spa94482166 _paddingBottom-t-space-spa94482166 _paddingLeft-t-space-spa94482166"

package/src/system/core/primitives/ScrollView/__snapshots_web__/ScrollView.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/ScrollView Default 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -21,10 +21,10 @@ exports[`Bumper/Core/Primitives/ScrollView Default 1`] = `
             class="_dsp_contents"
           >
             <div
-              class="css-view-g5y9jx r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx is_ScrollView _height-t-size-size42947888 _width-t-size-size42948634"
+              class="css-view-175oi2r r-WebkitOverflowScrolling-150rngu r-flexDirection-eqz5dr r-flexGrow-16y2uox r-flexShrink-1wbh5a2 r-overflowX-11yh6sk r-overflowY-1rnoaur r-transform-agouwx is_ScrollView _height-t-size-size42947888 _width-t-size-size42948634"
             >
               <div
-                class="css-view-g5y9jx"
+                class="css-view-175oi2r"
                 style="gap: var(--t-space-space--8);"
               >
                 <div

package/src/system/core/primitives/Stack.features.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { Typography } from '../../content/typography';
 import { HStack, Stack, VStack } from './Stack';
 import { View } from './View';
 

package/src/system/core/primitives/Stack.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { Typography } from '../../content/typography';
 import { Stack } from './Stack';
 import { View } from './View';
 
@@ -13,44 +14,8 @@ const meta: Meta<typeof Stack> = {
       options: ['row', 'column', 'row-reverse', 'column-reverse'],
       description: 'Flex direction',
     },
-    gap: {
-      control: 'select',
-      options: [
-        '$space.none',
-        '$space.2',
-        '$space.4',
-        '$space.8',
-        '$space.12',
-        '$space.16',
-        '$space.24',
-        '$space.32',
-        '$space.40',
-        '$space.48',
-        '$space.56',
-        '$space.64',
-        '$space.80',
-      ],
-      description: 'Gap between items (space token)',
-    },
-    padding: {
-      control: 'select',
-      options: [
-        '$space.none',
-        '$space.2',
-        '$space.4',
-        '$space.8',
-        '$space.12',
-        '$space.16',
-        '$space.24',
-        '$space.32',
-        '$space.40',
-        '$space.48',
-        '$space.56',
-        '$space.64',
-        '$space.80',
-      ],
-      description: 'Padding (space token)',
-    },
+    gap: spaceArgType,
+    padding: spaceArgType,
   },
 };
 

package/src/system/core/primitives/View.features.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
+import { Typography } from '../../content/typography';
 import { HStack, VStack } from './Stack';
 import { View } from './View';
 

package/src/system/core/primitives/View.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { backgroundColorArgType, sizeArgType, spaceArgType } from '../../../shared/storybook/helpers/argsHelpers';
 import { View } from './View';
 
 const meta: Meta<typeof View> = {
@@ -6,113 +7,11 @@ const meta: Meta<typeof View> = {
   component: View,
   tags: ['autodocs'],
   argTypes: {
-    backgroundColor: {
-      control: 'select',
-      options: [
-        '$bg.base.low.default',
-        '$bg.base.low.pressed',
-        '$bg.base.mid.default',
-        '$bg.base.mid.pressed',
-        '$bg.base.hi.default',
-        '$bg.base.hi.pressed',
-        '$bg.accent.default',
-        '$bg.accent.pressed',
-        '$bg.promo.mid.default',
-        '$bg.promo.mid.pressed',
-        '$bg.promo.hi.default',
-        '$bg.promo.hi.pressed',
-        '$bg.highlight.mid.default',
-        '$bg.highlight.mid.pressed',
-        '$bg.highlight.hi.default',
-        '$bg.highlight.hi.pressed',
-        '$bg.info.mid',
-        '$bg.info.hi',
-        '$bg.success.mid',
-        '$bg.success.hi',
-        '$bg.warning.mid',
-        '$bg.warning.hi',
-        '$bg.danger.mid',
-        '$bg.danger.hi',
-        '$bg.disabled.mid',
-        '$bg.disabled.hi',
-        '$bg.overlay',
-      ],
-      description: 'Background color (semantic theme token)',
-    },
-    padding: {
-      control: 'select',
-      options: [
-        '$space.none',
-        '$space.2',
-        '$space.4',
-        '$space.8',
-        '$space.12',
-        '$space.16',
-        '$space.24',
-        '$space.32',
-        '$space.40',
-        '$space.48',
-        '$space.56',
-        '$space.64',
-        '$space.80',
-      ],
-      description: 'Padding (space token)',
-    },
-    margin: {
-      control: 'select',
-      options: [
-        '$space.none',
-        '$space.2',
-        '$space.4',
-        '$space.8',
-        '$space.12',
-        '$space.16',
-        '$space.24',
-        '$space.32',
-        '$space.40',
-        '$space.48',
-        '$space.56',
-        '$space.64',
-        '$space.80',
-      ],
-      description: 'Margin (space token)',
-    },
-    width: {
-      control: 'select',
-      options: [
-        '$size.16',
-        '$size.20',
-        '$size.24',
-        '$size.32',
-        '$size.48',
-        '$size.64',
-        '$size.80',
-        '$size.96',
-        '$size.120',
-        '$size.144',
-        '$size.176',
-        '$size.208',
-      ],
-      description: 'Width (size token)',
-    },
-    height: {
-      control: 'select',
-      options: [
-        '$size.16',
-        '$size.20',
-        '$size.24',
-        '$size.32',
-        '$size.48',
-        '$size.64',
-        '$size.80',
-        '$size.96',
-        '$size.120',
-        '$size.144',
-        '$size.176',
-        '$size.208',
-      ],
-      description: 'Height (size token)',
-    },
+    backgroundColor: backgroundColorArgType,
+    padding: spaceArgType,
+    margin: spaceArgType,
+    width: sizeArgType,
+    height: sizeArgType,
   },
 };
 

package/src/system/core/primitives/__snapshots_web__/Center.features.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/Center/Features CenteringText 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -51,7 +51,7 @@ exports[`Bumper/Core/Primitives/Center/Features CenteringText 1`] = `
 exports[`Bumper/Core/Primitives/Center/Features CircularCentering 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/primitives/__snapshots_web__/Center.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/Center Default 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/primitives/__snapshots_web__/Pressable.features.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/Pressable/Features HoverEffects 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -67,7 +67,7 @@ exports[`Bumper/Core/Primitives/Pressable/Features HoverEffects 1`] = `
 exports[`Bumper/Core/Primitives/Pressable/Features PolymorphicAs 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -131,7 +131,7 @@ exports[`Bumper/Core/Primitives/Pressable/Features PolymorphicAs 1`] = `
 exports[`Bumper/Core/Primitives/Pressable/Features PressEffects 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/primitives/__snapshots_web__/Pressable.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/Pressable Default 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/primitives/__snapshots_web__/Stack.features.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/Stack/Features FlexGrowExample 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -71,7 +71,7 @@ exports[`Bumper/Core/Primitives/Stack/Features FlexGrowExample 1`] = `
 exports[`Bumper/Core/Primitives/Stack/Features FlexWrap 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -199,7 +199,7 @@ exports[`Bumper/Core/Primitives/Stack/Features FlexWrap 1`] = `
 exports[`Bumper/Core/Primitives/Stack/Features GridLikeLayout 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -299,7 +299,7 @@ exports[`Bumper/Core/Primitives/Stack/Features GridLikeLayout 1`] = `
 exports[`Bumper/Core/Primitives/Stack/Features HStackBasic 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -357,7 +357,7 @@ exports[`Bumper/Core/Primitives/Stack/Features HStackBasic 1`] = `
 exports[`Bumper/Core/Primitives/Stack/Features NestedStacks 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -459,7 +459,7 @@ exports[`Bumper/Core/Primitives/Stack/Features NestedStacks 1`] = `
 exports[`Bumper/Core/Primitives/Stack/Features VStackBasic 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/primitives/__snapshots_web__/Stack.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/Stack Default 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/primitives/__snapshots_web__/View.features.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/View/Features BackgroundColors 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -121,7 +121,7 @@ exports[`Bumper/Core/Primitives/View/Features BackgroundColors 1`] = `
 exports[`Bumper/Core/Primitives/View/Features BorderColors 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -219,7 +219,7 @@ exports[`Bumper/Core/Primitives/View/Features BorderColors 1`] = `
 exports[`Bumper/Core/Primitives/View/Features BordersAndRadius 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -297,7 +297,7 @@ exports[`Bumper/Core/Primitives/View/Features BordersAndRadius 1`] = `
 exports[`Bumper/Core/Primitives/View/Features DirectionalMargin 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -349,7 +349,7 @@ exports[`Bumper/Core/Primitives/View/Features DirectionalMargin 1`] = `
 exports[`Bumper/Core/Primitives/View/Features DirectionalPadding 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -407,7 +407,7 @@ exports[`Bumper/Core/Primitives/View/Features DirectionalPadding 1`] = `
 exports[`Bumper/Core/Primitives/View/Features FlexAlignment 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -511,7 +511,7 @@ exports[`Bumper/Core/Primitives/View/Features FlexAlignment 1`] = `
 exports[`Bumper/Core/Primitives/View/Features FlexLayout 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -597,7 +597,7 @@ exports[`Bumper/Core/Primitives/View/Features FlexLayout 1`] = `
 exports[`Bumper/Core/Primitives/View/Features FlexWrap 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -745,7 +745,7 @@ exports[`Bumper/Core/Primitives/View/Features FlexWrap 1`] = `
 exports[`Bumper/Core/Primitives/View/Features MarginVariants 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -807,7 +807,7 @@ exports[`Bumper/Core/Primitives/View/Features MarginVariants 1`] = `
 exports[`Bumper/Core/Primitives/View/Features OverflowBehavior 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -855,7 +855,7 @@ exports[`Bumper/Core/Primitives/View/Features OverflowBehavior 1`] = `
 exports[`Bumper/Core/Primitives/View/Features PaddingVariants 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/primitives/__snapshots_web__/View.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Primitives/View Default 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/themes/{__snapshots_web__ → light/__snapshots_web__}/light.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Themes Light 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/core/themes/{light.stories.tsx → light/light.stories.tsx}

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from '../../content/typography/Typography';
-import { HStack, VStack } from '../primitives/Stack';
-import type { ViewProps } from '../primitives/View';
-import { View } from '../primitives/View';
+import { Typography } from '../../../content/typography';
+import { HStack, VStack } from '../../primitives/Stack';
+import type { ViewProps } from '../../primitives/View';
+import { View } from '../../primitives/View';
 import { light } from './light';
 
 const ThemeTokenRow = ({ tokenName, colorValue }: { tokenName: string; colorValue: string }): React.ReactNode => {
@@ -62,7 +62,7 @@ export const Light: Story = {
         The complete set of semantic color tokens for the light theme.
       </Typography.Text>
       <VStack gap="$space.8">
-        {Object.entries(light).map(([tokenName, colorValue]) => (
+        {Object.entries<string>(light).map(([tokenName, colorValue]) => (
           <ThemeTokenRow key={tokenName} tokenName={tokenName} colorValue={colorValue} />
         ))}
       </VStack>

package/src/system/core/themes/{light.ts → light/light.ts}

@@ -1,10 +1,11 @@
 // WARNING
 // If you modify this theme, don't forget to update the theme in @ornikar/kitt-universal as well
 
-import { deepPurpleColorPalette } from '../tokens/palettes/deepPurpleColorPalette';
+import { deepPurpleColorPalette } from '../../tokens/palettes/deepPurpleColorPalette';
+import type { Theme } from '../themes';
 
 // https://github.com/ornikar/kitt/blob/79e367e962c957c016c4df67dbcf515c8f45ff0e/@ornikar/kitt-universal/src/themes/late-ocean/colors.ts#L28
-export const light = {
+export const light: Theme = {
   // content
   'content.base.low': deepPurpleColorPalette['grey.5'],
   'content.base.mid': deepPurpleColorPalette['grey.7'],

package/src/system/core/themes/themes.ts

@@ -0,0 +1,69 @@
+export interface Theme
+  extends Record<
+    (typeof SEMANTIC_TOKENS_CONTENT | typeof SEMANTIC_TOKENS_BACKGROUND | typeof SEMANTIC_TOKENS_BORDER)[number],
+    string
+  > {}
+
+export const SEMANTIC_TOKENS_CONTENT = [
+  'content.base.low',
+  'content.base.mid',
+  'content.base.hi',
+  'content.base.onContrasted.low',
+  'content.base.onContrasted.mid',
+  'content.base.onContrasted.hi',
+  'content.accent',
+  'content.promo',
+  'content.promo.onContrasted',
+  'content.info',
+  'content.success',
+  'content.warning',
+  'content.danger',
+  'content.muted',
+  'content.disabled',
+  'content.disabled.onContrasted',
+] as const;
+
+export const SEMANTIC_TOKENS_BACKGROUND = [
+  'bg.base.low.default',
+  'bg.base.low.pressed',
+  'bg.base.mid.default',
+  'bg.base.mid.pressed',
+  'bg.base.hi.default',
+  'bg.base.hi.pressed',
+  'bg.accent.default',
+  'bg.accent.pressed',
+  'bg.promo.mid.default',
+  'bg.promo.mid.pressed',
+  'bg.promo.hi.default',
+  'bg.promo.hi.pressed',
+  'bg.highlight.mid.default',
+  'bg.highlight.mid.pressed',
+  'bg.highlight.hi.default',
+  'bg.highlight.hi.pressed',
+  'bg.info.mid',
+  'bg.info.hi',
+  'bg.success.mid',
+  'bg.success.hi',
+  'bg.warning.mid',
+  'bg.warning.hi',
+  'bg.danger.mid',
+  'bg.danger.hi',
+  'bg.disabled.mid',
+  'bg.disabled.hi',
+  'bg.overlay',
+] as const;
+
+export const SEMANTIC_TOKENS_BORDER = [
+  'border.base.low',
+  'border.base.mid',
+  'border.base.hi',
+  'border.base.onContrasted.mid',
+  'border.base.onContrasted.hi',
+  'border.base.accent',
+  'border.info',
+  'border.success',
+  'border.warning',
+  'border.danger',
+  'border.disabled',
+  'border.highlight',
+] as const;

package/src/system/core/tokens/__snapshots_web__/breakpoints.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Core/Tokens Breakpoints 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""