Merge pull request #6 from DioxusLabs/fix-theme

Fix default cursor theme

Author: ealmloff

assets/generated/arborium-themes/dioxus-code-theme.css

@@ -13,12 +13,12 @@
 .dxc,
 .dxc-editor {
   background: var(--dxc-light-on, var(--dxc-light-background,)) var(--dxc-dark-on, var(--dxc-dark-background,));
-  --bg: var(--dxc-light-on, var(--dxc-light-var-bg,)) var(--dxc-dark-on, var(--dxc-dark-var-bg,));
-  --surface: var(--dxc-light-on, var(--dxc-light-var-surface,)) var(--dxc-dark-on, var(--dxc-dark-var-surface,));
+  --dxc-bg: var(--dxc-light-on, var(--dxc-light-var-bg,)) var(--dxc-dark-on, var(--dxc-dark-var-bg,));
+  --dxc-surface: var(--dxc-light-on, var(--dxc-light-var-surface,)) var(--dxc-dark-on, var(--dxc-dark-var-surface,));
   color: var(--dxc-light-on, var(--dxc-light-color,)) var(--dxc-dark-on, var(--dxc-dark-color,));
-  --fg: var(--dxc-light-on, var(--dxc-light-var-fg,)) var(--dxc-dark-on, var(--dxc-dark-var-fg,));
-  --accent: var(--dxc-light-on, var(--dxc-light-var-accent,)) var(--dxc-dark-on, var(--dxc-dark-var-accent,));
-  --muted: var(--dxc-light-on, var(--dxc-light-var-muted,)) var(--dxc-dark-on, var(--dxc-dark-var-muted,));
+  --dxc-fg: var(--dxc-light-on, var(--dxc-light-var-fg,)) var(--dxc-dark-on, var(--dxc-dark-var-fg,));
+  --dxc-accent: var(--dxc-light-on, var(--dxc-light-var-accent,)) var(--dxc-dark-on, var(--dxc-dark-var-accent,));
+  --dxc-muted: var(--dxc-light-on, var(--dxc-light-var-muted,)) var(--dxc-dark-on, var(--dxc-dark-var-muted,));
 }
 .dxc .a-at,
 .dxc-editor .a-at {

build.rs

@@ -282,7 +282,12 @@ fn shared_theme_css(rules: &SharedRules) -> String {
     css.push_str(".dxc,\n.dxc-editor {\n");
     for property in &rules.base {
         let variable = base_variable_suffix(property);
-        writeln!(css, "  {property}: {};", active_value(&variable)).unwrap();
+        if let Some(custom_property) = property.strip_prefix("--") {
+            let namespaced_property = format!("--dxc-{}", css_identifier(custom_property));
+            writeln!(css, "  {namespaced_property}: {};", active_value(&variable)).unwrap();
+        } else {
+            writeln!(css, "  {property}: {};", active_value(&variable)).unwrap();
+        }
     }
     css.push_str("}\n");
 

code-editor/assets/demo.css

@@ -39,8 +39,3 @@ h1 {
   padding: 5px 8px;
   text-transform: uppercase;
 }
-
-.dxc-editor {
-  --dxc-editor-caret: #e8eef7;
-  --dxc-editor-focus-ring: 0 0 0 3px rgba(122, 162, 247, 0.22);
-}

code-editor/assets/dioxus-code-editor.css

@@ -42,7 +42,7 @@
 
 .dxc-editor-gutter {
   background: inherit;
-  color: var(--muted, currentColor);
+  color: var(--dxc-muted, currentColor);
   left: 0;
   padding: var(--dxc-editor-gutter-padding, 14px 0);
   pointer-events: none;
@@ -64,7 +64,7 @@
 .dxc-editor-input {
   background: transparent;
   border: 0;
-  caret-color: var(--dxc-editor-caret, currentColor);
+  caret-color: var(--dxc-editor-caret, var(--dxc-fg, CanvasText));
   color: transparent;
   display: block;
   font: inherit;
@@ -83,23 +83,42 @@
 }
 
 .dxc-editor-input::selection {
-  background: var(--dxc-editor-selection, rgba(122, 162, 247, 0.34));
+  background: var(--dxc-editor-selection);
   color: transparent;
 }
 
 .dxc-editor-input:empty::before {
-  color: var(--muted, currentColor);
+  color: var(--dxc-muted, currentColor);
   content: attr(data-placeholder);
   opacity: 0.72;
 }
 
 .dxc-editor-input::placeholder {
-  color: var(--muted, currentColor);
+  color: var(--dxc-muted, currentColor);
   opacity: 0.72;
 }
 
 .dxc-editor:focus-within {
-  box-shadow: var(--dxc-editor-focus-ring, 0 0 0 3px rgba(122, 162, 247, 0.22));
+  box-shadow: var(--dxc-editor-focus-ring, none);
+}
+
+@supports (color: color-mix(in srgb, white 50%, transparent)) {
+  .dxc-editor-gutter {
+    color: var(--dxc-muted, color-mix(in srgb, var(--dxc-fg, currentColor) 62%, transparent));
+  }
+
+  .dxc-editor-input::selection {
+    background: var(--dxc-editor-selection, color-mix(in srgb, var(--dxc-accent, Highlight) 34%, transparent));
+  }
+
+  .dxc-editor-input:empty::before,
+  .dxc-editor-input::placeholder {
+    color: var(--dxc-muted, color-mix(in srgb, var(--dxc-fg, currentColor) 62%, transparent));
+  }
+
+  .dxc-editor:focus-within {
+    box-shadow: var(--dxc-editor-focus-ring, 0 0 0 3px color-mix(in srgb, var(--dxc-accent, Highlight) 22%, transparent));
+  }
 }
 
 .dxc-editor-line,

examples/editor/src/main.rs

@@ -217,8 +217,6 @@ body {
 }
 
 .example-editor {
-  --dxc-editor-caret: #e8eef7;
-  --dxc-editor-focus-ring: 0 0 0 3px rgba(122, 162, 247, 0.22);
   min-height: 0;
 }
 "#;