Grid Columns; Masks

allangomes · Aug 22, 2024 · 7c48868 · 7c48868
1 parent 62e3959
commit 7c48868
Show file tree

Hide file tree

Showing 23 changed files with 378 additions and 50 deletions.
diff --git a/gradle.properties b/gradle.properties
@@ -5,4 +5,4 @@ org.gradle.parallel=true
 org.gradle.caching=true
 
 group=io.github.allangomes
-version=0.0.2
+version=0.0.3
diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/core/Consts.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/core/Consts.kt
@@ -66,6 +66,12 @@ const val MARGIN_TOP = "margin-top"
 const val MARGIN_BOTTOM = "margin-bottom"
 const val MARGIN_INLINE_START = "margin-inline-start"
 const val MARGIN_INLINE_END = "margin-inline-end"
+const val MASK_IMAGE = "mask-image"
+const val MASK_ORIGIN = "mask-origin"
+const val MASK_POSITION = "mask-position"
+const val MASK_REPEAT = "mask-repeat"
+const val MASK_SIZE = "mask-size"
+
 
 const val MAX_HEIGHT = "max-height"
 const val MAX_WIDTH = "max-width"
@@ -85,10 +91,13 @@ const val JUSTIFY_SELF = "justify-self"
 const val GAP = "gap"
 const val GAP_COLUMN = "column-gap"
 const val GAP_ROW = "row-gap"
+const val GRID = "grid"
+const val GRID_TEMPLATE_COLUMNS = "grid-template-columns"
 
 const val ORDER = "order"
 const val OBJECT_FIT = "object-fit"
 const val OBJECT_POSITION = "object-position"
+const val OPACITY = "opacity"
 
 const val PADDING = "padding"
 const val PADDING_LEFT = "padding-left"
@@ -111,4 +120,6 @@ const val TOP = "top"
 
 const val VERTICAL_ALIGN = "vertical-align"
 
+const val WEBKIT = "-webkit-"
 const val WIDTH = "width"
+const val WHITE_SPACE = "white-space"
diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/core/WithInt.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/core/WithInt.kt
@@ -0,0 +1,10 @@
+package io.github.allangomes.kotlinwind.css.core
+
+class WithInt<T>(
+  private val block: Function1<Int, T>
+) {
+  operator fun get(value: Int): T {
+    return block(value)
+  }
+
+}
diff --git a/...es/kotlinwind/css/core/WithFloatAndInt.kt → ...angomes/kotlinwind/css/core/WithNumber.kt b/...es/kotlinwind/css/core/WithFloatAndInt.kt → ...angomes/kotlinwind/css/core/WithNumber.kt
@@ -1,13 +1,9 @@
 package io.github.allangomes.kotlinwind.css.core
 
