@astryx-vue/themes 0.2.2 → 0.2.4

package/butter/base.css

@@ -115,6 +115,79 @@
     --astryx-color-icon-yellow: light-dark(#413e00, #413e00);
     --astryx-color-text-yellow: light-dark(#413e00, #413e00);
 
+    /*
+     * Chart colors. Categorical series use one stop in both schemes.
+     * Sequential ramps run from 5 (darkest) to 1 (lightest).
+     * Gray, and the neutral reference color, change with the scheme.
+     * Values match the upstream data color tokens.
+     */
+    --astryx-color-data-categorical-blue: light-dark(#0171E3, #0171E3);
+    --astryx-color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
+    --astryx-color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-categorical-green: light-dark(#0B991F, #0B991F);
+    --astryx-color-data-categorical-pink: light-dark(#F351C0, #F351C0);
+    --astryx-color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
+    --astryx-color-data-categorical-red: light-dark(#F5394F, #F5394F);
+    --astryx-color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
+    --astryx-color-data-categorical-brown: light-dark(#965E03, #965E03);
+    --astryx-color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
+
+    --astryx-color-data-neutral: light-dark(#8494A3, #8C939B);
+
+    --astryx-color-data-blue-5: light-dark(#02165E, #02165E);
+    --astryx-color-data-blue-4: light-dark(#004CBC, #004CBC);
+    --astryx-color-data-blue-3: light-dark(#2694FE, #2694FE);
+    --astryx-color-data-blue-2: light-dark(#78BEFF, #78BEFF);
+    --astryx-color-data-blue-1: light-dark(#DBECFF, #DBECFF);
+
+    --astryx-color-data-shamrock-5: light-dark(#0B603D, #0B603D);
+    --astryx-color-data-shamrock-4: light-dark(#138546, #138546);
+    --astryx-color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
+    --astryx-color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
+    --astryx-color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
+
+    --astryx-color-data-orange-5: light-dark(#A13F04, #A13F04);
+    --astryx-color-data-orange-4: light-dark(#D66100, #D66100);
+    --astryx-color-data-orange-3: light-dark(#FD9537, #FD9537);
+    --astryx-color-data-orange-2: light-dark(#FDB876, #FDB876);
+    --astryx-color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
+
+    --astryx-color-data-pink-5: light-dark(#8E1073, #8E1073);
+    --astryx-color-data-pink-4: light-dark(#D123A1, #D123A1);
+    --astryx-color-data-pink-3: light-dark(#F989D3, #F989D3);
+    --astryx-color-data-pink-2: light-dark(#FEADE3, #FEADE3);
+    --astryx-color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
+
+    --astryx-color-data-purple-5: light-dark(#3E0697, #3E0697);
+    --astryx-color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-purple-3: light-dark(#9081FF, #9081FF);
+    --astryx-color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
+    --astryx-color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
+
+    --astryx-color-data-red-5: light-dark(#9D0519, #9D0519);
+    --astryx-color-data-red-4: light-dark(#D31130, #D31130);
+    --astryx-color-data-red-3: light-dark(#FB7D87, #FB7D87);
+    --astryx-color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
+    --astryx-color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
+
+    --astryx-color-data-teal-5: light-dark(#08767D, #08767D);
+    --astryx-color-data-teal-4: light-dark(#0C9293, #0C9293);
+    --astryx-color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
+    --astryx-color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
+    --astryx-color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
+
+    --astryx-color-data-yellow-5: light-dark(#8A5001, #8A5001);
+    --astryx-color-data-yellow-4: light-dark(#D69804, #D69804);
+    --astryx-color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
+    --astryx-color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
+    --astryx-color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
+
+    --astryx-color-data-gray-5: light-dark(#25363F, #333338);
+    --astryx-color-data-gray-4: light-dark(#5D6C7B, #666A72);
+    --astryx-color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
+    --astryx-color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
+    --astryx-color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
+
     --astryx-spacing-0: 0;
     --astryx-spacing-0-5: 2px;
     --astryx-spacing-1: 4px;

package/butter/code.css

@@ -29,5 +29,11 @@
     --astryx-code-syntax-attribute: light-dark(#413e00, #d6c957);
     --astryx-code-syntax-property: light-dark(#00482d, #94d3bb);
     --astryx-code-syntax-punctuation: light-dark(#605f52, #adac9e);
+
+    --astryx-code-syntax-added: color-mix(in srgb, var(--astryx-color-success-muted) 25%, transparent);
+    --astryx-code-syntax-removed: color-mix(in srgb, var(--astryx-color-error-muted) 25%, transparent);
+    --astryx-code-syntax-diff-header: var(--astryx-color-background-muted);
+    --astryx-code-syntax-added-marker: var(--astryx-color-text-green);
+    --astryx-code-syntax-removed-marker: var(--astryx-color-text-red);
   }
 }

package/chocolate/base.css

@@ -115,6 +115,79 @@
     --astryx-color-icon-yellow: light-dark(#FFB600, #ffc940);
     --astryx-color-text-yellow: light-dark(#cc9200, #ffd960);
 
+    /*
+     * Chart colors. Categorical series use one stop in both schemes.
+     * Sequential ramps run from 5 (darkest) to 1 (lightest).
+     * Gray, and the neutral reference color, change with the scheme.
+     * Values match the upstream data color tokens.
+     */
+    --astryx-color-data-categorical-blue: light-dark(#0171E3, #0171E3);
+    --astryx-color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
+    --astryx-color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-categorical-green: light-dark(#0B991F, #0B991F);
+    --astryx-color-data-categorical-pink: light-dark(#F351C0, #F351C0);
+    --astryx-color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
+    --astryx-color-data-categorical-red: light-dark(#F5394F, #F5394F);
+    --astryx-color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
+    --astryx-color-data-categorical-brown: light-dark(#965E03, #965E03);
+    --astryx-color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
+
+    --astryx-color-data-neutral: light-dark(#8494A3, #8C939B);
+
+    --astryx-color-data-blue-5: light-dark(#02165E, #02165E);
+    --astryx-color-data-blue-4: light-dark(#004CBC, #004CBC);
+    --astryx-color-data-blue-3: light-dark(#2694FE, #2694FE);
+    --astryx-color-data-blue-2: light-dark(#78BEFF, #78BEFF);
+    --astryx-color-data-blue-1: light-dark(#DBECFF, #DBECFF);
+
+    --astryx-color-data-shamrock-5: light-dark(#0B603D, #0B603D);
+    --astryx-color-data-shamrock-4: light-dark(#138546, #138546);
+    --astryx-color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
+    --astryx-color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
+    --astryx-color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
+
+    --astryx-color-data-orange-5: light-dark(#A13F04, #A13F04);
+    --astryx-color-data-orange-4: light-dark(#D66100, #D66100);
+    --astryx-color-data-orange-3: light-dark(#FD9537, #FD9537);
+    --astryx-color-data-orange-2: light-dark(#FDB876, #FDB876);
+    --astryx-color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
+
+    --astryx-color-data-pink-5: light-dark(#8E1073, #8E1073);
+    --astryx-color-data-pink-4: light-dark(#D123A1, #D123A1);
+    --astryx-color-data-pink-3: light-dark(#F989D3, #F989D3);
+    --astryx-color-data-pink-2: light-dark(#FEADE3, #FEADE3);
+    --astryx-color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
+
+    --astryx-color-data-purple-5: light-dark(#3E0697, #3E0697);
+    --astryx-color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-purple-3: light-dark(#9081FF, #9081FF);
+    --astryx-color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
+    --astryx-color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
+
+    --astryx-color-data-red-5: light-dark(#9D0519, #9D0519);
+    --astryx-color-data-red-4: light-dark(#D31130, #D31130);
+    --astryx-color-data-red-3: light-dark(#FB7D87, #FB7D87);
+    --astryx-color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
+    --astryx-color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
+
+    --astryx-color-data-teal-5: light-dark(#08767D, #08767D);
+    --astryx-color-data-teal-4: light-dark(#0C9293, #0C9293);
+    --astryx-color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
+    --astryx-color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
+    --astryx-color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
+
+    --astryx-color-data-yellow-5: light-dark(#8A5001, #8A5001);
+    --astryx-color-data-yellow-4: light-dark(#D69804, #D69804);
+    --astryx-color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
+    --astryx-color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
+    --astryx-color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
+
+    --astryx-color-data-gray-5: light-dark(#25363F, #333338);
+    --astryx-color-data-gray-4: light-dark(#5D6C7B, #666A72);
+    --astryx-color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
+    --astryx-color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
+    --astryx-color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
+
     --astryx-spacing-0: 0;
     --astryx-spacing-0-5: 2px;
     --astryx-spacing-1: 4px;

package/chocolate/code.css

@@ -29,5 +29,11 @@
     --astryx-code-syntax-attribute: light-dark(#8C5927, #d4a06a);
     --astryx-code-syntax-property: light-dark(#3a7c6b, #70c4b0);
     --astryx-code-syntax-punctuation: light-dark(#9e622e, #cb884d);
+
+    --astryx-code-syntax-added: color-mix(in srgb, var(--astryx-color-success-muted) 25%, transparent);
+    --astryx-code-syntax-removed: color-mix(in srgb, var(--astryx-color-error-muted) 25%, transparent);
+    --astryx-code-syntax-diff-header: var(--astryx-color-background-muted);
+    --astryx-code-syntax-added-marker: var(--astryx-color-text-green);
+    --astryx-code-syntax-removed-marker: var(--astryx-color-text-red);
   }
 }

package/gothic/base.css

@@ -115,6 +115,79 @@
     --astryx-color-icon-yellow: #876515;
     --astryx-color-text-yellow: #6c5010;
 
+    /*
+     * Chart colors. Categorical series use one stop in both schemes.
+     * Sequential ramps run from 5 (darkest) to 1 (lightest).
+     * Gray, and the neutral reference color, change with the scheme.
+     * Values match the upstream data color tokens.
+     */
+    --astryx-color-data-categorical-blue: light-dark(#0171E3, #0171E3);
+    --astryx-color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
+    --astryx-color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-categorical-green: light-dark(#0B991F, #0B991F);
+    --astryx-color-data-categorical-pink: light-dark(#F351C0, #F351C0);
+    --astryx-color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
+    --astryx-color-data-categorical-red: light-dark(#F5394F, #F5394F);
+    --astryx-color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
+    --astryx-color-data-categorical-brown: light-dark(#965E03, #965E03);
+    --astryx-color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
+
+    --astryx-color-data-neutral: light-dark(#8494A3, #8C939B);
+
+    --astryx-color-data-blue-5: light-dark(#02165E, #02165E);
+    --astryx-color-data-blue-4: light-dark(#004CBC, #004CBC);
+    --astryx-color-data-blue-3: light-dark(#2694FE, #2694FE);
+    --astryx-color-data-blue-2: light-dark(#78BEFF, #78BEFF);
+    --astryx-color-data-blue-1: light-dark(#DBECFF, #DBECFF);
+
+    --astryx-color-data-shamrock-5: light-dark(#0B603D, #0B603D);
+    --astryx-color-data-shamrock-4: light-dark(#138546, #138546);
+    --astryx-color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
+    --astryx-color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
+    --astryx-color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
+
+    --astryx-color-data-orange-5: light-dark(#A13F04, #A13F04);
+    --astryx-color-data-orange-4: light-dark(#D66100, #D66100);
+    --astryx-color-data-orange-3: light-dark(#FD9537, #FD9537);
+    --astryx-color-data-orange-2: light-dark(#FDB876, #FDB876);
+    --astryx-color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
+
+    --astryx-color-data-pink-5: light-dark(#8E1073, #8E1073);
+    --astryx-color-data-pink-4: light-dark(#D123A1, #D123A1);
+    --astryx-color-data-pink-3: light-dark(#F989D3, #F989D3);
+    --astryx-color-data-pink-2: light-dark(#FEADE3, #FEADE3);
+    --astryx-color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
+
+    --astryx-color-data-purple-5: light-dark(#3E0697, #3E0697);
+    --astryx-color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-purple-3: light-dark(#9081FF, #9081FF);
+    --astryx-color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
+    --astryx-color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
+
+    --astryx-color-data-red-5: light-dark(#9D0519, #9D0519);
+    --astryx-color-data-red-4: light-dark(#D31130, #D31130);
+    --astryx-color-data-red-3: light-dark(#FB7D87, #FB7D87);
+    --astryx-color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
+    --astryx-color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
+
+    --astryx-color-data-teal-5: light-dark(#08767D, #08767D);
+    --astryx-color-data-teal-4: light-dark(#0C9293, #0C9293);
+    --astryx-color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
+    --astryx-color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
+    --astryx-color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
+
+    --astryx-color-data-yellow-5: light-dark(#8A5001, #8A5001);
+    --astryx-color-data-yellow-4: light-dark(#D69804, #D69804);
+    --astryx-color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
+    --astryx-color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
+    --astryx-color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
+
+    --astryx-color-data-gray-5: light-dark(#25363F, #333338);
+    --astryx-color-data-gray-4: light-dark(#5D6C7B, #666A72);
+    --astryx-color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
+    --astryx-color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
+    --astryx-color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
+
     --astryx-spacing-0: 0;
     --astryx-spacing-0-5: 2px;
     --astryx-spacing-1: 4px;

package/gothic/code.css

@@ -29,5 +29,11 @@
     --astryx-code-syntax-attribute: #dec074;
     --astryx-code-syntax-property: #7cc5b3;
     --astryx-code-syntax-punctuation: #7a8290;
+
+    --astryx-code-syntax-added: color-mix(in srgb, var(--astryx-color-success-muted) 25%, transparent);
+    --astryx-code-syntax-removed: color-mix(in srgb, var(--astryx-color-error-muted) 25%, transparent);
+    --astryx-code-syntax-diff-header: var(--astryx-color-background-muted);
+    --astryx-code-syntax-added-marker: var(--astryx-color-text-green);
+    --astryx-code-syntax-removed-marker: var(--astryx-color-text-red);
   }
 }

package/matcha/base.css

@@ -115,6 +115,79 @@
     --astryx-color-icon-yellow: light-dark(#FFB600, #ffc940);
     --astryx-color-text-yellow: light-dark(#cc9200, #ffd960);
 
+    /*
+     * Chart colors. Categorical series use one stop in both schemes.
+     * Sequential ramps run from 5 (darkest) to 1 (lightest).
+     * Gray, and the neutral reference color, change with the scheme.
+     * Values match the upstream data color tokens.
+     */
+    --astryx-color-data-categorical-blue: light-dark(#0171E3, #0171E3);
+    --astryx-color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
+    --astryx-color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-categorical-green: light-dark(#0B991F, #0B991F);
+    --astryx-color-data-categorical-pink: light-dark(#F351C0, #F351C0);
+    --astryx-color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
+    --astryx-color-data-categorical-red: light-dark(#F5394F, #F5394F);
+    --astryx-color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
+    --astryx-color-data-categorical-brown: light-dark(#965E03, #965E03);
+    --astryx-color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
+
+    --astryx-color-data-neutral: light-dark(#8494A3, #8C939B);
+
+    --astryx-color-data-blue-5: light-dark(#02165E, #02165E);
+    --astryx-color-data-blue-4: light-dark(#004CBC, #004CBC);
+    --astryx-color-data-blue-3: light-dark(#2694FE, #2694FE);
+    --astryx-color-data-blue-2: light-dark(#78BEFF, #78BEFF);
+    --astryx-color-data-blue-1: light-dark(#DBECFF, #DBECFF);
+
+    --astryx-color-data-shamrock-5: light-dark(#0B603D, #0B603D);
+    --astryx-color-data-shamrock-4: light-dark(#138546, #138546);
+    --astryx-color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
+    --astryx-color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
+    --astryx-color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
+
+    --astryx-color-data-orange-5: light-dark(#A13F04, #A13F04);
+    --astryx-color-data-orange-4: light-dark(#D66100, #D66100);
+    --astryx-color-data-orange-3: light-dark(#FD9537, #FD9537);
+    --astryx-color-data-orange-2: light-dark(#FDB876, #FDB876);
+    --astryx-color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
+
+    --astryx-color-data-pink-5: light-dark(#8E1073, #8E1073);
+    --astryx-color-data-pink-4: light-dark(#D123A1, #D123A1);
+    --astryx-color-data-pink-3: light-dark(#F989D3, #F989D3);
+    --astryx-color-data-pink-2: light-dark(#FEADE3, #FEADE3);
+    --astryx-color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
+
+    --astryx-color-data-purple-5: light-dark(#3E0697, #3E0697);
+    --astryx-color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-purple-3: light-dark(#9081FF, #9081FF);
+    --astryx-color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
+    --astryx-color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
+
+    --astryx-color-data-red-5: light-dark(#9D0519, #9D0519);
+    --astryx-color-data-red-4: light-dark(#D31130, #D31130);
+    --astryx-color-data-red-3: light-dark(#FB7D87, #FB7D87);
+    --astryx-color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
+    --astryx-color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
+
+    --astryx-color-data-teal-5: light-dark(#08767D, #08767D);
+    --astryx-color-data-teal-4: light-dark(#0C9293, #0C9293);
+    --astryx-color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
+    --astryx-color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
+    --astryx-color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
+
+    --astryx-color-data-yellow-5: light-dark(#8A5001, #8A5001);
+    --astryx-color-data-yellow-4: light-dark(#D69804, #D69804);
+    --astryx-color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
+    --astryx-color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
+    --astryx-color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
+
+    --astryx-color-data-gray-5: light-dark(#25363F, #333338);
+    --astryx-color-data-gray-4: light-dark(#5D6C7B, #666A72);
+    --astryx-color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
+    --astryx-color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
+    --astryx-color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
+
     --astryx-spacing-0: 0;
     --astryx-spacing-0-5: 0.1875rem;
     --astryx-spacing-1: 0.375rem;

package/matcha/code.css

@@ -29,5 +29,11 @@
     --astryx-code-syntax-attribute: light-dark(#7c5e3a, #c4a882);
     --astryx-code-syntax-property: light-dark(#3a7c6b, #70c4b0);
     --astryx-code-syntax-punctuation: light-dark(#566a39, #92af6a);
+
+    --astryx-code-syntax-added: color-mix(in srgb, var(--astryx-color-success-muted) 25%, transparent);
+    --astryx-code-syntax-removed: color-mix(in srgb, var(--astryx-color-error-muted) 25%, transparent);
+    --astryx-code-syntax-diff-header: var(--astryx-color-background-muted);
+    --astryx-code-syntax-added-marker: var(--astryx-color-text-green);
+    --astryx-code-syntax-removed-marker: var(--astryx-color-text-red);
   }
 }

package/neutral/base.css

@@ -119,6 +119,79 @@
     --astryx-color-icon-yellow: light-dark(#584400, #deb433);
     --astryx-color-text-yellow: light-dark(#584400, #fdcf4f);
 
+    /*
+     * Chart colors. Categorical series use one stop in both schemes.
+     * Sequential ramps run from 5 (darkest) to 1 (lightest).
+     * Gray, and the neutral reference color, change with the scheme.
+     * Values match the upstream data color tokens.
+     */
+    --astryx-color-data-categorical-blue: light-dark(#0171E3, #0171E3);
+    --astryx-color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
+    --astryx-color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-categorical-green: light-dark(#0B991F, #0B991F);
+    --astryx-color-data-categorical-pink: light-dark(#F351C0, #F351C0);
+    --astryx-color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
+    --astryx-color-data-categorical-red: light-dark(#F5394F, #F5394F);
+    --astryx-color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
+    --astryx-color-data-categorical-brown: light-dark(#965E03, #965E03);
+    --astryx-color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
+
+    --astryx-color-data-neutral: light-dark(#8494A3, #8C939B);
+
+    --astryx-color-data-blue-5: light-dark(#02165E, #02165E);
+    --astryx-color-data-blue-4: light-dark(#004CBC, #004CBC);
+    --astryx-color-data-blue-3: light-dark(#2694FE, #2694FE);
+    --astryx-color-data-blue-2: light-dark(#78BEFF, #78BEFF);
+    --astryx-color-data-blue-1: light-dark(#DBECFF, #DBECFF);
+
+    --astryx-color-data-shamrock-5: light-dark(#0B603D, #0B603D);
+    --astryx-color-data-shamrock-4: light-dark(#138546, #138546);
+    --astryx-color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
+    --astryx-color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
+    --astryx-color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
+
+    --astryx-color-data-orange-5: light-dark(#A13F04, #A13F04);
+    --astryx-color-data-orange-4: light-dark(#D66100, #D66100);
+    --astryx-color-data-orange-3: light-dark(#FD9537, #FD9537);
+    --astryx-color-data-orange-2: light-dark(#FDB876, #FDB876);
+    --astryx-color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
+
+    --astryx-color-data-pink-5: light-dark(#8E1073, #8E1073);
+    --astryx-color-data-pink-4: light-dark(#D123A1, #D123A1);
+    --astryx-color-data-pink-3: light-dark(#F989D3, #F989D3);
+    --astryx-color-data-pink-2: light-dark(#FEADE3, #FEADE3);
+    --astryx-color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
+
+    --astryx-color-data-purple-5: light-dark(#3E0697, #3E0697);
+    --astryx-color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-purple-3: light-dark(#9081FF, #9081FF);
+    --astryx-color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
+    --astryx-color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
+
+    --astryx-color-data-red-5: light-dark(#9D0519, #9D0519);
+    --astryx-color-data-red-4: light-dark(#D31130, #D31130);
+    --astryx-color-data-red-3: light-dark(#FB7D87, #FB7D87);
+    --astryx-color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
+    --astryx-color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
+
+    --astryx-color-data-teal-5: light-dark(#08767D, #08767D);
+    --astryx-color-data-teal-4: light-dark(#0C9293, #0C9293);
+    --astryx-color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
+    --astryx-color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
+    --astryx-color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
+
+    --astryx-color-data-yellow-5: light-dark(#8A5001, #8A5001);
+    --astryx-color-data-yellow-4: light-dark(#D69804, #D69804);
+    --astryx-color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
+    --astryx-color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
+    --astryx-color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
+
+    --astryx-color-data-gray-5: light-dark(#25363F, #333338);
+    --astryx-color-data-gray-4: light-dark(#5D6C7B, #666A72);
+    --astryx-color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
+    --astryx-color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
+    --astryx-color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
+
     --astryx-spacing-0: 0;
     --astryx-spacing-0-5: 2px;
     --astryx-spacing-1: 4px;

package/neutral/code.css

@@ -32,5 +32,13 @@
     --astryx-code-syntax-attribute: light-dark(#584400, #eec448);
     --astryx-code-syntax-property: light-dark(#005348, #90d7c8);
     --astryx-code-syntax-punctuation: light-dark(#6a6a6a, #9e9e9e);
+
+    /* Diff rows share the --astryx-code-syntax-* names. Tints stay at 25% so
+       syntax text keeps its contrast. Markers use the theme's tinted text. */
+    --astryx-code-syntax-added: color-mix(in srgb, var(--astryx-color-success-muted) 25%, transparent);
+    --astryx-code-syntax-removed: color-mix(in srgb, var(--astryx-color-error-muted) 25%, transparent);
+    --astryx-code-syntax-diff-header: var(--astryx-color-background-muted);
+    --astryx-code-syntax-added-marker: var(--astryx-color-text-green);
+    --astryx-code-syntax-removed-marker: var(--astryx-color-text-red);
   }
 }

package/neutral/dropdown-menu.css

@@ -9,9 +9,9 @@
       0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
       0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
       inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
-    --astryx-dropdown-menu-hover-background: light-dark(#0536590c, #ffffff0c);
-    --astryx-dropdown-menu-pressed-background: light-dark(#05365919, #ffffff19);
-    --astryx-dropdown-menu-trigger-open-overlay: light-dark(#05365919, #ffffff19);
+    --astryx-dropdown-menu-hover-background: var(--astryx-color-overlay-hover);
+    --astryx-dropdown-menu-pressed-background: var(--astryx-color-overlay-pressed);
+    --astryx-dropdown-menu-trigger-open-overlay: var(--astryx-color-overlay-pressed);
     --astryx-dropdown-menu-destructive-foreground: light-dark(#a50c25, #ffc6c1);
     --astryx-dropdown-menu-section-heading-foreground: light-dark(#525252, #a3a3a3);
   }

package/neutral/list.css

@@ -3,8 +3,8 @@
 @layer astryx.tokens {
   :root,
   [data-astryx-theme='neutral'] {
-    --astryx-list-item-hover-background: light-dark(#0536590c, #ffffff0c);
-    --astryx-list-item-pressed-background: light-dark(#05365919, #ffffff19);
+    --astryx-list-item-hover-background: var(--astryx-color-overlay-hover);
+    --astryx-list-item-pressed-background: var(--astryx-color-overlay-pressed);
     --astryx-list-item-selected-background: light-dark(#0082fb33, #0082fb3f);
     --astryx-list-item-focus: light-dark(#0064e0, #2694fe);
     --astryx-list-divider-color: light-dark(#05365919, #f2f4f619);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/themes",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Themes for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",

package/stone/base.css

@@ -115,6 +115,79 @@
     --astryx-color-icon-yellow: light-dark(#524622, #f4e1b7);
     --astryx-color-text-yellow: light-dark(#524622, #f4e1b7);
 
+    /*
+     * Chart colors. Categorical series use one stop in both schemes.
+     * Sequential ramps run from 5 (darkest) to 1 (lightest).
+     * Gray, and the neutral reference color, change with the scheme.
+     * Values match the upstream data color tokens.
+     */
+    --astryx-color-data-categorical-blue: light-dark(#0171E3, #0171E3);
+    --astryx-color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
+    --astryx-color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-categorical-green: light-dark(#0B991F, #0B991F);
+    --astryx-color-data-categorical-pink: light-dark(#F351C0, #F351C0);
+    --astryx-color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
+    --astryx-color-data-categorical-red: light-dark(#F5394F, #F5394F);
+    --astryx-color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
+    --astryx-color-data-categorical-brown: light-dark(#965E03, #965E03);
+    --astryx-color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
+
+    --astryx-color-data-neutral: light-dark(#8494A3, #8C939B);
+
+    --astryx-color-data-blue-5: light-dark(#02165E, #02165E);
+    --astryx-color-data-blue-4: light-dark(#004CBC, #004CBC);
+    --astryx-color-data-blue-3: light-dark(#2694FE, #2694FE);
+    --astryx-color-data-blue-2: light-dark(#78BEFF, #78BEFF);
+    --astryx-color-data-blue-1: light-dark(#DBECFF, #DBECFF);
+
+    --astryx-color-data-shamrock-5: light-dark(#0B603D, #0B603D);
+    --astryx-color-data-shamrock-4: light-dark(#138546, #138546);
+    --astryx-color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
+    --astryx-color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
+    --astryx-color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
+
+    --astryx-color-data-orange-5: light-dark(#A13F04, #A13F04);
+    --astryx-color-data-orange-4: light-dark(#D66100, #D66100);
+    --astryx-color-data-orange-3: light-dark(#FD9537, #FD9537);
+    --astryx-color-data-orange-2: light-dark(#FDB876, #FDB876);
+    --astryx-color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
+
+    --astryx-color-data-pink-5: light-dark(#8E1073, #8E1073);
+    --astryx-color-data-pink-4: light-dark(#D123A1, #D123A1);
+    --astryx-color-data-pink-3: light-dark(#F989D3, #F989D3);
+    --astryx-color-data-pink-2: light-dark(#FEADE3, #FEADE3);
+    --astryx-color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
+
+    --astryx-color-data-purple-5: light-dark(#3E0697, #3E0697);
+    --astryx-color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-purple-3: light-dark(#9081FF, #9081FF);
+    --astryx-color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
+    --astryx-color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
+
+    --astryx-color-data-red-5: light-dark(#9D0519, #9D0519);
+    --astryx-color-data-red-4: light-dark(#D31130, #D31130);
+    --astryx-color-data-red-3: light-dark(#FB7D87, #FB7D87);
+    --astryx-color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
+    --astryx-color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
+
+    --astryx-color-data-teal-5: light-dark(#08767D, #08767D);
+    --astryx-color-data-teal-4: light-dark(#0C9293, #0C9293);
+    --astryx-color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
+    --astryx-color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
+    --astryx-color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
+
+    --astryx-color-data-yellow-5: light-dark(#8A5001, #8A5001);
+    --astryx-color-data-yellow-4: light-dark(#D69804, #D69804);
+    --astryx-color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
+    --astryx-color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
+    --astryx-color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
+
+    --astryx-color-data-gray-5: light-dark(#25363F, #333338);
+    --astryx-color-data-gray-4: light-dark(#5D6C7B, #666A72);
+    --astryx-color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
+    --astryx-color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
+    --astryx-color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
+
     --astryx-spacing-0: 0;
     --astryx-spacing-0-5: 2px;
     --astryx-spacing-1: 4px;

package/stone/code.css

@@ -29,5 +29,11 @@
     --astryx-code-syntax-attribute: light-dark(#79693f, #b6aa90);
     --astryx-code-syntax-property: light-dark(#4e6357, #94b2a0);
     --astryx-code-syntax-punctuation: light-dark(#5e5e5e, #ababb0);
+
+    --astryx-code-syntax-added: color-mix(in srgb, var(--astryx-color-success-muted) 25%, transparent);
+    --astryx-code-syntax-removed: color-mix(in srgb, var(--astryx-color-error-muted) 25%, transparent);
+    --astryx-code-syntax-diff-header: var(--astryx-color-background-muted);
+    --astryx-code-syntax-added-marker: var(--astryx-color-text-green);
+    --astryx-code-syntax-removed-marker: var(--astryx-color-text-red);
   }
 }

package/y2k/base.css

@@ -115,6 +115,79 @@
     --astryx-color-icon-yellow: light-dark(#614400, #3f2600);
     --astryx-color-text-yellow: light-dark(#614400, #3f2600);
 
+    /*
+     * Chart colors. Categorical series use one stop in both schemes.
+     * Sequential ramps run from 5 (darkest) to 1 (lightest).
+     * Gray, and the neutral reference color, change with the scheme.
+     * Values match the upstream data color tokens.
+     */
+    --astryx-color-data-categorical-blue: light-dark(#0171E3, #0171E3);
+    --astryx-color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
+    --astryx-color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-categorical-green: light-dark(#0B991F, #0B991F);
+    --astryx-color-data-categorical-pink: light-dark(#F351C0, #F351C0);
+    --astryx-color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
+    --astryx-color-data-categorical-red: light-dark(#F5394F, #F5394F);
+    --astryx-color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
+    --astryx-color-data-categorical-brown: light-dark(#965E03, #965E03);
+    --astryx-color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
+
+    --astryx-color-data-neutral: light-dark(#8494A3, #8C939B);
+
+    --astryx-color-data-blue-5: light-dark(#02165E, #02165E);
+    --astryx-color-data-blue-4: light-dark(#004CBC, #004CBC);
+    --astryx-color-data-blue-3: light-dark(#2694FE, #2694FE);
+    --astryx-color-data-blue-2: light-dark(#78BEFF, #78BEFF);
+    --astryx-color-data-blue-1: light-dark(#DBECFF, #DBECFF);
+
+    --astryx-color-data-shamrock-5: light-dark(#0B603D, #0B603D);
+    --astryx-color-data-shamrock-4: light-dark(#138546, #138546);
+    --astryx-color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
+    --astryx-color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
+    --astryx-color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
+
+    --astryx-color-data-orange-5: light-dark(#A13F04, #A13F04);
+    --astryx-color-data-orange-4: light-dark(#D66100, #D66100);
+    --astryx-color-data-orange-3: light-dark(#FD9537, #FD9537);
+    --astryx-color-data-orange-2: light-dark(#FDB876, #FDB876);
+    --astryx-color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
+
+    --astryx-color-data-pink-5: light-dark(#8E1073, #8E1073);
+    --astryx-color-data-pink-4: light-dark(#D123A1, #D123A1);
+    --astryx-color-data-pink-3: light-dark(#F989D3, #F989D3);
+    --astryx-color-data-pink-2: light-dark(#FEADE3, #FEADE3);
+    --astryx-color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
+
+    --astryx-color-data-purple-5: light-dark(#3E0697, #3E0697);
+    --astryx-color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
+    --astryx-color-data-purple-3: light-dark(#9081FF, #9081FF);
+    --astryx-color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
+    --astryx-color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
+
+    --astryx-color-data-red-5: light-dark(#9D0519, #9D0519);
+    --astryx-color-data-red-4: light-dark(#D31130, #D31130);
+    --astryx-color-data-red-3: light-dark(#FB7D87, #FB7D87);
+    --astryx-color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
+    --astryx-color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
+
+    --astryx-color-data-teal-5: light-dark(#08767D, #08767D);
+    --astryx-color-data-teal-4: light-dark(#0C9293, #0C9293);
+    --astryx-color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
+    --astryx-color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
+    --astryx-color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
+
+    --astryx-color-data-yellow-5: light-dark(#8A5001, #8A5001);
+    --astryx-color-data-yellow-4: light-dark(#D69804, #D69804);
+    --astryx-color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
+    --astryx-color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
+    --astryx-color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
+
+    --astryx-color-data-gray-5: light-dark(#25363F, #333338);
+    --astryx-color-data-gray-4: light-dark(#5D6C7B, #666A72);
+    --astryx-color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
+    --astryx-color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
+    --astryx-color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
+
     --astryx-spacing-0: 0;
     --astryx-spacing-0-5: 0.1875rem;
     --astryx-spacing-1: 0.375rem;

package/y2k/code.css

@@ -29,5 +29,11 @@
     --astryx-code-syntax-attribute: light-dark(#6c5c3e, #bca987);
     --astryx-code-syntax-property: light-dark(#3c6755, #87b5a1);
     --astryx-code-syntax-punctuation: light-dark(#5e5e5e, #ababab);
+
+    --astryx-code-syntax-added: color-mix(in srgb, var(--astryx-color-success-muted) 25%, transparent);
+    --astryx-code-syntax-removed: color-mix(in srgb, var(--astryx-color-error-muted) 25%, transparent);
+    --astryx-code-syntax-diff-header: var(--astryx-color-background-muted);
+    --astryx-code-syntax-added-marker: var(--astryx-color-text-green);
+    --astryx-code-syntax-removed-marker: var(--astryx-color-text-red);
   }
 }