prewindcss 1.2.5 → 1.2.7

package/README.md

@@ -28,7 +28,7 @@ Create a `styles.css` file that sets up CSS layers, imports your theme and Prewi
 @layer reset, styles, prewind;
 
 @import url("theme.css");
-@import url("https://unpkg.com/prewindcss@1.2.5");
+@import url("https://unpkg.com/prewindcss@1.2.7");
 
 @layer styles {
   body {
@@ -212,6 +212,15 @@ Available colors: `brand-1`, `brand-1-light`, `brand-2`, `brand-2-light`, `brand
 
 Opacity values: `0`, `10`, `20`, `30`, `40`, `50`, `60`, `70`, `80`, `90`, `100`
 
+**Repeat:**
+
+| Class          | Property                       |
+| -------------- | ------------------------------ |
+| `bg-repeat`    | `background-repeat: repeat`    |
+| `bg-repeat-x`  | `background-repeat: repeat-x`  |
+| `bg-repeat-y`  | `background-repeat: repeat-y`  |
+| `bg-no-repeat` | `background-repeat: no-repeat` |
+
 ### Borders
 
 **Width:**
@@ -547,6 +556,13 @@ Same colors as backgrounds.
 | `text-right`   | `text-align: right`   |
 | `text-justify` | `text-align: justify` |
 
+**Style:**
+
+| Class        | Property             |
+| ------------ | -------------------- |
+| `italic`     | `font-style: italic` |
+| `not-italic` | `font-style: normal` |
+
 **Decoration:**
 
 | Class          | Property                             |
@@ -557,10 +573,13 @@ Same colors as backgrounds.
 
 **Weight:**
 
-| Class         | Property                          |
-| ------------- | --------------------------------- |
-| `font-normal` | `font-weight: var(--font-normal)` |
-| `font-bold`   | `font-weight: var(--font-bold)`   |
+| Class           | Property                            |
+| --------------- | ----------------------------------- |
+| `font-thin`     | `font-weight: var(--font-thin)`     |
+| `font-normal`   | `font-weight: var(--font-normal)`   |
+| `font-semibold` | `font-weight: var(--font-semibold)` |
+| `font-bold`     | `font-weight: var(--font-bold)`     |
+| `font-heavy`    | `font-weight: var(--font-heavy)`    |
 
 **Family:**
 

package/example-site/theme.css

@@ -5,14 +5,17 @@
   ----------------------------------------
 */
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700;900&display=swap");
 
 :root {
   /* Fonts */
   --font-body: "Inter", system-ui, sans-serif;
   --font-heading: "Inter", system-ui, sans-serif;
+  --font-thin: 200;
   --font-normal: 400;
+  --font-semibold: 600;
   --font-bold: 700;
+  --font-heavy: 900;
 
   /* Brand Colors */
   --brand-1: #0284c7; /* Sky blue */
@@ -57,8 +60,10 @@
 
   /* Shadow */
   --shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
-  --shadow-sm: 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-sm:
+    0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 
   /* Container */
   --container-max: 1200px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prewindcss",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Lightweight, no-build Tailwind alternative",
   "type": "module",
   "main": "prewind.css",

package/prewind.css

@@ -356,6 +356,20 @@
     background: rgb(from var(--highlight) r g b / var(--bg-opacity, 1));
   }
 
+  /* Background Repeat */
+  .bg-repeat {
+    background-repeat: repeat;
+  }
+  .bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+  .bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
   /* Colors - Text */
   .text-brand-1 {
     color: var(--brand-1);
@@ -1783,6 +1797,14 @@
     text-align: justify;
   }
 
+  /* Font Style */
+  .italic {
+    font-style: italic;
+  }
+  .not-italic {
+    font-style: normal;
+  }
+
   /* Text Decoration */
   .underline {
     text-decoration-line: underline;
@@ -1862,12 +1884,21 @@
   }
 
   /* Font Weight */
+  .font-thin {
+    font-weight: var(--font-thin);
+  }
   .font-normal {
     font-weight: var(--font-normal);
   }
+  .font-semibold {
+    font-weight: var(--font-semibold);
+  }
   .font-bold {
     font-weight: var(--font-bold);
   }
+  .font-heavy {
+    font-weight: var(--font-heavy);
+  }
 
   /* User Select */
   .select-none {

package/theme.css

@@ -5,14 +5,17 @@
   ----------------------------------------
 */
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700;900&display=swap");
 
 :root {
   /* Fonts */
   --font-body: "Inter", system-ui, sans-serif;
   --font-heading: "Inter", system-ui, sans-serif;
+  --font-thin: 200;
   --font-normal: 400;
+  --font-semibold: 600;
   --font-bold: 700;
+  --font-heavy: 900;
 
   /* Brand Colors */
   --brand-1: #0284c7; /* Sky blue */
@@ -57,8 +60,10 @@
 
   /* Shadow */
   --shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
-  --shadow-sm: 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-sm:
+    0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 
   /* Container */
   --container-max: 1200px;