@genexus/mercury 0.13.1 → 0.13.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.
package/README.md
CHANGED
|
@@ -1,103 +1,232 @@
|
|
|
1
1
|
# Mercury Design System
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Mercury Design System is a robust and scalable solution designed to improve product development. It's implemented over [Chameleon](https://github.com/genexuslabs/chameleon-controls-library) a library of white-label, highly-customizable and reusable web components, which implements all components necessaries for the Mercury DS.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**Chameleon** works on every framework since it's a library of web components (the standard for creating components in the web) and provides the following features:
|
|
6
|
+
|
|
7
|
+
- It build with accessibility in mind.
|
|
8
|
+
- Tiny bundle size.
|
|
9
|
+
- Blazing fast performance.
|
|
10
|
+
- Full RTL and internationalization support.
|
|
11
|
+
- Open source.
|
|
12
|
+
|
|
13
|
+
## 1. Installation
|
|
6
14
|
|
|
7
15
|
```bash
|
|
8
16
|
npm i @genexus/mercury
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## 2. Usage
|
|
20
|
+
|
|
21
|
+
This repository provides the following assets to implement the Mercury DS:
|
|
22
|
+
|
|
23
|
+
- Custom fonts
|
|
24
|
+
- Icons
|
|
25
|
+
- CSS to style Chameleon component.
|
|
26
|
+
|
|
27
|
+
The CSS is divided by bundles, where each bundle contains the CSS to style a component. For example, to style a `button` we have the `components/button` bundle, to style the `ch-checkbox` we have the `components/checkbox`, and so on.
|
|
28
|
+
|
|
29
|
+
### 2.1. Copy icons and custom fonts
|
|
30
|
+
|
|
31
|
+
Custom fonts and icons are distributed under the following folders:
|
|
32
|
+
|
|
33
|
+
- `<path to node_modules>/@genexus/mercury/dist/assets/fonts`
|
|
34
|
+
- `<path to node_modules>/@genexus/mercury/dist/assets/icons`
|
|
12
35
|
|
|
13
|
-
|
|
36
|
+
To use these assets, we recommend copying them statically, that is, do not track these assets in your repository sources, only copy them to the dev server and prod builds.
|
|
14
37
|
|
|
15
|
-
|
|
16
|
-
@import "<path to node_modules>/@genexus/mercury/dist/mercury.scss";
|
|
38
|
+
In the following sections we provide examples of how to copy the assets with different build tools.
|
|
17
39
|
|
|
18
|
-
|
|
19
|
-
```
|
|
40
|
+
### 2.1.1. Copying assets with Vite
|
|
20
41
|
|
|
21
|
-
|
|
42
|
+
First, install `vite-plugin-static-copy`:
|
|
22
43
|
|
|
23
|
-
|
|
44
|
+
```bash
|
|
45
|
+
npm i vite-plugin-static-copy --save-dev
|
|
46
|
+
```
|
|
24
47
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
48
|
+
```ts
|
|
49
|
+
// vite.config.ts
|
|
50
|
+
import { defineConfig } from "vite";
|
|
51
|
+
import { viteStaticCopy } from "vite-plugin-static-copy";
|
|
28
52
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
53
|
+
export default defineConfig({
|
|
54
|
+
plugins: [
|
|
55
|
+
viteStaticCopy({
|
|
56
|
+
targets: [
|
|
32
57
|
{
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
58
|
+
src: "node_modules/@genexus/mercury/dist/assets",
|
|
59
|
+
dest: "./" // Path to your assets folder
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### 2.1.2. Copying assets with StencilJS
|
|
68
|
+
|
|
69
|
+
When building web components with the StencilJS compiler, the assets can be copied using the copy tasks that provides StencilJS:
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
// stencil.config.ts
|
|
73
|
+
import { Config } from "@stencil/core";
|
|
74
|
+
|
|
75
|
+
export const config: Config = {
|
|
76
|
+
namespace: "your-name-space",
|
|
77
|
+
outputTargets: [
|
|
78
|
+
{
|
|
79
|
+
type: "dist",
|
|
80
|
+
copy: [
|
|
81
|
+
{
|
|
82
|
+
src: "../node_modules/@genexus/mercury/dist/assets",
|
|
83
|
+
dest: "assets" // Path to your assets folder
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
type: "www",
|
|
89
|
+
serviceWorker: null,
|
|
90
|
+
copy: [
|
|
41
91
|
{
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
copy: [
|
|
45
|
-
{
|
|
46
|
-
src: "../node_modules/@genexus/mercury/dist/assets",
|
|
47
|
-
dest: "assets"
|
|
48
|
-
}
|
|
49
|
-
]
|
|
92
|
+
src: "../node_modules/@genexus/mercury/dist/assets",
|
|
93
|
+
dest: "assets" // Path to your assets folder
|
|
50
94
|
}
|
|
51
95
|
]
|
|
52
|
-
}
|
|
96
|
+
}
|
|
97
|
+
]
|
|
98
|
+
};
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### 2.2. Creating the CSS bundles
|
|
102
|
+
|
|
103
|
+
After you have defined the path for the icons and custom fonts, you must create the CSS bundles with the path to those assets.
|
|
104
|
+
|
|
105
|
+
In the following sections we provide examples of how to create these bundles.
|
|
106
|
+
|
|
107
|
+
### 2.2.1. Using the CLI to create the bundles
|
|
108
|
+
|
|
109
|
+
> [!IMPORTANT]
|
|
110
|
+
> This is the way we recommend to create the bundles.
|
|
111
|
+
|
|
112
|
+
Mercury exposes a CLI to automate the creation of bundles. This CLI comes with the installation of the `@genexus/mercury` dependency.
|
|
113
|
+
|
|
114
|
+
Usage:
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
# Command line
|
|
118
|
+
npx mercury <flags>
|
|
119
|
+
|
|
120
|
+
# package.json script
|
|
121
|
+
"build.scss": "mercury <flags>"
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Consult the [CLI flags](#cli-flags) section to read the complete documentation for the CLI.
|
|
125
|
+
|
|
126
|
+
Using the CLI:
|
|
127
|
+
|
|
128
|
+
1. Add a `"build.scss"` script in your package.json and include the paths where the icons and fonts will be copied, also include the `outDir` path where the CSS will be generated.
|
|
129
|
+
|
|
130
|
+
For example:
|
|
131
|
+
|
|
132
|
+
```json
|
|
133
|
+
"build.scss": "mercury --i=/assets/icons/ --f=/assets/fonts/ --gl --outDir=src/assets/generated/"
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
2. Use the `"build.scss"` script before building your application (dev server and prod build).
|
|
137
|
+
|
|
138
|
+
For example:
|
|
139
|
+
|
|
140
|
+
```json
|
|
141
|
+
"dev": "npm run build.scss && ...",
|
|
142
|
+
"start": "npm run build.scss && ...",
|
|
143
|
+
"build": "npm run build.scss && ..."
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
3. Before using any Mercury or Chameleon utility, you must register the bundle mapping. This mapping allows Mercury to map the bundle names (for example, `components/button`) with the real name of the CSS file (for example, `components/button-9f82641938b85445.css`).
|
|
147
|
+
|
|
148
|
+
**IMPORTANT**: Run this JavaScript before using any Mercury or Chameleon utilities.
|
|
149
|
+
|
|
150
|
+
```ts
|
|
151
|
+
import { setBundleMapping } from "@genexus/mercury/dist/bundles";
|
|
152
|
+
|
|
153
|
+
// This path is generated in the same directory as the one specified in the CLI --outDir flag
|
|
154
|
+
import { bundleToHashMappings } from "<path to the file>/bundle-to-hash-mappings";
|
|
155
|
+
|
|
156
|
+
setBundleMapping(bundleToHashMappings);
|
|
157
|
+
|
|
158
|
+
// Other Mercury and Chameleon utilities...
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### 2.2.2. Generating the CSS using SASS
|
|
162
|
+
|
|
163
|
+
> [!IMPORTANT]
|
|
164
|
+
> We don't recommend this way, because the CLI does this under the hood in a much better and faster way. Also, this way does not hash the generated CSS, which leads to cache issues when re-deploying your application after updating your version of Mercury.
|
|
165
|
+
|
|
166
|
+
1. Install `sass` dependency to transpile the bundles.
|
|
167
|
+
|
|
168
|
+
```bash
|
|
169
|
+
npm i -D sass
|
|
53
170
|
```
|
|
54
171
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
export default defineConfig({
|
|
63
|
-
plugins: [
|
|
64
|
-
viteStaticCopy({
|
|
65
|
-
targets: [
|
|
66
|
-
{
|
|
67
|
-
src: "node_modules/@genexus/mercury/dist/assets",
|
|
68
|
-
dest: "./"
|
|
69
|
-
}
|
|
70
|
-
]
|
|
71
|
-
})
|
|
72
|
-
]
|
|
73
|
-
});
|
|
172
|
+
2. Add a config file (called `config.scss`) in your project to determine the path to the assets.
|
|
173
|
+
Include the following configuration:
|
|
174
|
+
|
|
175
|
+
```scss
|
|
176
|
+
$icons-path: "/assets/custom/path/icons/";
|
|
177
|
+
$font-face-path: "/assets/custom/path/fonts/";
|
|
178
|
+
$globant-colors: false;
|
|
74
179
|
```
|
|
75
180
|
|
|
76
|
-
|
|
181
|
+
3. Run the following command to transpile the bundles with the new path for the assets:
|
|
182
|
+
|
|
183
|
+
```bash
|
|
184
|
+
npx sass --load-path=<path to config.scss directory> --no-source-map --style compressed node_modules/@genexus/mercury/dist/bundles/scss:untracked-folder/bundles
|
|
185
|
+
```
|
|
77
186
|
|
|
78
|
-
|
|
187
|
+
For example:
|
|
79
188
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
189
|
+
```bash
|
|
190
|
+
npx sass --load-path=src --no-source-map --style compressed node_modules/@genexus/mercury/dist/bundles/scss:src/assets/generated
|
|
191
|
+
```
|
|
83
192
|
|
|
84
|
-
|
|
85
|
-
Include the following configuration:
|
|
193
|
+
### 2.2.3. Using already generated CSS
|
|
86
194
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
195
|
+
> [!IMPORTANT]
|
|
196
|
+
> We don't recommend this way, because the generated CSS contains fixed paths for the assets and the CSS names don't contain a hash, which leads to cache issues when re-deploying your application after updating your version of Mercury.
|
|
197
|
+
> We only include this case, because in some scenarios it can facilitate the initialization with Mercury.
|
|
198
|
+
|
|
199
|
+
1. Copy the `<path to node_modules>/@genexus/mercury/dist/bundles/css` content to the `outDir` where the CSS will be.
|
|
200
|
+
|
|
201
|
+
### 2.3. Register Mercury and Chameleon utilities
|
|
202
|
+
|
|
203
|
+
Chameleon and Mercury export utilities to facilitate the usage of icons. If you are using Mercury icons, do the following:
|
|
204
|
+
|
|
205
|
+
```ts
|
|
206
|
+
import { registryProperty } from "@genexus/chameleon-controls-library/dist/collection";
|
|
207
|
+
import { getImagePathCallbackDefinitions } from "@genexus/mercury/assets-manager.js";
|
|
208
|
+
import { registerMercury } from "@genexus/mercury/register-mercury.js";
|
|
209
|
+
|
|
210
|
+
// Register the default value for the getImagePathCallback property in all Chameleon
|
|
211
|
+
// components. This implementation allows us to remove the need for binding the
|
|
212
|
+
// getImagePathCallback property in all Chameleon controls that must render icons.
|
|
213
|
+
registryProperty("getImagePathCallback", getImagePathCallbackDefinitions);
|
|
214
|
+
|
|
215
|
+
// It registers a mapping between the icons metadata and its path.
|
|
216
|
+
registerMercury();
|
|
217
|
+
```
|
|
92
218
|
|
|
93
|
-
|
|
219
|
+
### 2.4. Style the base application
|
|
94
220
|
|
|
95
|
-
|
|
96
|
-
npx sass --load-path=path/to/config/file/directory --no-source-map --style compressed node_modules/@genexus/mercury/dist/bundles/scss:untracked-folder/bundles
|
|
97
|
-
```
|
|
221
|
+
### 2.5. Style the components with the CSS bundles
|
|
98
222
|
|
|
99
|
-
|
|
223
|
+
## 3. CLI flags
|
|
100
224
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
225
|
+
Flags:
|
|
226
|
+
| Flag | Description |
|
|
227
|
+
| -- | -- |
|
|
228
|
+
| `--globant` <br/><br/> `--gl` <br/><br/> `-gl` | If specified, the generated CSS will use the tokens for the Mercury Globant variant. |
|
|
229
|
+
| `--icons-path=path` <br/><br/>`--icons=path` <br/><br/>`--i=path` <br/><br/>`-i=path` | Allows you to customize the base path for the icons. If not specified, `./assets/icons/` will be used. |
|
|
230
|
+
| `--font-face-path=path` <br/><br/>`--font-face=path` <br/><br/>`--f=path` <br/><br/>`-f=path` | Allows you to customize the base path for the custom fonts. If not specified, `./assets/fonts/` will be used. |
|
|
231
|
+
| `--avoid-hash=bundle1,bundle2,...` <br/><br/>`--ah=bundle1,bundle2,...` <br/><br/>`-ah=bundle1,bundle2,...` | Receives a set of comma-separated values, where each value is a bundle. Allows you to avoid the creating the hash for the provided bundles. |
|
|
232
|
+
| `--outDir=path` <br/><br/>`--outdir=path` <br/><br/>`--o=path` <br/><br/>`-o=path` | Allows you to customize the path where the CSS files will be created. If not specified, `./mercury/` will be used. |
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Thin.woff2");font-weight:100;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-ThinItalic.woff2");font-weight:100;font-style:italic}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-ExtraLight.woff2");font-weight:200;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-ExtraLightItalic.woff2");font-weight:200;font-style:italic}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Light.woff2");font-weight:300;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-LightItalic.woff2");font-weight:300;font-style:italic}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Regular.woff2");font-weight:400;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Italic.woff2");font-weight:400;font-style:italic}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Medium.woff2");font-weight:500;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-MediumItalic.woff2");font-weight:500;font-style:italic}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-SemiBold.woff2");font-weight:600;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-SemiBoldItalic.woff2");font-weight:600;font-style:italic}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Bold.woff2");font-weight:700;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-BoldItalic.woff2");font-weight:700;font-style:italic}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-ExtraBold.woff2");font-weight:800;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-ExtraBoldItalic.woff2");font-weight:800;font-style:italic}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-Black.woff2");font-weight:900;font-style:normal}@font-face{font-family:"Inter";src:url("./assets/fonts/Inter-BlackItalic.woff2");font-weight:900;font-style:italic}:root.light{color-scheme:light;--mer-color__primary--200: #005ac1;--mer-color__primary--300: #5498e8;--mer-color__primary--400: #437dc0;--mer-color__primary--600: #335884;--mer-color__neutral-gray--100: #4a5870;--mer-color__neutral-gray--200: #49566d;--mer-color__neutral-gray--300: #56677a;--mer-color__neutral-gray--400: #56677a;--mer-color__neutral-gray--450: #56677a;--mer-color__neutral-gray--500: #828b96;--mer-color__neutral-gray--550: #9da9b6;--mer-color__neutral-gray--600: #aeb9c6;--mer-color__neutral-gray--650: #c6d1dd;--mer-color__neutral-gray--700: #e1ecf9;--mer-color__neutral-gray--800: #fafbfd;--mer-color__neutral-gray--900: #f0f4fa;--mer-color__neutral-gray--1000: #ffffff;--mer-color__tinted-yellow--5: #faf9f6;--mer-color__tinted-yellow--60: #fafbfd;--mer-color__tinted-red--5: #faf5f7;--mer-color__tinted-red--60: #fbb2b7;--mer-color__tinted-green--5: #f2f7f8;--mer-color__tinted-green--60: #94cac4;--mer-color__tinted-primary--5: #f3f6fd;--mer-color__tinted-primary--8: #eff5fd;--mer-color__tinted-primary--10: #ecf3fd;--mer-color__tinted-primary--20: #deebfe;--mer-color__tinted-primary--30: #cfe3fe;--mer-color__tinted-primary--50: #b1d2fe;--mer-color__message-green--100: #208e80;--mer-color__message-green--200: #208e80;--mer-color__message-yellow--100: #dfa135;--mer-color__message-yellow--200: #dfa135;--mer-color__message-red--100: #da1a27;--mer-color__message-red--200: #da1a27;--mer-color__message-red--300: #4d0000;--mer-color__message-red--400: #800000;--mer-color__message-red--500: #ff9999;--mer-color__message-red--600: #ff9999}:root.dark{color-scheme:dark;--mer-color__primary--200: #bfd732;--mer-color__primary--300: #b4cc28;--mer-color__primary--400: #96aa22;--mer-color__primary--600: #697718;--mer-color__neutral-gray--100: #ededed;--mer-color__neutral-gray--200: #dfdfdf;--mer-color__neutral-gray--300: #cdcdcd;--mer-color__neutral-gray--400: #a9a9a9;--mer-color__neutral-gray--450: #8c8c8c;--mer-color__neutral-gray--500: #686868;--mer-color__neutral-gray--550: #575757;--mer-color__neutral-gray--600: #464646;--mer-color__neutral-gray--650: #3b3b3b;--mer-color__neutral-gray--700: #303030;--mer-color__neutral-gray--800: #212121;--mer-color__neutral-gray--900: #171717;--mer-color__neutral-gray--1000: #000000;--mer-color__tinted-yellow--5: #282a2d;--mer-color__tinted-yellow--60: #ad8a53;--mer-color__tinted-red--5: #29252f;--mer-color__tinted-red--60: #aa5962;--mer-color__tinted-green--5: #1c2830;--mer-color__tinted-green--60: #317571;--mer-color__tinted-primary--5: #202118;--mer-color__tinted-primary--8: #242619;--mer-color__tinted-primary--10: #282a1a;--mer-color__tinted-primary--20: #383d1c;--mer-color__tinted-primary--30: #49501f;--mer-color__tinted-primary--50: #6a7624;--mer-color__message-green--100: #b1e1b6;--mer-color__message-green--200: #9ccba1;--mer-color__message-yellow--100: #dfa135;--mer-color__message-yellow--200: #dfa135;--mer-color__message-red--100: #da1a27;--mer-color__message-red--200: #da1a27;--mer-color__message-red--300: #4d0000;--mer-color__message-red--400: #800000;--mer-color__message-red--500: #ff9999;--mer-color__message-red--600: #ff9999}:root{--mer-color__gradient-angle: 225deg;--mer-color__gradient-opacity--low: 0.7;--mer-color__gradient-opacity--medium: 0.9;--mer-color__gradient-opacity--high: 1;--mer-color__gradient--01: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 204, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(163, 0, 255, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--02: linear-gradient( var(--mer-color__gradient-angle), rgba(57, 255, 20, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 0, 114, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--03: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 245, 255, var(--mer-color__gradient-opacity--low)) 0%, rgba(255, 234, 0, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--04: linear-gradient( var(--mer-color__gradient-angle), rgba(16, 196, 195, var(--mer-color__gradient-opacity--high)) 0%, rgba(236, 30, 91, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--05: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 162, var(--mer-color__gradient-opacity--high)) 0%, rgba(139, 0, 255, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--06: linear-gradient( var(--mer-color__gradient-angle), rgba(204, 255, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 204, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--07: linear-gradient( var(--mer-color__gradient-angle), rgba(91, 118, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 203, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--08: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 255, var(--mer-color__gradient-opacity--high)) 0%, rgba(0, 149, 255, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--09: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 69, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(142, 84, 200, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--10: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 127, var(--mer-color__gradient-opacity--low)) 0%, rgba(0, 255, 0, var(--mer-color__gradient-opacity--low)) 100% );--mer-color__gradient--11: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 199, 0, var(--mer-color__gradient-opacity--high)) 0%, rgba(138, 43, 226, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--12: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 51, var(--mer-color__gradient-opacity--medium)) 0%, rgba(255, 204, 0, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--13: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 255, 60, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 102, 0, var(--mer-color__gradient-opacity--high)) 100% )}:root{--mer-border__width--sm: 1px;--mer-border__width--md: 2px;--mer-border__width--lg: 4px;--mer-border__radius--2xs: 1px;--mer-border__radius--xs: 2px;--mer-border__radius--sm: 4px;--mer-border__radius--md: 8px;--mer-border__radius--lg: 12px;--mer-border__radius--xl: 30px;--mer-body__bg-color: var(--mer-surface);--mer-body__color: var(--mer-text__on-surface);--mer-body__font-size: var(--mer-font__size--3xs);--mer-body__font-family: var(--mer-font-family--body);--mer-body__font-weight: var(--mer-font__weight--regular);--mer-body__line-height: var(--mer-line-height--spaced);--mer-body__margin-block: var(--mer-spacing--sm);--mer-system__border-width: var(--mer-border__width--sm);--mer-system__border-style: solid;--mer-system__border-color: var(--mer-color__neutral-gray--500);--mer-heading__color: var(--mer-color__neutral-gray--100);--scrollbar__size: var(--mer-spacing--2xs);--scrollbar-track__bg-color: transparent;--scrollbar-track__border-radius: var(--mer-spacing--xs);--scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550);--scrollbar-thumb__border-radius: var(--mer-spacing--xs);--scrollbar-corner__bg: transparent;--mer-icon__box--sm: var(--mer-spacing--sm);--mer-icon__box--md: 14px;--mer-icon__size--sm: 100%;--mer-icon__size--md: 100%;--mer-form-input__padding-inline: var(--mer-spacing--xs);--mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline);--mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value);--mer-form-input__border-color: var(--mer-color__neutral-gray--500);--mer-form-input__border-style: solid;--mer-form-input__border-width: var(--mer-border__width--sm);--mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color);--mer-form-input__border-radius: var(--mer-border__radius--sm);--mer-form-input-check__border-width: var(--mer-border__radius--xs);--mer-form-input-check__border-color: var( --mer-border-color__neutral--active );--mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled );--mer-checkbox__option-checked-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");--window__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01);--window__border-radius: var(--mer-border__radius--sm);--window__padding: var(--mer-spacing--xs);--window__bg-color: var(--mer-surface__elevation--01);--window__gap: var(--mer-spacing--xs);--window__box-shadow: var(--mer-box-shadow--01);--focus__outline-width: var(--mer-border__width--sm);--focus__outline-style: solid;--focus__outline-color: var(--mer-border-color__primary);--focus__outline-offset: calc(var(--mer-system__border-width) * -1);--borders-un-border-color__focused: var(--focus__outline-color);--control__bg-color: var(--control__bg-color--enabled);--control__border-color: var(--control__border-color--enabled);--control__color: var(--control__color--enabled);--control__bg-color--enabled: transparent;--control__border-color--enabled: var(--mer-color__neutral-gray--500);--control__color--enabled: var(--mer-text__neutral);--control__border-color--hover: var(--mer-border-color__neutral--hover);--control__background-color--disabled: var(--mer-accent__primary--disabled);--control__border-color--disabled: var(--control__background-color--disabled);--control__color--disabled: var(--mer-text__on-disabled);--control__border-color--error: var(--mer-border-color__error);--control__border-width: var(--mer-border__width--sm);--control__border-style: solid;--control__border-radius: var(--mer-border__radius--sm);--control__font-family: var(--mer-font-family--body);--control__font-weight--regular: var(--mer-font__weight--regular);--control__font-weight--semi-bold: var(--mer-font__weight--semi-bold);--control__font-size--small: var(--mer-font__size--3xs);--control__font-size--regular: var(--mer-font__size--xs);--control__line-height: var(--mer-line-height--spaced);--control__padding-block: var(--mer-spacing--2xs);--control__padding-inline: var(--mer-spacing--xs);--control__icon-gap: var(--mer-spacing--xs);--control-placeholder__color: var(--ch-placeholder-color);--control-placeholder__color--disabled: var( --mer-form-input__color--disabled );--control-placeholder__font-style: italic;--control-tiny__size: var(--mer-spacing--md);--control-tiny__border-width: 1.2px;--control-tiny__border-style: solid;--control-tiny__border-radius-sm: 1px;--control-tiny__border-radius-rounded: 50%;--control-tiny-option__color: var(--control__border-color);--label__font-size: var(--mer-font__size--2xs);--label__font-weight: var(--mer-font__weight--semi-bold);--label__line-height: var(--mer-line-height--regular);--label__border-width: 1.2px;--label__border-style: solid;--label__border-radius: var(--mer-border__radius--2xs);--label__gap--inline: var(--mer-spacing--xs);--label__gap--block: var(--mer-spacing--xs);--label__color: var(--label__color--enabled);--label__color--enabled: var(--mer-text__neutral);--label__color--hover: var(--mer-text__highlighted);--label__color--disabled: var(--mer-text__primary--disabled);--label__color--error: var(--mer-text__neutral);--controls__container-row-gap: var(--mer-spacing--md);--controls__group-gap--block: var(--mer-spacing--sm);--controls__group-gap--inline: var(--mer-spacing--md);--field-group__row-gap: var(--mer-spacing--md);--field-group__column-gap: var(--mer-spacing--lg);--field__row-gap: var(--mer-spacing--xs);--field__column-gap: var(--mer-spacing--md);--field-inline-label__margin-block-start: 6px;--mer-accent__primary: var(--mer-color__primary--200);--mer-accent__primary--hover: var(--mer-color__primary--400);--mer-accent__primary--active: var(--mer-color__primary--600);--mer-accent__primary--disabled: var(--mer-color__neutral-gray--500);--mer-accent__primary--destructive: var(--mer-color__message-red--100);--mer-accent__primary--destructive-hover: var(--mer-color__message-red--300);--mer-accent__primary--destructive-active: var(--mer-color__message-red--400);--mer-border-color__primary: var(--mer-accent__primary);--mer-border-color__primary--hover: var(--mer-accent__primary--hover);--mer-border-color__primary--active: var(--mer-accent__primary--active);--mer-border-color__primary--disabled: var(--mer-accent__primary--disabled);--mer-border-color__primary--focused: var(--mer-color__neutral-gray--200);--mer-border-color__dim: var(--mer-color__neutral-gray--550);--mer-border-color__error: var(--mer-color__message-red--100);--mer-border-color__warning: var(--mer-color__message-yellow--100);--mer-border-color__success: var(--mer-color__message-green--100);--mer-border-color__neutral: var(--mer-color__neutral-gray--400);--mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100);--mer-border-color__neutral--active: var(--mer-color__neutral-gray--200);--mer-border-color__on-surface: var(--mer-color__neutral-gray--650);--mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600);--mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550);--mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500);--mer-heading__gray--light: var(--mer-color__neutral-gray--200);--mer-header__background-color: var(--mer-color__neutral-gray--700);--mer-icon__on-surface: var(--mer-color__neutral-gray--200);--mer-icon__on-primary: var(--mer-color__neutral-gray--900);--mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300);--mer-icon__on-primary--active: var(--mer-color__neutral-gray--100);--mer-icon__on-disabled: var(--mer-color__neutral-gray--450);--mer-icon__on-message: var(--mer-color__neutral-gray--700);--mer-icon__on-elevation: var(--mer-color__neutral-gray--100);--mer-icon__primary: var(--mer-accent__primary);--mer-icon__primary--hover: var(--mer-accent__primary--hover);--mer-icon__primary--active: var(--mer-accent__primary--active);--mer-icon__primary--disabled: var(--mer-accent__primary--disabled);--mer-icon__error: var(--mer-color__message-red--100);--mer-icon__warning: var(--mer-color__message-yellow--100);--mer-icon__success: var(--mer-color__message-green--100);--mer-icon__neutral: var(--mer-color__neutral-gray--300);--mer-icon__highlighted: var(--mer-color__neutral-gray--100);--mer-icon__bright: var(--mer-color__neutral-gray--300);--item__bg-color: var(--item__bg-color--enabled);--item__border-color: var(--item__border-color--enabled);--item__color: var(--item__color--enabled);--item__bg-color--enabled: transparent;--item__border-color--enabled: transparent;--item__color--enabled: var(--mer-text__on-elevation);--item__bg-color--hover: var(--mer-color__tinted-primary--5);--item__border-color--hover: transparent;--item__color--hover: var(--mer-color__neutral-gray--100);--item__bg-color--selected: var(--mer-color__tinted-primary--10);--item__border-color--selected: var(--mer-color__tinted-primary--30);--item__color--selected: var(--mer-color__neutral-gray--100);--item__bg-color--selected-hover: var(--mer-color__tinted-primary--10);--item__border-color--selected-hover: var(--mer-color__tinted-primary--20);--item__color--selected-hover: var(--mer-color__neutral-gray--100);--item__bg-color--disabled: transparent;--item__border-color--disabled: transparent;--item__color--disabled: var(--mer-text__primary--disabled);--item__border-width: var(--mer-border__width--sm);--item__border-style: solid;--item__border-radius: var(--mer-border__radius--sm);--item__padding-block: var(--mer-spacing--2xs);--item__padding-inline: var(--mer-spacing--xs);--item__height--regular: var(--mer-spacing--xl);--item__height--large: 36px;--item__font-size: var(--item__font-size--regular);--item__font-size--small: var(--mer-font__size--3xs);--item__font-size--regular: var(--mer-font__size--xs);--item__font-weight: var(--mer-font__weight--regular);--item-header__font-weight: var(--mer-font__weight--semi-bold);--item__gap--regular: var(--mer-spacing--xs);--item__line-height: var(--mer-line-height--tight);--items-container__border-width: var(--mer-border__width--sm);--items-container__border-style: solid;--items-container__bg-color: var(--mer-surface__elevation--01);--items-container__border-color: var(--mer-border-color__on-surface);--items-container__padding-block: var(--mer-spacing--xs);--items-container__padding-inline: var(--mer-spacing--xs);--items-container__border-radius: var(--mer-border__radius--sm);--items-container__box-shadow: var(--mer-box-shadow--01);--items-container__gap: var(--mer-spacing--2xs);--items-container__gap--small: var(--mer-spacing--2xs);--items-container__max-block-size: 300px;--items-container-separator__block-size: var(--mer-border__width--sm);--items-container-separator__inline-size: 100%;--items-container-separator__bg-color: var(--items-container__border-color);--grid-cell__border-color: var(--mer-border-color__on-elevation--01);--grid-cell__border: var(--mer-border__width--sm) solid var(--grid-cell__border-color);--grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color);--grid-cell__padding-block: var(--mer-spacing--xs);--grid-cell__padding-inline: var(--mer-spacing--sm);--tab-caption__bg-color: var(--tab-caption__bg-color--enabled);--tab-caption__color: var(--tab-caption__color--enabled);--tab-caption__border-color: transparent;--tab-caption__border-style: solid;--tab-caption__border-width: var(--mer-border__width--sm);--tab-caption__bg-color--enabled: transparent;--tab-caption__border-color--enabled: transparent;--tab-caption__color--enabled: var(--mer-text__neutral);--tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10);--tab-caption__bg-color--selected-inline: transparent;--tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10);--tab-caption__border-color--selected-inline: var(--mer-accent__primary);--tab-caption__border-color--selected-stack: var( --mer-color__tinted-primary--20 );--tab-caption__color--selected: var(--mer-text__highlighted);--tab-caption__bg-color--disabled: transparent;--tab-caption__border-color--disabled: var( --mer-border-color__on-elevation--01 );--tab-caption__color--disabled: var(--mer-text__primary--disabled);--tab-caption__font-size: var(--mer-font__size--3xs);--tab-caption__font-weight: var(--mer-font__weight--semi-bold);--tab-caption__padding-block: var(--mer-spacing--xs);--tab-caption__padding-inline: var(--mer-spacing--sm);--tab-caption__gap: var(--mer-spacing--xs);--mer-surface: var(--mer-color__neutral-gray--900);--mer-color__surface: var( --mer-surface );--mer-surface__elevation--01: var(--mer-color__neutral-gray--800);--mer-surface__elevation--02: var(--mer-color__neutral-gray--700);--mer-surface__elevation--03: var(--mer-color__neutral-gray--650);--mer-box-shadow--01: 0px 4px 20px 0px #00000040;--mer-text__on-surface: var(--mer-color__neutral-gray--200);--mer-text__on-primary: var(--mer-color__neutral-gray--900);--mer-text__on-primary--active: var(--mer-color__neutral-gray--100);--mer-text__on-disabled: var(--mer-color__neutral-gray--450);--mer-text__on-message: var(--mer-color__neutral-gray--700);--mer-text__on-elevation: var(--mer-color__neutral-gray--100);--mer-text__primary: var(--mer-accent__primary);--mer-text__primary--hover: var(--mer-accent__primary--hover);--mer-text__primary--active: var(--mer-accent__primary--active);--mer-text__primary--disabled: var(--mer-accent__primary--disabled);--mer-text__neutral: var(--mer-color__neutral-gray--300);--mer-text__highlighted: var(--mer-color__neutral-gray--100);--mer-text__success: var(--mer-color__message-green--100);--mer-text__error: var(--mer-color__message-red--100);--mer-text__warning: var(--mer-color__message-yellow--100);--mer-text__complementary: var(--mer-color__neutral-gray--450);--mer-text__bright: var( --mer-color__neutral-gray--100 );--mer-font-family--title: Inter, Helvetica, Arial, sans-serif;--mer-font-family--body: Inter, Helvetica, Arial, sans-serif;--mer-font-family--code: monospace;--mer-font__weight--light: 300;--mer-font__weight--regular: 400;--mer-font__weight--medium: 500;--mer-font__weight--semi-bold: 600;--mer-font__weight--bold: 700;--mer-font__weight--extra-bold: 800;--mer-font__size--4xs: 11px;--mer-font__size--3xs: 12px;--mer-font__size--2xs: 13px;--mer-font__size--xs: 14px;--mer-font__size--sm: 16px;--mer-font__size--md: 20px;--mer-font__size--lg: 24px;--mer-font__size--xl: 36px;--mer-line-height--tight: 1.3;--mer-line-height--regular: 1.4;--mer-line-height--spaced: 1.5;--mer-spacing--3xs: 2px;--mer-spacing--2xs: 4px;--mer-spacing--xs: 8px;--mer-spacing--sm: 12px;--mer-spacing--md: 16px;--mer-spacing--lg: 24px;--mer-spacing--xl: 32px;--mer-spacing--2xl: 40px;--mer-spacing--3xl: 48px;--mer-spacing--4xl: 64px;--mer-timing--super-fast: 100ms;--mer-timing--fast: 200ms;--mer-timing--regular: 500ms;--mer-timing--slow: 1000ms}body{display:grid;grid-template-rows:1fr;min-block-size:100dvh;margin:0;background-color:var(--mer-surface);color:var(--mer-text__on-surface);line-height:var(--mer-body__line-height);font-family:var(--mer-body__font-family);font-size:var(--mer-body__font-size);font-weight:var(--mer-body__font-weight)}input,select,textarea{padding:0;margin:0;background-color:unset;border:unset;color:unset;font:unset;outline:unset}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const bundle = `@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-Thin.woff2");font-weight:100;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-ThinItalic.woff2");font-weight:100;font-style:italic}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-ExtraLight.woff2");font-weight:200;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-ExtraLightItalic.woff2");font-weight:200;font-style:italic}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-Light.woff2");font-weight:300;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-LightItalic.woff2");font-weight:300;font-style:italic}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-Regular.woff2");font-weight:400;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-Italic.woff2");font-weight:400;font-style:italic}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-Medium.woff2");font-weight:500;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-MediumItalic.woff2");font-weight:500;font-style:italic}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-SemiBold.woff2");font-weight:600;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-SemiBoldItalic.woff2");font-weight:600;font-style:italic}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-Bold.woff2");font-weight:700;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-BoldItalic.woff2");font-weight:700;font-style:italic}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-ExtraBold.woff2");font-weight:800;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-ExtraBoldItalic.woff2");font-weight:800;font-style:italic}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-Black.woff2");font-weight:900;font-style:normal}@font-face{font-family:"Inter";src:url("{{FONT_FACE_PATH}}Inter-BlackItalic.woff2");font-weight:900;font-style:italic}:root.light{color-scheme:light;--mer-color__primary--200: #005ac1;--mer-color__primary--300: #5498e8;--mer-color__primary--400: #437dc0;--mer-color__primary--600: #335884;--mer-color__neutral-gray--100: #4a5870;--mer-color__neutral-gray--200: #49566d;--mer-color__neutral-gray--300: #56677a;--mer-color__neutral-gray--400: #56677a;--mer-color__neutral-gray--450: #56677a;--mer-color__neutral-gray--500: #828b96;--mer-color__neutral-gray--550: #9da9b6;--mer-color__neutral-gray--600: #aeb9c6;--mer-color__neutral-gray--650: #c6d1dd;--mer-color__neutral-gray--700: #e1ecf9;--mer-color__neutral-gray--800: #fafbfd;--mer-color__neutral-gray--900: #f0f4fa;--mer-color__neutral-gray--1000: #ffffff;--mer-color__tinted-yellow--5: #faf9f6;--mer-color__tinted-yellow--60: #fafbfd;--mer-color__tinted-red--5: #faf5f7;--mer-color__tinted-red--60: #fbb2b7;--mer-color__tinted-green--5: #f2f7f8;--mer-color__tinted-green--60: #94cac4;--mer-color__tinted-primary--5: #f3f6fd;--mer-color__tinted-primary--8: #eff5fd;--mer-color__tinted-primary--10: #ecf3fd;--mer-color__tinted-primary--20: #deebfe;--mer-color__tinted-primary--30: #cfe3fe;--mer-color__tinted-primary--50: #b1d2fe;--mer-color__message-green--100: #208e80;--mer-color__message-green--200: #208e80;--mer-color__message-yellow--100: #dfa135;--mer-color__message-yellow--200: #dfa135;--mer-color__message-red--100: #da1a27;--mer-color__message-red--200: #da1a27;--mer-color__message-red--300: #4d0000;--mer-color__message-red--400: #800000;--mer-color__message-red--500: #ff9999;--mer-color__message-red--600: #ff9999}:root.dark{color-scheme:dark;--mer-color__primary--200: #bfd732;--mer-color__primary--300: #b4cc28;--mer-color__primary--400: #96aa22;--mer-color__primary--600: #697718;--mer-color__neutral-gray--100: #ededed;--mer-color__neutral-gray--200: #dfdfdf;--mer-color__neutral-gray--300: #cdcdcd;--mer-color__neutral-gray--400: #a9a9a9;--mer-color__neutral-gray--450: #8c8c8c;--mer-color__neutral-gray--500: #686868;--mer-color__neutral-gray--550: #575757;--mer-color__neutral-gray--600: #464646;--mer-color__neutral-gray--650: #3b3b3b;--mer-color__neutral-gray--700: #303030;--mer-color__neutral-gray--800: #212121;--mer-color__neutral-gray--900: #171717;--mer-color__neutral-gray--1000: #000000;--mer-color__tinted-yellow--5: #282a2d;--mer-color__tinted-yellow--60: #ad8a53;--mer-color__tinted-red--5: #29252f;--mer-color__tinted-red--60: #aa5962;--mer-color__tinted-green--5: #1c2830;--mer-color__tinted-green--60: #317571;--mer-color__tinted-primary--5: #202118;--mer-color__tinted-primary--8: #242619;--mer-color__tinted-primary--10: #282a1a;--mer-color__tinted-primary--20: #383d1c;--mer-color__tinted-primary--30: #49501f;--mer-color__tinted-primary--50: #6a7624;--mer-color__message-green--100: #b1e1b6;--mer-color__message-green--200: #9ccba1;--mer-color__message-yellow--100: #dfa135;--mer-color__message-yellow--200: #dfa135;--mer-color__message-red--100: #da1a27;--mer-color__message-red--200: #da1a27;--mer-color__message-red--300: #4d0000;--mer-color__message-red--400: #800000;--mer-color__message-red--500: #ff9999;--mer-color__message-red--600: #ff9999}:root{--mer-color__gradient-angle: 225deg;--mer-color__gradient-opacity--low: 0.7;--mer-color__gradient-opacity--medium: 0.9;--mer-color__gradient-opacity--high: 1;--mer-color__gradient--01: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 204, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(163, 0, 255, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--02: linear-gradient( var(--mer-color__gradient-angle), rgba(57, 255, 20, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 0, 114, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--03: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 245, 255, var(--mer-color__gradient-opacity--low)) 0%, rgba(255, 234, 0, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--04: linear-gradient( var(--mer-color__gradient-angle), rgba(16, 196, 195, var(--mer-color__gradient-opacity--high)) 0%, rgba(236, 30, 91, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--05: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 162, var(--mer-color__gradient-opacity--high)) 0%, rgba(139, 0, 255, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--06: linear-gradient( var(--mer-color__gradient-angle), rgba(204, 255, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 204, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--07: linear-gradient( var(--mer-color__gradient-angle), rgba(91, 118, 255, var(--mer-color__gradient-opacity--medium)) 0%, rgba(0, 255, 203, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--08: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 255, var(--mer-color__gradient-opacity--high)) 0%, rgba(0, 149, 255, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--09: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 69, 0, var(--mer-color__gradient-opacity--medium)) 0%, rgba(142, 84, 200, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--10: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 127, var(--mer-color__gradient-opacity--low)) 0%, rgba(0, 255, 0, var(--mer-color__gradient-opacity--low)) 100% );--mer-color__gradient--11: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 199, 0, var(--mer-color__gradient-opacity--high)) 0%, rgba(138, 43, 226, var(--mer-color__gradient-opacity--high)) 100% );--mer-color__gradient--12: linear-gradient( var(--mer-color__gradient-angle), rgba(255, 0, 51, var(--mer-color__gradient-opacity--medium)) 0%, rgba(255, 204, 0, var(--mer-color__gradient-opacity--medium)) 100% );--mer-color__gradient--13: linear-gradient( var(--mer-color__gradient-angle), rgba(0, 255, 60, var(--mer-color__gradient-opacity--high)) 0%, rgba(255, 102, 0, var(--mer-color__gradient-opacity--high)) 100% )}:root{--mer-border__width--sm: 1px;--mer-border__width--md: 2px;--mer-border__width--lg: 4px;--mer-border__radius--2xs: 1px;--mer-border__radius--xs: 2px;--mer-border__radius--sm: 4px;--mer-border__radius--md: 8px;--mer-border__radius--lg: 12px;--mer-border__radius--xl: 30px;--mer-body__bg-color: var(--mer-surface);--mer-body__color: var(--mer-text__on-surface);--mer-body__font-size: var(--mer-font__size--3xs);--mer-body__font-family: var(--mer-font-family--body);--mer-body__font-weight: var(--mer-font__weight--regular);--mer-body__line-height: var(--mer-line-height--spaced);--mer-body__margin-block: var(--mer-spacing--sm);--mer-system__border-width: var(--mer-border__width--sm);--mer-system__border-style: solid;--mer-system__border-color: var(--mer-color__neutral-gray--500);--mer-heading__color: var(--mer-color__neutral-gray--100);--scrollbar__size: var(--mer-spacing--2xs);--scrollbar-track__bg-color: transparent;--scrollbar-track__border-radius: var(--mer-spacing--xs);--scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550);--scrollbar-thumb__border-radius: var(--mer-spacing--xs);--scrollbar-corner__bg: transparent;--mer-icon__box--sm: var(--mer-spacing--sm);--mer-icon__box--md: 14px;--mer-icon__size--sm: 100%;--mer-icon__size--md: 100%;--mer-form-input__padding-inline: var(--mer-spacing--xs);--mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline);--mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value);--mer-form-input__border-color: var(--mer-color__neutral-gray--500);--mer-form-input__border-style: solid;--mer-form-input__border-width: var(--mer-border__width--sm);--mer-form-input__border: var(--mer-form-input__border-width) var(--mer-form-input__border-style) var(--mer-form-input__border-color);--mer-form-input__border-radius: var(--mer-border__radius--sm);--mer-form-input-check__border-width: var(--mer-border__radius--xs);--mer-form-input-check__border-color: var( --mer-border-color__neutral--active );--mer-form-input-check__border-color--disabled: var( --mer-accent__primary--disabled );--mer-checkbox__option-checked-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");--window__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01);--window__border-radius: var(--mer-border__radius--sm);--window__padding: var(--mer-spacing--xs);--window__bg-color: var(--mer-surface__elevation--01);--window__gap: var(--mer-spacing--xs);--window__box-shadow: var(--mer-box-shadow--01);--focus__outline-width: var(--mer-border__width--sm);--focus__outline-style: solid;--focus__outline-color: var(--mer-border-color__primary);--focus__outline-offset: calc(var(--mer-system__border-width) * -1);--borders-un-border-color__focused: var(--focus__outline-color);--control__bg-color: var(--control__bg-color--enabled);--control__border-color: var(--control__border-color--enabled);--control__color: var(--control__color--enabled);--control__bg-color--enabled: transparent;--control__border-color--enabled: var(--mer-color__neutral-gray--500);--control__color--enabled: var(--mer-text__neutral);--control__border-color--hover: var(--mer-border-color__neutral--hover);--control__background-color--disabled: var(--mer-accent__primary--disabled);--control__border-color--disabled: var(--control__background-color--disabled);--control__color--disabled: var(--mer-text__on-disabled);--control__border-color--error: var(--mer-border-color__error);--control__border-width: var(--mer-border__width--sm);--control__border-style: solid;--control__border-radius: var(--mer-border__radius--sm);--control__font-family: var(--mer-font-family--body);--control__font-weight--regular: var(--mer-font__weight--regular);--control__font-weight--semi-bold: var(--mer-font__weight--semi-bold);--control__font-size--small: var(--mer-font__size--3xs);--control__font-size--regular: var(--mer-font__size--xs);--control__line-height: var(--mer-line-height--spaced);--control__padding-block: var(--mer-spacing--2xs);--control__padding-inline: var(--mer-spacing--xs);--control__icon-gap: var(--mer-spacing--xs);--control-placeholder__color: var(--ch-placeholder-color);--control-placeholder__color--disabled: var( --mer-form-input__color--disabled );--control-placeholder__font-style: italic;--control-tiny__size: var(--mer-spacing--md);--control-tiny__border-width: 1.2px;--control-tiny__border-style: solid;--control-tiny__border-radius-sm: 1px;--control-tiny__border-radius-rounded: 50%;--control-tiny-option__color: var(--control__border-color);--label__font-size: var(--mer-font__size--2xs);--label__font-weight: var(--mer-font__weight--semi-bold);--label__line-height: var(--mer-line-height--regular);--label__border-width: 1.2px;--label__border-style: solid;--label__border-radius: var(--mer-border__radius--2xs);--label__gap--inline: var(--mer-spacing--xs);--label__gap--block: var(--mer-spacing--xs);--label__color: var(--label__color--enabled);--label__color--enabled: var(--mer-text__neutral);--label__color--hover: var(--mer-text__highlighted);--label__color--disabled: var(--mer-text__primary--disabled);--label__color--error: var(--mer-text__neutral);--controls__container-row-gap: var(--mer-spacing--md);--controls__group-gap--block: var(--mer-spacing--sm);--controls__group-gap--inline: var(--mer-spacing--md);--field-group__row-gap: var(--mer-spacing--md);--field-group__column-gap: var(--mer-spacing--lg);--field__row-gap: var(--mer-spacing--xs);--field__column-gap: var(--mer-spacing--md);--field-inline-label__margin-block-start: 6px;--mer-accent__primary: var(--mer-color__primary--200);--mer-accent__primary--hover: var(--mer-color__primary--400);--mer-accent__primary--active: var(--mer-color__primary--600);--mer-accent__primary--disabled: var(--mer-color__neutral-gray--500);--mer-accent__primary--destructive: var(--mer-color__message-red--100);--mer-accent__primary--destructive-hover: var(--mer-color__message-red--300);--mer-accent__primary--destructive-active: var(--mer-color__message-red--400);--mer-border-color__primary: var(--mer-accent__primary);--mer-border-color__primary--hover: var(--mer-accent__primary--hover);--mer-border-color__primary--active: var(--mer-accent__primary--active);--mer-border-color__primary--disabled: var(--mer-accent__primary--disabled);--mer-border-color__primary--focused: var(--mer-color__neutral-gray--200);--mer-border-color__dim: var(--mer-color__neutral-gray--550);--mer-border-color__error: var(--mer-color__message-red--100);--mer-border-color__warning: var(--mer-color__message-yellow--100);--mer-border-color__success: var(--mer-color__message-green--100);--mer-border-color__neutral: var(--mer-color__neutral-gray--400);--mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100);--mer-border-color__neutral--active: var(--mer-color__neutral-gray--200);--mer-border-color__on-surface: var(--mer-color__neutral-gray--650);--mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600);--mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550);--mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500);--mer-heading__gray--light: var(--mer-color__neutral-gray--200);--mer-header__background-color: var(--mer-color__neutral-gray--700);--mer-icon__on-surface: var(--mer-color__neutral-gray--200);--mer-icon__on-primary: var(--mer-color__neutral-gray--900);--mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300);--mer-icon__on-primary--active: var(--mer-color__neutral-gray--100);--mer-icon__on-disabled: var(--mer-color__neutral-gray--450);--mer-icon__on-message: var(--mer-color__neutral-gray--700);--mer-icon__on-elevation: var(--mer-color__neutral-gray--100);--mer-icon__primary: var(--mer-accent__primary);--mer-icon__primary--hover: var(--mer-accent__primary--hover);--mer-icon__primary--active: var(--mer-accent__primary--active);--mer-icon__primary--disabled: var(--mer-accent__primary--disabled);--mer-icon__error: var(--mer-color__message-red--100);--mer-icon__warning: var(--mer-color__message-yellow--100);--mer-icon__success: var(--mer-color__message-green--100);--mer-icon__neutral: var(--mer-color__neutral-gray--300);--mer-icon__highlighted: var(--mer-color__neutral-gray--100);--mer-icon__bright: var(--mer-color__neutral-gray--300);--item__bg-color: var(--item__bg-color--enabled);--item__border-color: var(--item__border-color--enabled);--item__color: var(--item__color--enabled);--item__bg-color--enabled: transparent;--item__border-color--enabled: transparent;--item__color--enabled: var(--mer-text__on-elevation);--item__bg-color--hover: var(--mer-color__tinted-primary--5);--item__border-color--hover: transparent;--item__color--hover: var(--mer-color__neutral-gray--100);--item__bg-color--selected: var(--mer-color__tinted-primary--10);--item__border-color--selected: var(--mer-color__tinted-primary--30);--item__color--selected: var(--mer-color__neutral-gray--100);--item__bg-color--selected-hover: var(--mer-color__tinted-primary--10);--item__border-color--selected-hover: var(--mer-color__tinted-primary--20);--item__color--selected-hover: var(--mer-color__neutral-gray--100);--item__bg-color--disabled: transparent;--item__border-color--disabled: transparent;--item__color--disabled: var(--mer-text__primary--disabled);--item__border-width: var(--mer-border__width--sm);--item__border-style: solid;--item__border-radius: var(--mer-border__radius--sm);--item__padding-block: var(--mer-spacing--2xs);--item__padding-inline: var(--mer-spacing--xs);--item__height--regular: var(--mer-spacing--xl);--item__height--large: 36px;--item__font-size: var(--item__font-size--regular);--item__font-size--small: var(--mer-font__size--3xs);--item__font-size--regular: var(--mer-font__size--xs);--item__font-weight: var(--mer-font__weight--regular);--item-header__font-weight: var(--mer-font__weight--semi-bold);--item__gap--regular: var(--mer-spacing--xs);--item__line-height: var(--mer-line-height--tight);--items-container__border-width: var(--mer-border__width--sm);--items-container__border-style: solid;--items-container__bg-color: var(--mer-surface__elevation--01);--items-container__border-color: var(--mer-border-color__on-surface);--items-container__padding-block: var(--mer-spacing--xs);--items-container__padding-inline: var(--mer-spacing--xs);--items-container__border-radius: var(--mer-border__radius--sm);--items-container__box-shadow: var(--mer-box-shadow--01);--items-container__gap: var(--mer-spacing--2xs);--items-container__gap--small: var(--mer-spacing--2xs);--items-container__max-block-size: 300px;--items-container-separator__block-size: var(--mer-border__width--sm);--items-container-separator__inline-size: 100%;--items-container-separator__bg-color: var(--items-container__border-color);--grid-cell__border-color: var(--mer-border-color__on-elevation--01);--grid-cell__border: var(--mer-border__width--sm) solid var(--grid-cell__border-color);--grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color);--grid-cell__padding-block: var(--mer-spacing--xs);--grid-cell__padding-inline: var(--mer-spacing--sm);--tab-caption__bg-color: var(--tab-caption__bg-color--enabled);--tab-caption__color: var(--tab-caption__color--enabled);--tab-caption__border-color: transparent;--tab-caption__border-style: solid;--tab-caption__border-width: var(--mer-border__width--sm);--tab-caption__bg-color--enabled: transparent;--tab-caption__border-color--enabled: transparent;--tab-caption__color--enabled: var(--mer-text__neutral);--tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10);--tab-caption__bg-color--selected-inline: transparent;--tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10);--tab-caption__border-color--selected-inline: var(--mer-accent__primary);--tab-caption__border-color--selected-stack: var( --mer-color__tinted-primary--20 );--tab-caption__color--selected: var(--mer-text__highlighted);--tab-caption__bg-color--disabled: transparent;--tab-caption__border-color--disabled: var( --mer-border-color__on-elevation--01 );--tab-caption__color--disabled: var(--mer-text__primary--disabled);--tab-caption__font-size: var(--mer-font__size--3xs);--tab-caption__font-weight: var(--mer-font__weight--semi-bold);--tab-caption__padding-block: var(--mer-spacing--xs);--tab-caption__padding-inline: var(--mer-spacing--sm);--tab-caption__gap: var(--mer-spacing--xs);--mer-surface: var(--mer-color__neutral-gray--900);--mer-color__surface: var( --mer-surface );--mer-surface__elevation--01: var(--mer-color__neutral-gray--800);--mer-surface__elevation--02: var(--mer-color__neutral-gray--700);--mer-surface__elevation--03: var(--mer-color__neutral-gray--650);--mer-box-shadow--01: 0px 4px 20px 0px #00000040;--mer-text__on-surface: var(--mer-color__neutral-gray--200);--mer-text__on-primary: var(--mer-color__neutral-gray--900);--mer-text__on-primary--active: var(--mer-color__neutral-gray--100);--mer-text__on-disabled: var(--mer-color__neutral-gray--450);--mer-text__on-message: var(--mer-color__neutral-gray--700);--mer-text__on-elevation: var(--mer-color__neutral-gray--100);--mer-text__primary: var(--mer-accent__primary);--mer-text__primary--hover: var(--mer-accent__primary--hover);--mer-text__primary--active: var(--mer-accent__primary--active);--mer-text__primary--disabled: var(--mer-accent__primary--disabled);--mer-text__neutral: var(--mer-color__neutral-gray--300);--mer-text__highlighted: var(--mer-color__neutral-gray--100);--mer-text__success: var(--mer-color__message-green--100);--mer-text__error: var(--mer-color__message-red--100);--mer-text__warning: var(--mer-color__message-yellow--100);--mer-text__complementary: var(--mer-color__neutral-gray--450);--mer-text__bright: var( --mer-color__neutral-gray--100 );--mer-font-family--title: Inter, Helvetica, Arial, sans-serif;--mer-font-family--body: Inter, Helvetica, Arial, sans-serif;--mer-font-family--code: monospace;--mer-font__weight--light: 300;--mer-font__weight--regular: 400;--mer-font__weight--medium: 500;--mer-font__weight--semi-bold: 600;--mer-font__weight--bold: 700;--mer-font__weight--extra-bold: 800;--mer-font__size--4xs: 11px;--mer-font__size--3xs: 12px;--mer-font__size--2xs: 13px;--mer-font__size--xs: 14px;--mer-font__size--sm: 16px;--mer-font__size--md: 20px;--mer-font__size--lg: 24px;--mer-font__size--xl: 36px;--mer-line-height--tight: 1.3;--mer-line-height--regular: 1.4;--mer-line-height--spaced: 1.5;--mer-spacing--3xs: 2px;--mer-spacing--2xs: 4px;--mer-spacing--xs: 8px;--mer-spacing--sm: 12px;--mer-spacing--md: 16px;--mer-spacing--lg: 24px;--mer-spacing--xl: 32px;--mer-spacing--2xl: 40px;--mer-spacing--3xl: 48px;--mer-spacing--4xl: 64px;--mer-timing--super-fast: 100ms;--mer-timing--fast: 200ms;--mer-timing--regular: 500ms;--mer-timing--slow: 1000ms}body{display:grid;grid-template-rows:1fr;min-block-size:100dvh;margin:0;background-color:var(--mer-surface);color:var(--mer-text__on-surface);line-height:var(--mer-body__line-height);font-family:var(--mer-body__font-family);font-size:var(--mer-body__font-size);font-weight:var(--mer-body__font-weight)}input,select,textarea{padding:0;margin:0;background-color:unset;border:unset;color:unset;font:unset;outline:unset}`;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { bundle as all } from "./all.js";
|
|
2
2
|
import { bundle as baseBase } from "./base/base.js";
|
|
3
|
+
import { bundle as baseBaseGlobant } from "./base/base-globant.js";
|
|
3
4
|
import { bundle as baseIcons } from "./base/icons.js";
|
|
4
5
|
import { bundle as chameleonScrollbar } from "./chameleon/scrollbar.js";
|
|
5
6
|
import { bundle as componentsAccordion } from "./components/accordion.js";
|
|
@@ -48,6 +49,11 @@ export const bundleMappings = [
|
|
|
48
49
|
fileDir: "/base",
|
|
49
50
|
transpiledBundle: baseBase
|
|
50
51
|
},
|
|
52
|
+
{
|
|
53
|
+
bundleName: "base/base-globant",
|
|
54
|
+
fileDir: "/base",
|
|
55
|
+
transpiledBundle: baseBaseGlobant
|
|
56
|
+
},
|
|
51
57
|
{
|
|
52
58
|
bundleName: "base/icons",
|
|
53
59
|
fileDir: "/base",
|
|
@@ -56,7 +56,8 @@ export const transpileCssBundleWithPlaceholder = (fileMetadata) => {
|
|
|
56
56
|
// Store the CSS file in a JS file with placeholders for the values
|
|
57
57
|
fs.writeFileSync(path.join(jsOutDir, fileNameJsExt), `export const bundle = \`${transpiledBundle}\`;`);
|
|
58
58
|
printBundleWasTranspiled(filePath);
|
|
59
|
-
if (bundleNameWithBackSlash
|
|
59
|
+
if (bundleNameWithBackSlash.replaceAll("/", "\\") ===
|
|
60
|
+
BASE_BUNDLE_WITH_BACK_SLASH) {
|
|
60
61
|
addBaseGlobantFile(fileMetadata, cssOutDir, jsOutDir);
|
|
61
62
|
}
|
|
62
63
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genexus/mercury",
|
|
3
|
-
"version": "0.13.
|
|
4
|
-
"description": "Mercury is
|
|
3
|
+
"version": "0.13.2",
|
|
4
|
+
"description": "Mercury Design System is a robust and scalable solution designed to improve product development.",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|