@lets-events/react 4.0.0 → 6.0.0

package/src/styles/index.ts

@@ -1,38 +1,38 @@
-import {
-  colors,
-  fontSizes,
-  fontWeights,
-  fonts,
-  lineHeights,
-  radii,
-  space,
-} from '@lets-events/tokens'
-
-import { createStitches, defaultThemeMap } from '@stitches/react'
-
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-} = createStitches({
-  themeMap: {
-    ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-    gap: 'space'
-  },
-  theme: {
-    colors,
-    fontSizes,
-    fonts,
-    fontWeights,
-    lineHeights,
-    radii,
-    space,
-  },
-})
+import {
+  colors,
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  space,
+} from '@lets-events/tokens'
+
+import { createStitches, defaultThemeMap } from '@stitches/react'
+
+export const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config,
+} = createStitches({
+  themeMap: {
+    ...defaultThemeMap,
+    height: 'space',
+    width: 'space',
+    gap: 'space'
+  },
+  theme: {
+    colors,
+    fontSizes,
+    fonts,
+    fontWeights,
+    lineHeights,
+    radii,
+    space,
+  },
+})

package/src/types/typographyValues.ts

@@ -0,0 +1,179 @@
+export const typographyValues = {
+    displayLarge: {
+        fontSize: '$displayLarge',
+        lineHeight: '$displayLarge',
+        letterSpacing: '$displayLarge',
+
+    },
+    displayMedium: {
+        fontSize: '$displayMedium',
+        lineHeight: '$displayMedium',
+        letterSpacing: '$displayMedium',
+    },
+    displaySmall: {
+        fontSize: '$displaySmall',
+        lineHeight: '$displaySmall',
+        letterSpacing: '$displaySmall',
+    },
+    headline1: {
+        fontSize: '$headline1',
+        lineHeight: '$headline1',
+    },
+    headline2: {
+        fontSize: '$headline2',
+        lineHeight: '$headline2',
+    },
+    headline3: {
+        fontSize: '$headline3',
+        lineHeight: '$headline3',
+    },
+    headline4: {
+        fontSize: '$headline4',
+        lineHeight: '$headline4',
+    },
+    headline5: {
+        fontSize: '$headline5',
+        lineHeight: '$headline5',
+    },
+    headline6: {
+        fontSize: '$headline6',
+        lineHeight: '$headline6',
+    },
+    headline7: {
+        fontSize: '$headline7',
+        lineHeight: '$headline7',
+    },
+    headline8: {
+        fontSize: '$headline8',
+        lineHeight: '$headline8',
+    },
+    bodyXL: {
+        fontSize: '$bodyXL',
+        lineHeight: '$bodyXL',
+    },
+    bodyL: {
+        fontSize: '$bodyL',
+        lineHeight: '$bodyL',
+    },
+    bodyM: {
+        fontSize: '$bodyM',
+        lineHeight: '$bodyM',
+    },
+    bodyS: {
+        fontSize: '$bodyS',
+        lineHeight: '$bodyS',
+    },
+    bodyXS: {
+        fontSize: '$bodyXS',
+        lineHeight: '$bodyXS',
+    },
+    bodyXXS: {
+        fontSize: '$bodyXXS',
+        lineHeight: '$bodyXXS',
+    },
+    badgeLarge: {
+        fontSize: '$badgeLarge',
+        lineHeight: '$badgeLarge',
+    },
+    badgeMedium: {
+        fontSize: '$badgeMedium',
+        lineHeight: '$badgeMedium',
+    },
+    badgeSmall: {
+        fontSize: '$badgeSmall',
+        lineHeight: '$badgeSmall',
+    },
+    badgeExtraSmall: {
+        fontSize: '$badgeExtraSmall',
+        lineHeight: '$badgeExtraSmall',
+    },
+    tooltip: {
+        fontSize: '$tooltip',
+        lineHeight: '$tooltip',
+    },
+    popoversRegular: {
+        fontSize: '$popoversRegular',
+        lineHeight: '$popoversRegular',
+    },
+    captionLarge: {
+        fontSize: '$captionLarge',
+        lineHeight: '$captionLarge',
+    },
+    captionMedium: {
+        fontSize: '$captionMedium',
+        lineHeight: '$captionMedium',
+    },
+    captionSmall: {
+        fontSize: '$captionSmall',
+        lineHeight: '$captionSmall',
+    },
+    buttonLarge: {
+        fontSize: '$buttonLarge',
+        lineHeight: '$buttonLarge',
+    },
+    buttonMedium: {
+        fontSize: '$buttonMedium',
+        lineHeight: '$buttonMedium',
+    },
+    buttonSmall: {
+        fontSize: '$buttonSmall',
+        lineHeight: '$buttonSmall',
+    },
+    buttonExtraSmall: {
+        fontSize: '$buttonExtraSmall',
+        lineHeight: '$buttonExtraSmall',
+    },
+    labelLarge: {
+        fontSize: '$labelLarge',
+        lineHeight: '$labelLarge',
+    },
+    labelMedium: {
+        fontSize: '$labelMedium',
+        lineHeight: '$labelMedium',
+    },
+    labelSmall: {
+        fontSize: '$labelSmall',
+        lineHeight: '$labelSmall',
+    },
+    labelExtraSmall: {
+        fontSize: '$labelExtraSmall',
+        lineHeight: '$labelExtraSmall',
+    },
+
+}
+export const typographyButtonValues = {
+    buttonLarge: {
+        fontSize: '$buttonLarge',
+        lineHeight: '$buttonLarge',
+    },
+    buttonMedium: {
+        fontSize: '$buttonMedium',
+        lineHeight: '$buttonMedium',
+    },
+    buttonSmall: {
+        fontSize: '$buttonSmall',
+        lineHeight: '$buttonSmall',
+    },
+    buttonExtraSmall: {
+        fontSize: '$buttonExtraSmall',
+        lineHeight: '$buttonExtraSmall',
+    },
+}
+export const typographyLabelValues = {
+    labelLarge: {
+        fontSize: '$labelLarge',
+        lineHeight: '$labelLarge',
+    },
+    labelMedium: {
+        fontSize: '$labelMedium',
+        lineHeight: '$labelMedium',
+    },
+    labelSmall: {
+        fontSize: '$labelSmall',
+        lineHeight: '$labelSmall',
+    },
+    labelExtraSmall: {
+        fontSize: '$labelExtraSmall',
+        lineHeight: '$labelExtraSmall',
+    },
+}

