@ttoss/theme 1.7.15 → 1.7.16

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.
@@ -1,952 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- "use strict";
3
-
4
- var __create = Object.create;
5
- var __defProp = Object.defineProperty;
6
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
- var __getOwnPropNames = Object.getOwnPropertyNames;
8
- var __getProtoOf = Object.getPrototypeOf;
9
- var __hasOwnProp = Object.prototype.hasOwnProperty;
10
- var __commonJS = (cb, mod) => function __require() {
11
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = {
12
- exports: {}
13
- }).exports, mod), mod.exports;
14
- };
15
- var __export = (target, all) => {
16
- for (var name in all) __defProp(target, name, {
17
- get: all[name],
18
- enumerable: true
19
- });
20
- };
21
- var __copyProps = (to, from, except, desc) => {
22
- if (from && typeof from === "object" || typeof from === "function") {
23
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
24
- get: () => from[key],
25
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
26
- });
27
- }
28
- return to;
29
- };
30
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
31
- // If the importer is in node compatibility mode or this is not an ESM
32
- // file that has been converted to a CommonJS file using a Babel-
33
- // compatible transform (i.e. "__esModule" has not been set), then set
34
- // "default" to the CommonJS "module.exports" for node compatibility.
35
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
36
- value: mod,
37
- enumerable: true
38
- }) : target, mod));
39
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
40
- value: true
41
- }), mod);
42
-
43
- // ../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/loading.js
44
- var require_loading = __commonJS({
45
- "../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/loading.js"(exports2) {
46
- "use strict";
47
-
48
- var data = {
49
- "width": 24,
50
- "height": 24,
51
- "body": '<path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z" opacity=".5"/><path fill="currentColor" d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"><animateTransform attributeName="transform" dur="1s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate"/></path>'
52
- };
53
- exports2.__esModule = true;
54
- exports2.default = data;
55
- }
56
- });
57
-
58
- // ../../node_modules/.pnpm/@iconify+icons-mdi@1.2.48/node_modules/@iconify/icons-mdi/success-circle.js
59
- var require_success_circle = __commonJS({
60
- "../../node_modules/.pnpm/@iconify+icons-mdi@1.2.48/node_modules/@iconify/icons-mdi/success-circle.js"(exports2) {
61
- "use strict";
62
-
63
- var data = {
64
- "width": 24,
65
- "height": 24,
66
- "body": '<path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"/>'
67
- };
68
- exports2.__esModule = true;
69
- exports2.default = data;
70
- }
71
- });
72
-
73
- // ../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js
74
- var require_three_dots_loading = __commonJS({
75
- "../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js"(exports2) {
76
- "use strict";
77
-
78
- var data = {
79
- "width": 24,
80
- "height": 24,
81
- "body": '<circle cx="18" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".67" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".33" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="6" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin="0" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle>'
82
- };
83
- exports2.__esModule = true;
84
- exports2.default = data;
85
- }
86
- });
87
-
88
- // src/themes/Bruttal/Bruttal.ts
89
- var Bruttal_exports = {};
90
- __export(Bruttal_exports, {
91
- BrutalIcons: () => BrutalIcons,
92
- BruttalFonts: () => BruttalFonts,
93
- BruttalTheme: () => BruttalTheme
94
- });
95
- module.exports = __toCommonJS(Bruttal_exports);
96
-
97
- // src/themes/Bruttal/BruttalIcons.ts
98
- var import_react_icons = require("@ttoss/react-icons");
99
- var import_add_filled = __toESM(require("@iconify/icons-carbon/add-filled"));
100
- var import_arrow_right = __toESM(require("@iconify/icons-carbon/arrow-right"));
101
- var import_arrow_up_right = __toESM(require("@iconify/icons-carbon/arrow-up-right"));
102
- var import_attachment = __toESM(require("@iconify/icons-carbon/attachment"));
103
- var import_calendar = __toESM(require("@iconify/icons-carbon/calendar"));
104
- var import_caret_down = __toESM(require("@iconify/icons-carbon/caret-down"));
105
- var import_caret_up = __toESM(require("@iconify/icons-carbon/caret-up"));
106
- var import_checkmark = __toESM(require("@iconify/icons-carbon/checkmark"));
107
- var import_checkmark_outline = __toESM(require("@iconify/icons-carbon/checkmark-outline"));
108
- var import_checkbox_checked_filled = __toESM(require("@iconify/icons-carbon/checkbox-checked-filled"));
109
- var import_checkbox = __toESM(require("@iconify/icons-carbon/checkbox"));
110
- var import_checkbox_indeterminate_filled = __toESM(require("@iconify/icons-carbon/checkbox-indeterminate-filled"));
111
- var import_chevron_down = __toESM(require("@iconify/icons-carbon/chevron-down"));
112
- var import_chevron_left = __toESM(require("@iconify/icons-carbon/chevron-left"));
113
- var import_chevron_right = __toESM(require("@iconify/icons-carbon/chevron-right"));
114
- var import_chevron_up = __toESM(require("@iconify/icons-carbon/chevron-up"));
115
- var import_close_filled = __toESM(require("@iconify/icons-carbon/close-filled"));
116
- var import_close = __toESM(require("@iconify/icons-carbon/close"));
117
- var import_copy = __toESM(require("@iconify/icons-carbon/copy"));
118
- var import_download = __toESM(require("@iconify/icons-carbon/download"));
119
- var import_edit = __toESM(require("@iconify/icons-carbon/edit"));
120
- var import_email = __toESM(require("@iconify/icons-carbon/email"));
121
- var import_error_filled = __toESM(require("@iconify/icons-carbon/error-filled"));
122
- var import_information_filled = __toESM(require("@iconify/icons-carbon/information-filled"));
123
- var import_language = __toESM(require("@iconify/icons-carbon/language"));
124
- var import_loading = __toESM(require_loading());
125
- var import_menu = __toESM(require("@iconify/icons-carbon/menu"));
126
- var import_paste = __toESM(require("@iconify/icons-carbon/paste"));
127
- var import_radio_button_checked = __toESM(require("@iconify/icons-carbon/radio-button-checked"));
128
- var import_radio_button = __toESM(require("@iconify/icons-carbon/radio-button"));
129
- var import_renew = __toESM(require("@iconify/icons-carbon/renew"));
130
- var import_search = __toESM(require("@iconify/icons-carbon/search"));
131
- var import_share = __toESM(require("@iconify/icons-carbon/share"));
132
- var import_success_circle = __toESM(require_success_circle());
133
- var import_three_dots_loading = __toESM(require_three_dots_loading());
134
- var import_time = __toESM(require("@iconify/icons-carbon/time"));
135
- var import_trash_can = __toESM(require("@iconify/icons-carbon/trash-can"));
136
- var import_upload = __toESM(require("@iconify/icons-carbon/upload"));
137
- var import_user_avatar_filled_alt = __toESM(require("@iconify/icons-carbon/user-avatar-filled-alt"));
138
- var import_view_filled = __toESM(require("@iconify/icons-carbon/view-filled"));
139
- var import_view_off_filled = __toESM(require("@iconify/icons-carbon/view-off-filled"));
140
- var import_warning_alt = __toESM(require("@iconify/icons-carbon/warning-alt"));
141
- var import_warning_filled = __toESM(require("@iconify/icons-carbon/warning-filled"));
142
- var replicateIcon = {
143
- body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
144
- <path d="M42 15V42H15V15H42ZM42 12H15C14.2044 12 13.4413 12.3161 12.8787 12.8787C12.3161 13.4413 12 14.2044 12 15V42C12 42.7956 12.3161 43.5587 12.8787 44.1213C13.4413 44.6839 14.2044 45 15 45H42C42.7956 45 43.5587 44.6839 44.1213 44.1213C44.6839 43.5587 45 42.7956 45 42V15C45 14.2044 44.6839 13.4413 44.1213 12.8787C43.5587 12.3161 42.7956 12 42 12Z" fill="currentColor"/>
145
- <path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.76389C3 4.23744 4.26071 3 5.81588 3H29V5.57963H5.81588C5.71221 5.57963 5.62816 5.66213 5.62816 5.76389V28.994C5.62816 29.0957 5.71221 29.1782 5.81588 29.1782H22.2607L18.7784 25.7602L20.6368 23.9361L27.2916 30.4681L20.6368 37L18.7784 35.1759L22.2607 31.7579H5.81588C4.26071 31.7579 3 30.5204 3 28.994V5.76389Z" fill="currentColor"/>
146
- </svg>`,
147
- width: 48,
148
- height: 48
149
- };
150
- var subtractIcon = {
151
- body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
152
- <path d="M14 26H34V22H14V26ZM24 44C21.2333 44 18.6333 43.4747 16.2 42.424C13.7667 41.3733 11.65 39.9487 9.85 38.15C8.05 36.35 6.62533 34.2333 5.576 31.8C4.52667 29.3667 4.00133 26.7667 4 24C4 21.2333 4.52533 18.6333 5.576 16.2C6.62667 13.7667 8.05133 11.65 9.85 9.85C11.65 8.05 13.7667 6.62533 16.2 5.576C18.6333 4.52667 21.2333 4.00133 24 4C26.7667 4 29.3667 4.52533 31.8 5.576C34.2333 6.62667 36.35 8.05133 38.15 9.85C39.95 11.65 41.3753 13.7667 42.426 16.2C43.4767 18.6333 44.0013 21.2333 44 24C44 26.7667 43.4747 29.3667 42.424 31.8C41.3733 34.2333 39.9487 36.35 38.15 38.15C36.35 39.95 34.2333 41.3753 31.8 42.426C29.3667 43.4767 26.7667 44.0013 24 44Z" fill="black"/>
153
- </svg>
154
- `,
155
- width: 48,
156
- height: 48
157
- };
158
- var BrutalIcons = {
159
- add: import_add_filled.default,
160
- "arrow-right": import_arrow_right.default,
161
- attachment: import_attachment.default,
162
- avatar: import_user_avatar_filled_alt.default,
163
- "caret-down": import_caret_down.default,
164
- "caret-up": import_caret_up.default,
165
- calendar: import_calendar.default,
166
- "checkbox-checked": import_checkbox_checked_filled.default,
167
- "checkbox-indeterminate": import_checkbox_indeterminate_filled.default,
168
- "checkbox-unchecked": import_checkbox.default,
169
- check: import_checkmark.default,
170
- "check-mark": import_checkmark_outline.default,
171
- close: import_close.default,
172
- copy: import_copy.default,
173
- download: import_download.default,
174
- edit: import_edit.default,
175
- email: import_email.default,
176
- delete: import_trash_can.default,
177
- error: import_error_filled.default,
178
- info: import_information_filled.default,
179
- language: import_language.default,
180
- loading: import_loading.default,
181
- "menu-open": import_menu.default,
182
- "open-link": import_arrow_up_right.default,
183
- paste: import_paste.default,
184
- "picker-down": import_chevron_down.default,
185
- "picker-up": import_chevron_up.default,
186
- "nav-left": import_chevron_left.default,
187
- "nav-right": import_chevron_right.default,
188
- "radio-not-selected": import_radio_button.default,
189
- "radio-selected": import_radio_button_checked.default,
190
- refresh: import_renew.default,
191
- replicate: replicateIcon,
192
- search: import_search.default,
193
- share: import_share.default,
194
- subtract: subtractIcon,
195
- "success-circle": import_success_circle.default,
196
- "small-close": import_close_filled.default,
197
- "three-dots-loading": import_three_dots_loading.default,
198
- time: import_time.default,
199
- upload: import_upload.default,
200
- "view-off": import_view_off_filled.default,
201
- "view-on": import_view_filled.default,
202
- warning: import_warning_filled.default,
203
- "warning-alt": import_warning_alt.default
204
- };
205
- Object.entries(BrutalIcons).forEach(([key, icon]) => {
206
- (0, import_react_icons.addIcon)(key, icon);
207
- });
208
-
209
- // src/themes/Bruttal/BruttalFonts.ts
210
- var BruttalFonts = ["https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css?family=Work+Sans:wght@0,400;0,700;1,400;1,700&display=swap", "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"];
211
-
212
- // src/helpers/geometricCalc.ts
213
- var SIZE_TYPE = "rem";
214
- var calcMultiplyingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
215
- const result = initialValue * Math.pow(base, ratio);
216
- return `${result.toFixed(2)}${sizeType}`;
217
- };
218
- var calcDividingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
219
- const result = initialValue / Math.pow(base, ratio);
220
- return `${result.toFixed(2)}${sizeType}`;
221
- };
222
-
223
- // src/tokens/fontSizes.ts
224
- var SIZE_TYPE2 = "rem";
225
- var BASE = 1;
226
- var MULTIPLIER_FACTOR = 1.333;
227
- var fontSizes = {
228
- "2xs": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3),
229
- xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2),
230
- sm: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -1),
231
- base: `${BASE}${SIZE_TYPE2}`,
232
- lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1),
233
- xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2),
234
- "2xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3),
235
- "3xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 4),
236
- "4xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 5),
237
- "5xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 6),
238
- "6xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 7)
239
- };
240
-
241
- // src/tokens/fontWeights.ts
242
- var fontWeights = {
243
- thin: 100,
244
- extralight: 200,
245
- light: 300,
246
- normal: 400,
247
- medium: 500,
248
- semibold: 600,
249
- bold: 700,
250
- extrabold: 800
251
- };
252
-
253
- // src/tokens/letterSpacings.ts
254
- var letterSpacings = {
255
- tighter: "-0.05em",
256
- tight: "-0.025em",
257
- regular: "0em",
258
- wide: "0.05em",
259
- wider: "0.1em",
260
- widest: "0.5em"
261
- };
262
-
263
- // src/tokens/lineHeights.ts
264
- var BASE2 = 100;
265
- var MULTIPLIER_FACTOR2 = 1.333;
266
- var SIZE_TYPE3 = "%";
267
- var lineHeights = {
268
- "2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
269
- xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
270
- sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
271
- base: "normal",
272
- lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
273
- xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
274
- "2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
275
- flat: "100%"
276
- };
277
-
278
- // src/tokens/space.ts
279
- var SIZE_TYPE4 = "rem";
280
- var MD = 0.5;
281
- var MULTIPLIER_FACTOR3 = 1.618;
282
- var space = {
283
- none: 0,
284
- "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
285
- xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
286
- sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
287
- md: `${MD}${SIZE_TYPE4}`,
288
- lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
289
- xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
290
- "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
291
- "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
292
- "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
293
- "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
294
- "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
295
- "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
296
- };
297
-
298
- // src/tokens/zIndices.ts
299
- var zIndices = {
300
- deep: -9999,
301
- behind: -1,
302
- auto: "auto",
303
- base: 0,
304
- docked: 10,
305
- /**
306
- * Sticky is a CSS property that can be applied to an element to make it
307
- * "stick" or remain fixed in a specific position relative to the viewport
308
- * as the user scrolls the page. When an element is set as sticky, it will
309
- * initially behave like a normal element but once the user scrolls past a
310
- * certain threshold, it will stick to the designated position.
311
- */
312
- sticky: 100,
313
- /**
314
- * An overlay is a graphical element used in user interfaces to cover or
315
- * partially obscure the underlying content. It is typically a
316
- * semi-transparent or opaque layer that is positioned above other elements
317
- * on the screen. Overlays are commonly employed to provide visual effects,
318
- * create modal or pop-up dialogs, highlight or focus user attention, or
319
- * serve as a background for elements such as tooltips, modals, or dropdown
320
- * menus. They are often used to add depth, dimension, and visual hierarchy
321
- * to the interface by visually separating or layering content.
322
- */
323
- overlay: 1e3,
324
- /**
325
- * A modal is a user interface component that appears as a dialog or window
326
- * overlay on top of the main content, temporarily interrupting the user's
327
- * interaction flow. It is commonly used to display additional information,
328
- * request user input, or confirm an action. Modals typically have a higher
329
- * z-index value than other elements on the page to ensure they are visually
330
- * prominent and receive the user's full attention. They often feature a
331
- * close button or an overlay click outside the modal to dismiss them and
332
- * return to the underlying content. Modals help to focus user attention and
333
- * provide a context-specific interaction within a larger interface.
334
- */
335
- modal: 2e3,
336
- /**
337
- * A dropdown is a user interface component that presents a list of
338
- * selectable options when triggered by a user action, such as clicking on a
339
- * dropdown button or input field. When activated, a dropdown expands
340
- * vertically to reveal a list of choices, allowing the user to select a
341
- * single option. The selected option is then displayed in the closed state
342
- * of the dropdown. Dropdowns are commonly used to conserve space on a page
343
- * or provide a convenient way to choose from a predefined set of options.
344
- * They can be found in various contexts, such as navigation menus, form
345
- * inputs, or filter controls. Dropdowns enhance user interaction by
346
- * providing a compact and organized selection mechanism within the interface.
347
- */
348
- dropdown: 3e3,
349
- /**
350
- * A popover is a user interface component that provides contextual
351
- * information or options when triggered by a user action, such as hovering
352
- * over an element or clicking a button. It typically appears as a small
353
- * overlay near the triggering element, offering additional details, actions,
354
- * or related content. Popovers are designed to be non-intrusive and provide
355
- * concise information or quick actions without requiring the user to
356
- * navigate to a different page or screen. They are often used to enhance the
357
- * user's understanding or provide supplementary functionality within a
358
- * specific context. Popovers are commonly positioned above other elements in
359
- * the interface to ensure visibility and accessibility.
360
- */
361
- popover: 4e3,
362
- /**
363
- * A tooltip is a small, informative message or hint that appears when a user
364
- * hovers over or interacts with an element, such as a button, link, or icon.
365
- * It is typically displayed as a brief, contextual text or label that
366
- * provides additional information or clarifies the purpose of the element.
367
- * Tooltips are used to improve the user's understanding of interface
368
- * elements and enhance usability. They are generally positioned near the
369
- * associated element, often appearing as a small box or bubble that pops up
370
- * temporarily and disappears when the user moves the cursor away from the
371
- * element. Tooltips are designed to be unobtrusive and provide helpful
372
- * guidance or supplementary details without requiring the user to take any
373
- * additional actions.
374
- */
375
- tooltip: 5e3,
376
- /**
377
- * A toast is a brief, temporary notification or message that appears on the
378
- * screen to provide important information or alerts to the user. It
379
- * typically appears as a small box or banner positioned in a non-intrusive
380
- * area of the interface, such as the top or bottom of the screen. Toasts are
381
- * used to communicate updates, notifications, or status messages that may
382
- * require the user's attention but do not require immediate action. They are
383
- * designed to be unobtrusive and automatically disappear after a short
384
- * period, often with a fade-out animation. Toasts are commonly used in web
385
- * and mobile applications to provide timely feedback or inform the user
386
- * about completed actions, errors, or system updates.
387
- */
388
- toast: 6e3
389
- };
390
-
391
- // src/themes/Bruttal/BruttalTheme.ts
392
- var coreFonts = {
393
- main: '"Atkinson Hyperlegible", sans-serif',
394
- contrast: '"Work Sans", sans-serif',
395
- monospace: '"Inconsolata", sans-serif'
396
- };
397
- var brandColors = {
398
- complimentary: "#f4f3f3",
399
- main: "#292C2a",
400
- darkNeutral: "#325C82",
401
- accent: "#0469E3",
402
- lightNeutral: "#F8F8F8"
403
- };
404
- var coreColors = {
405
- ...brandColors,
406
- gray100: "#f9f9f9",
407
- gray200: "#dedede",
408
- gray300: "#c4c4c4",
409
- gray400: "#ababab",
410
- gray500: "#929292",
411
- gray600: "#7a7a7a",
412
- gray700: "#626262",
413
- gray800: "#4c4c4c",
414
- gray900: "#323232",
415
- black: "#000000",
416
- red100: "#ffebeb",
417
- red200: "#fdbfbf",
418
- red300: "#f99595",
419
- red400: "#f56c6c",
420
- red500: "#ef4444",
421
- red600: "#e42828",
422
- red700: "#c62121",
423
- white: "#ffffff",
424
- amber600: "#d97706",
425
- teal600: "#0d9488"
426
- };
427
- var coreBorders = {
428
- none: "0px solid",
429
- thin: "1px solid",
430
- medium: "2px solid",
431
- thick: "4px solid"
432
- };
433
- var coreRadii = {
434
- sharp: "0px",
435
- xs: "2px",
436
- sm: "4px",
437
- md: "6px",
438
- lg: "8px",
439
- xl: "12px",
440
- "2xl": "16px",
441
- "3xl": "24px",
442
- circle: "9999px"
443
- };
444
- var BruttalTheme = {
445
- /**
446
- * Tokens
447
- */
448
- fontSizes,
449
- fontWeights,
450
- letterSpacings,
451
- space,
452
- lineHeights,
453
- zIndices,
454
- colors: {
455
- background: coreColors.complimentary,
456
- text: coreColors.black,
457
- muted: coreColors.gray200,
458
- onMuted: coreColors.gray600,
459
- mutedOutline: coreColors.gray300,
460
- danger: coreColors.red700,
461
- onDanger: coreColors.white,
462
- notice: coreColors.amber600,
463
- onNotice: coreColors.white,
464
- positive: coreColors.teal600,
465
- onPositive: coreColors.white,
466
- surface: coreColors.white,
467
- contentHeader: coreColors.gray200,
468
- onContentHeader: coreColors.black,
469
- outline: coreColors.gray500,
470
- primary: coreColors.main,
471
- onPrimary: coreColors.white,
472
- secondary: coreColors.gray100,
473
- onSecondary: coreColors.black,
474
- highlight: coreColors.darkNeutral,
475
- onHighlight: coreColors.complimentary,
476
- accent: coreColors.accent,
477
- onAccent: coreColors.white,
478
- neutral: coreColors.darkNeutral,
479
- onNeutral: coreColors.lightNeutral,
480
- underemphasize: coreColors.gray300
481
- },
482
- fonts: {
483
- main: coreColors.main,
484
- contrast: coreFonts.contrast,
485
- body: coreFonts.main,
486
- highlight: coreFonts.main,
487
- caption: coreFonts.main
488
- },
489
- borders: {
490
- default: coreBorders.thin,
491
- secondary: coreBorders.medium,
492
- muted: coreBorders.thin,
493
- interaction: coreBorders.medium,
494
- danger: coreBorders.medium,
495
- highlight: coreBorders.medium
496
- },
497
- radii: {
498
- informative: coreRadii.xs,
499
- default: coreRadii.sm,
500
- action: coreRadii.sm
501
- },
502
- /**
503
- * Global styles
504
- */
505
- styles: {
506
- root: {
507
- fontFamily: "body",
508
- fontWeight: "normal",
509
- fontSize: "base",
510
- zIndex: "base",
511
- margin: 0,
512
- padding: 0,
513
- backgroundColor: "background",
514
- /**
515
- * HTML elements
516
- */
517
- table: {
518
- borderCollapse: "collapse"
519
- },
520
- th: {
521
- paddingX: "md",
522
- paddingY: "md"
523
- },
524
- tr: {
525
- borderBottom: "default"
526
- },
527
- td: {
528
- paddingX: "xl",
529
- paddingY: "md"
530
- }
531
- },
532
- a: {
533
- color: "text",
534
- fontFamily: "body",
535
- textDecorationLine: "underline",
536
- lineHeight: "base",
537
- "&.quiet:not(:hover)": {
538
- textDecorationLine: "none"
539
- },
540
- ":visited": {
541
- color: "highlight"
542
- }
543
- }
544
- },
545
- /**
546
- * Components
547
- */
548
- badges: {
549
- positive: {
550
- color: "onPositive",
551
- bg: "positive"
552
- },
553
- negative: {
554
- color: "onDanger",
555
- bg: "danger"
556
- },
557
- neutral: {
558
- color: "onSecondary",
559
- bg: "secondary",
560
- border: "muted",
561
- borderColor: "onMuted"
562
- },
563
- informative: {
564
- color: "onNotice",
565
- bg: "notice"
566
- },
567
- muted: {
568
- color: "onMuted",
569
- bg: "muted"
570
- }
571
- },
572
- buttons: {
573
- accent: {
574
- backgroundColor: "accent",
575
- color: "onAccent",
576
- borderRadius: "action",
577
- borderColor: "accent",
578
- ":hover:not(:active,[disabled])": {
579
- filter: "brightness(90%)"
580
- },
581
- ":disabled": {
582
- cursor: "default",
583
- backgroundColor: "muted",
584
- borderColor: "muted",
585
- color: "onMuted"
586
- }
587
- },
588
- primary: {
589
- backgroundColor: "primary",
590
- color: "onPrimary",
591
- borderRadius: "action",
592
- borderColor: "primary",
593
- ":hover:not(:active,[disabled])": {
594
- filter: "brightness(90%)"
595
- },
596
- ":active": {
597
- backgroundColor: "primary",
598
- color: "onPrimary",
599
- borderColor: "outline"
600
- },
601
- ":disabled": {
602
- cursor: "default",
603
- backgroundColor: "muted",
604
- borderColor: "muted",
605
- color: "onMuted"
606
- }
607
- },
608
- secondary: {
609
- backgroundColor: "secondary",
610
- color: "onSecondary",
611
- borderRadius: "action",
612
- border: "secondary",
613
- borderColor: "onSecondary",
614
- ":hover:not(:active,[disabled])": {
615
- filter: "brightness(90%)"
616
- },
617
- ":disabled": {
618
- cursor: "default",
619
- backgroundColor: "muted",
620
- borderColor: "muted",
621
- color: "onMuted"
622
- }
623
- },
624
- destructive: {
625
- color: "onDanger",
626
- backgroundColor: "danger",
627
- ":hover:not(:active,[disabled])": {
628
- filter: "brightness(90%)"
629
- },
630
- ":disabled": {
631
- cursor: "default",
632
- backgroundColor: "muted",
633
- borderColor: "muted",
634
- color: "onMuted"
635
- }
636
- },
637
- closeButton: {
638
- backgroundColor: "background",
639
- color: "primary",
640
- border: "default",
641
- borderColor: "primary",
642
- borderRadius: "action",
643
- ":disabled": {
644
- border: "muted",
645
- borderColor: "onMuted",
646
- backgroundColor: "muted",
647
- color: "onMuted",
648
- cursor: "not-allowed"
649
- },
650
- ":is(:focus-within, :hover):not(:disabled)": {
651
- color: "onHighlight",
652
- backgroundColor: "highlight",
653
- borderColor: "highlight"
654
- }
655
- },
656
- actionButton: {
657
- default: {
658
- backgroundColor: "secondary",
659
- color: "onSecondary",
660
- border: "default",
661
- borderColor: "onSecondary",
662
- transition: "all 0.2s",
663
- ":is(:focus-within, :hover)": {
664
- backgroundColor: "highlight",
665
- borderColor: "highlight",
666
- color: "onHighlight"
667
- }
668
- },
669
- accent: {
670
- backgroundColor: "accent",
671
- color: "onAccent",
672
- border: "none"
673
- },
674
- quiet: {
675
- backgroundColor: "transparent",
676
- color: "text",
677
- border: "none",
678
- borderColor: "transparent"
679
- }
680
- }
681
- },
682
- cards: {
683
- primary: {
684
- backgroundColor: "primary",
685
- border: "1px solid black",
686
- padding: [4, 5],
687
- display: "flex",
688
- flexDirection: "column",
689
- alignItems: "center",
690
- width: "fit-content"
691
- }
692
- },
693
- forms: {
694
- label: {
695
- color: "text",
696
- '&:is([aria-disabled="true"])': {
697
- color: "onMuted"
698
- },
699
- '& > span[aria-label="tooltip"]': {
700
- fontSize: "sm",
701
- marginLeft: "2xs"
702
- },
703
- '&:has(input[type="checkbox"])': {
704
- fontSize: "base",
705
- gap: "md"
706
- },
707
- '& > div:has(input[type="checkbox"]) > svg': {
708
- marginRight: 0
709
- },
710
- '&:has(input[type="checkbox"]:disabled)': {
711
- color: "onMuted"
712
- },
713
- '&:has(div > input[type="radio"])': {
714
- alignItems: "center"
715
- },
716
- '&:has(div > input[type="radio"]:disabled)': {
717
- color: "muted"
718
- }
719
- },
720
- radio: {
721
- color: "text",
722
- fontFamily: "body",
723
- fontSize: "lg",
724
- "input:disabled ~ &": {
725
- color: "muted"
726
- },
727
- 'input[aria-invalid="true"] ~ &': {
728
- color: "danger"
729
- },
730
- "input:focus ~ &": {
731
- bg: "transparent"
732
- },
733
- "&:is(svg, svg + svg)": {
734
- width: fontSizes.base,
735
- height: fontSizes.base
736
- }
737
- },
738
- checkbox: {
739
- "input:focus ~ &": {
740
- bg: "transparent"
741
- },
742
- "input:not(:checked) ~ &": {
743
- color: "primary"
744
- },
745
- "input:disabled ~ &": {
746
- color: "muted"
747
- },
748
- "input:disabled ~ & path": {
749
- backgroundColor: "onMuted"
750
- },
751
- 'input[aria-invalid="true"] ~ &': {
752
- color: "danger"
753
- },
754
- "&:is(svg, svg + svg)": {
755
- width: fontSizes.base,
756
- height: fontSizes.base
757
- }
758
- },
759
- input: {
760
- color: "text",
761
- border: "interaction",
762
- borderColor: "onMuted",
763
- borderRadius: "action",
764
- backgroundColor: "surface",
765
- fontSize: "base",
766
- lineHeight: "base",
767
- "::placeholder": {
768
- color: "onMuted"
769
- },
770
- ":focus-within": {
771
- outlineColor: "neutral"
772
- },
773
- ":disabled": {
774
- backgroundColor: "muted",
775
- color: "onMuted",
776
- border: "muted",
777
- borderColor: "onMuted"
778
- },
779
- '&[aria-invalid="true"]': {
780
- borderColor: "danger"
781
- },
782
- '&[aria-invalid="true"] ~ span:has(iconify-icon)': {
783
- color: "danger"
784
- }
785
- },
786
- inputNumber: {
787
- color: "text",
788
- border: "interaction",
789
- borderColor: "onMuted",
790
- borderRadius: "action",
791
- ":disabled": {
792
- border: "muted",
793
- borderColor: "onMuted",
794
- color: "muted"
795
- },
796
- ":disabled ~ span > iconify-icon": {
797
- color: "muted",
798
- cursor: "default"
799
- },
800
- ":focus-within": {
801
- outlineColor: "highlight"
802
- },
803
- ':not(:disabled, [aria-invalid="true"]):hover': {
804
- borderColor: "highlight"
805
- },
806
- ':not(:disabled, [aria-invalid="true"]) ~ span:has(iconify-icon):hover': {
807
- color: "highlight"
808
- },
809
- "& ~ span:has(iconify-icon)": {
810
- fontSize: "base"
811
- },
812
- '&[aria-invalid="true"]': {
813
- border: "danger",
814
- borderColor: "danger",
815
- color: "danger",
816
- outlineColor: "danger"
817
- },
818
- '&[aria-invalid="true"] ~ span>iconify-icon': {
819
- color: "danger"
820
- }
821
- },
822
- select: {
823
- color: "text",
824
- backgroundColor: "surface",
825
- border: "interaction",
826
- borderColor: "onMuted",
827
- borderRadius: "action",
828
- ":disabled": {
829
- border: "muted",
830
- borderColor: "onMuted",
831
- backgroundColor: "muted",
832
- color: "onMuted"
833
- },
834
- ":disabled ~ * > span:has(iconify-icon)": {
835
- color: "onMuted"
836
- },
837
- '&[aria-invalid="true"]': {
838
- border: "danger",
839
- borderColor: "danger",
840
- outlineColor: "danger"
841
- },
842
- '&[aria-invalid="true"] ~ * > span.error-icon': {
843
- color: "danger"
844
- }
845
- },
846
- textarea: {
847
- color: "text",
848
- border: "interaction",
849
- borderColor: "onMuted",
850
- backgroundColor: "surface",
851
- borderRadius: "action",
852
- ":focus-within": {
853
- outlineColor: "primary"
854
- },
855
- ":disabled::placeholder": {
856
- color: "onMuted"
857
- },
858
- ":disabled": {
859
- borderColor: "onMuted",
860
- backgroundColor: "muted",
861
- border: "muted",
862
- color: "onMuted"
863
- },
864
- '&[aria-invalid="true"]': {
865
- borderColor: "danger",
866
- outlineColor: "danger"
867
- },
868
- '&[aria-invalid="true"]+span>iconify-icon': {
869
- color: "danger",
870
- fontSize: "base"
871
- }
872
- }
873
- },
874
- text: {
875
- default: {
876
- color: "text",
877
- fontFamily: "body"
878
- },
879
- title: {
880
- fontFamily: "heading",
881
- fontSize: 4,
882
- lineSpace: "3.5"
883
- },
884
- help: {
885
- color: "text",
886
- '&[aria-disabled="true"]': {
887
- color: "onMuted"
888
- },
889
- negative: {
890
- color: "danger",
891
- '&[aria-disabled="true"]': {
892
- color: "onMuted"
893
- }
894
- }
895
- },
896
- headline: {
897
- fontFamily: "contrast",
898
- fontWeight: "bold",
899
- lineHeight: "flat",
900
- fontSize: "5xl",
901
- letterSpacing: "regular"
902
- },
903
- subheadline: {
904
- fontFamily: "main",
905
- fontWeight: "bold",
906
- lineHeight: "base",
907
- fontSize: "xl",
908
- letterSpacing: "regular"
909
- },
910
- h1: {
911
- fontFamily: "contrast",
912
- fontWeight: "extrabold",
913
- lineHeight: "base",
914
- fontSize: "3xl",
915
- letterSpacing: "regular"
916
- },
917
- h2: {
918
- fontFamily: "contrast",
919
- fontWeight: "bold",
920
- lineHeight: "base",
921
- fontSize: "2xl",
922
- letterSpacing: "regular"
923
- },
924
- h3: {
925
- fontFamily: "contrast",
926
- fontWeight: "bold",
927
- lineHeight: "base",
928
- fontSize: "xl",
929
- letterSpacing: "regular"
930
- },
931
- h4: {
932
- fontFamily: "contrast",
933
- fontWeight: "semibold",
934
- lineHeight: "base",
935
- fontSize: "lg",
936
- letterSpacing: "regular"
937
- },
938
- h5: {
939
- fontFamily: "contrast",
940
- fontWeight: "semibold",
941
- lineHeight: "base",
942
- fontSize: "base",
943
- letterSpacing: "regular"
944
- }
945
- }
946
- };
947
- // Annotate the CommonJS export names for ESM import in node:
948
- 0 && (module.exports = {
949
- BrutalIcons,
950
- BruttalFonts,
951
- BruttalTheme
952
- });