@nanonansen2/nook-ui - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/cli/cli.js

@@ -26,27 +26,38 @@ #!/usr/bin/env node
     color: {
-      foregroundNeutral: "#111111",
-      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",
+      foregroundNeutral: "#14181f",
+      foregroundNeutralFaded: "#5b667e",
+      foregroundDisabled: "#494a4e",
+      foregroundPrimary: "#0369a1",
+      foregroundCritical: "#d72828",
+      foregroundPositive: "#118850",
+      foregroundWarning: "#d7ae06",
+      borderNeutral: "#C7C9D1",
+      borderNeutralFaded: "#C7C9D1",
+      borderDisabled: "#262729",
+      borderPrimary: "#4493cc",
+      borderPrimaryFaded: "#1e3b50",
+      borderCritical: "#e68075",
+      borderCriticalFaded: "#532a26",
+      borderPositive: "#57b17c",
+      borderPositiveFaded: "#223f2d",
+      borderWarning: "#eed58a",
+      borderWarningFaded: "#40371b",
+      backgroundNeutral: "#DFE2EA",
+      backgroundNeutralFaded: "#F3F3F5",
+      backgroundDisabled: "#242527",
+      backgroundDisabledFaded: "#1b1b1d",
+      backgroundPrimary: "#0369a1",
+      backgroundPrimaryFaded: "#D8EDFC",
+      backgroundCritical: "#d72828",
+      backgroundCriticalFaded: "#FDEDED",
+      backgroundPositive: "#118850",
+      backgroundPositiveFaded: "#E2FCEC",
+      backgroundWarning: "#d7ae06",
+      backgroundWarningFaded: "#FBF3DC",
+      onBackgroundNeutral: "#000000",
+      onBackgroundDisabled: "#FFFFFF",
+      onBackgroundPrimary: "#FFFFFF",
+      onBackgroundCritical: "#FFFFFF",
+      onBackgroundPositive: "#FFFFFF",
+      onBackgroundWarning: "#FFFFFF",
       backgroundPage: "#FFFFFF",
@@ -56,3 +67,13 @@ backgroundPageFaded: "#F5F5F5",
       backgroundElevationRaised: "#FFFFFF",
-      backgroundElevationOverlay: "#FFFFFF"
+      backgroundElevationOverlay: "#FFFFFF",
+      backgroundNeutralRgb: "223, 226, 234",
+      backgroundNeutralFadedRgb: "243, 243, 245",
+      backgroundPrimaryRgb: "3, 105, 161",
+      backgroundPrimaryFadedRgb: "216, 237, 252",
+      backgroundCriticalRgb: "215, 40, 40",
+      backgroundCriticalFadedRgb: "253, 237, 237",
+      backgroundPositiveRgb: "17, 136, 80",
+      backgroundPositiveFadedRgb: "226, 252, 236",
+      backgroundWarningRgb: "215, 174, 6",
+      backgroundWarningFadedRgb: "251, 243, 220"
     },
@@ -70,2 +91,5 @@ spacing: generateSpacingUnits(4),
         px: 16
+      },
+      pill: {
+        px: 9999
       }
@@ -72,0 +96,0 @@ },

dist/components/Button/index.js

