css-utility-functions 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.min.css +25 -2
  2. package/package.json +4 -3
package/dist/index.min.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --color1 <color>,
9
9
  --color2 <color>,
10
10
  --weight <percentage>: 50%
11
- ) returns <color>{result:color-mix(in oklch,var(--color1) var(--weight),var(--color2))}@function --contrast-text(--bg <color>) returns <color>{result:oklch(from var(--bg) calc((.6 - l) * infinity) 0 0)}@function --space(--multiplier <number>, --base <length>: var(--space-base, 0.25rem)) returns <length>{result:calc(var(--base) * var(--multiplier))}@function --fluid(
11
+ ) returns <color>{result:color-mix(in oklch,var(--color1) var(--weight),var(--color2))}@function --contrast-text(--bg <color>) returns <color>{result:oklch(from var(--bg) calc((.6 - l) * infinity) 0 0)}@function --grayscale(--color <color>) returns <color>{result:oklch(from var(--color) l 0 h)}@function --invert(--color <color>) returns <color>{result:oklch(from var(--color) calc(1 - l) c h)}@function --complement(--color <color>) returns <color>{result:oklch(from var(--color) l c calc(h + 180))}@function --space(--multiplier <number>, --base <length>: var(--space-base, 0.25rem)) returns <length>{result:calc(var(--base) * var(--multiplier))}@function --fluid(
12
12
  --min <length>,
13
13
  --max <length>,
14
14
  --min-vw <length>: 375px,
@@ -25,4 +25,27 @@
25
25
  ) returns <length>{result:calc(var(--width) * var(--ratio-h) / var(--ratio-w))}@function --shadow(
26
26
  --level <number>,
27
27
  --color <color>: oklch(0% 0 0 / 0.1)
28
- ){--y:calc(var(--level) * 2px);--blur:calc(var(--level) * 4px);--spread:calc(var(--level) * -1px);result:0 var(--y) var(--blur) var(--spread) var(--color),0 calc(var(--y) * .5) calc(var(--blur) * .5) calc(var(--spread) * .5) var(--color)}@function --z(--layer <number>) returns <integer>{result:calc(var(--layer) * 100)}@function --neg(--value <length>) returns <length>{result:calc(var(--value) * -1)}@function --to-rem(--px <number>, --base <number>: var(--rem-base, 16)) returns <length>{result:calc(var(--px) * 1rem / var(--base))}@function --to-px(--rem <number>) returns <length>{result:calc(var(--rem) * 16 * 1px)}
28
+ ){--y:calc(var(--level) * 2px);--blur:calc(var(--level) * 4px);--spread:calc(var(--level) * -1px);result:0 var(--y) var(--blur) var(--spread) var(--color),0 calc(var(--y) * .5) calc(var(--blur) * .5) calc(var(--spread) * .5) var(--color)}@function --diagonal-lines(
29
+ --angle <angle>: -45deg,
30
+ --line-color <color>: currentColor,
31
+ --line-width <length>: 1px,
32
+ --gap-width <length>: 4px,
33
+ --gap-color <color>: transparent
34
+ ) returns <image>{result:repeating-linear-gradient(var(--angle),var(--line-color) 0,var(--line-color) calc(var(--line-width) - 1px),var(--gap-color) calc(var(--line-width) + 1px),var(--gap-color) calc(var(--line-width) + var(--gap-width)))}@function --z(--layer <number>) returns <integer>{result:calc(var(--layer) * 100)}@function --neg(--value <length>) returns <length>{result:calc(var(--value) * -1)}@function --lerp(
35
+ --a <length-percentage>,
36
+ --b <length-percentage>,
37
+ --t <number>: 0.5
38
+ ) returns <length-percentage>{result:calc(var(--a) * (1 - var(--t)) + var(--b) * var(--t))}@function --circle-x(
39
+ --radius <length>,
40
+ --angle <angle>: 0deg
41
+ ) returns <length>{result:calc(var(--radius) * cos(var(--angle)))}@function --circle-y(
42
+ --radius <length>,
43
+ --angle <angle>: 0deg
44
+ ) returns <length>{result:calc(var(--radius) * sin(var(--angle)))}@function --modular(
45
+ --step <number>,
46
+ --base <length|number>: 1rem,
47
+ --ratio <number>: 1.25
48
+ ) returns <length|number>{result:calc(var(--base) * pow(var(--ratio), var(--step)))}@function --poly-angle(
49
+ --sides <number>,
50
+ --index <number>: 0
51
+ ) returns <angle>{result:calc(1turn / var(--sides) * var(--index) - 90deg)}@function --to-rem(--px <number>, --base <number>: var(--rem-base, 16)) returns <length>{result:calc(var(--px) * 1rem / var(--base))}@function --to-px(--rem <number>) returns <length>{result:calc(var(--rem) * 16 * 1px)}@function --not(--value <number>) returns <number>{result:calc(1 - var(--value))}@function --and(--a <number>, --b <number>) returns <number>{result:calc(var(--a) * var(--b))}@function --or(--a <number>, --b <number>) returns <number>{result:calc(1 - (1 - var(--a)) * (1 - var(--b)))}@function --xor(--a <number>, --b <number>) returns <number>{result:calc((var(--a) - var(--b)) * (var(--a) - var(--b)))}@function --nand(--a <number>, --b <number>) returns <number>{result:calc(1 - var(--a) * var(--b))}@function --nor(--a <number>, --b <number>) returns <number>{result:calc((1 - var(--a)) * (1 - var(--b)))}@function --xnor(--a <number>, --b <number>) returns <number>{result:calc(1 - (var(--a) - var(--b)) * (var(--a) - var(--b)))}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "css-utility-functions",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "A collection of reusable CSS custom native functions using the @function syntax",
5
5
  "main": "dist/index.css",
6
6
  "style": "dist/index.css",
@@ -11,13 +11,14 @@
11
11
  ],
12
12
  "scripts": {
13
13
  "build": "postcss src/index.css -o dist/index.css",
14
- "build:min": "postcss src/index.css -o dist/index.min.css --env production",
14
+ "build:min": "postcss src/index.css -o dist/index.min.css --env production && cp dist/index.min.css docs/index.min.css",
15
15
  "build:html": "node build-html.js",
16
16
  "build:all": "npm run build:html && npm run build && npm run build:min",
17
17
  "watch": "nodemon --watch src --ext css --exec \"npm run build\"",
18
18
  "watch:html": "node build-html.js --watch",
19
19
  "dev": "concurrently \"npm run watch:html\" \"npm run watch\"",
20
- "prebuild": "npm run build:html"
20
+ "prebuild": "npm run build:html",
21
+ "version": "concurrently \"npm run build:html\" \"npm run build\" \"npm run build:min\""
21
22
  },
22
23
  "keywords": [
23
24
  "css",