@ornikar/bumper 1.1.0

package/src/themes/palettes/deepPurpleColorPalette.stories.tsx

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

package/src/themes/palettes/deepPurpleColorPalette.ts

@@ -0,0 +1,147 @@
+import type { IntRange, UnionToIntersection } from 'type-fest';
+
+interface ColorScaleKeysMap {
+  deepPurple: IntRange<5, 10>;
+  beige: IntRange<1, 7>;
+  lightning: 4 | 5 | 8 | 9;
+  rainbow:
+    | 'pink'
+    | 'brick'
+    | 'orange'
+    | 'gold'
+    | 'sun'
+    | 'green-pine'
+    | 'green-grass'
+    | 'green-apple'
+    | 'blue-electric'
+    | 'blue-sky';
+  grey: 0 | 1 | 2 | 3 | 5 | 7 | 9;
+  blue: 1 | 2 | 6 | 7;
+  green: 1 | 2 | 6 | 7;
+  yellow: 1 | 2 | 6 | 7;
+  red: 1 | 2 | 6 | 7;
+  'beige-alpha': '25' | '40' | '50';
+  'grey-alpha': '25' | '35' | '50';
+  'white-alpha': '10' | '20' | '60' | '80' | '90';
+}
+
+type CreateColorScale<K extends keyof ColorScaleKeysMap> = Record<ColorScaleKeysMap[K], string>;
+
+type ColorScales = {
+  [K in keyof ColorScaleKeysMap]: CreateColorScale<K>;
+};
+
+type CreateTokens<K extends keyof ColorScaleKeysMap> = {
+  [Key in ColorScaleKeysMap[K] as `${K}.${Key}`]: string;
+};
+
+type ColorScaleTokens = UnionToIntersection<
+  {
+    [K in keyof ColorScaleKeysMap]: CreateTokens<K>;
+  }[keyof ColorScaleKeysMap]
+>;
+
+const createColorScale = <const T extends Record<string | number, string>>(colorScale: T): T => colorScale;
+
+export const colorScales: ColorScales = {
+  deepPurple: createColorScale({
+    5: '#936C93',
+    6: '#7A587A',
+    7: '#6E4D6E',
+    8: '#563B56',
+    9: '#452F45',
+  }),
+  beige: createColorScale({
+    1: '#F7F4EE',
+    2: '#F1ECE4',
+    3: '#EAE3D6',
+    4: '#E5DCCA',
+    5: '#DDD0B8',
+    6: '#C1B59F',
+  }),
+  lightning: createColorScale({
+    4: '#FFF966',
+    5: '#FFF500',
+    8: '#594D0D',
+    9: '#43390A',
+  }),
+  rainbow: createColorScale({
+    pink: '#E4A4F9',
+    brick: '#951D12',
+    orange: '#DB6E2E',
+    gold: '#9A7600',
+    sun: '#EFD346',
+    'green-pine': '#1C5D47',
+    'green-grass': '#4DA00A',
+    'green-apple': '#DEF985',
+    'blue-electric': '#2850C4',
+    'blue-sky': '#B2F0FD',
+  }),
+  grey: createColorScale({
+    0: '#ffffff',
+    1: '#ECECEC',
+    2: '#CDCED0',
+    3: '#A8A8A8',
+    5: '#838383',
+    7: '#505050',
+    9: '#101010',
+  }),
+  blue: createColorScale({
+    1: '#E9F4FC',
+    2: '#BCDFF6',
+    6: '#1772AB',
+    7: '#125A87',
+  }),
+  green: createColorScale({
+    1: '#ECFEDD',
+    2: '#DBFAC1',
+    6: '#438D06',
+    7: '#357105',
+  }),
+  yellow: createColorScale({
+    1: '#FDF8E7',
+    2: '#FAEBB8',
+    6: '#EFC11F',
+    7: '#BA930B',
+  }),
+  red: createColorScale({
+    1: '#FDE4E3',
+    2: '#FAB8B8',
+    6: '#F14847',
+    7: '#BD100F',
+  }),
+  'beige-alpha': createColorScale({
+    '25': '#C1B59F40',
+    '40': '#C1B59F66',
+    '50': '#C1B59F80',
+  }),
+  'grey-alpha': createColorScale({
+    '25': '#10101040',
+    '35': '#10101059',
+    '50': '#10101080',
+  }),
+  'white-alpha': createColorScale({
+    '10': '#FFFFFF1A',
+    '20': '#FFFFFF33',
+    '60': '#FFFFFF99',
+    '80': '#FFFFFFCC',
+    '90': '#FFFFFFE5',
+  }),
+} as const;
+
+const transformColorScalesToTokens = (): ColorScaleTokens => {
+  return Object.fromEntries(
+    Object.entries(colorScales).flatMap(([colorName, colorScale]) => {
+      return Object.entries(colorScale).map(([scaleNumber, colorValue]) => {
+        return [`${colorName}.${scaleNumber}`, colorValue];
+      });
+    }),
+  ) as ColorScaleTokens;
+};
+
+export const deepPurpleColorPalette = {
+  ...transformColorScalesToTokens(),
+  white: '#FFFFFF',
+  black: '#000000',
+  transparent: 'transparent',
+};

package/src/themes/utils/breakpoints.ts

