@ttoss/theme 1.0.1

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 (14) hide show
  1. package/README.md +9 -0
  2. package/dist/esm/index.js +194 -0
  3. package/dist/index.d.ts +11 -0
  4. package/dist/index.js +222 -0
  5. package/package.json +30 -0
  6. package/src/index.spec.ts +8 -0
  7. package/src/index.ts +2 -0
  8. package/src/themes/bruttalFonts.ts +4 -0
  9. package/src/themes/bruttalTheme.ts +96 -0
  10. package/src/themes/defaultFonts.ts +6 -0
  11. package/src/themes/defaultTheme.ts +76 -0
  12. package/src/themes/fonts.ts +2 -0
  13. package/src/themes/themes.ts +2 -0
  14. package/tsconfig.json +3 -0
package/README.md ADDED
@@ -0,0 +1,9 @@
1
+ # @ttoss/theme
2
+
3
+ **@ttoss/theme** is an theme package
4
+
5
+ ## Install
6
+
7
+ ```shell
8
+ yarn add @ttoss/theme
9
+ ```
package/dist/esm/index.js ADDED
@@ -0,0 +1,194 @@
1
+ "use strict";
2
+ /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
3
+
4
+ // src/themes/defaultTheme.ts
5
+ var DefaultTheme = {
6
+ colors: {
7
+ text: "#000",
8
+ background: "#fff",
9
+ primary: "#07c",
10
+ secondary: "#639",
11
+ gray: "#555",
12
+ muted: "#f6f6f6",
13
+ danger: "red"
14
+ },
15
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
16
+ fonts: {
17
+ body: '"Asap", sans-serif',
18
+ heading: '"Overpass", sans-serif',
19
+ monospace: '"Overpass Mono", sans-serif'
20
+ },
21
+ styles: {
22
+ root: {
23
+ fontFamily: "body",
24
+ fontWeight: "body"
25
+ },
26
+ a: {
27
+ color: "primary",
28
+ textDecoration: "underline",
29
+ cursor: "pointer",
30
+ fontFamily: "body"
31
+ },
32
+ progress: {
33
+ color: "primary",
34
+ backgroundColor: "background"
35
+ }
36
+ },
37
+ buttons: {
38
+ cta: {
39
+ color: "white",
40
+ backgroundColor: "primary"
41
+ },
42
+ muted: {
43
+ color: "text",
44
+ backgroundColor: "muted"
45
+ },
46
+ danger: {
47
+ color: "white",
48
+ backgroundColor: "danger"
49
+ }
50
+ },
51
+ cards: {
52
+ primary: {
53
+ backgroundColor: "background",
54
+ border: "1px solid black",
55
+ padding: [4, 5],
56
+ display: "flex",
57
+ flexDirection: "column",
58
+ alignItems: "center",
59
+ width: "fit-content"
60
+ }
61
+ },
62
+ forms: {
63
+ input: {
64
+ fontFamily: "body"
65
+ }
66
+ },
67
+ text: {
68
+ default: {
69
+ color: "text",
70
+ fontFamily: "body"
71
+ },
72
+ title: {
73
+ fontFamily: "heading",
74
+ fontSize: 4,
75
+ lineSpace: "3.5"
76
+ }
77
+ }
78
+ };
79
+
80
+ // src/themes/bruttalTheme.ts
81
+ var BruttalTheme = {
82
+ colors: {
83
+ text: "#0D0D0D",
84
+ background: "#fff",
85
+ backgroundBrand: "#C2C2C2",
86
+ primary: "#0D0D0D",
87
+ secondary: "#639",
88
+ gray: "#555",
89
+ muted: "#f6f6f6",
90
+ danger: "red",
91
+ accent: "#0000FF",
92
+ textOnSurface: "#FFFFFF"
93
+ },
94
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
95
+ fonts: {
96
+ body: '"Inconsolata", sans-serif',
97
+ heading: '"Work Sans", sans-serif',
98
+ monospace: '"Inconsolata", sans-serif'
99
+ },
100
+ styles: {
101
+ root: {
102
+ fontFamily: "body",
103
+ fontWeight: "body"
104
+ },
105
+ a: {
106
+ color: "primary",
107
+ textDecoration: "underline",
108
+ cursor: "pointer",
109
+ fontFamily: "body"
110
+ },
111
+ progress: {
112
+ color: "primary",
113
+ backgroundColor: "background"
114
+ }
115
+ },
116
+ buttons: {
117
+ cta: {
118
+ color: "white",
119
+ backgroundColor: "primary"
120
+ },
121
+ muted: {
122
+ color: "text",
123
+ backgroundColor: "muted"
124
+ },
125
+ danger: {
126
+ color: "white",
127
+ backgroundColor: "danger"
128
+ },
129
+ primary: {
130
+ ":disabled": {
131
+ backgroundColor: "backgroundBrand",
132
+ cursor: "default"
133
+ }
134
+ },
135
+ secondary: {
136
+ color: "text",
137
+ backgroundColor: "white",
138
+ borderColor: "text",
139
+ borderWidth: 1,
140
+ borderStyle: "solid",
141
+ ":disabled": {
142
+ opacity: 0.5,
143
+ cursor: "default"
144
+ }
145
+ }
146
+ },
147
+ cards: {
148
+ primary: {
149
+ backgroundColor: "background",
150
+ border: "1px solid black",
151
+ padding: [4, 5],
152
+ display: "flex",
153
+ flexDirection: "column",
154
+ alignItems: "center",
155
+ width: "fit-content"
156
+ }
157
+ },
158
+ forms: {
159
+ input: {
160
+ fontFamily: "body"
161
+ }
162
+ },
163
+ text: {
164
+ default: {
165
+ color: "text",
166
+ fontFamily: "body"
167
+ },
168
+ title: {
169
+ fontFamily: "heading",
170
+ fontSize: 4,
171
+ lineSpace: "3.5"
172
+ }
173
+ }
174
+ };
175
+
176
+ // src/themes/bruttalFonts.ts
177
+ var BruttalFonts = [
178
+ "https://fonts.googleapis.com/css?family=Inconsolata",
179
+ "https://fonts.googleapis.com/css?family=Work+Sans"
180
+ ];
181
+
182
+ // src/themes/defaultFonts.ts
183
+ var DefaultFonts = [
184
+ "https://fonts.googleapis.com/css?family=Asap",
185
+ "https://fonts.googleapis.com/css?family=Overpass",
186
+ "https://fonts.googleapis.com/css?family=Overpass+Mono",
187
+ "https://fonts.googleapis.com/css?family=Flamenco"
188
+ ];
189
+ export {
190
+ BruttalFonts,
191
+ BruttalTheme,
192
+ DefaultFonts,
193
+ DefaultTheme
194
+ };
package/dist/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { Theme } from 'theme-ui';
2
+
3
+ declare const DefaultTheme: Theme;
4
+
5
+ declare const BruttalTheme: Theme;
6
+
7
+ declare const BruttalFonts: string[];
8
+
9
+ declare const DefaultFonts: string[];
10
+
11
+ export { BruttalFonts, BruttalTheme, DefaultFonts, DefaultTheme };
package/dist/index.js ADDED
@@ -0,0 +1,222 @@
1
+ "use strict";
2
+ /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+
21
+ // src/index.ts
22
+ var src_exports = {};
23
+ __export(src_exports, {
24
+ BruttalFonts: () => BruttalFonts,
25
+ BruttalTheme: () => BruttalTheme,
26
+ DefaultFonts: () => DefaultFonts,
27
+ DefaultTheme: () => DefaultTheme
28
+ });
29
+ module.exports = __toCommonJS(src_exports);
30
+
31
+ // src/themes/defaultTheme.ts
32
+ var DefaultTheme = {
33
+ colors: {
34
+ text: "#000",
35
+ background: "#fff",
36
+ primary: "#07c",
37
+ secondary: "#639",
38
+ gray: "#555",
39
+ muted: "#f6f6f6",
40
+ danger: "red"
41
+ },
42
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
43
+ fonts: {
44
+ body: '"Asap", sans-serif',
45
+ heading: '"Overpass", sans-serif',
46
+ monospace: '"Overpass Mono", sans-serif'
47
+ },
48
+ styles: {
49
+ root: {
50
+ fontFamily: "body",
51
+ fontWeight: "body"
52
+ },
53
+ a: {
54
+ color: "primary",
55
+ textDecoration: "underline",
56
+ cursor: "pointer",
57
+ fontFamily: "body"
58
+ },
59
+ progress: {
60
+ color: "primary",
61
+ backgroundColor: "background"
62
+ }
63
+ },
64
+ buttons: {
65
+ cta: {
66
+ color: "white",
67
+ backgroundColor: "primary"
68
+ },
69
+ muted: {
70
+ color: "text",
71
+ backgroundColor: "muted"
72
+ },
73
+ danger: {
74
+ color: "white",
75
+ backgroundColor: "danger"
76
+ }
77
+ },
78
+ cards: {
79
+ primary: {
80
+ backgroundColor: "background",
81
+ border: "1px solid black",
82
+ padding: [4, 5],
83
+ display: "flex",
84
+ flexDirection: "column",
85
+ alignItems: "center",
86
+ width: "fit-content"
87
+ }
88
+ },
89
+ forms: {
90
+ input: {
91
+ fontFamily: "body"
92
+ }
93
+ },
94
+ text: {
95
+ default: {
96
+ color: "text",
97
+ fontFamily: "body"
98
+ },
99
+ title: {
100
+ fontFamily: "heading",
101
+ fontSize: 4,
102
+ lineSpace: "3.5"
103
+ }
104
+ }
105
+ };
106
+
107
+ // src/themes/bruttalTheme.ts
108
+ var BruttalTheme = {
109
+ colors: {
110
+ text: "#0D0D0D",
111
+ background: "#fff",
112
+ backgroundBrand: "#C2C2C2",
113
+ primary: "#0D0D0D",
114
+ secondary: "#639",
115
+ gray: "#555",
116
+ muted: "#f6f6f6",
117
+ danger: "red",
118
+ accent: "#0000FF",
119
+ textOnSurface: "#FFFFFF"
120
+ },
121
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
122
+ fonts: {
123
+ body: '"Inconsolata", sans-serif',
124
+ heading: '"Work Sans", sans-serif',
125
+ monospace: '"Inconsolata", sans-serif'
126
+ },
127
+ styles: {
128
+ root: {
129
+ fontFamily: "body",
130
+ fontWeight: "body"
131
+ },
132
+ a: {
133
+ color: "primary",
134
+ textDecoration: "underline",
135
+ cursor: "pointer",
136
+ fontFamily: "body"
137
+ },
138
+ progress: {
139
+ color: "primary",
140
+ backgroundColor: "background"
141
+ }
142
+ },
143
+ buttons: {
144
+ cta: {
145
+ color: "white",
146
+ backgroundColor: "primary"
147
+ },
148
+ muted: {
149
+ color: "text",
150
+ backgroundColor: "muted"
151
+ },
152
+ danger: {
153
+ color: "white",
154
+ backgroundColor: "danger"
155
+ },
156
+ primary: {
157
+ ":disabled": {
158
+ backgroundColor: "backgroundBrand",
159
+ cursor: "default"
160
+ }
161
+ },
162
+ secondary: {
163
+ color: "text",
164
+ backgroundColor: "white",
165
+ borderColor: "text",
166
+ borderWidth: 1,
167
+ borderStyle: "solid",
168
+ ":disabled": {
169
+ opacity: 0.5,
170
+ cursor: "default"
171
+ }
172
+ }
173
+ },
174
+ cards: {
175
+ primary: {
176
+ backgroundColor: "background",
177
+ border: "1px solid black",
178
+ padding: [4, 5],
179
+ display: "flex",
180
+ flexDirection: "column",
181
+ alignItems: "center",
182
+ width: "fit-content"
183
+ }
184
+ },
185
+ forms: {
186
+ input: {
187
+ fontFamily: "body"
188
+ }
189
+ },
190
+ text: {
191
+ default: {
192
+ color: "text",
193
+ fontFamily: "body"
194
+ },
195
+ title: {
196
+ fontFamily: "heading",
197
+ fontSize: 4,
198
+ lineSpace: "3.5"
199
+ }
200
+ }
201
+ };
202
+
203
+ // src/themes/bruttalFonts.ts
204
+ var BruttalFonts = [
205
+ "https://fonts.googleapis.com/css?family=Inconsolata",
206
+ "https://fonts.googleapis.com/css?family=Work+Sans"
207
+ ];
208
+
209
+ // src/themes/defaultFonts.ts
210
+ var DefaultFonts = [
211
+ "https://fonts.googleapis.com/css?family=Asap",
212
+ "https://fonts.googleapis.com/css?family=Overpass",
213
+ "https://fonts.googleapis.com/css?family=Overpass+Mono",
214
+ "https://fonts.googleapis.com/css?family=Flamenco"
215
+ ];
216
+ // Annotate the CommonJS export names for ESM import in node:
217
+ 0 && (module.exports = {
218
+ BruttalFonts,
219
+ BruttalTheme,
220
+ DefaultFonts,
221
+ DefaultTheme
222
+ });
package/package.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "name": "@ttoss/theme",
3
+ "version": "1.0.1",
4
+ "description": "Theme for packages.",
5
+ "license": "UNLICENSED",
6
+ "author": "ttoss",
7
+ "contributors": [
8
+ "Rayza Oliveira <rayza.ocr@gmail.com>"
9
+ ],
10
+ "main": "dist/index.js",
11
+ "module": "dist/esm/index.js",
12
+ "files": [
13
+ "dist",
14
+ "src",
15
+ "tsconfig.json"
16
+ ],
17
+ "scripts": {
18
+ "build": "tsup-node",
19
+ "test": "jest"
20
+ },
21
+ "typings": "dist/index.d.ts",
22
+ "dependencies": {
23
+ "theme-ui": "^0.15.3"
24
+ },
25
+ "keywords": [],
26
+ "publishConfig": {
27
+ "access": "public"
28
+ },
29
+ "gitHead": "3879642eff43efd073abf52595ed0efe7196946a"
30
+ }
package/src/index.spec.ts ADDED
@@ -0,0 +1,8 @@
1
+ import * as allConfigs from '.';
2
+
3
+ it('themes and fonts should be exported', () => {
4
+ expect(allConfigs.BruttalFonts).toBeDefined();
5
+ expect(allConfigs.BruttalTheme).toBeDefined();
6
+ expect(allConfigs.DefaultFonts).toBeDefined();
7
+ expect(allConfigs.DefaultTheme).toBeDefined();
8
+ });
package/src/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './themes/themes';
2
+ export * from './themes/fonts';
package/src/themes/bruttalFonts.ts ADDED
@@ -0,0 +1,4 @@
1
+ export const BruttalFonts = [
2
+ 'https://fonts.googleapis.com/css?family=Inconsolata',
3
+ 'https://fonts.googleapis.com/css?family=Work+Sans',
4
+ ];
package/src/themes/bruttalTheme.ts ADDED
@@ -0,0 +1,96 @@
1
+ import { Theme } from 'theme-ui';
2
+
3
+ export const BruttalTheme: Theme = {
4
+ colors: {
5
+ text: '#0D0D0D',
6
+ background: '#fff',
7
+ backgroundBrand: '#C2C2C2',
8
+ primary: '#0D0D0D',
9
+ secondary: '#639',
10
+ gray: '#555',
11
+ muted: '#f6f6f6',
12
+ danger: 'red',
13
+ accent: '#0000FF',
14
+ textOnSurface: '#FFFFFF',
15
+ },
16
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
17
+ fonts: {
18
+ body: '"Inconsolata", sans-serif',
19
+ heading: '"Work Sans", sans-serif',
20
+ monospace: '"Inconsolata", sans-serif',
21
+ },
22
+ styles: {
23
+ root: {
24
+ fontFamily: 'body',
25
+ fontWeight: 'body',
26
+ },
27
+ a: {
28
+ color: 'primary',
29
+ textDecoration: 'underline',
30
+ cursor: 'pointer',
31
+ fontFamily: 'body',
32
+ },
33
+ progress: {
34
+ color: 'primary',
35
+ backgroundColor: 'background',
36
+ },
37
+ },
38
+ buttons: {
39
+ cta: {
40
+ color: 'white',
41
+ backgroundColor: 'primary',
42
+ },
43
+ muted: {
44
+ color: 'text',
45
+ backgroundColor: 'muted',
46
+ },
47
+ danger: {
48
+ color: 'white',
49
+ backgroundColor: 'danger',
50
+ },
51
+ primary: {
52
+ ':disabled': {
53
+ backgroundColor: 'backgroundBrand',
54
+ cursor: 'default',
55
+ },
56
+ },
57
+ secondary: {
58
+ color: 'text',
59
+ backgroundColor: 'white',
60
+ borderColor: 'text',
61
+ borderWidth: 1,
62
+ borderStyle: 'solid',
63
+ ':disabled': {
64
+ opacity: 0.5,
65
+ cursor: 'default',
66
+ },
67
+ },
68
+ },
69
+ cards: {
70
+ primary: {
71
+ backgroundColor: 'background',
72
+ border: '1px solid black',
73
+ padding: [4, 5],
74
+ display: 'flex',
75
+ flexDirection: 'column',
76
+ alignItems: 'center',
77
+ width: 'fit-content',
78
+ },
79
+ },
80
+ forms: {
81
+ input: {
82
+ fontFamily: 'body',
83
+ },
84
+ },
85
+ text: {
86
+ default: {
87
+ color: 'text',
88
+ fontFamily: 'body',
89
+ },
90
+ title: {
91
+ fontFamily: 'heading',
92
+ fontSize: 4,
93
+ lineSpace: '3.5',
94
+ },
95
+ },
96
+ };
package/src/themes/defaultFonts.ts ADDED
@@ -0,0 +1,6 @@
1
+ export const DefaultFonts = [
2
+ 'https://fonts.googleapis.com/css?family=Asap',
3
+ 'https://fonts.googleapis.com/css?family=Overpass',
4
+ 'https://fonts.googleapis.com/css?family=Overpass+Mono',
5
+ 'https://fonts.googleapis.com/css?family=Flamenco',
6
+ ];
package/src/themes/defaultTheme.ts ADDED
@@ -0,0 +1,76 @@
1
+ import { Theme } from 'theme-ui';
2
+
3
+ export const DefaultTheme: Theme = {
4
+ colors: {
5
+ text: '#000',
6
+ background: '#fff',
7
+ primary: '#07c',
8
+ secondary: '#639',
9
+ gray: '#555',
10
+ muted: '#f6f6f6',
11
+ danger: 'red',
12
+ },
13
+ space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
14
+ fonts: {
15
+ body: '"Asap", sans-serif',
16
+ heading: '"Overpass", sans-serif',
17
+ monospace: '"Overpass Mono", sans-serif',
18
+ },
19
+ styles: {
20
+ root: {
21
+ fontFamily: 'body',
22
+ fontWeight: 'body',
23
+ },
24
+ a: {
25
+ color: 'primary',
26
+ textDecoration: 'underline',
27
+ cursor: 'pointer',
28
+ fontFamily: 'body',
29
+ },
30
+ progress: {
31
+ color: 'primary',
32
+ backgroundColor: 'background',
33
+ },
34
+ },
35
+ buttons: {
36
+ cta: {
37
+ color: 'white',
38
+ backgroundColor: 'primary',
39
+ },
40
+ muted: {
41
+ color: 'text',
42
+ backgroundColor: 'muted',
43
+ },
44
+ danger: {
45
+ color: 'white',
46
+ backgroundColor: 'danger',
47
+ },
48
+ },
49
+ cards: {
50
+ primary: {
51
+ backgroundColor: 'background',
52
+ border: '1px solid black',
53
+ padding: [4, 5],
54
+ display: 'flex',
55
+ flexDirection: 'column',
56
+ alignItems: 'center',
57
+ width: 'fit-content',
58
+ },
59
+ },
60
+ forms: {
61
+ input: {
62
+ fontFamily: 'body',
63
+ },
64
+ },
65
+ text: {
66
+ default: {
67
+ color: 'text',
68
+ fontFamily: 'body',
69
+ },
70
+ title: {
71
+ fontFamily: 'heading',
72
+ fontSize: 4,
73
+ lineSpace: '3.5',
74
+ },
75
+ },
76
+ };
package/src/themes/fonts.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { BruttalFonts } from './bruttalFonts';
2
+ export { DefaultFonts } from './defaultFonts';
package/src/themes/themes.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { DefaultTheme } from './defaultTheme';
2
+ export { BruttalTheme } from './bruttalTheme';
package/tsconfig.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "extends": "@ttoss/config/tsconfig.json"
3
+ }