@new-ui/effects 0.1.0

package/.github/workflows/ci.yml

@@ -0,0 +1,20 @@
+name: Publish npm package
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.11.0
+      - run: npm install && npm run build
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          access: public
+          

package/README.md

@@ -0,0 +1,34 @@
+# New UI Effects
+
+![](assets/cover.png)
+
+## Install
+Install New UI Effects from your terminal via npm.
+```
+npm i @new-ui/effects
+```
+
+To get started quickly, you can use the CDN files.
+```html
+<!-- Place this at the html head -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/effects@<version>/dist/index.css">
+```
+
+## Usage
+
+```scss
+// Place this at the top of your SCSS/CSS file
+@import "@new-ui/effects";
+```
+
+## Usage Guide
+
+- Tokens defined in the figma file matches variables declared in CSS
+- All classes associated with the design system are prefixed with a global namespace followed by a hyphen: `nu-`
+- 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
+  * `c-` for UI components, such as `.nu-c-h1` or `.nu-c-card`
+  * `l-` for layout-related styles, such as `.nu-l-grid__item` or `.nu-l--two-column`
+  * `u-` for utilities, such as `.nu-u-mb-<spacing-token>` or `.nu-u-margin-bottom-pt2`
+  * `is-` and has- for specific states, such as `.nu-is-active` or `.nu-is-disabled`. These state-based classes - would apply to
+  * `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/dist/index.css

@@ -0,0 +1,2 @@
+:root{--dialog-strong:0px 16px 48px #0000003d;--dialog:0px 4px 8px #0000001f;--content:0px 2px 4px #00000014;--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)}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"mappings":"AEAA,0rCCAA,oDAIA,oCAIA,sCAIA,oCAIA,4CAIA,0CAIA","sources":["index.css","src/index.scss","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\n/*# sourceMappingURL=index.css.map */\n","@import 'variables';\n@import 'utilities';\n@import 'components';",":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

@@ -0,0 +1,29 @@
+{
+  "name": "@new-ui/effects",
+  "version": "0.1.0",
+  "description": "![](cover/cover.png)",
+  "source": "src/index.scss",
+  "main": "dist/index.css",
+  "targets": {
+    "main": false
+  },
+  "scripts": {
+    "watch": "parcel watch",
+    "build": "parcel build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NewDesignFile/effects.git"
+  },
+  "author": "Abhimanyu Rana",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NewDesignFile/effects/issues"
+  },
+  "homepage": "https://github.com/NewDesignFile/effects#readme",
+  "devDependencies": {
+    "@parcel/transformer-sass": "^2.8.3",
+    "autoprefixer": "^10.4.13",
+    "parcel": "^2.8.3"
+  }
+}

package/src/_utilities.scss

@@ -0,0 +1,27 @@
+.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);
+}

package/src/_variables.scss

@@ -0,0 +1,30 @@
+:root {
+  // Shadows
+  --dialog-strong: 0px 16px 48px rgba(0, 0, 0, 0.24);
+  --dialog: 0px 4px 8px rgba(0, 0, 0, 0.12);
+  --content: 0px 2px 4px rgba(0, 0, 0, 0.08);
+  --canvas: 0px 0px 0px rgba(0, 0, 0, 0);
+  --keyboard-key: 0 2px 0px var(--grey4);
+
+  // Focus
+  --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 widths
+  --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);
+}

package/src/index.scss

@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'utilities';
+@import 'components';