quasar-ui-danx 0.5.1 → 0.5.3

package/src/styles/themes/danx/code.scss

@@ -1,5 +1,5 @@
 // Code Viewer Theme
-// Dark theme with syntax highlighting for JSON/YAML
+// Supports dark (default) and light themes with syntax highlighting for JSON/YAML
 
 .dx-code-viewer {
   width: 100%;
@@ -134,6 +134,58 @@
     color: #808080;
   }
 
+  // Comments - Muted green
+  .syntax-comment {
+    color: #6a9955;
+  }
+
+  // CSS/HTML specific
+  .syntax-selector {
+    color: #d7ba7d; // Gold/yellow
+  }
+
+  .syntax-property {
+    color: #9cdcfe; // Light blue (same as key)
+  }
+
+  .syntax-value {
+    color: #ce9178; // Orange (same as number)
+  }
+
+  .syntax-at-rule {
+    color: #c586c0; // Purple/magenta
+  }
+
+  // JavaScript specific
+  .syntax-keyword {
+    color: #569cd6; // Blue
+  }
+
+  .syntax-operator {
+    color: #d4d4d4; // Gray/white
+  }
+
+  .syntax-regex {
+    color: #d16969; // Red
+  }
+
+  .syntax-template {
+    color: #ce9178; // Orange (same as string/number)
+  }
+
+  // HTML specific
+  .syntax-tag {
+    color: #569cd6; // Blue
+  }
+
+  .syntax-attribute {
+    color: #9cdcfe; // Light blue
+  }
+
+  .syntax-doctype {
+    color: #808080; // Gray
+  }
+
 
   // ==========================================
   // Editable mode (contenteditable)
@@ -155,4 +207,208 @@
     // Caret color
     caret-color: #d4d4d4;
   }
