@ttoss/ui 1.8.2 → 1.9.2

package/dist/esm/index.js

@@ -23,6 +23,7 @@ import * as React from "react";
 
 // src/index.ts
 import * as color from "@theme-ui/color";
+import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
 import { Themed } from "@theme-ui/mdx";
 
 // src/theme/ThemeProvider.tsx
@@ -30,6 +31,14 @@ import { Global, css } from "@emotion/react";
 import { ThemeProvider as ThemeUiProvider, merge } from "@theme-ui/core";
 import * as React2 from "react";
 
+// 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 = {
   colors: {
@@ -37,14 +46,26 @@ var defaultTheme = {
     background: "#fff",
     primary: "#07c",
     secondary: "#639",
-    gray: "#555"
+    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'
   },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   styles: {
+    root: {
+      fontFamily: "body",
+      fontWeight: "body"
+    },
     a: {
       color: "primary",
       textDecoration: "underline",
-      cursor: "pointer"
+      cursor: "pointer",
+      fontFamily: "body"
     },
     progress: {
       color: "primary",
@@ -52,26 +73,44 @@ var defaultTheme = {
     }
   },
   buttons: {
-    primary: {
+    cta: {
       color: "white",
       backgroundColor: "primary"
     },
-    secondary: {
+    muted: {
+      color: "text",
+      backgroundColor: "muted"
+    },
+    danger: {
       color: "white",
-      backgroundColor: "secondary"
+      backgroundColor: "danger"
     }
   },
   cards: {
     primary: {
       backgroundColor: "background",
       border: "1px solid black",
-      padding: [4, 5]
+      padding: [4, 5],
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "fit-content"
+    }
+  },
+  forms: {
+    input: {
+      fontFamily: "body"
     }
   },
   text: {
+    default: {
+      color: "text",
+      fontFamily: "body"
+    },
     title: {
-      fontSize: [4, 5],
-      textAlign: "center"
+      fontFamily: "heading",
+      fontSize: 4,
+      lineSpace: "3.5"
     }
   }
 };
@@ -80,7 +119,7 @@ var defaultTheme = {
 var ThemeProvider = ({
   children,
   theme = {},
-  fonts = []
+  fonts = defaultFonts
 }) => {
   const mergedTheme = React2.useMemo(() => {
     if (typeof theme === "function") {
@@ -116,7 +155,7 @@ import { Box } from "@theme-ui/components";
 import { Button as ButtonUi } from "@theme-ui/components";
 var Button = (props) => {
   return /* @__PURE__ */ React.createElement(ButtonUi, __spreadProps(__spreadValues({}, props), {
-    sx: __spreadValues({ cursor: "pointer", padding: 2 }, props.sx)
+    sx: __spreadValues({ cursor: "pointer", fontFamily: "body" }, props.sx)
   }));
 };
 var Button_default = Button;
@@ -185,5 +224,7 @@ export {
   ThemeProvider_default as ThemeProvider,
   Themed,
   color,
+  useBreakpointIndex,
+  useResponsiveValue,
   useTheme
 };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { color };
 import * as _theme_ui_core from '@theme-ui/core';
 import { Theme } from '@theme-ui/core';
 export { Theme } from '@theme-ui/core';
+export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 export { Themed } from '@theme-ui/mdx';
 import * as React from 'react';
 import * as _theme_ui_components from '@theme-ui/components';

package/dist/index.js

@@ -59,6 +59,8 @@ __export(src_exports, {
   ThemeProvider: () => ThemeProvider_default,
   Themed: () => import_mdx.Themed,
   color: () => color,
+  useBreakpointIndex: () => import_match_media.useBreakpointIndex,
+  useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
 });
 
@@ -67,6 +69,7 @@ var React = __toESM(require("react"));
 
 // src/index.ts
 var color = __toESM(require("@theme-ui/color"));
+var import_match_media = require("@theme-ui/match-media");
 var import_mdx = require("@theme-ui/mdx");
 
 // src/theme/ThemeProvider.tsx
@@ -74,6 +77,14 @@ var import_react = require("@emotion/react");
 var import_core = require("@theme-ui/core");
 var React2 = __toESM(require("react"));
 
+// 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 = {
   colors: {
@@ -81,14 +92,26 @@ var defaultTheme = {
     background: "#fff",
     primary: "#07c",
     secondary: "#639",
-    gray: "#555"
+    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'
   },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   styles: {
+    root: {
+      fontFamily: "body",
+      fontWeight: "body"
+    },
     a: {
       color: "primary",
       textDecoration: "underline",
-      cursor: "pointer"
+      cursor: "pointer",
+      fontFamily: "body"
     },
     progress: {
       color: "primary",
@@ -96,26 +119,44 @@ var defaultTheme = {
     }
   },
   buttons: {
-    primary: {
+    cta: {
       color: "white",
       backgroundColor: "primary"
     },
-    secondary: {
+    muted: {
+      color: "text",
+      backgroundColor: "muted"
+    },
+    danger: {
       color: "white",
-      backgroundColor: "secondary"
+      backgroundColor: "danger"
     }
   },
   cards: {
     primary: {
       backgroundColor: "background",
       border: "1px solid black",
-      padding: [4, 5]
+      padding: [4, 5],
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "fit-content"
+    }
+  },
+  forms: {
+    input: {
+      fontFamily: "body"
     }
   },
   text: {
+    default: {
+      color: "text",
+      fontFamily: "body"
+    },
     title: {
-      fontSize: [4, 5],
-      textAlign: "center"
+      fontFamily: "heading",
+      fontSize: 4,
+      lineSpace: "3.5"
     }
   }
 };
@@ -124,7 +165,7 @@ var defaultTheme = {
 var ThemeProvider = ({
   children,
   theme = {},
-  fonts = []
+  fonts = defaultFonts
 }) => {
   const mergedTheme = React2.useMemo(() => {
     if (typeof theme === "function") {
@@ -160,7 +201,7 @@ var import_components = require("@theme-ui/components");
 var import_components2 = require("@theme-ui/components");
 var Button = (props) => {
   return /* @__PURE__ */ React.createElement(import_components2.Button, __spreadProps(__spreadValues({}, props), {
-    sx: __spreadValues({ cursor: "pointer", padding: 2 }, props.sx)
+    sx: __spreadValues({ cursor: "pointer", fontFamily: "body" }, props.sx)
   }));
 };
 var Button_default = Button;
@@ -231,5 +272,7 @@ module.exports = __toCommonJS(src_exports);
   ThemeProvider,
   Themed,
   color,
+  useBreakpointIndex,
+  useResponsiveValue,
   useTheme
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.8.2",
+  "version": "1.9.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -37,14 +37,15 @@
     "@theme-ui/color": "^0.13.1",
     "@theme-ui/components": "^0.13.1",
     "@theme-ui/core": "^0.13.1",
+    "@theme-ui/match-media": "^0.13.1",
     "@theme-ui/mdx": "^0.13.1"
   },
   "peerDependencies": {
     "react": ">=17.0.2"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.8.2",
-    "@ttoss/test-utils": "^1.8.2"
+    "@ttoss/config": "^1.9.2",
+    "@ttoss/test-utils": "^1.9.2"
   },
-  "gitHead": "22b40decb1068840be424f2054d5de2af37f3f2e"
+  "gitHead": "528f6ffab12b98a8b9eab219de9defe41bc8d141"
 }

package/src/components/Button/Button.tsx

@@ -6,7 +6,10 @@ export type { ButtonProps };
 
 const Button = (props: ButtonProps) => {
   return (
-    <ButtonUi {...props} sx={{ cursor: 'pointer', padding: 2, ...props.sx }} />
+    <ButtonUi
+      {...props}
+      sx={{ cursor: 'pointer', fontFamily: 'body', ...props.sx }}
+    />
   );
 };
 

package/src/index.spec.tsx

@@ -0,0 +1,7 @@
+import * as uiModule from './';
+
+test('should export methods', () => {
+  expect(uiModule.useBreakpointIndex).toBeDefined();
+  expect(uiModule.useResponsiveValue).toBeDefined();
+  expect(uiModule.useTheme).toBeDefined();
+});

package/src/index.ts

@@ -1,5 +1,6 @@
 export * as color from '@theme-ui/color';
 export type { Theme } from '@theme-ui/core';
+export { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media';
 export { Themed } from '@theme-ui/mdx';
 
 export {

package/src/theme/ThemeProvider.tsx

@@ -2,6 +2,7 @@ import { Global, css } from '@emotion/react';
 import { ThemeProvider as ThemeUiProvider, Theme, merge } from '@theme-ui/core';
 import * as React from 'react';
 
+import { defaultFonts } from './defaultFonts';
 import { defaultTheme } from './defaultTheme';
 
 export type ThemeProviderProps = {
@@ -16,7 +17,7 @@ export type ThemeProviderProps = {
 const ThemeProvider = ({
   children,
   theme = {},
-  fonts = [],
+  fonts = defaultFonts,
 }: ThemeProviderProps) => {
   const mergedTheme = React.useMemo(() => {
     if (typeof theme === 'function') {

package/src/theme/defaultFonts.ts

@@ -0,0 +1,6 @@
+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

@@ -7,13 +7,25 @@ export const defaultTheme: Theme = {
     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',
   },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   styles: {
+    root: {
+      fontFamily: 'body',
+      fontWeight: 'body',
+    },
     a: {
       color: 'primary',
       textDecoration: 'underline',
       cursor: 'pointer',
+      fontFamily: 'body',
     },
     progress: {
       color: 'primary',
@@ -21,13 +33,17 @@ export const defaultTheme: Theme = {
     },
   },
   buttons: {
-    primary: {
+    cta: {
       color: 'white',
       backgroundColor: 'primary',
     },
-    secondary: {
+    muted: {
+      color: 'text',
+      backgroundColor: 'muted',
+    },
+    danger: {
       color: 'white',
-      backgroundColor: 'secondary',
+      backgroundColor: 'danger',
     },
   },
   cards: {
@@ -35,12 +51,26 @@ export const defaultTheme: Theme = {
       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: {
-      fontSize: [4, 5],
-      textAlign: 'center',
+      fontFamily: 'heading',
+      fontSize: 4,
+      lineSpace: '3.5',
     },
   },
 };