@ttoss/ui 1.27.1 → 1.27.3

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 -15
  2. package/dist/index.js +98 -15
  3. package/package.json +5 -5
  4. package/src/theme/ThemeProvider.tsx +3 -3
package/dist/esm/index.js CHANGED
@@ -7,26 +7,63 @@ import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
7
7
  import * as React2 from "react";
8
8
 
9
9
  // ../theme/dist/esm/index.js
10
- var DefaultTheme = {
10
+ var BruttalTheme = {
11
11
  colors: {
12
- text: "#000",
12
+ text: "#0D0D0D",
13
13
  background: "#fff",
14
- primary: "#07c",
14
+ backgroundBrand: "#C2C2C2",
15
+ primary: "#0D0D0D",
15
16
  secondary: "#639",
16
17
  gray: "#555",
17
18
  muted: "#f6f6f6",
18
- danger: "red"
19
+ danger: "red",
20
+ accent: "#0000FF",
21
+ textOnSurface: "#FFFFFF"
19
22
  },
20
23
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
21
24
  fonts: {
22
- body: '"Asap", sans-serif',
23
- heading: '"Overpass", sans-serif',
24
- 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"
25
62
  },
26
63
  styles: {
27
64
  root: {
28
65
  fontFamily: "body",
29
- fontWeight: "body"
66
+ fontWeight: "normal"
30
67
  },
31
68
  a: {
32
69
  color: "primary",
@@ -39,6 +76,7 @@ var DefaultTheme = {
39
76
  backgroundColor: "background"
40
77
  }
41
78
  },
79
+ borders: [0, "3px solid #0D0D0D"],
42
80
  buttons: {
43
81
  cta: {
44
82
  color: "white",
@@ -51,6 +89,23 @@ var DefaultTheme = {
51
89
  danger: {
52
90
  color: "white",
53
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
+ }
54
109
  }
55
110
  },
56
111
  cards: {
@@ -78,14 +133,42 @@ var DefaultTheme = {
78
133
  fontFamily: "heading",
79
134
  fontSize: 4,
80
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"
81
166
  }
82
167
  }
83
168
  };
84
- var DefaultFonts = [
85
- "https://fonts.googleapis.com/css?family=Asap",
86
- "https://fonts.googleapis.com/css?family=Overpass",
87
- "https://fonts.googleapis.com/css?family=Overpass+Mono",
88
- "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"
89
172
  ];
90
173
 
91
174
  // src/theme/ThemeProvider.tsx
@@ -95,13 +178,13 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
95
178
  var ThemeProvider = ({
96
179
  children,
97
180
  theme = {},
98
- fonts = DefaultFonts
181
+ fonts = BruttalFonts
99
182
  }) => {
100
183
  const mergedTheme = React2.useMemo(() => {
101
184
  if (typeof theme === "function") {
102
185
  return theme;
103
186
  }
104
- return merge(DefaultTheme, theme);
187
+ return merge(BruttalTheme, theme);
105
188
  }, [theme]);
106
189
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ThemeUiProvider, { theme: mergedTheme, children: [
107
190
  fonts.map((url) => {
package/dist/index.js CHANGED
@@ -59,26 +59,63 @@ var import_match_media = require("@theme-ui/match-media");
59
59
  var React2 = __toESM(require("react"));
60
60
 
61
61
  // ../theme/dist/esm/index.js
62
- var DefaultTheme = {
62
+ var BruttalTheme = {
63
63
  colors: {
64
- text: "#000",
64
+ text: "#0D0D0D",
65
65
  background: "#fff",
66
- primary: "#07c",
66
+ backgroundBrand: "#C2C2C2",
67
+ primary: "#0D0D0D",
67
68
  secondary: "#639",
68
69
  gray: "#555",
69
70
  muted: "#f6f6f6",
70
- danger: "red"
71
+ danger: "red",
72
+ accent: "#0000FF",
73
+ textOnSurface: "#FFFFFF"
71
74
  },
72
75
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
73
76
  fonts: {
74
- body: '"Asap", sans-serif',
75
- heading: '"Overpass", sans-serif',
76
- 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"
77
114
  },
78
115
  styles: {
79
116
  root: {
80
117
  fontFamily: "body",
81
- fontWeight: "body"
118
+ fontWeight: "normal"
82
119
  },
83
120
  a: {
84
121
  color: "primary",
@@ -91,6 +128,7 @@ var DefaultTheme = {
91
128
  backgroundColor: "background"
92
129
  }
93
130
  },
131
+ borders: [0, "3px solid #0D0D0D"],
94
132
  buttons: {
95
133
  cta: {
96
134
  color: "white",
@@ -103,6 +141,23 @@ var DefaultTheme = {
103
141
  danger: {
104
142
  color: "white",
105
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
+ }
106
161
  }
107
162
  },
108
163
  cards: {
@@ -130,14 +185,42 @@ var DefaultTheme = {
130
185
  fontFamily: "heading",
131
186
  fontSize: 4,
132
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"
133
218
  }
134
219
  }
135
220
  };
136
- var DefaultFonts = [
137
- "https://fonts.googleapis.com/css?family=Asap",
138
- "https://fonts.googleapis.com/css?family=Overpass",
139
- "https://fonts.googleapis.com/css?family=Overpass+Mono",
140
- "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"
141
224
  ];
142
225
 
143
226
  // src/theme/ThemeProvider.tsx
@@ -147,13 +230,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
147
230
  var ThemeProvider = ({
148
231
  children,
149
232
  theme = {},
150
- fonts = DefaultFonts
233
+ fonts = BruttalFonts
151
234
  }) => {
152
235
  const mergedTheme = React2.useMemo(() => {
153
236
  if (typeof theme === "function") {
154
237
  return theme;
155
238
  }
156
- return (0, import_theme_ui.merge)(DefaultTheme, theme);
239
+ return (0, import_theme_ui.merge)(BruttalTheme, theme);
157
240
  }, [theme]);
158
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: [
159
242
  fonts.map((url) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/ui",
3
- "version": "1.27.1",
3
+ "version": "1.27.3",
4
4
  "description": "Primitive layout, typographic, and other components for styling applications.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "ttoss",
@@ -30,9 +30,9 @@
30
30
  "react": ">=16.8.0"
31
31
  },
32
32
  "devDependencies": {
33
- "@ttoss/config": "^1.25.0",
34
- "@ttoss/test-utils": "^1.18.3",
35
- "@ttoss/theme": "^1.1.2",
33
+ "@ttoss/config": "^1.26.0",
34
+ "@ttoss/test-utils": "^1.19.0",
35
+ "@ttoss/theme": "^1.2.0",
36
36
  "@types/jest": "^29.2.4",
37
37
  "jest": "^29.3.1",
38
38
  "tsup": "^6.5.0"
@@ -45,5 +45,5 @@
45
45
  "publishConfig": {
46
46
  "access": "public"
47
47
  },
48
- "gitHead": "055a9b2d3f53f0d8f3bbaea24ac9e51f99d0ca57"
48
+ "gitHead": "98cf227311c2f28ab73520c793bfe0bf0df27530"
49
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 (