@genexus/mercury 0.13.4 → 0.13.6
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 +26 -4
- package/dist/bundles/css/all.css +1 -1
- package/dist/bundles/css/base/base-globant.css +1 -1
- package/dist/bundles/css/base/base.css +1 -1
- package/dist/bundles/css/components/tabular-grid.css +1 -1
- package/dist/bundles/js/all.js +1 -1
- package/dist/bundles/js/base/base-globant.js +1 -1
- package/dist/bundles/js/base/base.js +1 -1
- package/dist/bundles/js/components/tabular-grid.js +1 -1
- package/dist/mercury.scss +31 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ Mercury Design System is a robust and scalable solution designed to improve prod
|
|
|
34
34
|
|
|
35
35
|
- [2.3.3. Copying assets with Vite](#233-copying-assets-with-vite)
|
|
36
36
|
|
|
37
|
-
- [2.4. Register Mercury and Chameleon utilities
|
|
37
|
+
- [2.4. Register Mercury and Chameleon utilities](#24-register-mercury-and-chameleon-utilities)
|
|
38
38
|
|
|
39
39
|
- [2.5. Style the base application](#25-style-the-base-application)
|
|
40
40
|
|
|
@@ -52,7 +52,9 @@ Mercury Design System is a robust and scalable solution designed to improve prod
|
|
|
52
52
|
|
|
53
53
|
- [2.6.3. How to style a component in StencilJS](#263-how-to-style-a-component-in-stenciljs)
|
|
54
54
|
|
|
55
|
-
- [2.7.
|
|
55
|
+
- [2.7. Download the icon paths](#27-download-the-icon-paths)
|
|
56
|
+
|
|
57
|
+
- [2.8. Set the dark and light mode](#28-set-the-darklight-mode)
|
|
56
58
|
|
|
57
59
|
- [3. CSS bundles mapping](#3-css-bundles-mapping)
|
|
58
60
|
|
|
@@ -301,7 +303,7 @@ export default defineConfig({
|
|
|
301
303
|
});
|
|
302
304
|
```
|
|
303
305
|
|
|
304
|
-
### 2.4. Register Mercury and Chameleon utilities
|
|
306
|
+
### 2.4. Register Mercury and Chameleon utilities
|
|
305
307
|
|
|
306
308
|
[Chameleon](https://github.com/genexuslabs/chameleon-controls-library) and Mercury export utilities to facilitate the usage of icons. If you are using Mercury icons, do the following:
|
|
307
309
|
|
|
@@ -447,7 +449,27 @@ export class CustomDialog {
|
|
|
447
449
|
}
|
|
448
450
|
```
|
|
449
451
|
|
|
450
|
-
### 2.7.
|
|
452
|
+
### 2.7. Download the icon paths
|
|
453
|
+
|
|
454
|
+
In the [Register Mercury and Chameleon utilities](#24-register-mercury-and-chameleon-utilities) section we registered utilities to compute the icons in the component. The only remaining thing to do is download the path for the icons. To do this, we need to download a CSS bundle called `base/icons` using the `ch-theme` component.
|
|
455
|
+
|
|
456
|
+
The only difference with the previous sections, is that the bundle is not downloaded using the getBundles utils, instead is computed with the following way:
|
|
457
|
+
|
|
458
|
+
```ts
|
|
459
|
+
import type { ThemeModel } from "@genexus/chameleon-controls-library";
|
|
460
|
+
import { bundleToHashMappings } from "{{ CSS outDir path }}/bundle-to-hash-mappings";
|
|
461
|
+
|
|
462
|
+
const iconsBundle: ThemeModel = [
|
|
463
|
+
{
|
|
464
|
+
name: "base/icons",
|
|
465
|
+
url: `{{ Icons final path }}${bundleToHashMappings["base/icons"]}.css`
|
|
466
|
+
}
|
|
467
|
+
];
|
|
468
|
+
|
|
469
|
+
// Use the iconsBundle in the ch-theme/ChTheme component...
|
|
470
|
+
```
|
|
471
|
+
|
|
472
|
+
### 2.8. Set the dark/light mode
|
|
451
473
|
|
|
452
474
|
Mercury's implementation is designed from the ground up to support both dark and light modes. To set the dark/light mode, add the `light` or `dark` class in the `<html>` tag. This will toggle the color scheme for all components and even the icons!
|
|
453
475
|
|