@pierre/theme 0.0.23 → 0.0.24

package/package.json

@@ -2,7 +2,7 @@
   "name": "@pierre/theme",
   "displayName": "Pierre Theme",
   "description": "Pierre theme for Shiki, VS Code, and more",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "publisher": "pierrecomputer",
   "icon": "icon.png",
   "galleryBanner": {

package/src/palette.ts

@@ -277,7 +277,7 @@ export const light: Roles = {
     namespace: yellow["600"],
     decorator: blue["500"],
     escape: cyan["600"],
-    invalid: "#ffffff",
+    invalid: gray["1040"],
     tag: red["600"],
     attribute: mint["600"]
   },
@@ -354,7 +354,7 @@ export const dark: Roles = {
     namespace: yellow["500"],
     decorator: blue["400"],
     escape: cyan["400"],
-    invalid: "#ffffff",
+    invalid: gray["020"],
     tag: red["400"],
     attribute: mint["400"]
   },

package/themes/pierre-dark-vibrant.json

@@ -1405,7 +1405,7 @@
     {
       "scope": "constant.other.color.rgb-value.xi",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     },
     {
@@ -1874,25 +1874,25 @@
     {
       "scope": "invalid.illegal",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     },
     {
       "scope": "invalid.broken",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     },
     {
       "scope": "invalid.deprecated",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     },
     {
       "scope": "invalid.unimplemented",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.984314 0.984314 0.984314)"
       }
     }
   ],

package/themes/pierre-dark.json

@@ -1405,7 +1405,7 @@
     {
       "scope": "constant.other.color.rgb-value.xi",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     },
     {
@@ -1874,25 +1874,25 @@
     {
       "scope": "invalid.illegal",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     },
     {
       "scope": "invalid.broken",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     },
     {
       "scope": "invalid.deprecated",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     },
     {
       "scope": "invalid.unimplemented",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#fbfbfb"
       }
     }
   ],

package/themes/pierre-light-vibrant.json

@@ -1405,7 +1405,7 @@
     {
       "scope": "constant.other.color.rgb-value.xi",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     },
     {
@@ -1874,25 +1874,25 @@
     {
       "scope": "invalid.illegal",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     },
     {
       "scope": "invalid.broken",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     },
     {
       "scope": "invalid.deprecated",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     },
     {
       "scope": "invalid.unimplemented",
       "settings": {
-        "foreground": "color(display-p3 1.000000 1.000000 1.000000)"
+        "foreground": "color(display-p3 0.027451 0.027451 0.027451)"
       }
     }
   ],

package/themes/pierre-light.json

@@ -1405,7 +1405,7 @@
     {
       "scope": "constant.other.color.rgb-value.xi",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     },
     {
@@ -1874,25 +1874,25 @@
     {
       "scope": "invalid.illegal",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     },
     {
       "scope": "invalid.broken",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     },
     {
       "scope": "invalid.deprecated",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     },
     {
       "scope": "invalid.unimplemented",
       "settings": {
-        "foreground": "#ffffff"
+        "foreground": "#070707"
       }
     }
   ],

package/zed/extension.toml

@@ -1,7 +1,7 @@
 id = "pierre-theme"
 name = "Pierre"
 description = "A warm, orange-accented color theme with light and dark variants"
-version = "0.0.23"
+version = "0.0.24"
 schema_version = 1
 authors = ["pierrecomputer"]
 repository = "https://github.com/pierrecomputer/pierre-theme"

package/color-comparison.html

