diff --git a/.gitmodules b/.gitmodules
index ae2b9e6..e69de29 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +0,0 @@
-[submodule "syntaxes"]
-	path = syntaxes
-	url = https://github.com/textualize/tcss-textmate-grammar
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 30bf8c2..2d208bc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,6 @@
         "out": true // set this to false to include "out" folder in search results
     },
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
-}
\ No newline at end of file
+    "typescript.tsc.autoDetect": "off",
+    "editor.fontLigatures": false
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 89db75b..f3f4a4a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
-## [0.1.0]
+
+## 0.2.0
+
+- Add highlighting for all types of values
+- Add highlighting for variable use and assignment
+
+## 0.1.0
 
 - Initial release
diff --git a/README.md b/README.md
index a8bc0d0..1713252 100644
--- a/README.md
+++ b/README.md
@@ -5,9 +5,16 @@
 Does syntax highlighting for Textual CSS files (files with the extension `.tcss`).
 
 ![A view of a highlighted file.](./tcss.png)
-## Known Issues
 
-This extension does not support highlighting variables or selectors.
+
+## Grammar dependency
+
+This extension uses the grammar `tcss.tmGrammar.json` that is converted from the YAML grammar in the [TCSS TextMate grammar repository](https://github.com/Textualize/tcss-textmate-grammar).
+To convert the YAML grammar into this JSON grammar, use
+
+```bash
+npx js-yaml ../tcss-textmate-grammar/grammar.yaml > syntaxes/tcss.tmGrammar.json
+```
 
 ## Release Notes
 
diff --git a/package-lock.json b/package-lock.json
index 8c54d9d..9ca2462 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "first-highlighter",
-  "version": "0.0.1",
+  "name": "textual-css-syntax-highlighter",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "first-highlighter",
-      "version": "0.0.1",
+      "name": "textual-css-syntax-highlighter",
+      "version": "0.1.0",
       "devDependencies": {
         "@types/glob": "^8.1.0",
         "@types/mocha": "^10.0.1",
@@ -17,6 +17,7 @@
         "@vscode/test-electron": "^2.3.2",
         "eslint": "^8.41.0",
         "glob": "^8.1.0",
+        "js-yaml": "^4.1.0",
         "mocha": "^10.2.0",
         "typescript": "^5.1.3"
       },
diff --git a/package.json b/package.json
index fb8fb25..97272f9 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,9 @@
     "languages": [
       {
         "id": "Textual CSS",
-        "extensions": [".tcss"]
+        "extensions": [
+          ".tcss"
+        ]
       }
     ],
     "grammars": [
@@ -38,16 +40,17 @@
     "test": "node ./out/test/runTest.js"
   },
   "devDependencies": {
-    "@types/vscode": "^1.79.0",
     "@types/glob": "^8.1.0",
     "@types/mocha": "^10.0.1",
     "@types/node": "20.2.5",
+    "@types/vscode": "^1.79.0",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
+    "@vscode/test-electron": "^2.3.2",
     "eslint": "^8.41.0",
     "glob": "^8.1.0",
+    "js-yaml": "^4.1.0",
     "mocha": "^10.2.0",
-    "typescript": "^5.1.3",
-    "@vscode/test-electron": "^2.3.2"
+    "typescript": "^5.1.3"
   }
 }
