@lets-events/react 5.0.0 → 6.1.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/Button.tsx

@@ -1,343 +0,0 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-import { Button as ButtonRadix } from '@radix-ui/themes'
-
-export const ButtonStyled = styled(ButtonRadix, {
-  fontFamily: '$default',
-  letterSpacing: 0,
-  border: 0,
-  transition: 'all 300ms ease-out',
-  cursor: 'pointer',
-  borderRadius: '$xs',
-  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: '$10',
-  '&:disabled': {
-    cursor: 'not-allowed',
-    transition: 'none',
-  },
-  variants: {
-    color: {
-      brand: {},
-      neutral: {},
-      purple: {},
-    },
-    variant: {
-      text: {
-        backgroundColor: 'transparent',
-        boxShadow: 'none',
-        padding: 0,
-        border: 0,
-      },
-      contained: {
-        '&:hover': {
-          borderWidth: '$2',
-          borderStyle: 'solid',
-        },
-        '&:focus': {
-          border: 0,
-        },
-        '&:active': {
-          borderWidth: '$4',
-          borderStyle: 'solid',
-        },
-        '&:disabled': {
-          borderWidth: '$1',
-          borderStyle: 'solid',
-          boxShadow: 'none',
-        }
-      },
-      outlined: {
-        borderWidth: '$1',
-        borderStyle: 'solid',
-        '&:hover': {
-          borderWidth: '$2',
-          borderStyle: 'solid',
-        },
-        '&:focus': {
-          borderWidth: '$2',
-          borderStyle: 'solid',
-        },
-        '&:active': {
-          borderWidth: '$2',
-          borderStyle: 'solid',
-        },
-        '&:disabled': {
-          borderWidth: '$1',
-          borderStyle: 'solid',
-          color: '$neutral400',
-        }
-      }
-    },
-    size: {
-      xs: {
-        padding: '$6 $12',
-        fontSize: '$12',
-        lineHeight: '$base',
-      },
-      sm: {
-        padding: '$8 $14',
-        fontSize: '$13',
-        lineHeight: '$smaller',
-      },
-      md: {
-        padding: '$12 $16',
-        fontSize: '$14',
-        lineHeight: '$smaller',
-      },
-      lg: {
-        padding: '$13 $20',
-        fontSize: '$18',
-        lineHeight: '$smaller',
-      },
-    },
-    radii: {
-      'full': {
-        borderRadius: '$full',
-      }
-    },
-  },
-
-  defaultVariants: {
-    variant: 'contained',
-    size: 'md',
-    color: 'brand',
-  },
-
-  compoundVariants: [
-    {
-      variant: 'text',
-      color: 'brand',
-      css: {
-        color: '$brand500',
-        '&:hover': { color: '$brand600' },
-        '&:focus': { color: '$brand700' },
-        '&:active': { color: '$brand500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'neutral',
-      css: {
-        color: '$neutral600',
-        '&:hover': { color: '$neutral700' },
-        '&:focus': { color: '$neutral800' },
-        '&:active': { color: '$neutral500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'purple',
-      css: {
-        color: '$purple500',
-        '&:hover': { color: '$purple600' },
-        '&:focus': { color: '$purple700' },
-        '&:active': { color: '$purple500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'green',
-      css: {
-        color: '$green500',
-        '&:hover': { color: '$green600' },
-        '&:focus': { color: '$green700' },
-        '&:active': { color: '$green500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'blue',
-      css: {
-        color: '$blue500',
-        '&:hover': { color: '$blue600' },
-        '&:focus': { color: '$blue700' },
-        '&:active': { color: '$blue500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'red',
-      css: {
-        color: '$red500',
-        '&:hover': { color: '$red600' },
-        '&:focus': { color: '$red700' },
-        '&:active': { color: '$red500' },
-        '&:disabled': { color: '$dark400' },
-      }
-    },
-
-    // contained
-    {
-      variant: 'contained',
-      color: 'brand',
-      css: {
-        color: '$grey50',
-        backgroundColor: '$brand500',
-        borderWidth: '$2',
-        borderStyle: 'solid',
-        borderColor: 'transparent',
-        '&:hover': {
-          borderColor: '$brand700',
-          backgroundColor: '$blue600',
-        },
-        '&:focus': {
-          backgroundColor: '$blue700',
-        },
-        '&:active': {
-          borderColor: '$brand300',
-          backgroundColor: '$blue500',
-        },
-        '&:disabled': {
-          borderColor: '$brand50',
-          backgroundColor: '$brand50',
-          color: '$neutral400',
-        }
-      }
-    },
-    {
-      variant: 'contained',
-      color: 'neutral',
-      css: {
-        backgroundColor: '$neutral600',
-        color: '$grey50',
-        '&:hover': {
-          backgroundColor: '$neutral700',
-          borderColor: '$neutral800',
-        },
-        '&:focus': {
-          backgroundColor: '$neutral800',
-        },
-        '&:active': {
-          backgroundColor: '$neutral500',
-          borderColor: '$neutral400',
-        },
-        '&:disabled': {
-          backgroundColor: '$neutral50',
-          borderColor: '$neutral200',
-          color: '$neutral400',
-        }
-      }
-    },
-    {
-      variant: 'contained',
-      color: 'purple',
-      css: {
-        backgroundColor: '$purple500',
-        color: '$grey50',
-        '&:hover': {
-          backgroundColor: '$purple600',
-          borderColor: '$purple700',
-        },
-        '&:focus': {
-          backgroundColor: '$purple700',
-        },
-        '&:active': {
-          borderColor: '$purple300',
-          backgroundColor: '$purple500',
-        },
-        '&:disabled': {
-          borderColor: '$purple200',
-          backgroundColor: '$purple200',
-          color: '$neutral400',
-        }
-      }
-    },
-
-
-
-    // outlined
-    {
-      variant: 'outlined',
-      color: 'brand',
-      css: {
-        color: '$brand500',
-        borderColor: '$brand300',
-        backgroundColor: '$grey50',
-        '&:hover': {
-          borderColor: '$brand400',
-          backgroundColor: '$brand50',
-        },
-        '&:focus': {
-          borderColor: '$brand400',
-          backgroundColor: '$brand50',
-        },
-        '&:active': {
-          borderColor: '$brand300',
-          backgroundColor: '$grey50',
-        },
-        '&:disabled': {
-          borderColor: '$brand200',
-          backgroundColor: '$neutral200',
-        }
-      }
-    },
-    {
-      variant: 'outlined',
-      color: 'neutral',
-      css: {
-        color: '$neutral600',
-        borderColor: '$neutral300',
-        backgroundColor: '$grey50',
-        '&:hover': {
-          borderColor: '$neutral400',
-          backgroundColor: '$grey100',
-        },
-        '&:focus': {
-          borderColor: '$neutral400',
-          backgroundColor: '$grey100',
-        },
-        '&:active': {
-          borderColor: '$neutral300',
-          backgroundColor: '$grey50',
-        },
-        '&:disabled': {
-          borderColor: '$neutral200',
-          backgroundColor: '$neutral200',
-        }
-      }
-    },
-    {
-      variant: 'outlined',
-      color: 'purple',
-      css: {
-        color: '$purple500',
-        borderColor: '$purple300',
-        backgroundColor: '$grey50',
-        '&:hover': {
-          borderColor: '$purple400',
-          backgroundColor: '$purple50',
-        },
-        '&:focus': {
-          borderColor: '$purple400',
-          backgroundColor: '$purple50',
-        },
-        '&:active': {
-          borderColor: '$purple300',
-          backgroundColor: '$grey50',
-        },
-        '&:disabled': {
-          borderColor: '$purple200',
-          backgroundColor: '$neutral200',
-        }
-      }
-    },
-
-  ]
-})
-
-export interface ButtonProps extends ComponentProps<typeof ButtonStyled> {
-  asChild?: boolean,
-}
-
-export function Button({ asChild, ...props }: ButtonProps) {
-  const Component = asChild ? ButtonRadix : 'button'
-  return <ButtonStyled as={Component} {...props} />
-}