@@ -0,0 +1,15 @@
+export enum BreakpointNameEnum {
+  BASE = 'base',
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  WIDE = 'wide',
+}
+
+export const breakpoints = {
+  [BreakpointNameEnum.BASE]: 0,
+  [BreakpointNameEnum.SMALL]: 480,
+  [BreakpointNameEnum.MEDIUM]: 768,
+  [BreakpointNameEnum.LARGE]: 1024,
+  [BreakpointNameEnum.WIDE]: 1280,
+};

package/src/tokens/fonts.ts

@@ -0,0 +1,95 @@
+import { createFont } from '@tamagui/core';
+
+export const HEADING_VARIANTS = [
+  'heading-2xl',
+  'heading-xl',
+  'heading-l',
+  'heading-m',
+  'heading-s',
+  'heading-xs',
+] as const;
+export const BODY_VARIANTS = ['body-xl', 'body-l', 'body-m', 'body-s', 'body-xs'] as const;
+export const LABEL_VARIANTS = ['label-xl', 'label-l', 'label-m', 'label-s'] as const;
+export const VARIANTS = [...HEADING_VARIANTS, ...BODY_VARIANTS, ...LABEL_VARIANTS] as const;
+
+export type FontVariants = (typeof VARIANTS)[number];
+export type BodyFontVariants = (typeof BODY_VARIANTS)[number];
+export type LabelFontVariants = (typeof LABEL_VARIANTS)[number];
+export type HeadingFontVariants = (typeof HEADING_VARIANTS)[number];
+
+export type GTStandardFontWeight = '500' | '600' | '700';
+
+const GTStandardFaces: Record<GTStandardFontWeight, Record<string, string>> = {
+  500: { normal: 'GTStandardRegular' },
+  600: { normal: 'GTStandardSemibold' },
+  700: { normal: 'GTStandardBold' },
+};
+
+const size: Record<FontVariants, number> = {
+  'heading-2xl': 56,
+  'heading-xl': 48,
+  'heading-l': 38,
+  'heading-m': 24,
+  'heading-s': 20,
+  'heading-xs': 16,
+  'body-xl': 24,
+  'body-l': 18,
+  'body-m': 16,
+  'body-s': 14,
+  'body-xs': 12,
+  'label-xl': 18,
+  'label-l': 16,
+  'label-m': 14,
+  'label-s': 12,
+};
+
+const lineHeight: Record<FontVariants, number> = {
+  'heading-2xl': 64,
+  'heading-xl': 56,
+  'heading-l': 48,
+  'heading-m': 32,
+  'heading-s': 20,
+  'heading-xs': 18,
+  'body-xl': 32,
+  'body-l': 26,
+  'body-m': 24,
+  'body-s': 20,
+  'body-xs': 16,
+  'label-xl': 26,
+  'label-l': 24,
+  'label-m': 20,
+  'label-s': 16,
+};
+
+const letterSpacing: Record<FontVariants, number> = {
+  'heading-2xl': 0,
+  'heading-xl': 0,
+  'heading-l': 0,
+  'heading-m': 0,
+  'heading-s': 0,
+  'heading-xs': 0,
+  'body-xl': 0.3,
+  'body-l': 0.3,
+  'body-m': 0.3,
+  'body-s': 0.3,
+  'body-xs': 0.3,
+  'label-xl': 0,
+  'label-l': 0,
+  'label-m': 0,
+  'label-s': 0,
+};
+
+const weight: Record<string, GTStandardFontWeight> = {
+  bold: '700',
+  semibold: '600',
+  regular: '500',
+};
+
+export const fonts = createFont({
+  family: 'GTStandard',
+  size,
+  lineHeight,
+  letterSpacing,
+  weight,
+  face: GTStandardFaces,
+});

package/src/tokens/size.ts

@@ -0,0 +1,10 @@
+export const sizeTokens = {
+  16: 16,
+  20: 20,
+  24: 24,
+  32: 32,
+  80: 80,
+  128: 128,
+  176: 176,
+  208: 208,
+};

package/src/tokens/space.ts

@@ -0,0 +1,15 @@
+export const spaceTokens = {
+  0: 0,
+  2: 2,
+  4: 4,
+  8: 8,
+  12: 12,
+  16: 16,
+  24: 24,
+  32: 32,
+  40: 40,
+  48: 48,
+  56: 56,
+  64: 64,
+  80: 80,
+};

package/tsconfig.build.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/definitions",
+    "tsBuildInfoFile": "dist/tsbuildinfo",
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "paths": {
+      "@ornikar/bumper": ["./src/index.ts"]
+    }
+  },
+  "exclude": [
+    "dist",
+    "**/__mocks__",
+    "**/__tests__",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx",
+    "**/stories.ts",
+    "**/stories.tsx",
+    "**/stories/**",
+    "**/stories-list.ts"
+  ]
+}

package/tsconfig.eslint.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  }
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "composite": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": false,
+    "noEmitOnError": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "../../node_modules/.cache/tsc/@ornikar/bumper",
+    "tsBuildInfoFile": "../../node_modules/.cache/tsc/@ornikar/bumper/tsbuildinfo",
+    "paths": {
+      "@ornikar/bumper": ["./src/index.ts"]
+    },
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "../../typings"]
+}