@new-ui/foundations 0.3.6 → 3.0.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 +63 -16
- package/dist/index.css +2166 -1
- package/dist/index.css.map +1 -1
- package/dist/index.min.css +2 -0
- package/dist/index.min.css.map +1 -0
- package/package.json +38 -11
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# New UI Foundations
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## What is New UI?
|
|
4
4
|
|
|
5
|
-
New UI is a modern, semantic UI framework for building beautiful, accessible websites and
|
|
5
|
+
New UI is a modern, semantic UI framework for building beautiful, accessible websites and applications. It provides the core design foundations you need, including colors, typography, spacing and sizing, reset, and layering and elevations. New UI grows with you, from your first launch to millions of users. It suits makers and teams who value scalability and function.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Install
|
|
8
8
|
|
|
9
9
|
To set up the project, open your terminal and run the following command:
|
|
10
10
|
|
|
@@ -12,17 +12,36 @@ To set up the project, open your terminal and run the following command:
|
|
|
12
12
|
npm i -D @new-ui/foundations
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
**Note:** This command installs all New UI foundation packages, which include reset, colors, effects, spacings, and typography. To install only specific packages, refer to the New UI documentation for instructions.
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
## Import
|
|
18
18
|
|
|
19
|
-
Import the
|
|
19
|
+
Import the compiled CSS in a React app or bundler such as Vite, Next.js, or Create React App. No Sass toolchain is required:
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
// For example, in main.tsx, App.tsx, or Next.js app/layout.tsx
|
|
23
|
+
import '@new-ui/foundations/css'; // Explicit and type-safe. Recommended.
|
|
24
|
+
// import '@new-ui/foundations'; // Bare specifier also works.
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
For SCSS projects, load the bundle with `@use`:
|
|
20
28
|
|
|
21
29
|
```scss
|
|
22
|
-
@use '@new-ui/foundations';
|
|
30
|
+
@use '@new-ui/foundations/scss';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
To load the bundle from a CDN, use the minified build in your HTML `<head>`:
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<link
|
|
37
|
+
rel="stylesheet"
|
|
38
|
+
href="https://cdn.jsdelivr.net/npm/@new-ui/foundations@latest/dist/index.min.css"
|
|
39
|
+
/>
|
|
23
40
|
```
|
|
24
41
|
|
|
25
|
-
|
|
42
|
+
**Note:** The core bundle includes reset, colors, effects, spacings, and typography.
|
|
43
|
+
|
|
44
|
+
## Set the theme
|
|
26
45
|
|
|
27
46
|
Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper element, for example:
|
|
28
47
|
|
|
@@ -30,6 +49,12 @@ Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper e
|
|
|
30
49
|
<html data-new-ui-theme="light"></html>
|
|
31
50
|
```
|
|
32
51
|
|
|
52
|
+
To keep native controls such as form fields, scrollbars, and system UI consistent with dark themes, also set the `color-scheme` meta tag:
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<meta name="color-scheme" content="light dark" />
|
|
56
|
+
```
|
|
57
|
+
|
|
33
58
|
| Available themes | Value |
|
|
34
59
|
| :--------------- | :------------ |
|
|
35
60
|
| Light (Default) | `light` |
|
|
@@ -39,7 +64,29 @@ Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper e
|
|
|
39
64
|
| Dark warm | `dark--warm` |
|
|
40
65
|
| Dark cold | `dark--cold` |
|
|
41
66
|
|
|
42
|
-
|
|
67
|
+
For more skins, install the `@new-ui/themes` package. It maps ready-made themes onto the same semantic color contract. The package provides the following custom themes:
|
|
68
|
+
|
|
69
|
+
| Custom theme | Value | Scheme |
|
|
70
|
+
| :------------------- | :--------------------- | :----- |
|
|
71
|
+
| Dracula | `dracula` | dark |
|
|
72
|
+
| Catppuccin Latte | `catppuccin-latte` | light |
|
|
73
|
+
| Catppuccin Frappé | `catppuccin-frappe` | dark |
|
|
74
|
+
| Catppuccin Macchiato | `catppuccin-macchiato` | dark |
|
|
75
|
+
| Catppuccin Mocha | `catppuccin-mocha` | dark |
|
|
76
|
+
| Tokyo Night | `tokyo-night` | dark |
|
|
77
|
+
| Night Owl | `night-owl` | dark |
|
|
78
|
+
| Ayu Dark | `ayu-dark` | dark |
|
|
79
|
+
| Flexoki Light | `flexoki-light` | light |
|
|
80
|
+
| Flexoki Dark | `flexoki-dark` | dark |
|
|
81
|
+
| Aura | `aura` | dark |
|
|
82
|
+
| Synthwave '84 | `synthwave-84` | dark |
|
|
83
|
+
| Monokai | `monokai` | dark |
|
|
84
|
+
| Sargam Light | `sargam-light` | light |
|
|
85
|
+
| Sargam Dark | `sargam-dark` | dark |
|
|
86
|
+
|
|
87
|
+
To learn how to install and activate these themes, refer to the New UI Themes documentation.
|
|
88
|
+
|
|
89
|
+
## Utility classes and naming convention
|
|
43
90
|
|
|
44
91
|
- All classes associated with the New UI are prefixed with a global namespace followed by a hyphen: `nu-`
|
|
45
92
|
- In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax.
|
|
@@ -51,9 +98,9 @@ Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper e
|
|
|
51
98
|
|
|
52
99
|
---
|
|
53
100
|
|
|
54
|
-
|
|
101
|
+
## Design tokens
|
|
55
102
|
|
|
56
|
-
|
|
103
|
+
### Colors
|
|
57
104
|
|
|
58
105
|
| Background | Role |
|
|
59
106
|
| :-------------------------------- | :---------------------------- |
|
|
@@ -105,7 +152,7 @@ Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper e
|
|
|
105
152
|
| **`--content-success`** | Success message |
|
|
106
153
|
| **`--content-inked`** | Inked text |
|
|
107
154
|
|
|
108
|
-
|
|
155
|
+
### Effects
|
|
109
156
|
|
|
110
157
|
| Shadows | Role |
|
|
111
158
|
| :-------------------- | :-------------------------------------------- |
|
|
@@ -121,7 +168,7 @@ Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper e
|
|
|
121
168
|
| **`--focus-accent`** | Accent focus |
|
|
122
169
|
| **`--focus-inverse`** | Focus inverse |
|
|
123
170
|
|
|
124
|
-
|
|
171
|
+
### Spacings
|
|
125
172
|
|
|
126
173
|
| Token | Source | Size (px/rem) |
|
|
127
174
|
| :------------------- | :------------- | :------------ |
|
|
@@ -134,7 +181,7 @@ Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper e
|
|
|
134
181
|
| **`--spacing-xxl`** | `--spacing-09` | 32 / 2 |
|
|
135
182
|
| **`--spacing-xxxl`** | `--spacing-11` | 48 / 3 |
|
|
136
183
|
|
|
137
|
-
|
|
184
|
+
### Sizing
|
|
138
185
|
|
|
139
186
|
| Token | Source | Size (px/rem) |
|
|
140
187
|
| :---------------------------- | :------------- | :------------ |
|
|
@@ -144,7 +191,7 @@ Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper e
|
|
|
144
191
|
| **`--controls-size-default`** | `--spacing-09` | 32 / 2 |
|
|
145
192
|
| **`--controls-size-small`** | `--spacing-08` | 24 / 1.5 |
|
|
146
193
|
|
|
147
|
-
|
|
194
|
+
### Typography
|
|
148
195
|
|
|
149
196
|
| Heading (Desktop) | Heading (Mobile) | Role |
|
|
150
197
|
| :------------------------- | :------------------------ | :--------- |
|
|
@@ -167,4 +214,4 @@ Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper e
|
|
|
167
214
|
| **`--desktop-helper-text`** | **`--mobile-helper-text`** | Helper text |
|
|
168
215
|
| **`--desktop-code`** | **`--mobile-code`** | Code |
|
|
169
216
|
|
|
170
|
-
> Note
|
|
217
|
+
> **Note:** To set the line height, add the `--lh` prefix to the font size variables. For example, `--desktop-body-xl` becomes `--lh-desktop-body-xl`.
|