-class WithFloatAndInt<T>(
+class WithNumber<T>(
   private val block: Function1<Float, T>
 ) {
-  operator fun get(value: Float): T {
-    return block(value)
-  }
-
-  operator fun get(value: Int): T {
+  operator fun get(value: Number): T {
     return block(value.toFloat())
   }
 

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/Opacity.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/Opacity.kt
@@ -0,0 +1,13 @@
+package io.github.allangomes.kotlinwind.css.features
+
+import io.github.allangomes.kotlinwind.css.api.KWScope
+import io.github.allangomes.kotlinwind.css.core.OPACITY
+import io.github.allangomes.kotlinwind.css.core.WithInt
+
+interface Opacity<T> : KWScope<T> {
+
+    val opacity: WithInt<T> get() = WithInt {
+        OPACITY value "${it.toFloat() / 100f}"
+    }
+
+}
diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionBottom.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionBottom.kt
@@ -3,7 +3,7 @@ package io.github.allangomes.kotlinwind.css.features
 import io.github.allangomes.kotlinwind.css.api.KWScope
 import io.github.allangomes.kotlinwind.css.core.BOTTOM
 import io.github.allangomes.kotlinwind.css.core.StyleValueMarker
-import io.github.allangomes.kotlinwind.css.core.WithFloatAndInt
+import io.github.allangomes.kotlinwind.css.core.WithNumber
 import io.github.allangomes.kotlinwind.css.core.WithPercentual
 
 @Suppress("PropertyName")
@@ -13,8 +13,8 @@ interface PositionBottom<T> : KWScope<T> {
    * bottom: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val bottom: WithFloatAndInt<T>
-    get() = WithFloatAndInt {
+  val bottom: WithNumber<T>
+    get() = WithNumber {
       val value = it * 0.25
       BOTTOM value "${value}rem"
     }

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionInset.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionInset.kt
@@ -10,7 +10,7 @@ interface PositionInset<T> : KWScope<T> {
    * inset: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val inset: WithFloatAndInt<T> get() = WithFloatAndInt {
+  val inset: WithNumber<T> get() = WithNumber {
     val value = it * 0.25
     INSET value "${value}rem"
   }
@@ -33,7 +33,7 @@ interface PositionInset<T> : KWScope<T> {
    * right: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val inset_x: WithFloatAndInt<T> get() = WithFloatAndInt {
+  val inset_x: WithNumber<T> get() = WithNumber {
     val value = it * 0.25
     LEFT value "${value}rem"
     RIGHT value "${value}rem"
@@ -64,8 +64,8 @@ interface PositionInset<T> : KWScope<T> {
    * bottom: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val inset_y: WithFloatAndInt<T>
-    get() = WithFloatAndInt {
+  val inset_y: WithNumber<T>
+    get() = WithNumber {
     val value = it * 0.25
     TOP value "${value}rem"
     BOTTOM value "${value}rem"
@@ -95,7 +95,7 @@ interface PositionInset<T> : KWScope<T> {
    * inset-inline-start: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val start: WithFloatAndInt<T> get() = WithFloatAndInt {
+  val start: WithNumber<T> get() = WithNumber {
     val value = it * 0.25
     INSET_INLINE_START value "${value}rem"
   }
@@ -104,7 +104,7 @@ interface PositionInset<T> : KWScope<T> {
    * inset-inline-end: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val end: WithFloatAndInt<T> get() = WithFloatAndInt {
+  val end: WithNumber<T> get() = WithNumber {
     val value = it * 0.25
     INSET_INLINE_END value "${value}rem"
   }

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionLeft.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionLeft.kt
@@ -3,7 +3,7 @@ package io.github.allangomes.kotlinwind.css.features
 import io.github.allangomes.kotlinwind.css.api.KWScope
 import io.github.allangomes.kotlinwind.css.core.LEFT
 import io.github.allangomes.kotlinwind.css.core.StyleValueMarker
-import io.github.allangomes.kotlinwind.css.core.WithFloatAndInt
+import io.github.allangomes.kotlinwind.css.core.WithNumber
 import io.github.allangomes.kotlinwind.css.core.WithPercentual
 
 @Suppress("PropertyName")
@@ -13,8 +13,8 @@ interface PositionLeft<T> : KWScope<T> {
    * left: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val left: WithFloatAndInt<T>
-    get() = WithFloatAndInt {
+  val left: WithNumber<T>
+    get() = WithNumber {
     val value = it * 0.25
     LEFT value "${value}rem"
   }

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionRight.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionRight.kt
@@ -3,7 +3,7 @@ package io.github.allangomes.kotlinwind.css.features
 import io.github.allangomes.kotlinwind.css.api.KWScope
 import io.github.allangomes.kotlinwind.css.core.RIGHT
 import io.github.allangomes.kotlinwind.css.core.StyleValueMarker
-import io.github.allangomes.kotlinwind.css.core.WithFloatAndInt
+import io.github.allangomes.kotlinwind.css.core.WithNumber
 import io.github.allangomes.kotlinwind.css.core.WithPercentual
 
 @Suppress("PropertyName")
@@ -13,8 +13,8 @@ interface PositionRight<T> : KWScope<T> {
    * right: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val right: WithFloatAndInt<T>
-    get() = WithFloatAndInt {
+  val right: WithNumber<T>
+    get() = WithNumber {
       val value = it * 0.25
       RIGHT value "${value}rem"
     }

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionTop.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/PositionTop.kt
@@ -3,7 +3,7 @@ package io.github.allangomes.kotlinwind.css.features
 import io.github.allangomes.kotlinwind.css.api.KWScope
 import io.github.allangomes.kotlinwind.css.core.StyleValueMarker
 import io.github.allangomes.kotlinwind.css.core.TOP
-import io.github.allangomes.kotlinwind.css.core.WithFloatAndInt
+import io.github.allangomes.kotlinwind.css.core.WithNumber
 import io.github.allangomes.kotlinwind.css.core.WithPercentual
 
 @Suppress("PropertyName")
@@ -13,8 +13,8 @@ interface PositionTop<T> : KWScope<T> {
    * top: {number} * 0.25rem;
    */
   @StyleValueMarker
-  val top: WithFloatAndInt<T>
-    get() = WithFloatAndInt {
+  val top: WithNumber<T>
+    get() = WithNumber {
       val value = it * 0.25
       TOP value "${value}rem"
     }

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/Root.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/Root.kt
@@ -10,6 +10,7 @@ import io.github.allangomes.kotlinwind.css.features.flex.Flex
 import io.github.allangomes.kotlinwind.css.features.font.Font
 import io.github.allangomes.kotlinwind.css.features.grid.Grid
 import io.github.allangomes.kotlinwind.css.features.margin.Margin
+import io.github.allangomes.kotlinwind.css.features.mask.Mask
 import io.github.allangomes.kotlinwind.css.features.padding.Padding
 import io.github.allangomes.kotlinwind.css.features.sizing.Sizing
 import io.github.allangomes.kotlinwind.css.features.text.Text
@@ -18,25 +19,26 @@ import io.github.allangomes.kotlinwind.css.features.text_decoration.TextDecorati
 typealias StyleBuilder = Root.() -> Unit
 
 class Root : KWRoot,
-  AspectRatio<KWRoot>,
-  BreakAfter<KWRoot>,
-  BreakBefore<KWRoot>,
-  Clear<KWRoot>,
-  Display<KWRoot>,
-  Floats<KWRoot>,
-  ObjectFit<KWRoot>,
-  ObjectPosition<KWRoot>,
-  Position<KWRoot>,
-  PositionBottom<KWRoot>,
-  PositionInset<KWRoot>,
-  PositionLeft<KWRoot>,
-  PositionRight<KWRoot>,
-  PositionTop<KWRoot>,
-  Sizing<KWRoot>
+  AspectRatio<Root>,
+  BreakAfter<Root>,
+  BreakBefore<Root>,
+  Clear<Root>,
+  Display<Root>,
+  Floats<Root>,
+  ObjectFit<Root>,
+  ObjectPosition<Root>,
+  Opacity<Root>,
+  Position<Root>,
+  PositionBottom<Root>,
+  PositionInset<Root>,
+  PositionLeft<Root>,
+  PositionRight<Root>,
+  PositionTop<Root>,
+  Sizing<Root>
 {
   private val styles: MutableList<Style> = mutableListOf()
 
-  override fun String.value(value: String): KWRoot {
+  override fun String.value(value: String): Root {
     append(Style(this, value))
     return this@Root
   }
@@ -52,6 +54,9 @@ class Root : KWRoot,
   @StyleKeyMarker
   val background: Background get() = Background(this)
 
+  @StyleKeyMarker
+  val mask: Mask get() = Mask(this)
+
   @StyleKeyMarker
   val border: io.github.allangomes.kotlinwind.css.features.border.Border
     get() = io.github.allangomes.kotlinwind.css.features.border.Border(

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/commom/Gap.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/commom/Gap.kt
@@ -11,23 +11,23 @@ interface Gap<T> : KWScope<T> {
   /** gap: {number} * 0.25rem
    * - [documentation](https://tailwindcss.com/docs/gap)
    * */
-  val gap: WithFloatAndInt<T> get() = WithFloatAndInt {
+  val gap: WithNumber<T> get() = WithNumber {
     GAP value "${(it * 0.25f)}rem"
   }
 
   @StyleValueMarker
   /** column-gap: {number} * 0.25rem
    * - [documentation](https://tailwindcss.com/docs/gap)
    * */
-  val gap_x: WithFloatAndInt<T> get() = WithFloatAndInt {
+  val gap_x: WithNumber<T> get() = WithNumber {
     GAP_COLUMN value "${(it * 0.25f)}rem"
   }
 
   @StyleValueMarker
   /** row-gap: {number} * 0.25rem
    * - [documentation](https://tailwindcss.com/docs/gap)
    * */
-  val gap_y: WithFloatAndInt<T> get() = WithFloatAndInt {
+  val gap_y: WithNumber<T> get() = WithNumber {
     GAP_ROW value "${(it * 0.25f)}rem"
   }
 

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/font/FontSize.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/font/FontSize.kt
@@ -2,10 +2,7 @@ package io.github.allangomes.kotlinwind.css.features.font
 
 import io.github.allangomes.kotlinwind.css.api.KWScope
 import io.github.allangomes.kotlinwind.css.config.Theme
-import io.github.allangomes.kotlinwind.css.core.FONT_SIZE
-import io.github.allangomes.kotlinwind.css.core.LINE_HEIGHT
-import io.github.allangomes.kotlinwind.css.core.StyleValueMarker
-import io.github.allangomes.kotlinwind.css.core.WithTokenAndNumber
+import io.github.allangomes.kotlinwind.css.core.*
 import io.github.allangomes.kotlinwind.css.core.tokens.Token
 import io.github.allangomes.kotlinwind.css.features.commom.Size
 
@@ -35,6 +32,12 @@ interface FontSize<T> : KWScope<T>, Size<T> {
     LINE_HEIGHT value "${size}rem"
   })
 
+  @StyleValueMarker
+  val px: WithInt<T> get() = WithInt({
+    FONT_SIZE value "${it}px"
+    LINE_HEIGHT value "1"
+  })
+
   @StyleValueMarker
   operator fun get(value: Token.FontSize): T {
     return size[value]

diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/grid/Grid.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/grid/Grid.kt
@@ -12,4 +12,5 @@ class Grid(kw: KWRoot) :
   JustifyContent<Grid>,
   JustifyItems<Grid>,
   JustifySelf<Grid>,
-  Order<Grid>
+  Order<Grid>,
+  GridTemplateColumns<Grid>
diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/grid/GridTemplateColumns.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/grid/GridTemplateColumns.kt
@@ -0,0 +1,26 @@
+package io.github.allangomes.kotlinwind.css.features.grid
+
+import io.github.allangomes.kotlinwind.css.api.KWScope
+import io.github.allangomes.kotlinwind.css.core.DISPLAY
+import io.github.allangomes.kotlinwind.css.core.GRID
+import io.github.allangomes.kotlinwind.css.core.GRID_TEMPLATE_COLUMNS
+import io.github.allangomes.kotlinwind.css.core.WithInt
+
+@Suppress("PropertyName")
+interface GridTemplateColumns<T> : KWScope<T> {
+
+    val cols: WithInt<T> get() = WithInt {
+        DISPLAY value GRID
+        GRID_TEMPLATE_COLUMNS value "repeat($it, minmax(0, 1fr))"
+    }
+
+    val cols_none: WithInt<T> get() = WithInt {
+        GRID_TEMPLATE_COLUMNS value "none"
+    }
+
+    val cols_subgrid: WithInt<T> get() = WithInt {
+        DISPLAY value GRID
+        GRID_TEMPLATE_COLUMNS value "subgrid"
+    }
+
+}
diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/mask/Mask.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/mask/Mask.kt
@@ -0,0 +1,12 @@
+package io.github.allangomes.kotlinwind.css.features.mask
+
+import io.github.allangomes.kotlinwind.css.api.KWRoot
+import io.github.allangomes.kotlinwind.css.api.KWScope
+
+class Mask(kw: KWRoot) :
+  KWScope.Scoped<Mask>(kw),
+  MaskImage<Mask>,
+  MaskOrigin<Mask>,
+  MaskPosition<Mask>,
+  MaskRepeat<Mask>,
+  MaskSize<Mask>
diff --git a/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/mask/MaskImage.kt b/lib/src/main/kotlin/io/github/allangomes/kotlinwind/css/features/mask/MaskImage.kt
@@ -0,0 +1,21 @@
+package io.github.allangomes.kotlinwind.css.features.mask
+
+import io.github.allangomes.kotlinwind.css.api.KWScope
+import io.github.allangomes.kotlinwind.css.core.*
+
+@Suppress("PropertyName")
+interface MaskImage<T> : KWScope<T> {
+
+  @StyleValueMarker
+  val image: WithToken<T, String> get() = WithToken {
+    WEBKIT+MASK_IMAGE value "url('$it')"
+    MASK_IMAGE value "url('$it')"
+  }
+
+  @StyleValueMarker
+  val image_none get() = run {
+    WEBKIT+MASK_IMAGE value "none"
+    MASK_IMAGE value "none"
+  }
+
+}