@new-ui/effects 0.1.0 → 0.1.4
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 -14
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +6 -6
- package/src/_utilities.scss +2 -2
- package/src/_variables.scss +5 -3
- package/src/index.scss +2 -3
- package/.github/workflows/ci.yml +0 -20
- package/assets/cover.png +0 -0
- package/src/_components.scss +0 -0
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">
|
|
@@ -18,17 +18,8 @@ To get started quickly, you can use the CDN files.
|
|
|
18
18
|
|
|
19
19
|
```scss
|
|
20
20
|
// Place this at the top of your SCSS/CSS file
|
|
21
|
-
@
|
|
21
|
+
@use "@new-ui/effects";
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
##
|
|
25
|
-
|
|
26
|
-
- Tokens defined in the figma file matches variables declared in CSS
|
|
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
|
+
- [Read our effects guide](https://new-ui.com/docs/foundations/effects)
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--dialog-strong:0px 16px 48px #
|
|
1
|
+
:root{--dialog-strong:0px 16px 48px 0px #1616163d;--dialog:0px 0px 0px 1px #1616161f,0px 12px 30px 0px #16161629,0px 2px 3px 0px #1616161f;--content:0px 2px 3px 0px #16161614;--canvas:0px 0px 0px #0000;--keyboard-key:0 2px 0px var(--grey4);--focus-default:0px 0px 0px 2px var(--blue5);--focus-accent:0px 0px 0px 2px var(--blue8);--focus-inverse:0px 0px 0px 2px var(--white);--border-muted-width-01:inset 0px 0px 0px 1px var(--grey2);--border-muted-width-02:inset 0px 0px 0px 2px var(--grey2);--border-muted-width-04:inset 0px 0px 0px 4px var(--grey2);--border-width-01:inset 0px 0px 0px 1px var(--grey4);--border-width-02:inset 0px 0px 0px 2px var(--grey4);--border-width-04:inset 0px 0px 0px 4px var(--grey4);--border-strong-muted-width-01:inset 0px 0px 0px 1px var(--grey6);--border-strong-muted-width-02:inset 0px 0px 0px 2px var(--grey6);--border-strong-muted-width-04:inset 0px 0px 0px 4px var(--grey6);--border-bottom-muted-width-01:inset 0px -1px 0px var(--grey2);--border-bottom-width-01:inset 0px -1px 0px var(--grey4);--border-bottom-strong-width-01:inset 0px -1px 0px var(--grey6);--border-bottom-muted-width-02:inset 0px -2px 0px var(--grey2);--border-bottom-width-02:inset 0px -2px 0px var(--grey4);--border-bottom-strong-width-02:inset 0px -2px 0px var(--grey6)}.sh-dialog--strong{box-shadow:var(--dialog-strong)}.sh-dialog{box-shadow:var(--dialog)}.sh-content{box-shadow:var(--content)}.sh-canvas{box-shadow:var(--canvas)}.sh-default{box-shadow:var(--focus-default)}.sh-accent{box-shadow:var(--focus-accent)}.sh-inverse{box-shadow:var(--focus-inverse)}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"ACAA,4vCCAA,mDAIA,oCAIA,sCAIA,oCAIA,4CAIA,0CAIA","sources":["index.css","../../New%20Packages/effects/src/_variables.scss","../../New%20Packages/effects/src/_utilities.scss"],"sourcesContent":[":root {\n --dialog-strong: 0px 16px 48px 0px #1616163d;\n --dialog: 0px 0px 0px 1px #1616161f, 0px 12px 30px 0px #16161629, 0px 2px 3px 0px #1616161f;\n --content: 0px 2px 3px 0px #16161614;\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",null,null],"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.4",
|
|
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.13.3",
|
|
26
|
+
"autoprefixer": "^10.4.20",
|
|
27
|
+
"parcel": "^2.13.3"
|
|
28
28
|
}
|
|
29
29
|
}
|
package/src/_utilities.scss
CHANGED
package/src/_variables.scss
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
// Shadows
|
|
3
|
-
--dialog-strong: 0px 16px 48px rgba(
|
|
4
|
-
--dialog: 0px
|
|
5
|
-
|
|
3
|
+
--dialog-strong: 0px 16px 48px 0px rgba(22, 22, 22, 0.24);
|
|
4
|
+
--dialog: 0px 0px 0px 1px rgba(22, 22, 22, 0.12),
|
|
5
|
+
0px 12px 30px 0px rgba(22, 22, 22, 0.16),
|
|
6
|
+
0px 2px 3px 0px rgba(22, 22, 22, 0.12);
|
|
7
|
+
--content: 0px 2px 3px 0px rgba(22, 22, 22, 0.08);
|
|
6
8
|
--canvas: 0px 0px 0px rgba(0, 0, 0, 0);
|
|
7
9
|
--keyboard-key: 0 2px 0px var(--grey4);
|
|
8
10
|
|
package/src/index.scss
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
@
|
|
2
|
-
@
|
|
3
|
-
@import 'components';
|
|
1
|
+
@use 'variables';
|
|
2
|
+
@use 'utilities';
|
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
|
-
|
package/assets/cover.png
DELETED
|
Binary file
|
package/src/_components.scss
DELETED
|
File without changes
|