@asteby/metacore-theme 0.3.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for describing the origin of the Work and
+      reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2026 Asteby, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,70 @@
+# @asteby/metacore-theme
+
+Metacore design tokens and Tailwind 4 preset.
+
+Ships the canonical Metacore visual language:
+
+- `oklch` color palette (light + dark)
+- Radius, shadow, tracking and spacing scales
+- Font families (`Inter`, `Lora`, `IBM Plex Mono`)
+- `@theme inline` block mapping tokens to Tailwind v4 utilities
+
+## Install
+
+```bash
+pnpm add @asteby/metacore-theme
+# peer
+pnpm add -D tailwindcss@^4
+```
+
+## Usage with Tailwind 4
+
+Tailwind 4 is CSS-first. Import the full entry from your app's root stylesheet:
+
+```css
+/* src/styles/app.css */
+@import '@asteby/metacore-theme/index.css';
+```
+
+This gives you:
+
+- `@import 'tailwindcss'`
+- `@import 'tw-animate-css'`
+- All Metacore tokens (`:root` + `.dark`)
+- `@theme inline` exposing `bg-primary`, `text-muted-foreground`, etc.
+- Base layer utilities (`.container`, `.no-scrollbar`, `.faded-bottom`)
+- Accordion / collapsible animations
+
+If you already have your own Tailwind entry and only want the tokens:
+
+```css
+@import 'tailwindcss';
+@import '@asteby/metacore-theme/tokens.css';
+```
+
+## Usage from JS/TS
+
+For programmatic access (Storybook, charts, PDF):
+
+```ts
+import { themeConfig, colorTokens, fonts } from '@asteby/metacore-theme'
+
+themeConfig.colors.light.primary // 'oklch(0.55 0.20 131)'
+fonts // readonly ['inter', 'manrope', 'system']
+```
+
+Subpath exports:
+
+```ts
+import { fonts } from '@asteby/metacore-theme/fonts'
+import { themeConfig } from '@asteby/metacore-theme/preset'
+```
+
+## Dark mode
+
+Apply the `.dark` class to `<html>` or any ancestor. A `@custom-variant dark` is
+registered so Tailwind utilities like `dark:bg-card` work out of the box.
+
+## License
+
+Apache-2.0

package/dist/fonts.d.ts

@@ -0,0 +1,22 @@
+/**
+ * List of available font names (visit the url `/settings/appearance`).
+ * This array is used to generate dynamic font classes (e.g., `font-inter`, `font-manrope`).
+ *
+ * How to Add a New Font (Tailwind v4+):
+ * 1. Add the font name here.
+ * 2. Update the `<link>` tag in 'index.html' to include the new font from Google Fonts (or any other source).
+ * 3. Add the new font family to 'index.css' using the `@theme inline` and `font-family` CSS variable.
+ *
+ * Example:
+ * fonts.ts           -> Add 'roboto' to this array.
+ * index.html         -> Add Google Fonts link for Roboto.
+ * index.css          -> Add the new font in the CSS, e.g.:
+ *   @theme inline {
+ *      // ... other font families
+ *      --font-roboto: 'Roboto', var(--font-sans);
+ *   }
+ */
+export declare const fonts: readonly ["inter", "manrope", "system"];
+export type FontFamily = (typeof fonts)[number];
+export declare const fontFamilies: readonly ["inter", "manrope", "system"];
+//# sourceMappingURL=fonts.d.ts.map

package/dist/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK,yCAA0C,CAAA;AAE5D,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAE/C,eAAO,MAAM,YAAY,yCAAQ,CAAA"}

package/dist/fonts.js

@@ -0,0 +1,21 @@
+/**
+ * List of available font names (visit the url `/settings/appearance`).
+ * This array is used to generate dynamic font classes (e.g., `font-inter`, `font-manrope`).
+ *
+ * How to Add a New Font (Tailwind v4+):
+ * 1. Add the font name here.
+ * 2. Update the `<link>` tag in 'index.html' to include the new font from Google Fonts (or any other source).
+ * 3. Add the new font family to 'index.css' using the `@theme inline` and `font-family` CSS variable.
+ *
+ * Example:
+ * fonts.ts           -> Add 'roboto' to this array.
+ * index.html         -> Add Google Fonts link for Roboto.
+ * index.css          -> Add the new font in the CSS, e.g.:
+ *   @theme inline {
+ *      // ... other font families
+ *      --font-roboto: 'Roboto', var(--font-sans);
+ *   }
+ */
+export const fonts = ['inter', 'manrope', 'system'];
+export const fontFamilies = fonts;
+//# sourceMappingURL=fonts.js.map

