css-token - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/index.d.ts

@@ -9,9 +9,10 @@ /// <reference lib="dom" />
     readonly orange: 50;
-    readonly yellow: 85;
-    readonly lime: 120;
-    readonly grass: 135;
-    readonly green: 150;
-    readonly teal: 165;
-    readonly mint: 185;
-    readonly cyan: 205;
+    readonly amber: 83;
+    readonly yellow: 95;
+    readonly lime: 125;
+    readonly grass: 140;
+    readonly green: 155;
+    readonly teal: 170;
+    readonly mint: 188;
+    readonly cyan: 210;
     readonly sky: 230;
@@ -274,3 +275,3 @@ readonly blue: 256;
     direction?: number;
-    colorSpace?: string;
+    colorSpace?: string | null;
 }
@@ -277,0 +278,0 @@ declare function textGradient(options: TextGradientOptions): {

dist/index.js

@@ -56,9 +56,10 @@ // src/createToken.ts
   orange: 50,
-  yellow: 85,
-  lime: 120,
-  grass: 135,
-  green: 150,
-  teal: 165,
-  mint: 185,
-  cyan: 205,
+  amber: 83,
+  yellow: 95,
+  lime: 125,
+  grass: 140,
+  green: 155,
+  teal: 170,
+  mint: 188,
+  cyan: 210,
   sky: 230,
@@ -115,8 +116,3 @@ blue: 256,
     if (hue === "sky") {
-      if (shade === 1)
-        h += 20;
-      else if (shade < 5)
-        h += 15;
-      else if (shade === 5)
-        h += 5;
+      h += 23 - shade * 1.75;
     }
@@ -131,2 +127,10 @@ if (hue === "pink") {
     }
+    if (hue === "yellow") {
+      if (shade < 5)
+        h += 6 - shade;
+    }
+    if (hue === "amber") {
+      if (shade < 5)
+        h -= 25 - 5 * shade;
+    }
     if (shade === 1)
@@ -161,10 +165,9 @@ return 10;
     }
-    if (shade >= 5 && shade <= 9)
+    if (shade >= 5 && shade <= 10)
       return 42.5;
