css-utility-functions 1.0.4 → 1.1.1

package/README.md

@@ -145,26 +145,43 @@ Calculate height from width and aspect ratio.
 ### Visual Effects
 
 #### `--shadow()`
-Elevation shadows based on level (1-5).
+Elevation shadows based on level (1-5). Optionally control shadow direction with angle parameter.
 
 ```css
 .card {
   box-shadow: --shadow(2);
 }
-```
 
----
+.lit-from-top-right {
+  box-shadow: --shadow(3, oklch(0% 0 0 / 0.15), 135deg);
+}
 
-### Layout Utilities
+.lit-from-left {
+  box-shadow: --shadow(2, oklch(0% 0 0 / 0.1), 180deg);
+}
+```
 
-#### `--z()`
-Semantic z-index scale (avoids magic numbers).
+#### `--bevel()`
+Inset elevation shadows for embossed/debossed effects. Optionally control light source direction with angle parameter.
 
 ```css
-.modal { z-index: --z(5); }     /* 500 */
-.tooltip { z-index: --z(7); }   /* 700 */
+.pressed-button {
+  box-shadow: --bevel(2);
+}
+
+.lit-from-top {
+  box-shadow: --bevel(2, oklch(0% 0 0 / 0.1), 270deg);
+}
+
+.input-field {
+  box-shadow: --bevel(1, oklch(0% 0 0 / 0.08), 90deg);
+}
 ```
 
+---
+
+### Layout Utilities
+
 #### `--neg()`
 Negate a value (useful for negative margins).
 
@@ -212,9 +229,9 @@ Convert between pixels and rem (assumes 16px base).
 | `--ratio-height()` | Aspect ratio calc | `--ratio-height(100px, 16, 9)` |
 | **Visual Effects** |||
 | `--shadow()` | Elevation shadows | `--shadow(3)` |
+| `--bevel()` | Inset shadows (emboss/deboss) | `--bevel(2)` |
 | `--diagonal-lines()` | Diagonal line pattern | `--diagonal-lines(--angle: 45deg)` |
 | **Layout Utilities** |||
-| `--z()` | Z-index layers | `--z(5)` → `500` |
 | `--neg()` | Negate value | `--neg(2rem)` → `-2rem` |
 | **Math Utilities** |||
 | `--lerp()` | Linear interpolation | `--lerp(100px, 500px, 0.5)` |

package/dist/index.css

@@ -1,5 +1,5 @@
 /**
- * CSS Utility Functions v1.0.4
+ * CSS Utility Functions v1.1.1
  * Author: Yair Even-Or
  * Repository: https://github.com/yairEO/css-utility-functions
  *
@@ -377,9 +377,11 @@
  * --shadow() — Elevation Shadows
  *
  * Generates layered box-shadows based on elevation level (1-5).
+ * Optionally control shadow direction with angle parameter.
  *
  * @param {number} --level - Elevation level (1-5)
  * @param {color} --color - Shadow color, default: oklch(0% 0 0 / 0.1)
+ * @param {angle} --angle - Shadow direction angle, default: 90deg (downward)
  * @returns {string} - Layered box-shadow value (comma-separated shadow list)
  *
  * @example
@@ -389,18 +391,63 @@
  * .modal {
  *   box-shadow: --shadow(5, oklch(0% 0 0 / 0.25));
  * }
+ * .lit-from-top-right {
+ *   box-shadow: --shadow(3, oklch(0% 0 0 / 0.15), 135deg);
+ * }
  */
 
 @function --shadow(
   --level <number>,
-  --color <color>: oklch(0% 0 0 / 0.1)
+  --color <color>: oklch(0% 0 0 / 0.1),
+  --angle <angle>: 90deg
+) {
+  --distance: calc(var(--level) * 2px);
+  --x: calc(var(--distance) * cos(var(--angle)));
+  --y: calc(var(--distance) * sin(var(--angle)));
+  --blur: calc(var(--level) * 4px);
+  --spread: calc(var(--level) * -1px);
+  result:
+    var(--x) var(--y) var(--blur) var(--spread) var(--color),
+    calc(var(--x) * 0.5) calc(var(--y) * 0.5) calc(var(--blur) * 0.5) calc(var(--spread) * 0.5) var(--color);
+}
+
+/**
+ * --bevel() — Inset Elevation Shadows
+ *
+ * Generates layered inset box-shadows for embossed/debossed effects based on level (1-5).
+ * Creates a recessed appearance ideal for pressed buttons, input fields, and sunken UI elements.
+ * Optionally control light source direction with angle parameter.
+ *
+ * @param {number} --level - Elevation level (1-5)
+ * @param {color} --color - Shadow color, default: oklch(0% 0 0 / 0.1)
+ * @param {angle} --angle - Light source direction angle, default: 90deg (lit from bottom)
+ * @returns {string} - Layered inset box-shadow value (comma-separated shadow list)
+ *
+ * @example
+ * .pressed-button {
+ *   box-shadow: --bevel(2);
+ * }
+ * .input-field {
+ *   box-shadow: --bevel(1, oklch(0% 0 0 / 0.08));
+ * }
+ * .lit-from-top {
+ *   box-shadow: --bevel(2, oklch(0% 0 0 / 0.1), 270deg);
+ * }
+ */
+
+@function --bevel(
+  --level <number>,
+  --color <color>: oklch(0% 0 0 / 0.1),
+  --angle <angle>: 90deg
 ) {
-  --y: calc(var(--level) * 2px);
+  --distance: calc(var(--level) * 2px);
+  --x: calc(var(--distance) * cos(var(--angle)));
+  --y: calc(var(--distance) * sin(var(--angle)));
   --blur: calc(var(--level) * 4px);
   --spread: calc(var(--level) * -1px);
   result:
-    0 var(--y) var(--blur) var(--spread) var(--color),
-    0 calc(var(--y) * 0.5) calc(var(--blur) * 0.5) calc(var(--spread) * 0.5) var(--color);
+    inset var(--x) var(--y) var(--blur) var(--spread) var(--color),
+    inset calc(var(--x) * 0.5) calc(var(--y) * 0.5) calc(var(--blur) * 0.5) calc(var(--spread) * 0.5) var(--color);
 }
 
 /**
@@ -462,30 +509,6 @@
 
 /* Layout Utilities */
 
-/**
- * --z() — Z-Index Scale
- *
- * Named z-index layers to avoid magic numbers and conflicts.
- *
- * Layer reference:
- * 1: dropdown, 2: sticky, 3: fixed,
- * 4: drawer, 5: modal, 6: popover,
- * 7: tooltip, 8: toast, 9: max
- *
- * @param {number} --layer - Layer number (1-9)
- * @returns {integer} - Z-index value (layer × 100)
- *
- * @example
- * .dropdown { z-index: --z(1); }
- * .header { z-index: --z(3); }
- * .modal { z-index: --z(5); }
- * .tooltip { z-index: --z(7); }
- */
-
-@function --z(--layer <number>) returns <integer> {
-  result: calc(var(--layer) * 100);
-}
-
 /**
  * --neg() — Negative Value
  *

package/dist/index.min.css

@@ -1,5 +1,5 @@
 /**
- * CSS Utility Functions v1.0.4
+ * CSS Utility Functions v1.1.1
  * Author: Yair Even-Or
  * Repository: https://github.com/yairEO/css-utility-functions
  *
@@ -37,14 +37,19 @@
   --ratio-h <number>: 9
 ) returns <length>{result:calc(var(--width) * var(--ratio-h) / var(--ratio-w))}@function --shadow(
   --level <number>,
-  --color <color>: oklch(0% 0 0 / 0.1)
-){--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(
+  --color <color>: oklch(0% 0 0 / 0.1),
+  --angle <angle>: 90deg
+){--distance:calc(var(--level) * 2px);--x:calc(var(--distance) * cos(var(--angle)));--y:calc(var(--distance) * sin(var(--angle)));--blur:calc(var(--level) * 4px);--spread:calc(var(--level) * -1px);result:var(--x) var(--y) var(--blur) var(--spread) var(--color),calc(var(--x) * .5) calc(var(--y) * .5) calc(var(--blur) * .5) calc(var(--spread) * .5) var(--color)}@function --bevel(
+  --level <number>,
+  --color <color>: oklch(0% 0 0 / 0.1),
+  --angle <angle>: 90deg
+){--distance:calc(var(--level) * 2px);--x:calc(var(--distance) * cos(var(--angle)));--y:calc(var(--distance) * sin(var(--angle)));--blur:calc(var(--level) * 4px);--spread:calc(var(--level) * -1px);result:inset var(--x) var(--y) var(--blur) var(--spread) var(--color),inset calc(var(--x) * .5) calc(var(--y) * .5) calc(var(--blur) * .5) calc(var(--spread) * .5) var(--color)}@function --diagonal-lines(
   --angle <angle>: -45deg,
   --line-color <color>: currentColor,
   --line-width <length>: 1px,
   --gap-width <length>: 4px,
   --gap-color <color>: transparent
-) 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(
+) 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 --neg(--value <length>) returns <length>{result:calc(var(--value) * -1)}@function --lerp(
   --a <length-percentage>,
   --b <length-percentage>,
   --t <number>: 0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-utility-functions",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "description": "A collection of reusable CSS custom native functions using the @function syntax",
   "main": "dist/index.css",
   "style": "dist/index.css",
@@ -14,11 +14,11 @@
     "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",
     "build:html": "node build-html.js",
     "build:all": "npm run build:html && npm run build && npm run build:min",
-    "watch": "nodemon --watch src --ext css --exec \"npm run build\"",
+    "watch": "nodemon --watch src --ext css --exec \"npm run build && npm run build:min\"",
     "watch:html": "node build-html.js --watch",
     "dev": "concurrently \"npm run watch:html\" \"npm run watch\"",
     "prebuild": "npm run build:html",
-    "postversion": "npm run build:all"
+    "version": "npm run build:all"
   },
   "keywords": [
     "css",

package/src/effects/bevel.css

@@ -0,0 +1,38 @@
+/**
+ * --bevel() — Inset Elevation Shadows
+ *
+ * Generates layered inset box-shadows for embossed/debossed effects based on level (1-5).
+ * Creates a recessed appearance ideal for pressed buttons, input fields, and sunken UI elements.
+ * Optionally control light source direction with angle parameter.
+ *
+ * @param {number} --level - Elevation level (1-5)
+ * @param {color} --color - Shadow color, default: oklch(0% 0 0 / 0.1)
+ * @param {angle} --angle - Light source direction angle, default: 90deg (lit from bottom)
+ * @returns {string} - Layered inset box-shadow value (comma-separated shadow list)
+ *
+ * @example
+ * .pressed-button {
+ *   box-shadow: --bevel(2);
+ * }
+ * .input-field {
+ *   box-shadow: --bevel(1, oklch(0% 0 0 / 0.08));
+ * }
+ * .lit-from-top {
+ *   box-shadow: --bevel(2, oklch(0% 0 0 / 0.1), 270deg);
+ * }
+ */
+
+@function --bevel(
+  --level <number>,
+  --color <color>: oklch(0% 0 0 / 0.1),
+  --angle <angle>: 90deg
+) {
+  --distance: calc(var(--level) * 2px);
+  --x: calc(var(--distance) * cos(var(--angle)));
+  --y: calc(var(--distance) * sin(var(--angle)));
+  --blur: calc(var(--level) * 4px);
+  --spread: calc(var(--level) * -1px);
+  result:
+    inset var(--x) var(--y) var(--blur) var(--spread) var(--color),
+    inset calc(var(--x) * 0.5) calc(var(--y) * 0.5) calc(var(--blur) * 0.5) calc(var(--spread) * 0.5) var(--color);
+}

package/src/effects/shadow.css

@@ -2,9 +2,11 @@
  * --shadow() — Elevation Shadows
  *
  * Generates layered box-shadows based on elevation level (1-5).
+ * Optionally control shadow direction with angle parameter.
  *
  * @param {number} --level - Elevation level (1-5)
  * @param {color} --color - Shadow color, default: oklch(0% 0 0 / 0.1)
+ * @param {angle} --angle - Shadow direction angle, default: 90deg (downward)
  * @returns {string} - Layered box-shadow value (comma-separated shadow list)
  *
  * @example
@@ -14,17 +16,23 @@
  * .modal {
  *   box-shadow: --shadow(5, oklch(0% 0 0 / 0.25));
  * }
+ * .lit-from-top-right {
+ *   box-shadow: --shadow(3, oklch(0% 0 0 / 0.15), 135deg);
+ * }
  */
 
 @function --shadow(
   --level <number>,
-  --color <color>: oklch(0% 0 0 / 0.1)
+  --color <color>: oklch(0% 0 0 / 0.1),
+  --angle <angle>: 90deg
 ) {
-  --y: calc(var(--level) * 2px);
+  --distance: calc(var(--level) * 2px);
+  --x: calc(var(--distance) * cos(var(--angle)));
+  --y: calc(var(--distance) * sin(var(--angle)));
   --blur: calc(var(--level) * 4px);
   --spread: calc(var(--level) * -1px);
   result:
-    0 var(--y) var(--blur) var(--spread) var(--color),
-    0 calc(var(--y) * 0.5) calc(var(--blur) * 0.5) calc(var(--spread) * 0.5) var(--color);
+    var(--x) var(--y) var(--blur) var(--spread) var(--color),
+    calc(var(--x) * 0.5) calc(var(--y) * 0.5) calc(var(--blur) * 0.5) calc(var(--spread) * 0.5) var(--color);
 }
 

package/src/index.css

@@ -28,10 +28,10 @@
 
 /* Visual Effects */
 @import './effects/shadow.css';
+@import './effects/bevel.css';
 @import './effects/diagonal-lines.css';
 
 /* Layout Utilities */
-@import './layout/z-index.css';
 @import './layout/neg.css';
 
 /* Math Utilities */

package/src/layout/z-index.css

@@ -1,24 +0,0 @@
-/**
- * --z() — Z-Index Scale
- *
- * Named z-index layers to avoid magic numbers and conflicts.
- *
- * Layer reference:
- * 1: dropdown, 2: sticky, 3: fixed,
- * 4: drawer, 5: modal, 6: popover,
- * 7: tooltip, 8: toast, 9: max
- *
- * @param {number} --layer - Layer number (1-9)
- * @returns {integer} - Z-index value (layer × 100)
- *
- * @example
- * .dropdown { z-index: --z(1); }
- * .header { z-index: --z(3); }
- * .modal { z-index: --z(5); }
- * .tooltip { z-index: --z(7); }
- */
-
-@function --z(--layer <number>) returns <integer> {
-  result: calc(var(--layer) * 100);
-}
-