package/dist/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAA;AAI5D,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { fonts, fontFamilies } from './fonts.js';
+export type { FontFamily } from './fonts.js';
+export { colorTokens, chartTokens, radiusTokens, shadowTokens, fontTokens, trackingTokens, themeConfig, } from './preset.js';
+export type { ThemeConfig } from './preset.js';
+export { ThemeProvider, useTheme } from './provider.js';
+export type { ThemeProviderProps, ThemeProviderState } from './provider.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,WAAW,GACZ,MAAM,aAAa,CAAA;AACpB,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { fonts, fontFamilies } from './fonts.js';
+export { colorTokens, chartTokens, radiusTokens, shadowTokens, fontTokens, trackingTokens, themeConfig, } from './preset.js';
+export { ThemeProvider, useTheme } from './provider.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAGhD,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,WAAW,GACZ,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA"}

package/dist/preset.d.ts

@@ -0,0 +1,187 @@
+/**
+ * Metacore theme preset.
+ *
+ * The canonical source for Tailwind 4 design tokens lives in CSS
+ * (`@asteby/metacore-theme/tokens.css` and `/index.css`). Tailwind 4 does
+ * not use JS presets the way v3 did — consumers should import the CSS
+ * entry directly via `@import '@asteby/metacore-theme/index.css'` or
+ * `@import '@asteby/metacore-theme/tokens.css'`.
+ *
+ * This module exposes the same tokens as plain JS objects for cases where
+ * a JS/TS consumer needs programmatic access (e.g., Storybook theming,
+ * charting libraries, PDF generators).
+ */
+export declare const colorTokens: {
+    readonly light: {
+        readonly background: "oklch(0.9940 0 0)";
+        readonly foreground: "oklch(0 0 0)";
+        readonly card: "oklch(0.9940 0 0)";
+        readonly cardForeground: "oklch(0 0 0)";
+        readonly popover: "oklch(0.9911 0 0)";
+        readonly popoverForeground: "oklch(0 0 0)";
+        readonly primary: "oklch(0.55 0.20 131)";
+        readonly primaryForeground: "oklch(1.0000 0 0)";
+        readonly secondary: "oklch(0.9540 0.0063 131)";
+        readonly secondaryForeground: "oklch(0.1344 0 0)";
+        readonly muted: "oklch(0.9702 0 0)";
+        readonly mutedForeground: "oklch(0.4386 0 0)";
+        readonly accent: "oklch(0.94 0.03 131)";
+        readonly accentForeground: "oklch(0.5445 0.1903 131)";
+        readonly destructive: "oklch(0.6290 0.1902 23.0704)";
+        readonly destructiveForeground: "oklch(1.0000 0 0)";
+        readonly border: "oklch(0.9300 0.0094 131)";
+        readonly input: "oklch(0.9401 0 0)";
+        readonly ring: "oklch(0 0 0)";
+    };
+    readonly dark: {
+        readonly background: "oklch(0.22 0.01 131)";
+        readonly foreground: "oklch(0.9551 0 0)";
+        readonly card: "oklch(0.24 0.01 131)";
+        readonly cardForeground: "oklch(0.9551 0 0)";
+        readonly popover: "oklch(0.24 0.01 131)";
+        readonly popoverForeground: "oklch(0.9551 0 0)";
+        readonly primary: "oklch(0.65 0.20 131)";
+        readonly primaryForeground: "oklch(1.0000 0 0)";
+        readonly secondary: "oklch(0.29 0.02 131)";
+        readonly secondaryForeground: "oklch(0.9551 0 0)";
+        readonly muted: "oklch(0.29 0.02 131)";
+        readonly mutedForeground: "oklch(0.7058 0 0)";
+        readonly accent: "oklch(0.28 0.05 131)";
+        readonly accentForeground: "oklch(0.80 0.10 131)";
+        readonly destructive: "oklch(0.7106 0.1661 22.2162)";
+        readonly destructiveForeground: "oklch(1.0000 0 0)";
+        readonly border: "oklch(0.33 0.02 131)";
+        readonly input: "oklch(0.33 0.02 131)";
+        readonly ring: "oklch(0.65 0.20 131)";
+    };
+};
+export declare const chartTokens: {
+    readonly light: {
+        readonly chart1: "oklch(0.7459 0.1483 156.4499)";
+        readonly chart2: "oklch(0.55 0.20 131)";
+        readonly chart3: "oklch(0.7336 0.1758 50.5517)";
+        readonly chart4: "oklch(0.5828 0.1809 131)";
+        readonly chart5: "oklch(0.5590 0 0)";
+    };
+    readonly dark: {
+        readonly chart1: "oklch(0.8003 0.1821 151.7110)";
+        readonly chart2: "oklch(0.65 0.20 131)";
+        readonly chart3: "oklch(0.8077 0.1035 19.5706)";
+        readonly chart4: "oklch(0.6691 0.1569 131)";
+        readonly chart5: "oklch(0.7058 0 0)";
+    };
+};
+export declare const radiusTokens: {
+    readonly base: "1.4rem";
+    readonly sm: "calc(1.4rem - 4px)";
+    readonly md: "calc(1.4rem - 2px)";
+    readonly lg: "1.4rem";
+    readonly xl: "calc(1.4rem + 4px)";
+};
+export declare const shadowTokens: {
+    readonly '2xs': "0px 2px 3px 0px hsl(0 0% 0% / 0.08)";
+    readonly xs: "0px 2px 3px 0px hsl(0 0% 0% / 0.08)";
+    readonly sm: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16)";
+    readonly base: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16)";
+    readonly md: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16)";
+    readonly lg: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16)";
+    readonly xl: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16)";
+    readonly '2xl': "0px 2px 3px 0px hsl(0 0% 0% / 0.40)";
+};
+export declare const fontTokens: {
+    readonly sans: "Inter, sans-serif";
+    readonly serif: "Lora, serif";
+    readonly mono: "IBM Plex Mono, monospace";
+};
+export declare const trackingTokens: {
+    readonly normal: "-0.025em";
+};
+export declare const themeConfig: {
+    readonly colors: {
+        readonly light: {
+            readonly background: "oklch(0.9940 0 0)";
+            readonly foreground: "oklch(0 0 0)";
+            readonly card: "oklch(0.9940 0 0)";
+            readonly cardForeground: "oklch(0 0 0)";
+            readonly popover: "oklch(0.9911 0 0)";
+            readonly popoverForeground: "oklch(0 0 0)";
+            readonly primary: "oklch(0.55 0.20 131)";
+            readonly primaryForeground: "oklch(1.0000 0 0)";
+            readonly secondary: "oklch(0.9540 0.0063 131)";
+            readonly secondaryForeground: "oklch(0.1344 0 0)";
+            readonly muted: "oklch(0.9702 0 0)";
+            readonly mutedForeground: "oklch(0.4386 0 0)";
+            readonly accent: "oklch(0.94 0.03 131)";
+            readonly accentForeground: "oklch(0.5445 0.1903 131)";
+            readonly destructive: "oklch(0.6290 0.1902 23.0704)";
+            readonly destructiveForeground: "oklch(1.0000 0 0)";
+            readonly border: "oklch(0.9300 0.0094 131)";
+            readonly input: "oklch(0.9401 0 0)";
+            readonly ring: "oklch(0 0 0)";
+        };
+        readonly dark: {
+            readonly background: "oklch(0.22 0.01 131)";
+            readonly foreground: "oklch(0.9551 0 0)";
+            readonly card: "oklch(0.24 0.01 131)";
+            readonly cardForeground: "oklch(0.9551 0 0)";
+            readonly popover: "oklch(0.24 0.01 131)";
+            readonly popoverForeground: "oklch(0.9551 0 0)";
+            readonly primary: "oklch(0.65 0.20 131)";
+            readonly primaryForeground: "oklch(1.0000 0 0)";
+            readonly secondary: "oklch(0.29 0.02 131)";
+            readonly secondaryForeground: "oklch(0.9551 0 0)";
+            readonly muted: "oklch(0.29 0.02 131)";
+            readonly mutedForeground: "oklch(0.7058 0 0)";
+            readonly accent: "oklch(0.28 0.05 131)";
+            readonly accentForeground: "oklch(0.80 0.10 131)";
+            readonly destructive: "oklch(0.7106 0.1661 22.2162)";
+            readonly destructiveForeground: "oklch(1.0000 0 0)";
+            readonly border: "oklch(0.33 0.02 131)";
+            readonly input: "oklch(0.33 0.02 131)";
+            readonly ring: "oklch(0.65 0.20 131)";
+        };
+    };
+    readonly charts: {
+        readonly light: {
+            readonly chart1: "oklch(0.7459 0.1483 156.4499)";
+            readonly chart2: "oklch(0.55 0.20 131)";
+            readonly chart3: "oklch(0.7336 0.1758 50.5517)";
+            readonly chart4: "oklch(0.5828 0.1809 131)";
+            readonly chart5: "oklch(0.5590 0 0)";
+        };
+        readonly dark: {
+            readonly chart1: "oklch(0.8003 0.1821 151.7110)";
+            readonly chart2: "oklch(0.65 0.20 131)";
+            readonly chart3: "oklch(0.8077 0.1035 19.5706)";
+            readonly chart4: "oklch(0.6691 0.1569 131)";
+            readonly chart5: "oklch(0.7058 0 0)";
+        };
+    };
+    readonly radius: {
+        readonly base: "1.4rem";
+        readonly sm: "calc(1.4rem - 4px)";
+        readonly md: "calc(1.4rem - 2px)";
+        readonly lg: "1.4rem";
+        readonly xl: "calc(1.4rem + 4px)";
+    };
+    readonly shadows: {
+        readonly '2xs': "0px 2px 3px 0px hsl(0 0% 0% / 0.08)";
+        readonly xs: "0px 2px 3px 0px hsl(0 0% 0% / 0.08)";
+        readonly sm: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16)";
+        readonly base: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16)";
+        readonly md: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16)";
+        readonly lg: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16)";
+        readonly xl: "0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16)";
+        readonly '2xl': "0px 2px 3px 0px hsl(0 0% 0% / 0.40)";
+    };
+    readonly fonts: {
+        readonly sans: "Inter, sans-serif";
+        readonly serif: "Lora, serif";
+        readonly mono: "IBM Plex Mono, monospace";
+    };
+    readonly tracking: {
+        readonly normal: "-0.025em";
+    };
+};
+export type ThemeConfig = typeof themeConfig;
+//# sourceMappingURL=preset.d.ts.map