diff --git a/syntaxes b/syntaxes
deleted file mode 160000
index 0d74784..0000000
--- a/syntaxes
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 0d74784f44ee6fd225ccc21f7665fc22b3d22876
diff --git a/syntaxes/tcss.tmGrammar.json b/syntaxes/tcss.tmGrammar.json
new file mode 100644
index 0000000..aa91bdc
--- /dev/null
+++ b/syntaxes/tcss.tmGrammar.json
@@ -0,0 +1,371 @@
+{
+  "scopeName": "source.tcss",
+  "name": "Textual CSS",
+  "fileTypes": [
+    "tcss"
+  ],
+  "patterns": [
+    {
+      "include": "#comment-block"
+    },
+    {
+      "include": "#comment-line"
+    },
+    {
+      "include": "#combinators"
+    },
+    {
+      "include": "#selector"
+    },
+    {
+      "include": "#rule-list"
+    },
+    {
+      "include": "#variable-definition"
+    }
+  ],
+  "repository": {
+    "color-keywords": {
+      "patterns": [
+        {
+          "match": "(?<![\\w-])(ansi_black|ansi_blue|ansi_bright_black|ansi_bright_blue|ansi_bright_cyan|ansi_bright_green|ansi_bright_magenta|ansi_bright_red|ansi_bright_white|ansi_bright_yellow|ansi_cyan|ansi_green|ansi_magenta|ansi_red|ansi_white|ansi_yellow)(?![\\w-])",
+          "name": "support.constant.color.ansi.tcss"
+        },
+        {
+          "match": "(?<![\\w-])(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)(?![\\w-])",
+          "name": "support.constant.color.w3c-standard-color-name.tcss"
+        },
+        {
+          "match": "(?<![\\w-])(aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rebeccapurple|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|transparent|turquoise|violet|wheat|whitesmoke|yellowgreen)(?![\\w-])",
+          "name": "support.constant.color.w3c-extended-color-name.tcss"
+        },
+        {
+          "match": "(?<![\\w-])auto(?![\\w-])",
+          "name": "support.constant.color.auto.tcss"
+        }
+      ]
+    },
+    "combinators": {
+      "patterns": [
+        {
+          "match": ">",
+          "name": "keyword.operator.combinator.tcss"
+        }
+      ]
+    },
+    "commas": {
+      "patterns": [
+        {
+          "match": ",",
+          "name": "punctuation.separator.list.comma.tcss"
+        }
+      ]
+    },
+    "comment-block": {
+      "begin": "/\\*",
+      "beginCaptures": {
+        "0": {
+          "name": "punctuation.definition.comment.begin.tcss"
+        }
+      },
+      "end": "\\*/",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.definition.comment.end.tcss"
+        }
+      },
+      "name": "comment.block.tcss"
+    },
+    "comment-line": {
+      "begin": "\\# ",
+      "beginCaptures": {
+        "0": {
+          "name": "punctuation.definition.comment.begin.tcss"
+        }
+      },
+      "end": "$",
+      "name": "comment.line.tcss"
+    },
+    "functions": {
+      "begin": "(?<![\\w-])(rgba?|hsla?)(\\()",
+      "beginCaptures": {
+        "1": {
+          "name": "support.function.misc.tcss"
+        },
+        "2": {
+          "name": "punctuation.section.function.begin.bracket.round.tcss"
+        }
+      },
+      "end": "\\)",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.section.function.end.bracket.round.tcss"
+        }
+      },
+      "patterns": [
+        {
+          "include": "#property-values"
+        }
+      ]
+    },
+    "numeric-values": {
+      "patterns": [
+        {
+          "captures": {
+            "1": {
+              "name": "punctuation.definition.constant.tcss"
+            }
+          },
+          "match": "(#)(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b",
+          "name": "constant.other.color.rgb-value.hex.tcss"
+        },
+        {
+          "captures": {
+            "1": {
+              "name": "keyword.other.unit.percentage.tcss"
+            },
+            "2": {
+              "name": "keyword.other.unit.${2:/downcase}.tcss"
+            }
+          },
+          "match": "(?<![\\w-])[-+]?(?:[0-9]+(?:\\.[0-9]+)?|\\.[0-9]+)(?:(%)|(fr|h|vh|vw|w)\\b)?",
+          "name": "constant.numeric.tcss"
+        }
+      ]
+    },
+    "property-keywords": {
+      "patterns": [
+        {
+          "match": "(?<![\\w-])(?:ascii|auto|blank|block|bold|border-box|bottom|center|content-box|dashed|double|end|grid|heavy|hidden|hkey|horizontal|inner|italic|justify|left|middle|none|outer|reverse|right|round|scroll|solid|stable|start|strike|tall|thick|top|underline|vertical|visible|vkey|wide)(?![\\w-])",
+          "name": "support.constant.property-value.tcss"
+        }
+      ]
+    },
+    "property-names": {
+      "patterns": [
+        {
+          "match": "(?<![\\w-])(?:align|align-horizontal|align-vertical|background|border|border-bottom|border-left|border-right|border-subtitle-align|border-subtitle-background|border-subtitle-color|border-subtitle-style|border-title-align|border-title-background|border-title-color|border-title-style|border-top|box-sizing|color|column-span|content-align|content-align-horizontal|content-align-vertical|display|dock|grid-columns|grid-gutter|grid-rows|grid-size|height|layer|layers|layout|link-background|link-color|link-hover-background|link-hover-color|link-hover-style|link-style|margin|margin-bottom|margin-left|margin-right|margin-top|max-height|max-width|min-height|min-width|offset|offset-x|offset-y|opacity|outline|outline-bottom|outline-left|outline-right|outline-top|overflow|overflow-x|overflow-y|padding|padding-bottom|padding-left|padding-right|padding-top|row-span|scrollbar-background|scrollbar-background-active|scrollbar-background-hover|scrollbar-color|scrollbar-color-active|scrollbar-color-hover|scrollbar-corner-color|scrollbar-gutter|scrollbar-size|scrollbar-size-horizontal|scrollbar-size-vertical|text-align|text-opacity|text-style|tint|visibility|width)(?![\\w-])",
+          "name": "support.type.property-name.tcss"
+        }
+      ]
+    },
+    "property-values": {
+      "patterns": [
+        {
+          "include": "#commas"
+        },
+        {
+          "include": "#comment-block"
+        },
+        {
+          "include": "#variables"
+        },
+        {
+          "include": "#functions"
+        },
+        {
+          "include": "#property-keywords"
+        },
+        {
+          "include": "#numeric-values"
+        },
+        {
+          "include": "#color-keywords"
+        },
+        {
+          "include": "#text"
+        },
+        {
+          "match": "!\\s*important(?![\\w-])",
+          "name": "keyword.other.important.tcss"
+        }
+      ]
+    },
+    "pseudo-classes": {
+      "match": "(:)(:*)(?:disabled|enabled|focus|focus-within|hover)(?![\\w-]|\\s*[;}])",
+      "captures": {
+        "1": {
+          "name": "punctuation.definition.entity.tcss"
+        },
+        "2": {
+          "name": "invalid.illegal.colon.tcss"
+        }
+      },
+      "name": "entity.other.attribute-name.pseudo-class.tcss"
+    },
+    "rule-list": {
+      "begin": "{",
+      "beginCaptures": {
+        "0": {
+          "name": "punctuation.section.property-list.begin.bracket.curly.tcss"
+        }
+      },
+      "end": "}",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.section.property-list.end.bracket.curly.tcss"
+        }
+      },
+      "name": "meta.property-list.tcss",
+      "patterns": [
+        {
+          "include": "#rule-list-innards"
+        }
+      ]
+    },
+    "rule-list-innards": {
+      "patterns": [
+        {
+          "include": "#comment-block"
+        },
+        {
+          "include": "#comment-line"
+        },
+        {
+          "begin": "(?<![-a-zA-Z])(?=[a-zA-Z])",
+          "end": "$|(?![-a-zA-Z])",
+          "name": "meta.property-name.tcss",
+          "patterns": [
+            {
+              "include": "#property-names"
+            }
+          ]
+        },
+        {
+          "begin": "(:)\\s*",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.separator.key-value.tcss"
+            }
+          },
+          "end": "\\s*(;)|\\s*(?=})",
+          "endCaptures": {
+            "1": {
+              "name": "punctuation.terminator.rule.tcss"
+            }
+          },
+          "contentName": "meta.property-value.tcss",
+          "patterns": [
+            {
+              "include": "#comment-block"
+            },
+            {
+              "include": "#property-values"
+            }
+          ]
+        },
+        {
+          "match": ";",
+          "name": "punctuation.terminator.rule.tcss"
+        }
+      ]
+    },
+    "selector": {
+      "begin": "(?=[.*\\#a-zA-Z_])",
+      "end": "(?=\\s*{)",
+      "name": "meta.selector.tcss",
+      "patterns": [
+        {
+          "include": "#selector-innards"
+        }
+      ]
+    },
+    "selector-innards": {
+      "patterns": [
+        {
+          "include": "#comment-block"
+        },
+        {
+          "include": "#comment-line"
+        },
+        {
+          "include": "#commas"
+        },
+        {
+          "include": "#combinators"
+        },
+        {
+          "match": "\\*",
+          "name": "entity.name.tag.wildcard.tcss"
+        },
+        {
+          "captures": {
+            "1": {
+              "name": "punctuation.definition.entity.css"
+            }
+          },
+          "match": "([.\\#])(?:-?[0-9]|-(?=$|[\\s,.\\#:{>]|/\\*|# ))(?:[-a-zA-Z_0-9])*",
+          "name": "invalid.illegal.bad-identifier.tcss"
+        },
+        {
+          "captures": {
+            "1": {
+              "name": "punctuation.definition.entity.tcss"
+            }
+          },
+          "match": "(\\.)(?:[-a-zA-Z_0-9])+(?=$|[\\s,.\\#:{>]|/\\*|# )",
+          "name": "entity.other.attribute-name.class.css"
+        },
+        {
+          "captures": {
+            "1": {
+              "name": "punctuation.definition.entity.tcss"
+            }
+          },
+          "match": "(\\#)(?:[-a-zA-Z0-9])+(?=$|[\\s,.\\#:{>]|/\\*|# )",
+          "name": "entity.other.attribute-name.id.tcss"
+        },
+        {
+          "include": "#pseudo-classes"
+        },
+        {
+          "match": "(?<![\\w-])(?![0-9])(?:\\w)+(?!\\w)",
+          "name": "entity.name.tag.widget.tcss"
+        }
+      ]
+    },
+    "text": {
+      "match": "\\w+",
+      "name": "string.tcss"
+    },
+    "variables": {
+      "captures": {
+        "1": {
+          "name": "punctuation.definition.variable.tcss"
+        }
+      },
+      "match": "(\\$)[a-zA-Z_-][a-zA-Z0-9_-]*",
+      "name": "variable.tcss"
+    },
+    "variable-definition": {
+      "patterns": [
+        {
+          "include": "#variables"
+        },
+        {
+          "begin": "(:)\\s*",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.separator.key-value.tcss"
+            }
+          },
+          "end": "\\s*(;)",
+          "endCaptures": {
+            "1": {
+              "name": "punctuation.terminator.rule.tcss"
+            }
+          },
+          "contentName": "meta.property-value.tcss",
+          "patterns": [
+            {
+              "include": "#comment-block"
+            },
+            {
+              "include": "#property-values"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
diff --git a/tcss.png b/tcss.png
index a33a3f3..99e1ff8 100644
Binary files a/tcss.png and b/tcss.png differ