@dotnaos/design - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/index.js

@@ -62,13 +62,23 @@ import { cn } from "./lib/utils.js";
   5: SCALE[4] * 16,
+  6: SCALE[5] * 16,
+  7: SCALE[6] * 16,
   full: 9999
 };
+const cornerShapes = {
+  square: "square",
+  squircle: "squircle",
+  round: "round",
+  bevel: "bevel",
+  scoop: "scoop",
+  notch: "notch"
+};
 const colors = {
-  background: "#000000",
-  surface: "#141414",
-  surfaceMuted: "#0a0a0a",
-  border: "#2a2a2a",
-  text: "#fafafa",
-  textMuted: "#666666",
-  accent: "#3b82f6",
-  accentHover: "#2563eb",
+  background: "#ffffff",
+  surface: "#f0f0f0",
+  surfaceMuted: "#f7f7f7",
+  border: "#e5e5e5",
+  text: "#0d0d0d",
+  textMuted: "#6f6f6f",
+  accent: "#0169cc",
+  accentHover: "#0159ad",
   danger: "#ef4444",
@@ -79,4 +89,4 @@ warning: "#f59e0b",
 const typography = {
-  fontSans: "Inter, ui-sans-serif, system-ui, sans-serif",
-  fontMono: "JetBrains Mono, ui-monospace, monospace",
+  fontSans: "Satoshi, -apple-system, BlinkMacSystemFont, Inter, ui-sans-serif, system-ui, sans-serif",
+  fontMono: "ui-monospace, SFM Mono, SFMono-Regular, JetBrains Mono, monospace",
   textS: 12,
@@ -89,2 +99,3 @@ textM: 14,
 const designTokens = {
+  cornerShapes,
   spacing,
@@ -101,2 +112,3 @@ radii,
   colors,
+  cornerShapes,
   designTokens,
@@ -103,0 +115,0 @@ getRadius,

dist/scale.d.ts

@@ -14,3 +14,3 @@ /**
 /** Valid radius indices (0-based for r-0) */
-export type RadiusIndex = 0 | 1 | 2 | 3 | 4 | 5 | "full";
+export type RadiusIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | "full";
 /** Get size value as rem string */
@@ -17,0 +17,0 @@ export declare function getSize(index: SizeIndex): string;

dist/scale.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../src/scale.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,8BAA8B;AAC9B,eAAO,MAAM,KAAK,iDAAkD,CAAC;AAErE,mCAAmC;AACnC,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAElD,6CAA6C;AAC7C,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAEzD,mCAAmC;AACnC,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAEhD;AAED,qCAAqC;AACrC,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAErD;AAED,qCAAqC;AACrC,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAIpD;AAoBD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,SAAS,CAG9D;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,SAAS,CAInE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,CAIrF;AAED,oCAAoC;AACpC,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAEnD;AAED,mCAAmC;AACnC,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAEpD"}
+{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../src/scale.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,8BAA8B;AAC9B,eAAO,MAAM,KAAK,iDAAkD,CAAC;AAErE,mCAAmC;AACnC,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAElD,6CAA6C;AAC7C,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAEjE,mCAAmC;AACnC,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAEhD;AAED,qCAAqC;AACrC,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAErD;AAED,qCAAqC;AACrC,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAIpD;AAoBD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,SAAS,CAG9D;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,SAAS,CAInE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,CAIrF;AAED,oCAAoC;AACpC,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAEnD;AAED,mCAAmC;AACnC,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAEpD"}

dist/styles.css

 @import "@heroui/styles";
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./fonts/satoshi/satoshi-variable.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 300 900;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./fonts/satoshi/satoshi-variable-italic.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: italic;
+  font-weight: 300 900;
+}

dist/tailwind-theme.css

@@ -9,4 +9,4 @@ /**
  *   @import "tailwindcss";
- *   @import "@aryazos/ui/tokens.css";
- *   @import "@aryazos/ui/tailwind-theme.css";
+ *   @import "@dotnaos/design/tokens.css";
+ *   @import "@dotnaos/design/tailwind-theme.css";
  */
@@ -13,0 +13,0 @@

dist/theme.css

@@ -9,4 +9,4 @@ /**
  *   @import "tailwindcss";
- *   @import "@aryazos/ui/tokens.css";
- *   @import "@aryazos/ui/tailwind-theme.css";
+ *   @import "@dotnaos/design/tokens.css";
+ *   @import "@dotnaos/design/theme.css";
  */
@@ -33,2 +33,4 @@
   --radius-r-5: var(--r-5);
+  --radius-r-6: var(--r-6);
+  --radius-r-7: var(--r-7);
   --radius-r-full: var(--r-full);
@@ -35,0 +37,0 @@

dist/tokens.css

@@ -30,22 +30,35 @@ /**
   --r-5: 2rem;
+  --r-6: 3.25rem;
+  --r-7: 5.25rem;
   --r-full: 9999px;
 
   /* ========================================
+   * CORNER SHAPES (CSS Borders Level 4)
+   * Requires border-radius to create a visible shape.
+   * ======================================== */
+  --corner-shape-square: square;
+  --corner-shape-squircle: squircle;
+  --corner-shape-round: round;
+  --corner-shape-bevel: bevel;
+  --corner-shape-scoop: scoop;
+  --corner-shape-notch: notch;
+
+  /* ========================================
    * COLORS (minimal palette)
    * ======================================== */
   /* Backgrounds (3 levels) */
-  --bg-0: #000000;
-  --bg-1: #0a0a0a;
-  --bg-2: #141414;
+  --bg-0: #ffffff;
+  --bg-1: #f7f7f7;
+  --bg-2: #f0f0f0;
 
   /* Border */
-  --border: #2a2a2a;
+  --border: #e5e5e5;
 
   /* Text */
-  --text: #fafafa;
-  --text-muted: #666666;
+  --text: #0d0d0d;
+  --text-muted: #6f6f6f;
 
   /* Accent */
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
+  --accent: #0169cc;
+  --accent-hover: #0159ad;
 
@@ -60,4 +73,4 @@ /* Semantic */
    * ======================================== */
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, 'SFM Mono', 'SFMono-Regular', 'JetBrains Mono', monospace;
 
@@ -81,5 +94,5 @@ --text-s: 0.75rem;   /* 12px */
    * ======================================== */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10);
+  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
 
@@ -96,1 +109,15 @@ /* ========================================
 }
+
+.dark {
+  --bg-0: #111111;
+  --bg-1: #171717;
+  --bg-2: #202020;
+  --border: #343434;
+  --text: #fcfcfc;
+  --text-muted: #9a9a9a;
+  --accent: #0169cc;
+  --accent-hover: #0a7be6;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42);
+  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.52);
+}

dist/tokens.d.ts

@@ -17,13 +17,23 @@ declare const spacing: {
     readonly 5: number;
+    readonly 6: number;
+    readonly 7: number;
     readonly full: 9999;
 };
+declare const cornerShapes: {
+    readonly square: "square";
+    readonly squircle: "squircle";
+    readonly round: "round";
+    readonly bevel: "bevel";
+    readonly scoop: "scoop";
+    readonly notch: "notch";
+};
 declare const colors: {
-    readonly background: "#000000";
-    readonly surface: "#141414";
-    readonly surfaceMuted: "#0a0a0a";
-    readonly border: "#2a2a2a";
-    readonly text: "#fafafa";
-    readonly textMuted: "#666666";
-    readonly accent: "#3b82f6";
-    readonly accentHover: "#2563eb";
+    readonly background: "#ffffff";
+    readonly surface: "#f0f0f0";
+    readonly surfaceMuted: "#f7f7f7";
+    readonly border: "#e5e5e5";
+    readonly text: "#0d0d0d";
+    readonly textMuted: "#6f6f6f";
+    readonly accent: "#0169cc";
+    readonly accentHover: "#0159ad";
     readonly danger: "#ef4444";
@@ -34,4 +44,4 @@ readonly warning: "#f59e0b";
 declare const typography: {
-    readonly fontSans: "Inter, ui-sans-serif, system-ui, sans-serif";
-    readonly fontMono: "JetBrains Mono, ui-monospace, monospace";
+    readonly fontSans: "Satoshi, -apple-system, BlinkMacSystemFont, Inter, ui-sans-serif, system-ui, sans-serif";
+    readonly fontMono: "ui-monospace, SFM Mono, SFMono-Regular, JetBrains Mono, monospace";
     readonly textS: 12;
@@ -44,2 +54,10 @@ readonly textM: 14;
 export declare const designTokens: {
+    readonly cornerShapes: {
+        readonly square: "square";
+        readonly squircle: "squircle";
+        readonly round: "round";
+        readonly bevel: "bevel";
+        readonly scoop: "scoop";
+        readonly notch: "notch";
+    };
     readonly spacing: {
@@ -61,13 +79,15 @@ readonly 1: number;
         readonly 5: number;
+        readonly 6: number;
+        readonly 7: number;
         readonly full: 9999;
     };
     readonly colors: {
-        readonly background: "#000000";
-        readonly surface: "#141414";
-        readonly surfaceMuted: "#0a0a0a";
-        readonly border: "#2a2a2a";
-        readonly text: "#fafafa";
-        readonly textMuted: "#666666";
-        readonly accent: "#3b82f6";
-        readonly accentHover: "#2563eb";
+        readonly background: "#ffffff";
+        readonly surface: "#f0f0f0";
+        readonly surfaceMuted: "#f7f7f7";
+        readonly border: "#e5e5e5";
+        readonly text: "#0d0d0d";
+        readonly textMuted: "#6f6f6f";
+        readonly accent: "#0169cc";
+        readonly accentHover: "#0159ad";
         readonly danger: "#ef4444";
@@ -78,4 +98,4 @@ readonly warning: "#f59e0b";
     readonly typography: {
-        readonly fontSans: "Inter, ui-sans-serif, system-ui, sans-serif";
-        readonly fontMono: "JetBrains Mono, ui-monospace, monospace";
+        readonly fontSans: "Satoshi, -apple-system, BlinkMacSystemFont, Inter, ui-sans-serif, system-ui, sans-serif";
+        readonly fontMono: "ui-monospace, SFM Mono, SFMono-Regular, JetBrains Mono, monospace";
         readonly textS: 12;
@@ -88,3 +108,3 @@ readonly textM: 14;
 };
-export { colors, radii, spacing, typography };
+export { colors, cornerShapes, radii, spacing, typography };
 //# sourceMappingURL=tokens.d.ts.map

dist/tokens.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,OAAO;;;;;;;;CAQH,CAAC;AAEX,QAAA,MAAM,KAAK;;;;;;;;CAQD,CAAC;AAEX,QAAA,MAAM,MAAM;;;;;;;;;;;;CAYF,CAAC;AAEX,QAAA,MAAM,UAAU;;;;;;;;CAQN,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKf,CAAC;AAEX,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,OAAO;;;;;;;;CAQH,CAAC;AAEX,QAAA,MAAM,KAAK;;;;;;;;;;CAUD,CAAC;AAEX,QAAA,MAAM,YAAY;;;;;;;CAOR,CAAC;AAEX,QAAA,MAAM,MAAM;;;;;;;;;;;;CAYF,CAAC;AAEX,QAAA,MAAM,UAAU;;;;;;;;CAQN,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMf,CAAC;AAEX,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC"}

package.json

 {
   "name": "@dotnaos/design",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Shared design tokens, CSS assets, and utilities for DotNaos UI packages.",
@@ -23,2 +23,8 @@ "private": false,
   ],
+  "scripts": {
+    "build": "bun run clean && vite build && tsc -p tsconfig.build.json && bun run copy:assets",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "copy:assets": "copyfiles -u 1 \"src/**/*.css\" \"src/fonts/**/*\" dist"
+  },
   "exports": {
@@ -47,9 +53,3 @@ ".": {
     "vite": "^7.1.10"
-  },
-  "scripts": {
-    "build": "pnpm run clean && vite build && tsc -p tsconfig.build.json && pnpm run copy:assets",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist",
-    "copy:assets": "copyfiles -u 1 \"src/**/*.css\" dist"
   }
-}
+}

README.md

@@ -8,3 +8,3 @@ # @dotnaos/design
 ```bash
-pnpm add @dotnaos/design
+bun add @dotnaos/design
 ```
@@ -27,3 +27,3 @@
 ```bash
-pnpm --filter @dotnaos/design build
+bun --filter @dotnaos/design build
 ```
@@ -30,0 +30,0 @@

THIRD_PARTY_NOTICES.md

@@ -6,2 +6,3 @@ # Third-Party Notices
 - **HeroUI open-source packages** — MIT License. Open-source HeroUI styles are used in the published CSS and utilities. No HeroUI Pro code, templates, assets, or components are included.
+- **Satoshi** — ITF Free Font License. The Satoshi webfont is distributed by Fontshare / Indian Type Foundry and bundled as the default sans-serif font.
 - **clsx** — MIT License. Bundled utility for class name composition.
@@ -8,0 +9,0 @@ - **tailwind-merge** — MIT License. Bundled utility for resolving Tailwind class conflicts.

New alerts

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

198410

81.28%

Number of package files

20

11.11%

Lines of code

3535

2.11%

Worsened metrics

Number of low license alerts

1

Infinity%

No dependency changes