@@ -1,234 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pierre Theme - Display P3 Color Comparison</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            max-width: 1200px;
-            margin: 40px auto;
-            padding: 20px;
-            background: #141415;
-            color: #fbfbfb;
-        }
-        h1 { text-align: center; margin-bottom: 40px; }
-        .comparison-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
-            margin: 40px 0;
-        }
-        .color-card {
-            background: #1f1f21;
-            border-radius: 12px;
-            padding: 20px;
-            border: 1px solid #39393c;
-        }
-        .color-card h3 {
-            margin-top: 0;
-            color: #fbfbfb;
-        }
-        .color-swatch {
-            height: 100px;
-            border-radius: 8px;
-            margin: 10px 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 600;
-            font-family: 'Monaco', 'Courier New', monospace;
-            font-size: 12px;
-            color: white;
-            text-shadow: 0 0 2px rgba(0,0,0,0.5);
-        }
-
-        .label {
-            font-size: 12px;
-            color: #adadb1;
-            margin-bottom: 5px;
-            margin-top: 15px;
-        }
-        .hex-value {
-            font-family: 'Monaco', 'Courier New', monospace;
-            font-size: 11px;
-            color: #c6c6c8;
-            margin-top: 5px;
-            word-break: break-all;
-        }
-        .info {
-            background: #2e2e30;
-            padding: 20px;
-            border-radius: 8px;
-            margin: 20px 0;
-            border-left: 4px solid color(display-p3 0.340 0.734 0.360);
-        }
-        .info h3 {
-            margin-top: 0;
-        }
-        .p3-notice {
-            text-align: center;
-            padding: 15px;
-            background: #39393c;
-            border-radius: 8px;
-            margin: 20px 0;
-        }
-        .supports { color: color(display-p3 0.340 0.734 0.360); }
-        .no-support { color: #ff6762; }
-
-        code {
-            background: #2e2e30;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-size: 13px;
-        }
-    </style>
-</head>
-<body>
-    <h1>Pierre Theme: Display P3 Color Comparison</h1>
-
-    <div class="p3-notice" id="p3-status">
-        Checking Display P3 support...
-    </div>
-
-    <div class="info">
-        <h3>About Display P3 Enhanced Colors</h3>
-        <p>Display P3 is a wider color gamut that can display ~25% more colors than standard sRGB. The Pierre Vibrant themes use CSS <code>color(display-p3 r g b)</code> format with <strong>enhanced saturation</strong> to fully utilize the P3 color space.</p>
-        <p><strong>Enhancement:</strong> Colors are boosted by 15-30% saturation (depending on original saturation) and 5% luminance for highly saturated colors. This pushes colors into the wider P3 gamut that isn't available in sRGB.</p>
-        <p><strong>Important:</strong> To see the difference, you need a P3-capable display (most Macs from 2015+, iPhones, iPads).</p>
-    </div>
-
-    <div class="comparison-grid">
-        <div class="color-card">
-            <h3>Blue</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #008cff;">
-                #008cff
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.267653 0.570512 1.000000);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.267653 0.570512 1.000000)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Green</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #0dbe4e;">
-                #0dbe4e
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.298067 0.776115 0.322484);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.298067 0.776115 0.322484)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Red</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #ff2e3f;">
-                #ff2e3f
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 1.000000 0.250216 0.262337);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 1.000000 0.250216 0.262337)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Purple</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #c635e4;">
-                #c635e4
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.770871 0.230698 0.945253);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.770871 0.230698 0.945253)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Pink</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #fc2b73;">
-                #fc2b73
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.995522 0.233444 0.460772);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.995522 0.233444 0.460772)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Orange</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #fe8c2c;">
-                #fe8c2c
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 1.000000 0.598672 0.265916);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 1.000000 0.598672 0.265916)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Cyan</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #08c0ef;">
-                #08c0ef
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.327292 0.790977 0.995660);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.327292 0.790977 0.995660)</div>
-        </div>
-
-        <div class="color-card">
-            <h3>Teal</h3>
-            <div class="label">Standard (sRGB)</div>
-            <div class="color-swatch srgb" style="background-color: #00c5d2;">
-                #00c5d2
-            </div>
-            <div class="label">Vibrant (Display P3 Enhanced)</div>
-            <div class="color-swatch p3" style="background-color: color(display-p3 0.342284 0.816699 0.877157);">
-                P3
-            </div>
-            <div class="hex-value">color(display-p3 0.342284 0.816699 0.877157)</div>
-        </div>
-    </div>
-
-    <div class="info">
-        <h3>Browser Support</h3>
-        <p>CSS <code>color(display-p3 ...)</code> is supported in:</p>
-        <ul>
-            <li>Safari 10+ (macOS and iOS)</li>
-            <li>Chrome 111+</li>
-            <li>Firefox 113+</li>
-            <li>Edge 111+</li>
-        </ul>
-        <p>Browsers without P3 support will automatically fall back to the closest sRGB color.</p>
-    </div>
-
-    <script>
-        // Check for P3 support
-        const supportsP3 = window.matchMedia('(color-gamut: p3)').matches;
-        const statusEl = document.getElementById('p3-status');
-
-        if (supportsP3) {
-            statusEl.innerHTML = '<span class="supports">✓</span> Your display supports Display P3! You should see more vibrant colors in the P3 swatches above. Compare the top and bottom colors in each card.';
-            statusEl.style.borderLeft = '4px solid color(display-p3 0.340 0.734 0.360)';
-        } else {
-            statusEl.innerHTML = '<span class="no-support">✗</span> Your display does not support Display P3, or your browser doesn\'t support the color(display-p3) syntax. The P3 colors will appear similar to the standard sRGB colors.';
-            statusEl.style.borderLeft = '4px solid #ff6762';
-        }
-    </script>
-</body>
-</html>