@ttoss/theme 1.2.6 → 1.2.8

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 +66 -23
  2. package/dist/index.js +66 -23
  3. package/package.json +2 -2
  4. package/src/themes/Bruttal/BruttalTheme.ts +64 -21
package/dist/esm/index.js CHANGED
@@ -64,23 +64,23 @@ var coreFonts = {
64
64
  monospace: '"Inconsolata", sans-serif'
65
65
  };
66
66
  var brandColors = {
67
- complimentary: "#f5f5f5",
68
- main: "#292c2a",
69
- darkNeutral: "#515389",
70
- accent: "#0000ff",
71
- lightNeutral: "#e3e3e3"
67
+ complimentary: "#f4f3f3",
68
+ main: "#292C2a",
69
+ darkNeutral: "#325C82",
70
+ accent: "#0469E3",
71
+ lightNeutral: "#F8F8F8"
72
72
  };
73
73
  var coreColors = {
74
74
  ...brandColors,
75
- gray100: "#f0f1f3",
76
- gray200: "#ced1d7",
77
- gray300: "#acb1ba",
78
- gray400: "#8b919e",
79
- gray500: "#6b7280",
80
- gray600: "#535863",
81
- gray700: "#3b3f46",
82
- gray800: "#23252a",
83
- gray900: "#0b0b0d",
75
+ gray100: "#f9f9f9",
76
+ gray200: "#dedede",
77
+ gray300: "#c4c4c4",
78
+ gray400: "#ababab",
79
+ gray500: "#929292",
80
+ gray600: "#7a7a7a",
81
+ gray700: "#626262",
82
+ gray800: "#4c4c4c",
83
+ gray900: "#323232",
84
84
  black: "#000000",
85
85
  red100: "#ffebeb",
86
86
  red200: "#fdbfbf",
@@ -89,7 +89,9 @@ var coreColors = {
89
89
  red500: "#ef4444",
90
90
  red600: "#e42828",
91
91
  red700: "#c62121",
92
- white: "#ffffff"
92
+ white: "#ffffff",
93
+ amber600: "#d97706",
94
+ teal600: "#0d9488"
93
95
  };
94
96
  var coreBorders = {
95
97
  none: "0px solid",
@@ -117,20 +119,30 @@ var BruttalTheme = {
117
119
  letterSpacings,
118
120
  space,
119
121
  colors: {
120
- background: coreColors.lightNeutral,
121
- text: coreColors.gray900,
122
+ background: coreColors.white,
123
+ text: coreColors.black,
122
124
  muted: coreColors.gray200,
123
- outline: coreColors.gray200,
125
+ onMuted: coreColors.gray500,
126
+ mutedOutline: coreColors.gray300,
127
+ danger: coreColors.red700,
128
+ onDanger: coreColors.white,
129
+ notice: coreColors.amber600,
130
+ positive: coreColors.teal600,
131
+ surface: coreColors.white,
132
+ contentHeader: coreColors.gray200,
133
+ onContentHeader: coreColors.black,
134
+ outline: coreColors.gray500,
124
135
  primary: coreColors.main,
125
136
  onPrimary: coreColors.white,
126
137
  secondary: coreColors.gray500,
127
- onSecondary: coreColors.white,
138
+ onSecondary: coreColors.complimentary,
128
139
  highlight: coreColors.darkNeutral,
129
- onHighlight: coreColors.white,
140
+ onHighlight: coreColors.complimentary,
130
141
  accent: coreColors.accent,
131
142
  onAccent: coreColors.white,
132
- neutral: coreColors.white,
133
- onNeutral: coreColors.gray900
143
+ neutral: coreColors.darkNeutral,
144
+ onNeutral: coreColors.lightNeutral,
145
+ underemphasize: coreColors.gray300
134
146
  },
135
147
  fonts: {
136
148
  h1: coreFonts.contrast,
@@ -257,8 +269,34 @@ var BruttalTheme = {
257
269
  }
258
270
  },
259
271
  forms: {
272
+ label: {
273
+ "&:has(+ div > input:invalid)": {
274
+ "span > iconify-icon": {
275
+ color: "danger"
276
+ }
277
+ }
278
+ },
260
279
  input: {
261
- fontFamily: "body"
280
+ fontFamily: "body",
281
+ color: "text",
282
+ paddingY: "md",
283
+ paddingX: "lg",
284
+ "::placeholder": {
285
+ color: "underemphasize"
286
+ },
287
+ ":focus-within": {
288
+ outlineColor: "neutral"
289
+ },
290
+ ":disabled": {
291
+ backgroundColor: "onMuted",
292
+ borderColor: "muted"
293
+ },
294
+ "&.error": {
295
+ borderColor: "danger"
296
+ },
297
+ "&.error+span>iconify-icon": {
298
+ color: "danger"
299
+ }
262
300
  }
263
301
  },
264
302
  text: {
@@ -271,6 +309,11 @@ var BruttalTheme = {
271
309
  fontSize: 4,
272
310
  lineSpace: "3.5"
273
311
  },
312
+ error: {
313
+ '&[role="alert"]': {
314
+ color: "danger"
315
+ }
316
+ },
274
317
  h1: {
275
318
  fontFamily: "heading",
276
319
  fontSize: "6xl",
package/dist/index.js CHANGED
@@ -101,23 +101,23 @@ var coreFonts = {
101
101
  monospace: '"Inconsolata", sans-serif'
102
102
  };
103
103
  var brandColors = {
104
- complimentary: "#f5f5f5",
105
- main: "#292c2a",
106
- darkNeutral: "#515389",
107
- accent: "#0000ff",
108
- lightNeutral: "#e3e3e3"
104
+ complimentary: "#f4f3f3",
105
+ main: "#292C2a",
106
+ darkNeutral: "#325C82",
107
+ accent: "#0469E3",
108
+ lightNeutral: "#F8F8F8"
109
109
  };
110
110
  var coreColors = {
111
111
  ...brandColors,
112
- gray100: "#f0f1f3",
113
- gray200: "#ced1d7",
114
- gray300: "#acb1ba",
115
- gray400: "#8b919e",
116
- gray500: "#6b7280",
117
- gray600: "#535863",
118
- gray700: "#3b3f46",
119
- gray800: "#23252a",
120
- gray900: "#0b0b0d",
112
+ gray100: "#f9f9f9",
113
+ gray200: "#dedede",
114
+ gray300: "#c4c4c4",
115
+ gray400: "#ababab",
116
+ gray500: "#929292",
117
+ gray600: "#7a7a7a",
118
+ gray700: "#626262",
119
+ gray800: "#4c4c4c",
120
+ gray900: "#323232",
121
121
  black: "#000000",
122
122
  red100: "#ffebeb",
123
123
  red200: "#fdbfbf",
@@ -126,7 +126,9 @@ var coreColors = {
126
126
  red500: "#ef4444",
127
127
  red600: "#e42828",
128
128
  red700: "#c62121",
129
- white: "#ffffff"
129
+ white: "#ffffff",
130
+ amber600: "#d97706",
131
+ teal600: "#0d9488"
130
132
  };
131
133
  var coreBorders = {
132
134
  none: "0px solid",
@@ -154,20 +156,30 @@ var BruttalTheme = {
154
156
  letterSpacings,
155
157
  space,
156
158
  colors: {
157
- background: coreColors.lightNeutral,
158
- text: coreColors.gray900,
159
+ background: coreColors.white,
160
+ text: coreColors.black,
159
161
  muted: coreColors.gray200,
160
- outline: coreColors.gray200,
162
+ onMuted: coreColors.gray500,
163
+ mutedOutline: coreColors.gray300,
164
+ danger: coreColors.red700,
165
+ onDanger: coreColors.white,
166
+ notice: coreColors.amber600,
167
+ positive: coreColors.teal600,
168
+ surface: coreColors.white,
169
+ contentHeader: coreColors.gray200,
170
+ onContentHeader: coreColors.black,
171
+ outline: coreColors.gray500,
161
172
  primary: coreColors.main,
162
173
  onPrimary: coreColors.white,
163
174
  secondary: coreColors.gray500,
164
- onSecondary: coreColors.white,
175
+ onSecondary: coreColors.complimentary,
165
176
  highlight: coreColors.darkNeutral,
166
- onHighlight: coreColors.white,
177
+ onHighlight: coreColors.complimentary,
167
178
  accent: coreColors.accent,
168
179
  onAccent: coreColors.white,
169
- neutral: coreColors.white,
170
- onNeutral: coreColors.gray900
180
+ neutral: coreColors.darkNeutral,
181
+ onNeutral: coreColors.lightNeutral,
182
+ underemphasize: coreColors.gray300
171
183
  },
172
184
  fonts: {
173
185
  h1: coreFonts.contrast,
@@ -294,8 +306,34 @@ var BruttalTheme = {
294
306
  }
295
307
  },
296
308
  forms: {
309
+ label: {
310
+ "&:has(+ div > input:invalid)": {
311
+ "span > iconify-icon": {
312
+ color: "danger"
313
+ }
314
+ }
315
+ },
297
316
  input: {
298
- fontFamily: "body"
317
+ fontFamily: "body",
318
+ color: "text",
319
+ paddingY: "md",
320
+ paddingX: "lg",
321
+ "::placeholder": {
322
+ color: "underemphasize"
323
+ },
324
+ ":focus-within": {
325
+ outlineColor: "neutral"
326
+ },
327
+ ":disabled": {
328
+ backgroundColor: "onMuted",
329
+ borderColor: "muted"
330
+ },
331
+ "&.error": {
332
+ borderColor: "danger"
333
+ },
334
+ "&.error+span>iconify-icon": {
335
+ color: "danger"
336
+ }
299
337
  }
300
338
  },
301
339
  text: {
@@ -308,6 +346,11 @@ var BruttalTheme = {
308
346
  fontSize: 4,
309
347
  lineSpace: "3.5"
310
348
  },
349
+ error: {
350
+ '&[role="alert"]': {
351
+ color: "danger"
352
+ }
353
+ },
311
354
  h1: {
312
355
  fontFamily: "heading",
313
356
  fontSize: "6xl",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/theme",
3
- "version": "1.2.6",
3
+ "version": "1.2.8",
4
4
  "description": "Theme for packages.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "ttoss",
@@ -31,5 +31,5 @@
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
- "gitHead": "56e8cfde36a962deaa5514453618280699824b4f"
34
+ "gitHead": "fb122458378a96e09d1da7fbad0bf12e72e8d04d"
35
35
  }
package/src/themes/Bruttal/BruttalTheme.ts CHANGED
@@ -11,24 +11,24 @@ const coreFonts = {
11
11
  };
12
12
 
13
13
  const brandColors = {
14
- complimentary: '#f5f5f5',
15
- main: '#292c2a',
16
- darkNeutral: '#515389',
17
- accent: '#0000ff',
18
- lightNeutral: '#e3e3e3',
14
+ complimentary: '#f4f3f3',
15
+ main: '#292C2a',
16
+ darkNeutral: '#325C82',
17
+ accent: '#0469E3',
18
+ lightNeutral: '#F8F8F8',
19
19
  };
20
20
 
21
21
  const coreColors = {
22
22
  ...brandColors,
23
- gray100: '#f0f1f3',
24
- gray200: '#ced1d7',
25
- gray300: '#acb1ba',
26
- gray400: '#8b919e',
27
- gray500: '#6b7280',
28
- gray600: '#535863',
29
- gray700: '#3b3f46',
30
- gray800: '#23252a',
31
- gray900: '#0b0b0d',
23
+ gray100: '#f9f9f9',
24
+ gray200: '#dedede',
25
+ gray300: '#c4c4c4',
26
+ gray400: '#ababab',
27
+ gray500: '#929292',
28
+ gray600: '#7a7a7a',
29
+ gray700: '#626262',
30
+ gray800: '#4c4c4c',
31
+ gray900: '#323232',
32
32
  black: '#000000',
33
33
  red100: '#ffebeb',
34
34
  red200: '#fdbfbf',
@@ -38,6 +38,8 @@ const coreColors = {
38
38
  red600: '#e42828',
39
39
  red700: '#c62121',
40
40
  white: '#ffffff',
41
+ amber600: '#d97706',
42
+ teal600: '#0d9488',
41
43
  };
42
44
 
43
45
  const coreBorders = {
@@ -68,20 +70,30 @@ export const BruttalTheme: Theme = {
68
70
  letterSpacings,
69
71
  space,
70
72
  colors: {
71
- background: coreColors.lightNeutral,
72
- text: coreColors.gray900,
73
+ background: coreColors.white,
74
+ text: coreColors.black,
73
75
  muted: coreColors.gray200,
74
- outline: coreColors.gray200,
76
+ onMuted: coreColors.gray500,
77
+ mutedOutline: coreColors.gray300,
78
+ danger: coreColors.red700,
79
+ onDanger: coreColors.white,
80
+ notice: coreColors.amber600,
81
+ positive: coreColors.teal600,
82
+ surface: coreColors.white,
83
+ contentHeader: coreColors.gray200,
84
+ onContentHeader: coreColors.black,
85
+ outline: coreColors.gray500,
75
86
  primary: coreColors.main,
76
87
  onPrimary: coreColors.white,
77
88
  secondary: coreColors.gray500,
78
- onSecondary: coreColors.white,
89
+ onSecondary: coreColors.complimentary,
79
90
  highlight: coreColors.darkNeutral,
80
- onHighlight: coreColors.white,
91
+ onHighlight: coreColors.complimentary,
81
92
  accent: coreColors.accent,
82
93
  onAccent: coreColors.white,
83
- neutral: coreColors.white,
84
- onNeutral: coreColors.gray900,
94
+ neutral: coreColors.darkNeutral,
95
+ onNeutral: coreColors.lightNeutral,
96
+ underemphasize: coreColors.gray300,
85
97
  },
86
98
  fonts: {
87
99
  h1: coreFonts.contrast,
@@ -208,8 +220,34 @@ export const BruttalTheme: Theme = {
208
220
  },
209
221
  },
210
222
  forms: {
223
+ label: {
224
+ '&:has(+ div > input:invalid)': {
225
+ 'span > iconify-icon': {
226
+ color: 'danger',
227
+ },
228
+ },
229
+ },
211
230
  input: {
212
231
  fontFamily: 'body',
232
+ color: 'text',
233
+ paddingY: 'md',
234
+ paddingX: 'lg',
235
+ '::placeholder': {
236
+ color: 'underemphasize',
237
+ },
238
+ ':focus-within': {
239
+ outlineColor: 'neutral',
240
+ },
241
+ ':disabled': {
242
+ backgroundColor: 'onMuted',
243
+ borderColor: 'muted',
244
+ },
245
+ '&.error': {
246
+ borderColor: 'danger',
247
+ },
248
+ '&.error+span>iconify-icon': {
249
+ color: 'danger',
250
+ },
213
251
  },
214
252
  },
215
253
  text: {
@@ -222,6 +260,11 @@ export const BruttalTheme: Theme = {
222
260
  fontSize: 4,
223
261
  lineSpace: '3.5',
224
262
  },
263
+ error: {
264
+ '&[role="alert"]': {
265
+ color: 'danger',
266
+ },
267
+ },
225
268
  h1: {
226
269
  fontFamily: 'heading',
227
270
  fontSize: '6xl',