css-utility-functions 1.0.1 → 1.0.3
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.
- package/dist/index.css +3 -1
- package/dist/index.min.css +38 -2
- package/package.json +5 -4
package/dist/index.css
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* CSS Utility Functions
|
|
2
|
+
* CSS Utility Functions v1.0.3
|
|
3
|
+
* Author: Yair Even-Or
|
|
4
|
+
* Repository: https://github.com/yairEO/css-utility-functions
|
|
3
5
|
*
|
|
4
6
|
* A collection of reusable CSS custom functions using the @function syntax.
|
|
5
7
|
* Import this file to use all utility functions in your project.
|
package/dist/index.min.css
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CSS Utility Functions v1.0.3
|
|
3
|
+
* Author: Yair Even-Or
|
|
4
|
+
* Repository: https://github.com/yairEO/css-utility-functions
|
|
5
|
+
*
|
|
6
|
+
* A collection of reusable CSS custom functions using the @function syntax.
|
|
7
|
+
* Import this file to use all utility functions in your project.
|
|
8
|
+
*
|
|
9
|
+
* ⚠️ Note: CSS @function is experimental. Check browser support before production use.
|
|
10
|
+
*
|
|
11
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/@function
|
|
12
|
+
*/
|
|
13
|
+
|
|
1
14
|
@function --alpha(--color <color>, --opacity <number>: 0.5) returns <color>{result:oklch(from var(--color) l c h/var(--opacity))}@function --lighten(--color <color>, --amount <number>: 0.1) returns <color>{result:oklch(from var(--color) calc(l + var(--amount)) c h)}@function --darken(--color <color>, --amount <number>: 0.1) returns <color>{result:oklch(from var(--color) calc(l - var(--amount)) c h)}@function --saturate(
|
|
2
15
|
--color <color>,
|
|
3
16
|
--amount <number>: 0.2
|
|
@@ -8,7 +21,7 @@
|
|
|
8
21
|
--color1 <color>,
|
|
9
22
|
--color2 <color>,
|
|
10
23
|
--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(
|
|
24
|
+
) 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
25
|
--min <length>,
|
|
13
26
|
--max <length>,
|
|
14
27
|
--min-vw <length>: 375px,
|
|
@@ -25,4 +38,27 @@
|
|
|
25
38
|
) returns <length>{result:calc(var(--width) * var(--ratio-h) / var(--ratio-w))}@function --shadow(
|
|
26
39
|
--level <number>,
|
|
27
40
|
--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 --
|
|
41
|
+
){--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(
|
|
42
|
+
--angle <angle>: -45deg,
|
|
43
|
+
--line-color <color>: currentColor,
|
|
44
|
+
--line-width <length>: 1px,
|
|
45
|
+
--gap-width <length>: 4px,
|
|
46
|
+
--gap-color <color>: transparent
|
|
47
|
+
) 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(
|
|
48
|
+
--a <length-percentage>,
|
|
49
|
+
--b <length-percentage>,
|
|
50
|
+
--t <number>: 0.5
|
|
51
|
+
) returns <length-percentage>{result:calc(var(--a) * (1 - var(--t)) + var(--b) * var(--t))}@function --circle-x(
|
|
52
|
+
--radius <length>,
|
|
53
|
+
--angle <angle>: 0deg
|
|
54
|
+
) returns <length>{result:calc(var(--radius) * cos(var(--angle)))}@function --circle-y(
|
|
55
|
+
--radius <length>,
|
|
56
|
+
--angle <angle>: 0deg
|
|
57
|
+
) returns <length>{result:calc(var(--radius) * sin(var(--angle)))}@function --modular(
|
|
58
|
+
--step <number>,
|
|
59
|
+
--base <length|number>: 1rem,
|
|
60
|
+
--ratio <number>: 1.25
|
|
61
|
+
) returns <length|number>{result:calc(var(--base) * pow(var(--ratio), var(--step)))}@function --poly-angle(
|
|
62
|
+
--sides <number>,
|
|
63
|
+
--index <number>: 0
|
|
64
|
+
) 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.
|
|
3
|
+
"version": "1.0.3",
|
|
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",
|
|
@@ -10,14 +10,15 @@
|
|
|
10
10
|
"README.md"
|
|
11
11
|
],
|
|
12
12
|
"scripts": {
|
|
13
|
-
"build": "postcss src/index.css -o dist/index.css",
|
|
14
|
-
"build:min": "postcss src/index.css -o dist/index.min.css --env production",
|
|
13
|
+
"build": "postcss src/index.css -o dist/index.css && node add-header.js dist/index.css",
|
|
14
|
+
"build:min": "postcss src/index.css -o dist/index.min.css --env production && node add-header.js dist/index.min.css && 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",
|