@ttoss/ui 1.27.0 → 1.27.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/esm/index.js +98 -18
  2. package/dist/index.js +98 -20
  3. package/package.json +3 -2
  4. package/src/theme/ThemeProvider.tsx +3 -3
package/dist/esm/index.js CHANGED
@@ -1,8 +1,5 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
 
3
- // tsup.inject.js
4
- import * as React from "react";
5
-
6
3
  // src/index.ts
7
4
  import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
8
5
 
@@ -10,26 +7,63 @@ import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
10
7
  import * as React2 from "react";
11
8
 
12
9
  // ../theme/dist/esm/index.js
13
- var DefaultTheme = {
10
+ var BruttalTheme = {
14
11
  colors: {
15
- text: "#000",
12
+ text: "#0D0D0D",
16
13
  background: "#fff",
17
- primary: "#07c",
14
+ backgroundBrand: "#C2C2C2",
15
+ primary: "#0D0D0D",
18
16
  secondary: "#639",
19
17
  gray: "#555",
20
18
  muted: "#f6f6f6",
21
- danger: "red"
19
+ danger: "red",
20
+ accent: "#0000FF",
21
+ textOnSurface: "#FFFFFF"
22
22
  },
23
23
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
24
24
  fonts: {
25
- body: '"Asap", sans-serif',
26
- heading: '"Overpass", sans-serif',
27
- monospace: '"Overpass Mono", sans-serif'
25
+ body: '"Inconsolata", sans-serif',
26
+ heading: '"Work Sans", sans-serif',
27
+ monospace: '"Inconsolata", sans-serif'
28
+ },
29
+ fontSizes: {
30
+ xxs: "0.5rem",
31
+ xs: "0.75rem",
32
+ sm: "0.875rem",
33
+ base: "1rem",
34
+ lg: "1.125rem",
35
+ xl: "1.25rem",
36
+ "2xl": "1.5rem",
37
+ "3xl": "1.875rem",
38
+ "4xl": "2.25rem",
39
+ "5xl": "3rem",
40
+ "6xl": "3.75rem",
41
+ "7xl": "4.5rem",
42
+ "8xl": "6rem",
43
+ "9xl": "8rem"
44
+ },
45
+ fontWeights: {
46
+ thin: 100,
47
+ extralight: 200,
48
+ light: 300,
49
+ normal: 400,
50
+ medium: 500,
51
+ semibold: 600,
52
+ bold: 700,
53
+ extrabold: 800
54
+ },
55
+ letterSpacings: {
56
+ tighter: "-0.05em",
57
+ tight: "-0.025em",
58
+ normal: "0em",
59
+ wide: "0.025em",
60
+ wider: "0.05em",
61
+ widest: "0.1em"
28
62
  },
29
63
  styles: {
30
64
  root: {
31
65
  fontFamily: "body",
32
- fontWeight: "body"
66
+ fontWeight: "normal"
33
67
  },
34
68
  a: {
35
69
  color: "primary",
@@ -42,6 +76,7 @@ var DefaultTheme = {
42
76
  backgroundColor: "background"
43
77
  }
44
78
  },
79
+ borders: [0, "3px solid #0D0D0D"],
45
80
  buttons: {
46
81
  cta: {
47
82
  color: "white",
@@ -54,6 +89,23 @@ var DefaultTheme = {
54
89
  danger: {
55
90
  color: "white",
56
91
  backgroundColor: "danger"
92
+ },
93
+ primary: {
94
+ ":disabled": {
95
+ backgroundColor: "backgroundBrand",
96
+ cursor: "default"
97
+ }
98
+ },
99
+ secondary: {
100
+ color: "text",
101
+ backgroundColor: "white",
102
+ borderColor: "text",
103
+ borderWidth: 1,
104
+ borderStyle: "solid",
105
+ ":disabled": {
106
+ opacity: 0.5,
107
+ cursor: "default"
108
+ }
57
109
  }
58
110
  },
59
111
  cards: {
@@ -81,14 +133,42 @@ var DefaultTheme = {
81
133
  fontFamily: "heading",
82
134
  fontSize: 4,
83
135
  lineSpace: "3.5"
136
+ },
137
+ h1: {
138
+ fontFamily: "heading",
139
+ fontSize: "6xl",
140
+ fontWeight: "bold",
141
+ letterSpacing: "normal"
142
+ },
143
+ h2: {
144
+ fontFamily: "heading",
145
+ fontSize: "5xl",
146
+ fontWeight: "bold",
147
+ letterSpacing: "normal"
148
+ },
149
+ h3: {
150
+ fontFamily: "heading",
151
+ fontSize: "4xl",
152
+ fontWeight: "bold",
153
+ letterSpacing: "normal"
154
+ },
155
+ h4: {
156
+ fontFamily: "heading",
157
+ fontSize: "2xl",
158
+ fontWeight: "bold",
159
+ letterSpacing: "normal"
160
+ },
161
+ h5: {
162
+ fontFamily: "heading",
163
+ fontSize: "xl",
164
+ fontWeight: "bold",
165
+ letterSpacing: "normal"
84
166
  }
85
167
  }
86
168
  };
87
- var DefaultFonts = [
88
- "https://fonts.googleapis.com/css?family=Asap",
89
- "https://fonts.googleapis.com/css?family=Overpass",
90
- "https://fonts.googleapis.com/css?family=Overpass+Mono",
91
- "https://fonts.googleapis.com/css?family=Flamenco"
169
+ var BruttalFonts = [
170
+ "https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900",
171
+ "https://fonts.googleapis.com/css?family=Work+Sans:wght@100;200;300;400;500;700;800;900"
92
172
  ];
93
173
 
94
174
  // src/theme/ThemeProvider.tsx
@@ -98,13 +178,13 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
98
178
  var ThemeProvider = ({
99
179
  children,
100
180
  theme = {},
101
- fonts = DefaultFonts
181
+ fonts = BruttalFonts
102
182
  }) => {
103
183
  const mergedTheme = React2.useMemo(() => {
104
184
  if (typeof theme === "function") {
105
185
  return theme;
106
186
  }
107
- return merge(DefaultTheme, theme);
187
+ return merge(BruttalTheme, theme);
108
188
  }, [theme]);
109
189
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ThemeUiProvider, { theme: mergedTheme, children: [
110
190
  fonts.map((url) => {
package/dist/index.js CHANGED
@@ -53,37 +53,69 @@ __export(src_exports, {
53
53
  useTheme: () => useTheme
54
54
  });
55
55
  module.exports = __toCommonJS(src_exports);
56
-
57
- // tsup.inject.js
58
- var React = __toESM(require("react"));
59
-
60
- // src/index.ts
61
56
  var import_match_media = require("@theme-ui/match-media");
62
57
 
63
58
  // src/theme/ThemeProvider.tsx
64
59
  var React2 = __toESM(require("react"));
65
60
 
66
61
  // ../theme/dist/esm/index.js
67
- var DefaultTheme = {
62
+ var BruttalTheme = {
68
63
  colors: {
69
- text: "#000",
64
+ text: "#0D0D0D",
70
65
  background: "#fff",
71
- primary: "#07c",
66
+ backgroundBrand: "#C2C2C2",
67
+ primary: "#0D0D0D",
72
68
  secondary: "#639",
73
69
  gray: "#555",
74
70
  muted: "#f6f6f6",
75
- danger: "red"
71
+ danger: "red",
72
+ accent: "#0000FF",
73
+ textOnSurface: "#FFFFFF"
76
74
  },
77
75
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
78
76
  fonts: {
79
- body: '"Asap", sans-serif',
80
- heading: '"Overpass", sans-serif',
81
- monospace: '"Overpass Mono", sans-serif'
77
+ body: '"Inconsolata", sans-serif',
78
+ heading: '"Work Sans", sans-serif',
79
+ monospace: '"Inconsolata", sans-serif'
80
+ },
81
+ fontSizes: {
82
+ xxs: "0.5rem",
83
+ xs: "0.75rem",
84
+ sm: "0.875rem",
85
+ base: "1rem",
86
+ lg: "1.125rem",
87
+ xl: "1.25rem",
88
+ "2xl": "1.5rem",
89
+ "3xl": "1.875rem",
90
+ "4xl": "2.25rem",
91
+ "5xl": "3rem",
92
+ "6xl": "3.75rem",
93
+ "7xl": "4.5rem",
94
+ "8xl": "6rem",
95
+ "9xl": "8rem"
96
+ },
97
+ fontWeights: {
98
+ thin: 100,
99
+ extralight: 200,
100
+ light: 300,
101
+ normal: 400,
102
+ medium: 500,
103
+ semibold: 600,
104
+ bold: 700,
105
+ extrabold: 800
106
+ },
107
+ letterSpacings: {
108
+ tighter: "-0.05em",
109
+ tight: "-0.025em",
110
+ normal: "0em",
111
+ wide: "0.025em",
112
+ wider: "0.05em",
113
+ widest: "0.1em"
82
114
  },
83
115
  styles: {
84
116
  root: {
85
117
  fontFamily: "body",
86
- fontWeight: "body"
118
+ fontWeight: "normal"
87
119
  },
88
120
  a: {
89
121
  color: "primary",
@@ -96,6 +128,7 @@ var DefaultTheme = {
96
128
  backgroundColor: "background"
97
129
  }
98
130
  },
131
+ borders: [0, "3px solid #0D0D0D"],
99
132
  buttons: {
100
133
  cta: {
101
134
  color: "white",
@@ -108,6 +141,23 @@ var DefaultTheme = {
108
141
  danger: {
109
142
  color: "white",
110
143
  backgroundColor: "danger"
144
+ },
145
+ primary: {
146
+ ":disabled": {
147
+ backgroundColor: "backgroundBrand",
148
+ cursor: "default"
149
+ }
150
+ },
151
+ secondary: {
152
+ color: "text",
153
+ backgroundColor: "white",
154
+ borderColor: "text",
155
+ borderWidth: 1,
156
+ borderStyle: "solid",
157
+ ":disabled": {
158
+ opacity: 0.5,
159
+ cursor: "default"
160
+ }
111
161
  }
112
162
  },
113
163
  cards: {
@@ -135,14 +185,42 @@ var DefaultTheme = {
135
185
  fontFamily: "heading",
136
186
  fontSize: 4,
137
187
  lineSpace: "3.5"
188
+ },
189
+ h1: {
190
+ fontFamily: "heading",
191
+ fontSize: "6xl",
192
+ fontWeight: "bold",
193
+ letterSpacing: "normal"
194
+ },
195
+ h2: {
196
+ fontFamily: "heading",
197
+ fontSize: "5xl",
198
+ fontWeight: "bold",
199
+ letterSpacing: "normal"
200
+ },
201
+ h3: {
202
+ fontFamily: "heading",
203
+ fontSize: "4xl",
204
+ fontWeight: "bold",
205
+ letterSpacing: "normal"
206
+ },
207
+ h4: {
208
+ fontFamily: "heading",
209
+ fontSize: "2xl",
210
+ fontWeight: "bold",
211
+ letterSpacing: "normal"
212
+ },
213
+ h5: {
214
+ fontFamily: "heading",
215
+ fontSize: "xl",
216
+ fontWeight: "bold",
217
+ letterSpacing: "normal"
138
218
  }
139
219
  }
140
220
  };
141
- var DefaultFonts = [
142
- "https://fonts.googleapis.com/css?family=Asap",
143
- "https://fonts.googleapis.com/css?family=Overpass",
144
- "https://fonts.googleapis.com/css?family=Overpass+Mono",
145
- "https://fonts.googleapis.com/css?family=Flamenco"
221
+ var BruttalFonts = [
222
+ "https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900",
223
+ "https://fonts.googleapis.com/css?family=Work+Sans:wght@100;200;300;400;500;700;800;900"
146
224
  ];
147
225
 
148
226
  // src/theme/ThemeProvider.tsx
@@ -152,13 +230,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
152
230
  var ThemeProvider = ({
153
231
  children,
154
232
  theme = {},
155
- fonts = DefaultFonts
233
+ fonts = BruttalFonts
156
234
  }) => {
157
235
  const mergedTheme = React2.useMemo(() => {
158
236
  if (typeof theme === "function") {
159
237
  return theme;
160
238
  }
161
- return (0, import_theme_ui.merge)(DefaultTheme, theme);
239
+ return (0, import_theme_ui.merge)(BruttalTheme, theme);
162
240
  }, [theme]);
163
241
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, { theme: mergedTheme, children: [
164
242
  fonts.map((url) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/ui",
3
- "version": "1.27.0",
3
+ "version": "1.27.2",
4
4
  "description": "Primitive layout, typographic, and other components for styling applications.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "ttoss",
@@ -18,6 +18,7 @@
18
18
  "dev": "yarn workspace @docs/storybook run dev",
19
19
  "test": "jest"
20
20
  },
21
+ "sideEffects": false,
21
22
  "typings": "dist/index.d.ts",
22
23
  "dependencies": {
23
24
  "@emotion/react": "^11.10.5",
@@ -44,5 +45,5 @@
44
45
  "publishConfig": {
45
46
  "access": "public"
46
47
  },
47
- "gitHead": "9159bd57009f4fee620218bc1a0e7bbac28acccd"
48
+ "gitHead": "b77c8fe64f8fbf6198436a56d887d9b8807371f7"
48
49
  }
package/src/theme/ThemeProvider.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { DefaultFonts, DefaultTheme } from '@ttoss/theme';
2
+ import { BruttalFonts, BruttalTheme } from '@ttoss/theme';
3
3
  import { Global, css } from '@emotion/react';
4
4
  import { Theme, ThemeProvider as ThemeUiProvider, merge } from 'theme-ui';
5
5
 
@@ -15,14 +15,14 @@ export type ThemeProviderProps = {
15
15
  const ThemeProvider = ({
16
16
  children,
17
17
  theme = {},
18
- fonts = DefaultFonts,
18
+ fonts = BruttalFonts,
19
19
  }: ThemeProviderProps) => {
20
20
  const mergedTheme = React.useMemo(() => {
21
21
  if (typeof theme === 'function') {
22
22
  return theme;
23
23
  }
24
24
 
25
- return merge(DefaultTheme, theme);
25
+ return merge(BruttalTheme, theme);
26
26
  }, [theme]);
27
27
 
28
28
  return (