feat(ui): Introduce ceramic theme

.changeset/sharp-pugs-sing.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/ceramic/button.ts

@@ -0,0 +1,79 @@
+import { style, variants } from './variants';
+
+export const buttonStyles = variants({
+  base: style(theme => ({
+    appearance: 'none',
+    boxSizing: 'border-box',
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing[1],
+    height: theme.spacing[7],
+    borderRadius: theme.spacing[1.5],
+    fontSize: theme.typography.label[3].fontSize,
+    fontWeight: theme.fontWeights.medium,
+    fontFamily: theme.fontFamilies.sans,
+    border: 'none',
+    outline: 'none',
+    margin: 0,
+    paddingBlock: 0,
+    paddingInline: theme.spacing[3],
+    cursor: 'pointer',
+    textDecoration: 'none',
+    ...theme.fontRendering,
+    isolation: 'isolate',
+    transition: '300ms cubic-bezier(0.4, 0.36, 0, 1)',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      zIndex: -1,
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+      background: `linear-gradient(180deg, ${theme.alpha(theme.colors.white, 20)} 0%, ${theme.alpha(theme.colors.white, 0)} 100%)`,
+      opacity: 0.5,
+      transition: 'opacity 300ms cubic-bezier(0.4, 0.36, 0, 1)',
+    },
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      zIndex: -1,
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+      background: `linear-gradient(180deg, ${theme.alpha(theme.colors.white, 10)} 46%, ${theme.alpha(theme.colors.white, 0)} 54%)`,
+      mixBlendMode: 'overlay',
+    },
+    '@media (hover: hover)': {
+      '&:hover::before': {
+        opacity: 1,
+      },
+    },
+    '&:focus-visible': {
+      ...theme.focusRing(),
+    },
+  })),
+  variants: {
+    variant: {
+      primary: style(theme => ({
+        background: theme.colors.purple[700],
+        color: theme.colors.white,
+        boxShadow: `${theme.colors.white} 0px 0px 0px 0px, ${theme.colors.purple[700]} 0px 0px 0px 1px, ${theme.alpha(theme.colors.white, 7)} 0px 1px 0px 0px inset, ${theme.alpha(theme.colors.gray[1300], 20)} 0px 1px 3px 0px`,
+      })),
+      secondary: style(theme => ({
+        background: theme.colors.gray[1100],
+        color: theme.colors.white,
+        boxShadow: `${theme.colors.white} 0px 0px 0px 0px, ${theme.colors.gray[1100]} 0px 0px 0px 1px, ${theme.alpha(theme.colors.white, 7)} 0px 1px 0px 0px inset, ${theme.alpha(theme.colors.gray[1300], 20)} 0px 1px 3px 0px`,
+      })),
+    },
+    fullWidth: {
+      true: { width: '100%' },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    fullWidth: false,
+  },
+});

packages/ui/src/ceramic/text.ts

@@ -0,0 +1,48 @@
+import { style, variants } from './variants';
+
+export const textStyles = variants({
+  base: style(theme => ({
+    boxSizing: 'border-box',
+    padding: 0,
+    margin: 0,
+    background: 'none',
+    border: 'none',
+    fontFamily: theme.fontFamilies.sans,
+    textDecoration: 'none',
+    ...theme.fontRendering,
+  })),
+  variants: {
+    variant: {
+      'heading-1': style(theme => ({ ...theme.typography.heading[1] })),
+      'heading-2': style(theme => ({ ...theme.typography.heading[2] })),
+      'heading-3': style(theme => ({ ...theme.typography.heading[3] })),
+      'heading-4': style(theme => ({ ...theme.typography.heading[4] })),
+      'heading-5': style(theme => ({ ...theme.typography.heading[5] })),
+      'heading-6': style(theme => ({ ...theme.typography.heading[6] })),
+      'label-1': style(theme => ({ ...theme.typography.label[1] })),
+      'label-2': style(theme => ({ ...theme.typography.label[2] })),
+      'label-3': style(theme => ({ ...theme.typography.label[3] })),
+      'label-4': style(theme => ({ ...theme.typography.label[4] })),
+      'label-5': style(theme => ({ ...theme.typography.label[5] })),
+      'body-1': style(theme => ({ ...theme.typography.body[1] })),
+      'body-2': style(theme => ({ ...theme.typography.body[2] })),
+      'body-3': style(theme => ({ ...theme.typography.body[3] })),
+      'body-4': style(theme => ({ ...theme.typography.body[4] })),
+    },
+    color: {
+      default: style(theme => ({ color: theme.colors.primary })),
+      muted: style(theme => ({ color: theme.colors.secondary })),
+      subtle: style(theme => ({ color: theme.colors.dimmed })),
+      accent: style(theme => ({ color: theme.colors.brand })),
+    },
+    font: {
+      sans: style(theme => ({ fontFamily: theme.fontFamilies.sans })),
+      mono: style(theme => ({ fontFamily: theme.fontFamilies.mono })),
+    },
+  },
+  defaultVariants: {
+    variant: 'body-2',
+    color: 'default',
+    font: 'sans',
+  },
+});

packages/ui/src/ceramic/theme-provider.tsx

@@ -0,0 +1,19 @@
+// eslint-disable-next-line no-restricted-imports
+import createCache from '@emotion/cache';
+// eslint-disable-next-line no-restricted-imports
+import { CacheProvider, ThemeContext } from '@emotion/react';
+import React from 'react';
+
+import { type CeramicTheme, ceramicTheme } from './theme';
+
+const ceramicCache = createCache({ key: 'ceramic' });
+
+export const CeramicThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <CacheProvider value={ceramicCache}>
+      <ThemeContext.Provider value={ceramicTheme}>{children}</ThemeContext.Provider>
+    </CacheProvider>
+  );
+};
+
+export const useCeramicTheme = () => React.useContext(ThemeContext) as CeramicTheme;