package/dist/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd,CAAA;AAEV,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;CAMf,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAA;AAEV,eAAO,MAAM,UAAU;;;;CAIb,CAAA;AAEV,eAAO,MAAM,cAAc;;CAEjB,CAAA;AAEV,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOd,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAA"}

package/dist/preset.js

@@ -0,0 +1,107 @@
+/**
+ * Metacore theme preset.
+ *
+ * The canonical source for Tailwind 4 design tokens lives in CSS
+ * (`@asteby/metacore-theme/tokens.css` and `/index.css`). Tailwind 4 does
+ * not use JS presets the way v3 did — consumers should import the CSS
+ * entry directly via `@import '@asteby/metacore-theme/index.css'` or
+ * `@import '@asteby/metacore-theme/tokens.css'`.
+ *
+ * This module exposes the same tokens as plain JS objects for cases where
+ * a JS/TS consumer needs programmatic access (e.g., Storybook theming,
+ * charting libraries, PDF generators).
+ */
+export const colorTokens = {
+    light: {
+        background: 'oklch(0.9940 0 0)',
+        foreground: 'oklch(0 0 0)',
+        card: 'oklch(0.9940 0 0)',
+        cardForeground: 'oklch(0 0 0)',
+        popover: 'oklch(0.9911 0 0)',
+        popoverForeground: 'oklch(0 0 0)',
+        primary: 'oklch(0.55 0.20 131)',
+        primaryForeground: 'oklch(1.0000 0 0)',
+        secondary: 'oklch(0.9540 0.0063 131)',
+        secondaryForeground: 'oklch(0.1344 0 0)',
+        muted: 'oklch(0.9702 0 0)',
+        mutedForeground: 'oklch(0.4386 0 0)',
+        accent: 'oklch(0.94 0.03 131)',
+        accentForeground: 'oklch(0.5445 0.1903 131)',
+        destructive: 'oklch(0.6290 0.1902 23.0704)',
+        destructiveForeground: 'oklch(1.0000 0 0)',
+        border: 'oklch(0.9300 0.0094 131)',
+        input: 'oklch(0.9401 0 0)',
+        ring: 'oklch(0 0 0)',
+    },
+    dark: {
+        background: 'oklch(0.22 0.01 131)',
+        foreground: 'oklch(0.9551 0 0)',
+        card: 'oklch(0.24 0.01 131)',
+        cardForeground: 'oklch(0.9551 0 0)',
+        popover: 'oklch(0.24 0.01 131)',
+        popoverForeground: 'oklch(0.9551 0 0)',
+        primary: 'oklch(0.65 0.20 131)',
+        primaryForeground: 'oklch(1.0000 0 0)',
+        secondary: 'oklch(0.29 0.02 131)',
+        secondaryForeground: 'oklch(0.9551 0 0)',
+        muted: 'oklch(0.29 0.02 131)',
+        mutedForeground: 'oklch(0.7058 0 0)',
+        accent: 'oklch(0.28 0.05 131)',
+        accentForeground: 'oklch(0.80 0.10 131)',
+        destructive: 'oklch(0.7106 0.1661 22.2162)',
+        destructiveForeground: 'oklch(1.0000 0 0)',
+        border: 'oklch(0.33 0.02 131)',
+        input: 'oklch(0.33 0.02 131)',
+        ring: 'oklch(0.65 0.20 131)',
+    },
+};
+export const chartTokens = {
+    light: {
+        chart1: 'oklch(0.7459 0.1483 156.4499)',
+        chart2: 'oklch(0.55 0.20 131)',
+        chart3: 'oklch(0.7336 0.1758 50.5517)',
+        chart4: 'oklch(0.5828 0.1809 131)',
+        chart5: 'oklch(0.5590 0 0)',
+    },
+    dark: {
+        chart1: 'oklch(0.8003 0.1821 151.7110)',
+        chart2: 'oklch(0.65 0.20 131)',
+        chart3: 'oklch(0.8077 0.1035 19.5706)',
+        chart4: 'oklch(0.6691 0.1569 131)',
+        chart5: 'oklch(0.7058 0 0)',
+    },
+};
+export const radiusTokens = {
+    base: '1.4rem',
+    sm: 'calc(1.4rem - 4px)',
+    md: 'calc(1.4rem - 2px)',
+    lg: '1.4rem',
+    xl: 'calc(1.4rem + 4px)',
+};
+export const shadowTokens = {
+    '2xs': '0px 2px 3px 0px hsl(0 0% 0% / 0.08)',
+    xs: '0px 2px 3px 0px hsl(0 0% 0% / 0.08)',
+    sm: '0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16)',
+    base: '0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16)',
+    md: '0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16)',
+    lg: '0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16)',
+    xl: '0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16)',
+    '2xl': '0px 2px 3px 0px hsl(0 0% 0% / 0.40)',
+};
+export const fontTokens = {
+    sans: 'Inter, sans-serif',
+    serif: 'Lora, serif',
+    mono: 'IBM Plex Mono, monospace',
+};
+export const trackingTokens = {
+    normal: '-0.025em',
+};
+export const themeConfig = {
+    colors: colorTokens,
+    charts: chartTokens,
+    radius: radiusTokens,
+    shadows: shadowTokens,
+    fonts: fontTokens,
+    tracking: trackingTokens,
+};
+//# sourceMappingURL=preset.js.map