+
+  // ==========================================
+  // LIGHT THEME VARIANT
+  // ==========================================
+  &.theme-light {
+    .code-collapsed {
+      background-color: #f5f5f5;
+
+      &:hover {
+        background-color: #ebebeb;
+      }
+
+      .code-collapsed-preview {
+        color: #333333;
+      }
+    }
+
+    .code-content {
+      background-color: #f8fafc;
+      color: #1e293b;
+      border: 1px solid #e2e8f0;
+    }
+
+    .code-footer {
+      background-color: #f1f5f9;
+      border-top: 1px solid #e2e8f0;
+
+      &.has-error {
+        background-color: #fee2e2;
+        border-top: 1px solid #ef4444;
+      }
+    }
+
+    .language-badge {
+      background-color: #e2e8f0;
+      color: #64748b;
+    }
+
+    // Light theme syntax highlighting
+    .syntax-key {
+      color: #0369a1;
+    }
+
+    .syntax-string {
+      color: #15803d;
+    }
+
+    .syntax-number {
+      color: #c2410c;
+    }
+
+    .syntax-boolean {
+      color: #7c3aed;
+    }
+
+    .syntax-null {
+      color: #7c3aed;
+    }
+
+    .syntax-punctuation {
+      color: #64748b;
+    }
+
+    // Light theme - Comments
+    .syntax-comment {
+      color: #6a9955;
+    }
+
+    // Light theme - CSS/HTML specific
+    .syntax-selector {
+      color: #b45309; // Amber/brown
+    }
+
+    .syntax-property {
+      color: #0369a1; // Blue (same as key)
+    }
+
+    .syntax-value {
+      color: #c2410c; // Orange (same as number)
+    }
+
+    .syntax-at-rule {
+      color: #7c3aed; // Purple
+    }
+
+    // Light theme - JavaScript specific
+    .syntax-keyword {
+      color: #0369a1; // Blue
+    }
+
+    .syntax-operator {
+      color: #64748b; // Gray
+    }
+
+    .syntax-regex {
+      color: #be123c; // Red/rose
+    }
+
+    .syntax-template {
+      color: #c2410c; // Orange
+    }
+
+    // Light theme - HTML specific
+    .syntax-tag {
+      color: #0369a1; // Blue
+    }
+
+    .syntax-attribute {
+      color: #0891b2; // Cyan
+    }
+
+    .syntax-doctype {
+      color: #64748b; // Gray
+    }
+
+    .code-content.is-editable {
+      caret-color: #1e293b;
+
+      &:focus {
+        border-color: rgba(14, 165, 233, 0.6);
+      }
+
+      &:hover:not(:focus) {
+        border-color: rgba(14, 165, 233, 0.3);
+      }
+    }
+
+    // Light theme - Language badge component overrides
+    .dx-language-badge-container {
+      // Container needs no background changes
+    }
+
+    .dx-language-badge {
+      background: rgba(0, 0, 0, 0.08);
+      color: #64748b;
+
+      &.is-active {
+        background: rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .dx-language-option {
+      background: rgba(0, 0, 0, 0.06);
+      color: #64748b;
+      border-right: 1px solid rgba(0, 0, 0, 0.1);
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.12);
+        color: #1e293b;
+      }
+    }
+
+    .dx-language-search-trigger {
+      // Inherits from dx-language-option
+    }
+
+    .dx-language-search-panel {
+      background: #f8fafc;
+      border: 1px solid #e2e8f0;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .dx-language-search-input {
+      background: #f1f5f9;
+      border-bottom: 1px solid #e2e8f0;
+      color: #1e293b;
+
+      &::placeholder {
+        color: #94a3b8;
+      }
+
+      &:focus {
+        background: #e2e8f0;
+      }
+    }
+
+    .dx-language-search-list {
+      &::-webkit-scrollbar-track {
+        background: #f1f5f9;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+
+        &:hover {
+          background: #94a3b8;
+        }
+      }
+    }
+
+    .dx-language-search-item {
+      color: #64748b;
+
+      &:hover,
+      &.is-selected {
+        background: #e2e8f0;
+        color: #1e293b;
+      }
+    }
+
+    .dx-language-search-empty {
+      color: #94a3b8;
+    }
+  }
 }

package/src/styles/themes/danx/index.scss

@@ -1,10 +1,10 @@
-@import "action-table";
-@import "buttons";
-@import "carousels";
-@import "code";
-@import "dialogs";
-@import "forms";
-@import "markdown";
-@import "panels";
-@import "sidebar";
-@import "toolbar";
+@use "action-table";
+@use "buttons";
+@use "carousels";
+@use "code";
+@use "dialogs";
+@use "forms";
+@use "markdown";
+@use "panels";
+@use "sidebar";
+@use "toolbar";

package/src/styles/themes/danx/markdown.scss

@@ -165,6 +165,23 @@
     vertical-align: super;
   }
 
+  // Hex color preview swatch
+  .color-preview {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+
+    .color-swatch {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      vertical-align: middle;
+      flex-shrink: 0;
+    }
+  }
+
   // Tables
   table {
     border-collapse: collapse;
@@ -238,4 +255,68 @@
       text-decoration: none;
     }
   }
+
+  // ==========================================
+  // LIGHT THEME VARIANT
+  // ==========================================
+  &.theme-light {
+    color: #1e293b;
+
+    // Inline code - light theme
+    code {
+      background: #f1f5f9;
+      color: #0f172a;
+    }
+
+    // Code blocks - light theme
+    pre {
+      background: #f8fafc;
+      border: 1px solid #e2e8f0;
+
+      code {
+        background: transparent;
+      }
+    }
+
+    // Blockquotes - light theme
+    blockquote {
+      border-left-color: #cbd5e1;
+      color: #475569;
+    }
+
+    // Links - light theme
+    a {
+      color: #0369a1;
+    }
+
+    // Horizontal rules - light theme
+    hr {
+      border-top-color: #e2e8f0;
+    }
+
+    // Tables - light theme
+    table {
+      th, td {
+        border-color: #e2e8f0;
+      }
+
+      th {
+        background: #f1f5f9;
+      }
+
+      tr:nth-child(even) {
+        background: #f8fafc;
+      }
+    }
+
+    // Highlight - light theme
+    mark {
+      background: rgba(250, 204, 21, 0.5);
+    }
+
+    // Color swatch - light theme
+    .color-preview .color-swatch {
+      border-color: rgba(0, 0, 0, 0.2);
+    }
+  }
 }

