css-utility-functions 1.1.0 → 1.2.0

package/README.md

@@ -178,6 +178,23 @@ 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
@@ -231,6 +248,7 @@ 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.1.0
+ * CSS Utility Functions v1.2.0
  * Author: Yair Even-Or
  * Repository: https://github.com/yairEO/css-utility-functions
  *
@@ -507,6 +507,58 @@
   );
 }
 
+/**
+ * --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.1.0
+ * CSS Utility Functions v1.2.0
  * Author: Yair Even-Or
  * Repository: https://github.com/yairEO/css-utility-functions
  *
@@ -49,7 +49,12 @@
   --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 --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 --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(
   --a <length-percentage>,
   --b <length-percentage>,
   --t <number>: 0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-utility-functions",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A collection of reusable CSS custom native functions using the @function syntax",
   "main": "dist/index.css",
   "style": "dist/index.css",

package/src/effects/polka-dots.css

@@ -0,0 +1,51 @@
+/**
+ * --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);
+}

package/src/index.css

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