feat: Add order and opacity shorthand styles (#119)

homebound-team · Mar 5, 2024 · c5e5d2c · c5e5d2c
1 parent c3679da
commit c5e5d2c
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 1 deletion.
diff --git a/packages/template-tachyons/src/Css.ts b/packages/template-tachyons/src/Css.ts
@@ -801,6 +801,10 @@ class CssBuilder<T extends Properties> {
   flexWrap(value: Properties["flexWrap"]) {
     return this.add("flexWrap", value);
   }
+  /** Sets `order: value`. */
+  order(value: Properties["order"]) {
+    return this.add("order", value);
+  }
 
   // float
   /** Sets `float: "left"`. */
@@ -1241,6 +1245,32 @@ class CssBuilder<T extends Properties> {
     return this.add("objectFit", value);
   }
 
+  // opacity
+  /** Sets `opacity: "0"`. */
+  get o0() {
+    return this.add("opacity", "0");
+  }
+  /** Sets `opacity: "0.25"`. */
+  get o25() {
+    return this.add("opacity", "0.25");
+  }
+  /** Sets `opacity: "0.5"`. */
+  get o50() {
+    return this.add("opacity", "0.5");
+  }
+  /** Sets `opacity: "0.75"`. */
+  get o75() {
+    return this.add("opacity", "0.75");
+  }
+  /** Sets `opacity: "1"`. */
+  get o100() {
+    return this.add("opacity", "1");
+  }
+  /** Sets `opacity: value`. */
+  o(value: Properties["opacity"]) {
+    return this.add("opacity", value);
+  }
+
   // outline
   /** Sets `outline: "1px solid"`. */
   get outline1() {

diff --git a/packages/testing-tachyons/src/Css.ts b/packages/testing-tachyons/src/Css.ts
@@ -749,6 +749,10 @@ class CssBuilder<T extends Properties> {
   flexWrap(value: Properties["flexWrap"]) {
     return this.add("flexWrap", value);
   }
+  /** Sets `order: value`. */
+  order(value: Properties["order"]) {
+    return this.add("order", value);
+  }
 
   // float
   /** Sets `float: "left"`. */
@@ -1141,6 +1145,32 @@ class CssBuilder<T extends Properties> {
     return this.add("objectFit", value);
   }
 
+  // opacity
+  /** Sets `opacity: "0"`. */
+  get o0() {
+    return this.add("opacity", "0");
+  }
+  /** Sets `opacity: "0.25"`. */
+  get o25() {
+    return this.add("opacity", "0.25");
+  }
+  /** Sets `opacity: "0.5"`. */
+  get o50() {
+    return this.add("opacity", "0.5");
+  }
+  /** Sets `opacity: "0.75"`. */
+  get o75() {
+    return this.add("opacity", "0.75");
+  }
+  /** Sets `opacity: "1"`. */
+  get o100() {
+    return this.add("opacity", "1");
+  }
+  /** Sets `opacity: value`. */
+  o(value: Properties["opacity"]) {
+    return this.add("opacity", value);
+  }
+
   // outline
   /** Sets `outline: "1px solid"`. */
   get outline1() {

diff --git a/packages/truss/src/sections/tachyons/flexbox.ts b/packages/truss/src/sections/tachyons/flexbox.ts
@@ -1,5 +1,5 @@
 import { CreateMethodsFn } from "src/config";
-import { newMethodsForProp } from "src/methods";
+import { newMethodsForProp, newParamMethod } from "src/methods";
 
 // We originally used the tachyons mappings:
 // https://github.com/tachyons-css/tachyons/blob/master/src/_flexbox.css#L17
@@ -171,4 +171,6 @@ export const flexbox: CreateMethodsFn = () => [
     },
     "flexWrap",
   ),
+
+  newParamMethod("order", "order"),
 ];
diff --git a/packages/truss/src/sections/tachyons/index.ts b/packages/truss/src/sections/tachyons/index.ts
@@ -32,6 +32,7 @@ import { width } from "src/sections/tachyons/widths";
 import { wordBreak } from "src/sections/tachyons/wordBreak";
 import { zIndex } from "src/sections/tachyons/zIndex";
 import { container } from "src/sections/tachyons/container";
+import { opacity } from "src/sections/tachyons/opacity";
 
 export const defaultSections = {
   border,
@@ -51,6 +52,7 @@ export const defaultSections = {
   height,
   lineClamp,
   objectFit,
+  opacity,
   outline,
   overflow,
   position,

diff --git a/packages/truss/src/sections/tachyons/opacity.ts b/packages/truss/src/sections/tachyons/opacity.ts
@@ -0,0 +1,16 @@
+import { CreateMethodsFn } from "src/config";
+import { newMethodsForProp } from "src/methods";
+
+export const opacity: CreateMethodsFn = () => [
+  ...newMethodsForProp(
+    "opacity",
+    {
+      o0: "0",
+      o25: "0.25",
+      o50: "0.5",
+      o75: "0.75",
+      o100: "1",
+    },
+    "o",
+  ),
+];