presently 0.1.0

data/public/_components/@socketry/syntax/themes/base/diff.css

@@ -0,0 +1,48 @@
+/* Per-language overrides for Diff (empty by default). */
+
+/* Light mode: Style entire lines based on the type of change */
+.syntax.diff .insert {
+	background-color: rgba(0, 180, 0, 0.08);
+}
+
+.syntax.diff .remove {
+	background-color: rgba(220, 0, 0, 0.08);
+}
+
+.syntax.diff .offset {
+	background-color: rgba(0, 100, 200, 0.08);
+	font-weight: bold;
+}
+
+.syntax.diff .add {
+	color: #22863a;
+	font-weight: bold;
+}
+
+.syntax.diff .del {
+	color: #b31d28;
+	font-weight: bold;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	.syntax.diff .insert {
+		background-color: rgba(0, 255, 0, 0.1);
+	}
+
+	.syntax.diff .remove {
+		background-color: rgba(255, 0, 0, 0.1);
+	}
+
+	.syntax.diff .offset {
+		background-color: rgba(0, 150, 255, 0.1);
+	}
+
+	.syntax.diff .add {
+		color: #34d058;
+	}
+
+	.syntax.diff .del {
+		color: #ea4a5a;
+	}
+}

data/public/_components/@socketry/syntax/themes/base/go.css

@@ -0,0 +1 @@
+/* Per-language overrides for Go (empty by default). */

data/public/_components/@socketry/syntax/themes/base/haskell.css

@@ -0,0 +1 @@
+/* Per-language overrides for Haskell (empty by default). */

data/public/_components/@socketry/syntax/themes/base/html.css

@@ -0,0 +1 @@
+/* Per-language overrides for HTML (empty by default). */

data/public/_components/@socketry/syntax/themes/base/io.css

@@ -0,0 +1 @@
+/* Io Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/java.css

@@ -0,0 +1 @@
+/* Java Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/javascript.css

@@ -0,0 +1 @@
+/* Per-language overrides for JavaScript (empty by default). */

data/public/_components/@socketry/syntax/themes/base/json.css

@@ -0,0 +1,41 @@
+/* JSON syntax highlighting styles */
+
+/* Light mode (default) */
+code.syntax .key {
+	color: #0451a5;
+	font-weight: normal;
+}
+
+code.syntax .string {
+	color: #a31515;
+}
+
+code.syntax .constant {
+	color: #098658;
+}
+
+code.syntax .operator {
+	color: #000000;
+	opacity: 0.6;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	code.syntax .key {
+		color: #9cdcfe;
+		font-weight: normal;
+	}
+
+	code.syntax .string {
+		color: #ce9178;
+	}
+
+	code.syntax .constant {
+		color: #b5cea8;
+	}
+
+	code.syntax .operator {
+		color: #d4d4d4;
+		opacity: 0.8;
+	}
+}

data/public/_components/@socketry/syntax/themes/base/lisp.css