-    return -5 * (shade - 18);
+    return -5 * (shade - 19);
   })();
   switch (hue) {
     case "red":
-    case "orange":
-    case "yellow":
+    case "amber":
     case "indigo":
@@ -175,5 +178,8 @@ case "crimson":
       break;
+    case "green":
     case "grass":
-    case "green":
     case "teal":
+    case "yellow":
+      c *= 1.15;
+      break;
     case "pink":
@@ -183,5 +189,7 @@ case "magenta":
     case "blue":
+    case "orange":
       c *= 1.1;
       break;
-    case "sky":
+    case "cyan":
+    case "mint":
       c *= 0.925;
@@ -222,10 +230,10 @@ break;
   if (preset === "sharp") {
-    const c = hSh ? color(hSh, { alpha: 0.06 * i }) : black;
+    const c = hSh ? color(hSh, { alpha: 0.06 * i * e }) : black;
     return [
-      `0 0 0 1px ${c}`,
-      `0 1px 1px -0.5px ${c}`,
-      `0 3px 3px -1.5px ${c}`,
-      `0 6px 6px -3px ${c}`,
-      `0 12px 12px -6px ${c}`,
-      `0 24px 24px -12px ${c}`
+      `0 0 0 1px ${e === 1 ? black : `rgba(0,0,0,${0.03 * e / 1.25})`}`,
+      `0 ${e}px ${e}px -0.5px ${c}`,
+      `0 ${e * 3}px ${e * 3}px -1.5px ${c}`,
+      `0 ${e * 6}px ${e * 6}px -3px ${c}`,
+      `0 ${e * 12}px ${e * 12}px -6px ${c}`,
+      `0 ${e * 24}px ${e * 24}px -12px ${c}`
     ].join(",");
@@ -235,9 +243,9 @@ }
     return [
-      `0 0 ${e * 4}px ${hSh ? color(hSh, { alpha: 0.04 * i }) : black}`,
+      `0 0 ${e * 4}px ${hSh ? color(hSh, { alpha: 0.01 * i }) : black}`,
       `0 ${e}px ${e * 2}px ${hSh ? color(hSh, { alpha: 0.01 * i }) : black}`,
-      `0 ${e * 4}px ${e * 2}px ${hSh ? color(hSh, { alpha: 0.03 * i }) : black}`,
-      `0 ${e * 8}px ${e * 4}px ${hSh ? color(hSh, { alpha: 0.04 * i }) : black}`,
-      `0 ${e * 16}px ${e * 8}px ${hSh ? color(hSh, { alpha: 0.05 * i }) : black}`,
-      `0 ${e * 32}px ${e * 16}px ${hSh ? color(hSh, { alpha: 0.06 * i }) : black}`,
-      `0 ${e * 64}px ${e * 32}px ${hSh ? color(hSh, { alpha: 0.06 * i }) : black}`
+      `0 ${e * 4}px ${e * 2}px ${hSh ? color(hSh, { alpha: 0.01 * i }) : black}`,
+      `0 ${e * 8}px ${e * 4}px ${hSh ? color(hSh, { alpha: 0.02 * i }) : black}`,
+      `0 ${e * 16}px ${e * 8}px ${hSh ? color(hSh, { alpha: 0.02 * i }) : black}`,
+      `0 ${e * 32}px ${e * 16}px ${hSh ? color(hSh, { alpha: 0.02 * i }) : black}`,
+      `0 ${e * 64}px ${e * 32}px ${hSh ? color(hSh, { alpha: 0.03 * i }) : black}`
     ].join(",");
@@ -554,8 +562,6 @@ }
 function textGradient(options) {
-  const { stops, direction = "90deg", colorSpace = "oklch" } = options;
+  const { stops, direction = "90deg", colorSpace = null } = options;
   return {
     color: "transparent",
-    backgroundImage: `linear-gradient(in ${colorSpace} ${direction},${stops.join(
-      ","
-    )})`,
+    backgroundImage: colorSpace ? `linear-gradient(in ${colorSpace} ${direction},${stops.join(",")})` : `linear-gradient(${direction},${stops.join(",")})`,
     backgroundClip: "text"
@@ -562,0 +568,0 @@ };

package.json

 {
-  "name": "css-token",
-  "version": "0.0.5",
-  "description": "Design tokens & utilities for CSS and JS",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.cts",
-  "sideEffects": false,
-  "exports": {
-    "./package.json": "./package.json",
-    "./*.css": "./*.css",
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    }
-  },
-  "files": [
-    "dist/",
-    "*.css"
-  ],
-  "scripts": {
-    "build": "tsup src/index.ts && bun scripts/build.ts",
-    "clean": "rm -rf *.css",
-    "typecheck": "tsc",
-    "lint": "bunx @biomejs/biome lint src scripts website/src && publint",
-    "format": "bunx @biomejs/biome format src scripts website/src --write"
-  },
-  "author": "atomiks",
-  "license": "MIT",
-  "devDependencies": {
-    "@biomejs/biome": "1.4.1",
-    "@types/bun": "^1.0.0",
-    "publint": "^0.2.7",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
-  }
+	"name": "css-token",
+	"version": "0.0.6",
+	"description": "Design tokens & utilities for CSS and JS",
+	"type": "module",
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.cts",
+	"sideEffects": false,
+	"exports": {
+		"./package.json": "./package.json",
+		"./*.css": "./*.css",
+		".": {
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.js"
+			},
+			"require": {
+				"types": "./dist/index.d.cts",
+				"default": "./dist/index.cjs"
+			}
+		}
+	},
+	"files": [
+		"dist/",
+		"*.css"
+	],
+	"scripts": {
+		"build": "tsup src/index.ts && bun scripts/build.ts",
+		"clean": "rm -rf *.css",
+		"typecheck": "tsc",
+		"lint": "bunx @biomejs/biome lint .github src scripts website/src && publint",
+		"format": "bunx @biomejs/biome format .github src scripts website/src --write",
+		"release": "bun run build && changeset publish"
+	},
+	"author": "atomiks",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.4.1",
+		"@changesets/cli": "^2.27.1",
+		"@types/bun": "^1.0.0",
+		"publint": "^0.2.7",
+		"tsup": "^8.0.1",
+		"typescript": "^5.3.3"
+	}
 }

No alert changes

Improved metrics

Total package byte prevSize

158278

2.5%

Number of package files

72

2.86%

Lines of code

4896

2.32%

Worsened metrics

Dev dependency count

6

20%

No dependency changes