@ornikar/bumper 1.1.0

package/src/themes/light.stories.tsx

@@ -0,0 +1,38 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import type { GetThemeValueForKey } from '@tamagui/core';
+import { VStack } from '../components/primitives/Stacks';
+import { View } from '../components/primitives/View';
+import { Typography } from '../components/typography/Typograhy';
+import { StorySection } from '../story-components/StorySection';
+import { light } from './light';
+
+export default {
+  title: 'bumper/Theme',
+  component: View,
+} satisfies Meta<typeof View>;
+
+const TokenView = ({ tokenName, tokenValue }: { tokenName: string; tokenValue: string }) => {
+  return (
+    <VStack
+      key={tokenName}
+      paddingVertical="$8"
+      borderBottomWidth="$2"
+      borderBottomColor="$border.base.mid"
+      backgroundColor={tokenName.includes('onContrasted') ? '$bg.accent.default' : '$bg.base.low.default'}
+    >
+      <Typography.Text>{tokenName}</Typography.Text>
+      <Typography.Text>{tokenValue}</Typography.Text>
+      <View backgroundColor={tokenValue as GetThemeValueForKey<'backgroundColor'>} width="$20" height="$20" />
+    </VStack>
+  );
+};
+
+export const TypographyHeadingStory: ComponentStory<typeof View> = () => (
+  <StorySection title="Tokens">
+    {Object.entries(light).map(([tokenName, tokenValue]) => (
+      <TokenView key={tokenName} tokenName={tokenName} tokenValue={tokenValue} />
+    ))}
+  </StorySection>
+);
+
+TypographyHeadingStory.storyName = 'Light';

package/src/themes/light.ts

@@ -0,0 +1,59 @@
+import { deepPurpleColorPalette } from './palettes/deepPurpleColorPalette';
+
+export const light = {
+  // content
+  'content.base.hi': deepPurpleColorPalette['grey.9'],
+  'content.base.mid': deepPurpleColorPalette['grey.7'],
+  'content.base.low': deepPurpleColorPalette['grey.5'],
+  'content.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
+  'content.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.80'],
+  'content.base.onContrasted.low': deepPurpleColorPalette['white-alpha.60'],
+  'content.accent': deepPurpleColorPalette['deepPurple.8'],
+  'content.promo': deepPurpleColorPalette['lightning.9'],
+  'content.promo.onContrasted': deepPurpleColorPalette['lightning.5'],
+  'content.info': deepPurpleColorPalette['blue.7'],
+  'content.success': deepPurpleColorPalette['green.7'],
+  'content.warning': deepPurpleColorPalette['yellow.7'],
+  'content.danger': deepPurpleColorPalette['red.7'],
+  'content.muted': deepPurpleColorPalette['beige.6'],
+  'content.disabled': deepPurpleColorPalette['grey.3'],
+  'content.disabled.onContrasted': deepPurpleColorPalette['grey.1'],
+
+  // backgrounds
+  'bg.base.hi.default': deepPurpleColorPalette['beige.2'],
+  'bg.base.hi.pressed': deepPurpleColorPalette['beige.3'],
+  'bg.base.mid.default': deepPurpleColorPalette['beige.1'],
+  'bg.base.mid.pressed': deepPurpleColorPalette['beige.2'],
+  'bg.base.low.default': deepPurpleColorPalette['grey.0'],
+  'bg.base.low.pressed': deepPurpleColorPalette['beige.1'],
+  'bg.accent.default': deepPurpleColorPalette['deepPurple.8'],
+  'bg.accent.pressed': deepPurpleColorPalette['deepPurple.7'],
+  'bg.promo.hi.default': deepPurpleColorPalette['lightning.9'],
+  'bg.promo.hi.pressed': deepPurpleColorPalette['lightning.8'],
+  'bg.promo.mid.default': deepPurpleColorPalette['lightning.5'],
+  'bg.promo.mid.pressed': deepPurpleColorPalette['lightning.4'],
+  'bg.highlight.default': deepPurpleColorPalette['blue.1'],
+  'bg.highlight.pressed': deepPurpleColorPalette['blue.2'],
+  'bg.info.hi': deepPurpleColorPalette['blue.6'],
+  'bg.info.mid': deepPurpleColorPalette['blue.1'],
+  'bg.success.hi': deepPurpleColorPalette['green.6'],
+  'bg.success.mid': deepPurpleColorPalette['green.1'],
+  'bg.warning.hi': deepPurpleColorPalette['yellow.6'],
+  'bg.warning.mid': deepPurpleColorPalette['yellow.1'],
+  'bg.danger.hi': deepPurpleColorPalette['red.6'],
+  'bg.danger.mid': deepPurpleColorPalette['red.1'],
+  'bg.disabled.hi': deepPurpleColorPalette['grey.3'],
+  'bg.disabled.mid': deepPurpleColorPalette['grey.1'],
+  'bg.overlay': deepPurpleColorPalette['grey-alpha.50'],
+
+  // borders
+  'border.base.hi': deepPurpleColorPalette['grey.9'],
+  'border.base.mid': deepPurpleColorPalette['grey.3'],
+  'border.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
+  'border.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.60'],
+  'border.info': deepPurpleColorPalette['blue.6'],
+  'border.success': deepPurpleColorPalette['green.6'],
+  'border.warning': deepPurpleColorPalette['yellow.6'],
+  'border.danger': deepPurpleColorPalette['red.6'],
+  'border.disabled': deepPurpleColorPalette['grey.2'],
+};