refactor(theme): implement different approach

packages/core/system/package.json

@@ -40,7 +40,8 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "styled-components": ">=6.0.0"
   },
   "devDependencies": {
     "clean-package": "^2.2.0",

packages/core/system/src/provider.tsx

@@ -2,6 +2,7 @@ import type { ModalProviderProps } from '@react-aria/overlays';
 
 import { I18nProvider, I18nProviderProps } from '@react-aria/i18n';
 import { OverlayProvider } from '@react-aria/overlays';
+import { DefaultTheme, ThemeProvider } from 'styled-components';
 
 interface InterlayUIProviderProps extends Omit<ModalProviderProps, 'children'> {
   children: React.ReactNode;
@@ -10,13 +11,21 @@ interface InterlayUIProviderProps extends Omit<ModalProviderProps, 'children'> {
    * @default "en-US"
    */
   locale?: I18nProviderProps['locale'];
+  theme?: DefaultTheme;
 }
 
-const InterlayUIProvider: React.FC<InterlayUIProviderProps> = ({ children, locale = 'en-US', ...otherProps }) => {
+const InterlayUIProvider: React.FC<InterlayUIProviderProps> = ({
+  children,
+  locale = 'en-US',
+  theme = {},
+  ...otherProps
+}) => {
   return (
-    <I18nProvider locale={locale}>
-      <OverlayProvider {...otherProps}>{children}</OverlayProvider>
-    </I18nProvider>
+    <ThemeProvider theme={theme}>
+      <I18nProvider locale={locale}>
+        <OverlayProvider {...otherProps}>{children}</OverlayProvider>
+      </I18nProvider>
+    </ThemeProvider>
   );
 };
 

packages/core/themeV2/CHANGELOG.md

@@ -0,0 +1,44 @@
+# @interlay/theme
+
+## 0.0.7
+
+### Patch Changes
+
+- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and CTA
+
+## 0.0.6
+
+### Patch Changes
+
+- [#38](https://github.com/interlay/ui/pull/38) [`0f85afc`](https://github.com/interlay/ui/commit/0f85afc17d8a576331cbd8ae5f6b743977cf80a0) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(theme): bob loading spinner (#37)
+
+## 0.0.5
+
+### Patch Changes
+
+- [#36](https://github.com/interlay/ui/pull/36) [`200454d`](https://github.com/interlay/ui/commit/200454d7df265c661a5e74d83293179962be8822) Thanks [@tomjeatt](https://github.com/tomjeatt)! - feature: add BOB tab styles
+
+## 0.0.4
+
+### Patch Changes
+
+- [#29](https://github.com/interlay/ui/pull/29) [`edd2937`](https://github.com/interlay/ui/commit/edd2937b2fbe05fd82b33c1e1cada3ed5c76e3db) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(components): select types
+  fix(theme): bob input disable
+
+## 0.0.3
+
+### Patch Changes
+
+- [#27](https://github.com/interlay/ui/pull/27) [`5d11b0a`](https://github.com/interlay/ui/commit/5d11b0aa63dd3efa13e16a52f3b267bfa09e45d4) Thanks [@danielsimao](https://github.com/danielsimao)! - feat(theme): add bob
+
+## 0.0.2
+
+### Patch Changes
+
+- [#11](https://github.com/interlay/ui/pull/11) [`fec9ccb`](https://github.com/interlay/ui/commit/fec9ccbdbfbee8fa6bb1d8ebfbb29fa5497fd442) Thanks [@danielsimao](https://github.com/danielsimao)! - fix/remove theme font
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial Release 🎉

packages/core/themeV2/README.md

@@ -0,0 +1,21 @@
+# @interlay/theme
+
+Interlay UI components theme.
+
+## Installation
+
+```sh
+yarn add @interlay/theme
+# or
+npm i @interlay/theme
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/interlay/ui/blob/main/CONTRIBUTING.MD)
+for details.
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

packages/core/themeV2/clean-package.config.json

@@ -0,0 +1,20 @@
+{
+  "remove": ["devDependencies"],
+  "replace": {
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.mjs",
+        "require": "./dist/index.js"
+      },
+      "./dist/*.css": {
+        "import": "./dist/*.css",
+        "require": "./dist/*.css"
+      },
+      "./package.json": "./package.json"
+    }
+  }
+}

packages/core/themeV2/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@interlay/theme",
+  "version": "0.0.7",
+  "description": "The default theme for Interlay UI components",
+  "homepage": "https://github.com/interlay/ui#readme",
+  "license": "MIT",
+  "keywords": [
+    "interlay",
+    "interlay ui",
+    "theme",
+    "theming",
+    "design",
+    "ui",
+    "components",
+    "classNames",
+    "css"
+  ],
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/interlay/ui.git",
+    "directory": "packages/core/theme"
+  },
+  "bugs": {
+    "url": "https://github.com/interlay/ui/issues"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build": "tsup",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "clean-package": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "clean-package": "./clean-package.config.json"
+}

packages/core/themeV2/src/components/button.ts

@@ -0,0 +1,25 @@
+import { FontSize, LineHeight, Spacing } from '../core';
+
+type ButtonSizes = 'xs' | 's' | 'md' | 'lg';
+
+type ButtonSizeParams = {
+  paddingX: Spacing;
+  text: FontSize;
+  lineHeight: LineHeight;
+  height: Spacing;
+};
+
+type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'text';
+
+type ButtonVariantParams = {
+  bg: string;
+  bgHover: string;
+  color: string;
+};
+
+type ButtonTheme = {
+  size: Record<ButtonSizes, ButtonSizeParams>;
+  variant: Record<ButtonVariants, ButtonVariantParams>;
+};
+
+export type { ButtonSizes, ButtonTheme, ButtonVariants };

packages/core/themeV2/src/components/index.ts

@@ -0,0 +1 @@
+export * from './button';

packages/core/themeV2/src/core/breakpoints.ts

@@ -0,0 +1,20 @@
+type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type ResponsiveProp<T extends number | string> = T | Partial<{ [K in BreakPoints]: T }>;
+
+const values: Record<BreakPoints, number> = {
+  xs: 0, // phone
+  sm: 600, // tablet
+  md: 900, // small laptop
+  lg: 1200, // desktop
+  xl: 1536 // large screen
+};
+
+const breakpoints = {
+  values,
+  up: (key: BreakPoints): string => `(min-width:${values[key]}px)`,
+  down: (key: BreakPoints): string => `(max-width:${values[key]}px)`
+};
+
+export { breakpoints };
+export type { BreakPoints, ResponsiveProp };

packages/core/themeV2/src/core/font-size.ts

@@ -0,0 +1,17 @@
+type FontSize = keyof typeof fontSize;
+
+const fontSize = {
+  xs: '0.75rem',
+  s: '0.875rem',
+  md: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  xl2: '1.5rem',
+  xl3: '1.875rem',
+  xl4: '2.25rem',
+  xl5: '3rem',
+  xl6: '4rem'
+};
+
+export { fontSize };
+export type { FontSize };

packages/core/themeV2/src/core/font-weight.ts

@@ -0,0 +1,16 @@
+type FontWeight = keyof typeof fontWeight;
+
+const fontWeight = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+
+export { fontWeight };
+export type { FontWeight };

packages/core/themeV2/src/core/index.ts

@@ -0,0 +1,6 @@
+export * from './font-size';
+export * from './font-weight';
+export * from './line-height';
+export * from './rounded';
+export * from './space';
+export * from './breakpoints';

packages/core/themeV2/src/core/line-height.ts

@@ -0,0 +1,13 @@
+type LineHeight = keyof typeof lineHeight;
+
+const lineHeight = {
+  none: 1,
+  xs: 1.25,
+  s: 1.375,
+  md: 1.5,
+  lg: 1.625,
+  xl: 2
+};
+
+export { lineHeight };
+export type { LineHeight };

packages/core/themeV2/src/core/rounded.ts

@@ -0,0 +1,13 @@
+type Rounded = keyof typeof rounded;
+
+const rounded = {
+  xs: '2px',
+  s: '4px',
+  md: '6px',
+  lg: '8px',
+  xl: '12px',
+  full: '9999px'
+};
+
+export { rounded };
+export type { Rounded };

packages/core/themeV2/src/core/space.ts

@@ -0,0 +1,10 @@
+type Spacing = keyof typeof spacing;
+
+const spacing = {
+  spacing0: '0rem',
+  spacing1: '0.25rem',
+  spacing2: '0.50rem'
+};
+
+export { spacing };
+export type { Spacing };

packages/core/themeV2/src/define.ts

@@ -0,0 +1,22 @@
+import { fontSize, fontWeight, lineHeight, rounded, spacing, breakpoints } from './core';
+import { ButtonTheme } from './components';
+
+const baseTheme = {
+  ...fontSize,
+  ...fontWeight,
+  ...lineHeight,
+  ...rounded,
+  ...spacing,
+  ...breakpoints
+};
+
+type Theme = {
+  button: ButtonTheme;
+};
+
+const defineTheme = (theme: Theme) => ({
+  ...baseTheme,
+  ...theme
+});
+
+export { baseTheme, defineTheme };

packages/core/themeV2/src/index.ts

@@ -0,0 +1 @@
+export type { ButtonSizes, ButtonVariants } from './components';

packages/core/themeV2/src/themes/bob/button.ts

@@ -0,0 +1,9 @@
+import { ButtonTheme } from '../../components';
+
+const button: ButtonTheme = {
+  size: {
+    xs: {}
+  }
+};
+
+export { button };

packages/core/themeV2/src/themes/bob/index.ts

@@ -0,0 +1,9 @@
+import { defineTheme } from '../../define';
+
+import { button } from './button';
+
+const theme = defineTheme({
+  button
+});
+
+export { theme };

packages/core/themeV2/src/themes/index.ts

@@ -0,0 +1 @@
+export * from './bob';

packages/core/themeV2/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": false
+  },
+  "include": ["src"]
+}

packages/core/themeV2/tsup.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  clean: true,
+  target: 'es2019',
+  format: ['cjs', 'esm'],
+  banner: { js: '"use client";' },
+  entry: {
+    index: 'src/index.ts',
+    kintsugi: 'src/css/theme.kintsugi.css',
+    interlay: 'src/css/theme.interlay.css',
+    bob: 'src/css/theme.bob.css'
+  },
+  dts: {
+    entry: {
+      index: 'src/index.ts'
+    }
+  }
+});