From 6db57b1e1b736f595a6565319a88cf7d631eb184 Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 17:10:17 -0700
Subject: [PATCH 1/9] chore: scaffold keystone theme package

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../vchart-keystone-theme/bundler.config.js   | 13 ++++
 packages/vchart-keystone-theme/jest.config.js |  8 ++
 packages/vchart-keystone-theme/package.json   | 78 +++++++++++++++++++
 .../vchart-keystone-theme/public/.gitkeep     |  0
 packages/vchart-keystone-theme/tsconfig.json  | 18 +++++
 rush.json                                     |  7 ++
 6 files changed, 124 insertions(+)
 create mode 100644 packages/vchart-keystone-theme/bundler.config.js
 create mode 100644 packages/vchart-keystone-theme/jest.config.js
 create mode 100644 packages/vchart-keystone-theme/package.json
 create mode 100644 packages/vchart-keystone-theme/public/.gitkeep
 create mode 100644 packages/vchart-keystone-theme/tsconfig.json

diff --git a/packages/vchart-keystone-theme/bundler.config.js b/packages/vchart-keystone-theme/bundler.config.js
new file mode 100644
index 0000000..76e4d15
--- /dev/null
+++ b/packages/vchart-keystone-theme/bundler.config.js
@@ -0,0 +1,13 @@
+/**
+ * @type {Partial<import('@internal/bundler').Config>}
+ */
+module.exports = {
+  formats: ['cjs', 'es', 'umd'],
+  outputDir: {
+    es: 'esm',
+    cjs: 'cjs',
+    umd: 'build'
+  },
+  name: 'vchart-keystone-theme',
+  umdOutputFilename: 'index'
+};
diff --git a/packages/vchart-keystone-theme/jest.config.js b/packages/vchart-keystone-theme/jest.config.js
new file mode 100644
index 0000000..821d516
--- /dev/null
+++ b/packages/vchart-keystone-theme/jest.config.js
@@ -0,0 +1,8 @@
+const baseJestConfig = require('@internal/jest-config/jest.base');
+
+module.exports = {
+  ...baseJestConfig,
+  moduleNameMapper: {
+    ...baseJestConfig.moduleNameMapper
+  }
+};
diff --git a/packages/vchart-keystone-theme/package.json b/packages/vchart-keystone-theme/package.json
new file mode 100644
index 0000000..319f0fd
--- /dev/null
+++ b/packages/vchart-keystone-theme/package.json
@@ -0,0 +1,78 @@
+{
+  "name": "@visactor/vchart-keystone-theme",
+  "version": "1.12.3",
+  "description": "Extended Keystone themes for VChart",
+  "sideEffects": false,
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "files": [
+    "cjs",
+    "esm",
+    "build",
+    "public",
+    "index.css",
+    "root.css"
+  ],
+  "scripts": {
+    "compile": "tsc --noEmit",
+    "eslint": "eslint --debug --fix src/",
+    "build": "bundle && npm run export",
+    "export": "ts-node scripts/export-theme.ts",
+    "dev": "bundle --clean -f es -w",
+    "start": "vite serve demo",
+    "test": "jest",
+    "test-cov": "jest -w 16 --coverage",
+    "test-live": "npm run test-watch __tests__/unit/",
+    "test-watch": "DEBUG_MODE=1 jest --watch"
+  },
+  "peerDependencies": {
+    "@visactor/vchart": ">=1.10.4"
+  },
+  "dependencies": {
+    "@visactor/vchart-theme-utils": "workspace:1.12.3"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "0.1.4",
+    "@internal/bundler": "workspace:*",
+    "@internal/eslint-config": "workspace:*",
+    "@internal/ts-config": "workspace:*",
+    "@internal/jest-config": "workspace:*",
+    "@internal/chart-demo": "workspace:*",
+    "jest": "~29.5.0",
+    "@jest/globals": "~29.5.0",
+    "ts-jest": "~29.1.0",
+    "@types/jest": "~29.5.0",
+    "@rushstack/eslint-patch": "~1.1.4",
+    "eslint": "~8.18.0",
+    "typescript": "4.9.5",
+    "@types/node": "*",
+    "@types/offscreencanvas": "2019.6.4",
+    "husky": "7.0.4",
+    "lint-staged": "12.3.7",
+    "magic-string": "^0.25.7",
+    "prettier": "2.6.1",
+    "ts-loader": "8.0.2",
+    "ts-node": "10.9.0",
+    "tslib": "2.3.1",
+    "tslint": "5.12.1",
+    "@babel/runtime": "latest",
+    "@visactor/vchart": "2.0.22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://www.visactor.io",
+  "bugs": "https://github.com/VisActor/vchart-theme/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/VisActor/vchart-theme.git",
+    "directory": "packages/vchart-keystone-theme"
+  },
+  "author": {
+    "name": "VisActor",
+    "url": "https://www.visactor.io/"
+  },
+  "license": "MIT"
+}
diff --git a/packages/vchart-keystone-theme/public/.gitkeep b/packages/vchart-keystone-theme/public/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/packages/vchart-keystone-theme/tsconfig.json b/packages/vchart-keystone-theme/tsconfig.json
new file mode 100644
index 0000000..9288787
--- /dev/null
+++ b/packages/vchart-keystone-theme/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "@internal/ts-config/tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["jest", "offscreencanvas", "node"],
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": "./",
+    "rootDir": "./src",
+    "outDir": "./es",
+    "composite": true
+  },
+  "ts-node": {
+    "transpileOnly": true,
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  },
+  "include": ["src"]
+}
diff --git a/rush.json b/rush.json
index 0d0462c..9ffdf82 100644
--- a/rush.json
+++ b/rush.json
@@ -61,6 +61,13 @@
       "shouldPublish": true,
       "versionPolicyName": "vchartThemeMain"
     },
