Fixes

src/commonMain/kotlin/nl/astraeus/css/properties/Color.kt

@@ -296,7 +296,8 @@ class Color(value: String) : CssProperty(value) {
         }
       }
 
-      if (saturation == 0) return RGBA(lightness, lightness, lightness)
+      val lightness255 = lightness * 255 / 100
+      if (saturation == 0) return RGBA(lightness255, lightness255, lightness255)
 
       // scale H, S, V values into 0..1 fractions
       val h = (hue % 360.0) / 360.0

src/commonMain/kotlin/nl/astraeus/css/style/CssBlock.kt

@@ -0,0 +1,6 @@
+package nl.astraeus.css.style
+
+data class CssBlock(
+  val selector: String,
+  val content: String
+)

src/commonMain/kotlin/nl/astraeus/css/style/Style.kt

@@ -78,6 +78,7 @@ abstract class CssGenerator {
     warnOnRedeclaration: Boolean = true,
     allowCommaInSelector: Boolean = false
   ): String {
+    val blocks = mutableListOf<CssBlock>()
     val builder = StringBuilder()
 
     for (name in definitions.keys) {
@@ -235,6 +236,7 @@ class ValueDescriptionProvider(
 
 }
 
+fun txt(name: String): DescriptionProvider = ValueDescriptionProvider(name)
 fun id(name: String): DescriptionProvider = ValueDescriptionProvider("#$name")
 fun cls(name: String): DescriptionProvider = ValueDescriptionProvider(".$name")
 fun attr(name: String): DescriptionProvider = ValueDescriptionProvider("[$name]")
@@ -380,6 +382,10 @@ open class Style : CssGenerator() {
     addStyle(":hover", style)
   }
 
+  fun pseudo(selector: DescriptionProvider, style: Css) {
+    addStyle("::${selector.description()}", style)
+  }
+
   fun visited(style: Css) {
     addStyle(":visited", style)
   }

src/commonTest/kotlin/nl/astraeus/css/CssNameExample.kt

@@ -0,0 +1,43 @@
+package nl.astraeus.css
+
+import nl.astraeus.css.properties.Color
+import nl.astraeus.css.style.DescriptionProvider
+import kotlin.test.Test
+
+private val CAPITAL_LETTER by lazy { Regex("[A-Z]") }
+
+fun String.hyphenize(): String =
+  replace(CAPITAL_LETTER) {
+    "-${it.value.lowercase()}"
+  }
+
+open class CssName(name: String? = null) : DescriptionProvider {
+  val name: String = if (name != null) {
+    "css-$name"
+  } else{
+    "css${this::class.simpleName?.hyphenize() ?: this::class}"
+  }
+
+  override fun description() = name
+}
+
+object MainTitle : CssName()
+object SectionTitle : CssName("sct-title")
+
+class CssNameExample {
+
+  @Test
+  fun testCssName() {
+    val css = style {
+      select(MainTitle) {
+        color(Color.white)
+      }
+
+      select(SectionTitle) {
+        color(Color.red)
+      }
+    }
+
+    println(css.generateCss())
+  }
+}

src/commonTest/kotlin/nl/astraeus/css/Examples.kt

@@ -0,0 +1,78 @@
+package nl.astraeus.css
+
+import nl.astraeus.css.properties.BorderStyle
+import nl.astraeus.css.properties.Color
+import nl.astraeus.css.properties.Measurement
+import nl.astraeus.css.properties.em
+import nl.astraeus.css.properties.hsla
+import nl.astraeus.css.properties.prc
+import nl.astraeus.css.properties.px
+import nl.astraeus.css.style.Style
+import nl.astraeus.css.style.cls
+import nl.astraeus.css.style.txt
+import kotlin.test.Test
+
+class Examples {
+
+  @Test
+  fun testColor() {
+    val color = hsla(0, 50, 50, 1.0)
+    val backgroundColor = Color.white
+
+    val css = style {
+      select(cls("button")) {
+        padding(5.px)
+
+        select("a") {
+          color(color)
+          backgroundColor(backgroundColor)
+
+          hover {
+            color(color.lighten(10))
+            backgroundColor(backgroundColor.darken(10))
+          }
+        }
+      }
+    }
+
+    println(css.generateCss())
+  }
+
+  @Test
+  fun testMixins() {
+    fun Style.borderStyles(borderWidth: Measurement = 2.px) {
+      borderWidth(borderWidth)
+      borderColor(Color.aquamarine)
+      borderStyle(BorderStyle.solid)
+    }
+
+    val css = style {
+      select(txt("a"), cls("button")) {
+        borderStyles()
+
+        color(Color.white)
+      }
+
+      select(cls("btn-primary")) {
+        borderStyles(3.px)
+        color(Color.blue)
+      }
+    }
+
+    println(css.generateCss())
+  }
+
+
+  @Test
+  fun testMeasurementss() {
+    val css = style {
+      select("body") {
+        fontSize(1.2.em)
+        borderWidth(3.px)
+        width(75.prc)
+      }
+    }
+
+    println(css.generateCss())
+  }
+}

src/commonTest/kotlin/nl/astraeus/css/TestCssBuilder.kt

@@ -180,27 +180,26 @@ class TestCssBuilder {
     println(css.generateCss())
   }
 
-
   @Test
   fun testOrWithComma() {
-    val css = style {
-      select("h1") {
-        color(Color.blue)
+    var excepted = false
+    try {
+      val css = style {
+        select("h1") {
+          color(Color.blue)
 
-        select("table") {
-          color(Color.red)
+          select("table") {
+            color(Color.red)
 
-          select("th, td") {
-            color(Color.green)
+            select("th, td") {
+              color(Color.green)
+            }
           }
         }
       }
-    }
 
-    var excepted = false
-    try {
       println(css.generateCss())
-    } catch(e: Exception) {
+    } catch (e: Exception) {
       excepted = true
       assertTrue {
         e is IllegalStateException
@@ -214,9 +213,8 @@ class TestCssBuilder {
     }
   }
 
-
   @Test
-  fun testAlhpaFunctions() {
+  fun testAlphaFunctions() {
     val hsl = hsl(1, 50, 50)
     val hsla = hsla(1, 50, 50, 0.5)
     val rgb = rgb(101, 111, 121)

src/jsMain/kotlin/nl/astraeus/css/Test.kt

@@ -1,30 +0,0 @@
-package nl.astraeus.css
-
-/*
-fun main() {
-  val sd = style {
-    select("#pipo") {
-      backgroundColor(hex(0xeeeeee))
-      fontFamily("Arial, Courier")
-      animationDelay(DelayDuration.initial)
-
-      select("div") {
-        color(hex(0x1b1b1b1))
-        alignContent(AlignContent.flexStart)
-        animationName("animname")
-        animationTimingFunction(
-          TimingFunction.cubicBezier(0.1, 0.2, 0.3, 0.4),
-          TimingFunction.easeInOut
-        )
-      }
-    }
-
-    val bla = hsla(1, 50,50,0.5)
-    bla.toRGBA()
-
-  }
-
-  //println(sd.generateCss())
-}
-
-*/