diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
index 36941a4..34d4bd2 100644
--- a/.github/workflows/coverage.yml
+++ b/.github/workflows/coverage.yml
@@ -6,8 +6,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       # Your original steps
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
       - name: Install
         run: npm install
       - name: Test and Coverage
diff --git a/.github/workflows/jsr.yml b/.github/workflows/jsr.yml
new file mode 100644
index 0000000..91db110
--- /dev/null
+++ b/.github/workflows/jsr.yml
@@ -0,0 +1,17 @@
+# publish to jsr
+name: Publish
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write # The OIDC ID token is used for authentication with JSR.
+    steps:
+      - uses: actions/checkout@v4
+      - run: npx jsr publish
\ No newline at end of file
diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml
index 73e009d..5279784 100644
--- a/.github/workflows/node.yml
+++ b/.github/workflows/node.yml
@@ -17,13 +17,13 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node-version: [ 18.x, 20.x, 22.x ]
+        node-version: [ 18.x, 20.x ]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install NPM dependencies
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39b172a..8d48bc7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+# v0.6.0
+- [x] light-dark() color
+- [x] system color
+
 ## V0.5.4
 
 - [x] incorrectly expand css nesting rules
diff --git a/README.md b/README.md
index 8662897..0b50573 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ $ npm install @tbela99/css-parser
 - fault-tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
 - fast and efficient minification without unsafe transforms, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
 - minify colors.
-- support css color level 4 & 5: color(), lab(), lch(), oklab(), oklch(), color-mix() and relative color
+- support css color level 4 & 5: color(), lab(), lch(), oklab(), oklch(), color-mix(), light-dark(), system colors and relative color
 - generate nested css rules
 - convert nested css rules to legacy syntax
 - generate sourcemap
@@ -76,7 +76,7 @@ import {transform} from '@tbela99/css-parser/web';
 
 Javascript module from cdn
 
-```javascript
+```html
 
 <script type="module">
 
diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js
index 42bed63..71bc4e2 100644
--- a/dist/index-umd-web.js
+++ b/dist/index-umd-web.js
@@ -184,6 +184,10 @@
     const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
     const k = Math.pow(29, 3) / Math.pow(3, 3);
     const e = Math.pow(6, 3) / Math.pow(29, 3);
+    // color module v4
+    const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
+    // deprecated
+    const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
     // name to color
     const COLORS_NAMES = Object.seal({
         'aliceblue': '#f0f8ff',
@@ -2958,7 +2962,7 @@
         }
     }
 
-    const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch'];
+    const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
     function reduceNumber(val) {
         val = String(+val);
         if (val === '0') {
@@ -3226,6 +3230,9 @@
             case exports.EnumToken.Div:
                 return '/';
             case exports.EnumToken.ColorTokenType:
+                if (token.kin == 'light-dark') {
+                    return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
+                }
                 if (options.convertColor) {
                     if (token.cal == 'mix' && token.val == 'color-mix') {
                         const children = token.chi.reduce((acc, t) => {
@@ -3319,7 +3326,7 @@
                         return reduceHexValue(value);
                     }
                 }
-                if (token.kin == 'hex' || token.kin == 'lit') {
+                if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
                     return token.val;
                 }
                 if (Array.isArray(token.chi)) {
@@ -3585,6 +3592,15 @@
         }
         let isLegacySyntax = false;
         if (token.typ == exports.EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
+            if (token.val == 'light-dark') {
+                const children = token.chi.filter((t) => [exports.EnumToken.IdenTokenType, exports.EnumToken.NumberTokenType, exports.EnumToken.LiteralTokenType, exports.EnumToken.ColorTokenType, exports.EnumToken.FunctionTokenType, exports.EnumToken.PercentageTokenType].includes(t.typ));
+                if (children.length != 2) {
+                    return false;
+                }
+                if (isColor(children[0]) && isColor(children[1])) {
+                    return true;
+                }
+            }
             if (token.val == 'color') {
                 const children = token.chi.filter((t) => [exports.EnumToken.IdenTokenType, exports.EnumToken.NumberTokenType, exports.EnumToken.LiteralTokenType, exports.EnumToken.ColorTokenType, exports.EnumToken.FunctionTokenType, exports.EnumToken.PercentageTokenType].includes(t.typ));
                 const isRelative = children[0].typ == exports.EnumToken.IdenTokenType && children[0].val == 'from';
@@ -6574,9 +6590,9 @@
         }));
     }
     function getTokenType(val, hint) {
-        if (val === '' && hint == null) {
-            throw new Error('empty string?');
-        }
+        // if (val === '' && hint == null) {
+        //     throw new Error('empty string?');
+        // }
         if (hint != null) {
             return enumTokenHints.has(hint) ? { typ: hint } : { typ: hint, val };
         }
@@ -6705,6 +6721,20 @@
             };
         }
         if (isIdent(val)) {
+            if (systemColors.has(val.toLowerCase())) {
+                return {
+                    typ: exports.EnumToken.ColorTokenType,
+                    val,
+                    kin: 'sys'
+                };
+            }
+            if (deprecatedSystemColors.has(val.toLowerCase())) {
+                return {
+                    typ: exports.EnumToken.ColorTokenType,
+                    val,
+                    kin: 'dpsys'
+                };
+            }
             return {
                 typ: val.startsWith('--') ? exports.EnumToken.DashedIdenTokenType : exports.EnumToken.IdenTokenType,
                 val
@@ -6986,7 +7016,11 @@
                             // t.chi = t.chi.filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.PercentageTokenType].includes(t.typ));
                         }
                     }
-                    t.chi = t.chi.filter((t) => ![exports.EnumToken.WhitespaceTokenType, exports.EnumToken.CommaTokenType, exports.EnumToken.CommentTokenType].includes(t.typ));
+                    const filter = [exports.EnumToken.WhitespaceTokenType, exports.EnumToken.CommentTokenType];
+                    if (t.val != 'light-dark') {
+                        filter.push(exports.EnumToken.CommaTokenType);
+                    }
+                    t.chi = t.chi.filter((t) => !filter.includes(t.typ));
                     continue;
                 }
                 if (t.typ == exports.EnumToken.UrlFunctionTokenType) {
@@ -9491,6 +9525,7 @@
             const path = resolve(url, currentFile).absolute;
             t = new URL(path, self.origin);
         }
+        // @ts-ignore
         return fetch(t, t.origin != self.origin ? { mode: 'cors' } : {}).then(parseResponse);
     }
 
diff --git a/dist/index.cjs b/dist/index.cjs
index 80806e1..45a9b29 100644
--- a/dist/index.cjs
+++ b/dist/index.cjs
@@ -1,5 +1,6 @@
 'use strict';
 
+var process = require('node:process');
 var promises = require('node:fs/promises');
 
 exports.EnumToken = void 0;