package/tsconfig.json

@@ -1,4 +1,4 @@
-{
-  "extends": "@lets-events/ts-config/react.json",
-  "include": ["src"]
+{
+  "extends": "@lets-events/ts-config/react.json",
+  "include": ["src"]
 }

package/src/components/BadgeText.tsx

@@ -1,29 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from "@radix-ui/themes";
-export const BadgeText = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$16', lineHeight: '$16', fontWeight: '$regular' },
-      2: { fontSize: '$14', lineHeight: '$14', fontWeight: '$regular' },
-      3: { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
-      4: { fontSize: '$10', lineHeight: '$10', fontWeight: '$regular' },
-      'xs': { fontSize: '$10', lineHeight: '$10', fontWeight: '$regular' },
-      'sm': { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
-      'md': { fontSize: '$14', lineHeight: '$14', fontWeight: '$regular' },
-      'xl': { fontSize: '$16', lineHeight: '$16', fontWeight: '$regular' },
-    },
-
-  },
-
-  defaultVariants: {
-    size: '1',
-  },
-})
-
-export type BadgeTextProps = ComponentProps<typeof BadgeText> & {
-  as?: ElementType
-}

package/src/components/BodyText.tsx

@@ -1,24 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from "@radix-ui/themes";
-export const BodyText = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  fontWeight: '$regular',
-  variants: {
-    size: {
-      1: { fontSize: '$16', lineHeight: '$24' },
-      2: { fontSize: '$14', lineHeight: '$24' },
-      3: { fontSize: '$13', lineHeight: '$24' },
-      4: { fontSize: '$12', lineHeight: '$16' },
-    },
-  },
-
-  defaultVariants: {
-    size: '1',
-  },
-})
-
-export type BodyTextProps = ComponentProps<typeof BodyText> & {
-  as?: ElementType
-}

