css-token
Advanced tools
Comparing version 0.0.5 to 0.0.6
@@ -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): { |
@@ -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 @@ }; |
{ | ||
"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" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
158278
72
4896
6