css-token - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

dist/index.d.ts

@@ -0,1 +1,4 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="esnext" />
 type Base16Scale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
@@ -54,3 +57,2 @@
 declare const FONT_SIZE_SCALE: {
-    readonly 0: number;
     readonly 0.5: number;
@@ -80,2 +82,3 @@ readonly 1: number;
 type FontSizeScaleReadable = keyof typeof FONT_SIZE_SCALE_READABLE;
+type CSSFontSizeScale = '0_5' | 1 | '1_5' | 2 | '2_5' | 3 | '3_5' | 4 | '4_5' | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
 declare function fontSize(value: FontSizeScale | FontSizeScaleReadable, unit?: string): string;
@@ -175,2 +178,3 @@
 type LengthScale = keyof typeof LENGTH_SCALE;
+type CSSLengthScale = '0_5' | 1 | '1_5' | 2 | '2_5' | 3 | '3_5' | 4 | '4_5' | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32;
 declare function length(value: LengthScale, unit?: string): string;
@@ -227,8 +231,8 @@
 
-type Options = Array<'length' | 'shadow' | 'color' | 'rounded' | 'font' | 'font-size' | 'font-weight' | 'tracking' | 'leading' | 'layer'>;
-type LengthToken = `length-${LengthScale}`;
+type TokensList = Array<'length' | 'shadow' | 'color' | 'rounded' | 'font' | 'font-size' | 'font-weight' | 'tracking' | 'leading' | 'layer'>;
+type LengthToken = `length-${CSSLengthScale}`;
 type ShadowPreset$1 = 'sharp' | 'dreamy' | 'long';
 type ShadowToken = `shadow${`-${ShadowPreset$1}` | ''}${`-${1 | 2 | 3 | 4}` | ''}`;
 type RoundedToken = `rounded${`-${RoundedScale}` | ''}`;
-type FontSizeToken = `font-size-${FontSizeScale}` | `font-size-${FontSizeScaleReadable}`;
+type FontSizeToken = `font-size-${CSSFontSizeScale}` | `font-size-${FontSizeScaleReadable}`;
 type FontWeightToken = `font-weight-${FontWeightScale | FontWeightScaleReadable}`;
@@ -253,7 +257,7 @@ type TrackingToken = `tracking-${TrackingScale | TrackingScaleReadable}`;
 }
-type Token<T extends Options> = T[number] extends infer U ? U extends keyof TokenMap ? TokenMap[U] : never : never;
+type Token<T extends TokensList> = T[number] extends infer U ? U extends keyof TokenMap ? TokenMap[U] : never : never;
 /**
  * Creates a typed token function that returns a CSS variable string.
  */
-declare function createToken<T extends Options = Options>(options?: T): (name: Token<T>) => string;
+declare function createToken<T extends TokensList = TokensList>(tokensList?: T): (name: Token<T>) => string;
 
@@ -260,0 +264,0 @@ type ShadowPreset = 'none' | 'dreamy' | 'long' | 'sharp';

dist/index.js

 // src/createToken.ts
-function createToken(options) {
+function createToken(tokensList) {
   return function token(name) {
@@ -79,7 +79,3 @@ return `var(--${name})`;
 }
-function color(hueShade, {
-  alpha = 1,
-  vibrance = 1,
-  p3
-} = {}) {
+function getChannels(hueShade, { vibrance = 1, p3 = false } = {}) {
   const [hue, shadeStr] = hueShade.split("-");
@@ -166,6 +162,18 @@ const shade = Number(shadeStr);
   if (p3) {
-    return `oklch(${fL} ${fC} ${h}${alpha === 1 ? "" : ` / ${alpha}`})`;
+    return [fL, fC, h];
   }
-  return `rgb(${oklch2rgb([fL, fC, h]).map((n) => round(n)).join(" ")}${alpha === 1 ? "" : ` / ${alpha}`})`;
+  return oklch2rgb([fL, fC, h]);
 }
+function color(hueShade, {
+  alpha = 1,
+  vibrance = 1,
+  p3 = false
+} = {}) {
+  const [x, y, z] = getChannels(hueShade, { p3, vibrance });
+  const a = alpha !== 1 ? ` /${alpha}` : "";
+  if (p3) {
+    return `oklch(${x} ${y} ${z}${a})`;
+  }
+  return `rgb(${[x, y, z].map((n) => round(n)).join(" ")}${a})`;
+}
 
@@ -307,3 +315,2 @@ // src/tokens/shadow.ts
 var FONT_SIZE_SCALE = {
-  0: 0 / 16,
   0.5: 5 / 16,
@@ -310,0 +317,0 @@ 1: 6 / 16,

package.json

 {
   "name": "css-token",
-  "version": "0.0.0",
-  "description": "Design tokens for CSS and JS",
+  "version": "0.0.1",
+  "description": "Design tokens & utilities for CSS and JS",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.cts",
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
+    "./*.css": "./*.css",
     ".": {
@@ -38,2 +39,3 @@ "import": {
     "@biomejs/biome": "1.4.1",
+    "@types/bun": "^1.0.0",
     "publint": "^0.2.7",
@@ -40,0 +42,0 @@ "tsup": "^8.0.1",

README.md

@@ -14,1 +14,7 @@ # CSS Token
 [View the docs](https://css-token.netlify.app) for more information.
+
+> <sup>1</sup>[CSS Hooks](https://css-hooks.com) is a refreshingly light styling
+> solution that lets you to "hook" into CSS features like `:hover` and media
+> queries _directly_ from the `style` prop. With minimal overhead, you enjoy the
+> benefits of local reasoning, reusing your existing knowledge of standard CSS,
+> strong typing, while being SSR-safe.

No alert changes

Improved metrics

Number of lines in readme file

20

increased by42.86%

Worsened metrics

Total package byte prevSize

153292

decreased by-18.66%

Dev dependency count

5

increased by25%

Lines of code

4728

decreased by-14.19%

No dependency changes