package/src/components/CaptionText.tsx

@@ -1,16 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const CaptionText = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  fontSize: '$14',
-  lineHeight: '$16',
-  fontWeight: '$regular',
-})
-
-export type CaptionTextProps = ComponentProps<typeof CaptionText> & {
-  as?: ElementType
-}

package/src/components/DisplayText.tsx

@@ -1,26 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const DisplayText = styled('p', {
-  fontFamily: '$default',
-  lineHeight: '$base',
-  color: '$gray100',
-  letterSpacing: '$2',
-  fontWeight: '$semibold',
-  variants: {
-    size: {
-      lg: { fontSize: '$56' },
-      md: { fontSize: '$48' },
-      sm: { fontSize: '$36' },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export type DisplayTextProps = ComponentProps<typeof DisplayText> & {
-  as?: ElementType
-}

package/src/components/Headline.tsx

@@ -1,29 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Heading } from '@radix-ui/themes'
-
-export const Headline = styled(Heading, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$48', lineHeight: '$64', fontWeight: '$semibold' },
-      2: { fontSize: '$32', lineHeight: '$48', fontWeight: '$semibold' },
-      3: { fontSize: '$24', lineHeight: '$40', fontWeight: '$semibold' },
-      4: { fontSize: '$20', lineHeight: '$36', fontWeight: '$semibold' },
-      5: { fontSize: '$18', lineHeight: '$24', fontWeight: '$semibold' },
-      6: { fontSize: '$18', lineHeight: '$34', fontWeight: '$medium' },
-      7: { fontSize: '$16', lineHeight: '$32', fontWeight: '$semibold' },
-      8: { fontSize: '$16', lineHeight: '$32', fontWeight: '$medium' },
-    },
-  },
-
-  defaultVariants: {
-    size: 1,
-  },
-})
-
-export type HeadlineProps = ComponentProps<typeof Headline> & {
-  as?: ElementType
-}

package/src/components/Label.tsx

@@ -1,28 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const Label = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$18', lineHeight: '$22', fontWeight: '$semibold' },
-      2: { fontSize: '$14', lineHeight: '$16', fontWeight: '$medium' },
-      3: { fontSize: '$14', lineHeight: '$16', fontWeight: '$regular' },
-      4: { fontSize: '$13', lineHeight: '$16', fontWeight: '$semibold', letterSpacing: '2px' },
-      5: { fontSize: '$13', lineHeight: '$16', fontWeight: '$medium' },
-      6: { fontSize: '$13', lineHeight: '$16', fontWeight: '$regular' },
-      7: { fontSize: '$12', lineHeight: '$12', fontWeight: '$regular' },
-    },
-  },
-
-  defaultVariants: {
-    size: '1',
-  },
-})
-
-export type LabelProps = ComponentProps<typeof Label> & {
-  as?: ElementType
-}

package/src/components/Subtitle.tsx

@@ -1,26 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Text } from '@radix-ui/themes'
-
-export const Subtitle = styled(Text, {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  variants: {
-    size: {
-      1: { fontSize: '$20', lineHeight: '$36', fontWeight: '$regular' },
-      2: { fontSize: '$18', lineHeight: '$34', fontWeight: '$regular' },
-      3: { fontSize: '$16', lineHeight: '$32', fontWeight: '$regular' },
-      4: { fontSize: '$14', lineHeight: '$24', fontWeight: '$regular' },
-      5: { fontSize: '$14', lineHeight: '$16', fontWeight: '$semibold' },
-    },
-  },
-
-  defaultVariants: {
-    size: 1,
-  },
-})
-
-export type SubtitleProps = ComponentProps<typeof Subtitle> & {
-  as?: ElementType
-}

package/src/components/TooltipText.tsx

@@ -1,15 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-
-export const TooltipText = styled('span', {
-  fontFamily: '$default',
-  color: '$gray100',
-  letterSpacing: '0px',
-  fontSize: '$13',
-  lineHeight: '$16',
-  fontWeight: '$regular',
-})
-
-export interface TooltipTextProps extends ComponentProps<typeof TooltipText> {
-  as?: ElementType
-}