various cleanups and doc fixes

.size-limit.json

@@ -8,7 +8,7 @@
     "limit": "50 kB"
   },
   {
-    "path": "./components/dist/style.css",
+    "path": "./components/dist/thorin.css",
     "limit": "40 kB",
     "webpack": false
   }

components/package.json

@@ -3,15 +3,18 @@
   "version": "1.0.0-beta.9",
   "description": "A web3 native design system",
   "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./style.css": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
+    "./thorin.css": {
+      "import": "./dist/thorin.css",
+      "require": "./dist/thorin.css"
     }
   },
   "sideEffects": [
@@ -33,7 +36,7 @@
     "prepack": "pnpm build",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "ver": "pnpm npm version"
+    "ver": "npm version"
   },
   "dependencies": {
     "@vanilla-extract/sprinkles": "^1.6.3",

components/src/components/molecules/Dropdown/ActionSheet.tsx

@@ -97,7 +97,7 @@ export const ActionSheet = React.forwardRef<HTMLDivElement, Props>(
                   setIsOpen(false)
                 }}
               >
-                {icon}
+                <Box as={icon} />
                 {href
                   ? (
                       <ActionSheetLinkItem color={color} href={href}>

components/src/css/sprinkles.css.ts

@@ -27,6 +27,7 @@ const colorProperties = defineProperties({
     borderLeftColor: colorPropertiesObject,
     borderRightColor: colorPropertiesObject,
     opacity: ['0', '1', '0.5', '0.7', '0.9', '0.95', '1', 'inherit', 'initial'],
+
   },
   shorthands: {
     bg: ['backgroundColor'],

components/src/tokens/colorStyle.ts

@@ -1,16 +1,5 @@
 import { type Hue, PRIMARY_COLORS, lightColors, darkColors } from './color'
 
-const GRADIENT_COLORS = [
-  'accent',
-  'blue',
-  'purple',
-  'red',
-  'green',
-  'grey',
-] as const
-
-type GradientColor = (typeof GRADIENT_COLORS)[number]
-
 export type ColorStyleBase = `${Hue}Primary` | `${Hue}Secondary` | 'transparent' | 'disabled' | 'background'
 
 type ColorStyleType = 'Text' | 'Background' | 'Border' | 'Hover'
@@ -49,88 +38,6 @@ const makeColorStyles = (colors: typeof lightColors): { [key in ColorStyles]: st
   return Object.fromEntries([...colorStyles, ...additionalColorStyles])
 }
 
-const makeColorStyleMap = () => {
-  const primaryStyles = Object.fromEntries(
-    PRIMARY_COLORS.map(color => [
-      `${color}Primary`,
-      {
-        text: `$backgroundPrimary`,
-        background: `$${color}Primary`,
-        border: 'transparent',
-        hover: `$${color}Bright`,
-      },
-    ]),
-  ) as {
-    [key in `${Hue}Primary`]: any
-  }
-  const secondaryStyles = Object.fromEntries(
-    PRIMARY_COLORS.map(color => [
-      `${color}Secondary`,
-      {
-        text: `$${color}Primary`,
-        background: `$${color}Surface`,
-        border: 'transparent',
-        hover: `$${color}Light`,
-      },
-    ]),
-  ) as {
-    [key in `${Hue}Secondary`]: any
-  }
-
-  const gradientValues = Object.fromEntries(
-    GRADIENT_COLORS.map(color => [
-      `${color}Gradient`,
-      {
-        text: `$backgroundPrimary`,
-        background: `$${color}Gradient`,
-        border: 'transparent',
-        hover: `$${color}Gradient`,
-      },
-    ]),
-  ) as {
-    [key in `${GradientColor}Gradient`]: any
-  }
-
-  const transparent = {
-    text: 'initial',
-    background: 'transparent',
-    border: 'transparent',
-    hover: 'greyLight',
-  } as const
-
-  const disabled = {
-    text: 'greyPrimary',
-    background: 'greyLight',
-    border: 'greyLight',
-    hover: 'greyLight',
-  } as const
-
-  const background = {
-    text: 'textPrimary',
-    background: 'backgroundPrimary',
-    border: 'border',
-    hover: 'backgroundSecondary',
-  } as const
-
-  return {
-    ...primaryStyles,
-    ...secondaryStyles,
-    ...gradientValues,
-    transparent,
-    disabled,
-    background,
-  }
-}
-
-const colorStyleMap = makeColorStyleMap()
-
-type ColorStyle = keyof ReturnType<typeof makeColorStyleMap>
-type ColorStyleProperty = 'text' | 'background' | 'border' | 'hover'
-export const getColorStyle = (
-  colorStyle: ColorStyle,
-  property: ColorStyleProperty,
-) => colorStyleMap[colorStyle]?.[property] || 'redPrimary'
-
 export const lightColorStyles = makeColorStyles(lightColors)
 export const darkColorStyles = makeColorStyles(darkColors)
 

components/src/tokens/space.ts

@@ -1,4 +1,4 @@
-export const negativeSpace = {
+const negativeSpace = {
   '-0.5': '-0.125rem',
   '-1.5': '-0.375rem',
   '-4': '-1rem',

components/src/tokens/typography.ts

@@ -36,7 +36,7 @@ export const letterSpacings = {
   '0.03': '0.03em',
 } as const
 
-export type LetterSapcing = keyof typeof letterSpacings
+export type LetterSpacing = keyof typeof letterSpacings
 
 export const lineHeights = {
   headingOne: '3rem',

components/src/types/index.ts

@@ -4,8 +4,6 @@ import type { Hue as TokenHue, Mode as TokenMode, Tokens } from '@/src/tokens'
 
 export type AllOrNone<T> = T | { [K in keyof T]?: never }
 
-export type { FontVariant, WithTypography } from './withTypography'
-
 /*
  * Disallow string from React.ReactNode
  */
@@ -27,26 +25,16 @@ export type Mode = TokenMode
 
 export type DefaultTheme = Tokens
 
-export type Size = 'small' | 'medium' | 'extraSmall' | undefined
-
 export type OptionalTitle = AllOrNone<{
   title: string
   titleId: string
 }>
-export type IconProps = React.SVGProps<SVGSVGElement> & OptionalTitle
 
 export type Alert = 'error' | 'warning' | 'info'
 export type WithAlert = {
   alert?: Alert
 }
 
-export type Icon = React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-
-export type WithIcon = {
-  /** An svg to be used by the component */
-  icon?: React.ReactNode
-}
-
 export type Neverable<TNever, TOmit> = {
   [P in keyof Omit<TNever, keyof TOmit>]?: never
 }

docs/playroom.config.cjs

@@ -27,7 +27,7 @@ const config = {
       rules: [
         {
           test: (filename) => {
-            const pass = filename.endsWith('dist/style.css') || filename.endsWith('frameStyle.css')
+            const pass = filename.endsWith('dist/thorin.css') || filename.endsWith('frameStyle.css')
             if (pass) {
               console.log('pass', filename)
             }

docs/src/components/Logos/Logos.tsx

@@ -12,15 +12,16 @@ const Panel = ({ background = 'background', alt, src }: Item) => {
     <Box
       flex={1}
       position="relative"
-      border="1px solid"
+      borderWidth="1x"
+      borderStyle="solid"
       borderColor="border"
       borderRadius="large"
       display="flex"
       alignItems="center"
       justifyContent="center"
       py="10"
       px="4"
-      backgroundColor={`$${background}`}
+      backgroundColor={background}
     >
       <Image src={src} height="56" width="126" alt={alt} />
       <Box

docs/src/components/Palette/Palette.tsx

@@ -7,7 +7,7 @@ import {
   RAW_PALETTE_COLORS,
   useTheme,
 } from '@ensdomains/thorin'
-import { grid, colorLabel } from './styles.css'
+import { grid, colorLabel, colorCell } from './styles.css'
 import { PaletteModal } from '../PaletteModal/PaletteModal'
 
 const ColorLabel = ({ children }: React.PropsWithChildren) => (
@@ -43,10 +43,11 @@ const ColorCell = ({
   onClick: () => void
 }) => (
   <Box
-    transform={{ base: 'scale(1)', hover: 'scale(1.05)' }}
-    backgroundColor={`rgb(${color[0]}, ${color[1]}, ${color[2]})`}
+    style={{
+      backgroundColor: `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
+    }}
     borderRadius="large"
-    transition="transform 0.15s ease-in-out"
+    className={colorCell}
     onClick={onClick}
   />
 )

docs/src/components/Palette/styles.css.ts

@@ -14,3 +14,11 @@ export const colorLabel = style({
   writingMode: 'vertical-rl',
   transform: 'rotate(180deg)',
 })
+
+export const colorCell = style({
+  'transform': 'scale(1)',
+  ':hover': {
+    transform: 'scale(1.05)',
+  },
+  'transition': 'transform 0.15s ease-in-out',
+})