package/dist/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.js","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"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"}

package/dist/provider.d.ts

@@ -0,0 +1,18 @@
+type Theme = 'dark' | 'light' | 'system';
+type ResolvedTheme = Exclude<Theme, 'system'>;
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+export type ThemeProviderState = {
+    defaultTheme: Theme;
+    resolvedTheme: ResolvedTheme;
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    resetTheme: () => void;
+};
+export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeProviderState;
+export {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AACxC,KAAK,aAAa,GAAG,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAM7C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,KAAK,CAAA;IACnB,aAAa,EAAE,aAAa,CAAA;IAC5B,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAgCD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAA4B,EAC5B,UAAgC,GACjC,EAAE,kBAAkB,2CAuDpB;AAGD,wBAAgB,QAAQ,IAAI,kBAAkB,CAI7C"}

package/dist/provider.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+const DEFAULT_THEME = 'system';
+const DEFAULT_STORAGE_KEY = 'metacore-ui-theme';
+const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+const initialState = {
+    defaultTheme: DEFAULT_THEME,
+    resolvedTheme: 'light',
+    theme: DEFAULT_THEME,
+    setTheme: () => null,
+    resetTheme: () => null,
+};
+const ThemeContext = createContext(initialState);
+function readCookie(name) {
+    if (typeof document === 'undefined')
+        return undefined;
+    const match = document.cookie
+        .split('; ')
+        .find((row) => row.startsWith(`${encodeURIComponent(name)}=`));
+    if (!match)
+        return undefined;
+    const value = match.split('=')[1];
+    return value ? decodeURIComponent(value) : undefined;
+}
+function writeCookie(name, value, maxAge) {
+    if (typeof document === 'undefined')
+        return;
+    document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=/; max-age=${maxAge}; SameSite=Lax`;
+}
+function clearCookie(name) {
+    if (typeof document === 'undefined')
+        return;
+    document.cookie = `${encodeURIComponent(name)}=; path=/; max-age=0; SameSite=Lax`;
+}
+export function ThemeProvider({ children, defaultTheme = DEFAULT_THEME, storageKey = DEFAULT_STORAGE_KEY, }) {
+    const [theme, _setTheme] = useState(() => readCookie(storageKey) || defaultTheme);
+    const resolvedTheme = useMemo(() => {
+        if (theme === 'system') {
+            if (typeof window === 'undefined')
+                return 'light';
+            return window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light';
+        }
+        return theme;
+    }, [theme]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const root = window.document.documentElement;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const applyTheme = (current) => {
+            root.classList.remove('light', 'dark');
+            root.classList.add(current);
+        };
+        const handleChange = () => {
+            if (theme === 'system') {
+                applyTheme(mediaQuery.matches ? 'dark' : 'light');
+            }
+        };
+        applyTheme(resolvedTheme);
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [theme, resolvedTheme]);
+    const setTheme = (next) => {
+        writeCookie(storageKey, next, THEME_COOKIE_MAX_AGE);
+        _setTheme(next);
+    };
+    const resetTheme = () => {
+        clearCookie(storageKey);
+        _setTheme(defaultTheme);
+    };
+    const value = {
+        defaultTheme,
+        resolvedTheme,
+        theme,
+        setTheme,
+        resetTheme,
+    };
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx)
+        throw new Error('useTheme must be used within a ThemeProvider');
+    return ctx;
+}
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@asteby/metacore-theme",
+  "version": "0.3.0",
+  "description": "Metacore design tokens + Tailwind 4 preset (oklch, shadows, fonts, dark mode)",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/asteby/metacore-sdk",
+    "directory": "packages/theme"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "styles",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./styles/tokens.css",
+    "./index.css": "./styles/index.css",
+    "./fonts": {
+      "types": "./dist/fonts.d.ts",
+      "import": "./dist/fonts.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "import": "./dist/preset.js"
+    }
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=4",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -w -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/styles/index.css

@@ -0,0 +1,123 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import './tokens.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+
+  html {
+    @apply overflow-x-hidden;
+  }
+
+  body {
+    @apply bg-background text-foreground has-[div[data-variant='inset']]:bg-sidebar min-h-svh w-full;
+  }
+
+  /* Override Radix scroll locking for sticky headers */
+  body[data-scroll-locked] {
+    overflow: unset !important;
+  }
+
+  /* Cursor pointer for buttons */
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  /* Prevent focus zoom on mobile devices */
+  @media screen and (max-width: 767px) {
+
+    input,
+    select,
+    textarea {
+      font-size: 16px !important;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
+
+@utility no-scrollbar {
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+@utility faded-bottom {
+  @apply after:pointer-events-none after:absolute after:start-0 after:bottom-0 after:hidden after:h-32 after:w-full after:rounded-b-2xl after:bg-[linear-gradient(180deg,_transparent_10%,_var(--background)_70%)] md:after:block;
+}
+
+/* styles.css */
+.CollapsibleContent {
+  overflow: hidden;
+}
+
+.CollapsibleContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+
+.CollapsibleContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+@theme {
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+}

package/styles/tokens.css

@@ -0,0 +1,171 @@
+:root {
+  --background: oklch(0.9940 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(0.9940 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(0.9911 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.55 0.14 175);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.9540 0.0063 175);
+  --secondary-foreground: oklch(0.1344 0 0);
+  --muted: oklch(0.9702 0 0);
+  --muted-foreground: oklch(0.4386 0 0);
+  --accent: oklch(0.94 0.03 175);
+  --accent-foreground: oklch(0.5445 0.12 175);
+  --destructive: oklch(0.6290 0.1902 23.0704);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.9300 0.0094 175);
+  --input: oklch(0.9401 0 0);
+  --ring: oklch(0 0 0);
+  --chart-1: oklch(0.7459 0.1483 156.4499);
+  --chart-2: oklch(0.55 0.14 175);
+  --chart-3: oklch(0.7336 0.1758 50.5517);
+  --chart-4: oklch(0.5828 0.12 175);
+  --chart-5: oklch(0.5590 0 0);
+  --sidebar: oklch(0.9777 0.0051 175);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0 0 0);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.9401 0 0);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(0.9401 0 0);
+  --sidebar-ring: oklch(0 0 0);
+  --font-sans: Inter, sans-serif;
+  --font-serif: Lora, serif;
+  --font-mono: IBM Plex Mono, monospace;
+  --radius: 1.4rem;
+  --shadow-x: 0px;
+  --shadow-y: 2px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.16;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
+  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
+  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
+  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
+  --tracking-normal: -0.025em;
+  --spacing: 0.27rem;
+}
+
+.dark {
+  --background: oklch(0.22 0.01 131);
+  --foreground: oklch(0.9551 0 0);
+  --card: oklch(0.24 0.01 131);
+  --card-foreground: oklch(0.9551 0 0);
+  --popover: oklch(0.24 0.01 131);
+  --popover-foreground: oklch(0.9551 0 0);
+  --primary: oklch(0.65 0.14 175);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.29 0.02 175);
+  --secondary-foreground: oklch(0.9551 0 0);
+  --muted: oklch(0.29 0.02 175);
+  --muted-foreground: oklch(0.7058 0 0);
+  --accent: oklch(0.28 0.05 175);
+  --accent-foreground: oklch(0.80 0.10 175);
+  --destructive: oklch(0.7106 0.1661 22.2162);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.33 0.02 175);
+  --input: oklch(0.33 0.02 175);
+  --ring: oklch(0.65 0.14 175);
+  --chart-1: oklch(0.8003 0.1821 151.7110);
+  --chart-2: oklch(0.65 0.14 175);
+  --chart-3: oklch(0.8077 0.1035 19.5706);
+  --chart-4: oklch(0.6691 0.10 175);
+  --chart-5: oklch(0.7058 0 0);
+  --sidebar: oklch(0.20 0.01 131);
+  --sidebar-foreground: oklch(0.9551 0 0);
+  --sidebar-primary: oklch(0.65 0.14 175);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.29 0.02 175);
+  --sidebar-accent-foreground: oklch(0.65 0.14 175);
+  --sidebar-border: oklch(0.33 0.02 175);
+  --sidebar-ring: oklch(0.65 0.14 175);
+
+  --radius: 1.4rem;
+  --shadow-x: 0px;
+  --shadow-y: 2px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.16;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
+  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
+  --shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
+  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
+  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
+  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+}
+
+body {
+  letter-spacing: var(--tracking-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}