css-utility-functions 1.2.0 → 1.2.1

package/README.md

@@ -178,23 +178,6 @@ Inset elevation shadows for embossed/debossed effects. Optionally control light
 }
 ```
 
-#### `--polka-dots()`
-Repeating polka dot pattern background using two offset radial-gradient layers.
-
-```css
-.polka-bg {
-  background: --polka-dots();
-}
-
-.custom-dots {
-  background: --polka-dots(
-    --dot-color: #3b82f6,
-    --spacing: 10px,
-    --dot-size: 30%
-  );
-}
-```
-
 ---
 
 ### Layout Utilities
@@ -248,7 +231,6 @@ Convert between pixels and rem (assumes 16px base).
 | `--shadow()` | Elevation shadows | `--shadow(3)` |
 | `--bevel()` | Inset shadows (emboss/deboss) | `--bevel(2)` |
 | `--diagonal-lines()` | Diagonal line pattern | `--diagonal-lines(--angle: 45deg)` |
-| `--polka-dots()` | Polka dot pattern | `--polka-dots(--dot-color: black, --spacing: 8px)` |
 | **Layout Utilities** |||
 | `--neg()` | Negate value | `--neg(2rem)` → `-2rem` |
 | **Math Utilities** |||

package/dist/index.css

@@ -1,5 +1,5 @@
 /**
- * CSS Utility Functions v1.2.0
+ * CSS Utility Functions v1.2.1
  * Author: Yair Even-Or
  * Repository: https://github.com/yairEO/css-utility-functions
  *
@@ -507,58 +507,6 @@
   );
 }
 
-/**
- * --polka-dots() — Polka Dot Pattern Background
- *
- * Generate a repeating polka dot pattern using two offset radial-gradient layers.
- * Returns a complete background value (image + position + size) that can be used
- * directly as a background property value.
- *
- * @param {color} --dot-color - Color of the dots, default: currentColor
- * @param {length-percentage} --dot-size - Size of each dot; accepts px or %. A 1px feather zone
- *   is applied at the edge for anti-aliasing. Default: 20%
- * @param {length} --spacing - Half the tile size; controls dot density, default: 5px
- * @param {color} --bg-color - Background color between dots, default: transparent
- * @returns {image} - Complete two-layer radial-gradient background value
- *
- * @example
- * .polka-bg {
- *   background: --polka-dots();
- * }
- *
- * @example
- * .custom-dots {
- *   background: --polka-dots(
- *     --dot-color: #3b82f6,
- *     --spacing: 10px,
- *     --dot-size: 30%
- *   );
- * }
- *
- * @example
- * .subtle-dots {
- *   color: #94a3b8;
- *   background: --polka-dots(
- *     --dot-color: currentColor,
- *     --spacing: 8px,
- *     --dot-size: 15%
- *   );
- * }
- */
-
-@function --polka-dots(
-  --dot-color <color>: currentColor,
-  --dot-size <length-percentage>: 20%,
-  --spacing <length>: 5px,
-  --bg-color <color>: transparent
-) returns <image> {
-  result:
-    radial-gradient(var(--dot-color) calc(var(--dot-size) - 1px), var(--bg-color) var(--dot-size))
-      0 0 / calc(var(--spacing) * 2) calc(var(--spacing) * 2),
-    radial-gradient(var(--dot-color) calc(var(--dot-size) - 1px), var(--bg-color) var(--dot-size))
-      var(--spacing) var(--spacing) / calc(var(--spacing) * 2) calc(var(--spacing) * 2);
-}
-
 /* Layout Utilities */
 
 /**

package/dist/index.min.css

@@ -1,5 +1,5 @@
 /**
- * CSS Utility Functions v1.2.0
+ * CSS Utility Functions v1.2.1
  * Author: Yair Even-Or
  * Repository: https://github.com/yairEO/css-utility-functions
  *
@@ -49,12 +49,7 @@
   --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 --polka-dots(
-  --dot-color <color>: currentColor,
-  --dot-size <length-percentage>: 20%,
-  --spacing <length>: 5px,
-  --bg-color <color>: transparent
-) returns <image>{result:radial-gradient(var(--dot-color) calc(var(--dot-size) - 1px),var(--bg-color) var(--dot-size)) 0 0 /calc(var(--spacing) * 2) calc(var(--spacing) * 2),radial-gradient(var(--dot-color) calc(var(--dot-size) - 1px),var(--bg-color) var(--dot-size)) var(--spacing) var(--spacing) /calc(var(--spacing) * 2) calc(var(--spacing) * 2)}@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.2.0",
+  "version": "1.2.1",
   "description": "A collection of reusable CSS custom native functions using the @function syntax",
   "main": "dist/index.css",
   "style": "dist/index.css",
@@ -18,7 +18,7 @@
     "watch:html": "node build-html.js --watch",
     "dev": "concurrently \"npm run watch:html\" \"npm run watch\"",
     "prebuild": "npm run build:html",
-    "version": "npm run build:all"
+    "version": "npm run build:all && git add -A"
   },
   "keywords": [
     "css",

package/src/index.css

@@ -30,7 +30,6 @@
 @import './effects/shadow.css';
 @import './effects/bevel.css';
 @import './effects/diagonal-lines.css';
-@import './effects/polka-dots.css';
 
 /* Layout Utilities */
 @import './layout/neg.css';

package/src/effects/polka-dots.css

@@ -1,51 +0,0 @@
-/**
- * --polka-dots() — Polka Dot Pattern Background
- *
- * Generate a repeating polka dot pattern using two offset radial-gradient layers.
- * Returns a complete background value (image + position + size) that can be used
- * directly as a background property value.
- *
- * @param {color} --dot-color - Color of the dots, default: currentColor
- * @param {length-percentage} --dot-size - Size of each dot; accepts px or %. A 1px feather zone
- *   is applied at the edge for anti-aliasing. Default: 20%
- * @param {length} --spacing - Half the tile size; controls dot density, default: 5px
- * @param {color} --bg-color - Background color between dots, default: transparent
- * @returns {image} - Complete two-layer radial-gradient background value
- *
- * @example
- * .polka-bg {
- *   background: --polka-dots();
- * }
- *
- * @example
- * .custom-dots {
- *   background: --polka-dots(
- *     --dot-color: #3b82f6,
- *     --spacing: 10px,
- *     --dot-size: 30%
- *   );
- * }
- *
- * @example
- * .subtle-dots {
- *   color: #94a3b8;
- *   background: --polka-dots(
- *     --dot-color: currentColor,
- *     --spacing: 8px,
- *     --dot-size: 15%
- *   );
- * }
- */
-
-@function --polka-dots(
-  --dot-color <color>: currentColor,
-  --dot-size <length-percentage>: 20%,
-  --spacing <length>: 5px,
-  --bg-color <color>: transparent
-) returns <image> {
-  result:
-    radial-gradient(var(--dot-color) calc(var(--dot-size) - 1px), var(--bg-color) var(--dot-size))
-      0 0 / calc(var(--spacing) * 2) calc(var(--spacing) * 2),
-    radial-gradient(var(--dot-color) calc(var(--dot-size) - 1px), var(--bg-color) var(--dot-size))
-      var(--spacing) var(--spacing) / calc(var(--spacing) * 2) calc(var(--spacing) * 2);
-}