+    {
+      "packageName": "@visactor/vchart-keystone-theme",
+      "projectFolder": "packages/vchart-keystone-theme",
+      "tags": ["package"],
+      "shouldPublish": true,
+      "versionPolicyName": "vchartThemeMain"
+    },
     {
       "packageName": "@visactor/vchart-arco-theme",
       "projectFolder": "packages/vchart-arco-theme",

From 1c375ca12d31e9a493b4b67afe1299323977cfd3 Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 17:33:29 -0700
Subject: [PATCH 2/9] feat: add keystone token snapshot

---
 .../__tests__/index.test.ts                   |  23 +
 packages/vchart-keystone-theme/index.css      | 892 ++++++++++++++++++
 packages/vchart-keystone-theme/jest.config.js |   4 +-
 packages/vchart-keystone-theme/jest.setup.js  |  22 +
 packages/vchart-keystone-theme/root.css       | 892 ++++++++++++++++++
 .../src/design-tokens/getCSSVariableValue.ts  |  23 +
 .../src/design-tokens/index.ts                | 886 +++++++++++++++++
 .../vchart-keystone-theme/tsconfig.test.json  |   9 +
 8 files changed, 2750 insertions(+), 1 deletion(-)
 create mode 100644 packages/vchart-keystone-theme/__tests__/index.test.ts
 create mode 100644 packages/vchart-keystone-theme/index.css
 create mode 100644 packages/vchart-keystone-theme/jest.setup.js
 create mode 100644 packages/vchart-keystone-theme/root.css
 create mode 100644 packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
 create mode 100644 packages/vchart-keystone-theme/src/design-tokens/index.ts
 create mode 100644 packages/vchart-keystone-theme/tsconfig.test.json

diff --git a/packages/vchart-keystone-theme/__tests__/index.test.ts b/packages/vchart-keystone-theme/__tests__/index.test.ts
new file mode 100644
index 0000000..e129c63
--- /dev/null
+++ b/packages/vchart-keystone-theme/__tests__/index.test.ts
@@ -0,0 +1,23 @@
+import { getCSSVariableValue, ks } from '../src/design-tokens';
+
+describe('vchart-keystone-theme design tokens', () => {
+  beforeEach(() => {
+    document.documentElement.style.setProperty('--ks-test-color', '#123456');
+  });
+
+  afterEach(() => {
+    document.documentElement.style.removeProperty('--ks-test-color');
+  });
+
+  it('exports the Keystone token snapshot', () => {
+    expect(ks.ref.color.neutral[500]).toBe('var(--ks-ref-color-neutral-500, #87898b)');
+  });
+
+  it('reads CSS variables by raw variable name', () => {
+    expect(getCSSVariableValue('--ks-test-color').trim()).toBe('#123456');
+  });
+
+  it('reads cached CSS variables by var() call syntax', () => {
+    expect(getCSSVariableValue('var(--ks-test-color)').trim()).toBe('#123456');
+  });
+});
diff --git a/packages/vchart-keystone-theme/index.css b/packages/vchart-keystone-theme/index.css
new file mode 100644
index 0000000..ec1a9f6
--- /dev/null
+++ b/packages/vchart-keystone-theme/index.css
@@ -0,0 +1,892 @@
+:root {
+  --ks-ref-text-fontFamily-display: TikTok Sans Display, TikTok Display, TikTok Sans Text, TikTok Text, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --ks-ref-text-fontFamily-text: TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --ks-ref-text-weight-regular: 400;
+  --ks-ref-text-weight-medium: 500;
+  --ks-ref-color-white: white;
+  --ks-ref-color-primary-150: #001c1b;
+  --ks-ref-color-primary-200: #002c2b;
+  --ks-ref-color-primary-250: #003b3a;
+  --ks-ref-color-primary-300: #004a48;
+  --ks-ref-color-primary-350: #005a58;
+  --ks-ref-color-primary-400: #006b68;
+  --ks-ref-color-primary-450: #017976;
+  --ks-ref-color-primary-500: #009995;
+  --ks-ref-color-primary-550: #00a5a0;
+  --ks-ref-color-primary-650: #31bdb8;
+  --ks-ref-color-primary-750: #6fd5d1;
+  --ks-ref-color-primary-850: #9ee1dd;
+  --ks-ref-color-primary-900: #c3e9e7;
+  --ks-ref-color-primary-950: #d7f2f0;
+  --ks-ref-color-primary-975: #e8fbf9;
+  --ks-ref-color-primary-995: #f2fdfc;
+  --ks-ref-color-primary-1000: white;
+  --ks-ref-color-support-150: #15142b;
+  --ks-ref-color-support-200: #221f4b;
+  --ks-ref-color-support-250: #2e286a;
+  --ks-ref-color-support-300: #3a3086;
+  --ks-ref-color-support-350: #473aa5;
+  --ks-ref-color-support-400: #5548bd;
+  --ks-ref-color-support-450: #665cd6;
+  --ks-ref-color-support-500: #8078f6;
+  --ks-ref-color-support-550: #8987f6;
+  --ks-ref-color-support-650: #a1a1fa;
+  --ks-ref-color-support-750: #babdff;
+  --ks-ref-color-support-850: #cdcfff;
+  --ks-ref-color-support-900: #dcdeff;
+  --ks-ref-color-support-950: #e9ebff;
+  --ks-ref-color-support-975: #f5f4ff;
+  --ks-ref-color-support-995: #fbfaff;
+  --ks-ref-color-support-1000: white;
+  --ks-ref-color-neutral-150: #121415;
+  --ks-ref-color-neutral-200: #262627;
+  --ks-ref-color-neutral-250: #343435;
+  --ks-ref-color-neutral-300: #404142;
+  --ks-ref-color-neutral-350: #4f5051;
+  --ks-ref-color-neutral-400: #5e5f61;
+  --ks-ref-color-neutral-450: #6d6e70;
+  --ks-ref-color-neutral-500: #87898b;
+  --ks-ref-color-neutral-550: #929496;
+  --ks-ref-color-neutral-650: #a9abac;
+  --ks-ref-color-neutral-750: #c3c4c5;
+  --ks-ref-color-neutral-850: #d3d4d5;
+  --ks-ref-color-neutral-900: #e1e1e2;
+  --ks-ref-color-neutral-950: #ececed;
+  --ks-ref-color-neutral-975: #f2f3f3;
+  --ks-ref-color-neutral-995: #f8f8f9;
+  --ks-ref-color-neutral-1000: white;
+  --ks-ref-color-error-150: #2b0e07;
+  --ks-ref-color-error-200: #4e0c0b;
+  --ks-ref-color-error-250: #680e13;
+  --ks-ref-color-error-300: #801118;
+  --ks-ref-color-error-350: #9b1720;
+  --ks-ref-color-error-400: #b51d27;
+  --ks-ref-color-error-450: #ca242e;
+  --ks-ref-color-error-500: #ef504b;
+  --ks-ref-color-error-550: #f4655b;
+  --ks-ref-color-error-650: #f78a7e;
+  --ks-ref-color-error-750: #ffafa3;
+  --ks-ref-color-error-850: #ffc6bd;
+  --ks-ref-color-error-900: #ffd8d2;
+  --ks-ref-color-error-950: #ffe7e3;
+  --ks-ref-color-error-975: #fff2f0;
+  --ks-ref-color-error-995: #fff9f8;
+  --ks-ref-color-error-1000: white;
+  --ks-ref-color-warning-150: #201507;
+  --ks-ref-color-warning-200: #342209;
+  --ks-ref-color-warning-250: #462f08;
+  --ks-ref-color-warning-300: #573b09;
+  --ks-ref-color-warning-350: #68490b;
+  --ks-ref-color-warning-400: #7a580e;
+  --ks-ref-color-warning-450: #8d670b;
+  --ks-ref-color-warning-500: #ad821a;
+  --ks-ref-color-warning-550: #ba8b04;
+  --ks-ref-color-warning-650: #d2a106;
+  --ks-ref-color-warning-750: #f0c133;
+  --ks-ref-color-warning-850: #fad253;
+  --ks-ref-color-warning-900: #fbde89;
+  --ks-ref-color-warning-950: #fbebbc;
+  --ks-ref-color-warning-975: #fdf5da;
+  --ks-ref-color-warning-995: #fffbec;
+  --ks-ref-color-warning-1000: white;
+  --ks-ref-color-success-150: #051c06;
+  --ks-ref-color-success-200: #052d0f;
+  --ks-ref-color-success-250: #033d15;
+  --ks-ref-color-success-300: #034c1c;
+  --ks-ref-color-success-350: #035d23;
+  --ks-ref-color-success-400: #056e2b;
+  --ks-ref-color-success-450: #057e33;
+  --ks-ref-color-success-500: #2a9c49;
+  --ks-ref-color-success-550: #35a752;
+  --ks-ref-color-success-650: #55bd69;
+  --ks-ref-color-success-750: #7ad889;
+  --ks-ref-color-success-850: #99e4a2;
+  --ks-ref-color-success-900: #baecbf;
+  --ks-ref-color-success-950: #ddf9df;
+  --ks-ref-color-success-975: #e7fde8;
+  --ks-ref-color-success-995: #effff0;
+  --ks-ref-color-success-1000: white;
+  --ks-ref-color-indigo-150: #0F162D;
+  --ks-ref-color-indigo-200: #1C2541;
+  --ks-ref-color-indigo-250: #263157;
+  --ks-ref-color-indigo-300: #2F3D6F;
+  --ks-ref-color-indigo-350: #37498D;
+  --ks-ref-color-indigo-400: #4156A8;
+  --ks-ref-color-indigo-450: #4D65C3;
+  --ks-ref-color-indigo-500: #6480E6;
+  --ks-ref-color-indigo-550: #728DEC;
+  --ks-ref-color-indigo-650: #95AEFE;
+  --ks-ref-color-indigo-750: #AAC4FC;
+  --ks-ref-color-indigo-850: #C2D5FB;
+  --ks-ref-color-indigo-900: #D6E2FA;
+  --ks-ref-color-indigo-950: #E3EEFF;
+  --ks-ref-color-indigo-975: #F0F6FF;
+  --ks-ref-color-indigo-995: #F8FBFF;
+  --ks-ref-color-blue-150: #001A2B;
+  --ks-ref-color-blue-200: #012B3E;
+  --ks-ref-color-blue-250: #003953;
+  --ks-ref-color-blue-300: #044765;
+  --ks-ref-color-blue-350: #00577D;
+  --ks-ref-color-blue-400: #006697;
+  --ks-ref-color-blue-450: #0074A6;
+  --ks-ref-color-blue-500: #2D94C8;
+  --ks-ref-color-blue-550: #3D9FD4;
+  --ks-ref-color-blue-650: #7CC0ED;
+  --ks-ref-color-blue-750: #98CCF0;
+  --ks-ref-color-blue-850: #B0DBFA;
+  --ks-ref-color-blue-900: #CAE6FC;
+  --ks-ref-color-blue-950: #E3F3FF;
+  --ks-ref-color-blue-975: #EDF7FE;
+  --ks-ref-color-blue-995: #F7FBFF;
+  --ks-ref-color-pink-150: #20111F;
+  --ks-ref-color-pink-200: #331E31;
+  --ks-ref-color-pink-250: #442942;
+  --ks-ref-color-pink-300: #533451;
+  --ks-ref-color-pink-350: #664163;
+  --ks-ref-color-pink-400: #784D75;
+  --ks-ref-color-pink-450: #8B5A88;
+  --ks-ref-color-pink-500: #AA72A7;
+  --ks-ref-color-pink-550: #B87BB4;
+  --ks-ref-color-pink-650: #D19DCD;
+  --ks-ref-color-pink-750: #DAB6D7;
+  --ks-ref-color-pink-850: #E3CBE1;
+  --ks-ref-color-pink-900: #EBDCE9;
+  --ks-ref-color-pink-950: #F2EAF1;
+  --ks-ref-color-pink-975: #F7F4F7;
+  --ks-ref-color-pink-995: #FCFAFB;
+  --ks-ref-color-orange-150: #280F03;
+  --ks-ref-color-orange-200: #3B1E0E;
+  --ks-ref-color-orange-250: #4F2913;
+  --ks-ref-color-orange-300: #623216;
+  --ks-ref-color-orange-350: #773E1D;
+  --ks-ref-color-orange-400: #8D4921;
+  --ks-ref-color-orange-450: #A45626;
+  --ks-ref-color-orange-500: #C86D37;
+  --ks-ref-color-orange-550: #D7763E;
+  --ks-ref-color-orange-650: #F69C6B;
+  --ks-ref-color-orange-750: #F6B28E;
+  --ks-ref-color-orange-850: #F7C9B1;
+  --ks-ref-color-orange-900: #F8DBCC;
+  --ks-ref-color-orange-950: #F9E9E1;
+  --ks-ref-color-orange-975: #FBF3EF;
+  --ks-ref-color-orange-995: #FDFAF8;
+  --ks-transition-easing-standardIn: cubic-bezier(0.32, 0, 0.67, 0);
+  --ks-transition-easing-standardOut: cubic-bezier(0.33, 1, 0.68, 1);
+  --ks-transition-easing-standardInOut: cubic-bezier(0.4, 0, 0.2, 1);
+  --ks-spacing-0: 0;
+  --ks-spacing-50: 2px;
+  --ks-spacing-100: 4px;
+  --ks-spacing-150: 6px;
+  --ks-spacing-200: 8px;
+  --ks-spacing-250: 10px;
+  --ks-spacing-300: 12px;
+  --ks-spacing-400: 16px;
+  --ks-spacing-500: 20px;
+  --ks-spacing-600: 24px;
+  --ks-spacing-700: 28px;
+  --ks-spacing-800: 32px;
+  --ks-spacing-900: 36px;
+  --ks-spacing-1000: 40px;
+  --ks-spacing-1200: 48px;
+  --ks-spacing-1400: 56px;
+  --ks-spacing-1600: 64px;
+  --ks-spacing-1800: 72px;
+  --ks-spacing-2000: 80px;
+  --ks-spacing-2200: 88px;
+  --ks-spacing-2400: 96px;
+  --ks-border-radius-sm: 2px;
+  --ks-border-radius-md: 4px;
+  --ks-border-radius-lg: 6px;
+  --ks-border-radius-xl: 8px;
+  --ks-border-radius-full: 9999px;
+  --ks-border-radius-innerMd: 3px;
+  --ks-elevation-shadow-level1: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
+  --ks-elevation-shadow-level2: 0 0 12px 0 rgba(0, 0, 0, 0.12);
+  --ks-elevation-shadow-level3: 0 8px 20px 0 rgba(0, 0, 0, 0.12);
+  --ks-elevation-shadow-level4: 0 8px 28px 0 rgba(0, 0, 0, 0.12);
+  --ks-text-headlineLg-fontSize: 32px;
+  --ks-text-headlineLg-lineHeight: 40px;
+  --ks-text-headlineLg-fontWeight: 500;
+  --ks-text-headlineLg-letterSpacing: 0;
+  --ks-text-headlineLg-fontFamily: var(--ks-ref-text-fontFamily-display);
+  --ks-text-headlineMd-fontSize: 24px;
+  --ks-text-headlineMd-lineHeight: 32px;
+  --ks-text-headlineMd-fontWeight: 500;
+  --ks-text-headlineMd-letterSpacing: 0.24px;
+  --ks-text-headlineMd-fontFamily: var(--ks-ref-text-fontFamily-display);
+  --ks-text-headlineSm-fontSize: 20px;
+  --ks-text-headlineSm-lineHeight: 28px;
+  --ks-text-headlineSm-fontWeight: 500;
+  --ks-text-headlineSm-letterSpacing: 0.3px;
+  --ks-text-headlineSm-fontFamily: var(--ks-ref-text-fontFamily-display);
+  --ks-text-titleLg-fontSize: 18px;
+  --ks-text-titleLg-lineHeight: 26px;
+  --ks-text-titleLg-fontWeight: 500;
+  --ks-text-titleLg-letterSpacing: 0.03px;
+  --ks-text-titleLg-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-text-titleMd-fontSize: 16px;
+  --ks-text-titleMd-lineHeight: 24px;
+  --ks-text-titleMd-fontWeight: 500;
+  --ks-text-titleMd-letterSpacing: 0.03px;
+  --ks-text-titleMd-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-text-titleSm-fontSize: 14px;
+  --ks-text-titleSm-lineHeight: 20px;
+  --ks-text-titleSm-fontWeight: 500;
+  --ks-text-titleSm-letterSpacing: 0.09px;
+  --ks-text-titleSm-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-text-bodyLg-fontSize: 18px;
+  --ks-text-bodyLg-lineHeight: 26px;
+  --ks-text-bodyLg-fontWeight: 400;
+  --ks-text-bodyLg-letterSpacing: 0.03px;
+  --ks-text-bodyLg-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-text-bodyMd-fontSize: 16px;
+  --ks-text-bodyMd-lineHeight: 24px;
+  --ks-text-bodyMd-fontWeight: 400;
+  --ks-text-bodyMd-letterSpacing: 0.03px;
+  --ks-text-bodyMd-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-text-bodySm-fontSize: 14px;
+  --ks-text-bodySm-lineHeight: 20px;
+  --ks-text-bodySm-fontWeight: 400;
+  --ks-text-bodySm-letterSpacing: 0.09px;
+  --ks-text-bodySm-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-text-labelLg-fontSize: 14px;
+  --ks-text-labelLg-lineHeight: 20px;
+  --ks-text-labelLg-fontWeight: 500;
+  --ks-text-labelLg-letterSpacing: 0.09px;
+  --ks-text-labelLg-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-text-labelMd-fontSize: 12px;
+  --ks-text-labelMd-lineHeight: 16px;
+  --ks-text-labelMd-fontWeight: 500;
+  --ks-text-labelMd-letterSpacing: 0.16px;
+  --ks-text-labelMd-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-text-labelSm-fontSize: 12px;
+  --ks-text-labelSm-lineHeight: 16px;
+  --ks-text-labelSm-fontWeight: 400;
+  --ks-text-labelSm-letterSpacing: 0.16px;
+  --ks-text-labelSm-fontFamily: var(--ks-ref-text-fontFamily-text);
+  --ks-color-primary-fill: #009995;
+  --ks-color-primary-fillHover: #008581;
+  --ks-color-primary-fillActive: #007875;
+  --ks-color-primary-fillDisabled: #c3e9e7;
+  --ks-color-primary-onFill: white;
+  --ks-color-primary-fillLow: #9ee1dd;
+  --ks-color-primary-onFillLow: #002c2b;
+  --ks-color-primary-onFillDisabled: white;
+  --ks-color-primary-surface: white;
+  --ks-color-primary-surface1: #f2fdfc;
+  --ks-color-primary-surface1Hover: #e5efee;
+  --ks-color-primary-surface1Active: #dee9e8;
+  --ks-color-primary-surface2: #e8fbf9;
+  --ks-color-primary-surface2Hover: #dbedec;
+  --ks-color-primary-surface2Active: #d4e7e5;
+  --ks-color-primary-surface2Disabled: #e8fbf9;
+  --ks-color-primary-surface3: #d7f2f0;
+  --ks-color-primary-onSurface: #017976;
+  --ks-color-primary-onSurfaceHover: #006663;
+  --ks-color-primary-onSurfaceActive: #005a57;
+  --ks-color-primary-onSurfaceDisabled: #a9abac;
+  --ks-color-primary-transparentFill: #01797600;
+  --ks-color-primary-transparentFillHover: #00666312;
+  --ks-color-primary-transparentFillActive: #005a5724;
+  --ks-color-primary-transparentFillDisabled: #01797600;
+  --ks-color-support-fill: #8078f6;
+  --ks-color-support-fillLow: #cdcfff;
+  --ks-color-support-fillHover: #6f65e1;
+  --ks-color-support-fillActive: #6459d4;
+  --ks-color-support-fillDisabled: #dcdeff;
+  --ks-color-support-onFill: white;
+  --ks-color-support-onFillLow: #221f4b;
+  --ks-color-support-onFillDisabled: white;
+  --ks-color-support-surface: white;
+  --ks-color-support-surface1: #fbfaff;
+  --ks-color-support-surface2: #f5f4ff;
+  --ks-color-support-surface2Hover: #e7e6f2;
+  --ks-color-support-surface2Active: #e1e0eb;
+  --ks-color-support-surface3: #e9ebff;
+  --ks-color-support-onSurface: #665cd6;
+  --ks-color-support-onSurfaceHover: #5749c2;
+  --ks-color-support-onSurfaceActive: #4d3cb5;
+  --ks-color-support-onSurfaceDisabled: #a1a1fa;
+  --ks-color-neutral-fill: #87898b;
+  --ks-color-neutral-fillHover: #767779;
+  --ks-color-neutral-fillActive: #6a6c6e;
+  --ks-color-neutral-fillDisabled: #e1e1e2;
+  --ks-color-neutral-onFill: white;
+  --ks-color-neutral-onFillDisabled: white;
+  --ks-color-neutral-fillHigh: #262627;
+  --ks-color-neutral-fillHighHover: #353536;
+  --ks-color-neutral-fillHighActive: #3f4041;
+  --ks-color-neutral-fillHighDisabled: var(--ks-color-neutral-fillDisabled);
+  --ks-color-neutral-fillMedHigh: #404142;
+  --ks-color-neutral-fillMedHighHover: #505152;
+  --ks-color-neutral-fillMedHighActive: #5b5c5d;
+  --ks-color-neutral-fillMedHighDisabled: var(--ks-color-neutral-fillDisabled);
+  --ks-color-neutral-fillLow: #d3d4d5;
+  --ks-color-neutral-fillLowHover: #c0c1c1;
+  --ks-color-neutral-fillLowActive: #b3b4b5;
+  --ks-color-neutral-fillLowDisabled: var(--ks-color-neutral-fillDisabled);
+  --ks-color-neutral-fillLowInverse: #ececed;
+  --ks-color-neutral-fillLowInverseHover: #f2f3f3;
+  --ks-color-neutral-fillLowInverseActive: #f8f8f9;
+  --ks-color-neutral-onFillLow: #262627;
+  --ks-color-neutral-surface: white;
+  --ks-color-neutral-surfaceHover: #f1f2f2;
+  --ks-color-neutral-surfaceActive: #ebebeb;
+  --ks-color-neutral-surface1: #f8f8f9;
+  --ks-color-neutral-surface1Hover: #ebebeb;
+  --ks-color-neutral-surface1Active: #e4e4e5;
+  --ks-color-neutral-surface2: #f2f3f3;
+  --ks-color-neutral-surface2Hover: #e5e5e6;
+  --ks-color-neutral-surface2Active: #dfdfdf;
+  --ks-color-neutral-surface2Disabled: #f8f8f9;
+  --ks-color-neutral-surface3: #ececed;
+  --ks-color-neutral-surface3Hover: #dfdfe0;
+  --ks-color-neutral-surface3Active: #d8d9d9;
+  --ks-color-neutral-surface3Disabled: #f8f8f9;
+  --ks-color-neutral-onSurface: #6d6e70;
+  --ks-color-neutral-onSurfaceHover: #5c5d5f;
+  --ks-color-neutral-onSurfaceActive: #515254;
+  --ks-color-neutral-onSurfaceDisabled: #a9abac;
+  --ks-color-neutral-highOnSurface: #121415;
+  --ks-color-neutral-highOnSurfaceHover: #242728;
+  --ks-color-neutral-highOnSurfaceActive: #2e3132;
+  --ks-color-neutral-highOnSurfaceDisabled: var(--ks-color-neutral-onSurfaceDisabled);
+  --ks-color-neutral-lowOnSurface: #87898B;
+  --ks-color-neutral-lowOnSurfaceHover: #757779;
+  --ks-color-neutral-lowOnSurfaceActive: 6A6C6E;
+  --ks-color-neutral-lowOnSurfaceDisabled: var(--ks-color-neutral-onSurfaceDisabled);
+  --ks-color-neutral-overlay: #26262780;
+  --ks-color-neutral-overlayHigh: #262627b3;
+  --ks-color-neutral-overlayHighDisabled: #e1e1e2;
+  --ks-color-neutral-overlayLow: #26262726;
+  --ks-color-neutral-overlayLowDisabled: #12141512;
+  --ks-color-neutral-transparentFill: #12141500;
+  --ks-color-neutral-transparentFillHover: #12141512;
+  --ks-color-neutral-transparentFillActive: #12141524;
+  --ks-color-neutral-transparentFillDisabled: #12141500;
+  --ks-color-error-fill: #ef504b;
+  --ks-color-error-fillHover: #da3a39;
+  --ks-color-error-fillActive: #cb2a2d;
+  --ks-color-error-fillDisabled: #ffd8d2;
+  --ks-color-error-fillMedHigh: #ca242e;
+  --ks-color-error-fillMedHighHover: #b3001c;
+  --ks-color-error-fillMedHighActive: #9f0018;
+  --ks-color-error-onFill: white;
+  --ks-color-error-fillLow: #ffc6bd;
+  --ks-color-error-onFillLow: #4e0c0b;
+  --ks-color-error-surface: white;
+  --ks-color-error-surface1: #fff9f8;
+  --ks-color-error-surface2: #fff2f0;
+  --ks-color-error-surface2Hover: #f2e5e2;
+  --ks-color-error-surface2Active: #ebdedc;
+  --ks-color-error-surface3: #ffe7e3;
+  --ks-color-error-onSurface: #ca242e;
+  --ks-color-error-onSurfaceHover: #b3001c;
+  --ks-color-error-onSurfaceActive: #9f0018;
+  --ks-color-warning-fill: #d2a106;
+  --ks-color-warning-fillHover: #bc8f00;
+  --ks-color-warning-fillActive: #ad8400;
+  --ks-color-warning-fillDisabled: #fbde89;
+  --ks-color-warning-onFill: white;
+  --ks-color-warning-fillLow: #fad253;
+  --ks-color-warning-onFillLow: #201507;
+  --ks-color-warning-surface: white;
+  --ks-color-warning-surface1: #fffbec;
+  --ks-color-warning-surface2: #fdf5da;
+  --ks-color-warning-surface2Hover: #f0e7cd;
+  --ks-color-warning-surface2Active: #e9e1c7;
+  --ks-color-warning-surface3: #fbebbc;
+  --ks-color-warning-onSurface: #8d670b;
+  --ks-color-warning-onSurfaceHover: #785600;
+  --ks-color-warning-onSurfaceActive: #6a4c00;
+  --ks-color-success-fill: #2a9c49;
+  --ks-color-success-onFill: white;
+  --ks-color-success-fillHover: #068a37;
+  --ks-color-success-fillActive: #007c30;
+  --ks-color-success-fillDisabled: #baecbf;
+  --ks-color-success-fillLow: #99e4a2;
+  --ks-color-success-onFillLow: #052d0f;
+  --ks-color-success-surface: white;
+  --ks-color-success-surface1: #effff0;
+  --ks-color-success-surface2: #e7fde8;
+  --ks-color-success-surface2Hover: #daf0db;
+  --ks-color-success-surface2Active: #d3e9d5;
+  --ks-color-success-surface3: #ddf9df;
+  --ks-color-success-onSurface: #057e33;
+  --ks-color-success-onSurfaceHover: #006b29;
+  --ks-color-success-onSurfaceActive: #005e23;
+  --ks-color-data-data1-fill: #8987f6;
+  --ks-color-data-data1-fillDisabled: #dcdeff;
+  --ks-color-data-data1-fillHigh: #665cd6;
+  --ks-color-data-data1-surface: #a1a1fa33;
+  --ks-color-data-data1-surfaceDisabled: #a1a1fa0d;
+  --ks-color-data-data2-fill: #00577D;
+  --ks-color-data-data2-fillDisabled: #CAE6FC;
+  --ks-color-data-data2-surface: #7cc0ed33;
+  --ks-color-data-data2-surfaceDisabled: #7cc0ed0d;
+  --ks-color-data-data3-fill: #E3CBE1;
+  --ks-color-data-data3-fillDisabled: #EBDCE9;
+  --ks-color-data-data3-fillMedHigh: #B87BB4;
+  --ks-color-data-data3-fillMedHighDisabled: #EBDCE9;
+  --ks-color-data-data3-fillHigh: #442942;
+  --ks-color-data-data3-surface: #d19dcd33;
+  --ks-color-data-data3-surfaceDisabled: #d19dcd0d;
+  --ks-color-data-data4-fill: #A45626;
+  --ks-color-data-data4-fillDisabled: #F8DBCC;
+  --ks-color-data-data4-fillHigh: #623216;
+  --ks-color-data-data4-surface: #f69c6b33;
+  --ks-color-data-data4-surfaceDisabled: #f69c6b0d;
+  --ks-color-data-data5-fill: #98CCF0;
+  --ks-color-data-data5-fillDisabled: #CAE6FC;
+  --ks-color-data-data5-fillMedHigh: #3D9FD4;
+  --ks-color-data-data5-fillMedHighDisabled: #CAE6FC;
+  --ks-color-data-data5-fillHigh: #0074A6;
+  --ks-color-data-data5-surface: #b0dbfa33;
+  --ks-color-data-data5-surfaceDisabled: #b0dbfa0d;
+  --ks-color-data-data6-fill: #5548bd;
+  --ks-color-data-data6-fillDisabled: #5548bd40;
+  --ks-color-data-data6-fillHigh: #473aa5;
+  --ks-color-data-data6-surface: #cdcfff33;
+  --ks-color-data-data6-surfaceDisabled: #cdcfff0d;
+  --ks-color-data-data7-fill: #F8DBCC;
+  --ks-color-data-data7-fillDisabled: #f8dbcc40;
+  --ks-color-data-data7-fillMedHigh: #D7763E;
+  --ks-color-data-data7-fillMedHighDisabled: #d7763e40;
+  --ks-color-data-data7-fillHigh: #A45626;
+  --ks-color-data-data7-surface: #f7c9b133;
+  --ks-color-data-data7-surfaceDisabled: #f7c9b10d;
+  --ks-color-data-data8-fill: #664163;
+  --ks-color-data-data8-fillDisabled: #66416340;
+  --ks-color-data-data8-fillHigh: #533451;
+  --ks-color-data-data8-surface: #e3cbe133;
+  --ks-color-data-data8-surfaceDisabled: #e3cbe10d;
+  --ks-color-data-data9-fill: #babdff;
+  --ks-color-data-data9-fillDisabled: #babdff40;
+  --ks-color-data-data9-fillMedHigh: #3a3086;
+  --ks-color-data-data9-fillMedHighDisabled: #3a308640;
+  --ks-color-data-data9-fillHigh: #221f4b;
+  --ks-color-data-data9-surface: #8987f633;
+  --ks-color-data-data9-surfaceDisabled: #8987f60d;
+  --ks-color-data-data9-onSurface: #8987f6;
+  --ks-color-data-success-fill: #2a9c49;
+  --ks-color-data-success-fillHigh: #035d23;
+  --ks-color-data-success-fillDisabled: #2a9c4940;
+  --ks-color-data-success-surface: #55bd6933;
+  --ks-color-data-success-surfaceDisabled: #55bd690d;
+  --ks-color-data-warning-fill: #f0c133;
+  --ks-color-data-warning-fillDisabled: #f0c13340;
+  --ks-color-data-warning-fillMedHigh: #ba8b04;
+  --ks-color-data-warning-fillMedHighDisabled: #ba8b0440;
+  --ks-color-data-warning-surface: #fad25333;
+  --ks-color-data-warning-surfaceDisabled: #fad2530d;
+  --ks-color-data-error-fill: #f78a7e;
+  --ks-color-data-error-fillDisabled: #f78a7e40;
+  --ks-color-data-error-fillMedHigh: #f4655b;
+  --ks-color-data-error-fillMedHighDisabled: #f4655b40;
+  --ks-color-data-error-surface: #f78a7e33;
+  --ks-color-data-error-surfaceDisabled: #f78a7e0d;
+  --ks-color-data-neutral-fill: #728DEC;
+  --ks-color-data-neutral-fillDisabled: #728dec40;
+  --ks-color-data-neutral-fillMedHigh: #5e5f61;
+  --ks-color-data-neutral-fillMedHighDisabled: #5e5f6140;
+  --ks-color-data-neutral-surface: #a9abac33;
+  --ks-color-data-neutral-surfaceDisabled: #a9abac0d;
+  --ks-color-ai-fill: linear-gradient(90deg, #31bdb8 0%, #95AEFE 93.64%, #a1a1fa 186.35%);
+}
+    html[data-theme="dark"] {
+  --ks-color-primary-fill: #31bdb8 !important;
+  --ks-color-primary-fillHover: #4bd0cb !important;
+  --ks-color-primary-fillActive: #5bddd8 !important;
+  --ks-color-primary-fillDisabled: #0E2F2F !important;
+  --ks-color-primary-onFill: #004a48 !important;
+  --ks-color-primary-fillLow: #009995 !important;
+  --ks-color-primary-onFillLow: #d7f2f0 !important;
+  --ks-color-primary-onFillDisabled: #017976 !important;
+  --ks-color-primary-surface: #001c1b !important;
+  --ks-color-primary-surface1: #002c2b !important;
+  --ks-color-primary-surface1Hover: #0c3635 !important;
+  --ks-color-primary-surface1Active: #123c3a !important;
+  --ks-color-primary-surface2: #003b3a !important;
+  --ks-color-primary-surface2Hover: #0f4644 !important;
+  --ks-color-primary-surface2Active: #164c49 !important;
+  --ks-color-primary-surface2Disabled: #054645 !important;
+  --ks-color-primary-surface3: #004a48 !important;
+  --ks-color-primary-onSurface: #6fd5d1 !important;
+  --ks-color-primary-onSurfaceHover: #83e9e4 !important;
+  --ks-color-primary-onSurfaceActive: #91f7f2 !important;
+  --ks-color-primary-onSurfaceDisabled: #006b68 !important;
+  --ks-color-primary-transparentFill: #01797600 !important;
+  --ks-color-primary-transparentFillHover: #268b8812 !important;
+  --ks-color-primary-transparentFillActive: #36989424 !important;
+  --ks-color-primary-transparentFillDisabled: #01797600 !important;
+  --ks-color-support-fill: #a1a1fa !important;
+  --ks-color-support-fillLow: #5548bd !important;
+  --ks-color-support-fillHover: #b5b7ff !important;
+  --ks-color-support-fillActive: #c4c6ff !important;
+  --ks-color-support-fillDisabled: #8078f6 !important;
+  --ks-color-support-onFill: white !important;
+  --ks-color-support-onFillLow: #e9ebff !important;
+  --ks-color-support-onFillDisabled: white !important;
+  --ks-color-support-surface: #15142b !important;
+  --ks-color-support-surface1: #2e286a !important;
+  --ks-color-support-surface2: #3a3086 !important;
+  --ks-color-support-surface2Hover: #443c93 !important;
+  --ks-color-support-surface2Active: #494299 !important;
+  --ks-color-support-surface3: #473aa5 !important;
+  --ks-color-support-onSurface: #babdff !important;
+  --ks-color-support-onSurfaceHover: #d0d3ff !important;
+  --ks-color-support-onSurfaceActive: #e0e2ff !important;
+  --ks-color-support-onSurfaceDisabled: #a1a1fa !important;
+  --ks-color-neutral-fill: #6d6e70 !important;
+  --ks-color-neutral-fillHover: #7e8082 !important;
+  --ks-color-neutral-fillActive: #8a8c8e !important;
+  --ks-color-neutral-fillDisabled: #4f5051 !important;
+  --ks-color-neutral-onFill: #121415 !important;
+  --ks-color-neutral-onFillDisabled: white !important;
+  --ks-color-neutral-fillHigh: #e1e1e2 !important;
+  --ks-color-neutral-fillHighHover: #cdcece !important;
+  --ks-color-neutral-fillHighActive: #c0c1c1 !important;
+  --ks-color-neutral-fillHighDisabled: var(--ks-color-neutral-fillDisabled) !important;
+  --ks-color-neutral-fillMedHigh: #c3c4c5 !important;
+  --ks-color-neutral-fillMedHighHover: #b0b1b2 !important;
+  --ks-color-neutral-fillMedHighActive: #a4a4a6 !important;
+  --ks-color-neutral-fillMedHighDisabled: var(--ks-color-neutral-fillDisabled) !important;
+  --ks-color-neutral-fillLow: #343435 !important;
+  --ks-color-neutral-fillLowHover: #434444 !important;
+  --ks-color-neutral-fillLowActive: #4e4e4f !important;
+  --ks-color-neutral-fillLowDisabled: #343435 !important;
+  --ks-color-neutral-fillLowInverse: #262627 !important;
+  --ks-color-neutral-fillLowInverseHover: #6F7072 !important;
+  --ks-color-neutral-fillLowInverseActive: #7B7C7E !important;
+  --ks-color-neutral-onFillLow: #ececed !important;
+  --ks-color-neutral-surface: #121415 !important;
+  --ks-color-neutral-surfaceHover: #343435 !important;
+  --ks-color-neutral-surfaceActive: #202223 !important;
+  --ks-color-neutral-surface1: #262627 !important;
+  --ks-color-neutral-surface1Hover: #2f3031 !important;
+  --ks-color-neutral-surface1Active: #353536 !important;
+  --ks-color-neutral-surface2: #343435 !important;
+  --ks-color-neutral-surface2Hover: #3e3e3f !important;
+  --ks-color-neutral-surface2Active: #434444 !important;
+  --ks-color-neutral-surface2Disabled: #404142 !important;
+  --ks-color-neutral-surface3: #404142 !important;
+  --ks-color-neutral-surface3Hover: #4b4c4c !important;
+  --ks-color-neutral-surface3Active: #505152 !important;
+  --ks-color-neutral-surface3Disabled: #404142 !important;
+  --ks-color-neutral-onSurface: #a9abac !important;
+  --ks-color-neutral-onSurfaceHover: #bcbebf !important;
+  --ks-color-neutral-onSurfaceActive: #c9cbcc !important;
+  --ks-color-neutral-onSurfaceDisabled: #404142 !important;
+  --ks-color-neutral-highOnSurface: #ececed !important;
+  --ks-color-neutral-highOnSurfaceHover: #d2d2d3 !important;
+  --ks-color-neutral-highOnSurfaceActive: #c5c5c6 !important;
+  --ks-color-neutral-highOnSurfaceDisabled: #4f5051 !important;
+  --ks-color-neutral-lowOnSurface: #87898b !important;
+  --ks-color-neutral-lowOnSurfaceHover: #757779 !important;
+  --ks-color-neutral-lowOnSurfaceActive: #6A6C6E !important;
+  --ks-color-neutral-lowOnSurfaceDisabled: #a9abac !important;
+  --ks-color-neutral-overlay: #E7E7E780 !important;
+  --ks-color-neutral-overlayHigh: #F4F4F4b2 !important;
+  --ks-color-neutral-overlayHighDisabled: #343435 !important;
+  --ks-color-neutral-overlayLow: #E7E7E726 !important;
+  --ks-color-neutral-overlayLowDisabled: #EFEFEF11 !important;
+  --ks-color-neutral-transparentFill: #12141500 !important;
+  --ks-color-neutral-transparentFillHover: #12141512 !important;
+  --ks-color-neutral-transparentFillActive: #12141524 !important;
+  --ks-color-neutral-transparentFillDisabled: #12141500 !important;
+  --ks-color-error-fill: #ef504b !important;
+  --ks-color-error-fillHover: #ff6b63 !important;
+  --ks-color-error-fillActive: #ff857b !important;
+  --ks-color-error-fillDisabled: #ffd8d2 !important;
+  --ks-color-error-fillMedHigh: #ca242e !important;
+  --ks-color-error-fillMedHighHover: #df3d40 !important;
+  --ks-color-error-fillMedHighActive: #ee4c4b !important;
+  --ks-color-error-onFill: white !important;
+  --ks-color-error-fillLow: #b51d27 !important;
+  --ks-color-error-onFillLow: #ffd8d2 !important;
+  --ks-color-error-surface: white !important;
+  --ks-color-error-surface1: #801118 !important;
+  --ks-color-error-surface2: #4e0c0b !important;
+  --ks-color-error-surface2Hover: #5a1815 !important;
+  --ks-color-error-surface2Active: #601e1a !important;
+  --ks-color-error-surface3: #2b0e07 !important;
+  --ks-color-error-onSurface: #f78a7e !important;
+  --ks-color-error-onSurfaceHover: #ffa69a !important;
+  --ks-color-error-onSurfaceActive: #ffbab0 !important;
+  --ks-color-warning-fill: #f0c133 !important;
+  --ks-color-warning-fillHover: #ffd667 !important;
+  --ks-color-warning-fillActive: #ffe6a5 !important;
+  --ks-color-warning-fillDisabled: #fbde89 !important;
+  --ks-color-warning-onFill: white !important;
+  --ks-color-warning-fillLow: #8d670b !important;
+  --ks-color-warning-onFillLow: #fbde89 !important;
+  --ks-color-warning-surface: white !important;
+  --ks-color-warning-surface1: #573b09 !important;
+  --ks-color-warning-surface2: #462f08 !important;
+  --ks-color-warning-surface2Hover: #513914 !important;
+  --ks-color-warning-surface2Active: #573e1a !important;
+  --ks-color-warning-surface3: #342209 !important;
+  --ks-color-warning-onSurface: #fbde89 !important;
+  --ks-color-warning-onSurfaceHover: #fff4d3 !important;
+  --ks-color-warning-onSurfaceActive: #ffffff !important;
+  --ks-color-success-fill: #35a752 !important;
+  --ks-color-success-onFill: white !important;
+  --ks-color-success-fillHover: #4cba64 !important;
+  --ks-color-success-fillActive: #5ac770 !important;
+  --ks-color-success-fillDisabled: #baecbf !important;
+  --ks-color-success-fillLow: #056e2b !important;
+  --ks-color-success-onFillLow: #7ad889 !important;
+  --ks-color-success-surface: white !important;
+  --ks-color-success-surface1: #034c1c !important;
+  --ks-color-success-surface2: #033d15 !important;
+  --ks-color-success-surface2Hover: #124820 !important;
+  --ks-color-success-surface2Active: #184e25 !important;
+  --ks-color-success-surface3: #052d0f !important;
+  --ks-color-success-onSurface: #7ad889 !important;
+  --ks-color-success-onSurfaceHover: #8eeb9c !important;
+  --ks-color-success-onSurfaceActive: #9bf9a8 !important;
+  --ks-color-data-data1-fill: #8987f6 !important;
+  --ks-color-data-data1-fillDisabled: #dcdeff !important;
+  --ks-color-data-data1-fillHigh: #665cd6 !important;
+  --ks-color-data-data1-surface: #a1a1fa33 !important;
+  --ks-color-data-data1-surfaceDisabled: #a1a1fa0d !important;
+  --ks-color-data-data2-fill: #00577D !important;
+  --ks-color-data-data2-fillDisabled: #CAE6FC !important;
+  --ks-color-data-data2-surface: #7cc0ed33 !important;
+  --ks-color-data-data2-surfaceDisabled: #7cc0ed0d !important;
+  --ks-color-data-data3-fill: #E3CBE1 !important;
+  --ks-color-data-data3-fillDisabled: #EBDCE9 !important;
+  --ks-color-data-data3-fillMedHigh: #B87BB4 !important;
+  --ks-color-data-data3-fillMedHighDisabled: #EBDCE9 !important;
+  --ks-color-data-data3-fillHigh: #442942 !important;
+  --ks-color-data-data3-surface: #d19dcd33 !important;
+  --ks-color-data-data3-surfaceDisabled: #d19dcd0d !important;
+  --ks-color-data-data4-fill: #A45626 !important;
+  --ks-color-data-data4-fillDisabled: #F8DBCC !important;
+  --ks-color-data-data4-fillHigh: #623216 !important;
+  --ks-color-data-data4-surface: #f69c6b33 !important;
+  --ks-color-data-data4-surfaceDisabled: #f69c6b0d !important;
+  --ks-color-data-data5-fill: #98CCF0 !important;
+  --ks-color-data-data5-fillDisabled: #CAE6FC !important;
+  --ks-color-data-data5-fillMedHigh: #3D9FD4 !important;
+  --ks-color-data-data5-fillMedHighDisabled: #CAE6FC !important;
+  --ks-color-data-data5-fillHigh: #0074A6 !important;
+  --ks-color-data-data5-surface: #b0dbfa33 !important;
+  --ks-color-data-data5-surfaceDisabled: #b0dbfa0d !important;
+  --ks-color-data-data6-fill: #5548bd !important;
+  --ks-color-data-data6-fillDisabled: #5548bd40 !important;
+  --ks-color-data-data6-fillHigh: #473aa5 !important;
+  --ks-color-data-data6-surface: #cdcfff33 !important;
+  --ks-color-data-data6-surfaceDisabled: #cdcfff0d !important;
+  --ks-color-data-data7-fill: #F8DBCC !important;
+  --ks-color-data-data7-fillDisabled: #f8dbcc40 !important;
+  --ks-color-data-data7-fillMedHigh: #D7763E !important;
+  --ks-color-data-data7-fillMedHighDisabled: #d7763e40 !important;
+  --ks-color-data-data7-fillHigh: #A45626 !important;
+  --ks-color-data-data7-surface: #f7c9b133 !important;
+  --ks-color-data-data7-surfaceDisabled: #f7c9b10d !important;
+  --ks-color-data-data8-fill: #664163 !important;
+  --ks-color-data-data8-fillDisabled: #66416340 !important;
+  --ks-color-data-data8-fillHigh: #533451 !important;
+  --ks-color-data-data8-surface: #e3cbe133 !important;
+  --ks-color-data-data8-surfaceDisabled: #e3cbe10d !important;
+  --ks-color-data-data9-fill: #babdff !important;
+  --ks-color-data-data9-fillDisabled: #babdff40 !important;
+  --ks-color-data-data9-fillMedHigh: #3a3086 !important;
+  --ks-color-data-data9-fillMedHighDisabled: #3a308640 !important;
+  --ks-color-data-data9-fillHigh: #221f4b !important;
+  --ks-color-data-data9-surface: #8987f633 !important;
+  --ks-color-data-data9-surfaceDisabled: #8987f60d !important;
+  --ks-color-data-data9-onSurface: #8987f6 !important;
+  --ks-color-data-success-fill: #2a9c49 !important;
+  --ks-color-data-success-fillHigh: #035d23 !important;
+  --ks-color-data-success-fillDisabled: #2a9c4940 !important;
+  --ks-color-data-success-surface: #55bd6933 !important;
+  --ks-color-data-success-surfaceDisabled: #55bd690d !important;
+  --ks-color-data-warning-fill: #f0c133 !important;
+  --ks-color-data-warning-fillDisabled: #f0c13340 !important;
+  --ks-color-data-warning-fillMedHigh: #ba8b04 !important;
+  --ks-color-data-warning-fillMedHighDisabled: #ba8b0440 !important;
+  --ks-color-data-warning-surface: #fad25333 !important;
+  --ks-color-data-warning-surfaceDisabled: #fad2530d !important;
+  --ks-color-data-error-fill: #f78a7e !important;
+  --ks-color-data-error-fillDisabled: #f78a7e40 !important;
+  --ks-color-data-error-fillMedHigh: #f4655b !important;
+  --ks-color-data-error-fillMedHighDisabled: #f4655b40 !important;
+  --ks-color-data-error-surface: #f78a7e33 !important;
+  --ks-color-data-error-surfaceDisabled: #f78a7e0d !important;
+  --ks-color-data-neutral-fill: #728DEC !important;
+  --ks-color-data-neutral-fillDisabled: #728dec40 !important;
+  --ks-color-data-neutral-fillMedHigh: #5e5f61 !important;
+  --ks-color-data-neutral-fillMedHighDisabled: #5e5f6140 !important;
+  --ks-color-data-neutral-surface: #a9abac33 !important;
+  --ks-color-data-neutral-surfaceDisabled: #a9abac0d !important;
+  --ks-color-ai-fill: linear-gradient(90deg, #31bdb8 0%, #95AEFE 93.64%, #a1a1fa 186.35%) !important;
+  --ks-ref-color-white: white !important;
+  --ks-ref-color-primary-150: #001c1b !important;
+  --ks-ref-color-primary-200: #002c2b !important;
+  --ks-ref-color-primary-250: #003b3a !important;
+  --ks-ref-color-primary-300: #004a48 !important;
+  --ks-ref-color-primary-350: #005a58 !important;
+  --ks-ref-color-primary-400: #006b68 !important;
+  --ks-ref-color-primary-450: #017976 !important;
+  --ks-ref-color-primary-500: #009995 !important;
+  --ks-ref-color-primary-550: #00a5a0 !important;
+  --ks-ref-color-primary-650: #31bdb8 !important;
+  --ks-ref-color-primary-750: #6fd5d1 !important;
+  --ks-ref-color-primary-850: #9ee1dd !important;
+  --ks-ref-color-primary-900: #c3e9e7 !important;
+  --ks-ref-color-primary-950: #d7f2f0 !important;
+  --ks-ref-color-primary-975: #e8fbf9 !important;
+  --ks-ref-color-primary-995: #f2fdfc !important;
+  --ks-ref-color-primary-1000: white !important;
+  --ks-ref-color-support-150: #15142b !important;
+  --ks-ref-color-support-200: #221f4b !important;
+  --ks-ref-color-support-250: #2e286a !important;
+  --ks-ref-color-support-300: #3a3086 !important;
+  --ks-ref-color-support-350: #473aa5 !important;
+  --ks-ref-color-support-400: #5548bd !important;
+  --ks-ref-color-support-450: #665cd6 !important;
+  --ks-ref-color-support-500: #8078f6 !important;
+  --ks-ref-color-support-550: #8987f6 !important;
+  --ks-ref-color-support-650: #a1a1fa !important;
+  --ks-ref-color-support-750: #babdff !important;
+  --ks-ref-color-support-850: #cdcfff !important;
+  --ks-ref-color-support-900: #dcdeff !important;
+  --ks-ref-color-support-950: #e9ebff !important;
+  --ks-ref-color-support-975: #f5f4ff !important;
+  --ks-ref-color-support-995: #fbfaff !important;
+  --ks-ref-color-support-1000: white !important;
+  --ks-ref-color-neutral-150: #121415 !important;
+  --ks-ref-color-neutral-200: #262627 !important;
+  --ks-ref-color-neutral-250: #343435 !important;
+  --ks-ref-color-neutral-300: #404142 !important;
+  --ks-ref-color-neutral-350: #4f5051 !important;
+  --ks-ref-color-neutral-400: #5e5f61 !important;
+  --ks-ref-color-neutral-450: #6d6e70 !important;
+  --ks-ref-color-neutral-500: #87898b !important;
+  --ks-ref-color-neutral-550: #929496 !important;
+  --ks-ref-color-neutral-650: #a9abac !important;
+  --ks-ref-color-neutral-750: #c3c4c5 !important;
+  --ks-ref-color-neutral-850: #d3d4d5 !important;
+  --ks-ref-color-neutral-900: #e1e1e2 !important;
+  --ks-ref-color-neutral-950: #ececed !important;
+  --ks-ref-color-neutral-975: #f2f3f3 !important;
+  --ks-ref-color-neutral-995: #f8f8f9 !important;
+  --ks-ref-color-neutral-1000: white !important;
+  --ks-ref-color-error-150: #2b0e07 !important;
+  --ks-ref-color-error-200: #4e0c0b !important;
+  --ks-ref-color-error-250: #680e13 !important;
+  --ks-ref-color-error-300: #801118 !important;
+  --ks-ref-color-error-350: #9b1720 !important;
+  --ks-ref-color-error-400: #b51d27 !important;
+  --ks-ref-color-error-450: #ca242e !important;
+  --ks-ref-color-error-500: #ef504b !important;
+  --ks-ref-color-error-550: #f4655b !important;
+  --ks-ref-color-error-650: #f78a7e !important;
+  --ks-ref-color-error-750: #ffafa3 !important;
+  --ks-ref-color-error-850: #ffc6bd !important;
+  --ks-ref-color-error-900: #ffd8d2 !important;
+  --ks-ref-color-error-950: #ffe7e3 !important;
+  --ks-ref-color-error-975: #fff2f0 !important;
+  --ks-ref-color-error-995: #fff9f8 !important;
+  --ks-ref-color-error-1000: white !important;
+  --ks-ref-color-warning-150: #201507 !important;
+  --ks-ref-color-warning-200: #342209 !important;
+  --ks-ref-color-warning-250: #462f08 !important;
+  --ks-ref-color-warning-300: #573b09 !important;
+  --ks-ref-color-warning-350: #68490b !important;
+  --ks-ref-color-warning-400: #7a580e !important;
+  --ks-ref-color-warning-450: #8d670b !important;
+  --ks-ref-color-warning-500: #ad821a !important;
+  --ks-ref-color-warning-550: #ba8b04 !important;
+  --ks-ref-color-warning-650: #d2a106 !important;
+  --ks-ref-color-warning-750: #f0c133 !important;
+  --ks-ref-color-warning-850: #fad253 !important;
+  --ks-ref-color-warning-900: #fbde89 !important;
+  --ks-ref-color-warning-950: #fbebbc !important;
+  --ks-ref-color-warning-975: #fdf5da !important;
+  --ks-ref-color-warning-995: #fffbec !important;
+  --ks-ref-color-warning-1000: white !important;
+  --ks-ref-color-success-150: #051c06 !important;
+  --ks-ref-color-success-200: #052d0f !important;
+  --ks-ref-color-success-250: #033d15 !important;
+  --ks-ref-color-success-300: #034c1c !important;
+  --ks-ref-color-success-350: #035d23 !important;
+  --ks-ref-color-success-400: #056e2b !important;
+  --ks-ref-color-success-450: #057e33 !important;
+  --ks-ref-color-success-500: #2a9c49 !important;
+  --ks-ref-color-success-550: #35a752 !important;
+  --ks-ref-color-success-650: #55bd69 !important;
+  --ks-ref-color-success-750: #7ad889 !important;
+  --ks-ref-color-success-850: #99e4a2 !important;
+  --ks-ref-color-success-900: #baecbf !important;
+  --ks-ref-color-success-950: #ddf9df !important;
+  --ks-ref-color-success-975: #e7fde8 !important;
+  --ks-ref-color-success-995: #effff0 !important;
+  --ks-ref-color-success-1000: white !important;
+  --ks-ref-color-indigo-150: #0F162D !important;
+  --ks-ref-color-indigo-200: #1C2541 !important;
+  --ks-ref-color-indigo-250: #263157 !important;
+  --ks-ref-color-indigo-300: #2F3D6F !important;
+  --ks-ref-color-indigo-350: #37498D !important;
+  --ks-ref-color-indigo-400: #4156A8 !important;
+  --ks-ref-color-indigo-450: #4D65C3 !important;
+  --ks-ref-color-indigo-500: #6480E6 !important;
+  --ks-ref-color-indigo-550: #728DEC !important;
+  --ks-ref-color-indigo-650: #95AEFE !important;
+  --ks-ref-color-indigo-750: #AAC4FC !important;
+  --ks-ref-color-indigo-850: #C2D5FB !important;
+  --ks-ref-color-indigo-900: #D6E2FA !important;
+  --ks-ref-color-indigo-950: #E3EEFF !important;
+  --ks-ref-color-indigo-975: #F0F6FF !important;
+  --ks-ref-color-indigo-995: #F8FBFF !important;
+  --ks-ref-color-blue-150: #001A2B !important;
+  --ks-ref-color-blue-200: #012B3E !important;
+  --ks-ref-color-blue-250: #003953 !important;
+  --ks-ref-color-blue-300: #044765 !important;
+  --ks-ref-color-blue-350: #00577D !important;
+  --ks-ref-color-blue-400: #006697 !important;
+  --ks-ref-color-blue-450: #0074A6 !important;
+  --ks-ref-color-blue-500: #2D94C8 !important;
+  --ks-ref-color-blue-550: #3D9FD4 !important;
+  --ks-ref-color-blue-650: #7CC0ED !important;
+  --ks-ref-color-blue-750: #98CCF0 !important;
+  --ks-ref-color-blue-850: #B0DBFA !important;
+  --ks-ref-color-blue-900: #CAE6FC !important;
+  --ks-ref-color-blue-950: #E3F3FF !important;
+  --ks-ref-color-blue-975: #EDF7FE !important;
+  --ks-ref-color-blue-995: #F7FBFF !important;
+  --ks-ref-color-pink-150: #20111F !important;
+  --ks-ref-color-pink-200: #331E31 !important;
+  --ks-ref-color-pink-250: #442942 !important;
+  --ks-ref-color-pink-300: #533451 !important;
+  --ks-ref-color-pink-350: #664163 !important;
+  --ks-ref-color-pink-400: #784D75 !important;
+  --ks-ref-color-pink-450: #8B5A88 !important;
+  --ks-ref-color-pink-500: #AA72A7 !important;
+  --ks-ref-color-pink-550: #B87BB4 !important;
+  --ks-ref-color-pink-650: #D19DCD !important;
+  --ks-ref-color-pink-750: #DAB6D7 !important;
+  --ks-ref-color-pink-850: #E3CBE1 !important;
+  --ks-ref-color-pink-900: #EBDCE9 !important;
+  --ks-ref-color-pink-950: #F2EAF1 !important;
+  --ks-ref-color-pink-975: #F7F4F7 !important;
+  --ks-ref-color-pink-995: #FCFAFB !important;
+  --ks-ref-color-orange-150: #280F03 !important;
+  --ks-ref-color-orange-200: #3B1E0E !important;
+  --ks-ref-color-orange-250: #4F2913 !important;
+  --ks-ref-color-orange-300: #623216 !important;
+  --ks-ref-color-orange-350: #773E1D !important;
+  --ks-ref-color-orange-400: #8D4921 !important;
+  --ks-ref-color-orange-450: #A45626 !important;
+  --ks-ref-color-orange-500: #C86D37 !important;
+  --ks-ref-color-orange-550: #D7763E !important;
+  --ks-ref-color-orange-650: #F69C6B !important;
+  --ks-ref-color-orange-750: #F6B28E !important;
+  --ks-ref-color-orange-850: #F7C9B1 !important;
+  --ks-ref-color-orange-900: #F8DBCC !important;
+  --ks-ref-color-orange-950: #F9E9E1 !important;
+  --ks-ref-color-orange-975: #FBF3EF !important;
+  --ks-ref-color-orange-995: #FDFAF8 !important;
+}
\ No newline at end of file
diff --git a/packages/vchart-keystone-theme/jest.config.js b/packages/vchart-keystone-theme/jest.config.js
index 821d516..1d1b3f4 100644
--- a/packages/vchart-keystone-theme/jest.config.js
+++ b/packages/vchart-keystone-theme/jest.config.js
@@ -2,7 +2,9 @@ const baseJestConfig = require('@internal/jest-config/jest.base');
 
 module.exports = {
   ...baseJestConfig,
+  setupFiles: ['<rootDir>/jest.setup.js'],
   moduleNameMapper: {
-    ...baseJestConfig.moduleNameMapper
+    ...baseJestConfig.moduleNameMapper,
+    '^\\./getCSSVariableValue\\.js$': '<rootDir>/src/design-tokens/getCSSVariableValue.ts'
   }
 };
diff --git a/packages/vchart-keystone-theme/jest.setup.js b/packages/vchart-keystone-theme/jest.setup.js
new file mode 100644
index 0000000..fd8a20e
--- /dev/null
+++ b/packages/vchart-keystone-theme/jest.setup.js
@@ -0,0 +1,22 @@
+const styleProperties = new Map();
+
+const style = {
+  setProperty(name, value) {
+    styleProperties.set(name, value);
+  },
+  removeProperty(name) {
+    styleProperties.delete(name);
+  }
+};
+
+global.document = {
+  documentElement: {
+    style
+  }
+};
+
+global.getComputedStyle = () => ({
+  getPropertyValue(name) {
+    return styleProperties.get(name) || '';
+  }
+});
diff --git a/packages/vchart-keystone-theme/root.css b/packages/vchart-keystone-theme/root.css
new file mode 100644
index 0000000..5b52225
--- /dev/null
+++ b/packages/vchart-keystone-theme/root.css
@@ -0,0 +1,892 @@
+:root {
+  --ks-ref-text-fontFamily-display: TikTok Sans Display, TikTok Display, TikTok Sans Text, TikTok Text, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
+  --ks-ref-text-fontFamily-text: TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
+  --ks-ref-text-weight-regular: 400 !important;
+  --ks-ref-text-weight-medium: 500 !important;
+  --ks-ref-color-white: white !important;
+  --ks-ref-color-primary-150: #001c1b !important;
+  --ks-ref-color-primary-200: #002c2b !important;
+  --ks-ref-color-primary-250: #003b3a !important;
+  --ks-ref-color-primary-300: #004a48 !important;
+  --ks-ref-color-primary-350: #005a58 !important;
+  --ks-ref-color-primary-400: #006b68 !important;
+  --ks-ref-color-primary-450: #017976 !important;
+  --ks-ref-color-primary-500: #009995 !important;
+  --ks-ref-color-primary-550: #00a5a0 !important;
+  --ks-ref-color-primary-650: #31bdb8 !important;
+  --ks-ref-color-primary-750: #6fd5d1 !important;
+  --ks-ref-color-primary-850: #9ee1dd !important;
+  --ks-ref-color-primary-900: #c3e9e7 !important;
+  --ks-ref-color-primary-950: #d7f2f0 !important;
+  --ks-ref-color-primary-975: #e8fbf9 !important;
+  --ks-ref-color-primary-995: #f2fdfc !important;
+  --ks-ref-color-primary-1000: white !important;
+  --ks-ref-color-support-150: #15142b !important;
+  --ks-ref-color-support-200: #221f4b !important;
+  --ks-ref-color-support-250: #2e286a !important;
+  --ks-ref-color-support-300: #3a3086 !important;
+  --ks-ref-color-support-350: #473aa5 !important;
+  --ks-ref-color-support-400: #5548bd !important;
+  --ks-ref-color-support-450: #665cd6 !important;
+  --ks-ref-color-support-500: #8078f6 !important;
+  --ks-ref-color-support-550: #8987f6 !important;
+  --ks-ref-color-support-650: #a1a1fa !important;
+  --ks-ref-color-support-750: #babdff !important;
+  --ks-ref-color-support-850: #cdcfff !important;
+  --ks-ref-color-support-900: #dcdeff !important;
+  --ks-ref-color-support-950: #e9ebff !important;
+  --ks-ref-color-support-975: #f5f4ff !important;
+  --ks-ref-color-support-995: #fbfaff !important;
+  --ks-ref-color-support-1000: white !important;
+  --ks-ref-color-neutral-150: #121415 !important;
+  --ks-ref-color-neutral-200: #262627 !important;
+  --ks-ref-color-neutral-250: #343435 !important;
+  --ks-ref-color-neutral-300: #404142 !important;
+  --ks-ref-color-neutral-350: #4f5051 !important;
+  --ks-ref-color-neutral-400: #5e5f61 !important;
+  --ks-ref-color-neutral-450: #6d6e70 !important;
+  --ks-ref-color-neutral-500: #87898b !important;
+  --ks-ref-color-neutral-550: #929496 !important;
+  --ks-ref-color-neutral-650: #a9abac !important;
+  --ks-ref-color-neutral-750: #c3c4c5 !important;
+  --ks-ref-color-neutral-850: #d3d4d5 !important;
+  --ks-ref-color-neutral-900: #e1e1e2 !important;
+  --ks-ref-color-neutral-950: #ececed !important;
+  --ks-ref-color-neutral-975: #f2f3f3 !important;
+  --ks-ref-color-neutral-995: #f8f8f9 !important;
+  --ks-ref-color-neutral-1000: white !important;
+  --ks-ref-color-error-150: #2b0e07 !important;
+  --ks-ref-color-error-200: #4e0c0b !important;
+  --ks-ref-color-error-250: #680e13 !important;
+  --ks-ref-color-error-300: #801118 !important;
+  --ks-ref-color-error-350: #9b1720 !important;
+  --ks-ref-color-error-400: #b51d27 !important;
+  --ks-ref-color-error-450: #ca242e !important;
+  --ks-ref-color-error-500: #ef504b !important;
+  --ks-ref-color-error-550: #f4655b !important;
+  --ks-ref-color-error-650: #f78a7e !important;
+  --ks-ref-color-error-750: #ffafa3 !important;
+  --ks-ref-color-error-850: #ffc6bd !important;
+  --ks-ref-color-error-900: #ffd8d2 !important;
+  --ks-ref-color-error-950: #ffe7e3 !important;
+  --ks-ref-color-error-975: #fff2f0 !important;
+  --ks-ref-color-error-995: #fff9f8 !important;
+  --ks-ref-color-error-1000: white !important;
+  --ks-ref-color-warning-150: #201507 !important;
+  --ks-ref-color-warning-200: #342209 !important;
+  --ks-ref-color-warning-250: #462f08 !important;
+  --ks-ref-color-warning-300: #573b09 !important;
+  --ks-ref-color-warning-350: #68490b !important;
+  --ks-ref-color-warning-400: #7a580e !important;
+  --ks-ref-color-warning-450: #8d670b !important;
+  --ks-ref-color-warning-500: #ad821a !important;
+  --ks-ref-color-warning-550: #ba8b04 !important;
+  --ks-ref-color-warning-650: #d2a106 !important;
+  --ks-ref-color-warning-750: #f0c133 !important;
+  --ks-ref-color-warning-850: #fad253 !important;
+  --ks-ref-color-warning-900: #fbde89 !important;
+  --ks-ref-color-warning-950: #fbebbc !important;
+  --ks-ref-color-warning-975: #fdf5da !important;
+  --ks-ref-color-warning-995: #fffbec !important;
+  --ks-ref-color-warning-1000: white !important;
+  --ks-ref-color-success-150: #051c06 !important;
+  --ks-ref-color-success-200: #052d0f !important;
+  --ks-ref-color-success-250: #033d15 !important;
+  --ks-ref-color-success-300: #034c1c !important;
+  --ks-ref-color-success-350: #035d23 !important;
+  --ks-ref-color-success-400: #056e2b !important;
+  --ks-ref-color-success-450: #057e33 !important;
+  --ks-ref-color-success-500: #2a9c49 !important;
+  --ks-ref-color-success-550: #35a752 !important;
+  --ks-ref-color-success-650: #55bd69 !important;
+  --ks-ref-color-success-750: #7ad889 !important;
+  --ks-ref-color-success-850: #99e4a2 !important;
+  --ks-ref-color-success-900: #baecbf !important;
+  --ks-ref-color-success-950: #ddf9df !important;
+  --ks-ref-color-success-975: #e7fde8 !important;
+  --ks-ref-color-success-995: #effff0 !important;
+  --ks-ref-color-success-1000: white !important;
+  --ks-ref-color-indigo-150: #0F162D !important;
+  --ks-ref-color-indigo-200: #1C2541 !important;
+  --ks-ref-color-indigo-250: #263157 !important;
+  --ks-ref-color-indigo-300: #2F3D6F !important;
+  --ks-ref-color-indigo-350: #37498D !important;
+  --ks-ref-color-indigo-400: #4156A8 !important;
+  --ks-ref-color-indigo-450: #4D65C3 !important;
+  --ks-ref-color-indigo-500: #6480E6 !important;
+  --ks-ref-color-indigo-550: #728DEC !important;
+  --ks-ref-color-indigo-650: #95AEFE !important;
+  --ks-ref-color-indigo-750: #AAC4FC !important;
+  --ks-ref-color-indigo-850: #C2D5FB !important;
+  --ks-ref-color-indigo-900: #D6E2FA !important;
+  --ks-ref-color-indigo-950: #E3EEFF !important;
+  --ks-ref-color-indigo-975: #F0F6FF !important;
+  --ks-ref-color-indigo-995: #F8FBFF !important;
+  --ks-ref-color-blue-150: #001A2B !important;
+  --ks-ref-color-blue-200: #012B3E !important;
+  --ks-ref-color-blue-250: #003953 !important;
+  --ks-ref-color-blue-300: #044765 !important;
+  --ks-ref-color-blue-350: #00577D !important;
+  --ks-ref-color-blue-400: #006697 !important;
+  --ks-ref-color-blue-450: #0074A6 !important;
+  --ks-ref-color-blue-500: #2D94C8 !important;
+  --ks-ref-color-blue-550: #3D9FD4 !important;
+  --ks-ref-color-blue-650: #7CC0ED !important;
+  --ks-ref-color-blue-750: #98CCF0 !important;
+  --ks-ref-color-blue-850: #B0DBFA !important;
+  --ks-ref-color-blue-900: #CAE6FC !important;
+  --ks-ref-color-blue-950: #E3F3FF !important;
+  --ks-ref-color-blue-975: #EDF7FE !important;
+  --ks-ref-color-blue-995: #F7FBFF !important;
+  --ks-ref-color-pink-150: #20111F !important;
+  --ks-ref-color-pink-200: #331E31 !important;
+  --ks-ref-color-pink-250: #442942 !important;
+  --ks-ref-color-pink-300: #533451 !important;
+  --ks-ref-color-pink-350: #664163 !important;
+  --ks-ref-color-pink-400: #784D75 !important;
+  --ks-ref-color-pink-450: #8B5A88 !important;
+  --ks-ref-color-pink-500: #AA72A7 !important;
+  --ks-ref-color-pink-550: #B87BB4 !important;
+  --ks-ref-color-pink-650: #D19DCD !important;
+  --ks-ref-color-pink-750: #DAB6D7 !important;
+  --ks-ref-color-pink-850: #E3CBE1 !important;
+  --ks-ref-color-pink-900: #EBDCE9 !important;
+  --ks-ref-color-pink-950: #F2EAF1 !important;
+  --ks-ref-color-pink-975: #F7F4F7 !important;
+  --ks-ref-color-pink-995: #FCFAFB !important;
+  --ks-ref-color-orange-150: #280F03 !important;
+  --ks-ref-color-orange-200: #3B1E0E !important;
+  --ks-ref-color-orange-250: #4F2913 !important;
+  --ks-ref-color-orange-300: #623216 !important;
+  --ks-ref-color-orange-350: #773E1D !important;
+  --ks-ref-color-orange-400: #8D4921 !important;
+  --ks-ref-color-orange-450: #A45626 !important;
+  --ks-ref-color-orange-500: #C86D37 !important;
+  --ks-ref-color-orange-550: #D7763E !important;
+  --ks-ref-color-orange-650: #F69C6B !important;
+  --ks-ref-color-orange-750: #F6B28E !important;
+  --ks-ref-color-orange-850: #F7C9B1 !important;
+  --ks-ref-color-orange-900: #F8DBCC !important;
+  --ks-ref-color-orange-950: #F9E9E1 !important;
+  --ks-ref-color-orange-975: #FBF3EF !important;
+  --ks-ref-color-orange-995: #FDFAF8 !important;
+  --ks-transition-easing-standardIn: cubic-bezier(0.32, 0, 0.67, 0) !important;
+  --ks-transition-easing-standardOut: cubic-bezier(0.33, 1, 0.68, 1) !important;
+  --ks-transition-easing-standardInOut: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  --ks-spacing-0: 0 !important;
+  --ks-spacing-50: 2px !important;
+  --ks-spacing-100: 4px !important;
+  --ks-spacing-150: 6px !important;
+  --ks-spacing-200: 8px !important;
+  --ks-spacing-250: 10px !important;
+  --ks-spacing-300: 12px !important;
+  --ks-spacing-400: 16px !important;
+  --ks-spacing-500: 20px !important;
+  --ks-spacing-600: 24px !important;
+  --ks-spacing-700: 28px !important;
+  --ks-spacing-800: 32px !important;
+  --ks-spacing-900: 36px !important;
+  --ks-spacing-1000: 40px !important;
+  --ks-spacing-1200: 48px !important;
+  --ks-spacing-1400: 56px !important;
+  --ks-spacing-1600: 64px !important;
+  --ks-spacing-1800: 72px !important;
+  --ks-spacing-2000: 80px !important;
+  --ks-spacing-2200: 88px !important;
+  --ks-spacing-2400: 96px !important;
+  --ks-border-radius-sm: 2px !important;
+  --ks-border-radius-md: 4px !important;
+  --ks-border-radius-lg: 6px !important;
+  --ks-border-radius-xl: 8px !important;
+  --ks-border-radius-full: 9999px !important;
+  --ks-border-radius-innerMd: 3px !important;
+  --ks-elevation-shadow-level1: 0 2px 8px 0 rgba(0, 0, 0, 0.12) !important;
+  --ks-elevation-shadow-level2: 0 0 12px 0 rgba(0, 0, 0, 0.12) !important;
+  --ks-elevation-shadow-level3: 0 8px 20px 0 rgba(0, 0, 0, 0.12) !important;
+  --ks-elevation-shadow-level4: 0 8px 28px 0 rgba(0, 0, 0, 0.12) !important;
+  --ks-text-headlineLg-fontSize: 32px !important;
+  --ks-text-headlineLg-lineHeight: 40px !important;
+  --ks-text-headlineLg-fontWeight: 500 !important;
+  --ks-text-headlineLg-letterSpacing: 0 !important;
+  --ks-text-headlineLg-fontFamily: var(--ks-ref-text-fontFamily-display) !important;
+  --ks-text-headlineMd-fontSize: 24px !important;
+  --ks-text-headlineMd-lineHeight: 32px !important;
+  --ks-text-headlineMd-fontWeight: 500 !important;
+  --ks-text-headlineMd-letterSpacing: 0.24px !important;
+  --ks-text-headlineMd-fontFamily: var(--ks-ref-text-fontFamily-display) !important;
+  --ks-text-headlineSm-fontSize: 20px !important;
+  --ks-text-headlineSm-lineHeight: 28px !important;
+  --ks-text-headlineSm-fontWeight: 500 !important;
+  --ks-text-headlineSm-letterSpacing: 0.3px !important;
+  --ks-text-headlineSm-fontFamily: var(--ks-ref-text-fontFamily-display) !important;
+  --ks-text-titleLg-fontSize: 18px !important;
+  --ks-text-titleLg-lineHeight: 26px !important;
+  --ks-text-titleLg-fontWeight: 500 !important;
+  --ks-text-titleLg-letterSpacing: 0.03px !important;
+  --ks-text-titleLg-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-text-titleMd-fontSize: 16px !important;
+  --ks-text-titleMd-lineHeight: 24px !important;
+  --ks-text-titleMd-fontWeight: 500 !important;
+  --ks-text-titleMd-letterSpacing: 0.03px !important;
+  --ks-text-titleMd-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-text-titleSm-fontSize: 14px !important;
+  --ks-text-titleSm-lineHeight: 20px !important;
+  --ks-text-titleSm-fontWeight: 500 !important;
+  --ks-text-titleSm-letterSpacing: 0.09px !important;
+  --ks-text-titleSm-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-text-bodyLg-fontSize: 18px !important;
+  --ks-text-bodyLg-lineHeight: 26px !important;
+  --ks-text-bodyLg-fontWeight: 400 !important;
+  --ks-text-bodyLg-letterSpacing: 0.03px !important;
+  --ks-text-bodyLg-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-text-bodyMd-fontSize: 16px !important;
+  --ks-text-bodyMd-lineHeight: 24px !important;
+  --ks-text-bodyMd-fontWeight: 400 !important;
+  --ks-text-bodyMd-letterSpacing: 0.03px !important;
+  --ks-text-bodyMd-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-text-bodySm-fontSize: 14px !important;
+  --ks-text-bodySm-lineHeight: 20px !important;
+  --ks-text-bodySm-fontWeight: 400 !important;
+  --ks-text-bodySm-letterSpacing: 0.09px !important;
+  --ks-text-bodySm-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-text-labelLg-fontSize: 14px !important;
+  --ks-text-labelLg-lineHeight: 20px !important;
+  --ks-text-labelLg-fontWeight: 500 !important;
+  --ks-text-labelLg-letterSpacing: 0.09px !important;
+  --ks-text-labelLg-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-text-labelMd-fontSize: 12px !important;
+  --ks-text-labelMd-lineHeight: 16px !important;
+  --ks-text-labelMd-fontWeight: 500 !important;
+  --ks-text-labelMd-letterSpacing: 0.16px !important;
+  --ks-text-labelMd-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-text-labelSm-fontSize: 12px !important;
+  --ks-text-labelSm-lineHeight: 16px !important;
+  --ks-text-labelSm-fontWeight: 400 !important;
+  --ks-text-labelSm-letterSpacing: 0.16px !important;
+  --ks-text-labelSm-fontFamily: var(--ks-ref-text-fontFamily-text) !important;
+  --ks-color-primary-fill: #009995 !important;
+  --ks-color-primary-fillHover: #008581 !important;
+  --ks-color-primary-fillActive: #007875 !important;
+  --ks-color-primary-fillDisabled: #c3e9e7 !important;
+  --ks-color-primary-onFill: white !important;
+  --ks-color-primary-fillLow: #9ee1dd !important;
+  --ks-color-primary-onFillLow: #002c2b !important;
+  --ks-color-primary-onFillDisabled: white !important;
+  --ks-color-primary-surface: white !important;
+  --ks-color-primary-surface1: #f2fdfc !important;
+  --ks-color-primary-surface1Hover: #e5efee !important;
+  --ks-color-primary-surface1Active: #dee9e8 !important;
+  --ks-color-primary-surface2: #e8fbf9 !important;
+  --ks-color-primary-surface2Hover: #dbedec !important;
+  --ks-color-primary-surface2Active: #d4e7e5 !important;
+  --ks-color-primary-surface2Disabled: #e8fbf9 !important;
+  --ks-color-primary-surface3: #d7f2f0 !important;
+  --ks-color-primary-onSurface: #017976 !important;
+  --ks-color-primary-onSurfaceHover: #006663 !important;
+  --ks-color-primary-onSurfaceActive: #005a57 !important;
+  --ks-color-primary-onSurfaceDisabled: #a9abac !important;
+  --ks-color-primary-transparentFill: #01797600 !important;
+  --ks-color-primary-transparentFillHover: #00666312 !important;
+  --ks-color-primary-transparentFillActive: #005a5724 !important;
+  --ks-color-primary-transparentFillDisabled: #01797600 !important;
+  --ks-color-support-fill: #8078f6 !important;
+  --ks-color-support-fillLow: #cdcfff !important;
+  --ks-color-support-fillHover: #6f65e1 !important;
+  --ks-color-support-fillActive: #6459d4 !important;
+  --ks-color-support-fillDisabled: #dcdeff !important;
+  --ks-color-support-onFill: white !important;
+  --ks-color-support-onFillLow: #221f4b !important;
+  --ks-color-support-onFillDisabled: white !important;
+  --ks-color-support-surface: white !important;
+  --ks-color-support-surface1: #fbfaff !important;
+  --ks-color-support-surface2: #f5f4ff !important;
+  --ks-color-support-surface2Hover: #e7e6f2 !important;
+  --ks-color-support-surface2Active: #e1e0eb !important;
+  --ks-color-support-surface3: #e9ebff !important;
+  --ks-color-support-onSurface: #665cd6 !important;
+  --ks-color-support-onSurfaceHover: #5749c2 !important;
+  --ks-color-support-onSurfaceActive: #4d3cb5 !important;
+  --ks-color-support-onSurfaceDisabled: #a1a1fa !important;
+  --ks-color-neutral-fill: #87898b !important;
+  --ks-color-neutral-fillHover: #767779 !important;
+  --ks-color-neutral-fillActive: #6a6c6e !important;
+  --ks-color-neutral-fillDisabled: #e1e1e2 !important;
+  --ks-color-neutral-onFill: white !important;
+  --ks-color-neutral-onFillDisabled: white !important;
+  --ks-color-neutral-fillHigh: #262627 !important;
+  --ks-color-neutral-fillHighHover: #353536 !important;
+  --ks-color-neutral-fillHighActive: #3f4041 !important;
+  --ks-color-neutral-fillHighDisabled: var(--ks-color-neutral-fillDisabled) !important;
+  --ks-color-neutral-fillMedHigh: #404142 !important;
+  --ks-color-neutral-fillMedHighHover: #505152 !important;
+  --ks-color-neutral-fillMedHighActive: #5b5c5d !important;
+  --ks-color-neutral-fillMedHighDisabled: var(--ks-color-neutral-fillDisabled) !important;
+  --ks-color-neutral-fillLow: #d3d4d5 !important;
+  --ks-color-neutral-fillLowHover: #c0c1c1 !important;
+  --ks-color-neutral-fillLowActive: #b3b4b5 !important;
+  --ks-color-neutral-fillLowDisabled: var(--ks-color-neutral-fillDisabled) !important;
+  --ks-color-neutral-fillLowInverse: #ececed !important;
+  --ks-color-neutral-fillLowInverseHover: #f2f3f3 !important;
+  --ks-color-neutral-fillLowInverseActive: #f8f8f9 !important;
+  --ks-color-neutral-onFillLow: #262627 !important;
+  --ks-color-neutral-surface: white !important;
+  --ks-color-neutral-surfaceHover: #f1f2f2 !important;
+  --ks-color-neutral-surfaceActive: #ebebeb !important;
+  --ks-color-neutral-surface1: #f8f8f9 !important;
+  --ks-color-neutral-surface1Hover: #ebebeb !important;
+  --ks-color-neutral-surface1Active: #e4e4e5 !important;
+  --ks-color-neutral-surface2: #f2f3f3 !important;
+  --ks-color-neutral-surface2Hover: #e5e5e6 !important;
+  --ks-color-neutral-surface2Active: #dfdfdf !important;
+  --ks-color-neutral-surface2Disabled: #f8f8f9 !important;
+  --ks-color-neutral-surface3: #ececed !important;
+  --ks-color-neutral-surface3Hover: #dfdfe0 !important;
+  --ks-color-neutral-surface3Active: #d8d9d9 !important;
+  --ks-color-neutral-surface3Disabled: #f8f8f9 !important;
+  --ks-color-neutral-onSurface: #6d6e70 !important;
+  --ks-color-neutral-onSurfaceHover: #5c5d5f !important;
+  --ks-color-neutral-onSurfaceActive: #515254 !important;
+  --ks-color-neutral-onSurfaceDisabled: #a9abac !important;
+  --ks-color-neutral-highOnSurface: #121415 !important;
+  --ks-color-neutral-highOnSurfaceHover: #242728 !important;
+  --ks-color-neutral-highOnSurfaceActive: #2e3132 !important;
+  --ks-color-neutral-highOnSurfaceDisabled: var(--ks-color-neutral-onSurfaceDisabled) !important;
+  --ks-color-neutral-lowOnSurface: #87898B !important;
+  --ks-color-neutral-lowOnSurfaceHover: #757779 !important;
+  --ks-color-neutral-lowOnSurfaceActive: 6A6C6E !important;
+  --ks-color-neutral-lowOnSurfaceDisabled: var(--ks-color-neutral-onSurfaceDisabled) !important;
+  --ks-color-neutral-overlay: #26262780 !important;
+  --ks-color-neutral-overlayHigh: #262627b3 !important;
+  --ks-color-neutral-overlayHighDisabled: #e1e1e2 !important;
+  --ks-color-neutral-overlayLow: #26262726 !important;
+  --ks-color-neutral-overlayLowDisabled: #12141512 !important;
+  --ks-color-neutral-transparentFill: #12141500 !important;
+  --ks-color-neutral-transparentFillHover: #12141512 !important;
+  --ks-color-neutral-transparentFillActive: #12141524 !important;
+  --ks-color-neutral-transparentFillDisabled: #12141500 !important;
+  --ks-color-error-fill: #ef504b !important;
+  --ks-color-error-fillHover: #da3a39 !important;
+  --ks-color-error-fillActive: #cb2a2d !important;
+  --ks-color-error-fillDisabled: #ffd8d2 !important;
+  --ks-color-error-fillMedHigh: #ca242e !important;
+  --ks-color-error-fillMedHighHover: #b3001c !important;
+  --ks-color-error-fillMedHighActive: #9f0018 !important;
+  --ks-color-error-onFill: white !important;
+  --ks-color-error-fillLow: #ffc6bd !important;
+  --ks-color-error-onFillLow: #4e0c0b !important;
+  --ks-color-error-surface: white !important;
+  --ks-color-error-surface1: #fff9f8 !important;
+  --ks-color-error-surface2: #fff2f0 !important;
+  --ks-color-error-surface2Hover: #f2e5e2 !important;
+  --ks-color-error-surface2Active: #ebdedc !important;
+  --ks-color-error-surface3: #ffe7e3 !important;
+  --ks-color-error-onSurface: #ca242e !important;
+  --ks-color-error-onSurfaceHover: #b3001c !important;
+  --ks-color-error-onSurfaceActive: #9f0018 !important;
+  --ks-color-warning-fill: #d2a106 !important;
+  --ks-color-warning-fillHover: #bc8f00 !important;
+  --ks-color-warning-fillActive: #ad8400 !important;
+  --ks-color-warning-fillDisabled: #fbde89 !important;
+  --ks-color-warning-onFill: white !important;
+  --ks-color-warning-fillLow: #fad253 !important;
+  --ks-color-warning-onFillLow: #201507 !important;
+  --ks-color-warning-surface: white !important;
+  --ks-color-warning-surface1: #fffbec !important;
+  --ks-color-warning-surface2: #fdf5da !important;
+  --ks-color-warning-surface2Hover: #f0e7cd !important;
+  --ks-color-warning-surface2Active: #e9e1c7 !important;
+  --ks-color-warning-surface3: #fbebbc !important;
+  --ks-color-warning-onSurface: #8d670b !important;
+  --ks-color-warning-onSurfaceHover: #785600 !important;
+  --ks-color-warning-onSurfaceActive: #6a4c00 !important;
+  --ks-color-success-fill: #2a9c49 !important;
+  --ks-color-success-onFill: white !important;
+  --ks-color-success-fillHover: #068a37 !important;
+  --ks-color-success-fillActive: #007c30 !important;
+  --ks-color-success-fillDisabled: #baecbf !important;
+  --ks-color-success-fillLow: #99e4a2 !important;
+  --ks-color-success-onFillLow: #052d0f !important;
+  --ks-color-success-surface: white !important;
+  --ks-color-success-surface1: #effff0 !important;
+  --ks-color-success-surface2: #e7fde8 !important;
+  --ks-color-success-surface2Hover: #daf0db !important;
+  --ks-color-success-surface2Active: #d3e9d5 !important;
+  --ks-color-success-surface3: #ddf9df !important;
+  --ks-color-success-onSurface: #057e33 !important;
+  --ks-color-success-onSurfaceHover: #006b29 !important;
+  --ks-color-success-onSurfaceActive: #005e23 !important;
+  --ks-color-data-data1-fill: #8987f6 !important;
+  --ks-color-data-data1-fillDisabled: #dcdeff !important;
+  --ks-color-data-data1-fillHigh: #665cd6 !important;
+  --ks-color-data-data1-surface: #a1a1fa33 !important;
+  --ks-color-data-data1-surfaceDisabled: #a1a1fa0d !important;
+  --ks-color-data-data2-fill: #00577D !important;
+  --ks-color-data-data2-fillDisabled: #CAE6FC !important;
+  --ks-color-data-data2-surface: #7cc0ed33 !important;
+  --ks-color-data-data2-surfaceDisabled: #7cc0ed0d !important;
+  --ks-color-data-data3-fill: #E3CBE1 !important;
+  --ks-color-data-data3-fillDisabled: #EBDCE9 !important;
+  --ks-color-data-data3-fillMedHigh: #B87BB4 !important;
+  --ks-color-data-data3-fillMedHighDisabled: #EBDCE9 !important;
+  --ks-color-data-data3-fillHigh: #442942 !important;
+  --ks-color-data-data3-surface: #d19dcd33 !important;
+  --ks-color-data-data3-surfaceDisabled: #d19dcd0d !important;
+  --ks-color-data-data4-fill: #A45626 !important;
+  --ks-color-data-data4-fillDisabled: #F8DBCC !important;
+  --ks-color-data-data4-fillHigh: #623216 !important;
+  --ks-color-data-data4-surface: #f69c6b33 !important;
+  --ks-color-data-data4-surfaceDisabled: #f69c6b0d !important;
+  --ks-color-data-data5-fill: #98CCF0 !important;
+  --ks-color-data-data5-fillDisabled: #CAE6FC !important;
+  --ks-color-data-data5-fillMedHigh: #3D9FD4 !important;
+  --ks-color-data-data5-fillMedHighDisabled: #CAE6FC !important;
+  --ks-color-data-data5-fillHigh: #0074A6 !important;
+  --ks-color-data-data5-surface: #b0dbfa33 !important;
+  --ks-color-data-data5-surfaceDisabled: #b0dbfa0d !important;
+  --ks-color-data-data6-fill: #5548bd !important;
+  --ks-color-data-data6-fillDisabled: #5548bd40 !important;
+  --ks-color-data-data6-fillHigh: #473aa5 !important;
+  --ks-color-data-data6-surface: #cdcfff33 !important;
+  --ks-color-data-data6-surfaceDisabled: #cdcfff0d !important;
+  --ks-color-data-data7-fill: #F8DBCC !important;
+  --ks-color-data-data7-fillDisabled: #f8dbcc40 !important;
+  --ks-color-data-data7-fillMedHigh: #D7763E !important;
+  --ks-color-data-data7-fillMedHighDisabled: #d7763e40 !important;
+  --ks-color-data-data7-fillHigh: #A45626 !important;
+  --ks-color-data-data7-surface: #f7c9b133 !important;
+  --ks-color-data-data7-surfaceDisabled: #f7c9b10d !important;
+  --ks-color-data-data8-fill: #664163 !important;
+  --ks-color-data-data8-fillDisabled: #66416340 !important;
+  --ks-color-data-data8-fillHigh: #533451 !important;
+  --ks-color-data-data8-surface: #e3cbe133 !important;
+  --ks-color-data-data8-surfaceDisabled: #e3cbe10d !important;
+  --ks-color-data-data9-fill: #babdff !important;
+  --ks-color-data-data9-fillDisabled: #babdff40 !important;
+  --ks-color-data-data9-fillMedHigh: #3a3086 !important;
+  --ks-color-data-data9-fillMedHighDisabled: #3a308640 !important;
+  --ks-color-data-data9-fillHigh: #221f4b !important;
+  --ks-color-data-data9-surface: #8987f633 !important;
+  --ks-color-data-data9-surfaceDisabled: #8987f60d !important;
+  --ks-color-data-data9-onSurface: #8987f6 !important;
+  --ks-color-data-success-fill: #2a9c49 !important;
+  --ks-color-data-success-fillHigh: #035d23 !important;
+  --ks-color-data-success-fillDisabled: #2a9c4940 !important;
+  --ks-color-data-success-surface: #55bd6933 !important;
+  --ks-color-data-success-surfaceDisabled: #55bd690d !important;
+  --ks-color-data-warning-fill: #f0c133 !important;
+  --ks-color-data-warning-fillDisabled: #f0c13340 !important;
+  --ks-color-data-warning-fillMedHigh: #ba8b04 !important;
+  --ks-color-data-warning-fillMedHighDisabled: #ba8b0440 !important;
+  --ks-color-data-warning-surface: #fad25333 !important;
+  --ks-color-data-warning-surfaceDisabled: #fad2530d !important;
+  --ks-color-data-error-fill: #f78a7e !important;
+  --ks-color-data-error-fillDisabled: #f78a7e40 !important;
+  --ks-color-data-error-fillMedHigh: #f4655b !important;
+  --ks-color-data-error-fillMedHighDisabled: #f4655b40 !important;
+  --ks-color-data-error-surface: #f78a7e33 !important;
+  --ks-color-data-error-surfaceDisabled: #f78a7e0d !important;
+  --ks-color-data-neutral-fill: #728DEC !important;
+  --ks-color-data-neutral-fillDisabled: #728dec40 !important;
+  --ks-color-data-neutral-fillMedHigh: #5e5f61 !important;
+  --ks-color-data-neutral-fillMedHighDisabled: #5e5f6140 !important;
+  --ks-color-data-neutral-surface: #a9abac33 !important;
+  --ks-color-data-neutral-surfaceDisabled: #a9abac0d !important;
+  --ks-color-ai-fill: linear-gradient(90deg, #31bdb8 0%, #95AEFE 93.64%, #a1a1fa 186.35%) !important;
+}
+    html[data-theme="dark"] {
+  --ks-color-primary-fill: #31bdb8 !important;
+  --ks-color-primary-fillHover: #4bd0cb !important;
+  --ks-color-primary-fillActive: #5bddd8 !important;
+  --ks-color-primary-fillDisabled: #0E2F2F !important;
+  --ks-color-primary-onFill: #004a48 !important;
+  --ks-color-primary-fillLow: #009995 !important;
+  --ks-color-primary-onFillLow: #d7f2f0 !important;
+  --ks-color-primary-onFillDisabled: #017976 !important;
+  --ks-color-primary-surface: #001c1b !important;
+  --ks-color-primary-surface1: #002c2b !important;
+  --ks-color-primary-surface1Hover: #0c3635 !important;
+  --ks-color-primary-surface1Active: #123c3a !important;
+  --ks-color-primary-surface2: #003b3a !important;
+  --ks-color-primary-surface2Hover: #0f4644 !important;
+  --ks-color-primary-surface2Active: #164c49 !important;
+  --ks-color-primary-surface2Disabled: #054645 !important;
+  --ks-color-primary-surface3: #004a48 !important;
+  --ks-color-primary-onSurface: #6fd5d1 !important;
+  --ks-color-primary-onSurfaceHover: #83e9e4 !important;
+  --ks-color-primary-onSurfaceActive: #91f7f2 !important;
+  --ks-color-primary-onSurfaceDisabled: #006b68 !important;
+  --ks-color-primary-transparentFill: #01797600 !important;
+  --ks-color-primary-transparentFillHover: #268b8812 !important;
+  --ks-color-primary-transparentFillActive: #36989424 !important;
+  --ks-color-primary-transparentFillDisabled: #01797600 !important;
+  --ks-color-support-fill: #a1a1fa !important;
+  --ks-color-support-fillLow: #5548bd !important;
+  --ks-color-support-fillHover: #b5b7ff !important;
+  --ks-color-support-fillActive: #c4c6ff !important;
+  --ks-color-support-fillDisabled: #8078f6 !important;
+  --ks-color-support-onFill: white !important;
+  --ks-color-support-onFillLow: #e9ebff !important;
+  --ks-color-support-onFillDisabled: white !important;
+  --ks-color-support-surface: #15142b !important;
+  --ks-color-support-surface1: #2e286a !important;
+  --ks-color-support-surface2: #3a3086 !important;
+  --ks-color-support-surface2Hover: #443c93 !important;
+  --ks-color-support-surface2Active: #494299 !important;
+  --ks-color-support-surface3: #473aa5 !important;
+  --ks-color-support-onSurface: #babdff !important;
+  --ks-color-support-onSurfaceHover: #d0d3ff !important;
+  --ks-color-support-onSurfaceActive: #e0e2ff !important;
+  --ks-color-support-onSurfaceDisabled: #a1a1fa !important;
+  --ks-color-neutral-fill: #6d6e70 !important;
+  --ks-color-neutral-fillHover: #7e8082 !important;
+  --ks-color-neutral-fillActive: #8a8c8e !important;
+  --ks-color-neutral-fillDisabled: #4f5051 !important;
+  --ks-color-neutral-onFill: #121415 !important;
+  --ks-color-neutral-onFillDisabled: white !important;
+  --ks-color-neutral-fillHigh: #e1e1e2 !important;
+  --ks-color-neutral-fillHighHover: #cdcece !important;
+  --ks-color-neutral-fillHighActive: #c0c1c1 !important;
+  --ks-color-neutral-fillHighDisabled: var(--ks-color-neutral-fillDisabled) !important;
+  --ks-color-neutral-fillMedHigh: #c3c4c5 !important;
+  --ks-color-neutral-fillMedHighHover: #b0b1b2 !important;
+  --ks-color-neutral-fillMedHighActive: #a4a4a6 !important;
+  --ks-color-neutral-fillMedHighDisabled: var(--ks-color-neutral-fillDisabled) !important;
+  --ks-color-neutral-fillLow: #343435 !important;
+  --ks-color-neutral-fillLowHover: #434444 !important;
+  --ks-color-neutral-fillLowActive: #4e4e4f !important;
+  --ks-color-neutral-fillLowDisabled: #343435 !important;
+  --ks-color-neutral-fillLowInverse: #262627 !important;
+  --ks-color-neutral-fillLowInverseHover: #6F7072 !important;
+  --ks-color-neutral-fillLowInverseActive: #7B7C7E !important;
+  --ks-color-neutral-onFillLow: #ececed !important;
+  --ks-color-neutral-surface: #121415 !important;
+  --ks-color-neutral-surfaceHover: #343435 !important;
+  --ks-color-neutral-surfaceActive: #202223 !important;
+  --ks-color-neutral-surface1: #262627 !important;
+  --ks-color-neutral-surface1Hover: #2f3031 !important;
+  --ks-color-neutral-surface1Active: #353536 !important;
+  --ks-color-neutral-surface2: #343435 !important;
+  --ks-color-neutral-surface2Hover: #3e3e3f !important;
+  --ks-color-neutral-surface2Active: #434444 !important;
+  --ks-color-neutral-surface2Disabled: #404142 !important;
+  --ks-color-neutral-surface3: #404142 !important;
+  --ks-color-neutral-surface3Hover: #4b4c4c !important;
+  --ks-color-neutral-surface3Active: #505152 !important;
+  --ks-color-neutral-surface3Disabled: #404142 !important;
+  --ks-color-neutral-onSurface: #a9abac !important;
+  --ks-color-neutral-onSurfaceHover: #bcbebf !important;
+  --ks-color-neutral-onSurfaceActive: #c9cbcc !important;
+  --ks-color-neutral-onSurfaceDisabled: #404142 !important;
+  --ks-color-neutral-highOnSurface: #ececed !important;
+  --ks-color-neutral-highOnSurfaceHover: #d2d2d3 !important;
+  --ks-color-neutral-highOnSurfaceActive: #c5c5c6 !important;
+  --ks-color-neutral-highOnSurfaceDisabled: #4f5051 !important;
+  --ks-color-neutral-lowOnSurface: #87898b !important;
+  --ks-color-neutral-lowOnSurfaceHover: #757779 !important;
+  --ks-color-neutral-lowOnSurfaceActive: #6A6C6E !important;
+  --ks-color-neutral-lowOnSurfaceDisabled: #a9abac !important;
+  --ks-color-neutral-overlay: #E7E7E780 !important;
+  --ks-color-neutral-overlayHigh: #F4F4F4b2 !important;
+  --ks-color-neutral-overlayHighDisabled: #343435 !important;
+  --ks-color-neutral-overlayLow: #E7E7E726 !important;
+  --ks-color-neutral-overlayLowDisabled: #EFEFEF11 !important;
+  --ks-color-neutral-transparentFill: #12141500 !important;
+  --ks-color-neutral-transparentFillHover: #12141512 !important;
+  --ks-color-neutral-transparentFillActive: #12141524 !important;
+  --ks-color-neutral-transparentFillDisabled: #12141500 !important;
+  --ks-color-error-fill: #ef504b !important;
+  --ks-color-error-fillHover: #ff6b63 !important;
+  --ks-color-error-fillActive: #ff857b !important;
+  --ks-color-error-fillDisabled: #ffd8d2 !important;
+  --ks-color-error-fillMedHigh: #ca242e !important;
+  --ks-color-error-fillMedHighHover: #df3d40 !important;
+  --ks-color-error-fillMedHighActive: #ee4c4b !important;
+  --ks-color-error-onFill: white !important;
+  --ks-color-error-fillLow: #b51d27 !important;
+  --ks-color-error-onFillLow: #ffd8d2 !important;
+  --ks-color-error-surface: white !important;
+  --ks-color-error-surface1: #801118 !important;
+  --ks-color-error-surface2: #4e0c0b !important;
+  --ks-color-error-surface2Hover: #5a1815 !important;
+  --ks-color-error-surface2Active: #601e1a !important;
+  --ks-color-error-surface3: #2b0e07 !important;
+  --ks-color-error-onSurface: #f78a7e !important;
+  --ks-color-error-onSurfaceHover: #ffa69a !important;
+  --ks-color-error-onSurfaceActive: #ffbab0 !important;
+  --ks-color-warning-fill: #f0c133 !important;
+  --ks-color-warning-fillHover: #ffd667 !important;
+  --ks-color-warning-fillActive: #ffe6a5 !important;
+  --ks-color-warning-fillDisabled: #fbde89 !important;
+  --ks-color-warning-onFill: white !important;
+  --ks-color-warning-fillLow: #8d670b !important;
+  --ks-color-warning-onFillLow: #fbde89 !important;
+  --ks-color-warning-surface: white !important;
+  --ks-color-warning-surface1: #573b09 !important;
+  --ks-color-warning-surface2: #462f08 !important;
+  --ks-color-warning-surface2Hover: #513914 !important;
+  --ks-color-warning-surface2Active: #573e1a !important;
+  --ks-color-warning-surface3: #342209 !important;
+  --ks-color-warning-onSurface: #fbde89 !important;
+  --ks-color-warning-onSurfaceHover: #fff4d3 !important;
+  --ks-color-warning-onSurfaceActive: #ffffff !important;
+  --ks-color-success-fill: #35a752 !important;
+  --ks-color-success-onFill: white !important;
+  --ks-color-success-fillHover: #4cba64 !important;
+  --ks-color-success-fillActive: #5ac770 !important;
+  --ks-color-success-fillDisabled: #baecbf !important;
+  --ks-color-success-fillLow: #056e2b !important;
+  --ks-color-success-onFillLow: #7ad889 !important;
+  --ks-color-success-surface: white !important;
+  --ks-color-success-surface1: #034c1c !important;
+  --ks-color-success-surface2: #033d15 !important;
+  --ks-color-success-surface2Hover: #124820 !important;
+  --ks-color-success-surface2Active: #184e25 !important;
+  --ks-color-success-surface3: #052d0f !important;
+  --ks-color-success-onSurface: #7ad889 !important;
+  --ks-color-success-onSurfaceHover: #8eeb9c !important;
+  --ks-color-success-onSurfaceActive: #9bf9a8 !important;
+  --ks-color-data-data1-fill: #8987f6 !important;
+  --ks-color-data-data1-fillDisabled: #dcdeff !important;
+  --ks-color-data-data1-fillHigh: #665cd6 !important;
+  --ks-color-data-data1-surface: #a1a1fa33 !important;
+  --ks-color-data-data1-surfaceDisabled: #a1a1fa0d !important;
+  --ks-color-data-data2-fill: #00577D !important;
+  --ks-color-data-data2-fillDisabled: #CAE6FC !important;
+  --ks-color-data-data2-surface: #7cc0ed33 !important;
+  --ks-color-data-data2-surfaceDisabled: #7cc0ed0d !important;
+  --ks-color-data-data3-fill: #E3CBE1 !important;
+  --ks-color-data-data3-fillDisabled: #EBDCE9 !important;
+  --ks-color-data-data3-fillMedHigh: #B87BB4 !important;
+  --ks-color-data-data3-fillMedHighDisabled: #EBDCE9 !important;
+  --ks-color-data-data3-fillHigh: #442942 !important;
+  --ks-color-data-data3-surface: #d19dcd33 !important;
+  --ks-color-data-data3-surfaceDisabled: #d19dcd0d !important;
+  --ks-color-data-data4-fill: #A45626 !important;
+  --ks-color-data-data4-fillDisabled: #F8DBCC !important;
+  --ks-color-data-data4-fillHigh: #623216 !important;
+  --ks-color-data-data4-surface: #f69c6b33 !important;
+  --ks-color-data-data4-surfaceDisabled: #f69c6b0d !important;
+  --ks-color-data-data5-fill: #98CCF0 !important;
+  --ks-color-data-data5-fillDisabled: #CAE6FC !important;
+  --ks-color-data-data5-fillMedHigh: #3D9FD4 !important;
+  --ks-color-data-data5-fillMedHighDisabled: #CAE6FC !important;
+  --ks-color-data-data5-fillHigh: #0074A6 !important;
+  --ks-color-data-data5-surface: #b0dbfa33 !important;
+  --ks-color-data-data5-surfaceDisabled: #b0dbfa0d !important;
+  --ks-color-data-data6-fill: #5548bd !important;
+  --ks-color-data-data6-fillDisabled: #5548bd40 !important;
+  --ks-color-data-data6-fillHigh: #473aa5 !important;
+  --ks-color-data-data6-surface: #cdcfff33 !important;
+  --ks-color-data-data6-surfaceDisabled: #cdcfff0d !important;
+  --ks-color-data-data7-fill: #F8DBCC !important;
+  --ks-color-data-data7-fillDisabled: #f8dbcc40 !important;
+  --ks-color-data-data7-fillMedHigh: #D7763E !important;
+  --ks-color-data-data7-fillMedHighDisabled: #d7763e40 !important;
+  --ks-color-data-data7-fillHigh: #A45626 !important;
+  --ks-color-data-data7-surface: #f7c9b133 !important;
+  --ks-color-data-data7-surfaceDisabled: #f7c9b10d !important;
+  --ks-color-data-data8-fill: #664163 !important;
+  --ks-color-data-data8-fillDisabled: #66416340 !important;
+  --ks-color-data-data8-fillHigh: #533451 !important;
+  --ks-color-data-data8-surface: #e3cbe133 !important;
+  --ks-color-data-data8-surfaceDisabled: #e3cbe10d !important;
+  --ks-color-data-data9-fill: #babdff !important;
+  --ks-color-data-data9-fillDisabled: #babdff40 !important;
+  --ks-color-data-data9-fillMedHigh: #3a3086 !important;
+  --ks-color-data-data9-fillMedHighDisabled: #3a308640 !important;
+  --ks-color-data-data9-fillHigh: #221f4b !important;
+  --ks-color-data-data9-surface: #8987f633 !important;
+  --ks-color-data-data9-surfaceDisabled: #8987f60d !important;
+  --ks-color-data-data9-onSurface: #8987f6 !important;
+  --ks-color-data-success-fill: #2a9c49 !important;
+  --ks-color-data-success-fillHigh: #035d23 !important;
+  --ks-color-data-success-fillDisabled: #2a9c4940 !important;
+  --ks-color-data-success-surface: #55bd6933 !important;
+  --ks-color-data-success-surfaceDisabled: #55bd690d !important;
+  --ks-color-data-warning-fill: #f0c133 !important;
+  --ks-color-data-warning-fillDisabled: #f0c13340 !important;
+  --ks-color-data-warning-fillMedHigh: #ba8b04 !important;
+  --ks-color-data-warning-fillMedHighDisabled: #ba8b0440 !important;
+  --ks-color-data-warning-surface: #fad25333 !important;
+  --ks-color-data-warning-surfaceDisabled: #fad2530d !important;
+  --ks-color-data-error-fill: #f78a7e !important;
+  --ks-color-data-error-fillDisabled: #f78a7e40 !important;
+  --ks-color-data-error-fillMedHigh: #f4655b !important;
+  --ks-color-data-error-fillMedHighDisabled: #f4655b40 !important;
+  --ks-color-data-error-surface: #f78a7e33 !important;
+  --ks-color-data-error-surfaceDisabled: #f78a7e0d !important;
+  --ks-color-data-neutral-fill: #728DEC !important;
+  --ks-color-data-neutral-fillDisabled: #728dec40 !important;
+  --ks-color-data-neutral-fillMedHigh: #5e5f61 !important;
+  --ks-color-data-neutral-fillMedHighDisabled: #5e5f6140 !important;
+  --ks-color-data-neutral-surface: #a9abac33 !important;
+  --ks-color-data-neutral-surfaceDisabled: #a9abac0d !important;
+  --ks-color-ai-fill: linear-gradient(90deg, #31bdb8 0%, #95AEFE 93.64%, #a1a1fa 186.35%) !important;
+  --ks-ref-color-white: white !important;
+  --ks-ref-color-primary-150: #001c1b !important;
+  --ks-ref-color-primary-200: #002c2b !important;
+  --ks-ref-color-primary-250: #003b3a !important;
+  --ks-ref-color-primary-300: #004a48 !important;
+  --ks-ref-color-primary-350: #005a58 !important;
+  --ks-ref-color-primary-400: #006b68 !important;
+  --ks-ref-color-primary-450: #017976 !important;
+  --ks-ref-color-primary-500: #009995 !important;
+  --ks-ref-color-primary-550: #00a5a0 !important;
+  --ks-ref-color-primary-650: #31bdb8 !important;
+  --ks-ref-color-primary-750: #6fd5d1 !important;
+  --ks-ref-color-primary-850: #9ee1dd !important;
+  --ks-ref-color-primary-900: #c3e9e7 !important;
+  --ks-ref-color-primary-950: #d7f2f0 !important;
+  --ks-ref-color-primary-975: #e8fbf9 !important;
+  --ks-ref-color-primary-995: #f2fdfc !important;
+  --ks-ref-color-primary-1000: white !important;
+  --ks-ref-color-support-150: #15142b !important;
+  --ks-ref-color-support-200: #221f4b !important;
+  --ks-ref-color-support-250: #2e286a !important;
+  --ks-ref-color-support-300: #3a3086 !important;
+  --ks-ref-color-support-350: #473aa5 !important;
+  --ks-ref-color-support-400: #5548bd !important;
+  --ks-ref-color-support-450: #665cd6 !important;
+  --ks-ref-color-support-500: #8078f6 !important;
+  --ks-ref-color-support-550: #8987f6 !important;
+  --ks-ref-color-support-650: #a1a1fa !important;
+  --ks-ref-color-support-750: #babdff !important;
+  --ks-ref-color-support-850: #cdcfff !important;
+  --ks-ref-color-support-900: #dcdeff !important;
+  --ks-ref-color-support-950: #e9ebff !important;
+  --ks-ref-color-support-975: #f5f4ff !important;
+  --ks-ref-color-support-995: #fbfaff !important;
+  --ks-ref-color-support-1000: white !important;
+  --ks-ref-color-neutral-150: #121415 !important;
+  --ks-ref-color-neutral-200: #262627 !important;
+  --ks-ref-color-neutral-250: #343435 !important;
+  --ks-ref-color-neutral-300: #404142 !important;
+  --ks-ref-color-neutral-350: #4f5051 !important;
+  --ks-ref-color-neutral-400: #5e5f61 !important;
+  --ks-ref-color-neutral-450: #6d6e70 !important;
+  --ks-ref-color-neutral-500: #87898b !important;
+  --ks-ref-color-neutral-550: #929496 !important;
+  --ks-ref-color-neutral-650: #a9abac !important;
+  --ks-ref-color-neutral-750: #c3c4c5 !important;
+  --ks-ref-color-neutral-850: #d3d4d5 !important;
+  --ks-ref-color-neutral-900: #e1e1e2 !important;
+  --ks-ref-color-neutral-950: #ececed !important;
+  --ks-ref-color-neutral-975: #f2f3f3 !important;
+  --ks-ref-color-neutral-995: #f8f8f9 !important;
+  --ks-ref-color-neutral-1000: white !important;
+  --ks-ref-color-error-150: #2b0e07 !important;
+  --ks-ref-color-error-200: #4e0c0b !important;
+  --ks-ref-color-error-250: #680e13 !important;
+  --ks-ref-color-error-300: #801118 !important;
+  --ks-ref-color-error-350: #9b1720 !important;
+  --ks-ref-color-error-400: #b51d27 !important;
+  --ks-ref-color-error-450: #ca242e !important;
+  --ks-ref-color-error-500: #ef504b !important;
+  --ks-ref-color-error-550: #f4655b !important;
+  --ks-ref-color-error-650: #f78a7e !important;
+  --ks-ref-color-error-750: #ffafa3 !important;
+  --ks-ref-color-error-850: #ffc6bd !important;
+  --ks-ref-color-error-900: #ffd8d2 !important;
+  --ks-ref-color-error-950: #ffe7e3 !important;
+  --ks-ref-color-error-975: #fff2f0 !important;
+  --ks-ref-color-error-995: #fff9f8 !important;
+  --ks-ref-color-error-1000: white !important;
+  --ks-ref-color-warning-150: #201507 !important;
+  --ks-ref-color-warning-200: #342209 !important;
+  --ks-ref-color-warning-250: #462f08 !important;
+  --ks-ref-color-warning-300: #573b09 !important;
+  --ks-ref-color-warning-350: #68490b !important;
+  --ks-ref-color-warning-400: #7a580e !important;
+  --ks-ref-color-warning-450: #8d670b !important;
+  --ks-ref-color-warning-500: #ad821a !important;
+  --ks-ref-color-warning-550: #ba8b04 !important;
+  --ks-ref-color-warning-650: #d2a106 !important;
+  --ks-ref-color-warning-750: #f0c133 !important;
+  --ks-ref-color-warning-850: #fad253 !important;
+  --ks-ref-color-warning-900: #fbde89 !important;
+  --ks-ref-color-warning-950: #fbebbc !important;
+  --ks-ref-color-warning-975: #fdf5da !important;
+  --ks-ref-color-warning-995: #fffbec !important;
+  --ks-ref-color-warning-1000: white !important;
+  --ks-ref-color-success-150: #051c06 !important;
+  --ks-ref-color-success-200: #052d0f !important;
+  --ks-ref-color-success-250: #033d15 !important;
+  --ks-ref-color-success-300: #034c1c !important;
+  --ks-ref-color-success-350: #035d23 !important;
+  --ks-ref-color-success-400: #056e2b !important;
+  --ks-ref-color-success-450: #057e33 !important;
+  --ks-ref-color-success-500: #2a9c49 !important;
+  --ks-ref-color-success-550: #35a752 !important;
+  --ks-ref-color-success-650: #55bd69 !important;
+  --ks-ref-color-success-750: #7ad889 !important;
+  --ks-ref-color-success-850: #99e4a2 !important;
+  --ks-ref-color-success-900: #baecbf !important;
+  --ks-ref-color-success-950: #ddf9df !important;
+  --ks-ref-color-success-975: #e7fde8 !important;
+  --ks-ref-color-success-995: #effff0 !important;
+  --ks-ref-color-success-1000: white !important;
+  --ks-ref-color-indigo-150: #0F162D !important;
+  --ks-ref-color-indigo-200: #1C2541 !important;
+  --ks-ref-color-indigo-250: #263157 !important;
+  --ks-ref-color-indigo-300: #2F3D6F !important;
+  --ks-ref-color-indigo-350: #37498D !important;
+  --ks-ref-color-indigo-400: #4156A8 !important;
+  --ks-ref-color-indigo-450: #4D65C3 !important;
+  --ks-ref-color-indigo-500: #6480E6 !important;
+  --ks-ref-color-indigo-550: #728DEC !important;
+  --ks-ref-color-indigo-650: #95AEFE !important;
+  --ks-ref-color-indigo-750: #AAC4FC !important;
+  --ks-ref-color-indigo-850: #C2D5FB !important;
+  --ks-ref-color-indigo-900: #D6E2FA !important;
+  --ks-ref-color-indigo-950: #E3EEFF !important;
+  --ks-ref-color-indigo-975: #F0F6FF !important;
+  --ks-ref-color-indigo-995: #F8FBFF !important;
+  --ks-ref-color-blue-150: #001A2B !important;
+  --ks-ref-color-blue-200: #012B3E !important;
+  --ks-ref-color-blue-250: #003953 !important;
+  --ks-ref-color-blue-300: #044765 !important;
+  --ks-ref-color-blue-350: #00577D !important;
+  --ks-ref-color-blue-400: #006697 !important;
+  --ks-ref-color-blue-450: #0074A6 !important;
+  --ks-ref-color-blue-500: #2D94C8 !important;
+  --ks-ref-color-blue-550: #3D9FD4 !important;
+  --ks-ref-color-blue-650: #7CC0ED !important;
+  --ks-ref-color-blue-750: #98CCF0 !important;
+  --ks-ref-color-blue-850: #B0DBFA !important;
+  --ks-ref-color-blue-900: #CAE6FC !important;
+  --ks-ref-color-blue-950: #E3F3FF !important;
+  --ks-ref-color-blue-975: #EDF7FE !important;
+  --ks-ref-color-blue-995: #F7FBFF !important;
+  --ks-ref-color-pink-150: #20111F !important;
+  --ks-ref-color-pink-200: #331E31 !important;
+  --ks-ref-color-pink-250: #442942 !important;
+  --ks-ref-color-pink-300: #533451 !important;
+  --ks-ref-color-pink-350: #664163 !important;
+  --ks-ref-color-pink-400: #784D75 !important;
+  --ks-ref-color-pink-450: #8B5A88 !important;
+  --ks-ref-color-pink-500: #AA72A7 !important;
+  --ks-ref-color-pink-550: #B87BB4 !important;
+  --ks-ref-color-pink-650: #D19DCD !important;
+  --ks-ref-color-pink-750: #DAB6D7 !important;
+  --ks-ref-color-pink-850: #E3CBE1 !important;
+  --ks-ref-color-pink-900: #EBDCE9 !important;
+  --ks-ref-color-pink-950: #F2EAF1 !important;
+  --ks-ref-color-pink-975: #F7F4F7 !important;
+  --ks-ref-color-pink-995: #FCFAFB !important;
+  --ks-ref-color-orange-150: #280F03 !important;
+  --ks-ref-color-orange-200: #3B1E0E !important;
+  --ks-ref-color-orange-250: #4F2913 !important;
+  --ks-ref-color-orange-300: #623216 !important;
+  --ks-ref-color-orange-350: #773E1D !important;
+  --ks-ref-color-orange-400: #8D4921 !important;
+  --ks-ref-color-orange-450: #A45626 !important;
+  --ks-ref-color-orange-500: #C86D37 !important;
+  --ks-ref-color-orange-550: #D7763E !important;
+  --ks-ref-color-orange-650: #F69C6B !important;
+  --ks-ref-color-orange-750: #F6B28E !important;
+  --ks-ref-color-orange-850: #F7C9B1 !important;
+  --ks-ref-color-orange-900: #F8DBCC !important;
+  --ks-ref-color-orange-950: #F9E9E1 !important;
+  --ks-ref-color-orange-975: #FBF3EF !important;
+  --ks-ref-color-orange-995: #FDFAF8 !important;
+}
\ No newline at end of file
diff --git a/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts b/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
new file mode 100644
index 0000000..b9ebbaf
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
@@ -0,0 +1,23 @@
+const cache: Map<string, string> = new Map();
+let rootComputedStyle: CSSStyleDeclaration | null = null;
+
+/**
+ * Returns the value of CSS variable.
+ *
+ * @param varName - name of CSS variable, for example --ks-primary-fill or var(--ks-primary-fill).
+ */
+export function getCSSVariableValue(varName: string): string {
+  if (cache.has(varName)) {
+    return cache.get(varName)!;
+  } else {
+    if (!rootComputedStyle) rootComputedStyle = getComputedStyle(document.documentElement);
+    let varNameWithoutVarCall = varName;
+    if (varName.startsWith('var(')) {
+      varNameWithoutVarCall = varName.substring(4, varName.length - 1);
+    }
+    const value = rootComputedStyle.getPropertyValue(varNameWithoutVarCall);
+    cache.set(varNameWithoutVarCall, value);
+    cache.set(`var(${varNameWithoutVarCall})`, value);
+    return value;
+  }
+}
diff --git a/packages/vchart-keystone-theme/src/design-tokens/index.ts b/packages/vchart-keystone-theme/src/design-tokens/index.ts
new file mode 100644
index 0000000..05a7f27
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/design-tokens/index.ts
@@ -0,0 +1,886 @@
+export const ks = {
+  "ref": {
+    "text": {
+      "fontFamily": {
+        "display": "var(--ks-ref-text-fontFamily-display, TikTok Sans Display, TikTok Display, TikTok Sans Text, TikTok Text, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)",
+        "text": "var(--ks-ref-text-fontFamily-text, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+      },
+      "weight": {
+        "regular": "var(--ks-ref-text-weight-regular, 400)",
+        "medium": "var(--ks-ref-text-weight-medium, 500)"
+      }
+    },
+    "color": {
+      "white": "var(--ks-ref-color-white, white)",
+      "primary": {
+        "150": "var(--ks-ref-color-primary-150, #001c1b)",
+        "200": "var(--ks-ref-color-primary-200, #002c2b)",
+        "250": "var(--ks-ref-color-primary-250, #003b3a)",
+        "300": "var(--ks-ref-color-primary-300, #004a48)",
+        "350": "var(--ks-ref-color-primary-350, #005a58)",
+        "400": "var(--ks-ref-color-primary-400, #006b68)",
+        "450": "var(--ks-ref-color-primary-450, #017976)",
+        "500": "var(--ks-ref-color-primary-500, #009995)",
+        "550": "var(--ks-ref-color-primary-550, #00a5a0)",
+        "650": "var(--ks-ref-color-primary-650, #31bdb8)",
+        "750": "var(--ks-ref-color-primary-750, #6fd5d1)",
+        "850": "var(--ks-ref-color-primary-850, #9ee1dd)",
+        "900": "var(--ks-ref-color-primary-900, #c3e9e7)",
+        "950": "var(--ks-ref-color-primary-950, #d7f2f0)",
+        "975": "var(--ks-ref-color-primary-975, #e8fbf9)",
+        "995": "var(--ks-ref-color-primary-995, #f2fdfc)",
+        "1000": "var(--ks-ref-color-primary-1000, white)"
+      },
+      "support": {
+        "150": "var(--ks-ref-color-support-150, #15142b)",
+        "200": "var(--ks-ref-color-support-200, #221f4b)",
+        "250": "var(--ks-ref-color-support-250, #2e286a)",
+        "300": "var(--ks-ref-color-support-300, #3a3086)",
+        "350": "var(--ks-ref-color-support-350, #473aa5)",
+        "400": "var(--ks-ref-color-support-400, #5548bd)",
+        "450": "var(--ks-ref-color-support-450, #665cd6)",
+        "500": "var(--ks-ref-color-support-500, #8078f6)",
+        "550": "var(--ks-ref-color-support-550, #8987f6)",
+        "650": "var(--ks-ref-color-support-650, #a1a1fa)",
+        "750": "var(--ks-ref-color-support-750, #babdff)",
+        "850": "var(--ks-ref-color-support-850, #cdcfff)",
+        "900": "var(--ks-ref-color-support-900, #dcdeff)",
+        "950": "var(--ks-ref-color-support-950, #e9ebff)",
+        "975": "var(--ks-ref-color-support-975, #f5f4ff)",
+        "995": "var(--ks-ref-color-support-995, #fbfaff)",
+        "1000": "var(--ks-ref-color-support-1000, white)"
+      },
+      "neutral": {
+        "150": "var(--ks-ref-color-neutral-150, #121415)",
+        "200": "var(--ks-ref-color-neutral-200, #262627)",
+        "250": "var(--ks-ref-color-neutral-250, #343435)",
+        "300": "var(--ks-ref-color-neutral-300, #404142)",
+        "350": "var(--ks-ref-color-neutral-350, #4f5051)",
+        "400": "var(--ks-ref-color-neutral-400, #5e5f61)",
+        "450": "var(--ks-ref-color-neutral-450, #6d6e70)",
+        "500": "var(--ks-ref-color-neutral-500, #87898b)",
+        "550": "var(--ks-ref-color-neutral-550, #929496)",
+        "650": "var(--ks-ref-color-neutral-650, #a9abac)",
+        "750": "var(--ks-ref-color-neutral-750, #c3c4c5)",
+        "850": "var(--ks-ref-color-neutral-850, #d3d4d5)",
+        "900": "var(--ks-ref-color-neutral-900, #e1e1e2)",
+        "950": "var(--ks-ref-color-neutral-950, #ececed)",
+        "975": "var(--ks-ref-color-neutral-975, #f2f3f3)",
+        "995": "var(--ks-ref-color-neutral-995, #f8f8f9)",
+        "1000": "var(--ks-ref-color-neutral-1000, white)"
+      },
+      "error": {
+        "150": "var(--ks-ref-color-error-150, #2b0e07)",
+        "200": "var(--ks-ref-color-error-200, #4e0c0b)",
+        "250": "var(--ks-ref-color-error-250, #680e13)",
+        "300": "var(--ks-ref-color-error-300, #801118)",
+        "350": "var(--ks-ref-color-error-350, #9b1720)",
+        "400": "var(--ks-ref-color-error-400, #b51d27)",
+        "450": "var(--ks-ref-color-error-450, #ca242e)",
+        "500": "var(--ks-ref-color-error-500, #ef504b)",
+        "550": "var(--ks-ref-color-error-550, #f4655b)",
+        "650": "var(--ks-ref-color-error-650, #f78a7e)",
+        "750": "var(--ks-ref-color-error-750, #ffafa3)",
+        "850": "var(--ks-ref-color-error-850, #ffc6bd)",
+        "900": "var(--ks-ref-color-error-900, #ffd8d2)",
+        "950": "var(--ks-ref-color-error-950, #ffe7e3)",
+        "975": "var(--ks-ref-color-error-975, #fff2f0)",
+        "995": "var(--ks-ref-color-error-995, #fff9f8)",
+        "1000": "var(--ks-ref-color-error-1000, white)"
+      },
+      "warning": {
+        "150": "var(--ks-ref-color-warning-150, #201507)",
+        "200": "var(--ks-ref-color-warning-200, #342209)",
+        "250": "var(--ks-ref-color-warning-250, #462f08)",
+        "300": "var(--ks-ref-color-warning-300, #573b09)",
+        "350": "var(--ks-ref-color-warning-350, #68490b)",
+        "400": "var(--ks-ref-color-warning-400, #7a580e)",
+        "450": "var(--ks-ref-color-warning-450, #8d670b)",
+        "500": "var(--ks-ref-color-warning-500, #ad821a)",
+        "550": "var(--ks-ref-color-warning-550, #ba8b04)",
+        "650": "var(--ks-ref-color-warning-650, #d2a106)",
+        "750": "var(--ks-ref-color-warning-750, #f0c133)",
+        "850": "var(--ks-ref-color-warning-850, #fad253)",
+        "900": "var(--ks-ref-color-warning-900, #fbde89)",
+        "950": "var(--ks-ref-color-warning-950, #fbebbc)",
+        "975": "var(--ks-ref-color-warning-975, #fdf5da)",
+        "995": "var(--ks-ref-color-warning-995, #fffbec)",
+        "1000": "var(--ks-ref-color-warning-1000, white)"
+      },
+      "success": {
+        "150": "var(--ks-ref-color-success-150, #051c06)",
+        "200": "var(--ks-ref-color-success-200, #052d0f)",
+        "250": "var(--ks-ref-color-success-250, #033d15)",
+        "300": "var(--ks-ref-color-success-300, #034c1c)",
+        "350": "var(--ks-ref-color-success-350, #035d23)",
+        "400": "var(--ks-ref-color-success-400, #056e2b)",
+        "450": "var(--ks-ref-color-success-450, #057e33)",
+        "500": "var(--ks-ref-color-success-500, #2a9c49)",
+        "550": "var(--ks-ref-color-success-550, #35a752)",
+        "650": "var(--ks-ref-color-success-650, #55bd69)",
+        "750": "var(--ks-ref-color-success-750, #7ad889)",
+        "850": "var(--ks-ref-color-success-850, #99e4a2)",
+        "900": "var(--ks-ref-color-success-900, #baecbf)",
+        "950": "var(--ks-ref-color-success-950, #ddf9df)",
+        "975": "var(--ks-ref-color-success-975, #e7fde8)",
+        "995": "var(--ks-ref-color-success-995, #effff0)",
+        "1000": "var(--ks-ref-color-success-1000, white)"
+      },
+      "indigo": {
+        "150": "var(--ks-ref-color-indigo-150, #0F162D)",
+        "200": "var(--ks-ref-color-indigo-200, #1C2541)",
+        "250": "var(--ks-ref-color-indigo-250, #263157)",
+        "300": "var(--ks-ref-color-indigo-300, #2F3D6F)",
+        "350": "var(--ks-ref-color-indigo-350, #37498D)",
+        "400": "var(--ks-ref-color-indigo-400, #4156A8)",
+        "450": "var(--ks-ref-color-indigo-450, #4D65C3)",
+        "500": "var(--ks-ref-color-indigo-500, #6480E6)",
+        "550": "var(--ks-ref-color-indigo-550, #728DEC)",
+        "650": "var(--ks-ref-color-indigo-650, #95AEFE)",
+        "750": "var(--ks-ref-color-indigo-750, #AAC4FC)",
+        "850": "var(--ks-ref-color-indigo-850, #C2D5FB)",
+        "900": "var(--ks-ref-color-indigo-900, #D6E2FA)",
+        "950": "var(--ks-ref-color-indigo-950, #E3EEFF)",
+        "975": "var(--ks-ref-color-indigo-975, #F0F6FF)",
+        "995": "var(--ks-ref-color-indigo-995, #F8FBFF)"
+      },
+      "blue": {
+        "150": "var(--ks-ref-color-blue-150, #001A2B)",
+        "200": "var(--ks-ref-color-blue-200, #012B3E)",
+        "250": "var(--ks-ref-color-blue-250, #003953)",
+        "300": "var(--ks-ref-color-blue-300, #044765)",
+        "350": "var(--ks-ref-color-blue-350, #00577D)",
+        "400": "var(--ks-ref-color-blue-400, #006697)",
+        "450": "var(--ks-ref-color-blue-450, #0074A6)",
+        "500": "var(--ks-ref-color-blue-500, #2D94C8)",
+        "550": "var(--ks-ref-color-blue-550, #3D9FD4)",
+        "650": "var(--ks-ref-color-blue-650, #7CC0ED)",
+        "750": "var(--ks-ref-color-blue-750, #98CCF0)",
+        "850": "var(--ks-ref-color-blue-850, #B0DBFA)",
+        "900": "var(--ks-ref-color-blue-900, #CAE6FC)",
+        "950": "var(--ks-ref-color-blue-950, #E3F3FF)",
+        "975": "var(--ks-ref-color-blue-975, #EDF7FE)",
+        "995": "var(--ks-ref-color-blue-995, #F7FBFF)"
+      },
+      "pink": {
+        "150": "var(--ks-ref-color-pink-150, #20111F)",
+        "200": "var(--ks-ref-color-pink-200, #331E31)",
+        "250": "var(--ks-ref-color-pink-250, #442942)",
+        "300": "var(--ks-ref-color-pink-300, #533451)",
+        "350": "var(--ks-ref-color-pink-350, #664163)",
+        "400": "var(--ks-ref-color-pink-400, #784D75)",
+        "450": "var(--ks-ref-color-pink-450, #8B5A88)",
+        "500": "var(--ks-ref-color-pink-500, #AA72A7)",
+        "550": "var(--ks-ref-color-pink-550, #B87BB4)",
+        "650": "var(--ks-ref-color-pink-650, #D19DCD)",
+        "750": "var(--ks-ref-color-pink-750, #DAB6D7)",
+        "850": "var(--ks-ref-color-pink-850, #E3CBE1)",
+        "900": "var(--ks-ref-color-pink-900, #EBDCE9)",
+        "950": "var(--ks-ref-color-pink-950, #F2EAF1)",
+        "975": "var(--ks-ref-color-pink-975, #F7F4F7)",
+        "995": "var(--ks-ref-color-pink-995, #FCFAFB)"
+      },
+      "orange": {
+        "150": "var(--ks-ref-color-orange-150, #280F03)",
+        "200": "var(--ks-ref-color-orange-200, #3B1E0E)",
+        "250": "var(--ks-ref-color-orange-250, #4F2913)",
+        "300": "var(--ks-ref-color-orange-300, #623216)",
+        "350": "var(--ks-ref-color-orange-350, #773E1D)",
+        "400": "var(--ks-ref-color-orange-400, #8D4921)",
+        "450": "var(--ks-ref-color-orange-450, #A45626)",
+        "500": "var(--ks-ref-color-orange-500, #C86D37)",
+        "550": "var(--ks-ref-color-orange-550, #D7763E)",
+        "650": "var(--ks-ref-color-orange-650, #F69C6B)",
+        "750": "var(--ks-ref-color-orange-750, #F6B28E)",
+        "850": "var(--ks-ref-color-orange-850, #F7C9B1)",
+        "900": "var(--ks-ref-color-orange-900, #F8DBCC)",
+        "950": "var(--ks-ref-color-orange-950, #F9E9E1)",
+        "975": "var(--ks-ref-color-orange-975, #FBF3EF)",
+        "995": "var(--ks-ref-color-orange-995, #FDFAF8)"
+      }
+    }
+  },
+  "transition": {
+    "easing": {
+      "standardIn": "var(--ks-transition-easing-standardIn, cubic-bezier(0.32, 0, 0.67, 0))",
+      "standardOut": "var(--ks-transition-easing-standardOut, cubic-bezier(0.33, 1, 0.68, 1))",
+      "standardInOut": "var(--ks-transition-easing-standardInOut, cubic-bezier(0.4, 0, 0.2, 1))"
+    }
+  },
+  "spacing": {
+    "0": "var(--ks-spacing-0, 0)",
+    "50": "var(--ks-spacing-50, 2px)",
+    "100": "var(--ks-spacing-100, 4px)",
+    "150": "var(--ks-spacing-150, 6px)",
+    "200": "var(--ks-spacing-200, 8px)",
+    "250": "var(--ks-spacing-250, 10px)",
+    "300": "var(--ks-spacing-300, 12px)",
+    "400": "var(--ks-spacing-400, 16px)",
+    "500": "var(--ks-spacing-500, 20px)",
+    "600": "var(--ks-spacing-600, 24px)",
+    "700": "var(--ks-spacing-700, 28px)",
+    "800": "var(--ks-spacing-800, 32px)",
+    "900": "var(--ks-spacing-900, 36px)",
+    "1000": "var(--ks-spacing-1000, 40px)",
+    "1200": "var(--ks-spacing-1200, 48px)",
+    "1400": "var(--ks-spacing-1400, 56px)",
+    "1600": "var(--ks-spacing-1600, 64px)",
+    "1800": "var(--ks-spacing-1800, 72px)",
+    "2000": "var(--ks-spacing-2000, 80px)",
+    "2200": "var(--ks-spacing-2200, 88px)",
+    "2400": "var(--ks-spacing-2400, 96px)"
+  },
+  "border": {
+    "radius": {
+      "sm": "var(--ks-border-radius-sm, 2px)",
+      "md": "var(--ks-border-radius-md, 4px)",
+      "lg": "var(--ks-border-radius-lg, 6px)",
+      "xl": "var(--ks-border-radius-xl, 8px)",
+      "full": "var(--ks-border-radius-full, 9999px)",
+      "innerMd": "var(--ks-border-radius-innerMd, 3px)"
+    }
+  },
+  "elevation": {
+    "shadow": {
+      "level1": "var(--ks-elevation-shadow-level1, 0 2px 8px 0 rgba(0, 0, 0, 0.12))",
+      "level2": "var(--ks-elevation-shadow-level2, 0 0 12px 0 rgba(0, 0, 0, 0.12))",
+      "level3": "var(--ks-elevation-shadow-level3, 0 8px 20px 0 rgba(0, 0, 0, 0.12))",
+      "level4": "var(--ks-elevation-shadow-level4, 0 8px 28px 0 rgba(0, 0, 0, 0.12))"
+    }
+  },
+  "text": {
+    "headlineLg": {
+      "fontSize": "var(--ks-text-headlineLg-fontSize, 32px)",
+      "lineHeight": "var(--ks-text-headlineLg-lineHeight, 40px)",
+      "fontWeight": "var(--ks-text-headlineLg-fontWeight, 500)",
+      "letterSpacing": "var(--ks-text-headlineLg-letterSpacing, 0)",
+      "fontFamily": "var(--ks-text-headlineLg-fontFamily, TikTok Sans Display, TikTok Display, TikTok Sans Text, TikTok Text, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "headlineMd": {
+      "fontSize": "var(--ks-text-headlineMd-fontSize, 24px)",
+      "lineHeight": "var(--ks-text-headlineMd-lineHeight, 32px)",
+      "fontWeight": "var(--ks-text-headlineMd-fontWeight, 500)",
+      "letterSpacing": "var(--ks-text-headlineMd-letterSpacing, 0.24px)",
+      "fontFamily": "var(--ks-text-headlineMd-fontFamily, TikTok Sans Display, TikTok Display, TikTok Sans Text, TikTok Text, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "headlineSm": {
+      "fontSize": "var(--ks-text-headlineSm-fontSize, 20px)",
+      "lineHeight": "var(--ks-text-headlineSm-lineHeight, 28px)",
+      "fontWeight": "var(--ks-text-headlineSm-fontWeight, 500)",
+      "letterSpacing": "var(--ks-text-headlineSm-letterSpacing, 0.3px)",
+      "fontFamily": "var(--ks-text-headlineSm-fontFamily, TikTok Sans Display, TikTok Display, TikTok Sans Text, TikTok Text, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "titleLg": {
+      "fontSize": "var(--ks-text-titleLg-fontSize, 18px)",
+      "lineHeight": "var(--ks-text-titleLg-lineHeight, 26px)",
+      "fontWeight": "var(--ks-text-titleLg-fontWeight, 500)",
+      "letterSpacing": "var(--ks-text-titleLg-letterSpacing, 0.03px)",
+      "fontFamily": "var(--ks-text-titleLg-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "titleMd": {
+      "fontSize": "var(--ks-text-titleMd-fontSize, 16px)",
+      "lineHeight": "var(--ks-text-titleMd-lineHeight, 24px)",
+      "fontWeight": "var(--ks-text-titleMd-fontWeight, 500)",
+      "letterSpacing": "var(--ks-text-titleMd-letterSpacing, 0.03px)",
+      "fontFamily": "var(--ks-text-titleMd-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "titleSm": {
+      "fontSize": "var(--ks-text-titleSm-fontSize, 14px)",
+      "lineHeight": "var(--ks-text-titleSm-lineHeight, 20px)",
+      "fontWeight": "var(--ks-text-titleSm-fontWeight, 500)",
+      "letterSpacing": "var(--ks-text-titleSm-letterSpacing, 0.09px)",
+      "fontFamily": "var(--ks-text-titleSm-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "bodyLg": {
+      "fontSize": "var(--ks-text-bodyLg-fontSize, 18px)",
+      "lineHeight": "var(--ks-text-bodyLg-lineHeight, 26px)",
+      "fontWeight": "var(--ks-text-bodyLg-fontWeight, 400)",
+      "letterSpacing": "var(--ks-text-bodyLg-letterSpacing, 0.03px)",
+      "fontFamily": "var(--ks-text-bodyLg-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "bodyMd": {
+      "fontSize": "var(--ks-text-bodyMd-fontSize, 16px)",
+      "lineHeight": "var(--ks-text-bodyMd-lineHeight, 24px)",
+      "fontWeight": "var(--ks-text-bodyMd-fontWeight, 400)",
+      "letterSpacing": "var(--ks-text-bodyMd-letterSpacing, 0.03px)",
+      "fontFamily": "var(--ks-text-bodyMd-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "bodySm": {
+      "fontSize": "var(--ks-text-bodySm-fontSize, 14px)",
+      "lineHeight": "var(--ks-text-bodySm-lineHeight, 20px)",
+      "fontWeight": "var(--ks-text-bodySm-fontWeight, 400)",
+      "letterSpacing": "var(--ks-text-bodySm-letterSpacing, 0.09px)",
+      "fontFamily": "var(--ks-text-bodySm-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "labelLg": {
+      "fontSize": "var(--ks-text-labelLg-fontSize, 14px)",
+      "lineHeight": "var(--ks-text-labelLg-lineHeight, 20px)",
+      "fontWeight": "var(--ks-text-labelLg-fontWeight, 500)",
+      "letterSpacing": "var(--ks-text-labelLg-letterSpacing, 0.09px)",
+      "fontFamily": "var(--ks-text-labelLg-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "labelMd": {
+      "fontSize": "var(--ks-text-labelMd-fontSize, 12px)",
+      "lineHeight": "var(--ks-text-labelMd-lineHeight, 16px)",
+      "fontWeight": "var(--ks-text-labelMd-fontWeight, 500)",
+      "letterSpacing": "var(--ks-text-labelMd-letterSpacing, 0.16px)",
+      "fontFamily": "var(--ks-text-labelMd-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    },
+    "labelSm": {
+      "fontSize": "var(--ks-text-labelSm-fontSize, 12px)",
+      "lineHeight": "var(--ks-text-labelSm-lineHeight, 16px)",
+      "fontWeight": "var(--ks-text-labelSm-fontWeight, 400)",
+      "letterSpacing": "var(--ks-text-labelSm-letterSpacing, 0.16px)",
+      "fontFamily": "var(--ks-text-labelSm-fontFamily, TikTok Sans Text, TikTok Text, TikTok Sans Display, TikTok Display, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol)"
+    }
+  },
+  "color": {
+    "primary": {
+      "fill": "var(--ks-color-primary-fill, #009995)",
+      "fillHover": "var(--ks-color-primary-fillHover, #008581)",
+      "fillActive": "var(--ks-color-primary-fillActive, #007875)",
+      "fillDisabled": "var(--ks-color-primary-fillDisabled, #c3e9e7)",
+      "onFill": "var(--ks-color-primary-onFill, white)",
+      "fillLow": "var(--ks-color-primary-fillLow, #9ee1dd)",
+      "onFillLow": "var(--ks-color-primary-onFillLow, #002c2b)",
+      "onFillDisabled": "var(--ks-color-primary-onFillDisabled, white)",
+      "surface": "var(--ks-color-primary-surface, white)",
+      "surface1": "var(--ks-color-primary-surface1, #f2fdfc)",
+      "surface1Hover": "var(--ks-color-primary-surface1Hover, #e5efee)",
+      "surface1Active": "var(--ks-color-primary-surface1Active, #dee9e8)",
+      "surface2": "var(--ks-color-primary-surface2, #e8fbf9)",
+      "surface2Hover": "var(--ks-color-primary-surface2Hover, #dbedec)",
+      "surface2Active": "var(--ks-color-primary-surface2Active, #d4e7e5)",
+      "surface2Disabled": "var(--ks-color-primary-surface2Disabled, #e8fbf9)",
+      "surface3": "var(--ks-color-primary-surface3, #d7f2f0)",
+      "onSurface": "var(--ks-color-primary-onSurface, #017976)",
+      "onSurfaceHover": "var(--ks-color-primary-onSurfaceHover, #006663)",
+      "onSurfaceActive": "var(--ks-color-primary-onSurfaceActive, #005a57)",
+      "onSurfaceDisabled": "var(--ks-color-primary-onSurfaceDisabled, #a9abac)",
+      "transparentFill": "var(--ks-color-primary-transparentFill, #01797600)",
+      "transparentFillHover": "var(--ks-color-primary-transparentFillHover, #00666312)",
+      "transparentFillActive": "var(--ks-color-primary-transparentFillActive, #005a5724)",
+      "transparentFillDisabled": "var(--ks-color-primary-transparentFillDisabled, #01797600)"
+    },
+    "support": {
+      "fill": "var(--ks-color-support-fill, #8078f6)",
+      "fillLow": "var(--ks-color-support-fillLow, #cdcfff)",
+      "fillHover": "var(--ks-color-support-fillHover, #6f65e1)",
+      "fillActive": "var(--ks-color-support-fillActive, #6459d4)",
+      "fillDisabled": "var(--ks-color-support-fillDisabled, #dcdeff)",
+      "onFill": "var(--ks-color-support-onFill, white)",
+      "onFillLow": "var(--ks-color-support-onFillLow, #221f4b)",
+      "onFillDisabled": "var(--ks-color-support-onFillDisabled, white)",
+      "surface": "var(--ks-color-support-surface, white)",
+      "surface1": "var(--ks-color-support-surface1, #fbfaff)",
+      "surface2": "var(--ks-color-support-surface2, #f5f4ff)",
+      "surface2Hover": "var(--ks-color-support-surface2Hover, #e7e6f2)",
+      "surface2Active": "var(--ks-color-support-surface2Active, #e1e0eb)",
+      "surface3": "var(--ks-color-support-surface3, #e9ebff)",
+      "onSurface": "var(--ks-color-support-onSurface, #665cd6)",
+      "onSurfaceHover": "var(--ks-color-support-onSurfaceHover, #5749c2)",
+      "onSurfaceActive": "var(--ks-color-support-onSurfaceActive, #4d3cb5)",
+      "onSurfaceDisabled": "var(--ks-color-support-onSurfaceDisabled, #a1a1fa)"
+    },
+    "neutral": {
+      "fill": "var(--ks-color-neutral-fill, #87898b)",
+      "fillHover": "var(--ks-color-neutral-fillHover, #767779)",
+      "fillActive": "var(--ks-color-neutral-fillActive, #6a6c6e)",
+      "fillDisabled": "var(--ks-color-neutral-fillDisabled, #e1e1e2)",
+      "onFill": "var(--ks-color-neutral-onFill, white)",
+      "onFillDisabled": "var(--ks-color-neutral-onFillDisabled, white)",
+      "fillHigh": "var(--ks-color-neutral-fillHigh, #262627)",
+      "fillHighHover": "var(--ks-color-neutral-fillHighHover, #353536)",
+      "fillHighActive": "var(--ks-color-neutral-fillHighActive, #3f4041)",
+      "fillHighDisabled": "var(--ks-color-neutral-fillHighDisabled, #e1e1e2)",
+      "fillMedHigh": "var(--ks-color-neutral-fillMedHigh, #404142)",
+      "fillMedHighHover": "var(--ks-color-neutral-fillMedHighHover, #505152)",
+      "fillMedHighActive": "var(--ks-color-neutral-fillMedHighActive, #5b5c5d)",
+      "fillMedHighDisabled": "var(--ks-color-neutral-fillMedHighDisabled, #e1e1e2)",
+      "fillLow": "var(--ks-color-neutral-fillLow, #d3d4d5)",
+      "fillLowHover": "var(--ks-color-neutral-fillLowHover, #c0c1c1)",
+      "fillLowActive": "var(--ks-color-neutral-fillLowActive, #b3b4b5)",
+      "fillLowDisabled": "var(--ks-color-neutral-fillLowDisabled, #e1e1e2)",
+      "fillLowInverse": "var(--ks-color-neutral-fillLowInverse, #ececed)",
+      "fillLowInverseHover": "var(--ks-color-neutral-fillLowInverseHover, #f2f3f3)",
+      "fillLowInverseActive": "var(--ks-color-neutral-fillLowInverseActive, #f8f8f9)",
+      "onFillLow": "var(--ks-color-neutral-onFillLow, #262627)",
+      "surface": "var(--ks-color-neutral-surface, white)",
+      "surfaceHover": "var(--ks-color-neutral-surfaceHover, #f1f2f2)",
+      "surfaceActive": "var(--ks-color-neutral-surfaceActive, #ebebeb)",
+      "surface1": "var(--ks-color-neutral-surface1, #f8f8f9)",
+      "surface1Hover": "var(--ks-color-neutral-surface1Hover, #ebebeb)",
+      "surface1Active": "var(--ks-color-neutral-surface1Active, #e4e4e5)",
+      "surface2": "var(--ks-color-neutral-surface2, #f2f3f3)",
+      "surface2Hover": "var(--ks-color-neutral-surface2Hover, #e5e5e6)",
+      "surface2Active": "var(--ks-color-neutral-surface2Active, #dfdfdf)",
+      "surface2Disabled": "var(--ks-color-neutral-surface2Disabled, #f8f8f9)",
+      "surface3": "var(--ks-color-neutral-surface3, #ececed)",
+      "surface3Hover": "var(--ks-color-neutral-surface3Hover, #dfdfe0)",
+      "surface3Active": "var(--ks-color-neutral-surface3Active, #d8d9d9)",
+      "surface3Disabled": "var(--ks-color-neutral-surface3Disabled, #f8f8f9)",
+      "onSurface": "var(--ks-color-neutral-onSurface, #6d6e70)",
+      "onSurfaceHover": "var(--ks-color-neutral-onSurfaceHover, #5c5d5f)",
+      "onSurfaceActive": "var(--ks-color-neutral-onSurfaceActive, #515254)",
+      "onSurfaceDisabled": "var(--ks-color-neutral-onSurfaceDisabled, #a9abac)",
+      "highOnSurface": "var(--ks-color-neutral-highOnSurface, #121415)",
+      "highOnSurfaceHover": "var(--ks-color-neutral-highOnSurfaceHover, #242728)",
+      "highOnSurfaceActive": "var(--ks-color-neutral-highOnSurfaceActive, #2e3132)",
+      "highOnSurfaceDisabled": "var(--ks-color-neutral-highOnSurfaceDisabled, #a9abac)",
+      "lowOnSurface": "var(--ks-color-neutral-lowOnSurface, #87898B)",
+      "lowOnSurfaceHover": "var(--ks-color-neutral-lowOnSurfaceHover, #757779)",
+      "lowOnSurfaceActive": "var(--ks-color-neutral-lowOnSurfaceActive, 6A6C6E)",
+      "lowOnSurfaceDisabled": "var(--ks-color-neutral-lowOnSurfaceDisabled, #a9abac)",
+      "overlay": "var(--ks-color-neutral-overlay, #26262780)",
+      "overlayHigh": "var(--ks-color-neutral-overlayHigh, #262627b3)",
+      "overlayHighDisabled": "var(--ks-color-neutral-overlayHighDisabled, #e1e1e2)",
+      "overlayLow": "var(--ks-color-neutral-overlayLow, #26262726)",
+      "overlayLowDisabled": "var(--ks-color-neutral-overlayLowDisabled, #12141512)",
+      "transparentFill": "var(--ks-color-neutral-transparentFill, #12141500)",
+      "transparentFillHover": "var(--ks-color-neutral-transparentFillHover, #12141512)",
+      "transparentFillActive": "var(--ks-color-neutral-transparentFillActive, #12141524)",
+      "transparentFillDisabled": "var(--ks-color-neutral-transparentFillDisabled, #12141500)"
+    },
+    "error": {
+      "fill": "var(--ks-color-error-fill, #ef504b)",
+      "fillHover": "var(--ks-color-error-fillHover, #da3a39)",
+      "fillActive": "var(--ks-color-error-fillActive, #cb2a2d)",
+      "fillDisabled": "var(--ks-color-error-fillDisabled, #ffd8d2)",
+      "fillMedHigh": "var(--ks-color-error-fillMedHigh, #ca242e)",
+      "fillMedHighHover": "var(--ks-color-error-fillMedHighHover, #b3001c)",
+      "fillMedHighActive": "var(--ks-color-error-fillMedHighActive, #9f0018)",
+      "onFill": "var(--ks-color-error-onFill, white)",
+      "fillLow": "var(--ks-color-error-fillLow, #ffc6bd)",
+      "onFillLow": "var(--ks-color-error-onFillLow, #4e0c0b)",
+      "surface": "var(--ks-color-error-surface, white)",
+      "surface1": "var(--ks-color-error-surface1, #fff9f8)",
+      "surface2": "var(--ks-color-error-surface2, #fff2f0)",
+      "surface2Hover": "var(--ks-color-error-surface2Hover, #f2e5e2)",
+      "surface2Active": "var(--ks-color-error-surface2Active, #ebdedc)",
+      "surface3": "var(--ks-color-error-surface3, #ffe7e3)",
+      "onSurface": "var(--ks-color-error-onSurface, #ca242e)",
+      "onSurfaceHover": "var(--ks-color-error-onSurfaceHover, #b3001c)",
+      "onSurfaceActive": "var(--ks-color-error-onSurfaceActive, #9f0018)"
+    },
+    "warning": {
+      "fill": "var(--ks-color-warning-fill, #d2a106)",
+      "fillHover": "var(--ks-color-warning-fillHover, #bc8f00)",
+      "fillActive": "var(--ks-color-warning-fillActive, #ad8400)",
+      "fillDisabled": "var(--ks-color-warning-fillDisabled, #fbde89)",
+      "onFill": "var(--ks-color-warning-onFill, white)",
+      "fillLow": "var(--ks-color-warning-fillLow, #fad253)",
+      "onFillLow": "var(--ks-color-warning-onFillLow, #201507)",
+      "surface": "var(--ks-color-warning-surface, white)",
+      "surface1": "var(--ks-color-warning-surface1, #fffbec)",
+      "surface2": "var(--ks-color-warning-surface2, #fdf5da)",
+      "surface2Hover": "var(--ks-color-warning-surface2Hover, #f0e7cd)",
+      "surface2Active": "var(--ks-color-warning-surface2Active, #e9e1c7)",
+      "surface3": "var(--ks-color-warning-surface3, #fbebbc)",
+      "onSurface": "var(--ks-color-warning-onSurface, #8d670b)",
+      "onSurfaceHover": "var(--ks-color-warning-onSurfaceHover, #785600)",
+      "onSurfaceActive": "var(--ks-color-warning-onSurfaceActive, #6a4c00)"
+    },
+    "success": {
+      "fill": "var(--ks-color-success-fill, #2a9c49)",
+      "onFill": "var(--ks-color-success-onFill, white)",
+      "fillHover": "var(--ks-color-success-fillHover, #068a37)",
+      "fillActive": "var(--ks-color-success-fillActive, #007c30)",
+      "fillDisabled": "var(--ks-color-success-fillDisabled, #baecbf)",
+      "fillLow": "var(--ks-color-success-fillLow, #99e4a2)",
+      "onFillLow": "var(--ks-color-success-onFillLow, #052d0f)",
+      "surface": "var(--ks-color-success-surface, white)",
+      "surface1": "var(--ks-color-success-surface1, #effff0)",
+      "surface2": "var(--ks-color-success-surface2, #e7fde8)",
+      "surface2Hover": "var(--ks-color-success-surface2Hover, #daf0db)",
+      "surface2Active": "var(--ks-color-success-surface2Active, #d3e9d5)",
+      "surface3": "var(--ks-color-success-surface3, #ddf9df)",
+      "onSurface": "var(--ks-color-success-onSurface, #057e33)",
+      "onSurfaceHover": "var(--ks-color-success-onSurfaceHover, #006b29)",
+      "onSurfaceActive": "var(--ks-color-success-onSurfaceActive, #005e23)"
+    },
+    "data": {
+      "data1": {
+        "fill": "var(--ks-color-data-data1-fill, #8987f6)",
+        "fillDisabled": "var(--ks-color-data-data1-fillDisabled, #dcdeff)",
+        "fillHigh": "var(--ks-color-data-data1-fillHigh, #665cd6)",
+        "surface": "var(--ks-color-data-data1-surface, #a1a1fa33)",
+        "surfaceDisabled": "var(--ks-color-data-data1-surfaceDisabled, #a1a1fa0d)"
+      },
+      "data2": {
+        "fill": "var(--ks-color-data-data2-fill, #00577D)",
+        "fillDisabled": "var(--ks-color-data-data2-fillDisabled, #CAE6FC)",
+        "surface": "var(--ks-color-data-data2-surface, #7cc0ed33)",
+        "surfaceDisabled": "var(--ks-color-data-data2-surfaceDisabled, #7cc0ed0d)"
+      },
+      "data3": {
+        "fill": "var(--ks-color-data-data3-fill, #E3CBE1)",
+        "fillDisabled": "var(--ks-color-data-data3-fillDisabled, #EBDCE9)",
+        "fillMedHigh": "var(--ks-color-data-data3-fillMedHigh, #B87BB4)",
+        "fillMedHighDisabled": "var(--ks-color-data-data3-fillMedHighDisabled, #EBDCE9)",
+        "fillHigh": "var(--ks-color-data-data3-fillHigh, #442942)",
+        "surface": "var(--ks-color-data-data3-surface, #d19dcd33)",
+        "surfaceDisabled": "var(--ks-color-data-data3-surfaceDisabled, #d19dcd0d)"
+      },
+      "data4": {
+        "fill": "var(--ks-color-data-data4-fill, #A45626)",
+        "fillDisabled": "var(--ks-color-data-data4-fillDisabled, #F8DBCC)",
+        "fillHigh": "var(--ks-color-data-data4-fillHigh, #623216)",
+        "surface": "var(--ks-color-data-data4-surface, #f69c6b33)",
+        "surfaceDisabled": "var(--ks-color-data-data4-surfaceDisabled, #f69c6b0d)"
+      },
+      "data5": {
+        "fill": "var(--ks-color-data-data5-fill, #98CCF0)",
+        "fillDisabled": "var(--ks-color-data-data5-fillDisabled, #CAE6FC)",
+        "fillMedHigh": "var(--ks-color-data-data5-fillMedHigh, #3D9FD4)",
+        "fillMedHighDisabled": "var(--ks-color-data-data5-fillMedHighDisabled, #CAE6FC)",
+        "fillHigh": "var(--ks-color-data-data5-fillHigh, #0074A6)",
+        "surface": "var(--ks-color-data-data5-surface, #b0dbfa33)",
+        "surfaceDisabled": "var(--ks-color-data-data5-surfaceDisabled, #b0dbfa0d)"
+      },
+      "data6": {
+        "fill": "var(--ks-color-data-data6-fill, #5548bd)",
+        "fillDisabled": "var(--ks-color-data-data6-fillDisabled, #5548bd40)",
+        "fillHigh": "var(--ks-color-data-data6-fillHigh, #473aa5)",
+        "surface": "var(--ks-color-data-data6-surface, #cdcfff33)",
+        "surfaceDisabled": "var(--ks-color-data-data6-surfaceDisabled, #cdcfff0d)"
+      },
+      "data7": {
+        "fill": "var(--ks-color-data-data7-fill, #F8DBCC)",
+        "fillDisabled": "var(--ks-color-data-data7-fillDisabled, #f8dbcc40)",
+        "fillMedHigh": "var(--ks-color-data-data7-fillMedHigh, #D7763E)",
+        "fillMedHighDisabled": "var(--ks-color-data-data7-fillMedHighDisabled, #d7763e40)",
+        "fillHigh": "var(--ks-color-data-data7-fillHigh, #A45626)",
+        "surface": "var(--ks-color-data-data7-surface, #f7c9b133)",
+        "surfaceDisabled": "var(--ks-color-data-data7-surfaceDisabled, #f7c9b10d)"
+      },
+      "data8": {
+        "fill": "var(--ks-color-data-data8-fill, #664163)",
+        "fillDisabled": "var(--ks-color-data-data8-fillDisabled, #66416340)",
+        "fillHigh": "var(--ks-color-data-data8-fillHigh, #533451)",
+        "surface": "var(--ks-color-data-data8-surface, #e3cbe133)",
+        "surfaceDisabled": "var(--ks-color-data-data8-surfaceDisabled, #e3cbe10d)"
+      },
+      "data9": {
+        "fill": "var(--ks-color-data-data9-fill, #babdff)",
+        "fillDisabled": "var(--ks-color-data-data9-fillDisabled, #babdff40)",
+        "fillMedHigh": "var(--ks-color-data-data9-fillMedHigh, #3a3086)",
+        "fillMedHighDisabled": "var(--ks-color-data-data9-fillMedHighDisabled, #3a308640)",
+        "fillHigh": "var(--ks-color-data-data9-fillHigh, #221f4b)",
+        "surface": "var(--ks-color-data-data9-surface, #8987f633)",
+        "surfaceDisabled": "var(--ks-color-data-data9-surfaceDisabled, #8987f60d)",
+        "onSurface": "var(--ks-color-data-data9-onSurface, #8987f6)"
+      },
+      "success": {
+        "fill": "var(--ks-color-data-success-fill, #2a9c49)",
+        "fillHigh": "var(--ks-color-data-success-fillHigh, #035d23)",
+        "fillDisabled": "var(--ks-color-data-success-fillDisabled, #2a9c4940)",
+        "surface": "var(--ks-color-data-success-surface, #55bd6933)",
+        "surfaceDisabled": "var(--ks-color-data-success-surfaceDisabled, #55bd690d)"
+      },
+      "warning": {
+        "fill": "var(--ks-color-data-warning-fill, #f0c133)",
+        "fillDisabled": "var(--ks-color-data-warning-fillDisabled, #f0c13340)",
+        "fillMedHigh": "var(--ks-color-data-warning-fillMedHigh, #ba8b04)",
+        "fillMedHighDisabled": "var(--ks-color-data-warning-fillMedHighDisabled, #ba8b0440)",
+        "surface": "var(--ks-color-data-warning-surface, #fad25333)",
+        "surfaceDisabled": "var(--ks-color-data-warning-surfaceDisabled, #fad2530d)"
+      },
+      "error": {
+        "fill": "var(--ks-color-data-error-fill, #f78a7e)",
+        "fillDisabled": "var(--ks-color-data-error-fillDisabled, #f78a7e40)",
+        "fillMedHigh": "var(--ks-color-data-error-fillMedHigh, #f4655b)",
+        "fillMedHighDisabled": "var(--ks-color-data-error-fillMedHighDisabled, #f4655b40)",
+        "surface": "var(--ks-color-data-error-surface, #f78a7e33)",
+        "surfaceDisabled": "var(--ks-color-data-error-surfaceDisabled, #f78a7e0d)"
+      },
+      "neutral": {
+        "fill": "var(--ks-color-data-neutral-fill, #728DEC)",
+        "fillDisabled": "var(--ks-color-data-neutral-fillDisabled, #728dec40)",
+        "fillMedHigh": "var(--ks-color-data-neutral-fillMedHigh, #5e5f61)",
+        "fillMedHighDisabled": "var(--ks-color-data-neutral-fillMedHighDisabled, #5e5f6140)",
+        "surface": "var(--ks-color-data-neutral-surface, #a9abac33)",
+        "surfaceDisabled": "var(--ks-color-data-neutral-surfaceDisabled, #a9abac0d)"
+      }
+    },
+    "ai": {
+      "fill": "var(--ks-color-ai-fill, linear-gradient(90deg, #31bdb8 0%, #95AEFE 93.64%, #a1a1fa 186.35%))"
+    }
+  }
+} as const;
+export const darkKs = {
+  "color": {
+    "primary": {
+      "fill": "var(--ks-color-primary-fill, #009995)",
+      "fillHover": "var(--ks-color-primary-fillHover, #008581)",
+      "fillActive": "var(--ks-color-primary-fillActive, #007875)",
+      "fillDisabled": "var(--ks-color-primary-fillDisabled, #c3e9e7)",
+      "onFill": "var(--ks-color-primary-onFill, white)",
+      "fillLow": "var(--ks-color-primary-fillLow, #9ee1dd)",
+      "onFillLow": "var(--ks-color-primary-onFillLow, #002c2b)",
+      "onFillDisabled": "var(--ks-color-primary-onFillDisabled, white)",
+      "surface": "var(--ks-color-primary-surface, white)",
+      "surface1": "var(--ks-color-primary-surface1, #f2fdfc)",
+      "surface1Hover": "var(--ks-color-primary-surface1Hover, #e5efee)",
+      "surface1Active": "var(--ks-color-primary-surface1Active, #dee9e8)",
+      "surface2": "var(--ks-color-primary-surface2, #e8fbf9)",
+      "surface2Hover": "var(--ks-color-primary-surface2Hover, #dbedec)",
+      "surface2Active": "var(--ks-color-primary-surface2Active, #d4e7e5)",
+      "surface2Disabled": "var(--ks-color-primary-surface2Disabled, #e8fbf9)",
+      "surface3": "var(--ks-color-primary-surface3, #d7f2f0)",
+      "onSurface": "var(--ks-color-primary-onSurface, #017976)",
+      "onSurfaceHover": "var(--ks-color-primary-onSurfaceHover, #006663)",
+      "onSurfaceActive": "var(--ks-color-primary-onSurfaceActive, #005a57)",
+      "onSurfaceDisabled": "var(--ks-color-primary-onSurfaceDisabled, #a9abac)",
+      "transparentFill": "var(--ks-color-primary-transparentFill, #01797600)",
+      "transparentFillHover": "var(--ks-color-primary-transparentFillHover, #00666312)",
+      "transparentFillActive": "var(--ks-color-primary-transparentFillActive, #005a5724)",
+      "transparentFillDisabled": "var(--ks-color-primary-transparentFillDisabled, #01797600)"
+    },
+    "support": {
+      "fill": "var(--ks-color-support-fill, #8078f6)",
+      "fillLow": "var(--ks-color-support-fillLow, #cdcfff)",
+      "fillHover": "var(--ks-color-support-fillHover, #6f65e1)",
+      "fillActive": "var(--ks-color-support-fillActive, #6459d4)",
+      "fillDisabled": "var(--ks-color-support-fillDisabled, #dcdeff)",
+      "onFill": "var(--ks-color-support-onFill, white)",
+      "onFillLow": "var(--ks-color-support-onFillLow, #221f4b)",
+      "onFillDisabled": "var(--ks-color-support-onFillDisabled, white)",
+      "surface": "var(--ks-color-support-surface, white)",
+      "surface1": "var(--ks-color-support-surface1, #fbfaff)",
+      "surface2": "var(--ks-color-support-surface2, #f5f4ff)",
+      "surface2Hover": "var(--ks-color-support-surface2Hover, #e7e6f2)",
+      "surface2Active": "var(--ks-color-support-surface2Active, #e1e0eb)",
+      "surface3": "var(--ks-color-support-surface3, #e9ebff)",
+      "onSurface": "var(--ks-color-support-onSurface, #665cd6)",
+      "onSurfaceHover": "var(--ks-color-support-onSurfaceHover, #5749c2)",
+      "onSurfaceActive": "var(--ks-color-support-onSurfaceActive, #4d3cb5)",
+      "onSurfaceDisabled": "var(--ks-color-support-onSurfaceDisabled, #a1a1fa)"
+    },
+    "neutral": {
+      "fill": "var(--ks-color-neutral-fill, #87898b)",
+      "fillHover": "var(--ks-color-neutral-fillHover, #767779)",
+      "fillActive": "var(--ks-color-neutral-fillActive, #6a6c6e)",
+      "fillDisabled": "var(--ks-color-neutral-fillDisabled, #e1e1e2)",
+      "onFill": "var(--ks-color-neutral-onFill, white)",
+      "onFillDisabled": "var(--ks-color-neutral-onFillDisabled, white)",
+      "fillHigh": "var(--ks-color-neutral-fillHigh, #262627)",
+      "fillHighHover": "var(--ks-color-neutral-fillHighHover, #353536)",
+      "fillHighActive": "var(--ks-color-neutral-fillHighActive, #3f4041)",
+      "fillHighDisabled": "var(--ks-color-neutral-fillHighDisabled, #e1e1e2)",
+      "fillMedHigh": "var(--ks-color-neutral-fillMedHigh, #404142)",
+      "fillMedHighHover": "var(--ks-color-neutral-fillMedHighHover, #505152)",
+      "fillMedHighActive": "var(--ks-color-neutral-fillMedHighActive, #5b5c5d)",
+      "fillMedHighDisabled": "var(--ks-color-neutral-fillMedHighDisabled, #e1e1e2)",
+      "fillLow": "var(--ks-color-neutral-fillLow, #d3d4d5)",
+      "fillLowHover": "var(--ks-color-neutral-fillLowHover, #c0c1c1)",
+      "fillLowActive": "var(--ks-color-neutral-fillLowActive, #b3b4b5)",
+      "fillLowDisabled": "var(--ks-color-neutral-fillLowDisabled, #e1e1e2)",
+      "fillLowInverse": "var(--ks-color-neutral-fillLowInverse, #ececed)",
+      "fillLowInverseHover": "var(--ks-color-neutral-fillLowInverseHover, #f2f3f3)",
+      "fillLowInverseActive": "var(--ks-color-neutral-fillLowInverseActive, #f8f8f9)",
+      "onFillLow": "var(--ks-color-neutral-onFillLow, #262627)",
+      "surface": "var(--ks-color-neutral-surface, white)",
+      "surfaceHover": "var(--ks-color-neutral-surfaceHover, #f1f2f2)",
+      "surfaceActive": "var(--ks-color-neutral-surfaceActive, #ebebeb)",
+      "surface1": "var(--ks-color-neutral-surface1, #f8f8f9)",
+      "surface1Hover": "var(--ks-color-neutral-surface1Hover, #ebebeb)",
+      "surface1Active": "var(--ks-color-neutral-surface1Active, #e4e4e5)",
+      "surface2": "var(--ks-color-neutral-surface2, #f2f3f3)",
+      "surface2Hover": "var(--ks-color-neutral-surface2Hover, #e5e5e6)",
+      "surface2Active": "var(--ks-color-neutral-surface2Active, #dfdfdf)",
+      "surface2Disabled": "var(--ks-color-neutral-surface2Disabled, #f8f8f9)",
+      "surface3": "var(--ks-color-neutral-surface3, #ececed)",
+      "surface3Hover": "var(--ks-color-neutral-surface3Hover, #dfdfe0)",
+      "surface3Active": "var(--ks-color-neutral-surface3Active, #d8d9d9)",
+      "surface3Disabled": "var(--ks-color-neutral-surface3Disabled, #f8f8f9)",
+      "onSurface": "var(--ks-color-neutral-onSurface, #6d6e70)",
+      "onSurfaceHover": "var(--ks-color-neutral-onSurfaceHover, #5c5d5f)",
+      "onSurfaceActive": "var(--ks-color-neutral-onSurfaceActive, #515254)",
+      "onSurfaceDisabled": "var(--ks-color-neutral-onSurfaceDisabled, #a9abac)",
+      "highOnSurface": "var(--ks-color-neutral-highOnSurface, #121415)",
+      "highOnSurfaceHover": "var(--ks-color-neutral-highOnSurfaceHover, #242728)",
+      "highOnSurfaceActive": "var(--ks-color-neutral-highOnSurfaceActive, #2e3132)",
+      "highOnSurfaceDisabled": "var(--ks-color-neutral-highOnSurfaceDisabled, #a9abac)",
+      "lowOnSurface": "var(--ks-color-neutral-lowOnSurface, #87898B)",
+      "lowOnSurfaceHover": "var(--ks-color-neutral-lowOnSurfaceHover, #757779)",
+      "lowOnSurfaceActive": "var(--ks-color-neutral-lowOnSurfaceActive, 6A6C6E)",
+      "lowOnSurfaceDisabled": "var(--ks-color-neutral-lowOnSurfaceDisabled, #a9abac)",
+      "overlay": "var(--ks-color-neutral-overlay, #26262780)",
+      "overlayHigh": "var(--ks-color-neutral-overlayHigh, #262627b3)",
+      "overlayHighDisabled": "var(--ks-color-neutral-overlayHighDisabled, #e1e1e2)",
+      "overlayLow": "var(--ks-color-neutral-overlayLow, #26262726)",
+      "overlayLowDisabled": "var(--ks-color-neutral-overlayLowDisabled, #12141512)",
+      "transparentFill": "var(--ks-color-neutral-transparentFill, #12141500)",
+      "transparentFillHover": "var(--ks-color-neutral-transparentFillHover, #12141512)",
+      "transparentFillActive": "var(--ks-color-neutral-transparentFillActive, #12141524)",
+      "transparentFillDisabled": "var(--ks-color-neutral-transparentFillDisabled, #12141500)"
+    },
+    "error": {
+      "fill": "var(--ks-color-error-fill, #ef504b)",
+      "fillHover": "var(--ks-color-error-fillHover, #da3a39)",
+      "fillActive": "var(--ks-color-error-fillActive, #cb2a2d)",
+      "fillDisabled": "var(--ks-color-error-fillDisabled, #ffd8d2)",
+      "fillMedHigh": "var(--ks-color-error-fillMedHigh, #ca242e)",
+      "fillMedHighHover": "var(--ks-color-error-fillMedHighHover, #b3001c)",
+      "fillMedHighActive": "var(--ks-color-error-fillMedHighActive, #9f0018)",
+      "onFill": "var(--ks-color-error-onFill, white)",
+      "fillLow": "var(--ks-color-error-fillLow, #ffc6bd)",
+      "onFillLow": "var(--ks-color-error-onFillLow, #4e0c0b)",
+      "surface": "var(--ks-color-error-surface, white)",
+      "surface1": "var(--ks-color-error-surface1, #fff9f8)",
+      "surface2": "var(--ks-color-error-surface2, #fff2f0)",
+      "surface2Hover": "var(--ks-color-error-surface2Hover, #f2e5e2)",
+      "surface2Active": "var(--ks-color-error-surface2Active, #ebdedc)",
+      "surface3": "var(--ks-color-error-surface3, #ffe7e3)",
+      "onSurface": "var(--ks-color-error-onSurface, #ca242e)",
+      "onSurfaceHover": "var(--ks-color-error-onSurfaceHover, #b3001c)",
+      "onSurfaceActive": "var(--ks-color-error-onSurfaceActive, #9f0018)"
+    },
+    "warning": {
+      "fill": "var(--ks-color-warning-fill, #d2a106)",
+      "fillHover": "var(--ks-color-warning-fillHover, #bc8f00)",
+      "fillActive": "var(--ks-color-warning-fillActive, #ad8400)",
+      "fillDisabled": "var(--ks-color-warning-fillDisabled, #fbde89)",
+      "onFill": "var(--ks-color-warning-onFill, white)",
+      "fillLow": "var(--ks-color-warning-fillLow, #fad253)",
+      "onFillLow": "var(--ks-color-warning-onFillLow, #201507)",
+      "surface": "var(--ks-color-warning-surface, white)",
+      "surface1": "var(--ks-color-warning-surface1, #fffbec)",
+      "surface2": "var(--ks-color-warning-surface2, #fdf5da)",
+      "surface2Hover": "var(--ks-color-warning-surface2Hover, #f0e7cd)",
+      "surface2Active": "var(--ks-color-warning-surface2Active, #e9e1c7)",
+      "surface3": "var(--ks-color-warning-surface3, #fbebbc)",
+      "onSurface": "var(--ks-color-warning-onSurface, #8d670b)",
+      "onSurfaceHover": "var(--ks-color-warning-onSurfaceHover, #785600)",
+      "onSurfaceActive": "var(--ks-color-warning-onSurfaceActive, #6a4c00)"
+    },
+    "success": {
+      "fill": "var(--ks-color-success-fill, #2a9c49)",
+      "onFill": "var(--ks-color-success-onFill, white)",
+      "fillHover": "var(--ks-color-success-fillHover, #068a37)",
+      "fillActive": "var(--ks-color-success-fillActive, #007c30)",
+      "fillDisabled": "var(--ks-color-success-fillDisabled, #baecbf)",
+      "fillLow": "var(--ks-color-success-fillLow, #99e4a2)",
+      "onFillLow": "var(--ks-color-success-onFillLow, #052d0f)",
+      "surface": "var(--ks-color-success-surface, white)",
+      "surface1": "var(--ks-color-success-surface1, #effff0)",
+      "surface2": "var(--ks-color-success-surface2, #e7fde8)",
+      "surface2Hover": "var(--ks-color-success-surface2Hover, #daf0db)",
+      "surface2Active": "var(--ks-color-success-surface2Active, #d3e9d5)",
+      "surface3": "var(--ks-color-success-surface3, #ddf9df)",
+      "onSurface": "var(--ks-color-success-onSurface, #057e33)",
+      "onSurfaceHover": "var(--ks-color-success-onSurfaceHover, #006b29)",
+      "onSurfaceActive": "var(--ks-color-success-onSurfaceActive, #005e23)"
+    },
+    "data": {
+      "data1": {
+        "fill": "var(--ks-color-data-data1-fill, #8987f6)",
+        "fillDisabled": "var(--ks-color-data-data1-fillDisabled, #dcdeff)",
+        "fillHigh": "var(--ks-color-data-data1-fillHigh, #665cd6)",
+        "surface": "var(--ks-color-data-data1-surface, #a1a1fa33)",
+        "surfaceDisabled": "var(--ks-color-data-data1-surfaceDisabled, #a1a1fa0d)"
+      },
+      "data2": {
+        "fill": "var(--ks-color-data-data2-fill, #00577D)",
+        "fillDisabled": "var(--ks-color-data-data2-fillDisabled, #CAE6FC)",
+        "surface": "var(--ks-color-data-data2-surface, #7cc0ed33)",
+        "surfaceDisabled": "var(--ks-color-data-data2-surfaceDisabled, #7cc0ed0d)"
+      },
+      "data3": {
+        "fill": "var(--ks-color-data-data3-fill, #E3CBE1)",
+        "fillDisabled": "var(--ks-color-data-data3-fillDisabled, #EBDCE9)",
+        "fillMedHigh": "var(--ks-color-data-data3-fillMedHigh, #B87BB4)",
+        "fillMedHighDisabled": "var(--ks-color-data-data3-fillMedHighDisabled, #EBDCE9)",
+        "fillHigh": "var(--ks-color-data-data3-fillHigh, #442942)",
+        "surface": "var(--ks-color-data-data3-surface, #d19dcd33)",
+        "surfaceDisabled": "var(--ks-color-data-data3-surfaceDisabled, #d19dcd0d)"
+      },
+      "data4": {
+        "fill": "var(--ks-color-data-data4-fill, #A45626)",
+        "fillDisabled": "var(--ks-color-data-data4-fillDisabled, #F8DBCC)",
+        "fillHigh": "var(--ks-color-data-data4-fillHigh, #623216)",
+        "surface": "var(--ks-color-data-data4-surface, #f69c6b33)",
+        "surfaceDisabled": "var(--ks-color-data-data4-surfaceDisabled, #f69c6b0d)"
+      },
+      "data5": {
+        "fill": "var(--ks-color-data-data5-fill, #98CCF0)",
+        "fillDisabled": "var(--ks-color-data-data5-fillDisabled, #CAE6FC)",
+        "fillMedHigh": "var(--ks-color-data-data5-fillMedHigh, #3D9FD4)",
+        "fillMedHighDisabled": "var(--ks-color-data-data5-fillMedHighDisabled, #CAE6FC)",
+        "fillHigh": "var(--ks-color-data-data5-fillHigh, #0074A6)",
+        "surface": "var(--ks-color-data-data5-surface, #b0dbfa33)",
+        "surfaceDisabled": "var(--ks-color-data-data5-surfaceDisabled, #b0dbfa0d)"
+      },
+      "data6": {
+        "fill": "var(--ks-color-data-data6-fill, #5548bd)",
+        "fillDisabled": "var(--ks-color-data-data6-fillDisabled, #5548bd40)",
+        "fillHigh": "var(--ks-color-data-data6-fillHigh, #473aa5)",
+        "surface": "var(--ks-color-data-data6-surface, #cdcfff33)",
+        "surfaceDisabled": "var(--ks-color-data-data6-surfaceDisabled, #cdcfff0d)"
+      },
+      "data7": {
+        "fill": "var(--ks-color-data-data7-fill, #F8DBCC)",
+        "fillDisabled": "var(--ks-color-data-data7-fillDisabled, #f8dbcc40)",
+        "fillMedHigh": "var(--ks-color-data-data7-fillMedHigh, #D7763E)",
+        "fillMedHighDisabled": "var(--ks-color-data-data7-fillMedHighDisabled, #d7763e40)",
+        "fillHigh": "var(--ks-color-data-data7-fillHigh, #A45626)",
+        "surface": "var(--ks-color-data-data7-surface, #f7c9b133)",
+        "surfaceDisabled": "var(--ks-color-data-data7-surfaceDisabled, #f7c9b10d)"
+      },
+      "data8": {
+        "fill": "var(--ks-color-data-data8-fill, #664163)",
+        "fillDisabled": "var(--ks-color-data-data8-fillDisabled, #66416340)",
+        "fillHigh": "var(--ks-color-data-data8-fillHigh, #533451)",
+        "surface": "var(--ks-color-data-data8-surface, #e3cbe133)",
+        "surfaceDisabled": "var(--ks-color-data-data8-surfaceDisabled, #e3cbe10d)"
+      },
+      "data9": {
+        "fill": "var(--ks-color-data-data9-fill, #babdff)",
+        "fillDisabled": "var(--ks-color-data-data9-fillDisabled, #babdff40)",
+        "fillMedHigh": "var(--ks-color-data-data9-fillMedHigh, #3a3086)",
+        "fillMedHighDisabled": "var(--ks-color-data-data9-fillMedHighDisabled, #3a308640)",
+        "fillHigh": "var(--ks-color-data-data9-fillHigh, #221f4b)",
+        "surface": "var(--ks-color-data-data9-surface, #8987f633)",
+        "surfaceDisabled": "var(--ks-color-data-data9-surfaceDisabled, #8987f60d)",
+        "onSurface": "var(--ks-color-data-data9-onSurface, #8987f6)"
+      },
+      "success": {
+        "fill": "var(--ks-color-data-success-fill, #2a9c49)",
+        "fillHigh": "var(--ks-color-data-success-fillHigh, #035d23)",
+        "fillDisabled": "var(--ks-color-data-success-fillDisabled, #2a9c4940)",
+        "surface": "var(--ks-color-data-success-surface, #55bd6933)",
+        "surfaceDisabled": "var(--ks-color-data-success-surfaceDisabled, #55bd690d)"
+      },
+      "warning": {
+        "fill": "var(--ks-color-data-warning-fill, #f0c133)",
+        "fillDisabled": "var(--ks-color-data-warning-fillDisabled, #f0c13340)",
+        "fillMedHigh": "var(--ks-color-data-warning-fillMedHigh, #ba8b04)",
+        "fillMedHighDisabled": "var(--ks-color-data-warning-fillMedHighDisabled, #ba8b0440)",
+        "surface": "var(--ks-color-data-warning-surface, #fad25333)",
+        "surfaceDisabled": "var(--ks-color-data-warning-surfaceDisabled, #fad2530d)"
+      },
+      "error": {
+        "fill": "var(--ks-color-data-error-fill, #f78a7e)",
+        "fillDisabled": "var(--ks-color-data-error-fillDisabled, #f78a7e40)",
+        "fillMedHigh": "var(--ks-color-data-error-fillMedHigh, #f4655b)",
+        "fillMedHighDisabled": "var(--ks-color-data-error-fillMedHighDisabled, #f4655b40)",
+        "surface": "var(--ks-color-data-error-surface, #f78a7e33)",
+        "surfaceDisabled": "var(--ks-color-data-error-surfaceDisabled, #f78a7e0d)"
+      },
+      "neutral": {
+        "fill": "var(--ks-color-data-neutral-fill, #728DEC)",
+        "fillDisabled": "var(--ks-color-data-neutral-fillDisabled, #728dec40)",
+        "fillMedHigh": "var(--ks-color-data-neutral-fillMedHigh, #5e5f61)",
+        "fillMedHighDisabled": "var(--ks-color-data-neutral-fillMedHighDisabled, #5e5f6140)",
+        "surface": "var(--ks-color-data-neutral-surface, #a9abac33)",
+        "surfaceDisabled": "var(--ks-color-data-neutral-surfaceDisabled, #a9abac0d)"
+      }
+    },
+    "ai": {
+      "fill": "var(--ks-color-ai-fill, linear-gradient(90deg, #31bdb8 0%, #95AEFE 93.64%, #a1a1fa 186.35%))"
+    }
+  }
+} as const;
+export { getCSSVariableValue } from './getCSSVariableValue.js';
+
+export * from './getCSSVariableValue';
diff --git a/packages/vchart-keystone-theme/tsconfig.test.json b/packages/vchart-keystone-theme/tsconfig.test.json
new file mode 100644
index 0000000..89f837a
--- /dev/null
+++ b/packages/vchart-keystone-theme/tsconfig.test.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@visactor/vchart-theme-utils": ["../vchart-theme-utils/src"]
+    }
+  },
+  "references": []
+}

From 914c1161ad3b109711b5ef8f1be55635a5572631 Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 17:58:18 -0700
Subject: [PATCH 3/9] feat: migrate keystone theme utilities

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../__tests__/index.test.ts                   |  28 ++
 .../vchart-keystone-theme/src/common/index.ts |   1 +
 .../vchart-keystone-theme/src/common/theme.ts | 443 ++++++++++++++++++
 3 files changed, 472 insertions(+)
 create mode 100644 packages/vchart-keystone-theme/src/common/index.ts
 create mode 100644 packages/vchart-keystone-theme/src/common/theme.ts

diff --git a/packages/vchart-keystone-theme/__tests__/index.test.ts b/packages/vchart-keystone-theme/__tests__/index.test.ts
index e129c63..f953452 100644
--- a/packages/vchart-keystone-theme/__tests__/index.test.ts
+++ b/packages/vchart-keystone-theme/__tests__/index.test.ts
@@ -1,4 +1,5 @@
 import { getCSSVariableValue, ks } from '../src/design-tokens';
+import { getBarTheme, getTheme, theme } from '../src/common';
 
 describe('vchart-keystone-theme design tokens', () => {
   beforeEach(() => {
@@ -21,3 +22,30 @@ describe('vchart-keystone-theme design tokens', () => {
     expect(getCSSVariableValue('var(--ks-test-color)').trim()).toBe('#123456');
   });
 });
+
+describe('vchart-keystone-theme common theme utilities', () => {
+  it('exports the Keystone chart theme defaults', () => {
+    expect(theme.component?.axis?.label?.style?.fontFamily).toBe('TikTok Sans Text');
+    expect(theme.component?.discreteLegend?.item?.shape?.style?.symbolType).toBe('circle');
+    expect(theme.chart?.pie?.mark?.arc?.style?.padAngle).toBe(0.01);
+    expect(theme.markByName?.area?.style?.fillOpacity).toBe(0.2);
+  });
+
+  it('creates a theme with legend size and RTL settings', () => {
+    const rtlTheme = getTheme({ legendSize: 'lg', isRtl: true });
+    expect(rtlTheme.component?.discreteLegend?.position).toBe('start');
+    expect(rtlTheme.component?.discreteLegend?.reversed).toBe(true);
+    expect(rtlTheme.component?.discreteLegend?.item?.shape?.style?.size).toBe(8);
+  });
+
+  it('creates a bar theme with non-stacked corner radius', () => {
+    const barTheme = getBarTheme({
+      stack: false,
+      size: 'md',
+      direction: 'vertical',
+      legendSize: 'md',
+      isRtl: false
+    });
+    expect(barTheme.markByName?.bar?.style?.cornerRadius).toEqual([4, 4, 0, 0]);
+  });
+});
diff --git a/packages/vchart-keystone-theme/src/common/index.ts b/packages/vchart-keystone-theme/src/common/index.ts
new file mode 100644
index 0000000..7b1f54e
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/common/index.ts
@@ -0,0 +1 @@
+export * from './theme';
diff --git a/packages/vchart-keystone-theme/src/common/theme.ts b/packages/vchart-keystone-theme/src/common/theme.ts
new file mode 100644
index 0000000..b1963b4
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/common/theme.ts
@@ -0,0 +1,443 @@
+import { ITheme } from '@visactor/vchart';
+import { getCSSVariableValue } from '../design-tokens';
+
+type KeystoneTheme = ITheme & {
+  component?: any;
+  chart?: any;
+  markByName?: any;
+};
+
+const isPlainObject = (value: unknown): value is Record<string, any> =>
+  Object.prototype.toString.call(value) === '[object Object]';
+
+const merge = <T extends Record<string, any>, U extends Record<string, any>>(target: T, source: U): T & U => {
+  Object.keys(source).forEach(key => {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
+      merge(targetValue, sourceValue);
+    } else {
+      (target as Record<string, any>)[key] = sourceValue;
+    }
+  });
+  return target as T & U;
+};
+
+export const theme = {
+  colorScheme: {
+    default: Array.from({ length: 9 }, (_, i) => i + 1).map((i) =>
+      getCSSVariableValue(`--ks-color-data-data${i}-fill`),
+    ),
+  },
+  component: {
+    axis: {
+      label: {
+        style: {
+          fontFamily: 'TikTok Sans Text',
+          pointerEvents: 'auto',
+          color: getCSSVariableValue('--ks-ref-color-neutral-500'),
+          fontSize: 12,
+          fontStyle: 'normal',
+          fontWeight: 400,
+          lineHeight: 16,
+        },
+      },
+      domainLine: {
+        style: {
+          stroke: getCSSVariableValue('--ks-ref-color-neutral-650'),
+          strokeOpacity: 1,
+          lineWidth: 0.5,
+        },
+      },
+      tick: {
+        inside: false,
+        style: {
+          stroke: getCSSVariableValue('--ks-ref-color-neutral-650'),
+          strokeOpacity: 1,
+          lineWidth: 0.5,
+        },
+      },
+      grid: {
+        style: {
+          stroke: getCSSVariableValue('--ks-ref-color-neutral-900'),
+          strokeOpacity: 1,
+          lineWidth: 0.5,
+        },
+      },
+      title: {
+        position: 'start',
+        angle: 0,
+        padding: [20, 0, 0, 0],
+        style: {
+          textAlign: 'start',
+          dy: -20,
+          dx: 0,
+          pointerEvents: 'auto',
+          fill: getCSSVariableValue('--ks-ref-color-neutral-400'),
+          fontSize: 12,
+          fontStyle: 'normal',
+          fontWeight: 400,
+          lineHeight: 16,
+        },
+      },
+    },
+    discreteLegend: {
+      position: 'end',
+      orient: 'top',
+      padding: 0,
+      item: {
+        spaceRow: 16,
+        shape: {
+          space: 4,
+          style: {
+            symbolType: 'circle',
+            size: 6,
+          },
+        },
+        label: {
+          style: {
+            pointerEvents: 'auto',
+            color: getCSSVariableValue('--ks-ref-color-neutral-500'),
+            fontSize: 12,
+            fontStyle: 'normal',
+            fontWeight: 400,
+            lineHeight: 16,
+            letterSpacing: 0.161,
+          },
+        },
+      },
+    },
+    crosshair: {
+      xField: {
+        line: {
+          type: 'line',
+        },
+      },
+    },
+    tooltip: {
+      panel: {
+        backgroundColor: getCSSVariableValue('--ks-ref-color-neutral-200'),
+        border: {
+          radius: 4,
+        },
+      },
+      titleLabel: {
+        fontColor: getCSSVariableValue('--ks-ref-color-white'),
+        fontSize: 12,
+        fontWeight: 400,
+        lineHeight: 16,
+      },
+      keyLabel: {
+        fontColor: getCSSVariableValue('--ks-ref-color-neutral-500'),
+        fontSize: 12,
+        fontWeight: 400,
+        lineHeight: 16,
+      },
+      valueLabel: {
+        fontColor: getCSSVariableValue('--ks-ref-color-white'),
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: 16,
+        textAlign: 'center',
+        spacing: 0,
+      },
+      group: {
+        shapeType: 'circle',
+      },
+    },
+  },
+  chart: {
+    line: {
+      component: {
+        crosshair: {
+          xField: {
+            visible: false,
+            line: {
+              type: 'line',
+              style: {
+                lineWidth: 1,
+                stroke: getCSSVariableValue('--ks-ref-color-neutral-350'),
+                strokeOpacity: 1,
+                lineDash: [2, 2],
+              },
+            },
+          },
+          yField: {
+            visible: false,
+          },
+        },
+      },
+      markByName: {
+        point: {
+          style: {
+            size: 0,
+            innerBorder: {
+              stroke: getCSSVariableValue('--ks-ref-color-white'),
+              distance: 3,
+              lineWidth: 2,
+            },
+          },
+          state: {
+            dimension_hover: {
+              size: 8,
+              innerBorder: {
+                stroke: getCSSVariableValue('--ks-ref-color-white'),
+                distance: 3,
+                lineWidth: 2,
+              },
+            },
+            hover: {
+              size: 8,
+              innerBorder: {
+                distance: 1,
+                lineWidth: 0,
+              },
+            },
+          },
+        },
+      },
+    },
+    area: {
+      component: {
+        crosshair: {
+          xField: {
+            visible: false,
+            line: {
+              type: 'line',
+              style: {
+                lineWidth: 1,
+                stroke: getCSSVariableValue('--ks-ref-color-neutral-350'),
+                strokeOpacity: 1,
+                lineDash: [2, 2],
+              },
+            },
+          },
+          yField: {
+            visible: false,
+          },
+        },
+      },
+      markByName: {
+        point: {
+          style: {
+            size: 0,
+            innerBorder: {
+              stroke: getCSSVariableValue('--ks-ref-color-white'),
+              distance: 3,
+              lineWidth: 2,
+            },
+          },
+          state: {
+            dimension_hover: {
+              size: 8,
+              innerBorder: {
+                stroke: getCSSVariableValue('--ks-ref-color-white'),
+                distance: 3,
+                lineWidth: 2,
+              },
+            },
+            hover: {
+              size: 10,
+              innerBorder: {
+                distance: 1,
+                lineWidth: 0,
+              },
+            },
+          },
+        },
+      },
+    },
+    bar: {
+      component: {
+        crosshair: {
+          xField: {
+            visible: false,
+            line: {
+              type: 'rect',
+              style: {
+                fill: '#F1F2F2',
+              },
+              width: '110%',
+            },
+          } as any,
+          yField: {
+            visible: false,
+          },
+        },
+      },
+    },
+    pie: {
+      markByName: {
+        label: {
+          visible: true,
+          style: {
+            type: 'text',
+            html: (data: any) => ({
+              pointerEvents: 'auto',
+              dom: data.value,
+            }),
+            react: (data: any) => ({
+              pointerEvents: 'auto',
+              element: data.value,
+            }),
+          },
+        },
+      },
+      mark: {
+        arc: {
+          style: {
+            padAngle: 0.01,
+          },
+        },
+      },
+    },
+    common: {
+      markByName: {
+        point: {
+          style: {
+            size: 0,
+            innerBorder: {
+              stroke: getCSSVariableValue('--ks-ref-color-white'),
+              distance: 3,
+              lineWidth: 2,
+            },
+          },
+          state: {
+            dimension_hover: {
+              size: 8,
+              innerBorder: {
+                stroke: getCSSVariableValue('--ks-ref-color-white'),
+                distance: 3,
+                lineWidth: 2,
+              },
+            },
+            hover: {
+              size: 10,
+              innerBorder: {
+                distance: 1,
+                lineWidth: 0,
+              },
+            },
+          },
+        },
+      },
+      series: {
+        // pie: {
+        //   label: {
+        //     visible: true,
+        //     style: {
+        //       type: 'text',
+        //       formatMethod: () => '',
+        //       fillOpacity: 0,
+        //       html: (data: any) => ({
+        //         pointerEvents: 'auto',
+        //         dom: `${data.value}%`,
+        //         style: {
+        //           fontSize: '12px',
+        //           fontStyle: 'normal',
+        //           fontWeight: 400,
+        //           color: getCSSVariableValue('--ks-ref-color-neutral-450'),
+        //           letterSpacing: '0.161px',
+        //           lineHeight: '16px',
+        //           height: 16,
+        //         },
+        //       }),
+        //     },
+        //     line: {
+        //       zIndex: 0,
+        //       style: {
+        //         stroke: getCSSVariableValue('--ks-ref-color-neutral-900'),
+        //       },
+        //     },
+        //   },
+        // },
+      },
+    },
+  },
+  markByName: {
+    area: {
+      style: {
+        fillOpacity: 0.2,
+      },
+    },
+  },
+} as KeystoneTheme;
+
+export const cornerRadiusSizeMap = {
+  vertical: {
+    xs: [2, 2, 0, 0],
+    sm: [4, 4, 0, 0],
+    md: [4, 4, 0, 0],
+    lg: [4, 4, 0, 0],
+    xl: [4, 4, 0, 0],
+  },
+  horizontal: {
+    xs: [0, 2, 2, 0],
+    sm: [0, 4, 4, 0],
+    md: [0, 4, 4, 0],
+    lg: [0, 4, 4, 0],
+    xl: [0, 4, 4, 0],
+  },
+};
+export const widthSizeMap = {
+  xs: 8,
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 40,
+};
+export const getBarTheme = ({
+  stack: isStack,
+  size,
+  direction = 'vertical',
+  legendSize = 'md',
+  isRtl = false,
+}: {
+  stack: boolean;
+  size: keyof (typeof cornerRadiusSizeMap)['horizontal'];
+  direction: 'vertical' | 'horizontal';
+  legendSize: LegendSize;
+  isRtl: boolean;
+}) => {
+  // const widthStyle = direction === 'vertical' ? 'width' : 'height';
+  const barTheme = {
+    ...getTheme({ legendSize, isRtl }),
+    markByName: {
+      ...theme.markByName,
+      bar: {
+        style: {
+          cornerRadius: !isStack ? cornerRadiusSizeMap[direction][size] : undefined,
+          // [widthStyle]: widthSizeMap[size],
+        },
+      },
+    },
+  };
+  return barTheme as ITheme;
+};
+
+export type LegendSize = 'md' | 'lg';
+
+export const legendSizeMap = {
+  md: 6,
+  lg: 8,
+};
+export const getTheme = ({ legendSize = 'md', isRtl = false }: { legendSize: LegendSize; isRtl?: boolean }): KeystoneTheme =>
+  merge(theme, {
+    component: {
+      discreteLegend: {
+        position: isRtl ? 'start' : 'end',
+        orient: 'top',
+        reversed: isRtl,
+        item: {
+          spaceRow: 16,
+          shape: {
+            space: 4,
+            style: {
+              symbolType: 'circle',
+              size: legendSizeMap[legendSize],
+            },
+          },
+        },
+      },
+    },
+  }) as ITheme;

From 61e3ca7be7550a8853ca086acc3656c4b4c47024 Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 18:13:02 -0700
Subject: [PATCH 4/9] feat: add keystone vchart theme API

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../__tests__/index.test.ts                   | 32 +++++++++++++++++++
 packages/vchart-keystone-theme/jest.setup.js  | 22 +++++++++++++
 .../vchart-keystone-theme/src/common/theme.ts |  2 +-
 .../vchart-keystone-theme/src/dark/index.ts   |  9 ++++++
 packages/vchart-keystone-theme/src/index.ts   | 16 ++++++++++
 .../vchart-keystone-theme/src/interface.ts    |  3 ++
 .../vchart-keystone-theme/src/light/index.ts  |  9 ++++++
 .../vchart-keystone-theme/src/theme-helper.ts | 27 ++++++++++++++++
 .../vchart-keystone-theme/src/theme-map.ts    |  8 +++++
 9 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 packages/vchart-keystone-theme/src/dark/index.ts
 create mode 100644 packages/vchart-keystone-theme/src/index.ts
 create mode 100644 packages/vchart-keystone-theme/src/interface.ts
 create mode 100644 packages/vchart-keystone-theme/src/light/index.ts
 create mode 100644 packages/vchart-keystone-theme/src/theme-helper.ts
 create mode 100644 packages/vchart-keystone-theme/src/theme-map.ts

diff --git a/packages/vchart-keystone-theme/__tests__/index.test.ts b/packages/vchart-keystone-theme/__tests__/index.test.ts
index f953452..f5a5ba2 100644
--- a/packages/vchart-keystone-theme/__tests__/index.test.ts
+++ b/packages/vchart-keystone-theme/__tests__/index.test.ts
@@ -1,5 +1,12 @@
 import { getCSSVariableValue, ks } from '../src/design-tokens';
 import { getBarTheme, getTheme, theme } from '../src/common';
+import {
+  allThemeMap,
+  initVChartKeystoneTheme,
+  keystoneDesignDark,
+  keystoneDesignLight,
+  VChartKeystoneThemeHelper
+} from '../src';
 
 describe('vchart-keystone-theme design tokens', () => {
   beforeEach(() => {
@@ -49,3 +56,28 @@ describe('vchart-keystone-theme common theme utilities', () => {
     expect(barTheme.markByName?.bar?.style?.cornerRadius).toEqual([4, 4, 0, 0]);
   });
 });
+
+describe('vchart-keystone-theme public API', () => {
+  it('exports light and dark Keystone themes', () => {
+    expect(keystoneDesignLight.name).toBe('keystoneDesignLight');
+    expect(keystoneDesignLight.type).toBe('light');
+    expect(keystoneDesignLight.description).toBe('Keystone Design - light');
+    expect(keystoneDesignLight.component?.axis?.label?.style?.fontFamily).toBe('TikTok Sans Text');
+
+    expect(keystoneDesignDark.name).toBe('keystoneDesignDark');
+    expect(keystoneDesignDark.type).toBe('dark');
+    expect(keystoneDesignDark.description).toBe('Keystone Design - dark');
+    expect(keystoneDesignDark.component?.axis?.label?.style?.fontFamily).toBe('TikTok Sans Text');
+  });
+
+  it('exports all themes in allThemeMap', () => {
+    expect(allThemeMap.get('keystoneDesignLight')).toBe(keystoneDesignLight);
+    expect(allThemeMap.get('keystoneDesignDark')).toBe(keystoneDesignDark);
+  });
+
+  it('initializes through the Keystone helper', () => {
+    const helper = initVChartKeystoneTheme();
+    expect(helper).toBeInstanceOf(VChartKeystoneThemeHelper);
+    expect(VChartKeystoneThemeHelper.themeNamePrefix).toBe('keystoneDesign');
+  });
+});
diff --git a/packages/vchart-keystone-theme/jest.setup.js b/packages/vchart-keystone-theme/jest.setup.js
index fd8a20e..1fd58b2 100644
--- a/packages/vchart-keystone-theme/jest.setup.js
+++ b/packages/vchart-keystone-theme/jest.setup.js
@@ -1,4 +1,5 @@
 const styleProperties = new Map();
+const bodyAttributes = new Map();
 
 const style = {
   setProperty(name, value) {
@@ -9,12 +10,33 @@ const style = {
   }
 };
 
+const body = {
+  hasAttribute(name) {
+    return bodyAttributes.has(name);
+  },
+  getAttribute(name) {
+    return bodyAttributes.get(name) || null;
+  },
+  setAttribute(name, value) {
+    bodyAttributes.set(name, value);
+  },
+  removeAttribute(name) {
+    bodyAttributes.delete(name);
+  }
+};
+
 global.document = {
+  body,
   documentElement: {
     style
   }
 };
 
+global.MutationObserver = class MutationObserver {
+  observe() {}
+  disconnect() {}
+};
+
 global.getComputedStyle = () => ({
   getPropertyValue(name) {
     return styleProperties.get(name) || '';
diff --git a/packages/vchart-keystone-theme/src/common/theme.ts b/packages/vchart-keystone-theme/src/common/theme.ts
index b1963b4..d88e59c 100644
--- a/packages/vchart-keystone-theme/src/common/theme.ts
+++ b/packages/vchart-keystone-theme/src/common/theme.ts
@@ -1,7 +1,7 @@
 import { ITheme } from '@visactor/vchart';
 import { getCSSVariableValue } from '../design-tokens';
 
-type KeystoneTheme = ITheme & {
+export type KeystoneTheme = ITheme & {
   component?: any;
   chart?: any;
   markByName?: any;
diff --git a/packages/vchart-keystone-theme/src/dark/index.ts b/packages/vchart-keystone-theme/src/dark/index.ts
new file mode 100644
index 0000000..b7c77e0
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/dark/index.ts
@@ -0,0 +1,9 @@
+import type { KeystoneTheme } from '../common';
+import { theme } from '../common';
+
+export const keystoneDesignDark: KeystoneTheme = {
+  ...theme,
+  name: 'keystoneDesignDark',
+  description: 'Keystone Design - dark',
+  type: 'dark'
+};
diff --git a/packages/vchart-keystone-theme/src/index.ts b/packages/vchart-keystone-theme/src/index.ts
new file mode 100644
index 0000000..6a2d14b
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/index.ts
@@ -0,0 +1,16 @@
+import type { IInitVChartKeystoneThemeOption } from './interface';
+import { VChartKeystoneThemeHelper } from './theme-helper';
+
+export * from './common';
+export * from './design-tokens';
+export * from './interface';
+export * from './theme-helper';
+export * from './theme-map';
+export * from './light';
+export * from './dark';
+
+export const initVChartKeystoneTheme = (options?: IInitVChartKeystoneThemeOption) => {
+  const helper = new VChartKeystoneThemeHelper(options ?? {});
+  helper.init();
+  return helper;
+};
diff --git a/packages/vchart-keystone-theme/src/interface.ts b/packages/vchart-keystone-theme/src/interface.ts
new file mode 100644
index 0000000..6fcdecc
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/interface.ts
@@ -0,0 +1,3 @@
+import type { IInitThemeOption } from '@visactor/vchart-theme-utils';
+
+export interface IInitVChartKeystoneThemeOption extends IInitThemeOption {}
diff --git a/packages/vchart-keystone-theme/src/light/index.ts b/packages/vchart-keystone-theme/src/light/index.ts
new file mode 100644
index 0000000..977baa0
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/light/index.ts
@@ -0,0 +1,9 @@
+import type { KeystoneTheme } from '../common';
+import { theme } from '../common';
+
+export const keystoneDesignLight: KeystoneTheme = {
+  ...theme,
+  name: 'keystoneDesignLight',
+  description: 'Keystone Design - light',
+  type: 'light'
+};
diff --git a/packages/vchart-keystone-theme/src/theme-helper.ts b/packages/vchart-keystone-theme/src/theme-helper.ts
new file mode 100644
index 0000000..c5cb75f
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/theme-helper.ts
@@ -0,0 +1,27 @@
+import type { ITheme } from '@visactor/vchart';
+import type { ThemeMode } from '@visactor/vchart-theme-utils';
+// eslint-disable-next-line no-duplicate-imports
+import { VChartExtendThemeHelper } from '@visactor/vchart-theme-utils';
+import { keystoneDesignDark } from './dark';
+import { keystoneDesignLight } from './light';
+import type { IInitVChartKeystoneThemeOption } from './interface';
+
+export class VChartKeystoneThemeHelper extends VChartExtendThemeHelper {
+  static themeModeAttribute = 'theme-mode';
+  static themeNamePrefix = 'keystoneDesign';
+  themeModeAttribute = VChartKeystoneThemeHelper.themeModeAttribute;
+  themeNamePrefix = VChartKeystoneThemeHelper.themeNamePrefix;
+
+  baseTheme: Record<ThemeMode, ITheme> = {
+    light: keystoneDesignLight,
+    dark: keystoneDesignDark
+  };
+
+  tokenMap = {};
+
+  declare options: IInitVChartKeystoneThemeOption;
+
+  constructor(options: IInitVChartKeystoneThemeOption) {
+    super(options);
+  }
+}
diff --git a/packages/vchart-keystone-theme/src/theme-map.ts b/packages/vchart-keystone-theme/src/theme-map.ts
new file mode 100644
index 0000000..fefbae1
--- /dev/null
+++ b/packages/vchart-keystone-theme/src/theme-map.ts
@@ -0,0 +1,8 @@
+import type { ITheme } from '@visactor/vchart';
+import { keystoneDesignDark } from './dark';
+import { keystoneDesignLight } from './light';
+
+export const allThemeMap = new Map([
+  [keystoneDesignLight.name, keystoneDesignLight],
+  [keystoneDesignDark.name, keystoneDesignDark]
+]) as Map<string, ITheme>;

From f57c6e6ca064ce340eacbd385408d4ad13853ed3 Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 18:38:03 -0700
Subject: [PATCH 5/9] fix: preserve keystone theme color scheme

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../vchart-keystone-theme/__tests__/index.test.ts   | 13 +++++++++++++
 packages/vchart-keystone-theme/src/theme-helper.ts  |  7 ++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/vchart-keystone-theme/__tests__/index.test.ts b/packages/vchart-keystone-theme/__tests__/index.test.ts
index f5a5ba2..b5f2c39 100644
--- a/packages/vchart-keystone-theme/__tests__/index.test.ts
+++ b/packages/vchart-keystone-theme/__tests__/index.test.ts
@@ -80,4 +80,17 @@ describe('vchart-keystone-theme public API', () => {
     expect(helper).toBeInstanceOf(VChartKeystoneThemeHelper);
     expect(VChartKeystoneThemeHelper.themeNamePrefix).toBe('keystoneDesign');
   });
+
+  it('generates the Keystone light theme without rewriting its array color scheme', () => {
+    const helper = new VChartKeystoneThemeHelper({ isWatchingMode: false });
+    const generatedTheme = helper.generateTheme({ mode: 'light' });
+    const generatedDefaultColorScheme = generatedTheme.colorScheme?.default;
+
+    expect(generatedDefaultColorScheme).toBe(keystoneDesignLight.colorScheme?.default);
+    expect(Array.isArray(generatedDefaultColorScheme)).toBe(true);
+    expect(generatedDefaultColorScheme).toHaveLength(9);
+    expect(generatedDefaultColorScheme).toEqual(
+      Array.from({ length: 9 }, (_, index) => getCSSVariableValue(`--ks-color-data-data${index + 1}-fill`))
+    );
+  });
 });
diff --git a/packages/vchart-keystone-theme/src/theme-helper.ts b/packages/vchart-keystone-theme/src/theme-helper.ts
index c5cb75f..fff9304 100644
--- a/packages/vchart-keystone-theme/src/theme-helper.ts
+++ b/packages/vchart-keystone-theme/src/theme-helper.ts
@@ -1,5 +1,5 @@
 import type { ITheme } from '@visactor/vchart';
-import type { ThemeMode } from '@visactor/vchart-theme-utils';
+import type { IThemeQueryOption, ThemeMode } from '@visactor/vchart-theme-utils';
 // eslint-disable-next-line no-duplicate-imports
 import { VChartExtendThemeHelper } from '@visactor/vchart-theme-utils';
 import { keystoneDesignDark } from './dark';
@@ -19,6 +19,11 @@ export class VChartKeystoneThemeHelper extends VChartExtendThemeHelper {
 
   tokenMap = {};
 
+  generateTheme(option?: IThemeQueryOption): ITheme {
+    const mode = option?.mode ?? this.getCurrentMode();
+    return this.baseTheme[mode];
+  }
+
   declare options: IInitVChartKeystoneThemeOption;
 
   constructor(options: IInitVChartKeystoneThemeOption) {

From 887c1357fab36fb009a713569d7dfd7b6337b131 Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 18:54:04 -0700
Subject: [PATCH 6/9] feat: export keystone theme json

---
 packages/vchart-keystone-theme/README.md      | 79 +++++++++++++++++++
 .../public/keystoneDesignDark.json            |  1 +
 .../public/keystoneDesignLight.json           |  1 +
 .../scripts/export-theme.ts                   | 58 ++++++++++++++
 .../src/design-tokens/getCSSVariableValue.ts  |  7 +-
 .../src/design-tokens/index.ts                |  2 +-
 6 files changed, 146 insertions(+), 2 deletions(-)
 create mode 100644 packages/vchart-keystone-theme/README.md
 create mode 100644 packages/vchart-keystone-theme/public/keystoneDesignDark.json
 create mode 100644 packages/vchart-keystone-theme/public/keystoneDesignLight.json
 create mode 100644 packages/vchart-keystone-theme/scripts/export-theme.ts

diff --git a/packages/vchart-keystone-theme/README.md b/packages/vchart-keystone-theme/README.md
new file mode 100644
index 0000000..127a20c
--- /dev/null
+++ b/packages/vchart-keystone-theme/README.md
@@ -0,0 +1,79 @@
+# @visactor/vchart-keystone-theme
+
+Keystone Design theme package for VChart.
+
+This package provides standard VChart themes based on the Keystone chart theme configuration. The chart theme source of truth is the Keystone chart theme package in the Byted Web Components repository. This package includes a Keystone design-token snapshot so it can be published externally without depending on internal packages.
+
+## Install
+
+```bash
+npm install @visactor/vchart @visactor/vchart-keystone-theme
+```
+
+## Usage
+
+```ts
+import VChart from '@visactor/vchart';
+import { initVChartKeystoneTheme } from '@visactor/vchart-keystone-theme';
+
+initVChartKeystoneTheme();
+
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'data',
+      values: [
+        { type: 'A', value: 10 },
+        { type: 'B', value: 20 }
+      ]
+    }
+  ],
+  xField: 'type',
+  yField: 'value'
+};
+
+const chart = new VChart(spec, { dom: 'chart' });
+chart.renderSync();
+```
+
+## Optional CSS variables
+
+If your application already provides Keystone CSS variables, no CSS import is required.
+
+If your application does not provide Keystone CSS variables, import the bundled snapshot CSS:
+
+```ts
+import '@visactor/vchart-keystone-theme/index.css';
+```
+
+The JavaScript entrypoint does not automatically import CSS.
+
+## Direct theme usage
+
+```ts
+import { keystoneDesignLight, keystoneDesignDark } from '@visactor/vchart-keystone-theme';
+```
+
+## Token snapshot
+
+This package exports a Keystone design-token snapshot for chart theme compatibility:
+
+```ts
+import { ks, getCSSVariableValue } from '@visactor/vchart-keystone-theme';
+```
+
+These exports are bundled with this theme package and are not intended to replace the Keystone design-token package.
+
+## Scope
+
+This package is a standard VChart theme package. It does not include Keystone chart spec helper APIs such as `createKsBarChartSpec`, `createKsLineChartSpec`, custom DOM tooltip rendering, RTL spec wrapping, or chart data formatting helpers.
+
+## Theme JSON files
+
+<!-- ThemeListBegin -->
+<!-- 以下为自动生成 -->
+- [keystoneDesignLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-keystone-theme/public/keystoneDesignLight.json) Keystone Design - light
+- [keystoneDesignDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-keystone-theme/public/keystoneDesignDark.json) Keystone Design - dark
+<!-- 以上为自动生成 -->
+<!-- ThemeListEnd -->
diff --git a/packages/vchart-keystone-theme/public/keystoneDesignDark.json b/packages/vchart-keystone-theme/public/keystoneDesignDark.json
new file mode 100644
index 0000000..887bcf2
--- /dev/null
+++ b/packages/vchart-keystone-theme/public/keystoneDesignDark.json
@@ -0,0 +1 @@
+{"colorScheme":{"default":{"dataScheme":["var(--ks-color-data-data1-fill)","var(--ks-color-data-data2-fill)","var(--ks-color-data-data3-fill)","var(--ks-color-data-data4-fill)","var(--ks-color-data-data5-fill)","var(--ks-color-data-data6-fill)","var(--ks-color-data-data7-fill)","var(--ks-color-data-data8-fill)","var(--ks-color-data-data9-fill)"],"palette":{"backgroundColor":"#202226","borderColor":"#404349","shadowColor":"rgba(0,0,0,0.1)","hoverBackgroundColor":"#404349","sliderRailColor":"#404349","sliderHandleColor":"#202226","sliderTrackColor":"#4284FF","popupBackgroundColor":"#404349","primaryFontColor":"#fdfdfd","secondaryFontColor":"#bbbdc3","tertiaryFontColor":"#888c93","axisLabelFontColor":"#888c93","disableFontColor":"#55595f","axisMarkerFontColor":"#202226","axisGridColor":"#404349","axisDomainColor":"#4b4f54","dataZoomHandleStrokeColor":"#bbbdc3","dataZoomChartColor":"#55595F","playerControllerColor":"#4284FF","scrollBarSliderColor":"rgba(255,255,255,0.3)","axisMarkerBackgroundColor":"#fdfdfd","markLabelBackgroundColor":"#404349","markLineStrokeColor":"#bbbdc3","dangerColor":"#eb4b4b","warningColor":"#f0bd30","successColor":"#14b267","infoColor":"#4284ff","discreteLegendPagerTextColor":"#BBBDC3","discreteLegendPagerHandlerColor":"#BBBDC3","discreteLegendPagerHandlerDisableColor":"#55595F","emptyCircleColor":"#bbbdc3","linearProgressTrackColor":"#404349"}}},"token":{"fontFamily":"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,'-apple-system',segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol","fontSize":14,"l1FontSize":32,"l1LineHeight":"150%","l2FontSize":20,"l2LineHeight":"140%","l3FontSize":16,"l3LineHeight":"150%","l4FontSize":14,"l4LineHeight":"150%","l5FontSize":12,"l5LineHeight":"130%","l6FontSize":10,"l6LineHeight":"120%"},"series":{},"name":"keystoneDesignDark","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":{"type":"token","key":"fontFamily"},"component":{"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"dataZoom":{"selectedBackground":{"style":{"fillOpacity":0.4,"outerBorder":{"strokeOpacity":0.4}}}},"axis":{"label":{"style":{"fontFamily":"TikTok Sans Text","pointerEvents":"auto","color":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}},"domainLine":{"style":{"stroke":"var(--ks-ref-color-neutral-650)","strokeOpacity":1,"lineWidth":0.5}},"tick":{"inside":false,"style":{"stroke":"var(--ks-ref-color-neutral-650)","strokeOpacity":1,"lineWidth":0.5}},"grid":{"style":{"stroke":"var(--ks-ref-color-neutral-900)","strokeOpacity":1,"lineWidth":0.5}},"title":{"position":"start","angle":0,"padding":[20,0,0,0],"style":{"textAlign":"start","dy":-20,"dx":0,"pointerEvents":"auto","fill":"var(--ks-ref-color-neutral-400)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}}},"discreteLegend":{"position":"end","orient":"top","padding":0,"item":{"spaceRow":16,"shape":{"space":4,"style":{"symbolType":"circle","size":6}},"label":{"style":{"pointerEvents":"auto","color":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16,"letterSpacing":0.161}}}},"crosshair":{"xField":{"line":{"type":"line"}}},"tooltip":{"panel":{"backgroundColor":"var(--ks-ref-color-neutral-200)","border":{"radius":4}},"titleLabel":{"fontColor":"var(--ks-ref-color-white)","fontSize":12,"fontWeight":400,"lineHeight":16},"keyLabel":{"fontColor":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontWeight":400,"lineHeight":16},"valueLabel":{"fontColor":"var(--ks-ref-color-white)","fontSize":12,"fontWeight":500,"lineHeight":16,"textAlign":"center","spacing":0},"group":{"shapeType":"circle"}}},"mark":{"text":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1,"lineJoin":"bevel"}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontWeight":null,"fontSize":null}},"fillingWord":{"style":{"fontWeight":null,"fontSize":null}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06},"stroke":"transparent"}}},"animationThreshold":2000,"chart":{"line":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"var(--ks-ref-color-neutral-350)","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":8,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"area":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"var(--ks-ref-color-neutral-350)","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"bar":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"rect","style":{"fill":"#F1F2F2"},"width":"110%"}},"yField":{"visible":false}}}},"pie":{"markByName":{"label":{"visible":true,"style":{"type":"text"}}},"mark":{"arc":{"style":{"padAngle":0.01}}}},"common":{"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}},"series":{}}},"description":"Keystone Design - dark","type":"dark"}
\ No newline at end of file
diff --git a/packages/vchart-keystone-theme/public/keystoneDesignLight.json b/packages/vchart-keystone-theme/public/keystoneDesignLight.json
new file mode 100644
index 0000000..d52068c
--- /dev/null
+++ b/packages/vchart-keystone-theme/public/keystoneDesignLight.json
@@ -0,0 +1 @@
+{"colorScheme":{"default":{"dataScheme":["var(--ks-color-data-data1-fill)","var(--ks-color-data-data2-fill)","var(--ks-color-data-data3-fill)","var(--ks-color-data-data4-fill)","var(--ks-color-data-data5-fill)","var(--ks-color-data-data6-fill)","var(--ks-color-data-data7-fill)","var(--ks-color-data-data8-fill)","var(--ks-color-data-data9-fill)"],"palette":{"backgroundColor":"#ffffff","borderColor":"#e3e5e8","shadowColor":"rgba(33,37,44,0.1)","hoverBackgroundColor":"#f1f2f5","sliderRailColor":"#f1f3f4","sliderHandleColor":"#ffffff","sliderTrackColor":"#0040ff","popupBackgroundColor":"#ffffff","primaryFontColor":"#21252c","secondaryFontColor":"#606773","tertiaryFontColor":"#89909d","axisLabelFontColor":"#89909d","disableFontColor":"#bcc1cb","axisMarkerFontColor":"#ffffff","axisGridColor":"#f1f2f5","axisDomainColor":"#d9dde4","dataZoomHandleStrokeColor":"#aeb5be","dataZoomChartColor":"#c9ced8","playerControllerColor":"#0040ff","scrollBarSliderColor":"rgba(0,0,0,0.3)","axisMarkerBackgroundColor":"#21252c","markLabelBackgroundColor":"#f1f2f5","markLineStrokeColor":"#606773","dangerColor":"#e33232","warningColor":"#ffc528","successColor":"#07a35a","infoColor":"#3073f2","discreteLegendPagerTextColor":"rgb(51, 51, 51)","discreteLegendPagerHandlerColor":"rgb(47, 69, 84)","discreteLegendPagerHandlerDisableColor":"rgb(170, 170, 170)","emptyCircleColor":"#e3e5e8","linearProgressTrackColor":"#E7EBED"}}},"token":{"fontFamily":"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,'-apple-system',segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol","fontSize":14,"l1FontSize":32,"l1LineHeight":"150%","l2FontSize":20,"l2LineHeight":"140%","l3FontSize":16,"l3LineHeight":"150%","l4FontSize":14,"l4LineHeight":"150%","l5FontSize":12,"l5LineHeight":"130%","l6FontSize":10,"l6LineHeight":"120%"},"series":{},"name":"keystoneDesignLight","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":{"type":"token","key":"fontFamily"},"component":{"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"axis":{"label":{"style":{"fontFamily":"TikTok Sans Text","pointerEvents":"auto","color":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}},"domainLine":{"style":{"stroke":"var(--ks-ref-color-neutral-650)","strokeOpacity":1,"lineWidth":0.5}},"tick":{"inside":false,"style":{"stroke":"var(--ks-ref-color-neutral-650)","strokeOpacity":1,"lineWidth":0.5}},"grid":{"style":{"stroke":"var(--ks-ref-color-neutral-900)","strokeOpacity":1,"lineWidth":0.5}},"title":{"position":"start","angle":0,"padding":[20,0,0,0],"style":{"textAlign":"start","dy":-20,"dx":0,"pointerEvents":"auto","fill":"var(--ks-ref-color-neutral-400)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}}},"discreteLegend":{"position":"end","orient":"top","padding":0,"item":{"spaceRow":16,"shape":{"space":4,"style":{"symbolType":"circle","size":6}},"label":{"style":{"pointerEvents":"auto","color":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16,"letterSpacing":0.161}}}},"crosshair":{"xField":{"line":{"type":"line"}}},"tooltip":{"panel":{"backgroundColor":"var(--ks-ref-color-neutral-200)","border":{"radius":4}},"titleLabel":{"fontColor":"var(--ks-ref-color-white)","fontSize":12,"fontWeight":400,"lineHeight":16},"keyLabel":{"fontColor":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontWeight":400,"lineHeight":16},"valueLabel":{"fontColor":"var(--ks-ref-color-white)","fontSize":12,"fontWeight":500,"lineHeight":16,"textAlign":"center","spacing":0},"group":{"shapeType":"circle"}}},"mark":{"text":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1,"lineJoin":"bevel"}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontWeight":null,"fontSize":null}},"fillingWord":{"style":{"fontWeight":null,"fontSize":null}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06},"stroke":"transparent"}}},"animationThreshold":2000,"chart":{"line":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"var(--ks-ref-color-neutral-350)","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":8,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"area":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"var(--ks-ref-color-neutral-350)","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"bar":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"rect","style":{"fill":"#F1F2F2"},"width":"110%"}},"yField":{"visible":false}}}},"pie":{"markByName":{"label":{"visible":true,"style":{"type":"text"}}},"mark":{"arc":{"style":{"padAngle":0.01}}}},"common":{"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}},"series":{}}},"description":"Keystone Design - light","type":"light"}
\ No newline at end of file
diff --git a/packages/vchart-keystone-theme/scripts/export-theme.ts b/packages/vchart-keystone-theme/scripts/export-theme.ts
new file mode 100644
index 0000000..2f32c0c
--- /dev/null
+++ b/packages/vchart-keystone-theme/scripts/export-theme.ts
@@ -0,0 +1,58 @@
+/**
+ * 导出全量 theme json
+ */
+import fs from 'fs';
+import path from 'path';
+import { ThemeManager } from '@visactor/vchart';
+import { allThemeMap } from '../src';
+
+const VCHART_THEME_PROJECT_ROOT = process.cwd();
+const targetPaths = [path.resolve(VCHART_THEME_PROJECT_ROOT, './public')];
+
+const result: string[] = [];
+allThemeMap.forEach((value, key) => {
+  let success = true;
+  if (!ThemeManager.themeExist(key)) {
+    ThemeManager.registerTheme(key, value);
+  }
+  const theme = ThemeManager.getTheme(key);
+  const themeJson = JSON.stringify(theme);
+  targetPaths.forEach(targetPath => {
+    try {
+      if (!fs.existsSync(targetPath)) {
+        fs.mkdirSync(targetPath, { recursive: true });
+      }
+      const fileName = path.resolve(targetPath, `${key}.json`);
+      if (fs.existsSync(fileName)) {
+        fs.unlinkSync(fileName);
+      }
+      fs.writeFileSync(path.resolve(targetPath, `${key}.json`), themeJson);
+    } catch {
+      success = false;
+    }
+  });
+  if (success) {
+    result.push(key);
+  }
+});
+
+// 自动更新 readme
+const readmePath = path.resolve(VCHART_THEME_PROJECT_ROOT, './README.md');
+const readme = fs.readFileSync(readmePath, 'utf8');
+const startTag = '<!-- ThemeListBegin -->';
+const endTag = '<!-- ThemeListEnd -->';
+const readmeThemeListStart = readme.indexOf(startTag) + startTag.length;
+const readmeThemeListEnd = readme.indexOf(endTag);
+const newReadme = `${readme.slice(0, readmeThemeListStart)}\n<!-- 以下为自动生成 -->\n${[...allThemeMap.keys()]
+  .map(
+    key =>
+      `- [${key}](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-keystone-theme/public/${key}.json) ${
+        allThemeMap.get(key)?.description ?? ''
+      }`
+  )
+  .join('\n')}\n<!-- 以上为自动生成 -->\n${readme.slice(readmeThemeListEnd)}`;
+fs.writeFileSync(readmePath, newReadme);
+
+console.warn(`\x1B[33m
+  主题 ${result.join(', ')} 已导出
+\x1B[0m`);
diff --git a/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts b/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
index b9ebbaf..cc06722 100644
--- a/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
+++ b/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
@@ -10,11 +10,16 @@ export function getCSSVariableValue(varName: string): string {
   if (cache.has(varName)) {
     return cache.get(varName)!;
   } else {
-    if (!rootComputedStyle) rootComputedStyle = getComputedStyle(document.documentElement);
     let varNameWithoutVarCall = varName;
     if (varName.startsWith('var(')) {
       varNameWithoutVarCall = varName.substring(4, varName.length - 1);
     }
+
+    if (typeof getComputedStyle !== 'function' || typeof document === 'undefined') {
+      return `var(${varNameWithoutVarCall})`;
+    }
+
+    if (!rootComputedStyle) rootComputedStyle = getComputedStyle(document.documentElement);
     const value = rootComputedStyle.getPropertyValue(varNameWithoutVarCall);
     cache.set(varNameWithoutVarCall, value);
     cache.set(`var(${varNameWithoutVarCall})`, value);
diff --git a/packages/vchart-keystone-theme/src/design-tokens/index.ts b/packages/vchart-keystone-theme/src/design-tokens/index.ts
index 05a7f27..bd5e16d 100644
--- a/packages/vchart-keystone-theme/src/design-tokens/index.ts
+++ b/packages/vchart-keystone-theme/src/design-tokens/index.ts
@@ -881,6 +881,6 @@ export const darkKs = {
     }
   }
 } as const;
-export { getCSSVariableValue } from './getCSSVariableValue.js';
+export { getCSSVariableValue } from './getCSSVariableValue';
 
 export * from './getCSSVariableValue';

From 132ffd161f32ddc1b9be50a041a99e4444fd722e Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 19:54:48 -0700
Subject: [PATCH 7/9] fix: cache keystone css fallback values

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../__tests__/index.test.ts                   | 26 +++++++++++++++++++
 .../src/design-tokens/getCSSVariableValue.ts  |  5 +++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/vchart-keystone-theme/__tests__/index.test.ts b/packages/vchart-keystone-theme/__tests__/index.test.ts
index b5f2c39..b5b31ab 100644
--- a/packages/vchart-keystone-theme/__tests__/index.test.ts
+++ b/packages/vchart-keystone-theme/__tests__/index.test.ts
@@ -28,6 +28,32 @@ describe('vchart-keystone-theme design tokens', () => {
   it('reads cached CSS variables by var() call syntax', () => {
     expect(getCSSVariableValue('var(--ks-test-color)').trim()).toBe('#123456');
   });
+
+  it('caches no-DOM fallback values for raw and var() names', () => {
+    const originalDocument = global.document;
+    const originalGetComputedStyle = global.getComputedStyle;
+
+    try {
+      (global as any).document = undefined;
+      (global as any).getComputedStyle = undefined;
+
+      jest.isolateModules(() => {
+        const { getCSSVariableValue: getIsolatedCSSVariableValue } = require('../src/design-tokens/getCSSVariableValue');
+
+        expect(getIsolatedCSSVariableValue('--ks-no-dom-cache')).toBe('var(--ks-no-dom-cache)');
+
+        (global as any).document = originalDocument;
+        (global as any).getComputedStyle = originalGetComputedStyle;
+        document.documentElement.style.setProperty('--ks-no-dom-cache', '#abcdef');
+
+        expect(getIsolatedCSSVariableValue('var(--ks-no-dom-cache)').trim()).toBe('var(--ks-no-dom-cache)');
+      });
+    } finally {
+      (global as any).document = originalDocument;
+      (global as any).getComputedStyle = originalGetComputedStyle;
+      document.documentElement.style.removeProperty('--ks-no-dom-cache');
+    }
+  });
 });
 
 describe('vchart-keystone-theme common theme utilities', () => {
diff --git a/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts b/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
index cc06722..cd98afd 100644
--- a/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
+++ b/packages/vchart-keystone-theme/src/design-tokens/getCSSVariableValue.ts
@@ -16,7 +16,10 @@ export function getCSSVariableValue(varName: string): string {
     }
 
     if (typeof getComputedStyle !== 'function' || typeof document === 'undefined') {
-      return `var(${varNameWithoutVarCall})`;
+      const value = `var(${varNameWithoutVarCall})`;
+      cache.set(varNameWithoutVarCall, value);
+      cache.set(`var(${varNameWithoutVarCall})`, value);
+      return value;
     }
 
     if (!rootComputedStyle) rootComputedStyle = getComputedStyle(document.documentElement);

From 6359e0ad39ba67be3b428d7246083622f73f987e Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 20:05:23 -0700
Subject: [PATCH 8/9] docs: add keystone theme package

Co-Authored-By: Claude <noreply@anthropic.com>
---
 README.md                                                 | 8 +++++---
 packages/vchart-keystone-theme/src/design-tokens/index.ts | 2 --
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 51193f6..9b1ab05 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ English | [简体中文](./README.zh-CN.md)
 | :------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 | [@visactor/vchart-theme](https://github.com/VisActor/vchart-theme/tree/main/packages/vchart-theme)                         |                               [![npm Version](https://img.shields.io/npm/v/@visactor/vchart-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-theme) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-theme) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-theme/blob/main/LICENSE)                               |
 | [@visactor/vchart-semi-theme](https://github.com/VisActor/vchart-theme/tree/main/packages/vchart-semi-theme)               |                  [![npm Version](https://img.shields.io/npm/v/@visactor/vchart-semi-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-semi-theme) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-semi-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-semi-theme) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-semi-theme/blob/main/LICENSE)                   |
+| [@visactor/vchart-keystone-theme](https://github.com/VisActor/vchart-theme/tree/main/packages/vchart-keystone-theme)       |            [![npm Version](https://img.shields.io/npm/v/@visactor/vchart-keystone-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-keystone-theme) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-keystone-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-keystone-theme) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-theme/blob/main/LICENSE)             |
 | [@visactor/vchart-arco-theme](https://github.com/VisActor/vchart-theme/tree/main/packages/vchart-arco-theme)               |                  [![npm Version](https://img.shields.io/npm/v/@visactor/vchart-arco-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-arco-theme) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-arco-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-arco-theme) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-arco-theme/blob/main/LICENSE)                   |
 | [@visactor/vchart-tt-platform-theme](https://github.com/VisActor/vchart-theme/tree/main/packages/vchart-tt-platform-theme) | [![npm Version](https://img.shields.io/npm/v/@visactor/vchart-tt-platform-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-tt-platform-theme) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-tt-platform-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-tt-platform-theme) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-tt-platform-theme/blob/main/LICENSE) |
 | [@visactor/vchart-ve-o-theme](https://github.com/VisActor/vchart-theme/tree/main/packages/vchart-ve-o-theme)               |                  [![npm Version](https://img.shields.io/npm/v/@visactor/vchart-ve-o-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-ve-o-theme) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-ve-o-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-ve-o-theme) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-ve-o-theme/blob/main/LICENSE)                   |
@@ -32,9 +33,10 @@ This repository includes the following packages:
 
 1. [vchart-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-theme): contains all static extension themes
 2. [vchart-semi-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-semi-theme): dynamic chart themes used in conjunction with [Semi Design](https://github.com/DouyinFE/semi-design).
-3. [vchart-arco-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-arco-theme): dynamic chart themes used in conjunction with [ArcoDesign](https://github.com/arco-design).
-4. [vchart-tt-platform-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-tt-platform-theme): dynamic chart themes used in conjunction with [Semi Design](https://github.com/DouyinFE/semi-design) for TT platform.
-5. [vchart-ve-o-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-ve-o-theme): dynamic chart themes used in conjunction with [ArcoDesign](https://github.com/arco-design) for O Design.
+3. [vchart-keystone-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-keystone-theme): dynamic chart themes used in conjunction with Keystone Design.
+4. [vchart-arco-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-arco-theme): dynamic chart themes used in conjunction with [ArcoDesign](https://github.com/arco-design).
+5. [vchart-tt-platform-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-tt-platform-theme): dynamic chart themes used in conjunction with [Semi Design](https://github.com/DouyinFE/semi-design) for TT platform.
+6. [vchart-ve-o-theme](https://github.com/VisActor/vchart-theme/tree/develop/packages/vchart-ve-o-theme): dynamic chart themes used in conjunction with [ArcoDesign](https://github.com/arco-design) for O Design.
 
 # Usage
 
diff --git a/packages/vchart-keystone-theme/src/design-tokens/index.ts b/packages/vchart-keystone-theme/src/design-tokens/index.ts
index bd5e16d..1a39c5b 100644
--- a/packages/vchart-keystone-theme/src/design-tokens/index.ts
+++ b/packages/vchart-keystone-theme/src/design-tokens/index.ts
@@ -881,6 +881,4 @@ export const darkKs = {
     }
   }
 } as const;
-export { getCSSVariableValue } from './getCSSVariableValue';
-
 export * from './getCSSVariableValue';

From 5b4fcf8ff83d0f0c3d8ce836eccdfc22be55d245 Mon Sep 17 00:00:00 2001
From: Chenfeiyu Wen <chenfeiyu.wen@bytedance.com>
Date: Wed, 17 Jun 2026 20:33:29 -0700
Subject: [PATCH 9/9] fix: resolve keystone token values in theme json

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../__tests__/index.test.ts                   | 13 +++++
 .../public/keystoneDesignDark.json            |  2 +-
 .../public/keystoneDesignLight.json           |  2 +-
 .../scripts/export-theme.ts                   | 47 ++++++++++++++++++-
 4 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/packages/vchart-keystone-theme/__tests__/index.test.ts b/packages/vchart-keystone-theme/__tests__/index.test.ts
index b5b31ab..2be65f1 100644
--- a/packages/vchart-keystone-theme/__tests__/index.test.ts
+++ b/packages/vchart-keystone-theme/__tests__/index.test.ts
@@ -1,3 +1,5 @@
+import fs from 'fs';
+import path from 'path';
 import { getCSSVariableValue, ks } from '../src/design-tokens';
 import { getBarTheme, getTheme, theme } from '../src/common';
 import {
@@ -83,6 +85,17 @@ describe('vchart-keystone-theme common theme utilities', () => {
   });
 });
 
+describe('vchart-keystone-theme export output', () => {
+  it('exports concrete Keystone token values in public theme JSON', () => {
+    const themeJsonPath = path.resolve(__dirname, '../public/keystoneDesignLight.json');
+    const exportedTheme = JSON.parse(fs.readFileSync(themeJsonPath, 'utf8'));
+
+    expect(exportedTheme.colorScheme.default.dataScheme[0]).toBe('#8987f6');
+    expect(exportedTheme.colorScheme.default.dataScheme).not.toContain('var(--ks-color-data-data1-fill)');
+    expect(exportedTheme.component.axis.label.style.color).toBe('#87898b');
+  });
+});
+
 describe('vchart-keystone-theme public API', () => {
   it('exports light and dark Keystone themes', () => {
     expect(keystoneDesignLight.name).toBe('keystoneDesignLight');
diff --git a/packages/vchart-keystone-theme/public/keystoneDesignDark.json b/packages/vchart-keystone-theme/public/keystoneDesignDark.json
index 887bcf2..f9af377 100644
--- a/packages/vchart-keystone-theme/public/keystoneDesignDark.json
+++ b/packages/vchart-keystone-theme/public/keystoneDesignDark.json
@@ -1 +1 @@
-{"colorScheme":{"default":{"dataScheme":["var(--ks-color-data-data1-fill)","var(--ks-color-data-data2-fill)","var(--ks-color-data-data3-fill)","var(--ks-color-data-data4-fill)","var(--ks-color-data-data5-fill)","var(--ks-color-data-data6-fill)","var(--ks-color-data-data7-fill)","var(--ks-color-data-data8-fill)","var(--ks-color-data-data9-fill)"],"palette":{"backgroundColor":"#202226","borderColor":"#404349","shadowColor":"rgba(0,0,0,0.1)","hoverBackgroundColor":"#404349","sliderRailColor":"#404349","sliderHandleColor":"#202226","sliderTrackColor":"#4284FF","popupBackgroundColor":"#404349","primaryFontColor":"#fdfdfd","secondaryFontColor":"#bbbdc3","tertiaryFontColor":"#888c93","axisLabelFontColor":"#888c93","disableFontColor":"#55595f","axisMarkerFontColor":"#202226","axisGridColor":"#404349","axisDomainColor":"#4b4f54","dataZoomHandleStrokeColor":"#bbbdc3","dataZoomChartColor":"#55595F","playerControllerColor":"#4284FF","scrollBarSliderColor":"rgba(255,255,255,0.3)","axisMarkerBackgroundColor":"#fdfdfd","markLabelBackgroundColor":"#404349","markLineStrokeColor":"#bbbdc3","dangerColor":"#eb4b4b","warningColor":"#f0bd30","successColor":"#14b267","infoColor":"#4284ff","discreteLegendPagerTextColor":"#BBBDC3","discreteLegendPagerHandlerColor":"#BBBDC3","discreteLegendPagerHandlerDisableColor":"#55595F","emptyCircleColor":"#bbbdc3","linearProgressTrackColor":"#404349"}}},"token":{"fontFamily":"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,'-apple-system',segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol","fontSize":14,"l1FontSize":32,"l1LineHeight":"150%","l2FontSize":20,"l2LineHeight":"140%","l3FontSize":16,"l3LineHeight":"150%","l4FontSize":14,"l4LineHeight":"150%","l5FontSize":12,"l5LineHeight":"130%","l6FontSize":10,"l6LineHeight":"120%"},"series":{},"name":"keystoneDesignDark","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":{"type":"token","key":"fontFamily"},"component":{"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"dataZoom":{"selectedBackground":{"style":{"fillOpacity":0.4,"outerBorder":{"strokeOpacity":0.4}}}},"axis":{"label":{"style":{"fontFamily":"TikTok Sans Text","pointerEvents":"auto","color":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}},"domainLine":{"style":{"stroke":"var(--ks-ref-color-neutral-650)","strokeOpacity":1,"lineWidth":0.5}},"tick":{"inside":false,"style":{"stroke":"var(--ks-ref-color-neutral-650)","strokeOpacity":1,"lineWidth":0.5}},"grid":{"style":{"stroke":"var(--ks-ref-color-neutral-900)","strokeOpacity":1,"lineWidth":0.5}},"title":{"position":"start","angle":0,"padding":[20,0,0,0],"style":{"textAlign":"start","dy":-20,"dx":0,"pointerEvents":"auto","fill":"var(--ks-ref-color-neutral-400)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}}},"discreteLegend":{"position":"end","orient":"top","padding":0,"item":{"spaceRow":16,"shape":{"space":4,"style":{"symbolType":"circle","size":6}},"label":{"style":{"pointerEvents":"auto","color":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16,"letterSpacing":0.161}}}},"crosshair":{"xField":{"line":{"type":"line"}}},"tooltip":{"panel":{"backgroundColor":"var(--ks-ref-color-neutral-200)","border":{"radius":4}},"titleLabel":{"fontColor":"var(--ks-ref-color-white)","fontSize":12,"fontWeight":400,"lineHeight":16},"keyLabel":{"fontColor":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontWeight":400,"lineHeight":16},"valueLabel":{"fontColor":"var(--ks-ref-color-white)","fontSize":12,"fontWeight":500,"lineHeight":16,"textAlign":"center","spacing":0},"group":{"shapeType":"circle"}}},"mark":{"text":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1,"lineJoin":"bevel"}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontWeight":null,"fontSize":null}},"fillingWord":{"style":{"fontWeight":null,"fontSize":null}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06},"stroke":"transparent"}}},"animationThreshold":2000,"chart":{"line":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"var(--ks-ref-color-neutral-350)","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":8,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"area":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"var(--ks-ref-color-neutral-350)","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"bar":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"rect","style":{"fill":"#F1F2F2"},"width":"110%"}},"yField":{"visible":false}}}},"pie":{"markByName":{"label":{"visible":true,"style":{"type":"text"}}},"mark":{"arc":{"style":{"padAngle":0.01}}}},"common":{"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}},"series":{}}},"description":"Keystone Design - dark","type":"dark"}
\ No newline at end of file
+{"colorScheme":{"default":{"dataScheme":["#8987f6","#00577D","#E3CBE1","#A45626","#98CCF0","#5548bd","#F8DBCC","#664163","#babdff"],"palette":{"backgroundColor":"#202226","borderColor":"#404349","shadowColor":"rgba(0,0,0,0.1)","hoverBackgroundColor":"#404349","sliderRailColor":"#404349","sliderHandleColor":"#202226","sliderTrackColor":"#4284FF","popupBackgroundColor":"#404349","primaryFontColor":"#fdfdfd","secondaryFontColor":"#bbbdc3","tertiaryFontColor":"#888c93","axisLabelFontColor":"#888c93","disableFontColor":"#55595f","axisMarkerFontColor":"#202226","axisGridColor":"#404349","axisDomainColor":"#4b4f54","dataZoomHandleStrokeColor":"#bbbdc3","dataZoomChartColor":"#55595F","playerControllerColor":"#4284FF","scrollBarSliderColor":"rgba(255,255,255,0.3)","axisMarkerBackgroundColor":"#fdfdfd","markLabelBackgroundColor":"#404349","markLineStrokeColor":"#bbbdc3","dangerColor":"#eb4b4b","warningColor":"#f0bd30","successColor":"#14b267","infoColor":"#4284ff","discreteLegendPagerTextColor":"#BBBDC3","discreteLegendPagerHandlerColor":"#BBBDC3","discreteLegendPagerHandlerDisableColor":"#55595F","emptyCircleColor":"#bbbdc3","linearProgressTrackColor":"#404349"}}},"token":{"fontFamily":"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,'-apple-system',segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol","fontSize":14,"l1FontSize":32,"l1LineHeight":"150%","l2FontSize":20,"l2LineHeight":"140%","l3FontSize":16,"l3LineHeight":"150%","l4FontSize":14,"l4LineHeight":"150%","l5FontSize":12,"l5LineHeight":"130%","l6FontSize":10,"l6LineHeight":"120%"},"series":{},"name":"keystoneDesignDark","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":{"type":"token","key":"fontFamily"},"component":{"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"dataZoom":{"selectedBackground":{"style":{"fillOpacity":0.4,"outerBorder":{"strokeOpacity":0.4}}}},"axis":{"label":{"style":{"fontFamily":"TikTok Sans Text","pointerEvents":"auto","color":"#87898b","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}},"domainLine":{"style":{"stroke":"#a9abac","strokeOpacity":1,"lineWidth":0.5}},"tick":{"inside":false,"style":{"stroke":"#a9abac","strokeOpacity":1,"lineWidth":0.5}},"grid":{"style":{"stroke":"#e1e1e2","strokeOpacity":1,"lineWidth":0.5}},"title":{"position":"start","angle":0,"padding":[20,0,0,0],"style":{"textAlign":"start","dy":-20,"dx":0,"pointerEvents":"auto","fill":"#5e5f61","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}}},"discreteLegend":{"position":"end","orient":"top","padding":0,"item":{"spaceRow":16,"shape":{"space":4,"style":{"symbolType":"circle","size":6}},"label":{"style":{"pointerEvents":"auto","color":"#87898b","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16,"letterSpacing":0.161}}}},"crosshair":{"xField":{"line":{"type":"line"}}},"tooltip":{"panel":{"backgroundColor":"#262627","border":{"radius":4}},"titleLabel":{"fontColor":"white","fontSize":12,"fontWeight":400,"lineHeight":16},"keyLabel":{"fontColor":"#87898b","fontSize":12,"fontWeight":400,"lineHeight":16},"valueLabel":{"fontColor":"white","fontSize":12,"fontWeight":500,"lineHeight":16,"textAlign":"center","spacing":0},"group":{"shapeType":"circle"}}},"mark":{"text":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1,"lineJoin":"bevel"}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontWeight":null,"fontSize":null}},"fillingWord":{"style":{"fontWeight":null,"fontSize":null}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06},"stroke":"transparent"}}},"animationThreshold":2000,"chart":{"line":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"#4f5051","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"hover":{"size":8,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"area":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"#4f5051","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"bar":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"rect","style":{"fill":"#F1F2F2"},"width":"110%"}},"yField":{"visible":false}}}},"pie":{"markByName":{"label":{"visible":true,"style":{"type":"text"}}},"mark":{"arc":{"style":{"padAngle":0.01}}}},"common":{"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}},"series":{}}},"description":"Keystone Design - dark","type":"dark"}
\ No newline at end of file
diff --git a/packages/vchart-keystone-theme/public/keystoneDesignLight.json b/packages/vchart-keystone-theme/public/keystoneDesignLight.json
index d52068c..6d7316d 100644
--- a/packages/vchart-keystone-theme/public/keystoneDesignLight.json
+++ b/packages/vchart-keystone-theme/public/keystoneDesignLight.json
@@ -1 +1 @@
-{"colorScheme":{"default":{"dataScheme":["var(--ks-color-data-data1-fill)","var(--ks-color-data-data2-fill)","var(--ks-color-data-data3-fill)","var(--ks-color-data-data4-fill)","var(--ks-color-data-data5-fill)","var(--ks-color-data-data6-fill)","var(--ks-color-data-data7-fill)","var(--ks-color-data-data8-fill)","var(--ks-color-data-data9-fill)"],"palette":{"backgroundColor":"#ffffff","borderColor":"#e3e5e8","shadowColor":"rgba(33,37,44,0.1)","hoverBackgroundColor":"#f1f2f5","sliderRailColor":"#f1f3f4","sliderHandleColor":"#ffffff","sliderTrackColor":"#0040ff","popupBackgroundColor":"#ffffff","primaryFontColor":"#21252c","secondaryFontColor":"#606773","tertiaryFontColor":"#89909d","axisLabelFontColor":"#89909d","disableFontColor":"#bcc1cb","axisMarkerFontColor":"#ffffff","axisGridColor":"#f1f2f5","axisDomainColor":"#d9dde4","dataZoomHandleStrokeColor":"#aeb5be","dataZoomChartColor":"#c9ced8","playerControllerColor":"#0040ff","scrollBarSliderColor":"rgba(0,0,0,0.3)","axisMarkerBackgroundColor":"#21252c","markLabelBackgroundColor":"#f1f2f5","markLineStrokeColor":"#606773","dangerColor":"#e33232","warningColor":"#ffc528","successColor":"#07a35a","infoColor":"#3073f2","discreteLegendPagerTextColor":"rgb(51, 51, 51)","discreteLegendPagerHandlerColor":"rgb(47, 69, 84)","discreteLegendPagerHandlerDisableColor":"rgb(170, 170, 170)","emptyCircleColor":"#e3e5e8","linearProgressTrackColor":"#E7EBED"}}},"token":{"fontFamily":"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,'-apple-system',segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol","fontSize":14,"l1FontSize":32,"l1LineHeight":"150%","l2FontSize":20,"l2LineHeight":"140%","l3FontSize":16,"l3LineHeight":"150%","l4FontSize":14,"l4LineHeight":"150%","l5FontSize":12,"l5LineHeight":"130%","l6FontSize":10,"l6LineHeight":"120%"},"series":{},"name":"keystoneDesignLight","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":{"type":"token","key":"fontFamily"},"component":{"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"axis":{"label":{"style":{"fontFamily":"TikTok Sans Text","pointerEvents":"auto","color":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}},"domainLine":{"style":{"stroke":"var(--ks-ref-color-neutral-650)","strokeOpacity":1,"lineWidth":0.5}},"tick":{"inside":false,"style":{"stroke":"var(--ks-ref-color-neutral-650)","strokeOpacity":1,"lineWidth":0.5}},"grid":{"style":{"stroke":"var(--ks-ref-color-neutral-900)","strokeOpacity":1,"lineWidth":0.5}},"title":{"position":"start","angle":0,"padding":[20,0,0,0],"style":{"textAlign":"start","dy":-20,"dx":0,"pointerEvents":"auto","fill":"var(--ks-ref-color-neutral-400)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}}},"discreteLegend":{"position":"end","orient":"top","padding":0,"item":{"spaceRow":16,"shape":{"space":4,"style":{"symbolType":"circle","size":6}},"label":{"style":{"pointerEvents":"auto","color":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16,"letterSpacing":0.161}}}},"crosshair":{"xField":{"line":{"type":"line"}}},"tooltip":{"panel":{"backgroundColor":"var(--ks-ref-color-neutral-200)","border":{"radius":4}},"titleLabel":{"fontColor":"var(--ks-ref-color-white)","fontSize":12,"fontWeight":400,"lineHeight":16},"keyLabel":{"fontColor":"var(--ks-ref-color-neutral-500)","fontSize":12,"fontWeight":400,"lineHeight":16},"valueLabel":{"fontColor":"var(--ks-ref-color-white)","fontSize":12,"fontWeight":500,"lineHeight":16,"textAlign":"center","spacing":0},"group":{"shapeType":"circle"}}},"mark":{"text":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1,"lineJoin":"bevel"}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontWeight":null,"fontSize":null}},"fillingWord":{"style":{"fontWeight":null,"fontSize":null}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06},"stroke":"transparent"}}},"animationThreshold":2000,"chart":{"line":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"var(--ks-ref-color-neutral-350)","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":8,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"area":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"var(--ks-ref-color-neutral-350)","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"bar":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"rect","style":{"fill":"#F1F2F2"},"width":"110%"}},"yField":{"visible":false}}}},"pie":{"markByName":{"label":{"visible":true,"style":{"type":"text"}}},"mark":{"arc":{"style":{"padAngle":0.01}}}},"common":{"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"var(--ks-ref-color-white)","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}},"series":{}}},"description":"Keystone Design - light","type":"light"}
\ No newline at end of file
+{"colorScheme":{"default":{"dataScheme":["#8987f6","#00577D","#E3CBE1","#A45626","#98CCF0","#5548bd","#F8DBCC","#664163","#babdff"],"palette":{"backgroundColor":"#ffffff","borderColor":"#e3e5e8","shadowColor":"rgba(33,37,44,0.1)","hoverBackgroundColor":"#f1f2f5","sliderRailColor":"#f1f3f4","sliderHandleColor":"#ffffff","sliderTrackColor":"#0040ff","popupBackgroundColor":"#ffffff","primaryFontColor":"#21252c","secondaryFontColor":"#606773","tertiaryFontColor":"#89909d","axisLabelFontColor":"#89909d","disableFontColor":"#bcc1cb","axisMarkerFontColor":"#ffffff","axisGridColor":"#f1f2f5","axisDomainColor":"#d9dde4","dataZoomHandleStrokeColor":"#aeb5be","dataZoomChartColor":"#c9ced8","playerControllerColor":"#0040ff","scrollBarSliderColor":"rgba(0,0,0,0.3)","axisMarkerBackgroundColor":"#21252c","markLabelBackgroundColor":"#f1f2f5","markLineStrokeColor":"#606773","dangerColor":"#e33232","warningColor":"#ffc528","successColor":"#07a35a","infoColor":"#3073f2","discreteLegendPagerTextColor":"rgb(51, 51, 51)","discreteLegendPagerHandlerColor":"rgb(47, 69, 84)","discreteLegendPagerHandlerDisableColor":"rgb(170, 170, 170)","emptyCircleColor":"#e3e5e8","linearProgressTrackColor":"#E7EBED"}}},"token":{"fontFamily":"PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,'-apple-system',segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol","fontSize":14,"l1FontSize":32,"l1LineHeight":"150%","l2FontSize":20,"l2LineHeight":"140%","l3FontSize":16,"l3LineHeight":"150%","l4FontSize":14,"l4LineHeight":"150%","l5FontSize":12,"l5LineHeight":"130%","l6FontSize":10,"l6LineHeight":"120%"},"series":{},"name":"keystoneDesignLight","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":{"type":"token","key":"fontFamily"},"component":{"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"axis":{"label":{"style":{"fontFamily":"TikTok Sans Text","pointerEvents":"auto","color":"#87898b","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}},"domainLine":{"style":{"stroke":"#a9abac","strokeOpacity":1,"lineWidth":0.5}},"tick":{"inside":false,"style":{"stroke":"#a9abac","strokeOpacity":1,"lineWidth":0.5}},"grid":{"style":{"stroke":"#e1e1e2","strokeOpacity":1,"lineWidth":0.5}},"title":{"position":"start","angle":0,"padding":[20,0,0,0],"style":{"textAlign":"start","dy":-20,"dx":0,"pointerEvents":"auto","fill":"#5e5f61","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16}}},"discreteLegend":{"position":"end","orient":"top","padding":0,"item":{"spaceRow":16,"shape":{"space":4,"style":{"symbolType":"circle","size":6}},"label":{"style":{"pointerEvents":"auto","color":"#87898b","fontSize":12,"fontStyle":"normal","fontWeight":400,"lineHeight":16,"letterSpacing":0.161}}}},"crosshair":{"xField":{"line":{"type":"line"}}},"tooltip":{"panel":{"backgroundColor":"#262627","border":{"radius":4}},"titleLabel":{"fontColor":"white","fontSize":12,"fontWeight":400,"lineHeight":16},"keyLabel":{"fontColor":"#87898b","fontSize":12,"fontWeight":400,"lineHeight":16},"valueLabel":{"fontColor":"white","fontSize":12,"fontWeight":500,"lineHeight":16,"textAlign":"center","spacing":0},"group":{"shapeType":"circle"}}},"mark":{"text":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1,"lineJoin":"bevel"}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontWeight":null,"fontSize":null}},"fillingWord":{"style":{"fontWeight":null,"fontSize":null}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06},"stroke":"transparent"}}},"animationThreshold":2000,"chart":{"line":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"#4f5051","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"hover":{"size":8,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"area":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"line","style":{"lineWidth":1,"stroke":"#4f5051","strokeOpacity":1,"lineDash":[2,2]}}},"yField":{"visible":false}}},"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}}},"bar":{"component":{"crosshair":{"xField":{"visible":false,"line":{"type":"rect","style":{"fill":"#F1F2F2"},"width":"110%"}},"yField":{"visible":false}}}},"pie":{"markByName":{"label":{"visible":true,"style":{"type":"text"}}},"mark":{"arc":{"style":{"padAngle":0.01}}}},"common":{"markByName":{"point":{"style":{"size":0,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"state":{"dimension_hover":{"size":8,"innerBorder":{"stroke":"white","distance":3,"lineWidth":2}},"hover":{"size":10,"innerBorder":{"distance":1,"lineWidth":0}}}}},"series":{}}},"description":"Keystone Design - light","type":"light"}
\ No newline at end of file
diff --git a/packages/vchart-keystone-theme/scripts/export-theme.ts b/packages/vchart-keystone-theme/scripts/export-theme.ts
index 2f32c0c..3439064 100644
--- a/packages/vchart-keystone-theme/scripts/export-theme.ts
+++ b/packages/vchart-keystone-theme/scripts/export-theme.ts
@@ -4,11 +4,56 @@
 import fs from 'fs';
 import path from 'path';
 import { ThemeManager } from '@visactor/vchart';
-import { allThemeMap } from '../src';
 
 const VCHART_THEME_PROJECT_ROOT = process.cwd();
 const targetPaths = [path.resolve(VCHART_THEME_PROJECT_ROOT, './public')];
 
+const parseCSSVariables = (css: string) => {
+  const variables = new Map<string, string>();
+  const rootBlockPattern = /:root\s*{([\s\S]*?)}/g;
+  let rootBlockMatch: RegExpExecArray | null;
+
+  while ((rootBlockMatch = rootBlockPattern.exec(css))) {
+    const declarationPattern = /(--[\w-]+)\s*:\s*([^;]+);/g;
+    let declarationMatch: RegExpExecArray | null;
+
+    while ((declarationMatch = declarationPattern.exec(rootBlockMatch[1]))) {
+      variables.set(declarationMatch[1], declarationMatch[2].replace(/\s*!important\s*$/, '').trim());
+    }
+  }
+
+  return variables;
+};
+
+const setupCSSVariableEnvironment = () => {
+  const variableMap = new Map<string, string>();
+  [path.resolve(VCHART_THEME_PROJECT_ROOT, './root.css'), path.resolve(VCHART_THEME_PROJECT_ROOT, './index.css')].forEach(
+    cssPath => {
+      if (!fs.existsSync(cssPath)) {
+        return;
+      }
+      parseCSSVariables(fs.readFileSync(cssPath, 'utf8')).forEach((value, key) => {
+        variableMap.set(key, value);
+      });
+    }
+  );
+
+  (globalThis as any).document = {
+    documentElement: {},
+    body: {
+      hasAttribute: () => false,
+      getAttribute: () => null
+    }
+  };
+  (globalThis as any).getComputedStyle = () => ({
+    getPropertyValue: (name: string) => variableMap.get(name) ?? ''
+  });
+};
+
+setupCSSVariableEnvironment();
+
+const { allThemeMap } = require('../src') as typeof import('../src');
+
 const result: string[] = [];
 allThemeMap.forEach((value, key) => {
   let success = true;