@luscii-healthtech/web-ui 30.6.2 → 30.7.0
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 +15 -3
- package/dist/components/Text/Text.d.ts +2 -2
- package/dist/index.development.js +2 -2
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,7 +29,18 @@ function MyComponent() {
|
|
|
29
29
|
|
|
30
30
|
### Fonts
|
|
31
31
|
|
|
32
|
-
WebUI uses the
|
|
32
|
+
WebUI uses the Inter font family for most of its text. This font should be provided by your application if you're using WebUI. The weights needed to show the full gamut of weights in the design system are 400, 500, 600 and 700. One way of doing this is using a Google Fonts link in your HTML file:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
36
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
37
|
+
<link
|
|
38
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
39
|
+
rel="stylesheet"
|
|
40
|
+
/>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
For some headings WebUI uses the Avenir Next LT Pro font family. If you want to use these, you need to make them available in your project. You can do this by declaring the following `@font-face` rules in your CSS:
|
|
33
44
|
|
|
34
45
|
```css
|
|
35
46
|
@font-face {
|
|
@@ -59,6 +70,7 @@ If you don't declare these `@font-face` rules, the font will not be available an
|
|
|
59
70
|
|
|
60
71
|
WebUI exposes a `LocaleProvider`, which is used to make components adjust their data formats to the locale of the application.
|
|
61
72
|
You should wrap your app with the `LocaleProvider`.
|
|
73
|
+
|
|
62
74
|
```tsx
|
|
63
75
|
import { LocaleProvider } from "@luscii-healthtech/web-ui";
|
|
64
76
|
import React from "react";
|
|
@@ -66,17 +78,17 @@ import { createRoot } from "react-dom/client";
|
|
|
66
78
|
import App from "./App";
|
|
67
79
|
|
|
68
80
|
function start() {
|
|
69
|
-
|
|
70
81
|
const root = createRoot(document.querySelector("#root"));
|
|
71
82
|
root.render(
|
|
72
83
|
<LocaleProvider value="nl-NL">
|
|
73
84
|
<App />
|
|
74
|
-
</LocaleProvider
|
|
85
|
+
</LocaleProvider>
|
|
75
86
|
);
|
|
76
87
|
}
|
|
77
88
|
```
|
|
78
89
|
|
|
79
90
|
The locale passed should adhere to the `{language}-{region}` format, for example:
|
|
91
|
+
|
|
80
92
|
- `nl-NL`
|
|
81
93
|
- `en-GB`
|
|
82
94
|
- `pt-PT`
|
|
@@ -15,10 +15,10 @@ export declare const allowedTextStyles: {
|
|
|
15
15
|
readonly strong: `${string} ui-font-semibold ui-antialiased`;
|
|
16
16
|
readonly lg: "";
|
|
17
17
|
readonly "lg-medium": "ui-font-medium ui-antialiased";
|
|
18
|
-
readonly "lg-strong": "ui-font-
|
|
18
|
+
readonly "lg-strong": "ui-font-bold ui-antialiased";
|
|
19
19
|
readonly xl: "ui-text-lg";
|
|
20
20
|
readonly "xl-medium": "ui-font-medium ui-text-lg ui-antialiased";
|
|
21
|
-
readonly "xl-strong": "ui-font-
|
|
21
|
+
readonly "xl-strong": "ui-font-bold ui-text-lg ui-antialiased";
|
|
22
22
|
};
|
|
23
23
|
export declare const allowedColors: {
|
|
24
24
|
readonly base: "ui-text-slate-800";
|
|
@@ -961,10 +961,10 @@ const allowedTextStyles = {
|
|
|
961
961
|
strong: `${responsiveTextSizeVariants.base} ui-font-semibold ui-antialiased`,
|
|
962
962
|
lg: "",
|
|
963
963
|
"lg-medium": "ui-font-medium ui-antialiased",
|
|
964
|
-
"lg-strong": "ui-font-
|
|
964
|
+
"lg-strong": "ui-font-bold ui-antialiased",
|
|
965
965
|
xl: "ui-text-lg",
|
|
966
966
|
"xl-medium": "ui-font-medium ui-text-lg ui-antialiased",
|
|
967
|
-
"xl-strong": "ui-font-
|
|
967
|
+
"xl-strong": "ui-font-bold ui-text-lg ui-antialiased"
|
|
968
968
|
};
|
|
969
969
|
const allowedColors = {
|
|
970
970
|
base: "ui-text-slate-800",
|