diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2b587c5ee7..7d451256e4 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,7 +2,7 @@ First of all, thank you for your interest in the library. We'd love to accept yo
 
 ## Prerequisites
 
-1. Install the latest LTS version of [Node.js](https://nodejs.org/en).
+1. Install the latest LTS (min 24) version of [Node.js](https://nodejs.org/en).
 2. Install [pnpm](https://pnpm.js.org) globally by running: `npm i -g pnpm@10`.
 3. Set up commit signing for your contributions. Follow these steps:
    - [Generate a GPG key](https://docs.github.com/en/authentication/managing-commit-signature-verification/generating-a-new-gpg-key)
diff --git a/package.json b/package.json
index 0171778e61..4f33b63307 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "dev": "pnpm storybook",
     "start": "pnpm storybook",
     "build": "pnpm run clean && pnpm --filter @semcore/core run build && pnpm build:icons && pnpm build:illustration && pnpm --filter @semcore/base-components run build && pnpm --filter @semcore/dropdown run build && pnpm --filter @semcore/* --filter !@semcore/icon --filter !@semcore/core --filter !@semcore/base-components --filter !@semcore/illustration --filter !@semcore/dropdown --filter !@semcore/ui run build",
-    "process-theme": "tsm --require=./.ci/tsm-filter-warnings.js semcore/core/src/theme/processor.ts",
+    "process-theme": "pnpm --filter @semcore/theme build",
     "typecheck": "pnpm --filter @semcore/* --filter !@semcore/babel-plugin-root --filter !@semcore/babel-plugin-styles --filter !@semcore/babel-plugin-react-semcore --filter !@semcore/babel-preset-ui --filter !@semcore/testing-utils --filter !@semcore/email --filter !@semcore/icon-transform-svg --filter !@semcore/shadow-loader exec tsc --noEmit",
     "install-n-test": "pnpm install && pnpm test",
     "install-n-browser-test": "pnpm install && pnpm browser-test",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9289742a7c..9577665823 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -706,9 +706,6 @@ importers:
         specifier: 16.8 - 18
         version: 18.3.1(react@18.3.1)
     devDependencies:
-      '@pandacss/dev':
-        specifier: ^1.9.0
-        version: 1.9.0(jsdom@22.1.0)(typescript@5.9.3)
       '@semcore/testing-utils':
         specifier: workspace:*
         version: link:../../tools/testing-utils
@@ -2249,6 +2246,24 @@ importers:
         specifier: 3.1.3
         version: 3.1.3
 
+  semcore/theme:
+    devDependencies:
+      '@pandacss/dev':
+        specifier: 1.9.0
+        version: 1.9.0(jsdom@22.1.0)(typescript@5.9.3)
+      '@semcore/testing-utils':
+        specifier: workspace:*
+        version: link:../../tools/testing-utils
+      colorjs.io:
+        specifier: 0.4.3
+        version: 0.4.3
+      postcss:
+        specifier: 8.4.33
+        version: 8.4.33
+      postcss-value-parser:
+        specifier: 4.1.0
+        version: 4.1.0
+
   semcore/time-picker:
     dependencies:
       '@semcore/base-components':
@@ -17728,7 +17743,7 @@ snapshots:
   '@react-native/codegen@0.81.4(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.29.2
       glob: 7.2.3
       hermes-parser: 0.29.1
       invariant: 2.2.4
@@ -19410,7 +19425,7 @@ snapshots:
 
   accepts@2.0.0:
     dependencies:
-      mime-types: 3.0.1
+      mime-types: 3.0.2
       negotiator: 1.0.0
 
   acorn-import-phases@1.0.4(acorn@8.15.0):
@@ -19734,7 +19749,7 @@ snapshots:
 
   autoprefixer@10.4.21(postcss@8.4.33):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.28.1
       caniuse-lite: 1.0.30001748
       fraction.js: 4.3.7
       normalize-range: 0.1.2
@@ -19744,7 +19759,7 @@ snapshots:
 
   autoprefixer@9.8.8:
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.28.1
       caniuse-lite: 1.0.30001748
       normalize-range: 0.1.2
       num2fraction: 1.2.2
@@ -20093,7 +20108,7 @@ snapshots:
       bytes: 3.1.2
       content-type: 1.0.5
       debug: 4.4.3
-      http-errors: 2.0.0
+      http-errors: 2.0.1
       iconv-lite: 0.7.2
       on-finished: 2.4.1
       qs: 6.15.0
@@ -22075,14 +22090,14 @@ snapshots:
       etag: 1.8.1
       finalhandler: 2.1.1
       fresh: 2.0.0
-      http-errors: 2.0.0
+      http-errors: 2.0.1
       merge-descriptors: 2.0.0
-      mime-types: 3.0.1
+      mime-types: 3.0.2
       on-finished: 2.4.1
       once: 1.4.0
       parseurl: 1.3.3
       proxy-addr: 2.0.7
-      qs: 6.14.0
+      qs: 6.15.0
       range-parser: 1.2.1
       router: 2.2.0
       send: 1.2.1
@@ -24451,7 +24466,7 @@ snapshots:
     dependencies:
       '@babel/traverse': 7.28.4
       '@babel/traverse--for-generate-function-map': '@babel/traverse@7.28.4'
-      '@babel/types': 7.28.4
+      '@babel/types': 7.29.0
       flow-enums-runtime: 0.0.6
       invariant: 2.2.4
       metro-symbolicate: 0.83.3
@@ -24488,8 +24503,8 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
       '@babel/generator': 7.28.3
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.29.2
+      '@babel/types': 7.29.0
       flow-enums-runtime: 0.0.6
       metro: 0.83.3
       metro-babel-transformer: 0.83.3
@@ -24509,10 +24524,10 @@ snapshots:
       '@babel/code-frame': 7.27.1
       '@babel/core': 7.27.7
       '@babel/generator': 7.28.3
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.29.2
       '@babel/template': 7.27.2
       '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/types': 7.29.0
       accepts: 1.3.8
       chalk: 4.1.2
       ci-info: 2.0.0
@@ -28252,7 +28267,7 @@ snapshots:
     dependencies:
       content-type: 1.0.5
       media-typer: 1.1.0
-      mime-types: 3.0.1
+      mime-types: 3.0.2
 
   typed-array-buffer@1.0.3:
     dependencies:
diff --git a/semcore/core/package.json b/semcore/core/package.json
index 86af37aa1c..bcb0065554 100644
--- a/semcore/core/package.json
+++ b/semcore/core/package.json
@@ -21,11 +21,6 @@
       "import": "./src/index.ts",
       "types": "./src/index.ts"
     },
-    "./lib/theme/themes/panda-preset": {
-      "require": "./lib/theme/themes/panda-preset.js",
-      "import": "./lib/theme/themes/panda-preset.mjs",
-      "types": "./lib/theme/themes/panda-preset.d.ts"
-    },
     "./lib/theme/themes/default.css": {
       "require": "./lib/theme/themes/default.css",
       "import": "./lib/theme/themes/default.css"
@@ -329,7 +324,6 @@
     "directory": "semcore/core"
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.9.0",
     "@semcore/testing-utils": "workspace:*",
     "@types/classnames": "2.2.6",
     "@types/hoist-non-react-statics": "^3.3.6",
diff --git a/semcore/core/src/theme/light.css b/semcore/core/src/theme/light.css
deleted file mode 100644
index 410604b601..0000000000
--- a/semcore/core/src/theme/light.css
+++ /dev/null
@@ -1,747 +0,0 @@
-:root {
-  --white: oklch(1 0 0);
-
-  /* pink */
-  --pink-50: oklch(0.966 0.004 115.552);
-  --pink-100: oklch(0.904 0.011 115.552);
-  --pink-200: oklch(0.824 0.02 115.552);
-  --pink-300: oklch(0.74 0.03 115.552);
-  --pink-400: oklch(0.66 0.04 115.552);
-  --pink-500: oklch(0.54 0.036 115.552);
-  --pink-600: oklch(0.41 0.027 115.552);
-  --pink-700: oklch(0.29 0.019 115.552);
-  --pink-800: oklch(0.22 0.015 115.552);
-
-  /* violet-dusty */
-  --violet-dusty-50: oklch(0.966 0.004 189.338);
-  --violet-dusty-100: oklch(0.904 0.011 189.338);
-  --violet-dusty-200: oklch(0.824 0.02 189.338);
-  --violet-dusty-300: oklch(0.74 0.03 189.338);
-  --violet-dusty-400: oklch(0.66 0.034 189.338);
-  --violet-dusty-500: oklch(0.54 0.028 189.338);
-  --violet-dusty-600: oklch(0.41 0.021 189.338);
-  --violet-dusty-700: oklch(0.29 0.015 189.338);
-  --violet-dusty-800: oklch(0.22 0.011 189.338);
-
-  /* gray */
-  --gray-50: oklch(0.966 0.001 277.6);
-  --gray-100: oklch(0.904 0.004 277.6);
-  --gray-200: oklch(0.824 0.007 277.6);
-  --gray-300: oklch(0.74 0.01 277.6);
-  --gray-400: oklch(0.66 0.013 277.6);
-  --gray-500: oklch(0.54 0.017 277.6);
-  --gray-600: oklch(0.41 0.013 277.6);
-  --gray-700: oklch(0.29 0.009 277.6);
-  --gray-800: oklch(0.22 0.007 277.6);
-
-  /* red */
-  --red-50: oklch(0.966 0.022 27.658);
-  --red-100: oklch(0.904 0.065 27.658);
-  --red-200: oklch(0.824 0.119 27.658);
-  --red-300: oklch(0.74 0.175 27.658);
-  --red-400: oklch(0.66 0.229 27.658);
-  --red-500: oklch(0.54 0.203 27.658);
-  --red-600: oklch(0.41 0.154 27.658);
-  --red-700: oklch(0.29 0.109 27.658);
-  --red-800: oklch(0.22 0.083 27.658);
-
-  /* orange */
-  --orange-50: oklch(0.96 0.026 38.47);
-  --orange-100: oklch(0.904 0.063 38.47);
-  --orange-200: oklch(0.824 0.116 38.47);
-  --orange-300: oklch(0.74 0.171 38.47);
-  --orange-400: oklch(0.66 0.19 38.47);
-  --orange-500: oklch(0.54 0.156 38.47);
-  --orange-600: oklch(0.41 0.118 38.47);
-  --orange-700: oklch(0.29 0.084 38.47);
-  --orange-800: oklch(0.22 0.063 38.47);
-
-  /* yellow */
-  --yellow-50: oklch(0.96 0.039 80.292);
-  --yellow-100: oklch(0.904 0.094 80.292);
-  --yellow-200: oklch(0.824 0.161 80.292);
-  --yellow-300: oklch(0.74 0.145 80.292);
-  --yellow-400: oklch(0.66 0.129 80.292);
-  --yellow-500: oklch(0.54 0.106 80.292);
-  --yellow-600: oklch(0.41 0.08 80.292);
-  --yellow-700: oklch(0.29 0.057 80.292);
-  --yellow-800: oklch(0.22 0.043 80.292);
-
-  /* salad */
-  --salad-50: oklch(0.96 0.023 147.344);
-  --salad-100: oklch(0.904 0.056 147.344);
-  --salad-200: oklch(0.824 0.103 147.344);
-  --salad-300: oklch(0.74 0.152 147.344);
-  --salad-400: oklch(0.66 0.151 147.344);
-  --salad-500: oklch(0.54 0.124 147.344);
-  --salad-600: oklch(0.41 0.094 147.344);
-  --salad-700: oklch(0.29 0.066 147.344);
-  --salad-800: oklch(0.22 0.05 147.344);
-
-  /* green */
-  --green-50: oklch(0.966 0.038 170.688);
-  --green-100: oklch(0.904 0.106 170.688);
-  --green-200: oklch(0.824 0.16 170.688);
-  --green-300: oklch(0.74 0.143 170.688);
-  --green-400: oklch(0.66 0.128 170.688);
-  --green-500: oklch(0.54 0.105 170.688);
-  --green-600: oklch(0.41 0.079 170.688);
-  --green-700: oklch(0.29 0.056 170.688);
-  --green-800: oklch(0.22 0.043 170.688);
-
-  /* blue */
-  --blue-hue: 263.265;
-  --blue-50: oklch(0.966 0.016 var(--blue-hue));
-  --blue-100: oklch(0.904 0.045 var(--blue-hue));
-  --blue-200: oklch(0.824 0.082 var(--blue-hue));
-  --blue-300: oklch(0.74 0.121 var(--blue-hue));
-  --blue-400: oklch(0.66 0.158 var(--blue-hue));
-  --blue-500: oklch(0.54 0.214 var(--blue-hue));
-  --blue-600: oklch(0.41 0.164 var(--blue-hue));
-  --blue-700: oklch(0.29 0.116 var(--blue-hue));
-  --blue-800: oklch(0.22 0.088 var(--blue-hue));
-
-  /* violet */
-  --violet-50: oklch(0.966 0.02 296.031);
-  --violet-100: oklch(0.904 0.058 295.962);
-  --violet-200: oklch(0.824 0.106 295.962);
-  --violet-300: oklch(0.74 0.156 295.962);
-  --violet-400: oklch(0.66 0.204 295.962);
-  --violet-500: oklch(0.54 0.27 295.962);
-  --violet-600: oklch(0.41 0.205 295.962);
-  --violet-700: oklch(0.29 0.145 295.962);
-  --violet-800: oklch(0.22 0.11 295.962);
-
-  /* ============================================================================================ */
-  /* ============================================================================================ */
-  /* ============================================================================================ */
-
-  /* Background */
-  --intergalactic-bg-primary-neutral: var(--white);
-  --intergalactic-bg-primary-neutral-hover: var(--gray-50);
-  --intergalactic-bg-primary-neutral-active: var(--gray-100);
-  --intergalactic-bg-primary-info: var(--blue-400);
-  --intergalactic-bg-primary-success: var(--green-400);
-  --intergalactic-bg-primary-critical: var(--red-400);
-  --intergalactic-bg-primary-warning: var(--orange-400);
-  --intergalactic-bg-primary-highlight: var(--yellow-100);
-  --intergalactic-bg-primary-advertising: var(--violet-700);
-  --intergalactic-bg-primary-muted: var(--gray-500);
-  --intergalactic-bg-primary-invert: var(--gray-800);
-  --intergalactic-bg-primary-invert-hover: var(--gray-700);
-  --intergalactic-bg-primary-invert-active: var(--gray-600);
-
-  --intergalactic-bg-secondary-neutral: var(--gray-50);
-  --intergalactic-bg-secondary-neutral-hover: var(--gray-100);
-  --intergalactic-bg-secondary-neutral-active: var(--gray-200);
-  --intergalactic-bg-secondary-info: var(--blue-50);
-  --intergalactic-bg-secondary-info-hover: var(--blue-100);
-  --intergalactic-bg-secondary-info-active: var(--blue-200);
-  --intergalactic-bg-secondary-success: var(--green-50);
-  --intergalactic-bg-secondary-success-hover: var(--green-100);
-  --intergalactic-bg-secondary-success-active: var(--green-200);
-  --intergalactic-bg-secondary-critical: var(--red-50);
-  --intergalactic-bg-secondary-critical-hover: var(--red-100);
-  --intergalactic-bg-secondary-critical-active: var(--red-200);
-  --intergalactic-bg-secondary-warning: var(--orange-50);
-  --intergalactic-bg-secondary-warning-hover: var(--orange-100);
-  --intergalactic-bg-secondary-warning-active: var(--orange-200);
-  --intergalactic-bg-secondary-highlight: var(--yellow-50);
-  --intergalactic-bg-secondary-highlight-hover: var(--yellow-100);
-  --intergalactic-bg-secondary-highlight-active: var(--yellow-200);
-  --intergalactic-bg-secondary-advertising: var(--violet-50);
-  --intergalactic-bg-secondary-advertising-hover: var(--violet-100);
-  --intergalactic-bg-secondary-advertising-active: var(--violet-200);
-
-  --intergalactic-bg-highlight-results: oklch(
-    from var(--yellow-300) l c h / 0.4
-  );
-  --intergalactic-bg-highlight-focus: oklch(from var(--blue-400) l c h / 0.2);
-
-  /* Text */
-  --intergalactic-text-primary: var(--gray-800);
-  --intergalactic-text-secondary: var(--gray-500);
-  --intergalactic-text-placeholder: var(--gray-400);
-  --intergalactic-text-success: var(--green-500);
-  --intergalactic-text-success-hover-active: var(--green-600);
-  --intergalactic-text-critical: var(--red-500);
-  --intergalactic-text-critical-hover-active: var(--red-600);
-  --intergalactic-text-primary-invert: var(--white);
-  --intergalactic-text-secondary-invert: oklch(from var(--white) l c h / 0.8);
-  --intergalactic-text-link: var(--blue-500);
-  --intergalactic-text-link-hover-active: var(--blue-600);
-  --intergalactic-text-link-invert: var(--blue-200);
-  --intergalactic-text-link-invert-hover: var(--blue-300);
-  --intergalactic-text-link-visited: var(--violet-500);
-  --intergalactic-text-hint: var(--gray-500);
-  --intergalactic-text-hint-hover-active: var(--gray-600);
-  --intergalactic-text-hint-invert: var(--gray-200);
-  --intergalactic-text-hint-invert-hover-active: var(--gray-300);
-  --intergalactic-text-large-secondary: var(--gray-300);
-  --intergalactic-text-large-info: var(--blue-400);
-  --intergalactic-text-large-info-hover-active: var(--blue-500);
-  --intergalactic-text-large-success: var(--green-400);
-  --intergalactic-text-large-success-hover-active: var(--green-500);
-  --intergalactic-text-large-critical: var(--red-400);
-  --intergalactic-text-large-critical-hover-active: var(--red-500);
-  --intergalactic-text-advertising: var(--violet-700);
-
-  /* Border */
-  --intergalactic-border-primary: var(--gray-200);
-  --intergalactic-border-secondary: var(--gray-100);
-  --intergalactic-border-info: var(--blue-200);
-  --intergalactic-border-info-active: var(--blue-500);
-  --intergalactic-border-success: var(--green-200);
-  --intergalactic-border-success-active: var(--green-500);
-  --intergalactic-border-critical: var(--red-200);
-  --intergalactic-border-critical-active: var(--red-500);
-  --intergalactic-border-warning: var(--orange-200);
-  --intergalactic-border-warning-active: var(--orange-500);
-  --intergalactic-border-primary-invert: var(--white);
-  --intergalactic-border-secondary-invert: oklch(from var(--white) l c h / 0.3);
-  --intergalactic-border-tooltip-invert: var(--gray-500);
-  --intergalactic-border-table-accent: var(--gray-300);
-  --intergalactic-border-date-picker-range-comparison: var(--violet-500);
-  --intergalactic-border-critical-pattern: repeating-linear-gradient(
-    315deg,
-    var(--intergalactic-border-critical-active) 0,
-    var(--intergalactic-border-critical-active) 2px,
-    transparent 0,
-    transparent 50%
-  );
-
-  /* Control */
-  --intergalactic-control-switch-bg: var(--gray-300);
-  --intergalactic-control-primary-info: var(--gray-800);
-  --intergalactic-control-primary-info-hover: var(--gray-700);
-  --intergalactic-control-primary-info-active: var(--gray-600);
-  --intergalactic-control-primary-success: var(--green-400);
-  --intergalactic-control-primary-success-hover: var(--green-500);
-  --intergalactic-control-primary-success-active: var(--green-600);
-  --intergalactic-control-primary-critical: var(--red-400);
-  --intergalactic-control-primary-critical-hover: var(--red-500);
-  --intergalactic-control-primary-critical-active: var(--red-600);
-  --intergalactic-control-primary-brand: var(--orange-400);
-  --intergalactic-control-primary-brand-hover: var(--orange-500);
-  --intergalactic-control-primary-brand-active: var(--orange-600);
-  --intergalactic-control-primary-advertising: var(--violet-600);
-  --intergalactic-control-primary-advertising-hover: var(--violet-700);
-  --intergalactic-control-primary-advertising-active: var(--violet-500);
-  --intergalactic-control-primary-invert: var(--white);
-  --intergalactic-control-primary-invert-hover: var(--gray-50);
-  --intergalactic-control-primary-invert-active: var(--gray-100);
-  --intergalactic-control-secondary-neutral: oklch(
-    from var(--gray-400) l c h / 0.1
-  );
-  --intergalactic-control-secondary-neutral-hover: oklch(
-    from var(--gray-400) l c h / 0.2
-  );
-  --intergalactic-control-secondary-neutral-active: oklch(
-    from var(--gray-400) l c h / 0.3
-  );
-  --intergalactic-control-secondary-info: oklch(
-    from var(--blue-400) l c h / 0.1
-  );
-  --intergalactic-control-secondary-info-hover: oklch(
-    from var(--blue-400) l c h / 0.2
-  );
-  --intergalactic-control-secondary-info-active: oklch(
-    from var(--blue-400) l c h / 0.3
-  );
-  --intergalactic-control-secondary-invert: oklch(
-    from var(--white) l c h / 0.05
-  );
-  --intergalactic-control-secondary-invert-hover: oklch(
-    from var(--white) l c h / 0.1
-  );
-  --intergalactic-control-secondary-invert-active: oklch(
-    from var(--white) l c h / 0.3
-  );
-  --intergalactic-control-tertiary-neutral: oklch(
-    from var(--gray-400) l c h / 0
-  );
-  --intergalactic-control-tertiary-neutral-hover: oklch(
-    from var(--gray-400) l c h / 0.2
-  );
-  --intergalactic-control-tertiary-neutral-active: oklch(
-    from var(--gray-400) l c h / 0.3
-  );
-  --intergalactic-control-tertiary-info: oklch(from var(--blue-400) l c h / 0);
-  --intergalactic-control-tertiary-info-hover: oklch(
-    from var(--blue-400) l c h / 0.2
-  );
-  --intergalactic-control-tertiary-info-active: oklch(
-    from var(--blue-400) l c h / 0.3
-  );
-  --intergalactic-control-tertiary-invert: oklch(from var(--white) l c h / 0);
-  --intergalactic-control-tertiary-invert-hover: oklch(
-    from var(--white) l c h / 0.1
-  );
-  --intergalactic-control-tertiary-invert-active: oklch(
-    from var(--white) l c h / 0.3
-  );
-
-  /* Icon */
-  --intergalactic-icon-primary-neutral: var(--gray-500);
-  --intergalactic-icon-primary-neutral-hover-active: oklch(
-    from var(--gray-500) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-primary-info: var(--blue-500);
-  --intergalactic-icon-primary-info-hover-active: oklch(
-    from var(--blue-500) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-primary-success: var(--green-400);
-  --intergalactic-icon-primary-success-hover-active: oklch(
-    from var(--green-400) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-primary-critical: var(--red-400);
-  --intergalactic-icon-primary-critical-hover-active: oklch(
-    from var(--red-400) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-primary-warning: var(--orange-400);
-  --intergalactic-icon-primary-warning-hover-active: oklch(
-    from var(--orange-400) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-primary-invert: var(--white);
-  --intergalactic-icon-primary-invert-hover-active: var(--gray-100);
-  --intergalactic-icon-secondary-neutral: var(--gray-300);
-  --intergalactic-icon-secondary-neutral-hover-active: oklch(
-    from var(--gray-300) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-secondary-info: var(--blue-300);
-  --intergalactic-icon-secondary-info-hover-active: oklch(
-    from var(--blue-300) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-secondary-success: var(--green-300);
-  --intergalactic-icon-secondary-success-hover-active: oklch(
-    from var(--green-300) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-secondary-critical: var(--red-300);
-  --intergalactic-icon-secondary-critical-hover-active: oklch(
-    from var(--red-300) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-secondary-warning: var(--orange-300);
-  --intergalactic-icon-secondary-warning-hover-active: oklch(
-    from var(--orange-300) calc(l * 0.8) c h
-  );
-  --intergalactic-icon-non-interactive: var(--gray-800);
-
-  /* Date Picker */
-  --intergalactic-date-picker-cell: var(--white);
-  --intergalactic-date-picker-cell-current: var(--gray-400);
-  --intergalactic-date-picker-cell-hover: var(--gray-100);
-  --intergalactic-date-picker-cell-range: var(--blue-100);
-  --intergalactic-date-picker-cell-range-hover: var(--blue-200);
-  --intergalactic-date-picker-cell-active: var(--blue-300);
-  --intergalactic-date-picker-cell-active-hover: var(--blue-400);
-  --intergalactic-date-picker-cell-current-invert: oklch(
-    from var(--white) l c h / 0.5
-  );
-  --intergalactic-date-picker-cell-comparison-active: var(--violet-500);
-  --intergalactic-date-picker-cell-comparison-active-hover: var(--violet-600);
-
-  /* Dropdown Menu */
-  --intergalactic-dropdown-menu-item: var(--white);
-  --intergalactic-dropdown-menu-item-hover: var(--gray-50);
-  --intergalactic-dropdown-menu-item-selected: oklch(
-    from var(--blue-100) l c h / 0.7
-  );
-  --intergalactic-dropdown-menu-item-selected-hover: var(--blue-100);
-
-  /* Feature Popover */
-  --intergalactic-feature-popover-dot-outer-border: var(
-    --intergalactic-bg-primary-highlight
-  );
-
-  /* Progress Bar */
-  --intergalactic-progress-bar-bg: var(--gray-100);
-  --intergalactic-progress-bar-bg-hover: var(--gray-200);
-  --intergalactic-progress-bar-bg-invert: oklch(from var(--white) l c h / 0.2);
-  --intergalactic-progress-bar-bg-invert-hover: oklch(
-    from var(--white) l c h / 0.4
-  );
-  --intergalactic-progress-bar-value: var(--green-400);
-  --intergalactic-progress-bar-value-gradient: linear-gradient(
-    -45deg,
-    oklch(from var(--green-300) l c h / 0.9) 25%,
-    var(--green-300) 0%,
-    var(--green-300) 50%,
-    oklch(from var(--green-300) l c h / 0.9) 0%,
-    oklch(from var(--green-300) l c h / 0.9) 75%,
-    var(--green-300) 0%
-  );
-  --intergalactic-progress-bar-pattern-gradient: linear-gradient(
-    -45deg,
-    oklch(from var(--gray-100) l c h / 0.9) 25%,
-    var(--gray-100) 0%,
-    var(--gray-100) 50%,
-    oklch(from var(--gray-100) l c h / 0.9) 0%,
-    oklch(from var(--gray-100) l c h / 0.9) 75%,
-    var(--gray-100) 0%
-  );
-  --intergalactic-progress-bar-value-bg: oklch(0 0 0);
-
-  /* Skeleton */
-  --intergalactic-skeleton-bg: oklch(from var(--gray-100) l c h / 0.8);
-  --intergalactic-skeleton-bg-invert: oklch(from var(--white) l c h / 0.3);
-
-  /* Slider Rating */
-  --intergalactic-slider-rating-normal: var(
-    --intergalactic-icon-secondary-neutral
-  );
-  --intergalactic-slider-rating-hover-active: var(--yellow-200);
-
-  /* Table */
-  --intergalactic-table-th-primary-cell: var(--gray-50);
-  --intergalactic-table-th-primary-cell-hover: var(--gray-100);
-  --intergalactic-table-th-primary-cell-active: var(--gray-100);
-  --intergalactic-table-th-secondary-cell: var(--white);
-  --intergalactic-table-th-gradient: linear-gradient(
-    to right,
-    oklch(from var(--gray-100) l c h / 0) 0%,
-    var(--gray-100) 100%
-  );
-  --intergalactic-table-td-cell: var(--white);
-  --intergalactic-table-td-cell-hover: oklch(
-    from var(--gray-100) calc(l + (1 - l) * 0.5) c h
-  );
-  --intergalactic-table-td-cell-active: oklch(
-    from var(--gray-100) calc(l + (1 - l) * 0.2) c h
-  );
-  --intergalactic-table-td-cell-unread: var(--gray-50);
-  --intergalactic-table-td-cell-accordion: var(--gray-50);
-  --intergalactic-table-td-cell-selected: var(--blue-50);
-  --intergalactic-table-td-cell-selected-hover: var(--blue-100);
-  --intergalactic-table-td-cell-selected-active: var(--blue-100);
-  --intergalactic-table-td-cell-new: var(--green-50);
-  --intergalactic-table-td-cell-new-hover: var(--green-100);
-  --intergalactic-table-td-cell-new-active: var(--green-100);
-  --intergalactic-table-td-cell-critical: var(--red-50);
-  --intergalactic-table-td-cell-critical-hover: var(--red-100);
-  --intergalactic-table-td-cell-critical-active: var(--red-100);
-  --intergalactic-table-td-cell-warning: var(--orange-50);
-  --intergalactic-table-td-cell-warning-hover: var(--orange-100);
-  --intergalactic-table-td-cell-warning-active: var(--orange-100);
-
-  /* Brand */
-  --intergalactic-brand-primary: var(--orange-400);
-  --intergalactic-brand-secondary: var(--violet-700);
-  --intergalactic-brand-pinterest: #bd081c;
-  --intergalactic-brand-instagram: #e4405f;
-  --intergalactic-brand-youtube: #ff0000;
-  --intergalactic-brand-facebook: #1877f2;
-  --intergalactic-brand-linkedIn: #0a66c2;
-  --intergalactic-brand-twitter: #1d9bf0;
-  --intergalactic-brand-google-blue: #1a0dab;
-  --intergalactic-brand-google-green: #016723;
-  --intergalactic-brand-google-my-business: #1a73e8;
-
-  /* Box Shadow */
-  --intergalactic-box-shadow-card: 0px 0px 1px 0px
-    oklch(from var(--gray-800) l c h / 0.16),
-    0px 1px 2px 0px oklch(from var(--gray-800) l c h / 0.12);
-  --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px
-    oklch(from var(--gray-800) l c h / 0.15);
-  --intergalactic-box-shadow-dnd: 0px 0px 1px 0px
-    oklch(from var(--gray-800) l c h / 0.16),
-    0px 12px 40px 0px oklch(from var(--gray-800) l c h / 0.16);
-  --intergalactic-box-shadow-modal: 0px 3px 8px 0px
-    oklch(from var(--gray-800) l c h / 0.2);
-  --intergalactic-box-shadow-popper: 0px 1px 12px 0px
-    oklch(from var(--gray-800) l c h / 0.15);
-  --intergalactic-box-shadow-float-control: 0px 0px 1px 0px oklch(0 0 0 / 0.16),
-    0px 1px 2px 0px oklch(0 0 0 / 0.12);
-  --intergalactic-box-shadow-float-control-hover: 0px 0px 2px 0px
-    oklch(0 0 0 / 0.2),
-    0px 1px 4px 0px oklch(0 0 0 / 0.16);
-
-  /* Keyboard Focus */
-  --intergalactic-keyboard-focus-outline: oklch(
-    from var(--blue-400) l c h / 0.5
-  );
-  --intergalactic-keyboard-focus-outline-invert: oklch(
-    from var(--white) l c h / 0.7
-  );
-  --intergalactic-keyboard-focus: 0px 0px 0px 3px
-    var(--intergalactic-keyboard-focus-outline);
-  --intergalactic-keyboard-focus-invalid-outline: oklch(
-    from var(--red-400) l c h / 0.5
-  );
-  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px
-    var(--intergalactic-keyboard-focus-invalid-outline);
-  --intergalactic-keyboard-focus-valid-outline: oklch(
-    from var(--green-400) l c h / 0.5
-  );
-  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px
-    var(--intergalactic-keyboard-focus-valid-outline);
-  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px
-    var(--intergalactic-keyboard-focus-outline-invert);
-
-  /* Typography */
-  --base: Inter;
-  --intergalactic-lh-800: 117%;
-  --intergalactic-lh-700: 110%;
-  --intergalactic-lh-600: 125%;
-  --intergalactic-lh-500: 117%;
-  --intergalactic-lh-400: 120%;
-  --intergalactic-lh-300: 150%;
-  --intergalactic-lh-200: 142%;
-  --intergalactic-lh-100: 133%;
-  --intergalactic-semi-bold: 600;
-  --intergalactic-bold: 700;
-  --intergalactic-regular: 400;
-  --intergalactic-medium: 500;
-  --intergalactic-fs-50: 10px;
-  --intergalactic-fs-100: 12px;
-  --intergalactic-fs-200: 14px;
-  --intergalactic-fs-300: 16px;
-  --intergalactic-fs-400: 20px;
-  --intergalactic-fs-500: 24px;
-  --intergalactic-fs-600: 32px;
-  --intergalactic-fs-700: 36px;
-  --intergalactic-fs-800: 48px;
-  --intergalactic-compact: 0.3;
-
-  /* Spacing & Sizing */
-  --intergalactic-scale-indent: 4px;
-  --intergalactic-form-control-s: calc(var(--intergalactic-scale-indent) * 5);
-  --intergalactic-form-control-m: calc(var(--intergalactic-scale-indent) * 7);
-  --intergalactic-form-control-l: calc(var(--intergalactic-scale-indent) * 10);
-  --intergalactic-spacing-05x: calc(var(--intergalactic-scale-indent) * 0.5);
-  --intergalactic-spacing-1x: calc(var(--intergalactic-scale-indent) * 1);
-  --intergalactic-spacing-2x: calc(var(--intergalactic-scale-indent) * 2);
-  --intergalactic-spacing-3x: calc(var(--intergalactic-scale-indent) * 3);
-  --intergalactic-spacing-4x: calc(var(--intergalactic-scale-indent) * 4);
-  --intergalactic-spacing-5x: calc(var(--intergalactic-scale-indent) * 5);
-  --intergalactic-spacing-6x: calc(var(--intergalactic-scale-indent) * 6);
-  --intergalactic-spacing-8x: calc(var(--intergalactic-scale-indent) * 8);
-  --intergalactic-spacing-10x: calc(var(--intergalactic-scale-indent) * 10);
-  --intergalactic-spacing-14x: calc(var(--intergalactic-scale-indent) * 14);
-  --intergalactic-spacing-20x: calc(var(--intergalactic-scale-indent) * 20);
-  --intergalactic-spacing-24x: calc(var(--intergalactic-scale-indent) * 24);
-  --intergalactic-spacing-30x: calc(var(--intergalactic-scale-indent) * 30);
-
-  /* Border Radius */
-  --intergalactic-rounded-extra-small: 2px;
-  --intergalactic-rounded-small: 4px;
-  --intergalactic-rounded-medium: 6px;
-  --intergalactic-rounded-large: 12px;
-  --intergalactic-rounded-extra-large: 24px;
-  --intergalactic-addon-rounded: var(--intergalactic-rounded-small);
-  --intergalactic-badge-rounded: var(--intergalactic-rounded-medium);
-  --intergalactic-chart-rounded: var(--intergalactic-rounded-extra-small);
-  --intergalactic-counter-rounded: var(--intergalactic-rounded-large);
-  --intergalactic-tag-rounded: var(--intergalactic-rounded-extra-large);
-  --intergalactic-switch-rounded: var(--intergalactic-rounded-extra-large);
-  --intergalactic-control-rounded: var(--intergalactic-rounded-medium);
-  --intergalactic-progress-bar-rounded: var(--intergalactic-rounded-medium);
-  --intergalactic-surface-rounded: var(--intergalactic-rounded-medium);
-  --intergalactic-popper-rounded: var(--intergalactic-rounded-medium);
-  --intergalactic-modal-rounded: var(--intergalactic-rounded-large);
-
-  /* Misc */
-  --intergalactic-disabled-opacity: 0.3;
-  --intergalactic-screen-extra-small: 320px;
-  --intergalactic-screen-small: 768px;
-  --intergalactic-screen-medium: 1200px;
-  --intergalactic-screen-large: 1920px;
-
-  /* Overlay */
-  --intergalactic-overlay-primary: oklch(from var(--gray-800) l c h / 0.7);
-  --intergalactic-overlay-secondary: oklch(from var(--gray-800) l c h / 0.4);
-  --intergalactic-overlay-limitation-primary: var(--gray-50);
-  --intergalactic-overlay-limitation-secondary: oklch(
-    from var(--white) l c h / 0.85
-  );
-
-  /* Z-index */
-  --intergalactic-z-index-deep: -999;
-  --intergalactic-z-index-overlay: 500;
-  --intergalactic-z-index-modal: 900;
-  --intergalactic-z-index-popper: 700;
-  --intergalactic-z-index-dropdown: 750;
-  --intergalactic-z-index-tooltip: 800;
-  --intergalactic-z-index-notice-bubble: 999;
-
-  /* Tooltip */
-  --intergalactic-tooltip-default: var(--white);
-  --intergalactic-tooltip-warning: var(--red-100);
-  --intergalactic-tooltip-invert: var(--gray-800);
-
-  /* Neighbor Location */
-  --intergalactic-neighbor-location-neutral: oklch(
-    from var(--white) l c h / 0.5
-  );
-  --intergalactic-neighbor-location-invert: oklch(0 0 0 / 0.5);
-
-  /* Scroll Area */
-  --intergalactic-scroll-area-shadow-left: linear-gradient(
-    to right,
-    oklch(from var(--gray-800) l c h / 0.1) 20.55%,
-    oklch(from var(--white) l c h / 0.0001) 100%
-  );
-  --intergalactic-scroll-area-shadow-right: linear-gradient(
-    to left,
-    oklch(from var(--gray-800) l c h / 0.1) 20.55%,
-    oklch(from var(--white) l c h / 0.0001) 100%
-  );
-  --intergalactic-scroll-area-shadow-top: linear-gradient(
-    to bottom,
-    oklch(from var(--gray-800) l c h / 0.1) 20.55%,
-    oklch(from var(--white) l c h / 0.0001) 100%
-  );
-  --intergalactic-scroll-area-shadow-bottom: linear-gradient(
-    to top,
-    oklch(from var(--gray-800) l c h / 0.1) 20.55%,
-    oklch(from var(--white) l c h / 0.0001) 100%
-  );
-  --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(
-    to right,
-    var(--white) 34.38%,
-    oklch(from var(--white) l c h / 0) 100%
-  );
-  --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(
-    to left,
-    var(--white) 34.38%,
-    oklch(from var(--white) l c h / 0) 100%
-  );
-  --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(
-    to top,
-    var(--white) 34.38%,
-    oklch(from var(--white) l c h / 0) 100%
-  );
-  --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(
-    to bottom,
-    var(--white) 34.38%,
-    oklch(from var(--white) l c h / 0) 100%
-  );
-
-  /* Scroll Bar */
-  --intergalactic-scroll-bar-background: oklch(
-    from var(--gray-800) l c h / 0.3
-  );
-
-  /* Tag */
-  --intergalactic-tag-primary-gray-normal: #ecedf0;
-  --intergalactic-tag-primary-gray-hover-active: #e3e4e9;
-  --intergalactic-tag-primary-blue-normal: #d0eeff;
-  --intergalactic-tag-primary-blue-hover-active: #b7e4ff;
-  --intergalactic-tag-primary-green-normal: #cff1ea;
-  --intergalactic-tag-primary-green-hover-active: #b7eae0;
-  --intergalactic-tag-primary-orange-normal: #ffddd2;
-  --intergalactic-tag-primary-orange-hover-active: #ffccbb;
-  --intergalactic-tag-primary-red-normal: #ffcedc;
-  --intergalactic-tag-primary-red-hover-active: #ffb6ca;
-  --intergalactic-tag-primary-violet-normal: #f4e3ff;
-  --intergalactic-tag-primary-violet-hover-active: #efd5ff;
-  --intergalactic-tag-primary-yellow-normal: #fee6d1;
-  --intergalactic-tag-primary-yellow-hover-active: #fedab9;
-  --intergalactic-tag-primary-white-normal: oklch(
-    from var(--white) l c h / 0.15
-  );
-  --intergalactic-tag-primary-white-hover-active: oklch(
-    from var(--white) l c h / 0.3
-  );
-  --intergalactic-tag-primary-gray-text: var(--gray-500);
-  --intergalactic-tag-primary-blue-text: var(--blue-500);
-  --intergalactic-tag-primary-green-text: var(--green-500);
-  --intergalactic-tag-primary-orange-text: var(--orange-500);
-  --intergalactic-tag-primary-red-text: var(--red-500);
-  --intergalactic-tag-primary-violet-text: var(--violet-500);
-  --intergalactic-tag-primary-yellow-text: var(--yellow-500);
-  --intergalactic-tag-primary-white-text: var(--white);
-  --intergalactic-tag-secondary-normal: var(--white);
-  --intergalactic-tag-secondary-hover-active: var(--gray-50);
-  --intergalactic-tag-secondary-white-normal: oklch(
-    from var(--white) l c h / 0
-  );
-  --intergalactic-tag-secondary-white-hover-active: oklch(
-    from var(--white) l c h / 0.1
-  );
-  --intergalactic-tag-secondary-gray-text: var(--gray-500);
-  --intergalactic-tag-secondary-white-text: var(--white);
-
-  /* Chart */
-  --intergalactic-chart-palette-order-1: var(--blue-300);
-  --intergalactic-chart-palette-order-2: var(--green-200);
-  --intergalactic-chart-palette-order-3: var(--orange-400);
-  --intergalactic-chart-palette-order-4: var(--pink-300);
-  --intergalactic-chart-palette-order-5: var(--yellow-200);
-  --intergalactic-chart-palette-order-6: var(--violet-400);
-  --intergalactic-chart-palette-order-7: var(--red-300);
-  --intergalactic-chart-palette-order-8: var(--salad-200);
-  --intergalactic-chart-palette-order-9: var(--blue-400);
-  --intergalactic-chart-palette-order-10: var(--green-300);
-  --intergalactic-chart-palette-order-11: var(--orange-200);
-  --intergalactic-chart-palette-order-12: var(--pink-400);
-  --intergalactic-chart-palette-order-13: var(--yellow-300);
-  --intergalactic-chart-palette-order-14: var(--violet-200);
-  --intergalactic-chart-palette-order-15: var(--red-400);
-  --intergalactic-chart-palette-order-16: var(--salad-300);
-  --intergalactic-chart-palette-order-17: var(--blue-200);
-  --intergalactic-chart-palette-order-18: var(--green-400);
-  --intergalactic-chart-palette-order-19: var(--orange-300);
-  --intergalactic-chart-palette-order-20: var(--pink-200);
-  --intergalactic-chart-palette-order-21: var(--yellow-400);
-  --intergalactic-chart-palette-order-22: var(--violet-300);
-  --intergalactic-chart-palette-order-23: var(--red-200);
-  --intergalactic-chart-palette-order-24: var(--salad-400);
-  --intergalactic-chart-palette-order-total-amount: var(--gray-400);
-  --intergalactic-chart-palette-order-other-data: var(--gray-200);
-  --intergalactic-chart-palette-order-null: var(--gray-100);
-  --intergalactic-chart-grid-line: var(--gray-100);
-  --intergalactic-chart-grid-x-axis: var(--gray-200);
-  --intergalactic-chart-grid-y-accent-hover-line: var(--gray-300);
-  --intergalactic-chart-grid-text-label: var(--gray-500);
-  --intergalactic-chart-grid-bar-chart-hover: oklch(
-    from var(--gray-200) l c h / 0.3
-  );
-  --intergalactic-chart-grid-bar-chart-base-bg: var(--gray-100);
-  --intergalactic-chart-grid-period-bg: oklch(from var(--gray-200) l c h / 0.2);
-  --intergalactic-chart-grid-period-pattern: oklch(
-    from var(--gray-800) l c h / 0.15
-  );
-  --intergalactic-chart-grid-border: var(--white);
-  --intergalactic-chart-x-axis-accent-period-active: var(--gray-500);
-  --intergalactic-chart-x-axis-accent-data-start-tracking: oklch(
-    from var(--green-400) l c h / 0.2
-  );
-
-  /* Header */
-  --intergalactic-header-bg: var(--violet-dusty-700);
-  --intergalactic-header-border-primary: var(--violet-dusty-700);
-  --intergalactic-header-border-secondary: oklch(
-    from var(--white) l c h / 0.15
-  );
-
-  /* Sidebar Nav */
-  --intergalactic-sidebar-nav-control-hover: var(--violet-dusty-50);
-  --intergalactic-sidebar-nav-control-active: var(--violet-dusty-100);
-  --intergalactic-sidebar-nav-control-text-normal: var(--violet-dusty-500);
-  --intergalactic-sidebar-nav-control-text-active: var(--violet-dusty-600);
-  --intergalactic-sidebar-nav-control-icon-normal: var(--violet-dusty-400);
-  --intergalactic-sidebar-nav-control-icon-active: var(--violet-dusty-600);
-
-  /* Duration */
-  --intergalactic-duration-extra-slow: 500ms;
-  --intergalactic-duration-slow: 400ms;
-  --intergalactic-duration-medium: 300ms;
-  --intergalactic-duration-fast: 200ms;
-  --intergalactic-duration-extra-fast: 100ms;
-  --intergalactic-duration-switch: var(--intergalactic-duration-extra-fast);
-  --intergalactic-duration-popper: var(--intergalactic-duration-fast);
-  --intergalactic-duration-control: var(--intergalactic-duration-fast);
-  --intergalactic-duration-modal: var(--intergalactic-duration-fast);
-  --intergalactic-duration-accordion: var(--intergalactic-duration-fast);
-  --intergalactic-duration-counter: var(--intergalactic-duration-fast);
-
-  /* Website Tokens */
-  --intergalactic-website-control-lift-me-up: var(--gray-100);
-  --intergalactic-website-control-lift-me-up-hover-active: var(--gray-200);
-  --intergalactic-website-top-menu: 5px 8px 25px 0px
-    oklch(from var(--gray-800) l c h / 0.1);
-  --intergalactic-website-principles: 10px 10px 45px 0px
-    oklch(from var(--gray-800) l c h / 0.14);
-  --intergalactic-website-brand-tertiary: var(--orange-400);
-  --intergalactic-website-bg-tertiary-neutral: var(--white);
-}
diff --git a/semcore/core/vite.config.ts b/semcore/core/vite.config.ts
index 620be34401..7a364f5b71 100644
--- a/semcore/core/vite.config.ts
+++ b/semcore/core/vite.config.ts
@@ -22,8 +22,6 @@ export default mergeConfig(
           'classnames',
           'hoist-non-react-statics',
           '@phytonmk/nano-css',
-
-          '@pandacss/dev',
         ],
         output: [
           {
diff --git a/semcore/theme/.npmignore b/semcore/theme/.npmignore
new file mode 100644
index 0000000000..229b5c941a
--- /dev/null
+++ b/semcore/theme/.npmignore
@@ -0,0 +1,4 @@
+node_modules
+__tests__
+src
+tsconfig.json
\ No newline at end of file
diff --git a/semcore/theme/CHANGELOG.md b/semcore/theme/CHANGELOG.md
new file mode 100644
index 0000000000..17d78144de
--- /dev/null
+++ b/semcore/theme/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Changelog
+
+CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+
+## [1.0.0] - 2026-03-16
+
+### Added
+
+- Release package with theme.
diff --git a/semcore/theme/README.md b/semcore/theme/README.md
new file mode 100644
index 0000000000..6c68936d0d
--- /dev/null
+++ b/semcore/theme/README.md
@@ -0,0 +1,37 @@
+# @semcore/theme
+
+[![version](https://img.shields.io/npm/v/@semcore/theme.svg)](https://www.npmjs.com/@semcore/theme)
+[![downloads](https://img.shields.io/npm/dt/@semcore/theme.svg)](https://www.npmjs.com/package/@semcore/theme)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
+
+> This component is part of the Intergalactic Design System
+
+[//]: # '### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/theme/)'
+
+### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
+
+## Install
+
+```sh
+npm install @semcore/theme
+```
+
+## 👤 Author
+
+[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS)
+and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!
+
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at
+the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## 📝 License
+
+This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.
diff --git a/semcore/core/__tests__/token-processor.test.ts b/semcore/theme/__tests__/token-processor.test.ts
similarity index 98%
rename from semcore/core/__tests__/token-processor.test.ts
rename to semcore/theme/__tests__/token-processor.test.ts
index 1704ad12f8..829785c321 100644
--- a/semcore/core/__tests__/token-processor.test.ts
+++ b/semcore/theme/__tests__/token-processor.test.ts
@@ -1,6 +1,6 @@
 import { expect, test, describe } from '@semcore/testing-utils/vitest';
 
-import { processTokens } from '../src/theme/utils';
+import { processTokens } from '../src/utils';
 
 describe('Token Processor - processTokens', () => {
   describe('Basic token processing', () => {
@@ -356,7 +356,7 @@ describe('Token Processor - processTokens', () => {
       const { resolve } = await import('node:path');
 
       const lightThemeContent = await fs.readFile(
-        resolve(__dirname, '../src/theme/light.json'),
+        resolve(__dirname, '../src/light.json'),
         'utf-8',
       );
       const { base, tokens, featureHighlight } = JSON.parse(lightThemeContent);
@@ -382,7 +382,7 @@ describe('Token Processor - processTokens', () => {
       const { resolve } = await import('node:path');
 
       const darkThemeContent = await fs.readFile(
-        resolve(__dirname, '../src/theme/dark.json'),
+        resolve(__dirname, '../src/dark.json'),
         'utf-8',
       );
       const { base, tokens, featureHighlight } = JSON.parse(darkThemeContent);
diff --git a/semcore/theme/package.json b/semcore/theme/package.json
new file mode 100644
index 0000000000..0d3d597ab1
--- /dev/null
+++ b/semcore/theme/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@semcore/theme",
+  "description": "Semrush Design System package",
+  "version": "1.0.0",
+  "author": "UI-kit team <ui-kit-team@semrush.com>",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "node --experimental-transform-types src/processor.ts"
+  },
+  "dependencies": {},
+  "peerDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/theme"
+  },
+  "devDependencies": {
+    "colorjs.io": "0.4.3",
+    "postcss": "8.4.33",
+    "postcss-value-parser": "4.1.0",
+    "@pandacss/dev": "1.9.0",
+    "@semcore/testing-utils": "workspace:*"
+  }
+}
diff --git a/semcore/core/src/theme/dark.json b/semcore/theme/src/dark.json
similarity index 100%
rename from semcore/core/src/theme/dark.json
rename to semcore/theme/src/dark.json
diff --git a/semcore/core/src/theme/light.json b/semcore/theme/src/light.json
similarity index 100%
rename from semcore/core/src/theme/light.json
rename to semcore/theme/src/light.json
diff --git a/semcore/core/src/theme/panda-processor.ts b/semcore/theme/src/panda-processor.ts
similarity index 90%
rename from semcore/core/src/theme/panda-processor.ts
rename to semcore/theme/src/panda-processor.ts
index fb37ae9f5e..7407a97be5 100644
--- a/semcore/core/src/theme/panda-processor.ts
+++ b/semcore/theme/src/panda-processor.ts
@@ -123,17 +123,16 @@ export const getPandaConfig = (
 };
 
 export const toPandaPreset = (config: PandaConfig) => {
-  const preset = `
-    import { definePreset } from '@pandacss/dev';
-
-    export default definePreset({
-      name: '@semcore/panda-preset',
-      theme: {
-        tokens: ${JSON.stringify(config.tokens, undefined, 4)},
-        semanticTokens: ${JSON.stringify(config.semanticTokens, undefined, 4)}
-      },
-    });
-    `;
+  const preset = `import { definePreset } from '@pandacss/dev';
+
+export default definePreset({
+  name: '@semcore/panda-preset',
+  theme: {
+    tokens: ${JSON.stringify(config.tokens, undefined, 4)},
+    semanticTokens: ${JSON.stringify(config.semanticTokens, undefined, 4)}
+  },
+});
+`;
 
   return preset;
 };
diff --git a/semcore/core/src/theme/processor.ts b/semcore/theme/src/processor.ts
similarity index 82%
rename from semcore/core/src/theme/processor.ts
rename to semcore/theme/src/processor.ts
index f046132b06..078af486fc 100644
--- a/semcore/core/src/theme/processor.ts
+++ b/semcore/theme/src/processor.ts
@@ -1,14 +1,16 @@
 import { execSync } from 'node:child_process';
 import fs from 'node:fs/promises';
-import { resolve as resolvePath } from 'node:path';
+import { resolve as resolvePath, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import glob from 'fast-glob';
 import postcss from 'postcss';
 import valuesParser from 'postcss-value-parser';
 
-import { getPandaConfig, toPandaPreset } from './panda-processor';
-import { processTokens, tokensToCss, tokensToJs } from './utils';
+// @ts-ignore
+import { getPandaConfig, toPandaPreset } from './panda-processor.ts';
+// @ts-ignore
+import { processTokens, tokensToCss, tokensToJs } from './utils.ts';
 
 type Token = {
   name: string;
@@ -16,14 +18,21 @@ type Token = {
   description?: string;
 };
 
-export const writeIfChanged = async (path: string, content: string) => {
+export const writeIfChanged = async (relativePath: string, content: string) => {
+  const pathToFile = resolvePath(packageDirname, relativePath);
   try {
-    const originalContent = await fs.readFile(path, 'utf-8');
+    const originalContent = await fs.readFile(pathToFile, 'utf-8');
     if (originalContent.replace(/[\s\n]/g, '') === content.replace(/[\s\n]/g, '')) {
       return;
     }
-  } catch {}
-  await fs.writeFile(path, content);
+  } catch (err: unknown) {
+    if (!(err instanceof Error) || !('code' in err) || err.code !== 'ENOENT' || !err.message.startsWith('ENOENT: no such file')) {
+      throw err;
+    }
+  }
+  const dirName = dirname(pathToFile);
+  await fs.mkdir(dirName, { recursive: true });
+  await fs.writeFile(pathToFile, content);
 };
 
 const defaultTheme = 'light';
@@ -31,14 +40,15 @@ const themes = ['light', 'dark'];
 
 const warning = !process.argv.includes('--no-warning');
 
-const dirname = resolvePath(fileURLToPath(import.meta.url), '..');
+const packageDirname = resolvePath(fileURLToPath(import.meta.url), '..', '..');
+const semcorePath = resolvePath(packageDirname, '..');
 
 const autoTheme: Record<string, { name: string; value: string; description: string }[]> = {};
 
 for (const theme of themes) {
   const prefix = 'intergalactic';
   const { base, tokens, featureHighlight } = JSON.parse(
-    await fs.readFile(resolvePath(dirname, `./${theme}.json`), 'utf-8'),
+    await fs.readFile(resolvePath(packageDirname, 'src', `${theme}.json`), 'utf-8'),
   );
   const processed = processTokens(
     base,
@@ -50,22 +60,22 @@ for (const theme of themes) {
   const { processedTokens } = processed;
 
   await writeIfChanged(
-    './semcore/core/src/theme/themes/panda-preset.ts',
+    'lib/panda-preset.ts',
     toPandaPreset(getPandaConfig(values, basicTokens, types, descriptions)),
   );
 
   await writeIfChanged(
-    `./semcore/core/src/theme/themes/${theme}.css`,
+    `lib/${theme}.css`,
     tokensToCss(processedTokens),
   );
-  await writeIfChanged(`./semcore/core/src/theme/themes/${theme}.ts`, tokensToJs(processedTokens));
+  await writeIfChanged(`lib/${theme}.ts`, tokensToJs(processedTokens));
 
   if (highlightsTokens.length > 0) {
     await writeIfChanged(
-      `./semcore/core/src/theme/themes/highlights-${theme}.css`,
+      `lib/highlights-${theme}.css`,
       tokensToCss(highlightsTokens),
     );
-    await writeIfChanged(`./semcore/core/src/theme/themes/highlights-${theme}.ts`, tokensToJs(highlightsTokens));
+    await writeIfChanged(`lib/highlights-${theme}.ts`, tokensToJs(highlightsTokens));
   }
 
   autoTheme[theme] = processedTokens;
@@ -73,24 +83,25 @@ for (const theme of themes) {
   const usages: { [tokenName: string]: string[] } = {};
   if (theme === defaultTheme) {
     await writeIfChanged(
-      './semcore/core/src/theme/themes/default.css',
+      'lib/default.css',
       tokensToCss(processedTokens),
     );
-    await writeIfChanged('./semcore/core/src/theme/themes/default.ts', tokensToJs(processedTokens));
+    await writeIfChanged('lib/default.ts', tokensToJs(processedTokens));
 
     const projectCssPaths = (
-      await glob('./semcore/*/src/**/*.shadow.css', {
+      await glob(`./*/src/**/*.shadow.css`, {
         ignore: ['node_modules', 'lib'],
+        cwd: semcorePath,
       })
     ).filter((path) => {
-      if (path.split('/').some((pathPart) => ['chart', 'email', 'table'].includes(pathPart))) {
+      if (path.split('/').some((pathPart) => ['theme', 'chart', 'email', 'table'].includes(pathPart))) {
         return false;
       }
       return true;
     });
 
     const projectCssContents = await Promise.all(
-      projectCssPaths.map((path) => fs.readFile(path, 'utf-8')),
+      projectCssPaths.map((path) => fs.readFile(resolvePath(semcorePath, path), 'utf-8')),
     );
 
     const usedVariables: any = {};
@@ -208,7 +219,7 @@ for (const theme of themes) {
       ),
     );
     await Promise.all(
-      projectCssPaths.map((path, index) => writeIfChanged(path, processedCss[index].css)),
+      projectCssPaths.map((path, index) => writeIfChanged(resolvePath(semcorePath, path), processedCss[index].css)),
     );
 
     const unusedVariables: string[] = [];
@@ -260,7 +271,7 @@ for (const theme of themes) {
         baseTokensDocumentation.push(token);
       } else {
         const components = [
-          ...new Set((usages[token] ?? []).map((cssPath) => cssPath.split('/')[2])),
+          ...new Set((usages[token] ?? []).map((cssPath) => cssPath.split('/')[0])),
         ];
         components.sort((a, b) => a.localeCompare(b));
 
@@ -276,11 +287,11 @@ for (const theme of themes) {
     }
 
     await writeIfChanged(
-      resolvePath(dirname, '../../../../website/docs/style/design-tokens/design-tokens.json'),
+      resolvePath(packageDirname, '../../website/docs/style/design-tokens/design-tokens.json'),
       JSON.stringify(designTokensDocumentation, null, 2) + '\n',
     );
     await writeIfChanged(
-      resolvePath(dirname, '../../../../website/docs/style/design-tokens/base-tokens.json'),
+      resolvePath(packageDirname, '../../website/docs/style/design-tokens/base-tokens.json'),
       JSON.stringify(baseTokensDocumentation, null, 2) + '\n',
     );
   }
@@ -292,10 +303,10 @@ for (const theme in autoTheme) {
   autoThemeLines.push(tokensToCss(autoTheme[theme], selector));
 }
 
-await writeIfChanged('./semcore/core/src/theme/themes/auto.css', autoThemeLines.join('\n'));
+await writeIfChanged('lib/auto.css', autoThemeLines.join('\n'));
 
 execSync('pnpm lint:css --fix', {
   encoding: 'utf-8',
-  cwd: resolvePath(dirname, '../../../../'),
+  cwd: resolvePath(packageDirname, '../../'),
   stdio: ['inherit', 'inherit', 'inherit'],
 });
diff --git a/semcore/core/src/theme/utils.ts b/semcore/theme/src/utils.ts
similarity index 100%
rename from semcore/core/src/theme/utils.ts
rename to semcore/theme/src/utils.ts
diff --git a/semcore/theme/tsconfig.json b/semcore/theme/tsconfig.json
new file mode 100644
index 0000000000..596e2cf729
--- /dev/null
+++ b/semcore/theme/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/semcore/ui/__tests__/index.test.js b/semcore/ui/__tests__/index.test.js
index 55da268dfb..e4189847e0 100644
--- a/semcore/ui/__tests__/index.test.js
+++ b/semcore/ui/__tests__/index.test.js
@@ -8,7 +8,8 @@ const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 
 const semcorePackages = fs
   .readdirSync(path.resolve(__dirname, '../../'))
-  .filter((pkg) => !['ui', 'table', 'stylelint-plugin'].includes(pkg))
+  // todo Brauer Ilia: remove 'table', 'stylelint-plugin' from 17 verison
+  .filter((pkg) => !['ui', 'table', 'stylelint-plugin', 'theme'].includes(pkg))
   .map((pkg) => `@semcore/${pkg}`);
 
 const dependencyPackages = Object.keys(packageJson.dependencies || {}).filter((pkg) =>
diff --git a/website/docs/style/design-tokens/design-tokens-usage-development.md b/website/docs/style/design-tokens/design-tokens-usage-development.md
index b16113ef40..85ac85a11f 100644
--- a/website/docs/style/design-tokens/design-tokens-usage-development.md
+++ b/website/docs/style/design-tokens/design-tokens-usage-development.md
@@ -62,222 +62,3 @@ Design tokens are recommended when creating a custom component to ensure a consi
 </script>
 
 :::
-
-## Transforming JSON files
-
-Design token JSON-files [produced by Tokens Studio Figma plugin](https://www.figma.com/community/plugin/843461159747178978/tokens-studio-for-figma) can't be used as is in Frontend application. Use the following widgets to transform output of the Figma plugin to ready-to-import CSS file or ready-to-use JSON files.
-
-::: react-view
-
-<script lang="tsx">
-import React from 'react';
-import '@semcore/core/lib/themes/default.css'; /** TO REMOVE WHEN THEME PR WILL BE MERGED */
-import Button from '@semcore/button';
-import { Box } from '@semcore/base-components';
-import CheckM from '@semcore/icon/Check/m';
-import CopyM from '@semcore/icon/Copy/m';
-import cx from 'classnames';
-import { processTokens, tokensToJson, tokensToCss } from '@semcore/core/lib/theme/utils';
-import styles from './processor.module.css';
-import Copy from '@components/Copy';
-
-const FileInput = ({ id, onFile, multiple, accept }) => {
-  const [dragging, setDragging] = React.useState(false);
-  const inputRef = React.useRef(null);  
-
-  const handleDragStart = React.useCallback(() => setDragging(true), []);
-  const handleDragEnd = React.useCallback(() => setDragging(false), []);
-  const handleClick = React.useCallback(() => {
-    inputRef.current?.click();
-  }, []);
-  React.useEffect(() => {
-    window.addEventListener('dragstart', handleDragStart);
-    window.addEventListener('dragend', handleDragEnd);
-    return () => {
-      window.removeEventListener('dragstart', handleDragStart);
-      window.removeEventListener('dragend', handleDragEnd);
-    };
-  }, []);
-
-  return (
-    <div className={cx(styles.dropzone, dragging && styles.dropzoneDragging)}>
-      <div />
-      <input
-        className={styles.fileInput}
-        id={id}
-        multiple={multiple}
-        type='file'
-        accept={accept}
-        onChange={(event) => onFile([...(event.target.files ?? [])])}
-        aria-describedby="inpu-hint"
-        ref={inputRef}
-      />
-      <div className={styles.dropzoneInner}>
-        <div>Drag files here</div>
-        <div>or</div>
-        <Button theme='success' use='primary' size='l' mb={4} onClick={handleClick}>
-          Browse files
-        </Button>
-      </div>
-      <div id="inpu-hint">Upload files, uncompressed, less than 1 GB in size.</div>
-    </div>
-  );
-};
-const readFile = (file) =>
-  new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = () => reject(reader.error);
-    reader.readAsText(file);
-  });
-
-const DesignTokensProcessor = () => {
-  const [baseTokensFileName, setBaseTokensFileName] = React.useState('');
-  const [designTokensFileName, setDesignTokensFileName] = React.useState('');
-  const [baseTokens, setBaseTokens] = React.useState(null);
-  const [designTokens, setDesignTokens] = React.useState(null);
-  const handleBaseTokensFile = React.useCallback(async (files) => {
-    try {
-      setBaseTokens(JSON.parse(await readFile(files[0])));
-      setBaseTokensFileName(files[0]?.name);
-      setTimeout(() => {
-        document.querySelector('#replace-file-label-1')?.focus();
-      }, 0);
-    } catch (err) {
-      console.error(err);
-      setBaseTokens(null);
-    }
-  }, []);
-  const handleDesignTokensFile = React.useCallback(async (files) => {
-    try {
-      setDesignTokens(JSON.parse(await readFile(files[0])));
-      setDesignTokensFileName(files[0]?.name);
-      setTimeout(() => {
-        document.querySelector('#replace-file-label-2')?.focus();
-      }, 0);
-    } catch (err) {
-      console.error(err);
-      setDesignTokens(null);
-    }
-  }, []);
-  const handleChangeBaseTokensFile = React.useCallback(() => {
-    setBaseTokens(null);
-    setTimeout(() => {
-      document.querySelector('#base-tokens-file')?.focus();
-    }, 0);
-  }, []);
-  const handleChangeDesignTokensFile = React.useCallback(() => {
-    setDesignTokens(null);
-    setTimeout(() => {
-      document.querySelector('#design-tokens-file')?.focus();
-    }, 0);
-  }, []);
-
-  const { css, json, error } = React.useMemo(() => {
-    if (!designTokens) return {};
-    try {
-      const { processedTokens } = processTokens(baseTokens || {}, designTokens, 'intergalactic');
-
-      return {
-        css: tokensToCss(processedTokens),
-        json: tokensToJson(processedTokens),
-        error: null,
-      };
-    } catch (error) {
-      return { error };
-    }
-  }, [baseTokens, designTokens]);
-
-  return (
-    <div className={styles.container}>
-      <Box mb={2}>
-        <label htmlFor='base-tokens-file' className={styles.fileInputLabel}>Upload base tokens JSON file</label>
-        {!baseTokens && (
-          <>
-            <FileInput
-              id='base-tokens-file'
-              multiple={false}
-              accept='application/json'
-              onFile={handleBaseTokensFile}
-            />
-          </>
-        )}
-        {baseTokens && (
-          <div className={styles.uploadedFileBlock} id="uploaded-file-label-1">
-            <CheckM color='icon-primary-success' /> {`${baseTokensFileName} `}
-            <Button onClick={handleChangeBaseTokensFile} ml={2} aria-labelledby="uploaded-file-label-1" id="replace-file-label-1">
-              Replace file
-            </Button>
-          </div>
-        )}
-      </Box>
-      <Box mb={2}>
-        <label htmlFor='design-tokens-file' className={styles.fileInputLabel}>Upload semantic tokens JSON file</label>
-        {!designTokens && (
-          <>
-            <FileInput
-              id='design-tokens-file'
-              multiple={false}
-              accept='application/json'
-              onFile={handleDesignTokensFile}
-            />
-          </>
-        )}
-        {designTokens && (
-          <div className={styles.uploadedFileBlock} id="uploaded-file-label-2">
-            <CheckM color='icon-primary-success' /> {`${designTokensFileName} `}
-            <Button autoFocus onClick={handleChangeDesignTokensFile} ml={2} aria-labelledby="uploaded-file-label-2"  id="replace-file-label-2">
-              Replace file
-            </Button>
-          </div>
-        )}
-      </Box>
-      <div className={styles.processedSection} aria-live="polite" role="alert">
-        {error && (
-          <>
-            <h3>Error occurred while processing your files</h3>
-            {!baseTokens && <div>Maybe you forgot to provide base tokens?</div>}
-            <code>{String(error.message ?? error)}</code>
-          </>    
-        )}
-      </div>
-      {css && json && !error && (
-        <div className={styles.processedSection}>
-          <div className={styles.processedBlock}>
-            <div className={styles.processedBlockTitle}>
-              <h3 htmlFor="copy-button-css">
-                Processed CSS code
-                </h3>
-                <Copy copiedToast='Copied!' toCopy={css} trigger='click' onlyCopiedToast>
-                  <Button addonLeft={CopyM} use='tertiary' theme="muted" ml={2} mb={2} id="copy-button-css">
-                    Copy to clipboard
-                    </Button>
-                    </Copy>
-            </div>
-            <code className={styles.codeBlock}>{css}</code>
-          </div>
-          <div className={styles.processedBlock}>
-            <div className={styles.processedBlockTitle}>
-              <h3 htmlFor="copy-button-json">
-                Processed JSON code
-            </h3>
-              <Copy copiedToast='Copied!' toCopy={json} trigger='click' onlyCopiedToast>
-                <Button addonLeft={CopyM} use='tertiary' theme="muted" ml={2} mb={2} id="copy-button-json">
-                  Copy to clipboard
-                </Button>
-              </Copy>
-            </div>
-            <code lang='css' className={styles.codeBlock}>
-              {json}
-            </code>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const App = DesignTokensProcessor;
-</script>
-
-:::
diff --git a/website/docs/style/design-tokens/design-tokens.md b/website/docs/style/design-tokens/design-tokens.md
index 9a3929000e..85c3752b9c 100644
--- a/website/docs/style/design-tokens/design-tokens.md
+++ b/website/docs/style/design-tokens/design-tokens.md
@@ -8,6 +8,11 @@ tabs: Tokens('design-tokens'), Usage in design('design-tokens-usage'), Usage in
 Design tokens are available for use from **intergalactic@13.5.0** version.
 :::
 
+::: warning
+You should use tokens from the **@semcore/theme** package instead of **@semcore/core**, 
+as they will be removed from the core package starting from **version 17**.
+:::
+
 ## Description
 
 Design tokens are variables that store visual design choices (colors, fonts, spaces, opacity, box-shadows, etc.). The most important thing is that tokens ensure the same style names and values are used in design files and code.
@@ -20,7 +25,7 @@ Intergalactic Design System has:
 These sets form the default theme of the design system.
 
 ::: tip
-For the complete JSON with all the token sets, refer to the [GitHub repository](https://github.com/semrush/intergalactic/blob/HEAD/semcore/core/src/theme/light.json).
+For the complete JSON with all the token sets, refer to the [GitHub repository](https://github.com/semrush/intergalactic/blob/HEAD/semcore/theme/src/light.json).
 :::
 
 ## Stylelint plugin