@@ -1,54 +0,53 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { c as z, L as N } from "../../index-Cl7XVjXY.js";
-import '../../assets/index.css';const h = "_button_81ryv_1", x = "_content_81ryv_40", A = "_icon_81ryv_41", $ = "_loader_81ryv_306", j = {
-  button: h,
-  "full-width": "_full-width_81ryv_22",
-  "is-rounded": "_is-rounded_81ryv_25",
-  "is-elevated": "_is-elevated_81ryv_28",
-  "is-loading": "_is-loading_81ryv_37",
-  content: x,
-  icon: A,
-  "size-small": "_size-small_81ryv_45",
-  "has-icon": "_has-icon_81ryv_49",
-  "size-medium": "_size-medium_81ryv_53",
-  "size-large": "_size-large_81ryv_61",
-  "size-xlarge": "_size-xlarge_81ryv_69",
-  "color-neutral": "_color-neutral_81ryv_77",
-  "variant-solid": "_variant-solid_81ryv_77",
-  "variant-outline": "_variant-outline_81ryv_88",
-  "variant-ghost": "_variant-ghost_81ryv_100",
-  "variant-faded": "_variant-faded_81ryv_111",
-  "color-primary": "_color-primary_81ryv_123",
-  "color-critical": "_color-critical_81ryv_169",
-  "color-positive": "_color-positive_81ryv_215",
-  "button-group": "_button-group_81ryv_261",
-  "button-aligner": "_button-aligner_81ryv_275",
-  "align-start": "_align-start_81ryv_282",
-  "align-end": "_align-end_81ryv_285",
-  "align-top": "_align-top_81ryv_288",
-  "align-bottom": "_align-bottom_81ryv_291",
-  "start-icon": "_start-icon_81ryv_299",
-  "end-icon": "_end-icon_81ryv_302",
-  loader: $
-}, a = z.bind(j);
-function v({
-  children: _,
+import { jsxs as N, jsx as _ } from "react/jsx-runtime";
+import { c as z, L as h } from "../../index-BqvXI5p-.js";
+import '../../assets/index.css';const x = "_button_2ub2m_1", w = "_content_2ub2m_52", y = "_icon_2ub2m_53", A = "_loader_2ub2m_387", $ = {
+  button: x,
+  "full-width": "_full-width_2ub2m_34",
+  "is-rounded": "_is-rounded_2ub2m_37",
+  "is-elevated": "_is-elevated_2ub2m_40",
+  "is-loading": "_is-loading_2ub2m_49",
+  content: w,
+  icon: y,
+  "size-small": "_size-small_2ub2m_57",
+  "has-icon": "_has-icon_2ub2m_69",
+  "size-medium": "_size-medium_2ub2m_73",
+  "size-large": "_size-large_2ub2m_88",
+  "size-xlarge": "_size-xlarge_2ub2m_103",
+  "color-neutral": "_color-neutral_2ub2m_118",
+  "variant-solid": "_variant-solid_2ub2m_118",
+  "variant-outline": "_variant-outline_2ub2m_129",
+  "variant-ghost": "_variant-ghost_2ub2m_141",
+  "variant-faded": "_variant-faded_2ub2m_152",
+  "color-primary": "_color-primary_2ub2m_164",
+  "color-critical": "_color-critical_2ub2m_210",
+  "color-positive": "_color-positive_2ub2m_256",
+  "color-warning": "_color-warning_2ub2m_302",
+  "button-group": "_button-group_2ub2m_348",
+  "button-aligner": "_button-aligner_2ub2m_362",
+  "align-start": "_align-start_2ub2m_369",
+  "align-end": "_align-end_2ub2m_372",
+  "align-top": "_align-top_2ub2m_375",
+  "align-bottom": "_align-bottom_2ub2m_378",
+  loader: A
+}, a = z.bind($);
+function m({
+  children: i,
   variant: n = "solid",
   color: t = "neutral",
-  size: r = "medium",
-  icon: i,
-  endIcon: e,
-  fullWidth: u = !1,
+  size: o = "medium",
+  icon: e,
+  endIcon: l,
+  fullWidth: c = !1,
   loading: s = !1,
-  rounded: d = !1,
-  elevated: y = !1,
-  as: m = "button",
-  href: l,
-  className: g,
-  disabled: c,
-  onClick: b,
-  ...f
+  rounded: b = !1,
+  elevated: d = !1,
+  as: g = "button",
+  href: r,
+  className: v,
+  disabled: u,
+  onClick: f,
+  ...p
 }) {
-  return /* @__PURE__ */ p(
-    l ? "a" : m,
+  return /* @__PURE__ */ N(
+    r ? "a" : g,
     {
@@ -60,27 +59,21 @@ className: a(
           [`color-${t}`]: t,
-          [`size-${r}`]: r,
-          "full-width": u,
+          [`size-${o}`]: o,
+          "full-width": c,
           "is-loading": s,
-          "is-rounded": d,
-          "is-elevated": y,
-          "has-icon": i && !_,
-          "is-disabled": c
+          "is-rounded": b,
+          "is-elevated": d,
+          "has-icon": e && !i,
+          "is-disabled": u
         },
-        g
+        v
       ),
-      disabled: c || s,
-      href: l,
-      onClick: b,
-      ...f,
+      disabled: u || s,
+      href: r,
+      onClick: f,
+      ...p,
       children: [
-        s && /* @__PURE__ */ o(
-          N,
-          {
-            size: r === "small" ? "small" : "medium",
-            className: a("loader")
-          }
-        ),
-        i && /* @__PURE__ */ o(i, { className: a("icon", "start-icon") }),
-        _ && /* @__PURE__ */ o("span", { className: a("content"), children: _ }),
-        e && /* @__PURE__ */ o(e, { className: a("icon", "end-icon") })
+        s && /* @__PURE__ */ _(h, { size: o, className: a("loader") }),
+        e && /* @__PURE__ */ _(e, { className: a("icon", "start-icon") }),
+        i && /* @__PURE__ */ _("span", { className: a("content"), children: i }),
+        l && /* @__PURE__ */ _(l, { className: a("icon", "end-icon") })
       ]
@@ -90,17 +83,17 @@ }
 }
-v.Group = function({
+m.Group = function({
   children: n,
   className: t,
-  ...r
+  ...o
 }) {
-  return /* @__PURE__ */ o("div", { className: a("button-group", t), ...r, children: n });
+  return /* @__PURE__ */ _("div", { className: a("button-group", t), ...o, children: n });
 };
-v.Aligner = function({
+m.Aligner = function({
   children: n,
   position: t,
-  className: r,
-  ...i
+  className: o,
+  ...e
 }) {
-  const e = Array.isArray(t) ? t : [t];
-  return /* @__PURE__ */ o(
+  const l = Array.isArray(t) ? t : [t];
+  return /* @__PURE__ */ _(
     "div",
@@ -111,7 +104,7 @@ {
         {
-          [`align-${e.join("-")}`]: t
+          [`align-${l.join("-")}`]: t
         },
-        r
+        o
       ),
-      ...i,
+      ...e,
       children: n
@@ -122,3 +115,3 @@ }
 export {
-  v as Button
+  m as Button
 };

dist/components/Loader/index.js

 import "react/jsx-runtime";
-import { L as e } from "../../index-Cl7XVjXY.js";
+import { L as e } from "../../index-BqvXI5p-.js";
 export {
   e as Loader
 };

dist/lib/components/Button/index.d.ts

@@ -5,3 +5,3 @@ import { ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
     variant?: "solid" | "outline" | "ghost" | "faded";
-    color?: "neutral" | "primary" | "critical" | "positive" | "media" | "inherit";
+    color?: "neutral" | "primary" | "critical" | "positive" | "warning" | "media" | "inherit";
     size?: "small" | "medium" | "large" | "xlarge";
@@ -8,0 +8,0 @@ icon?: ElementType;

dist/lib/components/Loader/index.d.ts

 export interface LoaderProps {
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large" | "xlarge";
     className?: string;
 }
 export declare function Loader({ size, className }: LoaderProps): import("react/jsx-runtime").JSX.Element;

dist/lib/theme/types.d.ts

@@ -32,2 +32,3 @@ export type ThemeName = "nook";
         foregroundPositive: string;
+        foregroundWarning: string;
         borderNeutral: string;
@@ -42,2 +43,4 @@ borderNeutralFaded: string;
         borderPositiveFaded: string;
+        borderWarning: string;
+        borderWarningFaded: string;
         backgroundNeutral: string;
@@ -53,2 +56,10 @@ backgroundNeutralFaded: string;
         backgroundPositiveFaded: string;
+        backgroundWarning: string;
+        backgroundWarningFaded: string;
+        onBackgroundNeutral: string;
+        onBackgroundDisabled: string;
+        onBackgroundPrimary: string;
+        onBackgroundCritical: string;
+        onBackgroundPositive: string;
+        onBackgroundWarning: string;
         backgroundPage: string;
@@ -59,2 +70,12 @@ backgroundPageFaded: string;
         backgroundElevationOverlay: string;
+        backgroundNeutralRgb: string;
+        backgroundNeutralFadedRgb: string;
+        backgroundPrimaryRgb: string;
+        backgroundPrimaryFadedRgb: string;
+        backgroundCriticalRgb: string;
+        backgroundCriticalFadedRgb: string;
+        backgroundPositiveRgb: string;
+        backgroundPositiveFadedRgb: string;
+        backgroundWarningRgb: string;
+        backgroundWarningFadedRgb: string;
     };
@@ -72,2 +93,5 @@ spacing: SpacingMultipliers;
         };
+        pill: {
+            px: number;
+        };
     };
@@ -74,0 +98,0 @@ fontFamily: {

dist/theme/base-theme.js

@@ -1,2 +0,2 @@
-function t(e) {
+function i(e) {
   return {
@@ -19,30 +19,41 @@ base: { value: e },
 }
-const i = {
+const t = {
   nook: {
     color: {
-      foregroundNeutral: "#111111",
-      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",
+      foregroundNeutral: "#14181f",
+      foregroundNeutralFaded: "#5b667e",
+      foregroundDisabled: "#494a4e",
+      foregroundPrimary: "#0369a1",
+      foregroundCritical: "#d72828",
+      foregroundPositive: "#118850",
+      foregroundWarning: "#d7ae06",
+      borderNeutral: "#C7C9D1",
+      borderNeutralFaded: "#C7C9D1",
+      borderDisabled: "#262729",
+      borderPrimary: "#4493cc",
+      borderPrimaryFaded: "#1e3b50",
+      borderCritical: "#e68075",
+      borderCriticalFaded: "#532a26",
+      borderPositive: "#57b17c",
+      borderPositiveFaded: "#223f2d",
+      borderWarning: "#eed58a",
+      borderWarningFaded: "#40371b",
+      backgroundNeutral: "#DFE2EA",
+      backgroundNeutralFaded: "#F3F3F5",
+      backgroundDisabled: "#242527",
+      backgroundDisabledFaded: "#1b1b1d",
+      backgroundPrimary: "#0369a1",
+      backgroundPrimaryFaded: "#D8EDFC",
+      backgroundCritical: "#d72828",
+      backgroundCriticalFaded: "#FDEDED",
+      backgroundPositive: "#118850",
+      backgroundPositiveFaded: "#E2FCEC",
+      backgroundWarning: "#d7ae06",
+      backgroundWarningFaded: "#FBF3DC",
+      onBackgroundNeutral: "#000000",
+      onBackgroundDisabled: "#FFFFFF",
+      onBackgroundPrimary: "#FFFFFF",
+      onBackgroundCritical: "#FFFFFF",
+      onBackgroundPositive: "#FFFFFF",
+      onBackgroundWarning: "#FFFFFF",
       backgroundPage: "#FFFFFF",
@@ -52,5 +63,15 @@ backgroundPageFaded: "#F5F5F5",
       backgroundElevationRaised: "#FFFFFF",
-      backgroundElevationOverlay: "#FFFFFF"
+      backgroundElevationOverlay: "#FFFFFF",
+      backgroundNeutralRgb: "223, 226, 234",
+      backgroundNeutralFadedRgb: "243, 243, 245",
+      backgroundPrimaryRgb: "3, 105, 161",
+      backgroundPrimaryFadedRgb: "216, 237, 252",
+      backgroundCriticalRgb: "215, 40, 40",
+      backgroundCriticalFadedRgb: "253, 237, 237",
+      backgroundPositiveRgb: "17, 136, 80",
+      backgroundPositiveFadedRgb: "226, 252, 236",
+      backgroundWarningRgb: "215, 174, 6",
+      backgroundWarningFadedRgb: "251, 243, 220"
     },
-    spacing: t(4),
+    spacing: i(4),
     // Using 4 as base unit
@@ -66,2 +87,5 @@ radius: {
         px: 16
+      },
+      pill: {
+        px: 9999
       }
@@ -200,3 +224,3 @@ },
 export {
-  i as baseTheme
+  t as baseTheme
 };

package.json

 {
   "name": "@nanonansen2/nook-ui",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
@@ -58,2 +58,3 @@ "exports": {
     "sass-embedded": "^1.81.0",
+    "tsx": "^4.7.1",
     "typescript": "~5.6.2",
@@ -64,3 +65,3 @@ "typescript-eslint": "^8.15.0",
     "vite-plugin-lib-inject-css": "^2.1.1",
-    "tsx": "^4.7.1"
+    "react-feather": "^2.0.10"
   },
@@ -67,0 +68,0 @@ "config": {

No alert changes

Improved metrics

Total package byte prevSize

55295

increased by15.39%

Lines of code

1270

increased by8.83%

Worsened metrics

Dev dependency count

27

increased by3.85%

No dependency changes