@nanonansen2/nook-ui - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/components/NookProvider/index.js

@@ -1,34 +0,25 @@
-import { jsx as c } from "react/jsx-runtime";
-import { createContext as d, useState as l, useCallback as h, useEffect as i } from "react";
-import { generateTheme as n, generateThemeVariables as u } from "../../theme/generateTheme.js";
-const p = d(void 0), x = ({
-  children: s,
-  theme: t = {}
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as s, useState as p, useCallback as c } from "react";
+import { generateTheme as t } from "../../theme/generateTheme.js";
+const d = s(void 0), f = ({
+  children: o,
+  theme: e = {}
 }) => {
-  const [o, a] = l(
-    () => n(t)
-  ), m = h(
-    (e) => {
-      a(
-        () => n({
-          ...t,
-          ...e
+  const [r, m] = p(
+    () => t(e)
+  ), n = c(
+    (a) => {
+      m(
+        () => t({
+          ...e,
+          ...a
         })
       );
     },
-    [t]
+    [e]
   );
-  return i(() => {
-    const e = u(o);
-    console.log("cssVars", e);
-    const r = document.createElement("style");
-    return r.textContent = `:root {
-${e}
-}`, document.head.appendChild(r), () => {
-      document.head.removeChild(r);
-    };
-  }, [o]), /* @__PURE__ */ c(p.Provider, { value: { theme: o, updateTheme: m }, children: s });
+  return /* @__PURE__ */ i(d.Provider, { value: { theme: r, updateTheme: n }, children: o });
 };
 export {
-  x as NookProvider
+  f as NookProvider
 };

dist/lib/theme/types.d.ts

@@ -1,11 +0,58 @@
-export interface ThemeTokens {
-    colorForegroundNeutral: string;
-    colorBackgroundPrimary: string;
-    spacing: {
-        unit: {
-            base: {
-                px: number;
-            };
-        };
+export type ThemeName = "nook";
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export interface SpacingUnit {
+    value: number;
+}
+export interface SpacingMultipliers {
+    base: SpacingUnit;
+    x1: SpacingUnit;
+    x2: SpacingUnit;
+    x3: SpacingUnit;
+    x4: SpacingUnit;
+    x5: SpacingUnit;
+    x6: SpacingUnit;
+    x7: SpacingUnit;
+    x8: SpacingUnit;
+    x9: SpacingUnit;
+    x10: SpacingUnit;
+    x12: SpacingUnit;
+    x16: SpacingUnit;
+    x20: SpacingUnit;
+}
+export interface ThemeTokensValues {
+    color: {
+        foregroundNeutral: string;
+        foregroundNeutralFaded: string;
+        foregroundDisabled: string;
+        foregroundPrimary: string;
+        foregroundCritical: string;
+        foregroundPositive: string;
+        borderNeutral: string;
+        borderNeutralFaded: string;
+        borderDisabled: string;
+        borderPrimary: string;
+        borderPrimaryFaded: string;
+        borderCritical: string;
+        borderCriticalFaded: string;
+        borderPositive: string;
+        borderPositiveFaded: string;
+        backgroundNeutral: string;
+        backgroundNeutralFaded: string;
+        backgroundDisabled: string;
+        backgroundDisabledFaded: string;
+        backgroundPrimary: string;
+        backgroundPrimaryFaded: string;
+        backgroundCritical: string;
+        backgroundCriticalFaded: string;
+        backgroundPositive: string;
+        backgroundPositiveFaded: string;
+        backgroundPage: string;
+        backgroundPageFaded: string;
+        backgroundElevationBase: string;
+        backgroundElevationRaised: string;
+        backgroundElevationOverlay: string;
     };
+    spacing: SpacingMultipliers;
     radius: {
@@ -31,22 +78,55 @@ small: {
     fontWeight: {
-        regular: {
+        regular?: {
             weight: number;
         };
-        medium: {
+        medium?: {
             weight: number;
         };
-        semibold: {
+        semibold?: {
             weight: number;
         };
-        bold: {
+        bold?: {
             weight: number;
         };
-        extrabold: {
+        extrabold?: {
             weight: number;
         };
-        black: {
+        black?: {
             weight: number;
         };
     };
+    font: {
+        "title-1": FontDefinition;
+        "title-2": FontDefinition;
+        "title-3": FontDefinition;
+        "title-4": FontDefinition;
+        "title-5": FontDefinition;
+        "title-6": FontDefinition;
+        "featured-1": FontDefinition;
+        "featured-2": FontDefinition;
+        "featured-3": FontDefinition;
+        "body-1": FontDefinition;
+        "body-2": FontDefinition;
+        "body-3": FontDefinition;
+        "caption-1": FontDefinition;
+        "caption-2": FontDefinition;
+    };
 }
-export type PartialThemeTokens = Partial<ThemeTokens>;
+interface FontDefinition {
+    fontSize: {
+        px: number;
+    };
+    lineHeight: {
+        px: number;
+    };
+    letterSpacing: {
+        px: number;
+    };
+    fontWeightToken: keyof ThemeTokens["nook"]["fontWeight"];
+    fontFamilyToken: keyof ThemeTokens["nook"]["fontFamily"];
+}
+export type ThemeTokens = {
+    [key in ThemeName]: ThemeTokensValues;
+};
+export type PartialThemeTokens = DeepPartial<ThemeTokens>;
+export {};

dist/theme/base-theme.js

@@ -1,53 +0,198 @@
-const e = {
-  colorForegroundNeutral: "#333333",
-  colorBackgroundPrimary: "#FFFFFF",
-  spacing: {
-    unit: {
-      base: {
+function t(e) {
+  return {
+    base: { value: e },
+    x1: { value: e * 1 },
+    x2: { value: e * 2 },
+    x3: { value: e * 3 },
+    x4: { value: e * 4 },
+    x5: { value: e * 5 },
+    x6: { value: e * 6 },
+    x7: { value: e * 7 },
+    x8: { value: e * 8 },
+    x9: { value: e * 9 },
+    x10: { value: e * 10 },
+    x12: { value: e * 12 },
+    x16: { value: e * 16 },
+    x20: { value: e * 20 }
+  };
+}
+const i = {
+  nook: {
+    color: {
+      foregroundNeutral: "#333333",
+      foregroundNeutralFaded: "#666666",
+      foregroundDisabled: "#999999",
+      foregroundPrimary: "#FFFFFF",
+      foregroundCritical: "#FF0000",
+      foregroundPositive: "#00FF00",
+      borderNeutral: "#CCCCCC",
+      borderNeutralFaded: "#EEEEEE",
+      borderDisabled: "#DDDDDD",
+      borderPrimary: "#000000",
+      borderPrimaryFaded: "#333333",
+      borderCritical: "#FF0000",
+      borderCriticalFaded: "#FFEEEE",
+      borderPositive: "#00FF00",
+      borderPositiveFaded: "#EEFFEE",
+      backgroundNeutral: "#FFFFFF",
+      backgroundNeutralFaded: "#F5F5F5",
+      backgroundDisabled: "#F5F5F5",
+      backgroundDisabledFaded: "#EEEEEE",
+      backgroundPrimary: "#FFFFFF",
+      backgroundPrimaryFaded: "#F5F5F5",
+      backgroundCritical: "#FF0000",
+      backgroundCriticalFaded: "#FFEEEE",
+      backgroundPositive: "#00FF00",
+      backgroundPositiveFaded: "#EEFFEE",
+      backgroundPage: "#FFFFFF",
+      backgroundPageFaded: "#F5F5F5",
+      backgroundElevationBase: "#FFFFFF",
+      backgroundElevationRaised: "#FFFFFF",
+      backgroundElevationOverlay: "#FFFFFF"
+    },
+    spacing: t(4),
+    // Using 4 as base unit
+    radius: {
+      small: {
         px: 4
+      },
+      medium: {
+        px: 8
+      },
+      large: {
+        px: 16
       }
-    }
-  },
-  radius: {
-    small: {
-      px: 4
     },
-    medium: {
-      px: 8
+    fontFamily: {
+      body: {
+        family: "sans-serif"
+      },
+      title: {
+        family: "sans-serif"
+      }
     },
-    large: {
-      px: 16
-    }
-  },
-  fontFamily: {
-    body: {
-      family: "sans-serif"
+    fontWeight: {
+      regular: {
+        weight: 400
+      },
+      medium: {
+        weight: 500
+      },
+      semibold: {
+        weight: 600
+      },
+      bold: {
+        weight: 700
+      },
+      extrabold: {
+        weight: 800
+      },
+      black: {
+        weight: 900
+      }
     },
-    title: {
-      family: "sans-serif"
+    font: {
+      "title-1": {
+        fontSize: { px: 24 },
+        lineHeight: { px: 32 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "title-2": {
+        fontSize: { px: 18 },
+        lineHeight: { px: 24 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "title-3": {
+        fontSize: { px: 16 },
+        lineHeight: { px: 24 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "title-4": {
+        fontSize: { px: 14 },
+        lineHeight: { px: 20 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "title-5": {
+        fontSize: { px: 12 },
+        lineHeight: { px: 16 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "title-6": {
+        fontSize: { px: 10 },
+        lineHeight: { px: 16 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "featured-1": {
+        fontSize: { px: 16 },
+        lineHeight: { px: 24 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "featured-2": {
+        fontSize: { px: 14 },
+        lineHeight: { px: 20 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "featured-3": {
+        fontSize: { px: 12 },
+        lineHeight: { px: 16 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "semibold",
+        fontFamilyToken: "title"
+      },
+      "body-1": {
+        fontSize: { px: 16 },
+        lineHeight: { px: 24 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "regular",
+        fontFamilyToken: "body"
+      },
+      "body-2": {
+        fontSize: { px: 14 },
+        lineHeight: { px: 20 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "regular",
+        fontFamilyToken: "body"
+      },
+      "body-3": {
+        fontSize: { px: 12 },
+        lineHeight: { px: 16 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "regular",
+        fontFamilyToken: "body"
+      },
+      "caption-1": {
+        fontSize: { px: 10 },
+        lineHeight: { px: 16 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "regular",
+        fontFamilyToken: "body"
+      },
+      "caption-2": {
+        fontSize: { px: 8 },
+        lineHeight: { px: 12 },
+        letterSpacing: { px: 0 },
+        fontWeightToken: "regular",
+        fontFamilyToken: "body"
+      }
     }
-  },
-  fontWeight: {
-    regular: {
-      weight: 400
-    },
-    medium: {
-      weight: 500
-    },
-    semibold: {
-      weight: 600
-    },
-    bold: {
-      weight: 700
-    },
-    extrabold: {
-      weight: 800
-    },
-    black: {
-      weight: 900
-    }
   }
 };
 export {
-  e as baseTheme
+  i as baseTheme
 };

dist/theme/generateTheme.js

@@ -1,15 +0,37 @@
-import { baseTheme as c } from "./base-theme.js";
-function f(t, o) {
-  if (!o) return t;
-  const n = { ...t };
-  return Object.entries(o).forEach(([r, e]) => {
-    const i = t[r];
-    e && i && typeof e == "object" && typeof i == "object" ? n[r] = f(i, e) : e !== void 0 && (n[r] = e);
-  }), n;
+import { baseTheme as s } from "./base-theme.js";
+function c(i, r) {
+  if (!r) return i;
+  const o = { ...i };
+  return Object.entries(r).forEach(([t, n]) => {
+    const f = i[t];
+    n && f && typeof n == "object" && typeof f == "object" ? o[t] = c(
+      f,
+      n
+    ) : n !== void 0 && (o[t] = n);
+  }), o;
 }
-function s(t, o = "") {
-  return Object.entries(t).reduce(
-    (n, [r, e]) => {
-      const i = o ? `${o}-${r}` : r;
-      return e && typeof e == "object" ? Object.assign(n, s(e, i)) : n[i] = e, n;
+function e(i, r) {
+  const o = {};
+  return r.color && Object.entries(r.color).forEach(([t, n]) => {
+    o[`${i}-color-${t}`] = n;
+  }), r.spacing && Object.entries(r.spacing).forEach(([t, n]) => {
+    o[`${i}-spacing-${t}`] = `${n.value}px`;
+  }), r.radius && Object.entries(r.radius).forEach(([t, n]) => {
+    o[`${i}-radius-${t}`] = `${n.px}px`;
+  }), r.fontFamily && Object.entries(r.fontFamily).forEach(([t, n]) => {
+    o[`${i}-font-family-${t}`] = n.family;
+  }), r.fontWeight && Object.entries(r.fontWeight).forEach(([t, n]) => {
+    n && (o[`${i}-font-weight-${t}`] = `${n.weight}`);
+  }), r.font && Object.entries(r.font).forEach(([t, n]) => {
+    o[`${i}-font-size-${t}`] = `${n.fontSize.px}px`, o[`${i}-line-height-${t}`] = `${n.lineHeight.px}px`, o[`${i}-letter-spacing-${t}`] = `${n.letterSpacing.px}px`, o[`${i}-font-weight-${t}`] = `var(--${i}-font-weight-${n.fontWeightToken})`, o[`${i}-font-family-${t}`] = `var(--${i}-font-family-${n.fontFamilyToken})`;
+  }), o;
+}
+function g(i = {}) {
+  return Object.entries(s).reduce(
+    (o, [t, n]) => {
+      const f = t, $ = i[f];
+      return o[f] = c(
+        n,
+        $ || {}
+      ), o;
     },
@@ -19,13 +41,16 @@ {}
 }
-function j(t = {}) {
-  return f(c, t);
-}
-function p(t) {
-  const o = s(t);
-  return Object.entries(o).map(([n, r]) => `--${n}: ${r};`).join(`
+function b(i) {
+  const r = Object.entries(i).reduce(
+    (o, [t, n]) => {
+      const f = e(t, n);
+      return { ...o, ...f };
+    },
+    {}
+  );
+  return Object.entries(r).map(([o, t]) => `--${o}: ${t};`).join(`
 `);
 }
 export {
-  j as generateTheme,
-  p as generateThemeVariables
+  g as generateTheme,
+  b as generateThemeVariables
 };

package.json

 {
   "name": "@nanonansen2/nook-ui",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
@@ -14,3 +14,4 @@ "exports": {
   "files": [
-    "dist"
+    "dist",
+    "dist/cli/cli.js"
   ],
@@ -22,3 +23,5 @@ "sideEffects": [
     "dev": "vite",
-    "build": "tsc -b ./tsconfig.lib.json && vite build",
+    "build": "npm run build:lib && npm run build:cli",
+    "build:lib": "tsc -b ./tsconfig.lib.json && vite build",
+    "build:cli": "vite build --config cli.config.ts",
     "lint": "eslint .",
@@ -28,3 +31,4 @@ "preview": "vite preview",
     "prepare": "husky",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "build:themes": "tsx lib/theme/cli.ts theming --output src/themes"
   },
@@ -60,3 +64,4 @@ "peerDependencies": {
     "vite-plugin-dts": "^4.3.0",
-    "vite-plugin-lib-inject-css": "^2.1.1"
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "tsx": "^4.7.1"
   },
@@ -67,3 +72,9 @@ "config": {
     }
+  },
+  "bin": {
+    "nook": "dist/cli/cli.js"
+  },
+  "dependencies": {
+    "commander": "^11.1.0"
   }
 }

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49615

increased by68.03%

Number of package files

23

increased by15%

Lines of code

1064

increased by126.87%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

26

increased by4%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedcommander@^11.1.0

• + Addedcommander@11.1.0(transitive)