@new-ui/effects 0.1.0 → 0.1.3
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 +5 -13
- package/dist/index.css.map +1 -1
- package/package.json +6 -6
- package/.github/workflows/ci.yml +0 -20
package/README.md
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
# New UI Effects
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
3
|
## Install
|
|
6
4
|
Install New UI Effects from your terminal via npm.
|
|
5
|
+
|
|
7
6
|
```
|
|
8
7
|
npm i @new-ui/effects
|
|
9
8
|
```
|
|
10
9
|
|
|
11
10
|
To get started quickly, you can use the CDN files.
|
|
11
|
+
|
|
12
12
|
```html
|
|
13
13
|
<!-- Place this at the html head -->
|
|
14
14
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/effects@<version>/dist/index.css">
|
|
@@ -21,14 +21,6 @@ To get started quickly, you can use the CDN files.
|
|
|
21
21
|
@import "@new-ui/effects";
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
##
|
|
25
|
-
|
|
26
|
-
-
|
|
27
|
-
- All classes associated with the design system are prefixed with a global namespace followed by a hyphen: `nu-`
|
|
28
|
-
- 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
|
|
29
|
-
* `c-` for UI components, such as `.nu-c-h1` or `.nu-c-card`
|
|
30
|
-
* `l-` for layout-related styles, such as `.nu-l-grid__item` or `.nu-l--two-column`
|
|
31
|
-
* `u-` for utilities, such as `.nu-u-mb-<spacing-token>` or `.nu-u-margin-bottom-pt2`
|
|
32
|
-
* `is-` and has- for specific states, such as `.nu-is-active` or `.nu-is-disabled`. These state-based classes - would apply to
|
|
33
|
-
* `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.
|
|
34
|
-
|
|
24
|
+
## Guides
|
|
25
|
+
- [Get a Figma copy](https://www.figma.com/community/file/1325646289622213496/new-ui)
|
|
26
|
+
- [Read our effects guide](https://new-ui.com/docs/foundations/effects)
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"ACAA,0rCCAA,oDAIA,oCAIA,sCAIA,oCAIA,4CAIA,0CAIA","sources":["index.css","src/_variables.scss","src/_utilities.scss"],"sourcesContent":[":root {\n --dialog-strong: 0px 16px 48px #0000003d;\n --dialog: 0px 4px 8px #0000001f;\n --content: 0px 2px 4px #00000014;\n --canvas: 0px 0px 0px #0000;\n --keyboard-key: 0 2px 0px var(--grey4);\n --focus-default: 0px 0px 0px 2px var(--blue5);\n --focus-accent: 0px 0px 0px 2px var(--blue8);\n --focus-inverse: 0px 0px 0px 2px var(--white);\n --border-muted-width-01: inset 0px 0px 0px 1px var(--grey2);\n --border-muted-width-02: inset 0px 0px 0px 2px var(--grey2);\n --border-muted-width-04: inset 0px 0px 0px 4px var(--grey2);\n --border-width-01: inset 0px 0px 0px 1px var(--grey4);\n --border-width-02: inset 0px 0px 0px 2px var(--grey4);\n --border-width-04: inset 0px 0px 0px 4px var(--grey4);\n --border-strong-muted-width-01: inset 0px 0px 0px 1px var(--grey6);\n --border-strong-muted-width-02: inset 0px 0px 0px 2px var(--grey6);\n --border-strong-muted-width-04: inset 0px 0px 0px 4px var(--grey6);\n --border-bottom-muted-width-01: inset 0px -1px 0px var(--grey2);\n --border-bottom-width-01: inset 0px -1px 0px var(--grey4);\n --border-bottom-strong-width-01: inset 0px -1px 0px var(--grey6);\n --border-bottom-muted-width-02: inset 0px -2px 0px var(--grey2);\n --border-bottom-width-02: inset 0px -2px 0px var(--grey4);\n --border-bottom-strong-width-02: inset 0px -2px 0px var(--grey6);\n}\n\n.sh-dialog--strong {\n box-shadow: var(--dialog--strong);\n}\n\n.sh-dialog {\n box-shadow: var(--dialog);\n}\n\n.sh-content {\n box-shadow: var(--content);\n}\n\n.sh-canvas {\n box-shadow: var(--canvas);\n}\n\n.sh-default {\n box-shadow: var(--focus-default);\n}\n\n.sh-accent {\n box-shadow: var(--focus-accent);\n}\n\n.sh-inverse {\n box-shadow: var(--focus-inverse);\n}\n/*# sourceMappingURL=index.css.map */\n",":root {\n // Shadows\n --dialog-strong: 0px 16px 48px rgba(0, 0, 0, 0.24);\n --dialog: 0px 4px 8px rgba(0, 0, 0, 0.12);\n --content: 0px 2px 4px rgba(0, 0, 0, 0.08);\n --canvas: 0px 0px 0px rgba(0, 0, 0, 0);\n --keyboard-key: 0 2px 0px var(--grey4);\n\n // Focus\n --focus-default: 0px 0px 0px 2px var(--blue5);\n --focus-accent: 0px 0px 0px 2px var(--blue8);\n --focus-inverse: 0px 0px 0px 2px var(--white);\n\n // Border widths\n --border-muted-width-01: inset 0px 0px 0px 1px var(--grey2);\n --border-muted-width-02: inset 0px 0px 0px 2px var(--grey2);\n --border-muted-width-04: inset 0px 0px 0px 4px var(--grey2);\n --border-width-01: inset 0px 0px 0px 1px var(--grey4);\n --border-width-02: inset 0px 0px 0px 2px var(--grey4);\n --border-width-04: inset 0px 0px 0px 4px var(--grey4);\n --border-strong-muted-width-01: inset 0px 0px 0px 1px var(--grey6);\n --border-strong-muted-width-02: inset 0px 0px 0px 2px var(--grey6);\n --border-strong-muted-width-04: inset 0px 0px 0px 4px var(--grey6);\n --border-bottom-muted-width-01: inset 0px -1px 0px var(--grey2);\n --border-bottom-width-01: inset 0px -1px 0px var(--grey4);\n --border-bottom-strong-width-01: inset 0px -1px 0px var(--grey6);\n --border-bottom-muted-width-02: inset 0px -2px 0px var(--grey2);\n --border-bottom-width-02: inset 0px -2px 0px var(--grey4);\n --border-bottom-strong-width-02: inset 0px -2px 0px var(--grey6);\n}",".sh-dialog--strong {\n box-shadow: var(--dialog--strong);\n}\n\n.sh-dialog {\n box-shadow: var(--dialog);\n}\n\n.sh-content {\n box-shadow: var(--content);\n}\n\n.sh-canvas {\n box-shadow: var(--canvas);\n}\n\n.sh-default {\n box-shadow: var(--focus-default);\n}\n\n.sh-accent {\n box-shadow: var(--focus-accent);\n}\n\n.sh-inverse {\n box-shadow: var(--focus-inverse);\n}"],"names":[],"version":3,"file":"index.css.map"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@new-ui/effects",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "Layering, elevations, and effects styles.",
|
|
5
5
|
"source": "src/index.scss",
|
|
6
6
|
"main": "dist/index.css",
|
|
7
7
|
"targets": {
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
"type": "git",
|
|
16
16
|
"url": "git+https://github.com/NewDesignFile/effects.git"
|
|
17
17
|
},
|
|
18
|
-
"author": "
|
|
18
|
+
"author": "@planetabhi",
|
|
19
19
|
"license": "MIT",
|
|
20
20
|
"bugs": {
|
|
21
21
|
"url": "https://github.com/NewDesignFile/effects/issues"
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/NewDesignFile/effects#readme",
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@parcel/transformer-sass": "^2.
|
|
26
|
-
"autoprefixer": "^10.4.
|
|
27
|
-
"parcel": "^2.
|
|
25
|
+
"@parcel/transformer-sass": "^2.12.0",
|
|
26
|
+
"autoprefixer": "^10.4.20",
|
|
27
|
+
"parcel": "^2.12.0"
|
|
28
28
|
}
|
|
29
29
|
}
|
package/.github/workflows/ci.yml
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
name: Publish npm package
|
|
2
|
-
on:
|
|
3
|
-
push:
|
|
4
|
-
branches:
|
|
5
|
-
- main
|
|
6
|
-
|
|
7
|
-
jobs:
|
|
8
|
-
publish:
|
|
9
|
-
runs-on: ubuntu-latest
|
|
10
|
-
steps:
|
|
11
|
-
- uses: actions/checkout@v3
|
|
12
|
-
- uses: actions/setup-node@v3
|
|
13
|
-
with:
|
|
14
|
-
node-version: 18.11.0
|
|
15
|
-
- run: npm install && npm run build
|
|
16
|
-
- uses: JS-DevTools/npm-publish@v1
|
|
17
|
-
with:
|
|
18
|
-
token: ${{ secrets.NPM_TOKEN }}
|
|
19
|
-
access: public
|
|
20
|
-
|