@new-ui/colors 1.2.0 → 1.2.1-beta.1
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/.github/workflows/ci.yml +0 -0
- package/CONTRIBUTING.md +6 -0
- package/README.md +14 -35
- package/assets/cover.png +0 -0
- package/dist/main.css +1350 -0
- package/dist/main.css.map +1 -0
- package/dist/main.js +6 -0
- package/dist/main.js.map +1 -0
- package/package.json +8 -4
- package/parcel.config.js +3 -0
- package/src/index.js +1 -0
- package/src/scss/_theme-light--cold.scss +123 -0
- package/src/scss/_theme-light--warm.scss +123 -0
- package/src/scss/_theme-light.scss +123 -0
- package/src/scss/_utilities.scss +304 -0
- package/src/scss/index.scss +4 -0
- package/build-tokens.js +0 -34
- package/dist/themes/dark-cold.css +0 -184
- package/dist/themes/dark-warm.css +0 -184
- package/dist/themes/dark.css +0 -184
- package/dist/themes/light-cold.css +0 -184
- package/dist/themes/light-warm.css +0 -184
- package/dist/themes/light.css +0 -184
- package/help/cover.png +0 -0
- package/tokens/global/global.json +0 -515
- package/tokens/themes/dark/dark.json +0 -198
- package/tokens/themes/dark-cold/dark.json +0 -198
- package/tokens/themes/dark-warm/dark.json +0 -198
- package/tokens/themes/light/light.json +0 -198
- package/tokens/themes/light-cold/light.json +0 -198
- package/tokens/themes/light-warm/light.json +0 -198
|
File without changes
|
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
All classes associated with the design system are prefixed with a global namespace, which is the Company Name followed by a hyphen: `nu-`
|
|
2
|
+
`c-` for UI components, such as `.nu-c-card` or `.nu-c-header`
|
|
3
|
+
`l-` for layout-related styles, such as `.nu-l-grid__item` or `.nu-l--two-column`
|
|
4
|
+
`u-` for utilities, such as `.nu-u-margin-bottom-double` or `.nu-u-margin-bottom-double`
|
|
5
|
+
`is-` and `has-` for specific states, such as `.nu-is-active` or `.nu-is-disabled`. These state-based classes would apply to
|
|
6
|
+
`js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these js- classes would toggle state-based classes to an element.
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
## Install
|
|
4
4
|
Install New UI Colors from your terminal via npm. Current version is 1.2.0
|
|
@@ -8,49 +8,28 @@ npm i @new-ui/colors
|
|
|
8
8
|
```
|
|
9
9
|
|
|
10
10
|
To get started quickly, you can use the CDN files.
|
|
11
|
-
|
|
12
|
-
Light themes:
|
|
13
|
-
```html
|
|
14
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/light.min.css">
|
|
15
|
-
```
|
|
16
|
-
```html
|
|
17
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/light-warm.min.css">
|
|
18
|
-
```
|
|
11
|
+
|
|
19
12
|
```html
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
<!-- Place this at the html head -->
|
|
14
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors/dist/main.css">
|
|
22
15
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
```html
|
|
28
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/dark-warm.min.css">
|
|
29
|
-
```
|
|
30
|
-
```html
|
|
31
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.2.0/dist/themes/dark-cold.min.css">
|
|
16
|
+
<!-- Add this attribute to html wrapper -->
|
|
17
|
+
<html data-new-ui-theme="light">
|
|
18
|
+
...
|
|
32
19
|
```
|
|
33
20
|
|
|
21
|
+
### Available themes
|
|
22
|
+
- light
|
|
23
|
+
- light--warm
|
|
24
|
+
- light--cold
|
|
25
|
+
|
|
34
26
|
## Build
|
|
35
27
|
|
|
36
|
-
To build
|
|
28
|
+
To build css
|
|
37
29
|
|
|
38
30
|
```
|
|
39
31
|
npm install
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
Light themes:
|
|
43
|
-
```
|
|
44
|
-
npm run build:tokens -- --theme=light
|
|
45
|
-
npm run build:tokens -- --theme=light-warm
|
|
46
|
-
npm run build:tokens -- --theme=light-cold
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
Dark themes:
|
|
50
|
-
```
|
|
51
|
-
npm run build:tokens -- --theme=dark
|
|
52
|
-
npm run build:tokens -- --theme=dark-warm
|
|
53
|
-
npm run build:tokens -- --theme=dark-cold
|
|
32
|
+
npm run build
|
|
54
33
|
```
|
|
55
34
|
|
|
56
35
|
## Recommended Defaults
|
package/assets/cover.png
ADDED
|
Binary file
|