Merge pull request #50 from mori-atsushi/state-style

Update pressed/hovered styles for Button
mori-atsushi · Nov 24, 2023 · 4ec5cf8 · 4ec5cf8
2 parents b9920e7 + 7dbe93b
commit 4ec5cf8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git a/...stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/Colors.kt b/...stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/Colors.kt
@@ -22,5 +22,16 @@ object Colors {
     val gray800 = Token("color.gray800", Color(0xFF1A1C1F))
     val gray900 = Token("color.gray900", Color(0xFF090A0C))
 
+    val blue50 = Token("color.blue50", Color(0xFFC5EDFF))
+    val blue100 = Token("color.blue100", Color(0xFFB6E3FF))
+    val blue200 = Token("color.blue200", Color(0xFF80CCFF))
+    val blue300 = Token("color.blue300", Color(0xFF54AEFF))
+    val blue400 = Token("color.blue400", Color(0xFF218BFF))
+    val blue500 = Token("color.blue500", Color(0xFF0969DA))
+    val blue600 = Token("color.blue600", Color(0xFF0550AE))
+    val blue700 = Token("color.blue700", Color(0xFF033D8B))
+    val blue800 = Token("color.blue800", Color(0xFF02306C))
+    val blue900 = Token("color.blue900", Color(0xFF002155))
+
     val semantic: SemanticColors = SemanticColors()
 }
diff --git a/...t-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/ThemeStyleSheet.kt b/...t-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/ThemeStyleSheet.kt
@@ -22,12 +22,15 @@ fun themeStyleSheet(
         Colors.semantic.primarySurface += if (useDarkMode) Colors.gray800 else Colors.gray100
         Colors.semantic.onPrimarySurface += Colors.semantic.onBackground
         Colors.semantic.inverseSurface += if (useDarkMode) Colors.white else Colors.gray900
+        Colors.semantic.inverseSurfaceHovered += if (useDarkMode) Colors.gray100 else Colors.gray700
         Colors.semantic.inverseSurfacePressed += if (useDarkMode) Colors.gray300 else Colors.gray600
         Colors.semantic.onInverseSurface += if (useDarkMode) Colors.gray900 else Colors.white
 
         Colors.semantic.disabledSurface += if (useDarkMode) Colors.gray700 else Colors.gray100
         Colors.semantic.onDisabledSurface += if (useDarkMode) Colors.gray500 else Colors.gray300
 
+        Colors.semantic.focus += if (useDarkMode) Colors.blue500 else Colors.blue300
+
         content {
             color += Colors.semantic.onBackground
         }

diff --git a/...src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/button/ButtonStyleSheet.kt b/...src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/button/ButtonStyleSheet.kt
@@ -24,6 +24,15 @@ internal val buttonStyleSheet = StyleSheet {
             background += Colors.semantic.inverseSurfacePressed
         }
 
+        hovered {
+            background += Colors.semantic.inverseSurfaceHovered
+        }
+
+        focused {
+            outline.width += 3.dp
+            outline.color += Colors.semantic.focus
+        }
+
         disabled {
             background += Colors.semantic.disabledSurface
             content.color += Colors.semantic.onDisabledSurface

diff --git a/...e/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/colors/SemanticColors.kt b/...e/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/colors/SemanticColors.kt
@@ -14,9 +14,12 @@ class SemanticColors internal constructor() {
     val onPrimarySurface = Token("color.semantic.onPrimarySurface", Colors.gray900)
 
     val inverseSurface = Token("color.semantic.inverseSurface", Colors.gray900)
-    val inverseSurfacePressed = Token("color.semantic.inverseSurfacePressed", Colors.gray700)
+    val inverseSurfaceHovered = Token("color.semantic.inverseSurfaceHovered", Colors.gray700)
+    val inverseSurfacePressed = Token("color.semantic.inverseSurfacePressed", Colors.gray600)
     val onInverseSurface = Token("color.semantic.onInverseSurface", Colors.gray50)
 
     val disabledSurface = Token("color.semantic.inverseSurfacePressed", Colors.gray100)
     val onDisabledSurface = Token("color.semantic.onInverseSurface", Colors.gray300)
+
+    val focus = Token("color.semantic.focus", Colors.blue300)
 }