@ttoss/ui 1.21.0 → 1.21.1

package/dist/esm/index.js

@@ -8,19 +8,9 @@ import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
 
 // src/theme/ThemeProvider.tsx
 import * as React2 from "react";
-import { Global, css } from "@emotion/react";
-import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
-
-// src/theme/defaultFonts.ts
-var defaultFonts = [
-  "https://fonts.googleapis.com/css?family=Asap",
-  "https://fonts.googleapis.com/css?family=Overpass",
-  "https://fonts.googleapis.com/css?family=Overpass+Mono",
-  "https://fonts.googleapis.com/css?family=Flamenco"
-];
 
-// src/theme/defaultTheme.ts
-var defaultTheme = {
+// ../theme/dist/esm/index.js
+var DefaultTheme = {
   colors: {
     text: "#000",
     background: "#fff",
@@ -94,19 +84,27 @@ var defaultTheme = {
     }
   }
 };
+var DefaultFonts = [
+  "https://fonts.googleapis.com/css?family=Asap",
+  "https://fonts.googleapis.com/css?family=Overpass",
+  "https://fonts.googleapis.com/css?family=Overpass+Mono",
+  "https://fonts.googleapis.com/css?family=Flamenco"
+];
 
 // src/theme/ThemeProvider.tsx
+import { Global, css } from "@emotion/react";
+import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = {},
-  fonts = defaultFonts
+  fonts = DefaultFonts
 }) => {
   const mergedTheme = React2.useMemo(() => {
     if (typeof theme === "function") {
       return theme;
     }
-    return merge(defaultTheme, theme);
+    return merge(DefaultTheme, theme);
   }, [theme]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs(ThemeUiProvider, {

package/dist/index.js

@@ -58,19 +58,9 @@ var import_match_media = require("@theme-ui/match-media");
 
 // src/theme/ThemeProvider.tsx
 var React2 = __toESM(require("react"));
-var import_react = require("@emotion/react");
-var import_theme_ui = require("theme-ui");
-
-// src/theme/defaultFonts.ts
-var defaultFonts = [
-  "https://fonts.googleapis.com/css?family=Asap",
-  "https://fonts.googleapis.com/css?family=Overpass",
-  "https://fonts.googleapis.com/css?family=Overpass+Mono",
-  "https://fonts.googleapis.com/css?family=Flamenco"
-];
 
-// src/theme/defaultTheme.ts
-var defaultTheme = {
+// ../theme/dist/esm/index.js
+var DefaultTheme = {
   colors: {
     text: "#000",
     background: "#fff",
@@ -144,19 +134,27 @@ var defaultTheme = {
     }
   }
 };
+var DefaultFonts = [
+  "https://fonts.googleapis.com/css?family=Asap",
+  "https://fonts.googleapis.com/css?family=Overpass",
+  "https://fonts.googleapis.com/css?family=Overpass+Mono",
+  "https://fonts.googleapis.com/css?family=Flamenco"
+];
 
 // src/theme/ThemeProvider.tsx
+var import_react = require("@emotion/react");
+var import_theme_ui = require("theme-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ThemeProvider = ({
   children,
   theme = {},
-  fonts = defaultFonts
+  fonts = DefaultFonts
 }) => {
   const mergedTheme = React2.useMemo(() => {
     if (typeof theme === "function") {
       return theme;
     }
-    return (0, import_theme_ui.merge)(defaultTheme, theme);
+    return (0, import_theme_ui.merge)(DefaultTheme, theme);
   }, [theme]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -31,6 +31,7 @@
     "@emotion/react": "^11.10.4",
     "@ttoss/config": "^1.18.3",
     "@ttoss/test-utils": "^1.16.10",
+    "@ttoss/theme": "^1.0.1",
     "@types/jest": "^29.1.1",
     "jest": "^29.1.2",
     "tsup": "^6.2.3"
@@ -43,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8407ac0199e566fb6695f0caddb9f6bed4bf6578"
+  "gitHead": "3879642eff43efd073abf52595ed0efe7196946a"
 }

package/src/theme/ThemeProvider.spec.tsx

@@ -1,4 +1,4 @@
-import { defaultTheme } from './defaultTheme';
+import { DefaultTheme } from '@ttoss/theme';
 import { renderHook } from '@ttoss/test-utils';
 import { useTheme } from './useTheme';
 import ThemeProvider from './ThemeProvider';
@@ -9,7 +9,7 @@ test('should return default theme colors', () => {
     initialProps: { theme: {} },
   });
 
-  expect(result.current.theme.rawColors).toEqual(defaultTheme.colors);
+  expect(result.current.theme.rawColors).toEqual(DefaultTheme.colors);
 });
 
 test('should return new theme colors', () => {

package/src/theme/ThemeProvider.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
+import { DefaultFonts, DefaultTheme } from '@ttoss/theme';
 import { Global, css } from '@emotion/react';
 import { Theme, ThemeProvider as ThemeUiProvider, merge } from 'theme-ui';
-import { defaultFonts } from './defaultFonts';
-import { defaultTheme } from './defaultTheme';
 
 export type ThemeProviderProps = {
   children?: React.ReactNode;
@@ -16,14 +15,14 @@ export type ThemeProviderProps = {
 const ThemeProvider = ({
   children,
   theme = {},
-  fonts = defaultFonts,
+  fonts = DefaultFonts,
 }: ThemeProviderProps) => {
   const mergedTheme = React.useMemo(() => {
     if (typeof theme === 'function') {
       return theme;
     }
 
-    return merge(defaultTheme, theme);
+    return merge(DefaultTheme, theme);
   }, [theme]);
 
   return (

package/src/theme/defaultFonts.ts

@@ -1,6 +0,0 @@
-export const defaultFonts = [
-  'https://fonts.googleapis.com/css?family=Asap',
-  'https://fonts.googleapis.com/css?family=Overpass',
-  'https://fonts.googleapis.com/css?family=Overpass+Mono',
-  'https://fonts.googleapis.com/css?family=Flamenco',
-];

package/src/theme/defaultTheme.ts

@@ -1,76 +0,0 @@
-import { Theme } from 'theme-ui';
-
-export const defaultTheme: Theme = {
-  colors: {
-    text: '#000',
-    background: '#fff',
-    primary: '#07c',
-    secondary: '#639',
-    gray: '#555',
-    muted: '#f6f6f6',
-    danger: 'red',
-  },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
-  fonts: {
-    body: '"Asap", sans-serif',
-    heading: '"Overpass", sans-serif',
-    monospace: '"Overpass Mono", sans-serif',
-  },
-  styles: {
-    root: {
-      fontFamily: 'body',
-      fontWeight: 'body',
-    },
-    a: {
-      color: 'primary',
-      textDecoration: 'underline',
-      cursor: 'pointer',
-      fontFamily: 'body',
-    },
-    progress: {
-      color: 'primary',
-      backgroundColor: 'background',
-    },
-  },
-  buttons: {
-    cta: {
-      color: 'white',
-      backgroundColor: 'primary',
-    },
-    muted: {
-      color: 'text',
-      backgroundColor: 'muted',
-    },
-    danger: {
-      color: 'white',
-      backgroundColor: 'danger',
-    },
-  },
-  cards: {
-    primary: {
-      backgroundColor: 'background',
-      border: '1px solid black',
-      padding: [4, 5],
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: 'fit-content',
-    },
-  },
-  forms: {
-    input: {
-      fontFamily: 'body',
-    },
-  },
-  text: {
-    default: {
-      color: 'text',
-      fontFamily: 'body',
-    },
-    title: {
-      fontFamily: 'heading',
-      fontSize: 4,
-      lineSpace: '3.5',
-    },
-  },
-};