@@ -182,6 +183,10 @@ const colorFuncColorSpace = ['srgb', 'srgb-linear', 'display-p3', 'prophoto-rgb'
 const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
 const k = Math.pow(29, 3) / Math.pow(3, 3);
 const e = Math.pow(6, 3) / Math.pow(29, 3);
+// color module v4
+const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
+// deprecated
+const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
 // name to color
 const COLORS_NAMES = Object.seal({
     'aliceblue': '#f0f8ff',
@@ -2956,7 +2961,7 @@ class SourceMap {
     }
 }
 
-const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch'];
+const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
 function reduceNumber(val) {
     val = String(+val);
     if (val === '0') {
@@ -3224,6 +3229,9 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case exports.EnumToken.Div:
             return '/';
         case exports.EnumToken.ColorTokenType:
+            if (token.kin == 'light-dark') {
+                return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
+            }
             if (options.convertColor) {
                 if (token.cal == 'mix' && token.val == 'color-mix') {
                     const children = token.chi.reduce((acc, t) => {
@@ -3317,7 +3325,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     return reduceHexValue(value);
                 }
             }
-            if (token.kin == 'hex' || token.kin == 'lit') {
+            if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
                 return token.val;
             }
             if (Array.isArray(token.chi)) {
@@ -3583,6 +3591,15 @@ function isColor(token) {
     }
     let isLegacySyntax = false;
     if (token.typ == exports.EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
+        if (token.val == 'light-dark') {
+            const children = token.chi.filter((t) => [exports.EnumToken.IdenTokenType, exports.EnumToken.NumberTokenType, exports.EnumToken.LiteralTokenType, exports.EnumToken.ColorTokenType, exports.EnumToken.FunctionTokenType, exports.EnumToken.PercentageTokenType].includes(t.typ));
+            if (children.length != 2) {
+                return false;
+            }
+            if (isColor(children[0]) && isColor(children[1])) {
+                return true;
+            }
+        }
         if (token.val == 'color') {
             const children = token.chi.filter((t) => [exports.EnumToken.IdenTokenType, exports.EnumToken.NumberTokenType, exports.EnumToken.LiteralTokenType, exports.EnumToken.ColorTokenType, exports.EnumToken.FunctionTokenType, exports.EnumToken.PercentageTokenType].includes(t.typ));
             const isRelative = children[0].typ == exports.EnumToken.IdenTokenType && children[0].val == 'from';
@@ -6572,9 +6589,9 @@ function parseString(src, options = { location: false }) {
     }));
 }
 function getTokenType(val, hint) {
-    if (val === '' && hint == null) {
-        throw new Error('empty string?');
-    }
+    // if (val === '' && hint == null) {
+    //     throw new Error('empty string?');
+    // }
     if (hint != null) {
         return enumTokenHints.has(hint) ? { typ: hint } : { typ: hint, val };
     }
@@ -6703,6 +6720,20 @@ function getTokenType(val, hint) {
         };
     }
     if (isIdent(val)) {
+        if (systemColors.has(val.toLowerCase())) {
+            return {
+                typ: exports.EnumToken.ColorTokenType,
+                val,
+                kin: 'sys'
+            };
+        }
+        if (deprecatedSystemColors.has(val.toLowerCase())) {
+            return {
+                typ: exports.EnumToken.ColorTokenType,
+                val,
+                kin: 'dpsys'
+            };
+        }
         return {
             typ: val.startsWith('--') ? exports.EnumToken.DashedIdenTokenType : exports.EnumToken.IdenTokenType,
             val
@@ -6984,7 +7015,11 @@ function parseTokens(tokens, options = {}) {
                         // t.chi = t.chi.filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.PercentageTokenType].includes(t.typ));
                     }
                 }
-                t.chi = t.chi.filter((t) => ![exports.EnumToken.WhitespaceTokenType, exports.EnumToken.CommaTokenType, exports.EnumToken.CommentTokenType].includes(t.typ));
+                const filter = [exports.EnumToken.WhitespaceTokenType, exports.EnumToken.CommentTokenType];
+                if (t.val != 'light-dark') {
+                    filter.push(exports.EnumToken.CommaTokenType);
+                }
+                t.chi = t.chi.filter((t) => !filter.includes(t.typ));
                 continue;
             }
             if (t.typ == exports.EnumToken.UrlFunctionTokenType) {
diff --git a/dist/index.d.ts b/dist/index.d.ts
index 590ef60..a829239 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -459,7 +459,7 @@ export declare interface ImportantToken extends BaseToken {
     typ: EnumToken.ImportantTokenType;
 }
 
-export declare type ColorKind = 'lit' | 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hwb' | 'device-cmyk' | 'oklab' | 'oklch' | 'lab' | 'lch' | 'color';
+export declare type ColorKind = 'sys' | 'dpsys' | 'lit' | 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hwb' | 'device-cmyk' | 'oklab' | 'oklch' | 'lab' | 'lch' | 'color' | 'light-dark';
 
 // export declare type HueInterpolationMethod = 'shorter' | 'longer' | 'increasing' | 'decreasing';
 
@@ -820,11 +820,11 @@ export declare interface MinifyFeature {
 
     ordering: number;
 
-    register: (options: MinifyOptions | ParserOptions) => void;
-    run: (ast: AstRule | AstAtRule, options: ParserOptions = {}, parent: AstRule | AstAtRule | AstRuleStyleSheet, context: {
-        [key: string]: any
-    }) => void;
-    cleanup?: (ast: AstRuleStyleSheet, options: ParserOptions = {}, context: { [key: string]: any }) => void;
+    register(options: MinifyOptions | ParserOptions): void;
+
+    // run(ast: AstRule | AstAtRule, options: ParserOptions = {}, parent: AstRule | AstAtRule | AstRuleStyleSheet, context: { [key: string]: any }): void;
+
+    // cleanup?(ast: AstRuleStyleSheet, options: ParserOptions = {}, context: { [key: string]: any }): void;
 }
 
 export declare interface MinifyFeature {
diff --git a/dist/lib/parser/parse.js b/dist/lib/parser/parse.js
index 4c82138..60e1715 100644
--- a/dist/lib/parser/parse.js
+++ b/dist/lib/parser/parse.js
@@ -5,7 +5,7 @@ import { walkValues, walk } from '../ast/walk.js';
 import { expand } from '../ast/expand.js';
 import { parseDeclaration } from './utils/declaration.js';
 import { renderToken } from '../renderer/render.js';
-import { COLORS_NAMES } from '../renderer/color/utils/constants.js';
+import { COLORS_NAMES, systemColors, deprecatedSystemColors } from '../renderer/color/utils/constants.js';
 import { tokenize } from './tokenize.js';
 
 const urlTokenMatcher = /^(["']?)[a-zA-Z0-9_/.-][a-zA-Z0-9_/:.#?-]+(\1)$/;
@@ -539,9 +539,9 @@ function parseString(src, options = { location: false }) {
     }));
 }
 function getTokenType(val, hint) {
-    if (val === '' && hint == null) {
-        throw new Error('empty string?');
-    }
+    // if (val === '' && hint == null) {
+    //     throw new Error('empty string?');
+    // }
     if (hint != null) {
         return enumTokenHints.has(hint) ? { typ: hint } : { typ: hint, val };
     }
@@ -670,6 +670,20 @@ function getTokenType(val, hint) {
         };
     }
     if (isIdent(val)) {
+        if (systemColors.has(val.toLowerCase())) {
+            return {
+                typ: EnumToken.ColorTokenType,
+                val,
+                kin: 'sys'
+            };
+        }
+        if (deprecatedSystemColors.has(val.toLowerCase())) {
+            return {
+                typ: EnumToken.ColorTokenType,
+                val,
+                kin: 'dpsys'
+            };
+        }
         return {
             typ: val.startsWith('--') ? EnumToken.DashedIdenTokenType : EnumToken.IdenTokenType,
             val
@@ -951,7 +965,11 @@ function parseTokens(tokens, options = {}) {
                         // t.chi = t.chi.filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.PercentageTokenType].includes(t.typ));
                     }
                 }
-                t.chi = t.chi.filter((t) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
+                const filter = [EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType];
+                if (t.val != 'light-dark') {
+                    filter.push(EnumToken.CommaTokenType);
+                }
+                t.chi = t.chi.filter((t) => !filter.includes(t.typ));
                 continue;
             }
             if (t.typ == EnumToken.UrlFunctionTokenType) {
diff --git a/dist/lib/parser/utils/syntax.js b/dist/lib/parser/utils/syntax.js
index 3c0efe1..21aa872 100644
--- a/dist/lib/parser/utils/syntax.js
+++ b/dist/lib/parser/utils/syntax.js
@@ -63,6 +63,15 @@ function isColor(token) {
     }
     let isLegacySyntax = false;
     if (token.typ == EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
+        if (token.val == 'light-dark') {
+            const children = token.chi.filter((t) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.LiteralTokenType, EnumToken.ColorTokenType, EnumToken.FunctionTokenType, EnumToken.PercentageTokenType].includes(t.typ));
+            if (children.length != 2) {
+                return false;
+            }
+            if (isColor(children[0]) && isColor(children[1])) {
+                return true;
+            }
+        }
         if (token.val == 'color') {
             const children = token.chi.filter((t) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.LiteralTokenType, EnumToken.ColorTokenType, EnumToken.FunctionTokenType, EnumToken.PercentageTokenType].includes(t.typ));
             const isRelative = children[0].typ == EnumToken.IdenTokenType && children[0].val == 'from';
diff --git a/dist/lib/renderer/color/utils/constants.js b/dist/lib/renderer/color/utils/constants.js
index 37c3293..8d71b8d 100644
--- a/dist/lib/renderer/color/utils/constants.js
+++ b/dist/lib/renderer/color/utils/constants.js
@@ -30,6 +30,10 @@ const colorFuncColorSpace = ['srgb', 'srgb-linear', 'display-p3', 'prophoto-rgb'
 const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
 const k = Math.pow(29, 3) / Math.pow(3, 3);
 const e = Math.pow(6, 3) / Math.pow(29, 3);
+// color module v4
+const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
+// deprecated
+const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
 // name to color
 const COLORS_NAMES = Object.seal({
     'aliceblue': '#f0f8ff',
@@ -188,4 +192,4 @@ const NAMES_COLORS = Object.seal(Object.entries(COLORS_NAMES).reduce((acc, [key,
     return acc;
 }, Object.create(null)));
 
-export { COLORS_NAMES, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, e, k };
+export { COLORS_NAMES, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, deprecatedSystemColors, e, k, systemColors };
diff --git a/dist/lib/renderer/render.js b/dist/lib/renderer/render.js
index 24d6280..10fe960 100644
--- a/dist/lib/renderer/render.js
+++ b/dist/lib/renderer/render.js
@@ -11,7 +11,7 @@ import { SourceMap } from './sourcemap/sourcemap.js';
 import '../parser/parse.js';
 import { isColor, isNewLine } from '../parser/utils/syntax.js';
 
-const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch'];
+const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
 function reduceNumber(val) {
     val = String(+val);
     if (val === '0') {
@@ -279,6 +279,9 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.Div:
             return '/';
         case EnumToken.ColorTokenType:
+            if (token.kin == 'light-dark') {
+                return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
+            }
             if (options.convertColor) {
                 if (token.cal == 'mix' && token.val == 'color-mix') {
                     const children = token.chi.reduce((acc, t) => {
@@ -372,7 +375,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     return reduceHexValue(value);
                 }
             }
-            if (token.kin == 'hex' || token.kin == 'lit') {
+            if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
                 return token.val;
             }
             if (Array.isArray(token.chi)) {
diff --git a/dist/node/index.js b/dist/node/index.js
index d090a0a..7b1a4b8 100644
--- a/dist/node/index.js
+++ b/dist/node/index.js
@@ -1,3 +1,4 @@
+import process from 'node:process';
 export { EnumToken } from '../lib/ast/types.js';
 export { minify } from '../lib/ast/minify.js';
 export { walk, walkValues } from '../lib/ast/walk.js';
diff --git a/dist/web/load.js b/dist/web/load.js
index 0804fac..94f8ee7 100644
--- a/dist/web/load.js
+++ b/dist/web/load.js
@@ -18,6 +18,7 @@ async function load(url, currentFile) {
         const path = resolve(url, currentFile).absolute;
         t = new URL(path, self.origin);
     }
+    // @ts-ignore
     return fetch(t, t.origin != self.origin ? { mode: 'cors' } : {}).then(parseResponse);
 }
 
diff --git a/jsr.json b/jsr.json
new file mode 100644
index 0000000..f674456
--- /dev/null
+++ b/jsr.json
@@ -0,0 +1,29 @@
+{
+  "name": "@tbela99/css-parser",
+  "version": "0.6.0",
+  "publish": {
+    "exclude": [
+      "dist",
+      "test",
+      ".gitattributes",
+      ".github",
+      ".idea",
+      ".npmignore",
+      ".npmrc",
+      "tsconfig.json",
+      "Writerside",
+      "build.sh",
+      "docs",
+      "package-lock.json",
+      "CHANGELOG.md",
+      "ROADMAP.md",
+      "rollup.config.js",
+      "tools"
+    ]
+  },
+  "exports": {
+    ".": "./src/node/index.ts",
+    "./node": "./src/node/index.ts",
+    "./web":  "./src/web/index.ts"
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index a071e64..4e7cc5b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "exports": {
     ".": "./dist/node/index.js",
     "./umd": "./dist/index-umd-web.js",
@@ -55,12 +55,13 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/chai": "^4.3.12",
     "@types/mocha": "^10.0.6",
-    "@types/node": "^20.11.25",
+    "@types/node": "^20.14.11",
+    "@types/web": "^0.0.151",
     "@web/test-runner": "^0.18.1",
     "@web/test-runner-playwright": "^0.11.0",
     "c8": "^9.1.0",
     "mocha": "^10.4.0",
-    "playwright": "^1.42.1",
+    "playwright": "^1.45.2",
     "rollup": "^4.13.0",
     "rollup-plugin-dts": "^6.1.0",
     "tslib": "^2.6.2"
diff --git a/src/@types/ast.d.ts b/src/@types/ast.d.ts
index 73d5258..d0dcf2c 100644
--- a/src/@types/ast.d.ts
+++ b/src/@types/ast.d.ts
@@ -1,5 +1,5 @@
 import {EnumToken} from "../lib";
-import {Token} from "./token";
+import {Token} from "./token.d.ts";
 
 
 export declare interface Position {
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
index 310fa33..c9fee6d 100644
--- a/src/@types/index.d.ts
+++ b/src/@types/index.d.ts
@@ -1,13 +1,13 @@
-import {VisitorNodeMap} from "./visitor";
-import {AstAtRule, AstRule, AstRuleStyleSheet} from "./ast";
+import {VisitorNodeMap} from "./visitor.d.ts";
+import {AstAtRule, AstRule, AstRuleStyleSheet} from "./ast.d.ts";
 
-export * from './ast';
-export * from './token';
-export * from './shorthand';
-export * from './config';
-export * from './visitor';
-export * from './walker';
-export * from './parse';
+export * from './ast.d.ts';
+export * from './token.d.ts';
+export * from './shorthand.d.ts';
+export * from './config.d.ts';
+export * from './visitor.d.ts';
+export * from './walker.d.ts';
+export * from './parse.d.ts';
 
 export declare interface ErrorDescription {
 
@@ -26,11 +26,11 @@ export declare interface MinifyFeature {
 
     ordering: number;
 
-    register: (options: MinifyOptions | ParserOptions) => void;
-    run: (ast: AstRule | AstAtRule, options: ParserOptions = {}, parent: AstRule | AstAtRule | AstRuleStyleSheet, context: {
-        [key: string]: any
-    }) => void;
-    cleanup?: (ast: AstRuleStyleSheet, options: ParserOptions = {}, context: { [key: string]: any }) => void;
+    register(options: MinifyOptions | ParserOptions): void;
+
+    // run(ast: AstRule | AstAtRule, options: ParserOptions = {}, parent: AstRule | AstAtRule | AstRuleStyleSheet, context: { [key: string]: any }): void;
+
+    // cleanup?(ast: AstRuleStyleSheet, options: ParserOptions = {}, context: { [key: string]: any }): void;
 }
 
 export declare interface ParserOptions extends PropertyListOptions {
diff --git a/src/@types/token.d.ts b/src/@types/token.d.ts
index 1eba929..40bcfe5 100644
--- a/src/@types/token.d.ts
+++ b/src/@types/token.d.ts
@@ -1,4 +1,4 @@
-import {Location} from "./ast";
+import {Location} from "./ast.d.ts";
 import {EnumToken} from "../lib";
 
 export declare interface BaseToken {
@@ -341,7 +341,7 @@ export declare interface ImportantToken extends BaseToken {
     typ: EnumToken.ImportantTokenType;
 }
 
-export declare type ColorKind = 'lit' | 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hwb' | 'device-cmyk' | 'oklab' | 'oklch' | 'lab' | 'lch' | 'color';
+export declare type ColorKind = 'sys' | 'dpsys' | 'lit' | 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hwb' | 'device-cmyk' | 'oklab' | 'oklch' | 'lab' | 'lch' | 'color' | 'light-dark';
 // xyz-d65 is an alias for xyz
 // display-p3 is an alias for srgb
 export declare type ColorSpace =
diff --git a/src/@types/visitor.d.ts b/src/@types/visitor.d.ts
index f2f2bce..1683f11 100644
--- a/src/@types/visitor.d.ts
+++ b/src/@types/visitor.d.ts
@@ -1,5 +1,5 @@
-import {AstRule, AstDeclaration, AstAtRule} from "./ast";
-import {Token} from "./token";
+import {AstRule, AstDeclaration, AstAtRule} from "./ast.d.ts";
+import {Token} from "./token.d.ts";
 import {EnumToken} from "../lib";
 
 /**
diff --git a/src/@types/walker.d.ts b/src/@types/walker.d.ts
index c4d6e55..c27ac66 100644
--- a/src/@types/walker.d.ts
+++ b/src/@types/walker.d.ts
@@ -1,5 +1,5 @@
-import {AstNode, AstRuleList} from "./ast";
-import {BinaryExpressionToken, FunctionToken, ParensToken, Token} from "./token";
+import {AstNode, AstRuleList} from "./ast.d.ts";
+import {BinaryExpressionToken, FunctionToken, ParensToken, Token} from "./token.d.ts";
 
 export declare type WalkerOption = 'ignore' | 'stop' | 'children' | 'ignore-children' | null;
 /**
diff --git a/src/lib/ast/expand.ts b/src/lib/ast/expand.ts
index cca858c..9ea1946 100644
--- a/src/lib/ast/expand.ts
+++ b/src/lib/ast/expand.ts
@@ -2,7 +2,7 @@ import {combinators, splitRule} from "./minify";
 import {parseString} from "../parser";
 import {walkValues} from "./walk";
 import {renderToken} from "../renderer";
-import {AstAtRule, AstNode, AstRule, AstRuleStyleSheet, Token} from "../../@types";
+import type {AstAtRule, AstNode, AstRule, AstRuleStyleSheet, Token} from "../../@types/index.d.ts";
 import {EnumToken} from "./types";
 
 export function expand(ast: AstNode): AstNode {
diff --git a/src/lib/ast/features/calc.ts b/src/lib/ast/features/calc.ts
index f64bfa8..9835f80 100644
--- a/src/lib/ast/features/calc.ts
+++ b/src/lib/ast/features/calc.ts
@@ -1,11 +1,11 @@
-import {
+import type {
     AstAtRule,
     AstDeclaration,
     AstRule,
     FunctionToken,
     MinifyOptions,
     Token
-} from "../../../@types";
+} from "../../../@types/index.d.ts";
 import {EnumToken} from "../types";
 import {walkValues} from "../walk";
 import {evaluate} from "../math";
diff --git a/src/lib/ast/features/inlinecssvariables.ts b/src/lib/ast/features/inlinecssvariables.ts
index 93b2c61..cbd4163 100644
--- a/src/lib/ast/features/inlinecssvariables.ts
+++ b/src/lib/ast/features/inlinecssvariables.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AstAtRule, AstComment,
     AstDeclaration,
     AstRule, AstRuleList,
@@ -6,7 +6,7 @@ import {
     FunctionToken, MinifyOptions,
     ParserOptions,
     VariableScopeInfo
-} from "../../../@types";
+} from "../../../@types/index.d.ts";
 import {EnumToken} from "../types";
 import {walkValues} from "../walk";
 
diff --git a/src/lib/ast/features/shorthand.ts b/src/lib/ast/features/shorthand.ts
index 6bb1d88..d8f545a 100644
--- a/src/lib/ast/features/shorthand.ts
+++ b/src/lib/ast/features/shorthand.ts
@@ -1,6 +1,6 @@
 import {PropertyList} from "../../parser/declaration";
 import {EnumToken} from "../types";
-import {AstAtRule, AstRule, AstRuleStyleSheet, MinifyOptions, PropertyListOptions} from "../../../@types";
+import type {AstAtRule, AstRule, AstRuleStyleSheet, MinifyOptions, PropertyListOptions} from "../../../@types/index.d.ts";
 
 export class ComputeShorthandFeature {
 
diff --git a/src/lib/ast/math/expression.ts b/src/lib/ast/math/expression.ts
index b395397..ae8c375 100644
--- a/src/lib/ast/math/expression.ts
+++ b/src/lib/ast/math/expression.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     BinaryExpressionNode,
     BinaryExpressionToken,
     FractionToken,
@@ -6,7 +6,7 @@ import {
     LiteralToken,
     ParensToken,
     Token
-} from "../../../@types";
+} from "../../../@types/index.d.ts";
 import {EnumToken} from "../types";
 import {compute} from "./math";
 import {reduceNumber} from "../../renderer";
diff --git a/src/lib/ast/math/math.ts b/src/lib/ast/math/math.ts
index e80425a..97e7ff4 100644
--- a/src/lib/ast/math/math.ts
+++ b/src/lib/ast/math/math.ts
@@ -1,4 +1,4 @@
-import {FractionToken} from "../../../@types";
+import type {FractionToken} from "../../../@types/index.d.ts";
 import {EnumToken} from "../types";
 import {reduceNumber} from "../../renderer";
 
diff --git a/src/lib/ast/minify.ts b/src/lib/ast/minify.ts
index 6ed0994..03ba207 100644
--- a/src/lib/ast/minify.ts
+++ b/src/lib/ast/minify.ts
@@ -5,7 +5,7 @@ import {replaceCompound} from './expand';
 import {doRender, renderToken} from "../renderer";
 import * as allFeatures from "./features";
 import {walkValues} from "./walk";
-import {
+import type {
     AstAtRule,
     AstDeclaration,
     AstNode,
@@ -19,7 +19,7 @@ import {
     OptimizedSelector,
     ParserOptions,
     RawSelectorTokens, Token
-} from "../../@types";
+} from "../../@types/index.d.ts";
 import {EnumToken} from "./types";
 
 export const combinators: string[] = ['+', '>', '~', '||'];
@@ -121,6 +121,7 @@ export function minify(ast: AstNode, options: ParserOptions | MinifyOptions = {}
             if (node.typ == EnumToken.AtRuleNodeType && (<AstAtRule>node).nam == 'font-face') {
                 continue;
             }
+
             if (node.typ == EnumToken.AtRuleNodeType) {
 
                 if ((<AstAtRule>node).nam == 'media' && (<AstAtRule>node).val == 'all') {
@@ -467,7 +468,6 @@ export function minify(ast: AstNode, options: ParserOptions | MinifyOptions = {}
     if (ast.typ == EnumToken.StyleSheetNodeType) {
 
         let parent: AstRule | AstAtRule | AstRuleStyleSheet;
-
         let parents: Array<AstRule | AstAtRule | AstRuleStyleSheet> = [<AstRuleStyleSheet>ast];
 
         while (parents.length > 0) {
diff --git a/src/lib/ast/validate.ts b/src/lib/ast/validate.ts
index 4ed1141..658ca16 100644
--- a/src/lib/ast/validate.ts
+++ b/src/lib/ast/validate.ts
@@ -1,5 +1,5 @@
 import {EnumToken} from "./types";
-import {AstNode} from "../../@types";
+import type {AstNode} from "../../@types/index.d.ts";
 
 export function validateNode(node: AstNode, expected?: EnumToken): boolean {
 
diff --git a/src/lib/ast/walk.ts b/src/lib/ast/walk.ts
index 43d0f8b..655c949 100644
--- a/src/lib/ast/walk.ts
+++ b/src/lib/ast/walk.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AstNode,
     AstRuleList, BinaryExpressionToken,
     FunctionToken,
@@ -9,7 +9,7 @@ import {
     WalkerOption,
     WalkerValueFilter,
     WalkResult
-} from "../../@types";
+} from "../../@types/index.d.ts";
 import {EnumToken} from "./types";
 
 export function* walk(node: AstNode, filter?: WalkerFilter): Generator<WalkResult> {
diff --git a/src/lib/parser/declaration/list.ts b/src/lib/parser/declaration/list.ts
index d1f16f9..c265ca2 100644
--- a/src/lib/parser/declaration/list.ts
+++ b/src/lib/parser/declaration/list.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AstDeclaration,
     AstNode,
     PropertyListOptions,
@@ -6,7 +6,7 @@ import {
     ShorthandPropertyType,
     PropertiesConfig,
     Token
-} from "../../../@types";
+} from "../../../@types/index.d.ts";
 import {PropertySet} from "./set";
 import {getConfig} from "../utils";
 import {PropertyMap} from "./map";
diff --git a/src/lib/parser/declaration/map.ts b/src/lib/parser/declaration/map.ts
index 8c8c7bc..826e868 100644
--- a/src/lib/parser/declaration/map.ts
+++ b/src/lib/parser/declaration/map.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AstDeclaration,
     IdentToken, PropertiesConfig,
     PropertyMapType,
@@ -6,7 +6,7 @@ import {
     ShorthandPropertyType, StringToken,
     Token,
     WhitespaceToken
-} from "../../../@types";
+} from "../../../@types/index.d.ts";
 import {eq} from "../utils/eq";
 import {getConfig, matchType} from "../utils";
 import {renderToken} from "../../renderer";
diff --git a/src/lib/parser/declaration/set.ts b/src/lib/parser/declaration/set.ts
index 5c53045..5fae08f 100644
--- a/src/lib/parser/declaration/set.ts
+++ b/src/lib/parser/declaration/set.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AstDeclaration,
     DimensionToken,
      LiteralToken,
@@ -7,11 +7,10 @@ import {
     ShorthandPropertyType,
     Token,
     WhitespaceToken
-} from "../../../@types";
+} from "../../../@types/index.d.ts";
 import {eq} from "../utils/eq";
 import {isLength} from "../utils";
 import {EnumToken} from "../../ast";
-import {renderToken} from "../../renderer";
 
 function dedup(values: Token[][]) {
 
diff --git a/src/lib/parser/parse.ts b/src/lib/parser/parse.ts
index d910d1a..bd78390 100644
--- a/src/lib/parser/parse.ts
+++ b/src/lib/parser/parse.ts
@@ -18,10 +18,11 @@ import {renderToken} from "../renderer";
 import {COLORS_NAMES} from "../renderer/color";
 import {combinators, definedPropertySettings, EnumToken, expand, funcLike, minify, walk, walkValues} from "../ast";
 import {tokenize} from "./tokenize";
-import {
+import type {
     AstAtRule,
     AstComment,
-    AstDeclaration, AstKeyFrameRule,
+    AstDeclaration,
+    AstKeyFrameRule,
     AstNode,
     AstRule,
     AstRuleList,
@@ -74,7 +75,8 @@ import {
     UnclosedStringToken,
     UrlToken,
     WhitespaceToken
-} from "../../@types";
+} from "../../@types/index.d.ts";
+import {deprecatedSystemColors, systemColors} from "../renderer/color/utils";
 
 export const urlTokenMatcher: RegExp = /^(["']?)[a-zA-Z0-9_/.-][a-zA-Z0-9_/:.#?-]+(\1)$/;
 const trimWhiteSpace: EnumToken[] = [EnumToken.CommentTokenType, EnumToken.GtTokenType, EnumToken.GteTokenType, EnumToken.LtTokenType, EnumToken.LteTokenType, EnumToken.ColumnCombinatorTokenType];
@@ -798,9 +800,9 @@ export function parseString(src: string, options: { location: boolean } = {locat
 
 function getTokenType(val: string, hint?: EnumToken): Token {
 
-    if (val === '' && hint == null) {
-        throw new Error('empty string?');
-    }
+    // if (val === '' && hint == null) {
+    //     throw new Error('empty string?');
+    // }
 
     if (hint != null) {
 
@@ -969,6 +971,23 @@ function getTokenType(val: string, hint?: EnumToken): Token {
 
     if (isIdent(val)) {
 
+        if (systemColors.has(val.toLowerCase())) {
+            return <ColorToken>{
+                typ: EnumToken.ColorTokenType,
+                val,
+                kin: 'sys'
+            };
+        }
+
+        if (deprecatedSystemColors.has(val.toLowerCase())) {
+            return <ColorToken>{
+                typ: EnumToken.ColorTokenType,
+                val,
+                kin: 'dpsys'
+            };
+        }
+
+
         return <IdentToken>{
             typ: val.startsWith('--') ? EnumToken.DashedIdenTokenType : EnumToken.IdenTokenType,
             val
@@ -1003,7 +1022,7 @@ function getTokenType(val: string, hint?: EnumToken): Token {
     };
 }
 
-export function parseTokens(tokens: Token[], options: ParseTokenOptions = {}) {
+export function parseTokens(tokens: Token[], options: ParseTokenOptions = {}): Token[] {
 
     for (let i = 0; i < tokens.length; i++) {
 
@@ -1337,7 +1356,14 @@ export function parseTokens(tokens: Token[], options: ParseTokenOptions = {}) {
                     }
                 }
 
-                t.chi = t.chi.filter((t: Token) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
+                const filter = [EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType];
+
+                if (t.val != 'light-dark') {
+
+                    filter.push(EnumToken.CommaTokenType);
+                }
+
+                t.chi = t.chi.filter((t: Token) => !filter.includes(t.typ));
                 continue;
             }
 
diff --git a/src/lib/parser/tokenize.ts b/src/lib/parser/tokenize.ts
index cced6fd..d0ab3ee 100644
--- a/src/lib/parser/tokenize.ts
+++ b/src/lib/parser/tokenize.ts
@@ -1,9 +1,8 @@
 import {isDigit, isNewLine, isNonPrintable, isWhiteSpace} from "./utils";
-import {Position, TokenizeResult} from "../../@types";
+import type {Position, TokenizeResult} from "../../@types/index.d.ts";
 import {EnumToken} from "../ast";
 
 declare type InputStream = string;
-
 declare interface ParseInfo {
 
     stream: InputStream;
diff --git a/src/lib/parser/utils/config.ts b/src/lib/parser/utils/config.ts
index 6904d6f..5c340b7 100644
--- a/src/lib/parser/utils/config.ts
+++ b/src/lib/parser/utils/config.ts
@@ -1,4 +1,4 @@
 import config from '../../../config.json' assert {type: 'json'};
-import {PropertiesConfig} from "../../../@types";
+import type {PropertiesConfig} from "../../../@types/index.d.ts";
 
 export const getConfig = () => <PropertiesConfig>config;
\ No newline at end of file
diff --git a/src/lib/parser/utils/declaration.ts b/src/lib/parser/utils/declaration.ts
index 7654fda..8191dc3 100644
--- a/src/lib/parser/utils/declaration.ts
+++ b/src/lib/parser/utils/declaration.ts
@@ -1,4 +1,4 @@
-import {AstDeclaration, ErrorDescription, FunctionToken, ParensToken, Position, Token} from "../../../@types";
+import type {AstDeclaration, ErrorDescription, FunctionToken, ParensToken, Position, Token} from "../../../@types/index.d.ts";
 import {EnumToken, walkValues} from "../../ast";
 import {isWhiteSpace} from "./syntax";
 
diff --git a/src/lib/parser/utils/syntax.ts b/src/lib/parser/utils/syntax.ts
index aac43d1..9cb0465 100644
--- a/src/lib/parser/utils/syntax.ts
+++ b/src/lib/parser/utils/syntax.ts
@@ -3,7 +3,7 @@
 
 import {colorsFunc} from "../../renderer";
 import {COLORS_NAMES} from "../../renderer/color";
-import {
+import type {
     AngleToken,
     DimensionToken,
     FunctionToken,
@@ -12,7 +12,7 @@ import {
     NumberToken,
     PercentageToken,
     Token
-} from "../../../@types";
+} from "../../../@types/index.d.ts";
 import {EnumToken} from "../../ast";
 
 // '\\'
@@ -105,6 +105,21 @@ export function isColor(token: Token): boolean {
 
     if (token.typ == EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
 
+        if (token.val == 'light-dark') {
+
+            const children: Token[] = (<Token[]>token.chi).filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.LiteralTokenType, EnumToken.ColorTokenType, EnumToken.FunctionTokenType, EnumToken.PercentageTokenType].includes(t.typ));
+
+            if (children.length != 2) {
+
+                return false;
+            }
+
+            if (isColor(children[0]) && isColor(children[1])) {
+
+                return true;
+            }
+        }
+
         if (token.val == 'color') {
 
             const children: Token[] = (<Token[]>token.chi).filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.LiteralTokenType, EnumToken.ColorTokenType, EnumToken.FunctionTokenType, EnumToken.PercentageTokenType].includes(t.typ));
diff --git a/src/lib/parser/utils/type.ts b/src/lib/parser/utils/type.ts
index 7ffd206..0cbc884 100644
--- a/src/lib/parser/utils/type.ts
+++ b/src/lib/parser/utils/type.ts
@@ -1,5 +1,5 @@
 import {EnumToken} from "../../ast";
-import {IdentToken, PropertyMapType, Token} from "../../../@types";
+import type {IdentToken, PropertyMapType, Token} from "../../../@types/index.d.ts";
 
 // https://www.w3.org/TR/css-values-4/#math-function
 export const funcList: string[] = ['clamp', 'calc'];
diff --git a/src/lib/renderer/color/color.ts b/src/lib/renderer/color/color.ts
index 310049a..07e5ed8 100644
--- a/src/lib/renderer/color/color.ts
+++ b/src/lib/renderer/color/color.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AngleToken,
     ColorKind,
     ColorSpace,
@@ -7,7 +7,7 @@ import {
     NumberToken,
     PercentageToken,
     Token
-} from "../../../@types";
+} from "../../../@types/index.d.ts";
 import {EnumToken} from "../../ast";
 import {hex2rgb, hsl2rgb, hwb2rgb, lab2rgb, lch2rgb, oklab2rgb, oklch2rgb, srgb2rgb} from "./rgb";
 import {hex2hsl, hwb2hsl, lab2hsl, lch2hsl, oklab2hsl, oklch2hsl, rgb2hsl, srgb2hsl} from "./hsl";
diff --git a/src/lib/renderer/color/colormix.ts b/src/lib/renderer/color/colormix.ts
index 3efc09c..bdc66cb 100644
--- a/src/lib/renderer/color/colormix.ts
+++ b/src/lib/renderer/color/colormix.ts
@@ -1,4 +1,4 @@
-import {ColorToken, IdentToken, PercentageToken, Token} from "../../../@types";
+import type {ColorToken, IdentToken, PercentageToken, Token} from "../../../@types/index.d.ts";
 import {isPolarColorspace, isRectangularOrthogonalColorspace} from "../../parser";
 import {EnumToken} from "../../ast";
 import {getNumber} from "./color";
diff --git a/src/lib/renderer/color/hex.ts b/src/lib/renderer/color/hex.ts
index f48b33d..68099c4 100644
--- a/src/lib/renderer/color/hex.ts
+++ b/src/lib/renderer/color/hex.ts
@@ -1,4 +1,4 @@
-import {ColorToken, IdentToken, NumberToken, PercentageToken} from "../../../@types";
+import type {ColorToken, IdentToken, NumberToken, PercentageToken} from "../../../@types/index.d.ts";
 import {EnumToken} from "../../ast";
 import {getNumber, minmax} from "./color";
 import {cmyk2rgb, hsl2rgb, hwb2rgb, lab2rgb, lch2rgb, oklab2rgb, oklch2rgb} from "./rgb";
diff --git a/src/lib/renderer/color/hsl.ts b/src/lib/renderer/color/hsl.ts
index 90f99fc..968f456 100644
--- a/src/lib/renderer/color/hsl.ts
+++ b/src/lib/renderer/color/hsl.ts
@@ -1,9 +1,8 @@
 import {hwb2hsv} from "./hsv";
-import {ColorToken, IdentToken, NumberToken, PercentageToken, Token} from "../../../@types";
+import type {ColorToken, IdentToken, NumberToken, PercentageToken, Token} from "../../../@types/index.d.ts";
 import {getNumber} from "./color";
 import {hex2rgb, lab2rgb, lch2rgb, oklab2rgb, oklch2rgb} from "./rgb";
 import {getComponents} from "./utils";
-import {eq} from "../../parser/utils/eq";
 import {EnumToken} from "../../ast";
 import {hslvalues} from './srgb';
 
diff --git a/src/lib/renderer/color/hwb.ts b/src/lib/renderer/color/hwb.ts
index c95bfac..28d64a3 100644
--- a/src/lib/renderer/color/hwb.ts
+++ b/src/lib/renderer/color/hwb.ts
@@ -1,9 +1,8 @@
 import {hsl2hsv} from "./hsv";
-import {AngleToken, ColorToken, IdentToken, NumberToken, PercentageToken, Token} from "../../../@types";
+import type {AngleToken, ColorToken, IdentToken, NumberToken, PercentageToken, Token} from "../../../@types/index.d.ts";
 import {getComponents} from "./utils";
 import {getAngle, getNumber} from "./color";
 import {EnumToken} from "../../ast";
-import {eq} from "../../parser/utils/eq";
 import {lab2srgb, lch2srgb, oklab2srgb, oklch2srgb} from "./srgb";
 
 export function rgb2hwb(token: ColorToken): number[] {
diff --git a/src/lib/renderer/color/lab.ts b/src/lib/renderer/color/lab.ts
index cb4b309..997bf18 100644
--- a/src/lib/renderer/color/lab.ts
+++ b/src/lib/renderer/color/lab.ts
@@ -1,6 +1,6 @@
 import {D50, e, getComponents, k} from "./utils";
 import {srgb2xyz, xyzd502srgb} from "./xyz";
-import {ColorToken, NumberToken, PercentageToken, Token} from "../../../@types";
+import type {ColorToken, NumberToken, PercentageToken, Token} from "../../../@types/index.d.ts";
 import {hex2srgb, hsl2srgb, hwb2srgb, oklch2srgb, rgb2srgb} from "./srgb";
 import {getLCHComponents} from "./lch";
 import {getOKLABComponents, OKLab_to_XYZ} from "./oklab";
diff --git a/src/lib/renderer/color/lch.ts b/src/lib/renderer/color/lch.ts
index bf5f9df..6ec1d2d 100644
--- a/src/lib/renderer/color/lch.ts
+++ b/src/lib/renderer/color/lch.ts
@@ -1,4 +1,4 @@
-import {ColorToken, NumberToken, PercentageToken, Token} from "../../../@types";
+import type {ColorToken, NumberToken, PercentageToken, Token} from "../../../@types/index.d.ts";
 import {getComponents} from "./utils";
 import {getAngle, getNumber} from "./color";
 import {EnumToken} from "../../ast";
diff --git a/src/lib/renderer/color/oklab.ts b/src/lib/renderer/color/oklab.ts
index b235aea..41c5422 100644
--- a/src/lib/renderer/color/oklab.ts
+++ b/src/lib/renderer/color/oklab.ts
@@ -1,11 +1,10 @@
-import {getComponents, multiplyMatrices, powerlessColorComponent} from "./utils";
+import {getComponents, multiplyMatrices} from "./utils";
 import {srgb2lsrgbvalues, hex2srgb, hsl2srgb, hwb2srgb, lab2srgb, lch2srgb, rgb2srgb, lsrgb2srgbvalues} from "./srgb";
-import {ColorToken, NumberToken, PercentageToken, Token} from "../../../@types";
+import type {ColorToken, NumberToken, PercentageToken, Token} from "../../../@types/index.d.ts";
 import {getNumber} from "./color";
 import {EnumToken} from "../../ast";
 import {getOKLCHComponents} from "./oklch";
 import {lch2labvalues} from "./lab";
-import {eq} from "../../parser/utils/eq";
 
 export function hex2oklab(token: ColorToken) {
 
diff --git a/src/lib/renderer/color/oklch.ts b/src/lib/renderer/color/oklch.ts
index 710e6ec..51fc4dd 100644
--- a/src/lib/renderer/color/oklch.ts
+++ b/src/lib/renderer/color/oklch.ts
@@ -1,5 +1,5 @@
-import {ColorToken, NumberToken, PercentageToken, Token} from "../../../@types";
-import {getComponents, powerlessColorComponent} from "./utils";
+import type {ColorToken, NumberToken, PercentageToken, Token} from "../../../@types/index.d.ts";
+import {getComponents} from "./utils";
 import {getAngle, getNumber} from "./color";
 import {EnumToken} from "../../ast";
 import {lab2lchvalues} from "./lch";
diff --git a/src/lib/renderer/color/relativecolor.ts b/src/lib/renderer/color/relativecolor.ts
index 10b3a53..2cfc6d7 100644
--- a/src/lib/renderer/color/relativecolor.ts
+++ b/src/lib/renderer/color/relativecolor.ts
@@ -1,9 +1,8 @@
-import {ColorToken, PercentageToken, Token} from "../../../@types";
+import type {ColorToken, PercentageToken, Token} from "../../../@types/index.d.ts";
 import {convert, getNumber} from "./color";
 import {EnumToken, walkValues} from "../../ast";
 import {reduceNumber} from "../render";
 import {evaluate} from "../../ast/math";
-import {eq} from "../../parser/utils/eq";
 import {colorRange} from "./utils";
 
 type RGBKeyType = 'r' | 'g' | 'b' | 'alpha';
diff --git a/src/lib/renderer/color/rgb.ts b/src/lib/renderer/color/rgb.ts
index f16532e..c1092d7 100644
--- a/src/lib/renderer/color/rgb.ts
+++ b/src/lib/renderer/color/rgb.ts
@@ -1,4 +1,4 @@
-import {ColorToken} from "../../../@types";
+import type {ColorToken} from "../../../@types/index.d.ts";
 import {minmax} from "./color";
 import {COLORS_NAMES} from "./utils";
 import {expandHexValue} from "./hex";
diff --git a/src/lib/renderer/color/srgb.ts b/src/lib/renderer/color/srgb.ts
index 1914107..c154cfd 100644
--- a/src/lib/renderer/color/srgb.ts
+++ b/src/lib/renderer/color/srgb.ts
@@ -2,7 +2,7 @@
 // srgb-linear -> srgb
 // 0 <= r, g, b <= 1
 import {COLORS_NAMES, getComponents} from "./utils";
-import {ColorToken, DimensionToken, IdentToken, NumberToken, PercentageToken, Token} from "../../../@types";
+import type {ColorToken, DimensionToken, IdentToken, NumberToken, PercentageToken, Token} from "../../../@types/index.d.ts";
 import {color2srgbvalues, getAngle, getNumber} from "./color";
 import {EnumToken} from "../../ast";
 import {getLABComponents, Lab_to_sRGB, lch2labvalues} from "./lab";
@@ -11,7 +11,6 @@ import {getOKLABComponents, OKLab_to_sRGB} from "./oklab";
 import {getLCHComponents} from "./lch";
 import {getOKLCHComponents} from "./oklch";
 import {XYZ_to_lin_sRGB} from "./xyz";
-import {eq} from "../../parser/utils/eq";
 
 export function srgbvalues(token: ColorToken): number[] | null {
 
diff --git a/src/lib/renderer/color/utils/components.ts b/src/lib/renderer/color/utils/components.ts
index 76a1b2c..3fb8f89 100644
--- a/src/lib/renderer/color/utils/components.ts
+++ b/src/lib/renderer/color/utils/components.ts
@@ -1,4 +1,4 @@
-import {ColorToken, NumberToken, Token} from "../../../../@types";
+import type {ColorToken, NumberToken, Token} from "../../../../@types/index.d.ts";
 import {EnumToken} from "../../../ast";
 import {COLORS_NAMES} from "./constants";
 import {expandHexValue} from "../hex";
diff --git a/src/lib/renderer/color/utils/constants.ts b/src/lib/renderer/color/utils/constants.ts
index afdec50..fa78153 100644
--- a/src/lib/renderer/color/utils/constants.ts
+++ b/src/lib/renderer/color/utils/constants.ts
@@ -1,4 +1,4 @@
-import {ColorSpace, IdentToken} from "../../../../@types";
+import type {ColorSpace, IdentToken} from "../../../../@types/index.d.ts";
 import {EnumToken} from "../../../ast";
 
 export const colorRange = {
@@ -36,6 +36,12 @@ export const D50: number[] = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585)
 
 export const k: number = Math.pow(29, 3) / Math.pow(3, 3);
 export const e: number = Math.pow(6, 3) / Math.pow(29, 3);
+
+// color module v4
+export const systemColors: Set<string> = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
+// deprecated
+export const deprecatedSystemColors: Set<string> = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
+
 // name to color
 export const COLORS_NAMES: { [key: string]: string } = Object.seal({
     'aliceblue': '#f0f8ff',
diff --git a/src/lib/renderer/render.ts b/src/lib/renderer/render.ts
index 2618dd4..cb4b2fb 100644
--- a/src/lib/renderer/render.ts
+++ b/src/lib/renderer/render.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AngleToken,
     AstAtRule,
     AstComment,
@@ -20,7 +20,7 @@ import {
     RenderOptions,
     RenderResult,
     Token
-} from "../../@types";
+} from "../../@types/index.d.ts";
 import {
     clamp,
     cmyk2hex,
@@ -45,7 +45,7 @@ import {SourceMap} from "./sourcemap";
 import {isColor, isNewLine} from "../parser";
 import {colorFuncColorSpace, getComponents} from "./color/utils";
 
-export const colorsFunc: string[] = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch'];
+export const colorsFunc: string[] = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
 
 export function reduceNumber(val: string | number): string {
 
@@ -460,6 +460,11 @@ export function renderToken(token: Token, options: RenderOptions = {}, cache: {
 
         case EnumToken.ColorTokenType:
 
+            if (token.kin == 'light-dark') {
+
+                return token.val + '(' + (token.chi as Token[]).reduce((acc: string, curr: Token) => acc + renderToken(curr, options, cache), '') + ')';
+            }
+
             if (options.convertColor) {
 
                 if (token.cal == 'mix' && token.val == 'color-mix') {
@@ -599,7 +604,7 @@ export function renderToken(token: Token, options: RenderOptions = {}, cache: {
                 }
             }
 
-            if ((<ColorToken>token).kin == 'hex' || (<ColorToken>token).kin == 'lit') {
+            if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
 
                 return token.val;
             }
diff --git a/src/lib/renderer/sourcemap/sourcemap.ts b/src/lib/renderer/sourcemap/sourcemap.ts
index f1dbf75..4386ed7 100644
--- a/src/lib/renderer/sourcemap/sourcemap.ts
+++ b/src/lib/renderer/sourcemap/sourcemap.ts
@@ -1,4 +1,4 @@
-import {Location, SourceMapObject} from "../../../@types";
+import type {Location, SourceMapObject} from "../../../@types/index.d.ts";
 import {encode} from "./lib";
 
 export class SourceMap {
diff --git a/src/node/index.ts b/src/node/index.ts
index 0f00a3d..ec1d0da 100644
--- a/src/node/index.ts
+++ b/src/node/index.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AstNode,
     ParseResult,
     ParserOptions,
@@ -6,8 +6,8 @@ import {
     RenderResult,
     TransformOptions,
     TransformResult
-} from "../@types";
-
+} from "../@types/index.d.ts";
+import process from 'node:process';
 import {doParse, doRender} from "../lib";
 import {resolve, dirname} from "../lib/fs";
 import {load} from "./load";
diff --git a/src/node/load.ts b/src/node/load.ts
index 4461298..1df774b 100644
--- a/src/node/load.ts
+++ b/src/node/load.ts
@@ -11,7 +11,7 @@ function parseResponse(response: Response) {
     return response.text();
 }
 
-export async function load(url: string, currentFile: string) {
+export async function load(url: string, currentFile: string): Promise<string> {
 
     const resolved = resolve(url, currentFile);
 
diff --git a/src/web/index.ts b/src/web/index.ts
index 01479df..7e86214 100644
--- a/src/web/index.ts
+++ b/src/web/index.ts
@@ -1,4 +1,4 @@
-import {
+import type {
     AstNode,
     ParseResult,
     ParserOptions,
@@ -6,7 +6,7 @@ import {
     RenderResult,
     TransformOptions,
     TransformResult
-} from "../@types";
+} from "../@types/index.d.ts";
 
 import {doParse, doRender} from "../lib";
 import {resolve, dirname} from "../lib/fs";
diff --git a/src/web/load.ts b/src/web/load.ts
index fbc46ab..904196d 100644
--- a/src/web/load.ts
+++ b/src/web/load.ts
@@ -26,5 +26,6 @@ export async function load(url: string, currentFile: string): Promise<string> {
         t = new URL(path, self.origin);
     }
 
+    // @ts-ignore
     return fetch(t, t.origin != self.origin ? {mode: 'cors'} : {}).then(parseResponse);
 }
\ No newline at end of file
diff --git a/test/specs/code/color.js b/test/specs/code/color.js
index 1304799..13c238f 100644
--- a/test/specs/code/color.js
+++ b/test/specs/code/color.js
@@ -1180,6 +1180,53 @@ html { --bluegreen:  oklab(54.3% -22.5% -5%); }
  background: #ff00f6
 }`));
     });
-    //
-    // color-mix(in lch, white, black)
+
+    it('light-dark() #126', function () {
+        return parse(`
+:root {
+--light: #fff;
+--dark: #000;
+}
+/* Named color values */
+.a {
+color: light-dark(black, white);
+}
+
+/* RGB color values */
+.b {
+color: light-dark(rgb(0 0 0), rgb(255 255 255));
+}
+
+/* Custom properties */
+.c {
+    color: light-dark(var(--dark), var(--light));
+    }
+`, {inlineCssVariables: true}).then(result => expect(render(result.ast, {minify: false}).code).equals(`/* Named color values */
+.a {
+ color: light-dark(#000,#fff)
+}
+/* RGB color values */
+.b {
+ color: light-dark(#000,#fff)
+}
+/* Custom properties */
+.c {
+ color: light-dark(#000,#fff)
+}`));
+    });
+
+    it('system color #127', function () {
+        return parse(`
+ .button {
+    /* Use a border instead, since box-shadow
+    is forced to 'none' in forced-colors mode */
+    border: 2px ButtonBorder solid;
+    border-color:  ButtonBorder ;
+  }
+`).then(result => expect(render(result.ast, {minify: false}).code).equals(`.button {
+ /* Use a border instead, since box-shadow
+    is forced to 'none' in forced-colors mode */
+ border: ButtonBorder solid 2px
+}`));
+    });
 }
\ No newline at end of file