package/src/test/highlighters.test.ts

@@ -0,0 +1,153 @@
+import { describe, it, expect } from "vitest";
+import { highlightCSS } from "../helpers/formats/highlightCSS";
+import { highlightJavaScript } from "../helpers/formats/highlightJavaScript";
+import { highlightHTML } from "../helpers/formats/highlightHTML";
+import { highlightSyntax } from "../helpers/formats/highlightSyntax";
+
+describe("CSS Highlighter", () => {
+	it("highlights selectors", () => {
+		const result = highlightCSS(".test { }");
+		expect(result).toContain("syntax-selector");
+		expect(result).toContain(".test");
+	});
+
+	it("highlights properties and values", () => {
+		const result = highlightCSS(".test { color: red; }");
+		expect(result).toContain("syntax-property");
+		expect(result).toContain("syntax-value");
+	});
+
+	it("highlights comments", () => {
+		const result = highlightCSS("/* comment */");
+		expect(result).toContain("syntax-comment");
+	});
+
+	it("highlights at-rules", () => {
+		const result = highlightCSS("@media screen { }");
+		expect(result).toContain("syntax-at-rule");
+		expect(result).toContain("@media");
+	});
+
+	it("highlights strings", () => {
+		const result = highlightCSS('@import "file.css";');
+		expect(result).toContain("syntax-string");
+	});
+});
+
+describe("JavaScript Highlighter", () => {
+	it("highlights keywords", () => {
+		const result = highlightJavaScript("const x = 1;");
+		expect(result).toContain("syntax-keyword");
+		expect(result).toContain("const");
+	});
+
+	it("highlights strings", () => {
+		const result = highlightJavaScript('const s = "hello";');
+		expect(result).toContain("syntax-string");
+	});
+
+	it("highlights numbers", () => {
+		const result = highlightJavaScript("const n = 42;");
+		expect(result).toContain("syntax-number");
+		expect(result).toContain("42");
+	});
+
+	it("highlights single-line comments", () => {
+		const result = highlightJavaScript("// comment");
+		expect(result).toContain("syntax-comment");
+	});
+
+	it("highlights multi-line comments", () => {
+		const result = highlightJavaScript("/* comment */");
+		expect(result).toContain("syntax-comment");
+	});
+
+	it("highlights template literals", () => {
+		const result = highlightJavaScript("const t = `hello`;");
+		expect(result).toContain("syntax-template");
+	});
+
+	it("highlights boolean values", () => {
+		const result = highlightJavaScript("const b = true;");
+		expect(result).toContain("syntax-boolean");
+	});
+
+	it("highlights null and undefined", () => {
+		const result = highlightJavaScript("const n = null;");
+		expect(result).toContain("syntax-null");
+	});
+
+	it("highlights operators", () => {
+		const result = highlightJavaScript("x === y");
+		expect(result).toContain("syntax-operator");
+	});
+
+	it("highlights regex", () => {
+		const result = highlightJavaScript("const r = /test/gi;");
+		expect(result).toContain("syntax-regex");
+	});
+});
+
+describe("HTML Highlighter", () => {
+	it("highlights tags", () => {
+		const result = highlightHTML("<div></div>");
+		expect(result).toContain("syntax-tag");
+	});
+
+	it("highlights attributes", () => {
+		const result = highlightHTML('<div class="test"></div>');
+		expect(result).toContain("syntax-attribute");
+		expect(result).toContain("class");
+	});
+
+	it("highlights attribute values as strings", () => {
+		const result = highlightHTML('<div class="test"></div>');
+		expect(result).toContain("syntax-string");
+	});
+
+	it("highlights comments", () => {
+		const result = highlightHTML("<!-- comment -->");
+		expect(result).toContain("syntax-comment");
+	});
+
+	it("highlights doctype", () => {
+		const result = highlightHTML("<!DOCTYPE html>");
+		expect(result).toContain("syntax-doctype");
+	});
+
+	it("highlights embedded CSS in style tags", () => {
+		const result = highlightHTML("<style>.test { color: red; }</style>");
+		expect(result).toContain("syntax-selector");
+		expect(result).toContain("syntax-property");
+		expect(result).toContain("syntax-value");
+	});
+
+	it("highlights embedded JavaScript in script tags", () => {
+		const result = highlightHTML("<script>const x = 42;</script>");
+		expect(result).toContain("syntax-keyword");
+		expect(result).toContain("syntax-number");
+	});
+});
+
+describe("highlightSyntax dispatcher", () => {
+	it("dispatches to CSS highlighter", () => {
+		const result = highlightSyntax(".test { }", { format: "css" });
+		expect(result).toContain("syntax-selector");
+	});
+
+	it("dispatches to JavaScript highlighter", () => {
+		const result = highlightSyntax("const x = 1;", { format: "javascript" });
+		expect(result).toContain("syntax-keyword");
+	});
+
+	it("dispatches to HTML highlighter", () => {
+		const result = highlightSyntax("<div></div>", { format: "html" });
+		expect(result).toContain("syntax-tag");
+	});
+
+	it("escapes HTML for text format", () => {
+		const result = highlightSyntax("<script>alert(1)</script>", { format: "text" });
+		expect(result).toContain("&lt;script&gt;");
+		expect(result).not.toContain("<script>");
+	});
+});

