@fsegurai/codemirror-theme-cobalt2 6.0.0 → 6.0.2

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/public/codemirror-themes.png">
+  <img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/demo/public/codemirror-themes.png">
 </p>
 
 <p align="center">

package/dist/index.cjs

@@ -435,12 +435,22 @@ const cobalt2Theme = view.EditorView.theme({
  * Enhanced syntax highlighting for the Cobalt2 theme
  */
 const cobalt2HighlightStyle = language.HighlightStyle.define([
+    // Comments
+    { tag: highlight.tags.comment, color: blue, fontStyle: 'italic' },
+    { tag: highlight.tags.docComment, color: blue, fontStyle: 'italic' },
+    { tag: highlight.tags.lineComment, color: blue, fontStyle: 'italic' },
+    { tag: highlight.tags.blockComment, color: blue, fontStyle: 'italic' },
     // Keywords and control flow
     { tag: highlight.tags.keyword, color: orange },
     { tag: highlight.tags.controlKeyword, color: orange },
     { tag: highlight.tags.operatorKeyword, color: orange },
     { tag: highlight.tags.moduleKeyword, color: cyan },
     { tag: highlight.tags.definitionKeyword, color: hotPink },
+    // Special language constructs
+    { tag: highlight.tags.self, color: hotPink },
+    { tag: highlight.tags.special(highlight.tags.variableName), color: cyan },
+    { tag: highlight.tags.special(highlight.tags.keyword), color: cyan },
+    { tag: highlight.tags.special(highlight.tags.propertyName), color: cyan },
     // Variables - Enhanced for better distinction
     { tag: highlight.tags.variableName, color: foreground },
     { tag: highlight.tags.definition(highlight.tags.variableName), color: foreground },
@@ -450,41 +460,14 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
     { tag: highlight.tags.className, color: lightPink, fontStyle: 'italic' },
     { tag: highlight.tags.namespace, color: lightPink, fontStyle: 'italic' },
     { tag: highlight.tags.macroName, color: lightPink, fontStyle: 'italic' },
-    { tag: highlight.tags.standard(highlight.tags.tagName), color: supportTeal },
-    { tag: highlight.tags.standard(highlight.tags.propertyName), color: supportTeal },
-    // Operators and punctuation
-    { tag: highlight.tags.operator, color: lightGray },
-    { tag: highlight.tags.derefOperator, color: lightGray },
-    { tag: highlight.tags.arithmeticOperator, color: lightGray },
-    { tag: highlight.tags.logicOperator, color: lightGray },
-    { tag: highlight.tags.bitwiseOperator, color: lightGray },
-    { tag: highlight.tags.compareOperator, color: lightGray },
-    { tag: highlight.tags.updateOperator, color: lightGray },
-    { tag: highlight.tags.punctuation, color: lightGray },
-    { tag: highlight.tags.bracket, color: lightGray },
-    { tag: highlight.tags.brace, color: lightGray },
-    { tag: highlight.tags.squareBracket, color: lightGray },
-    { tag: highlight.tags.paren, color: yellow },
-    { tag: highlight.tags.angleBracket, color: lightGray },
-    { tag: [highlight.tags.operator, highlight.tags.punctuation], color: lightGray },
-    // Functions
+    // Functions - specific function types first
     { tag: highlight.tags.function(highlight.tags.variableName), color: yellow },
     { tag: highlight.tags.function(highlight.tags.definition(highlight.tags.variableName)), color: yellow },
     { tag: highlight.tags.function(highlight.tags.propertyName), color: yellow },
-    { tag: [highlight.tags.moduleKeyword, highlight.tags.special(highlight.tags.keyword)], color: cyan },
-    { tag: [highlight.tags.definitionKeyword], color: hotPink },
-    // Comments
-    { tag: highlight.tags.comment, color: blue, fontStyle: 'italic' },
-    { tag: highlight.tags.docComment, color: blue, fontStyle: 'italic' },
-    { tag: highlight.tags.lineComment, color: blue, fontStyle: 'italic' },
-    { tag: highlight.tags.blockComment, color: blue, fontStyle: 'italic' },
-    // Storage and function keywords
-    { tag: highlight.tags.modifier, color: yellow, fontStyle: 'italic' },
-    // Special variables and exports
-    { tag: highlight.tags.special(highlight.tags.variableName), color: cyan },
     // Properties
     { tag: highlight.tags.propertyName, color: lightBlue },
     { tag: highlight.tags.definition(highlight.tags.propertyName), color: lightBlue },
+    { tag: highlight.tags.standard(highlight.tags.propertyName), color: supportTeal },
     // Constants
     { tag: highlight.tags.constant(highlight.tags.name), color: pink },
     { tag: highlight.tags.standard(highlight.tags.name), color: pink },
@@ -494,9 +477,9 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
     { tag: highlight.tags.bool, color: pink },
     { tag: highlight.tags.atom, color: pink },
     { tag: highlight.tags.null, color: pink },
-    // Strings
-    { tag: highlight.tags.string, color: lightGreen },
+    // Strings - specific string types first
     { tag: highlight.tags.special(highlight.tags.string), color: green },
+    { tag: highlight.tags.string, color: lightGreen },
     { tag: highlight.tags.regexp, color: lightGreen },
     // String quotes
     { tag: highlight.tags.quote, color: stringQuotes },
@@ -504,14 +487,30 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
     { tag: highlight.tags.definition(highlight.tags.function(highlight.tags.variableName)), color: parameterYellow },
     // HTML/XML elements
     { tag: highlight.tags.tagName, color: lightBlue },
+    { tag: highlight.tags.standard(highlight.tags.tagName), color: supportTeal },
     { tag: highlight.tags.attributeName, color: yellow, fontStyle: 'italic' },
     { tag: highlight.tags.attributeValue, color: lightGreen },
-    // Special language constructs
-    { tag: highlight.tags.self, color: hotPink },
+    // Operators and punctuation
+    { tag: highlight.tags.operator, color: lightGray },
+    { tag: highlight.tags.derefOperator, color: lightGray },
+    { tag: highlight.tags.arithmeticOperator, color: lightGray },
+    { tag: highlight.tags.logicOperator, color: lightGray },
+    { tag: highlight.tags.bitwiseOperator, color: lightGray },
+    { tag: highlight.tags.compareOperator, color: lightGray },
+    { tag: highlight.tags.updateOperator, color: lightGray },
+    { tag: highlight.tags.punctuation, color: lightGray },
+    { tag: highlight.tags.bracket, color: lightGray },
+    { tag: highlight.tags.brace, color: lightGray },
+    { tag: highlight.tags.squareBracket, color: lightGray },
+    { tag: highlight.tags.paren, color: yellow },
+    { tag: highlight.tags.angleBracket, color: lightGray },
+    // Storage and function keywords
+    { tag: highlight.tags.modifier, color: yellow, fontStyle: 'italic' },
     // Meta and annotations
     { tag: highlight.tags.meta, color: lightBlue },
     { tag: highlight.tags.annotation, color: yellow, fontStyle: 'italic' },
     { tag: highlight.tags.processingInstruction, color: yellow },
+    // Markdown elements
     { tag: highlight.tags.heading, color: yellow, fontWeight: 'bold' },
     { tag: highlight.tags.heading1, color: yellow, fontWeight: 'bold' },
     { tag: highlight.tags.heading2, color: yellow, fontWeight: 'bold' },
@@ -523,7 +522,6 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
     { tag: highlight.tags.strong, color: lightBlue, fontWeight: 'bold' },
     { tag: highlight.tags.emphasis, color: lightBlue, fontStyle: 'italic' },
     { tag: highlight.tags.list, color: yellow },
-    { tag: highlight.tags.quote, color: lightBlue, fontStyle: 'italic' },
     // Code blocks and inline code - Enhanced styling
     { tag: highlight.tags.monospace, color: lightBlue },
     { tag: highlight.tags.special(highlight.tags.monospace), color: green },
@@ -536,46 +534,8 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
     { tag: highlight.tags.deleted, color: pink },
     { tag: highlight.tags.inserted, color: lightGreen },
     { tag: highlight.tags.changed, color: yellow },
-    // Module system - exports, require, module should be cyan
-    { tag: highlight.tags.special(highlight.tags.keyword), color: cyan }, // Special keywords like exports
-    // Function declarations and expressions - function keyword should be magenta
-    { tag: highlight.tags.definitionKeyword, color: hotPink }, // function, class, etc.
-    // Method names and function assignments - yellow
-    { tag: highlight.tags.function(highlight.tags.propertyName), color: yellow }, // obj.method, exports.functionName
-    // Arrow functions and anonymous functions
-    { tag: highlight.tags.function(highlight.tags.definition(highlight.tags.variableName)), color: yellow },
-    // Object property access - cyan for special objects like exports
-    { tag: highlight.tags.special(highlight.tags.propertyName), color: cyan }, // exports.something
     // Language-specific: CSS
     { tag: highlight.tags.unit, color: parameterYellow }, // CSS units
-    // Enhanced code block syntax highlighting for better JavaScript support
-    // ====================================================================
-    // JavaScript/TypeScript keywords in code blocks
-    { tag: [highlight.tags.controlKeyword, highlight.tags.keyword], color: orange }, // return, if, else, etc.
-    // Variables in code blocks - white for better readability
-    { tag: [highlight.tags.variableName, highlight.tags.local(highlight.tags.variableName)], color: foreground },
-    // Functions in code blocks - yellow
-    {
-        tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.function(highlight.tags.definition(highlight.tags.variableName))],
-        color: yellow,
-    },
-    // Strings in code blocks
-    { tag: [highlight.tags.string, highlight.tags.special(highlight.tags.string)], color: lightGreen },
-    // Numbers in code blocks
-    { tag: [highlight.tags.number, highlight.tags.integer, highlight.tags.float], color: pink },
-    // Comments in code blocks
-    {
-        tag: [highlight.tags.comment, highlight.tags.lineComment, highlight.tags.blockComment],
-        color: blue,
-        fontStyle: 'italic',
-    },
-    // HTML/XML in code blocks
-    { tag: [highlight.tags.tagName, highlight.tags.angleBracket], color: lightBlue },
-    { tag: [highlight.tags.attributeName], color: yellow, fontStyle: 'italic' },
-    { tag: [highlight.tags.attributeValue], color: lightGreen },
-    { tag: [highlight.tags.propertyName], color: lightBlue },
-    { tag: [highlight.tags.className], color: lightPink, fontStyle: 'italic' },
-    { tag: [highlight.tags.standard(highlight.tags.propertyName)], color: supportTeal },
     // Entity names
     { tag: highlight.tags.labelName, color: yellow },
     { tag: highlight.tags.escape, color: yellow },

package/dist/index.js

@@ -433,12 +433,22 @@ const cobalt2Theme = /*@__PURE__*/EditorView.theme({
  * Enhanced syntax highlighting for the Cobalt2 theme
  */
 const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
+    // Comments
+    { tag: tags.comment, color: blue, fontStyle: 'italic' },
+    { tag: tags.docComment, color: blue, fontStyle: 'italic' },
+    { tag: tags.lineComment, color: blue, fontStyle: 'italic' },
+    { tag: tags.blockComment, color: blue, fontStyle: 'italic' },
     // Keywords and control flow
     { tag: tags.keyword, color: orange },
     { tag: tags.controlKeyword, color: orange },
     { tag: tags.operatorKeyword, color: orange },
     { tag: tags.moduleKeyword, color: cyan },
     { tag: tags.definitionKeyword, color: hotPink },
+    // Special language constructs
+    { tag: tags.self, color: hotPink },
+    { tag: /*@__PURE__*/tags.special(tags.variableName), color: cyan },
+    { tag: /*@__PURE__*/tags.special(tags.keyword), color: cyan },
+    { tag: /*@__PURE__*/tags.special(tags.propertyName), color: cyan },
     // Variables - Enhanced for better distinction
     { tag: tags.variableName, color: foreground },
     { tag: /*@__PURE__*/tags.definition(tags.variableName), color: foreground },
@@ -448,41 +458,14 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
     { tag: tags.className, color: lightPink, fontStyle: 'italic' },
     { tag: tags.namespace, color: lightPink, fontStyle: 'italic' },
     { tag: tags.macroName, color: lightPink, fontStyle: 'italic' },
-    { tag: /*@__PURE__*/tags.standard(tags.tagName), color: supportTeal },
-    { tag: /*@__PURE__*/tags.standard(tags.propertyName), color: supportTeal },
-    // Operators and punctuation
-    { tag: tags.operator, color: lightGray },
-    { tag: tags.derefOperator, color: lightGray },
-    { tag: tags.arithmeticOperator, color: lightGray },
-    { tag: tags.logicOperator, color: lightGray },
-    { tag: tags.bitwiseOperator, color: lightGray },
-    { tag: tags.compareOperator, color: lightGray },
-    { tag: tags.updateOperator, color: lightGray },
-    { tag: tags.punctuation, color: lightGray },
-    { tag: tags.bracket, color: lightGray },
-    { tag: tags.brace, color: lightGray },
-    { tag: tags.squareBracket, color: lightGray },
-    { tag: tags.paren, color: yellow },
-    { tag: tags.angleBracket, color: lightGray },
-    { tag: [tags.operator, tags.punctuation], color: lightGray },
-    // Functions
+    // Functions - specific function types first
     { tag: /*@__PURE__*/tags.function(tags.variableName), color: yellow },
     { tag: /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName)), color: yellow },
     { tag: /*@__PURE__*/tags.function(tags.propertyName), color: yellow },
-    { tag: [tags.moduleKeyword, /*@__PURE__*/tags.special(tags.keyword)], color: cyan },
-    { tag: [tags.definitionKeyword], color: hotPink },
-    // Comments
-    { tag: tags.comment, color: blue, fontStyle: 'italic' },
-    { tag: tags.docComment, color: blue, fontStyle: 'italic' },
-    { tag: tags.lineComment, color: blue, fontStyle: 'italic' },
-    { tag: tags.blockComment, color: blue, fontStyle: 'italic' },
-    // Storage and function keywords
-    { tag: tags.modifier, color: yellow, fontStyle: 'italic' },
-    // Special variables and exports
-    { tag: /*@__PURE__*/tags.special(tags.variableName), color: cyan },
     // Properties
     { tag: tags.propertyName, color: lightBlue },
     { tag: /*@__PURE__*/tags.definition(tags.propertyName), color: lightBlue },
+    { tag: /*@__PURE__*/tags.standard(tags.propertyName), color: supportTeal },
     // Constants
     { tag: /*@__PURE__*/tags.constant(tags.name), color: pink },
     { tag: /*@__PURE__*/tags.standard(tags.name), color: pink },
@@ -492,9 +475,9 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
     { tag: tags.bool, color: pink },
     { tag: tags.atom, color: pink },
     { tag: tags.null, color: pink },
-    // Strings
-    { tag: tags.string, color: lightGreen },
+    // Strings - specific string types first
     { tag: /*@__PURE__*/tags.special(tags.string), color: green },
+    { tag: tags.string, color: lightGreen },
     { tag: tags.regexp, color: lightGreen },
     // String quotes
     { tag: tags.quote, color: stringQuotes },
@@ -502,14 +485,30 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
     { tag: /*@__PURE__*/tags.definition(/*@__PURE__*/tags.function(tags.variableName)), color: parameterYellow },
     // HTML/XML elements
     { tag: tags.tagName, color: lightBlue },
+    { tag: /*@__PURE__*/tags.standard(tags.tagName), color: supportTeal },
     { tag: tags.attributeName, color: yellow, fontStyle: 'italic' },
     { tag: tags.attributeValue, color: lightGreen },
-    // Special language constructs
-    { tag: tags.self, color: hotPink },
+    // Operators and punctuation
+    { tag: tags.operator, color: lightGray },
+    { tag: tags.derefOperator, color: lightGray },
+    { tag: tags.arithmeticOperator, color: lightGray },
+    { tag: tags.logicOperator, color: lightGray },
+    { tag: tags.bitwiseOperator, color: lightGray },
+    { tag: tags.compareOperator, color: lightGray },
+    { tag: tags.updateOperator, color: lightGray },
+    { tag: tags.punctuation, color: lightGray },
+    { tag: tags.bracket, color: lightGray },
+    { tag: tags.brace, color: lightGray },
+    { tag: tags.squareBracket, color: lightGray },
+    { tag: tags.paren, color: yellow },
+    { tag: tags.angleBracket, color: lightGray },
+    // Storage and function keywords
+    { tag: tags.modifier, color: yellow, fontStyle: 'italic' },
     // Meta and annotations
     { tag: tags.meta, color: lightBlue },
     { tag: tags.annotation, color: yellow, fontStyle: 'italic' },
     { tag: tags.processingInstruction, color: yellow },
+    // Markdown elements
     { tag: tags.heading, color: yellow, fontWeight: 'bold' },
     { tag: tags.heading1, color: yellow, fontWeight: 'bold' },
     { tag: tags.heading2, color: yellow, fontWeight: 'bold' },
@@ -521,7 +520,6 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
     { tag: tags.strong, color: lightBlue, fontWeight: 'bold' },
     { tag: tags.emphasis, color: lightBlue, fontStyle: 'italic' },
     { tag: tags.list, color: yellow },
-    { tag: tags.quote, color: lightBlue, fontStyle: 'italic' },
     // Code blocks and inline code - Enhanced styling
     { tag: tags.monospace, color: lightBlue },
     { tag: /*@__PURE__*/tags.special(tags.monospace), color: green },
@@ -534,46 +532,8 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
     { tag: tags.deleted, color: pink },
     { tag: tags.inserted, color: lightGreen },
     { tag: tags.changed, color: yellow },
-    // Module system - exports, require, module should be cyan
-    { tag: /*@__PURE__*/tags.special(tags.keyword), color: cyan }, // Special keywords like exports
-    // Function declarations and expressions - function keyword should be magenta
-    { tag: tags.definitionKeyword, color: hotPink }, // function, class, etc.
-    // Method names and function assignments - yellow
-    { tag: /*@__PURE__*/tags.function(tags.propertyName), color: yellow }, // obj.method, exports.functionName
-    // Arrow functions and anonymous functions
-    { tag: /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName)), color: yellow },
-    // Object property access - cyan for special objects like exports
-    { tag: /*@__PURE__*/tags.special(tags.propertyName), color: cyan }, // exports.something
     // Language-specific: CSS
     { tag: tags.unit, color: parameterYellow }, // CSS units
-    // Enhanced code block syntax highlighting for better JavaScript support
-    // ====================================================================
-    // JavaScript/TypeScript keywords in code blocks
-    { tag: [tags.controlKeyword, tags.keyword], color: orange }, // return, if, else, etc.
-    // Variables in code blocks - white for better readability
-    { tag: [tags.variableName, /*@__PURE__*/tags.local(tags.variableName)], color: foreground },
-    // Functions in code blocks - yellow
-    {
-        tag: [/*@__PURE__*/tags.function(tags.variableName), /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName))],
-        color: yellow,
-    },
-    // Strings in code blocks
-    { tag: [tags.string, /*@__PURE__*/tags.special(tags.string)], color: lightGreen },
-    // Numbers in code blocks
-    { tag: [tags.number, tags.integer, tags.float], color: pink },
-    // Comments in code blocks
-    {
-        tag: [tags.comment, tags.lineComment, tags.blockComment],
-        color: blue,
-        fontStyle: 'italic',
-    },
-    // HTML/XML in code blocks
-    { tag: [tags.tagName, tags.angleBracket], color: lightBlue },
-    { tag: [tags.attributeName], color: yellow, fontStyle: 'italic' },
-    { tag: [tags.attributeValue], color: lightGreen },
-    { tag: [tags.propertyName], color: lightBlue },
-    { tag: [tags.className], color: lightPink, fontStyle: 'italic' },
-    { tag: [/*@__PURE__*/tags.standard(tags.propertyName)], color: supportTeal },
     // Entity names
     { tag: tags.labelName, color: yellow },
     { tag: tags.escape, color: yellow },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fsegurai/codemirror-theme-cobalt2",
   "description": "Cobalt2 theme for the CodeMirror editor",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "type": "module",
   "main": "dist/index.cjs",
   "exports": {