Merge pull request #119 from dev-five-git/color-schema

owjs3901 · web-flow · commit d3e194ea69a4 · 2025-02-11T16:38:53.000+09:00
Add color schema
diff --git a/.changeset/polite-points-exercise.md b/.changeset/polite-points-exercise.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Add color schema
diff --git a/bindings/devup-ui-wasm/src/lib.rs b/bindings/devup-ui-wasm/src/lib.rs
@@ -235,7 +235,7 @@ mod tests {
 
         assert_eq!(
             get_css().unwrap(),
-            ":root{--primary:#FFF;}\n:root[data-theme=dark]{--primary:#000;}\n"
+            ":root{color-scheme:light;--primary:#FFF;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"
         );
     }
 
diff --git a/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__deserialize_theme.snap b/bindings/devup-ui-wasm/src/snapshots/devup_ui_wasm__tests__deserialize_theme.snap
@@ -2,4 +2,4 @@
 source: bindings/devup-ui-wasm/src/lib.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5em}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5em}}\n@media (min-width:768px){.typo-default{font-family:Arial;font-size:24px;line-height:1.5;letter-spacing:0.5em}}"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5em}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5em}}\n@media (min-width:768px){.typo-default{font-family:Arial;font-size:24px;line-height:1.5;letter-spacing:0.5em}}"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-2.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-2.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-3.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-3.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=b]{--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=b]{color-scheme:dark;--primary:#000;}\n"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-4.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-4.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=a]{--primary:#000;}\n:root[data-theme=b]{--primary:#000;}\n:root[data-theme=c]{--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=a]{color-scheme:dark;--primary:#000;}\n:root[data-theme=b]{color-scheme:dark;--primary:#000;}\n:root[data-theme=c]{color-scheme:dark;--primary:#000;}\n"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-5.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme-5.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/theme.rs
+expression: theme.to_css()
+---
+":root{--primary:#000;}\n"
diff --git a/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme.snap b/libs/sheet/src/snapshots/sheet__theme__tests__to_css_from_theme.snap
@@ -2,4 +2,4 @@
 source: libs/sheet/src/theme.rs
 expression: theme.to_css()
 ---
-":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#000;}\n"
+":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"
diff --git a/libs/sheet/src/theme.rs b/libs/sheet/src/theme.rs
@@ -152,16 +152,29 @@ impl Theme {
                 });
                 col
             };
+            let single_theme = entries.len() <= 1;
             for (theme_name, theme_properties) in entries {
                 if let Some(theme_key) = if *theme_name == *default_theme_key {
                     None
                 } else {
                     Some(theme_name)
                 } {
-                    theme_declaration
-                        .push_str(format!(":root[data-theme={}]{{", theme_key).as_str());
+                    theme_declaration.push_str(
+                        format!(":root[data-theme={}]{{{}", theme_key, "color-scheme:dark;")
+                            .as_str(),
+                    );
                 } else {
-                    theme_declaration.push_str(":root{");
+                    theme_declaration.push_str(
+                        format!(
+                            ":root{{{}",
+                            if single_theme {
+                                ""
+                            } else {
+                                "color-scheme:light;"
+                            }
+                        )
+                        .as_str(),
+                    );
                 }
                 for (prop, value) in theme_properties.0.iter() {
                     theme_declaration.push_str(format!("--{}:{};", prop, value).as_str());
@@ -278,7 +291,7 @@ mod tests {
         let css = theme.to_css();
         assert_eq!(
             css,
-            ":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}.typo-default1{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}}"
+            ":root{color-scheme:light;--primary:#000;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}.typo-default1{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}}"
         );
 
         assert_eq!(Theme::default().to_css(), "");
@@ -386,6 +399,17 @@ mod tests {
             }),
         );
         assert_debug_snapshot!(theme.to_css());
+
+        let mut theme = Theme::default();
+        theme.add_color_theme(
+            "light",
+            ColorTheme({
+                let mut map = HashMap::new();
+                map.insert("primary".to_string(), "#000".to_string());
+                map
+            }),
+        );
+        assert_debug_snapshot!(theme.to_css());
     }
 
     #[test]

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@devup-ui/wasm": patch
 +---
++
 +Add color schema
Original file line number	Diff line number	Diff line change
`@@ -235,7 +235,7 @@ mod tests {`
`235`	`235`
`236`	`236`	`assert_eq!(`
`237`	`237`	`get_css().unwrap(),`
`238`		`- ":root{--primary:#FFF;}\n:root[data-theme=dark]{--primary:#000;}\n"`
	`238`	`+ ":root{color-scheme:light;--primary:#FFF;}\n:root[data-theme=dark]{color-scheme:dark;--primary:#000;}\n"`
`239`	`239`	`);`
`240`	`240`	`}`
`241`	`241`