package/src/types/widgets.d.ts

@@ -1,5 +1,5 @@
 export interface LabelPillWidgetProps {
 	label?: string | number;
-	size?: "xs" | "sm" | "md" | "lg";
-	color?: "sky" | "green" | "red" | "amber" | "yellow" | "blue" | "purple" | "slate" | "slate-mid" | "gray" | "emerald" | "orange" | "lime" | "teal" | "cyan" | "rose" | "indigo" | "violet" | "fuchsia" | "none";
+	size?: "xxs" | "xs" | "sm" | "md" | "lg";
+	color?: "sky" | "green" | "red" | "amber" | "yellow" | "blue" | "purple" | "slate" | "slate-mid" | "gray" | "emerald" | "orange" | "lime" | "teal" | "cyan" | "rose" | "indigo" | "violet" | "fuchsia" | "sky-soft" | "green-soft" | "red-soft" | "amber-soft" | "yellow-soft" | "blue-soft" | "purple-soft" | "slate-soft" | "gray-soft" | "emerald-soft" | "orange-soft" | "lime-soft" | "teal-soft" | "cyan-soft" | "rose-soft" | "indigo-soft" | "violet-soft" | "fuchsia-soft" | "none";
 }

package/vite.config.js

@@ -3,6 +3,8 @@ import { resolve } from "path";
 import { defineConfig } from "vite";
 import svgLoader from "vite-svg-loader";
 
+const __dirname = import.meta.dirname;
+
 export default defineConfig({
 	plugins: [vue(), svgLoader()],
 	resolve: {
@@ -32,7 +34,9 @@ export default defineConfig({
 	css: {
 		preprocessorOptions: {
 			scss: {
-				additionalData: `@import "./src/styles/index.scss";`
+				api: "modern",
+				loadPaths: [resolve(__dirname, "src/styles")],
+				additionalData: `@use "index" as *;`
 			}
 		}
 	}