@ornikar/bumper 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0 → 2.8.1-canary.1769093881.a46790da1b5b6361954b6ad25766074d3ed69784.0

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/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/breakpoints.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 '../primitives/Stack';
 import { View } from '../primitives/View';
 import { breakpoints } from './breakpoints';

package/src/system/core/tokens/fonts.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 '../primitives/Stack';
 import { View } from '../primitives/View';
 import { VARIANTS, lineHeight, size } from './fonts';

package/src/system/core/tokens/palettes/deepPurpleColorPalette.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 '../../primitives/Stack';
 import type { ViewProps } from '../../primitives/View';
 import { View } from '../../primitives/View';

package/src/system/core/tokens/radius.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 '../primitives/Stack';
 import { View } from '../primitives/View';
 import { radiusTokens } from './radius';

package/src/system/core/tokens/size.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 '../primitives/Stack';
 import { View } from '../primitives/View';
 import { sizeTokens } from './size';

package/src/system/core/tokens/space.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 '../primitives/Stack';
 import { View } from '../primitives/View';
 import { spaceTokens } from './space';

package/src/tamagui.config.ts

@@ -1,5 +1,5 @@
 import { createFont, createTamagui, createTokens } from '@tamagui/core';
-import { light } from './system/core/themes/light';
+import { light } from './system/core/themes/light/light';
 import { BreakpointNameEnum, breakpoints } from './system/core/tokens/breakpoints';
 import { GTStandardFaces, letterSpacing, lineHeight, size, weight } from './system/core/tokens/fonts';
 import { radiusTokens } from './system/core/tokens/radius';

package/dist/definitions/system/core/themes/light.d.ts

@@ -1,58 +0,0 @@
-export declare const light: {
-    'content.base.low': string;
-    'content.base.mid': string;
-    'content.base.hi': string;
-    'content.base.onContrasted.low': string;
-    'content.base.onContrasted.mid': string;
-    'content.base.onContrasted.hi': string;
-    'content.accent': string;
-    'content.promo': string;
-    'content.promo.onContrasted': string;
-    'content.info': string;
-    'content.success': string;
-    'content.warning': string;
-    'content.danger': string;
-    'content.muted': string;
-    'content.disabled': string;
-    'content.disabled.onContrasted': string;
-    'bg.base.low.default': string;
-    'bg.base.low.pressed': string;
-    'bg.base.mid.default': string;
-    'bg.base.mid.pressed': string;
-    'bg.base.hi.default': string;
-    'bg.base.hi.pressed': string;
-    'bg.accent.default': string;
-    'bg.accent.pressed': string;
-    'bg.promo.mid.default': string;
-    'bg.promo.mid.pressed': string;
-    'bg.promo.hi.default': string;
-    'bg.promo.hi.pressed': string;
-    'bg.highlight.mid.default': string;
-    'bg.highlight.mid.pressed': string;
-    'bg.highlight.hi.default': string;
-    'bg.highlight.hi.pressed': string;
-    'bg.info.mid': string;
-    'bg.info.hi': string;
-    'bg.success.mid': string;
-    'bg.success.hi': string;
-    'bg.warning.mid': string;
-    'bg.warning.hi': string;
-    'bg.danger.mid': string;
-    'bg.danger.hi': string;
-    'bg.disabled.mid': string;
-    'bg.disabled.hi': string;
-    'bg.overlay': string;
-    'border.base.low': string;
-    'border.base.mid': string;
-    'border.base.hi': string;
-    'border.base.onContrasted.mid': string;
-    'border.base.onContrasted.hi': string;
-    'border.base.accent': string;
-    'border.info': string;
-    'border.success': string;
-    'border.warning': string;
-    'border.danger': string;
-    'border.disabled': string;
-    'border.highlight': string;
-};
-//# sourceMappingURL=light.d.ts.map

package/dist/definitions/system/core/themes/light.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../../src/system/core/themes/light.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjB,CAAC"}