@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0

package/src/system/core/themes/light.stories.tsx

@@ -1,38 +1,71 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { GetThemeValueForKey } from '@tamagui/core';
-import { StorySection } from '../../../shared/storybook/StorySection';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from '../../content/typography/Typography';
-import { VStack } from '../primitives/Stack';
+import { HStack, VStack } from '../primitives/Stack';
+import type { ViewProps } from '../primitives/View';
 import { View } from '../primitives/View';
 import { light } from './light';
 
-export default {
-  title: 'bumper/Theme',
-  component: View,
-} satisfies Meta<typeof View>;
+const ThemeTokenRow = ({ tokenName, colorValue }: { tokenName: string; colorValue: string }): React.ReactNode => {
+  const isLightColor =
+    colorValue.toLowerCase() === '#ffffff' ||
+    colorValue.toLowerCase().includes('ffffff') ||
+    colorValue.startsWith('#f') ||
+    colorValue.startsWith('#e') ||
+    colorValue.startsWith('#d') ||
+    colorValue.startsWith('#c') ||
+    colorValue.startsWith('#b');
 
-const TokenView = ({ tokenName, tokenValue }: { tokenName: string; tokenValue: string }) => {
   return (
-    <VStack
-      key={tokenName}
-      paddingVertical="$space.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="$size.20" height="$size.20" />
-    </VStack>
+    <HStack gap="$space.16" alignItems="center">
+      <View
+        width="$size.48"
+        height="$size.48"
+        borderRadius="$radius.m"
+        backgroundColor={colorValue as ViewProps['backgroundColor']}
+        borderWidth={1}
+        borderColor="$border.base.low"
+        alignItems="center"
+        justifyContent="center"
+      >
+        {tokenName.includes('onContrasted') && (
+          <View
+            width="$size.24"
+            height="$size.24"
+            borderRadius="$radius.s"
+            backgroundColor={isLightColor ? '$bg.accent.default' : '$bg.base.low.default'}
+          />
+        )}
+      </View>
+      <View width={280}>
+        <Typography.Text variant="body-s" weight="bold">
+          ${tokenName}
+        </Typography.Text>
+      </View>
+      <Typography.Text variant="body-s" color="$content.base.mid">
+        {colorValue}
+      </Typography.Text>
+    </HStack>
   );
 };
 
-export const TypographyHeadingStory: StoryFn<typeof View> = () => (
-  <StorySection title="Tokens">
-    {Object.entries(light).map(([tokenName, tokenValue]) => (
-      <TokenView key={tokenName} tokenName={tokenName} tokenValue={tokenValue} />
-    ))}
-  </StorySection>
-);
+const meta: Meta = {
+  title: 'Bumper/Core/Themes',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-TypographyHeadingStory.storyName = 'Light';
+export const Light: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <Typography.Text variant="body-m" color="$content.base.mid">
+        The complete set of semantic color tokens for the light theme.
+      </Typography.Text>
+      <VStack gap="$space.8">
+        {Object.entries(light).map(([tokenName, colorValue]) => (
+          <ThemeTokenRow key={tokenName} tokenName={tokenName} colorValue={colorValue} />
+        ))}
+      </VStack>
+    </VStack>
+  ),
+};

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

@@ -0,0 +1,423 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Tokens Breakpoints 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#505050",
+          "fontFamily": "GTStandard",
+          "fontSize": 16,
+          "letterSpacing": 0.3,
+          "lineHeight": 24,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Breakpoint tokens define the screen width thresholds for responsive design.
+    </Text>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 8,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 120,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            base
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            0px
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "flexGrow": 1,
+              "maxWidth": 400,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "backgroundColor": "#563B56",
+                "borderBottomLeftRadius": 2,
+                "borderBottomRightRadius": 2,
+                "borderTopLeftRadius": 2,
+                "borderTopRightRadius": 2,
+                "height": 24,
+                "width": 10,
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 120,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            small
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            &gt;= 480px
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "flexGrow": 1,
+              "maxWidth": 400,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "backgroundColor": "#563B56",
+                "borderBottomLeftRadius": 2,
+                "borderBottomRightRadius": 2,
+                "borderTopLeftRadius": 2,
+                "borderTopRightRadius": 2,
+                "height": 24,
+                "width": 47.5,
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 120,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            medium
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            &gt;= 768px
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "flexGrow": 1,
+              "maxWidth": 400,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "backgroundColor": "#563B56",
+                "borderBottomLeftRadius": 2,
+                "borderBottomRightRadius": 2,
+                "borderTopLeftRadius": 2,
+                "borderTopRightRadius": 2,
+                "height": 24,
+                "width": 70,
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 120,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            large
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            &gt;= 1024px
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "flexGrow": 1,
+              "maxWidth": 400,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "backgroundColor": "#563B56",
+                "borderBottomLeftRadius": 2,
+                "borderBottomRightRadius": 2,
+                "borderTopLeftRadius": 2,
+                "borderTopRightRadius": 2,
+                "height": 24,
+                "width": 90,
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 16,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "width": 120,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "fontFamily": "GTStandardBold",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            wide
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "width": 80,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#505050",
+                "fontFamily": "GTStandard",
+                "fontSize": 14,
+                "letterSpacing": 0.3,
+                "lineHeight": 20,
+              }
+            }
+            suppressHighlighting={true}
+          >
+            &gt;= 1280px
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "flexGrow": 1,
+              "maxWidth": 400,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "backgroundColor": "#563B56",
+                "borderBottomLeftRadius": 2,
+                "borderBottomRightRadius": 2,
+                "borderTopLeftRadius": 2,
+                "borderTopRightRadius": 2,
+                "height": 24,
+                "width": 100,
+              }
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;