diff --git a/examples/falling_balls_with_web/build.gradle.kts b/examples/falling_balls_with_web/build.gradle.kts
index bb91a8d17f..1f61ef1466 100644
--- a/examples/falling_balls_with_web/build.gradle.kts
+++ b/examples/falling_balls_with_web/build.gradle.kts
@@ -2,8 +2,8 @@ import org.jetbrains.compose.compose
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 
 plugins {
-    kotlin("multiplatform") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build235"
+    kotlin("multiplatform") version "1.5.21"
+    id("org.jetbrains.compose") version "0.5.0-build270"
 }
 
 version = "1.0-SNAPSHOT"
diff --git a/examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt b/examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt
index 594f333827..557533198e 100644
--- a/examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt
+++ b/examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt
@@ -3,7 +3,7 @@ object Deps {
     object JetBrains {
         object Kotlin {
             // __KOTLIN_COMPOSE_VERSION__
-            private const val VERSION = "1.5.10"
+            private const val VERSION = "1.5.21"
             const val gradlePlugin = "org.jetbrains.kotlin:kotlin-gradle-plugin:$VERSION"
             const val testCommon = "org.jetbrains.kotlin:kotlin-test-common:$VERSION"
             const val testJunit = "org.jetbrains.kotlin:kotlin-test-junit:$VERSION"
@@ -13,7 +13,7 @@ object Deps {
 
         object Compose {
             // __LATEST_COMPOSE_RELEASE_VERSION__
-            private const val VERSION = "0.5.0-build235"
+            private const val VERSION = "0.5.0-build270"
             const val gradlePlugin = "org.jetbrains.compose:compose-gradle-plugin:$VERSION"
         }
     }
diff --git a/examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt b/examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt
index e4dedb27cc..7db4874b18 100644
--- a/examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt
+++ b/examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt
@@ -43,7 +43,7 @@ fun MaterialCheckbox(
                 attrs = {
                     classes("filled-in")
                     if (checked) checked()
-                    onCheckboxInput { onCheckedChange(it.checked) }
+                    onChange { onCheckedChange(it.value) }
                 }
             )
 
@@ -85,7 +85,7 @@ fun MaterialTextArea(
             attrs = {
                 id("text_area_add_todo")
                 classes("materialize-textarea")
-                onTextInput { onTextChanged(it.inputValue) }
+                onInput { onTextChanged(it.value) }
                 style {
                     width(100.percent)
                     height(100.percent)
diff --git a/examples/web-compose-bird/build.gradle.kts b/examples/web-compose-bird/build.gradle.kts
index 821321b27c..3c27cb5e45 100644
--- a/examples/web-compose-bird/build.gradle.kts
+++ b/examples/web-compose-bird/build.gradle.kts
@@ -1,7 +1,7 @@
 // Add compose gradle plugin
 plugins {
     kotlin("multiplatform") version "1.5.21"
-    id("org.jetbrains.compose") version "0.5.0-build262"
+    id("org.jetbrains.compose") version "0.5.0-build270"
 }
 group = "com.theapache64.composebird"
 version = "1.0.0-alpha01"
diff --git a/examples/web-getting-started/build.gradle.kts b/examples/web-getting-started/build.gradle.kts
index e4da7cc0ed..042c67327f 100644
--- a/examples/web-getting-started/build.gradle.kts
+++ b/examples/web-getting-started/build.gradle.kts
@@ -1,6 +1,6 @@
 plugins {
-    kotlin("multiplatform") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build235"
+    kotlin("multiplatform") version "1.5.21"
+    id("org.jetbrains.compose") version "0.5.0-build270"
 }
 
 repositories {
diff --git a/examples/web-with-react/build.gradle.kts b/examples/web-with-react/build.gradle.kts
index 1a108cd64f..34b34c468d 100644
--- a/examples/web-with-react/build.gradle.kts
+++ b/examples/web-with-react/build.gradle.kts
@@ -1,6 +1,6 @@
 plugins {
-	kotlin("multiplatform") version "1.5.10"
-	id("org.jetbrains.compose") version "0.5.0-build235"
+	kotlin("multiplatform") version "1.5.21"
+	id("org.jetbrains.compose") version "0.5.0-build270"
 }
 
 repositories {
diff --git a/examples/web_landing/build.gradle.kts b/examples/web_landing/build.gradle.kts
index d5785e87e6..903f66afea 100644
--- a/examples/web_landing/build.gradle.kts
+++ b/examples/web_landing/build.gradle.kts
@@ -1,6 +1,6 @@
 plugins {
-    kotlin("multiplatform") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build235"
+    kotlin("multiplatform") version "1.5.21"
+    id("org.jetbrains.compose") version "0.5.0-build270"
 }
 
 repositories {
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
index c2daa1f94f..cc5d810eb0 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
@@ -84,7 +84,7 @@ private fun CardWithList(card: CardWithListPresentation) {
         Ul(attrs = {
             classes(WtTexts.wtText2)
         }) {
-            card.list.forEachIndexed { ix, it ->
+            card.list.forEachIndexed { _, it ->
                 Li({
                     style {
                         property("padding-top", 24.px)
@@ -93,4 +93,4 @@ private fun CardWithList(card: CardWithListPresentation) {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
index e2f40d6a7d..89d907dd27 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
@@ -15,7 +15,7 @@ import org.jetbrains.compose.web.dom.Text
 import com.sample.style.AppStylesheet
 import org.jetbrains.compose.web.attributes.value
 
-private object SwitcherVariables : CSSVariables {
+private object SwitcherVariables {
     val labelWidth by variable<CSSpxValue>()
     val labelPadding by variable<CSSpxValue>()
 }
@@ -23,7 +23,7 @@ private object SwitcherVariables : CSSVariables {
 object SwitcherStylesheet : StyleSheet(AppStylesheet) {
     val boxed by style {
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 SwitcherVariables.labelWidth(48.px)
                 SwitcherVariables.labelPadding(5.px)
@@ -44,7 +44,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
                 color(Color("transparent"))
                 borderRadius(20.px, 20.px, 20.px)
             }
-            color("#aaa")
+            color(Color("#aaa"))
         }
 
         border {
@@ -66,7 +66,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
                 color(Color("#167dff"))
                 borderRadius(20.px, 20.px, 20.px)
             }
-            color("#000")
+            color(Color("#000"))
         }
     }
 }
@@ -82,9 +82,9 @@ fun CodeSampleSwitcher(count: Int, current: Int, onSelect: (Int) -> Unit) {
                 value("snippet$ix")
                 id("snippet$ix")
                 if (current == ix) checked()
-                onRadioInput { onSelect(ix) }
+                onChange { onSelect(ix) }
             })
             Label(forId = "snippet$ix") { Text("${ix + 1}") }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
index 0a74c3fdbb..35111abca0 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
@@ -236,7 +236,7 @@ private fun TitledCodeSample(title: String, code: String) {
     Div({
         classes(WtOffsets.wtTopOffset24)
         style {
-            backgroundColor(Color.RGBA(39, 40, 44, 0.05))
+            backgroundColor(rgba(39, 40, 44, 0.05))
             borderRadius(8.px, 8.px, 8.px)
             property("padding", "12px 16px")
         }
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
index c5228a7a6d..e76f4206c3 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
@@ -121,7 +121,7 @@ private fun IntroCodeSample() {
     Div({
         style {
             marginTop(24.px)
-            backgroundColor(Color.RGBA(39, 40, 44, 0.05))
+            backgroundColor(rgba(39, 40, 44, 0.05))
             borderRadius(8.px)
             property("font-family", "'JetBrains Mono', monospace")
         }
@@ -149,7 +149,7 @@ private fun IntroCodeSample() {
             style {
                 height(1.px)
                 border(width = 0.px)
-                backgroundColor(Color.RGBA(39, 40, 44, 0.15))
+                backgroundColor(rgba(39, 40, 44, 0.15))
             }
         })
 
@@ -220,4 +220,4 @@ private fun ComposeWebStatusMessage() {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
index 3c9605cbe1..0450ebd6a2 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
@@ -3,9 +3,9 @@ package com.sample.style
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.css.selectors.CSSSelector
 
-object AppCSSVariables : CSSVariables {
-    val wtColorGreyLight by variable<Color>()
-    val wtColorGreyDark by variable<Color>()
+object AppCSSVariables {
+    val wtColorGreyLight by variable<CSSColorValue>()
+    val wtColorGreyDark by variable<CSSColorValue>()
 
     val wtOffsetTopUnit by variable<CSSUnitValue>()
     val wtHorizontalLayoutGutter by variable<CSSUnitValue>()
@@ -39,11 +39,11 @@ object AppStylesheet : StyleSheet() {
         top((-32).px)
         marginLeft(8.px)
         fontSize(15.px)
-        backgroundColor(Color.RGBA(39, 40, 44, .05))
-        color(Color.RGBA(39,40,44,.7))
+        backgroundColor(rgba(39, 40, 44, .05))
+        color(rgba(39,40,44,.7))
         borderRadius(4.px, 4.px, 4.px)
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 top((-16).px)
             }
@@ -66,7 +66,7 @@ object AppStylesheet : StyleSheet() {
             margin(0.px)
         }
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             CSSSelector.Universal style {
                 AppCSSVariables.wtOffsetTopUnit(16.px)
                 AppCSSVariables.wtFlowUnit(16.px)
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt
index b603796b05..7c39c9e39a 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt
@@ -10,19 +10,19 @@ object WtCards : StyleSheet(AppStylesheet) {
         property("min-height", 0)
         property("box-sizing", "border-box")
     }
-    
+
     val wtCardThemeLight by style {
-        border(color = Color.RGBA(39,40,44,.2))
-        color("#27282c")
-        backgroundColor("white")
+        border(color = rgba(39,40,44,.2))
+        color(Color("#27282c"))
+        backgroundColor(Color("white"))
     }
 
     val wtCardThemeDark by style {
-        backgroundColor(Color.RGBA(255, 255, 255, 0.05))
-        color(Color.RGBA(255, 255, 255, 0.6))
+        backgroundColor(rgba(255, 255, 255, 0.05))
+        color(rgba(255, 255, 255, 0.6))
         border(0.px)
     }
-    
+
     val wtCardSection by style {
         position(Position.Relative)
         property("overflow", "auto")
@@ -31,19 +31,19 @@ object WtCards : StyleSheet(AppStylesheet) {
         property("box-sizing", "border-box")
         property("padding", "24px 32px")
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style { padding(16.px) }
         }
     }
-    
+
     val wtVerticalFlex by style {
         display(DisplayStyle.Flex)
         flexDirection(FlexDirection.Column)
         alignItems(AlignItems.FlexStart)
     }
-    
+
     val wtVerticalFlexGrow by style {
         flexGrow(1)
         property("max-width", 100.percent)
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt
index 525a11018f..6be3f12ab6 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt
@@ -9,6 +9,7 @@ import org.jetbrains.compose.web.css.maxWidth
 import org.jetbrains.compose.web.css.media
 import org.jetbrains.compose.web.css.percent
 import org.jetbrains.compose.web.css.px
+import org.jetbrains.compose.web.css.mediaMaxWidth
 import org.jetbrains.compose.web.css.selectors.CSSSelector
 
 fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
@@ -16,7 +17,7 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
     cssSelector: CSSSelector,
     rulesBuild: TBuilder.() -> Unit
 ) {
-    media(maxWidth(value)) {
+    media(mediaMaxWidth(value)) {
         cssSelector style rulesBuild
     }
 }
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt
index 78bbb890a7..187cf346e9 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt
@@ -11,7 +11,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
         property("padding-right", 22.px)
         property("max-width", 1276.px)
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 property("max-width", 100.percent)
                 property("padding-left", 16.px)
@@ -19,7 +19,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
             }
         }
 
-        media(maxWidth(1276.px)) {
+        media(mediaMaxWidth(1276.px)) {
             self style {
                 property("max-width", 996.px)
                 property("padding-left", 22.px)
@@ -27,7 +27,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
             }
         }
 
-        media(maxWidth(1000.px)) {
+        media(mediaMaxWidth(1000.px)) {
             self style {
                 property("max-width", 100.percent)
                 property("padding-left", 22.px)
@@ -35,4 +35,4 @@ object WtContainer : StyleSheet(AppStylesheet) {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt
index 8868c2099f..2930f6f395 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt
@@ -8,7 +8,7 @@ object WtDisplay : StyleSheet(AppStylesheet) {
     }
 
     val wtDisplayMdBlock by style {
-        media(maxWidth(1000.px)) {
+        media(mediaMaxWidth(1000.px)) {
             self style {
                 display(DisplayStyle.Block)
             }
@@ -16,10 +16,10 @@ object WtDisplay : StyleSheet(AppStylesheet) {
     }
 
     val wtDisplayMdNone by style {
-        media(maxWidth(1000.px)) {
+        media(mediaMaxWidth(1000.px)) {
             self style {
                 display(DisplayStyle.None)
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt
index 1f47befae9..ba70d247c0 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt
@@ -22,9 +22,9 @@ object WtOffsets : StyleSheet(AppStylesheet) {
     val wtTopOffset48 by style {
         marginTop(48.px)
     }
-    
+
     val wtTopOffsetSm12 by style {
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 marginTop(12.px)
             }
@@ -32,10 +32,10 @@ object WtOffsets : StyleSheet(AppStylesheet) {
     }
 
     val wtTopOffsetSm24 by style {
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 marginTop(24.px)
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt
index cbca28aabc..bc6dc626dc 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt
@@ -23,7 +23,7 @@ object WtRows : StyleSheet(AppStylesheet) {
     val wtRowSizeM by style {
         AppCSSVariables.wtHorizontalLayoutGutter(16.px)
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 AppCSSVariables.wtHorizontalLayoutGutter(8.px)
             }
@@ -39,4 +39,4 @@ object WtRows : StyleSheet(AppStylesheet) {
             alignItems(AlignItems.Center)
         }
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt
index 9ff4a403d6..93580a690a 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt
@@ -12,16 +12,16 @@ object WtSections : StyleSheet(AppStylesheet) {
             propertyName = "padding-bottom",
             value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})"
         )
-        backgroundColor("#fff")
+        backgroundColor(Color("#fff"))
     }
 
     val wtSectionBgGrayLight by style {
-        backgroundColor("#f4f4f4")
+        backgroundColor(Color("#f4f4f4"))
         backgroundColor(AppCSSVariables.wtColorGreyLight.value())
     }
 
     val wtSectionBgGrayDark by style {
-        backgroundColor("#323236")
+        backgroundColor(Color("#323236"))
         backgroundColor(AppCSSVariables.wtColorGreyDark.value())
     }
-}
\ No newline at end of file
+}
diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt
index ded73e36c7..90a1410b2b 100644
--- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt
+++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt
@@ -6,7 +6,7 @@ import org.jetbrains.compose.web.css.selectors.hover
 object WtTexts : StyleSheet(AppStylesheet) {
 
     val wtHero by style {
-        color("#27282c")
+        color(Color("#27282c"))
         fontSize(60.px)
         property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px))
         property("letter-spacing", (-1.5).px)
@@ -14,7 +14,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("line-height", 64.px)
         property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px))
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 AppCSSVariables.wtHeroFontSize(42.px)
                 AppCSSVariables.wtHeroLineHeight(48.px)
@@ -28,7 +28,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtSubtitle2 by style {
-        color("#27282c")
+        color(Color("#27282c"))
         fontSize(28.px)
         property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px))
         property("letter-spacing", "normal")
@@ -36,7 +36,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("line-height", 40.px)
         property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px))
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 AppCSSVariables.wtSubtitle2FontSize(24.px)
                 AppCSSVariables.wtSubtitle2LineHeight(32.px)
@@ -50,7 +50,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtText1 by style {
-        color(Color.RGBA(39, 40, 44, .7))
+        color(rgba(39, 40, 44, .7))
         fontSize(18.px)
         property("letter-spacing", "normal")
         property("font-weight", 400)
@@ -63,11 +63,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtText1ThemeDark by style {
-        color(Color.RGBA(255, 255, 255, 0.6))
+        color(rgba(255, 255, 255, 0.6))
     }
 
     val wtText2 by style {
-        color(Color.RGBA(39, 40, 44, .7))
+        color(rgba(39, 40, 44, .7))
         fontSize(15.px)
         property("letter-spacing", "normal")
         property("font-weight", 400)
@@ -80,7 +80,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtText3 by style {
-        color(Color.RGBA(39, 40, 44, .7))
+        color(rgba(39, 40, 44, .7))
         fontSize(12.px)
         property("letter-spacing", "normal")
         property("font-weight", 400)
@@ -93,21 +93,21 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtTextPale by style {
-        color(Color.RGBA(255, 255, 255, 0.30))
+        color(rgba(255, 255, 255, 0.30))
     }
 
     val wtText2ThemeDark by style {
-        color(Color.RGBA(255, 255, 255, 0.6))
+        color(rgba(255, 255, 255, 0.6))
     }
 
     val wtText3ThemeDark by style {
-        color(Color.RGBA(255, 255, 255, 0.6))
+        color(rgba(255, 255, 255, 0.6))
     }
 
     val wtLink by style {
         property("border-bottom", "1px solid transparent")
         property("text-decoration", "none")
-        color("#167dff")
+        color(Color("#167dff"))
 
         hover(self) style {
             property("border-bottom-color", "#167dff")
@@ -115,7 +115,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtH2 by style {
-        color("#27282c")
+        color(Color("#27282c"))
         fontSize(31.px)
         property("font-size", AppCSSVariables.wtH2FontSize.value(31.px))
         property("letter-spacing", (-.5).px)
@@ -123,7 +123,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("line-height", 40.px)
         property("line-height", 40.px)
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 AppCSSVariables.wtH2FontSize(24.px)
                 AppCSSVariables.wtH2LineHeight(32.px)
@@ -137,11 +137,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtH2ThemeDark by style {
-        color("#fff")
+        color(Color("#fff"))
     }
 
     val wtH3 by style {
-        color("#27282c")
+        color(Color("#27282c"))
         fontSize(21.px)
         property("font-size", AppCSSVariables.wtH3FontSize.value(20.px))
         property("letter-spacing", "normal")
@@ -156,12 +156,12 @@ object WtTexts : StyleSheet(AppStylesheet) {
     }
 
     val wtH3ThemeDark by style {
-        color("#fff")
+        color(Color("#fff"))
     }
 
     val wtButton by style {
-        color("white")
-        backgroundColor("#167dff")
+        color(Color("white"))
+        backgroundColor(Color("#167dff"))
         fontSize(15.px)
         display(DisplayStyle.InlineBlock)
         property("text-decoration", "none")
@@ -172,7 +172,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("width", "fit-content")
 
         hover(self) style {
-            backgroundColor(Color.RGBA(22, 125, 255, .8))
+            backgroundColor(rgba(22, 125, 255, .8))
         }
     }
 
@@ -186,16 +186,16 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("outline", "none")
 
         hover(self) style {
-            backgroundColor(Color.RGBA(255, 255, 255, 0.1))
+            backgroundColor(rgba(255, 255, 255, 0.1))
         }
     }
 
     val wtButtonContrast by style {
-        color("white")
-        backgroundColor("#27282c")
+        color(Color("white"))
+        backgroundColor(Color("#27282c"))
 
         hover(self) style {
-            backgroundColor(Color.RGBA(39, 40, 44, .7))
+            backgroundColor(rgba(39, 40, 44, .7))
         }
     }
 
@@ -203,19 +203,19 @@ object WtTexts : StyleSheet(AppStylesheet) {
         property("margin-right", 16.px)
         marginLeft(16.px)
         padding(12.px)
-        backgroundColor("transparent")
+        backgroundColor(Color("transparent"))
         display(DisplayStyle.LegacyInlineFlex)
 
         hover(self) style {
-            backgroundColor(Color.RGBA(255, 255, 255, 0.1))
+            backgroundColor(rgba(255, 255, 255, 0.1))
             property("border-radius", "24px")
         }
 
-        media(maxWidth(640.px)) {
+        media(mediaMaxWidth(640.px)) {
             self style {
                 property("margin-right", 8.px)
                 property("margin-left", 8.px)
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/templates/web-template/build.gradle.kts b/templates/web-template/build.gradle.kts
index bff80b4248..4cd02ceb0f 100644
--- a/templates/web-template/build.gradle.kts
+++ b/templates/web-template/build.gradle.kts
@@ -3,9 +3,9 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 
 plugins {
     // __KOTLIN_COMPOSE_VERSION__
-    kotlin("multiplatform") version "1.5.10"
+    kotlin("multiplatform") version "1.5.21"
     // __LATEST_COMPOSE_RELEASE_VERSION__
-    id("org.jetbrains.compose") version ("0.5.0-build235")
+    id("org.jetbrains.compose") version ("0.5.0-build270")
 }
 
 repositories {
diff --git a/tutorials/Web/Building_UI/README.md b/tutorials/Web/Building_UI/README.md
index 367d72b3cd..72f4d06a95 100644
--- a/tutorials/Web/Building_UI/README.md
+++ b/tutorials/Web/Building_UI/README.md
@@ -1,6 +1,6 @@
 # Building the UI with Compose Web
 
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 ## Introduction
 
@@ -62,7 +62,7 @@ If you want to apply styles to text, it needs to be wrapped in a container with
 
 ``` kotlin
 Span(
-    attrs = { style { color("red") } } // inline style
+    attrs = { style { color(Color.red) } } // inline style
 ) {
     Text("Red text")
 }
@@ -202,7 +202,7 @@ fun main() {
         Text("Arbitrary text")
 
         Span({
-            style { color("red") } // inline style
+            style { color(Color.red) } // inline style
         }) {
             Text("Red text")
         }
diff --git a/tutorials/Web/Events_Handling/README.md b/tutorials/Web/Events_Handling/README.md
index c857fc364e..60fed77606 100644
--- a/tutorials/Web/Events_Handling/README.md
+++ b/tutorials/Web/Events_Handling/README.md
@@ -1,6 +1,6 @@
 # Events handling in Compose Web
 
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 You can add event listeners in the `attrs` block:
 
@@ -8,11 +8,11 @@ You can add event listeners in the `attrs` block:
 ``` kotlin
 Button(
     attrs = {
-        onClick { wrappedMouseEvent -> 
-            // wrappedMouseEvent is of `WrappedMouseEvent` type    
-            println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
+        onClick { event -> 
+            // event is of `SyntheticMouseEvent` type    
+            println("button clicked at ${event.movementX}, ${event.movementY}")
             
-            val nativeEvent = wrappedMouseEvent.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
+            val nativeEvent = event.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
         }
     }
 ) {
@@ -37,22 +37,19 @@ TextArea(
 
 #### Other event handlers
 
-For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `WrappedEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event:
+For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `SyntheticEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event:
 
 ``` kotlin
 Form(attrs = {
     this.addEventListener("submit") {
         console.log("Hello, Submit!")
-        it.nativeEvent.preventDefault()
+        it.preventDefault()
     }
 })
 ```
 
-Your event handlers receive wrapped events that inherit from `GenericWrappedEvent`, which also provides access to the underlying `nativeEvent` – the actual event created by JS runtime -
-https://developer.mozilla.org/en-US/docs/Web/API/Event
 
-
-There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/androidx/blob/compose-web-main/compose/web/src/jsMain/kotlin/androidx/compose/web/attributes/EventsListenerBuilder.kt).
+There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt).
 
 
 ### Runnable example
@@ -67,11 +64,8 @@ fun main() {
     renderComposable(rootElementId = "root") {
         Button(
             attrs = {
-                onClick { wrappedMouseEvent ->
-                    // wrappedMouseEvent is of `WrappedMouseEvent` type
-                    println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
-
-                    val nativeEvent = wrappedMouseEvent.nativeEvent
+                onClick { event ->
+                    println("button clicked at ${event.movementX}, ${event.movementY}")
                 }
             }
         ) {
diff --git a/tutorials/Web/Getting_Started/README.md b/tutorials/Web/Getting_Started/README.md
index ae8a9d43c8..df77d7010d 100644
--- a/tutorials/Web/Getting_Started/README.md
+++ b/tutorials/Web/Getting_Started/README.md
@@ -1,6 +1,6 @@
 # Getting Started With Compose for Web
 
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 ## Introduction
 
@@ -42,8 +42,8 @@ pluginManagement {
 ``` kotlin
 // Add compose gradle plugin
 plugins {
-    kotlin("multiplatform") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build228"
+    kotlin("multiplatform") version "1.5.21"
+    id("org.jetbrains.compose") version "0.5.0-build270"
 }
 
 // Add maven repositories
diff --git a/tutorials/Web/README.md b/tutorials/Web/README.md
index 4deaa1e73a..b0795d75c9 100644
--- a/tutorials/Web/README.md
+++ b/tutorials/Web/README.md
@@ -1,5 +1,5 @@
 # Compose for Web
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 ### Content:
 
diff --git a/tutorials/Web/Style_Dsl/README.md b/tutorials/Web/Style_Dsl/README.md
index 0fc24de954..e478bee424 100644
--- a/tutorials/Web/Style_Dsl/README.md
+++ b/tutorials/Web/Style_Dsl/README.md
@@ -1,5 +1,5 @@
 # Style DSL in Compose Web
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 ## Introduction
 In this tutorial we have a look at how to style the components using the Style DSL. It’s a typesafe DSL for style sheets, which you can use to express CSS rules in your Kotlin code, and even modify styles based on the state of your Compose application.
@@ -101,11 +101,11 @@ object AppStylesheet : StyleSheet() {
     // A convenient way to create a class selector
     // AppStylesheet.container can be used as a class in component attrs
     val container by style {
-        color("red")
+        color(Color.red)
         
         // hover selector for a class
         self + hover() style { // self is a selector for `container`
-            color("green")
+            color(Color.green)
         }
     }
 }
@@ -135,9 +135,9 @@ object AppStylesheet : StyleSheet() {
 The style DSL also provides support for CSS variables.
 
 ``` kotlin
-object MyVariables : CSSVariables {
+object MyVariables {
     // declare a variable
-    val contentBackgroundColor by variable<Color>() 
+    val contentBackgroundColor by variable<CSSColorValue>()
 }
 
 object MyStyleSheet: StyleSheet() {
@@ -169,6 +169,30 @@ import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.*
 import org.jetbrains.compose.web.renderComposable
 
+object MyVariables {
+    // declare a variable
+    val contentBackgroundColor by variable<CSSColorValue>()
+}
+
+object MyStyleSheet: StyleSheet() {
+
+    val container by style {
+        //set variable's value for the `container` scope
+        MyVariables.contentBackgroundColor(Color("blue"))
+    }
+
+    val content by style {
+        // get the value
+        backgroundColor(MyVariables.contentBackgroundColor.value())
+    }
+
+    val contentWithDefaultBgColor by style {
+        // default value can be provided as well
+        // default value is used when the value is not previously set
+        backgroundColor(MyVariables.contentBackgroundColor.value(Color("#333")))
+    }
+}
+
 object AppStylesheet : StyleSheet() {
     val container by style { // container is a class
         display(DisplayStyle.Flex)
diff --git a/web/gradle.properties b/web/gradle.properties
index 027c19c867..e7cb6d513f 100644
--- a/web/gradle.properties
+++ b/web/gradle.properties
@@ -1,6 +1,6 @@
 # __LATEST_COMPOSE_RELEASE_VERSION__
-COMPOSE_CORE_VERSION=0.5.0-build262
-COMPOSE_WEB_VERSION=0.5.0-build262
+COMPOSE_CORE_VERSION=0.5.0-build270
+COMPOSE_WEB_VERSION=0.5.0-build270
 COMPOSE_WEB_BUILD_WITH_EXAMPLES=false
 compose.web.buildSamples=false
 compose.web.tests.integration.withFirefox