@@ -0,0 +1 @@
+/* Lisp Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/lua.css

@@ -0,0 +1 @@
+/* Lua Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/markdown.css

@@ -0,0 +1,16 @@
+/**
+ * Markdown language theme
+ * 
+ * Markdown uses semantic token types with appropriate styling.
+ * Colors are derived from the base theme using hue rotation.
+ */
+
+/* Semantic markdown tokens */
+code.syntax .heading { color: hsl(calc(var(--syntax-base-hue) + 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .emphasis { color: hsl(calc(var(--syntax-base-hue) - 90), calc(var(--syntax-base-saturation) - 10%), calc(var(--syntax-base-lightness) - 10%)); font-style: italic; }
+code.syntax .strong { color: hsl(calc(var(--syntax-base-hue) + 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .code { color: hsl(calc(var(--syntax-base-hue) - 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .link { color: hsl(calc(var(--syntax-base-hue) - 60), var(--syntax-base-saturation), var(--syntax-base-lightness)); text-decoration: underline; }
+code.syntax .quote { color: hsl(var(--syntax-base-hue), calc(var(--syntax-base-saturation) - 45%), var(--syntax-base-lightness)); font-style: italic; }
+code.syntax .list-marker { color: hsl(calc(var(--syntax-base-hue) + 90), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+

data/public/_components/@socketry/syntax/themes/base/nginx.css

@@ -0,0 +1 @@
+/* Nginx Configuration Theme */

data/public/_components/@socketry/syntax/themes/base/ocaml.css

@@ -0,0 +1 @@
+/* OCaml/F# Theme */

data/public/_components/@socketry/syntax/themes/base/pascal.css

@@ -0,0 +1 @@
+/* Pascal/Delphi Theme */

data/public/_components/@socketry/syntax/themes/base/perl5.css

@@ -0,0 +1 @@
+/* Perl 5 Syntax Highlighting */

data/public/_components/@socketry/syntax/themes/base/php-script.css

@@ -0,0 +1 @@
+/* PHP-script Syntax Highlighting Theme */

data/public/_components/@socketry/syntax/themes/base/php.css

@@ -0,0 +1 @@
+/* PHP Syntax Highlighting Theme */

data/public/_components/@socketry/syntax/themes/base/plain.css

@@ -0,0 +1 @@
+/* Plain Text Syntax Highlighting */

data/public/_components/@socketry/syntax/themes/base/protobuf.css

@@ -0,0 +1 @@
+/* Protocol Buffers Syntax Highlighting */

data/public/_components/@socketry/syntax/themes/base/python.css

@@ -0,0 +1 @@
+/* Per-language overrides for Python (empty by default). */

data/public/_components/@socketry/syntax/themes/base/ruby.css

@@ -0,0 +1,23 @@
+/* Ruby-specific token styles */
+
+/* Light mode */
+/* Symbols like :symbol */
+code.syntax .symbol {
+	color: #d73a49;
+}
+
+/* Instance/class/global variables */
+code.syntax .variable {
+	color: #6f42c1;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	code.syntax .symbol {
+		color: #e06c75;
+	}
+
+	code.syntax .variable {
+		color: #e5c07b;
+	}
+}

data/public/_components/@socketry/syntax/themes/base/scala.css

@@ -0,0 +1,3 @@
+/* Scala language specific tweaks (optional) */
+
+/* Inherit base theme colors for standard token types. Add overrides here if desired. */

data/public/_components/@socketry/syntax/themes/base/smalltalk.css

@@ -0,0 +1 @@
+/* Smalltalk Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/sql.css

@@ -0,0 +1 @@
+/* SQL Syntax Theme */

data/public/_components/@socketry/syntax/themes/base/super-collider.css

@@ -0,0 +1,33 @@
+/* SuperCollider-specific token styles */
+
+/* Light mode */
+/* Symbols like \freq or 'name' */
+code.syntax .symbol {
+	color: #d73a49; /* red accent distinct from strings */
+}
+
+/* SC instance/class/global variables (@var, @@var, $char shown as constant) */
+code.syntax .variable {
+	color: #6f42c1; /* purple distinct from constants */
+}
+
+/* Optional: emphasize function/method calls a bit more */
+code.syntax .function {
+	color: #005cc5;
+	font-weight: 600;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	code.syntax .symbol {
+		color: #e06c75; /* reddish accent distinct from strings */
+	}
+
+	code.syntax .variable {
+		color: #e5c07b; /* warm yellow distinct from constants */
+	}
+
+	code.syntax .function {
+		color: #61afef;
+	}
+}

data/public/_components/@socketry/syntax/themes/base/swift.css

@@ -0,0 +1 @@
+/* Swift specific styles */

data/public/_components/@socketry/syntax/themes/base/syntax.css

@@ -0,0 +1,63 @@
+:host {
+	/* Base color - all other colors derive from this via hue rotation */
+	--syntax-base-hue: 270;
+	--syntax-base-saturation: 60%;
+	--syntax-base-lightness: 50%;
+}
+
+@media (prefers-color-scheme: dark) {
+	:host {
+		--syntax-base-saturation: 50%;
+		--syntax-base-lightness: 70%;
+	}
+}
+
+:host(:not([wrap])) {
+	overflow-x: auto;
+	white-space: pre;
+}
+
+:host[wrap] {
+	white-space: pre-wrap;
+}
+
+:host([wrap]) code.syntax > span {
+	display: flex;
+}
+
+code.syntax {
+	tab-size: 2;
+}
+
+:host([wrap]) code.syntax .indent {
+	flex-grow: 0;
+	flex-shrink: 0;
+	opacity: 0.5;
+}
+
+:host([wrap]) code.syntax .text {
+	white-space: pre-wrap;
+	padding-left: 2ch;
+	text-indent: -2ch;
+}
+
+/* Token type styles - colors derived from base via hue rotation */
+code.syntax .keyword { color: hsl(calc(var(--syntax-base-hue) + 15), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .string { color: hsl(calc(var(--syntax-base-hue) - 45), calc(var(--syntax-base-saturation) - 10%), calc(var(--syntax-base-lightness) - 5%)); }
+code.syntax .comment { color: hsl(var(--syntax-base-hue), calc(var(--syntax-base-saturation) - 45%), var(--syntax-base-lightness)); font-style: italic; }
+code.syntax .number { color: hsl(calc(var(--syntax-base-hue) - 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .operator { color: hsl(calc(var(--syntax-base-hue) + 45), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .function { color: hsl(calc(var(--syntax-base-hue) - 60), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .constant { color: hsl(calc(var(--syntax-base-hue) - 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .type { color: hsl(var(--syntax-base-hue), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .preprocessor { color: hsl(calc(var(--syntax-base-hue) + 30), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-style: italic; }
+code.syntax .access { color: hsl(calc(var(--syntax-base-hue) + 15), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .escape { color: hsl(calc(var(--syntax-base-hue) + 60), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+
+/* HTML-oriented tokens */
+code.syntax .tag { color: hsl(calc(var(--syntax-base-hue) + 50), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .tag-name { color: hsl(calc(var(--syntax-base-hue) + 50), var(--syntax-base-saturation), var(--syntax-base-lightness)); font-weight: bold; }
+code.syntax .attribute { color: hsl(calc(var(--syntax-base-hue) - 40), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .entity { color: hsl(calc(var(--syntax-base-hue) + 45), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .doctype { color: hsl(calc(var(--syntax-base-hue) + 15), var(--syntax-base-saturation), var(--syntax-base-lightness)); }
+code.syntax .cdata { color: hsl(var(--syntax-base-hue), calc(var(--syntax-base-saturation) - 45%), var(--syntax-base-lightness)); }

data/public/_components/@socketry/syntax/themes/base/xml.css

@@ -0,0 +1 @@
+/* XML specific styles */

data/public/_components/@socketry/syntax/themes/base/xrb.css

@@ -0,0 +1,29 @@
+/* XRB (XML with embedded Ruby) styles */
+
+/* Light mode */
+/* Delimiters for Ruby processing instruction: <?r ... ?> */
+code.syntax .ruby-pi-open,
+code.syntax .ruby-pi-close {
+   color: #005cc5; /* blue */
+   opacity: 0.9;
+}
+
+/* Delimiters for interpolation: #{ ... } */
+code.syntax .ruby-interp-open,
+code.syntax .ruby-interp-close {
+   color: #22863a; /* green */
+   opacity: 0.95;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	code.syntax .ruby-pi-open,
+	code.syntax .ruby-pi-close {
+	   color: #61afef; /* blue-ish */
+	}
+
+	code.syntax .ruby-interp-open,
+	code.syntax .ruby-interp-close {
+	   color: #98c379; /* green-ish */
+	}
+}

data/public/_components/@socketry/syntax/themes/base/yaml.css

@@ -0,0 +1 @@
+/* Per-language overrides for YAML (empty by default). */

data/public/_components/@socketry/syntax/themes/theming.md

@@ -0,0 +1,233 @@
+# Theming Guide
+
+The `@socketry/syntax` library uses CSS custom properties (variables) with HSL colors to provide a flexible and maintainable theming system.
+
+## Key Benefits
+
+1. **Ultra Simple**: Change just 3 variables to create a complete theme
+2. **Automatic Dark Mode**: Light and dark mode handled automatically
+3. **Automatic Color Harmony**: All colors derived from one base color using hue rotation
+4. **Easy Customization**: Override the base or individual colors as needed
+
+## Theme Architecture
+
+### The Base Color System
+
+Everything derives from three base variables:
+
+```css
+:host {
+	--syntax-base-hue: 270;           /* 0-360 degrees on the color wheel */
+	--syntax-base-saturation: 60%;    /* How vibrant the colors are */
+	--syntax-base-lightness: 50%;     /* How light/dark the colors are */
+}
+```
+
+**Dark mode** just adjusts saturation and lightness:
+
+```css
+@media (prefers-color-scheme: dark) {
+	:host {
+		--syntax-base-saturation: 50%;  /* Slightly less saturated */
+		--syntax-base-lightness: 70%;   /* Much lighter for dark backgrounds */
+	}
+}
+```
+
+### Automatic Color Derivation
+
+All token colors are automatically calculated using hue rotation:
+
+```css
+--syntax-keyword: hsl(calc(var(--syntax-base-hue) + 30), ...);   /* 30° rotation */
+--syntax-string: hsl(calc(var(--syntax-base-hue) - 90), ...);    /* 90° opposite */
+--syntax-function: hsl(calc(var(--syntax-base-hue) - 60), ...);  /* 60° rotation */
+/* etc. */
+```
+
+This ensures all colors are harmonious and work together!
+
+## Creating Custom Themes
+
+### Method 1: Change the Base Hue (Recommended)
+
+The simplest approach - just pick a different base color:
+
+```css
+.ocean-theme {
+	--syntax-base-hue: 200;  /* Blue - everything becomes ocean-themed! */
+}
+
+.sunset-theme {
+	--syntax-base-hue: 30;   /* Orange - warm sunset colors */
+}
+
+.forest-theme {
+	--syntax-base-hue: 140;  /* Green - natural forest palette */
+}
+```
+
+Then apply it:
+
+```html
+<syntax-code language="javascript" class="ocean-theme">
+	// Your code here
+</syntax-code>
+```
+
+### Method 2: Adjust Saturation and Lightness
+
+For more subtle themes:
+
+```css
+.pastel-theme {
+	--syntax-base-saturation: 40%;  /* Less vibrant */
+	--syntax-base-lightness: 65%;   /* Lighter */
+}
+
+.vivid-theme {
+	--syntax-base-saturation: 90%;  /* Very saturated */
+	--syntax-base-lightness: 45%;   /* Slightly darker */
+}
+```
+
+### Method 3: Override Specific Colors
+
+For fine-grained control:
+
+```css
+.custom-theme {
+	--syntax-base-hue: 280;  /* Purple base */
+	
+	/* But make strings green instead of the derived color */
+	--syntax-string: hsl(120, 60%, 40%);
+}
+```
+
+### Method 4: Custom Dark Mode
+
+Override dark mode values for specific themes:
+
+```css
+.my-theme {
+	--syntax-base-hue: 200;
+}
+
+@media (prefers-color-scheme: dark) {
+	.my-theme {
+		/* Different hue in dark mode */
+		--syntax-base-hue: 180;
+		--syntax-base-saturation: 45%;
+		--syntax-base-lightness: 75%;
+	}
+}
+```
+
+## Token Types
+
+All token types automatically get colors derived from the base. You can override individual ones if needed:
+
+### Programming Language Tokens
+
+- `keyword` - Language keywords (if, function, class)
+- `string` - String literals
+- `comment` - Code comments
+- `number` - Numeric literals
+- `operator` - Operators (+, -, *, etc.)
+- `function` - Function names
+- `constant` - Constants and literals
+- `type` - Type names
+- `preprocessor` - Preprocessor directives
+- `access` - Access modifiers (public, private)
+- `escape` - Escape sequences
+
+### HTML/XML Tokens
+
+- `tag` - HTML/XML tags
+- `tag-name` - Tag names
+- `attribute` - Attributes
+- `entity` - HTML entities
+- `doctype` - DOCTYPE declarations
+- `cdata` - CDATA sections
+
+### Semantic Markdown Tokens
+
+- `heading` - Headers (# Heading)
+- `strong` - Bold text (**bold**)
+- `emphasis` - Italic text (*italic*)
+- `code` - Code blocks and inline code
+- `link` - Links and images
+- `quote` - Blockquotes
+- `list-marker` - List markers
+
+## Dark Mode
+
+Dark mode colors are automatically applied using `prefers-color-scheme`:
+
+```css
+@media (prefers-color-scheme: dark) {
+	:host {
+		--syntax-keyword: hsl(var(--syntax-hue-primary), 50%, 70%);
+		/* Automatically lighter and less saturated for dark backgrounds */
+	}
+}
+```
+
+You can override dark mode colors in your custom theme:
+
+```css
+.my-theme {
+	--syntax-keyword: hsl(300, 80%, 40%);
+}
+
+@media (prefers-color-scheme: dark) {
+	.my-theme {
+		--syntax-keyword: hsl(300, 60%, 75%);
+	}
+}
+```
+
+## Example Themes
+
+### Monochrome
+
+```css
+.monochrome {
+	--syntax-keyword: hsl(0, 0%, 20%);
+	--syntax-string: hsl(0, 0%, 30%);
+	--syntax-comment: hsl(0, 0%, 60%);
+	--syntax-function: hsl(0, 0%, 25%);
+}
+```
+
+### High Contrast
+
+```css
+.high-contrast {
+	--syntax-hue-primary: 270;
+	/* Increase saturation and contrast */
+	--syntax-keyword: hsl(var(--syntax-hue-primary), 100%, 30%);
+	--syntax-string: hsl(0, 100%, 35%);
+	--syntax-comment: hsl(0, 0%, 40%);
+}
+```
+
+### Pastel
+
+```css
+.pastel {
+	/* Use same hues but with high lightness and low saturation */
+	--syntax-keyword: hsl(var(--syntax-hue-primary), 40%, 60%);
+	--syntax-string: hsl(var(--syntax-hue-tertiary), 40%, 60%);
+	--syntax-comment: hsl(var(--syntax-hue-neutral), 20%, 70%);
+}
+```
+
+## Tips
+
+1. **Hue Relationships**: Use complementary (180° apart) or analogous (30° apart) hues for harmony
+2. **Saturation**: Lower saturation (20-40%) for subtle themes, higher (70-90%) for vibrant themes
+3. **Lightness**: Keep 30-50% for light mode, 60-80% for dark mode
+4. **Contrast**: Ensure sufficient contrast between text and background (WCAG AA: 4.5:1 minimum)
+5. **Testing**: Test themes in both light and dark mode
+6. **Consistency**: Use the hue variables to maintain color relationships across tokens