@quen-ui/theme 0.0.14 → 1.0.1

package/dist/componentTokens/generateTabsTokens.cjs.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateTabsTokens = (theme) => ({
+  radius: theme.components.Tabs?.radius ?? theme.control.radius,
+  color: theme.components.Tabs?.color ?? theme.textColor,
+  activeColor: theme.components.Tabs?.activeColor ?? theme.commonColorTokens.primaryBackground,
+  disabledColor: theme.components.Tabs?.disabledColor ?? theme.commonColorTokens.disabledColor,
+  hoverColor: theme.components.Tabs?.hoverColor ?? theme.colors.grayViolet[9],
+  hoverBorderColor: theme.components.Tabs?.hoverBorderColor ?? theme.colors[theme.primaryColor][5],
+  borderColor: theme.components.Tabs?.borderColor ?? theme.commonColorTokens.borderColor,
+  borderWidth: theme.components.Tabs?.borderWidth ?? theme.control.borderWidth
+});
+exports.generateTabsTokens = generateTabsTokens;

package/dist/componentTokens/generateTabsTokens.d.ts

@@ -0,0 +1,18 @@
+import { IQuenUITheme } from '../theme/types';
+export interface ITabsTokens {
+    /** Border radius of the tab item */
+    radius: string;
+    /** Default text color of tabs */
+    color: string;
+    /** Text color of the active tab */
+    activeColor: string;
+    /** Text color of disabled tabs */
+    disabledColor: string;
+    /** Text color when hovering over a tab */
+    hoverColor: string;
+    /** Border color when hovering over a tab */
+    hoverBorderColor: string;
+    borderColor: string;
+    borderWidth: string;
+}
+export declare const generateTabsTokens: (theme: IQuenUITheme) => ITabsTokens;

package/dist/componentTokens/generateTabsTokens.es.js

@@ -0,0 +1,13 @@
+const generateTabsTokens = (theme) => ({
+  radius: theme.components.Tabs?.radius ?? theme.control.radius,
+  color: theme.components.Tabs?.color ?? theme.textColor,
+  activeColor: theme.components.Tabs?.activeColor ?? theme.commonColorTokens.primaryBackground,
+  disabledColor: theme.components.Tabs?.disabledColor ?? theme.commonColorTokens.disabledColor,
+  hoverColor: theme.components.Tabs?.hoverColor ?? theme.colors.grayViolet[9],
+  hoverBorderColor: theme.components.Tabs?.hoverBorderColor ?? theme.colors[theme.primaryColor][5],
+  borderColor: theme.components.Tabs?.borderColor ?? theme.commonColorTokens.borderColor,
+  borderWidth: theme.components.Tabs?.borderWidth ?? theme.control.borderWidth
+});
+export {
+  generateTabsTokens
+};

package/dist/componentTokens/generateTagTokens.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateTagTokens = (theme) => ({
+  radius: theme.components.Progress?.radius ?? theme.control.radius,
+  borderColor: theme.components.Tag?.borderColor ?? theme.commonColorTokens.borderColor,
+  disabledBackground: theme.components.Tag?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  disabledColor: theme.components.Tag?.disabledColor ?? theme.commonColorTokens.disabledColor,
+  background: theme.components.Tag?.background ?? theme.colors.grayViolet[4]
+});
+exports.generateTagTokens = generateTagTokens;

package/dist/componentTokens/generateTagTokens.d.ts

@@ -0,0 +1,14 @@
+import { IQuenUITheme } from '../theme/types';
+export interface ITagTokens {
+    /** Border radius of the tag */
+    radius: string;
+    /** Border color of the tag */
+    borderColor: string;
+    /** Background color when the tag is disabled */
+    disabledBackground: string;
+    /** Text color when the tag is disabled */
+    disabledColor: string;
+    /** Default background color of the tag */
+    background: string;
+}
+export declare const generateTagTokens: (theme: IQuenUITheme) => ITagTokens;

package/dist/componentTokens/generateTagTokens.es.js

@@ -0,0 +1,10 @@
+const generateTagTokens = (theme) => ({
+  radius: theme.components.Progress?.radius ?? theme.control.radius,
+  borderColor: theme.components.Tag?.borderColor ?? theme.commonColorTokens.borderColor,
+  disabledBackground: theme.components.Tag?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  disabledColor: theme.components.Tag?.disabledColor ?? theme.commonColorTokens.disabledColor,
+  background: theme.components.Tag?.background ?? theme.colors.grayViolet[4]
+});
+export {
+  generateTagTokens
+};

package/dist/componentTokens/index.cjs.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateAlertTokens = require("./generateAlertTokens.cjs.js");
+const generateAvatarTokens = require("./generateAvatarTokens.cjs.js");
+const generateBadgeTokens = require("./generateBadgeTokens.cjs.js");
+const generateBreadcrumbsTokens = require("./generateBreadcrumbsTokens.cjs.js");
+const generateButtonTokens = require("./generateButtonTokens.cjs.js");
+const generateCardTokens = require("./generateCardTokens.cjs.js");
+const generateCheckboxTokens = require("./generateCheckboxTokens.cjs.js");
+const generateDividerTokens = require("./generateDividerTokens.cjs.js");
+const generateDrawerTokens = require("./generateDrawerTokens.cjs.js");
+const generateDropdownTokens = require("./generateDropdownTokens.cjs.js");
+const generateImageTokens = require("./generateImageTokens.cjs.js");
+const generateInputTokens = require("./generateInputTokens.cjs.js");
+const generateLayoutTokens = require("./generateLayoutTokens.cjs.js");
+const generateLoaderTokens = require("./generateLoaderTokens.cjs.js");
+const generateMenuTokens = require("./generateMenuTokens.cjs.js");
+const generateModalTokens = require("./generateModalTokens.cjs.js");
+const generateNotificationTokens = require("./generateNotificationTokens.cjs.js");
+const generatePaginationTokens = require("./generatePaginationTokens.cjs.js");
+const generateProgressTokens = require("./generateProgressTokens.cjs.js");
+const generateRadioButtonTokens = require("./generateRadioButtonTokens.cjs.js");
+const generateSwitchTokens = require("./generateSwitchTokens.cjs.js");
+const generateTabsTokens = require("./generateTabsTokens.cjs.js");
+const generateTagTokens = require("./generateTagTokens.cjs.js");
+const generateAccordionTokens = require("./generateAccordionTokens.cjs.js");
+const generateMessageTokens = require("./generateMessageTokens.cjs.js");
+const generateCalendarTokens = require("./generateCalendarTokens.cjs.js");
+const generateSliderTokens = require("./generateSliderTokens.cjs.js");
+const generateSkeletonTokens = require("./generateSkeletonTokens.cjs.js");
+const generateLoadingOverlayTokens = require("./generateLoadingOverlayTokens.cjs.js");
+const generateColorPickerTokens = require("./generateColorPickerTokens.cjs.js");
+const generateRichTextEditorTokens = require("./generateRichTextEditorTokens.cjs.js");
+const generateComponentTokens = (theme) => {
+  return {
+    Alert: generateAlertTokens.generateAlertTokens(theme),
+    Avatar: generateAvatarTokens.generateAvatarTokens(theme),
+    Badge: generateBadgeTokens.generateBadgeTokens(theme),
+    Breadcrumbs: generateBreadcrumbsTokens.generateBreadcrumbsTokens(theme),
+    Button: generateButtonTokens.generateButtonTokens(theme),
+    Card: generateCardTokens.generateCardTokens(theme),
+    Checkbox: generateCheckboxTokens.generateCheckboxTokens(theme),
+    Divider: generateDividerTokens.generateDividerTokens(theme),
+    Drawer: generateDrawerTokens.generateDrawerTokens(theme),
+    Dropdown: generateDropdownTokens.generateDropdownTokens(theme),
+    Image: generateImageTokens.generateImageTokens(theme),
+    Input: generateInputTokens.generateInputTokens(theme),
+    Layout: generateLayoutTokens.generateLayoutTokens(theme),
+    Loader: generateLoaderTokens.generateLoaderTokens(theme),
+    Menu: generateMenuTokens.generateMenuTokens(theme),
+    Modal: generateModalTokens.generateModalTokens(theme),
+    Notification: generateNotificationTokens.generateNotificationTokens(theme),
+    Pagination: generatePaginationTokens.generatePaginationTokens(theme),
+    Progress: generateProgressTokens.generateProgressTokens(theme),
+    RadioButton: generateRadioButtonTokens.generateRadioButtonTokens(theme),
+    Switch: generateSwitchTokens.generateSwitchTokens(theme),
+    Tabs: generateTabsTokens.generateTabsTokens(theme),
+    Tag: generateTagTokens.generateTagTokens(theme),
+    Accordion: generateAccordionTokens.generateAccordionTokens(theme),
+    Message: generateMessageTokens.generateMessageTokens(theme),
+    Calendar: generateCalendarTokens.generateCalendarTokens(theme),
+    Slider: generateSliderTokens.generateSliderTokens(theme),
+    Skeleton: generateSkeletonTokens.generateSkeletonTokens(theme),
+    LoadingOverlay: generateLoadingOverlayTokens.generateLoadingOverlayTokens(theme),
+    ColorPicker: generateColorPickerTokens.generateColorPickerTokens(theme),
+    RichTextEditor: generateRichTextEditorTokens.generateRichTextEditorTokens(theme)
+  };
+};
+exports.generateComponentTokens = generateComponentTokens;

package/dist/componentTokens/index.d.ts

@@ -0,0 +1,66 @@
+import { IQuenUITheme } from '../theme/types';
+import { IAlertTokens } from './generateAlertTokens';
+import { IAvatarTokens } from './generateAvatarTokens';
+import { IBadgeTokens } from './generateBadgeTokens';
+import { IBreadcrumbsTokens } from './generateBreadcrumbsTokens';
+import { IButtonTokens } from './generateButtonTokens';
+import { ICardTokens } from './generateCardTokens';
+import { ICheckboxTokens } from './generateCheckboxTokens';
+import { IDividerTokens } from './generateDividerTokens';
+import { IDrawerTokens } from './generateDrawerTokens';
+import { IDropdownTokens } from './generateDropdownTokens';
+import { IImageTokens } from './generateImageTokens';
+import { IInputTokens } from './generateInputTokens';
+import { ILayoutTokens } from './generateLayoutTokens';
+import { ILoaderTokens } from './generateLoaderTokens';
+import { IMenuTokens } from './generateMenuTokens';
+import { IModalTokens } from './generateModalTokens';
+import { INotificationTokens } from './generateNotificationTokens';
+import { IPaginationTokens } from './generatePaginationTokens';
+import { IProgressTokens } from './generateProgressTokens';
+import { IRadioButtonTokens } from './generateRadioButtonTokens';
+import { ISwitchTokens } from './generateSwitchTokens';
+import { ITabsTokens } from './generateTabsTokens';
+import { ITagTokens } from './generateTagTokens';
+import { IAccordionTokens } from './generateAccordionTokens';
+import { IMessageTokens } from './generateMessageTokens';
+import { ICalendarTokens } from './generateCalendarTokens';
+import { ISliderTokens } from './generateSliderTokens';
+import { ISkeletonTokens } from './generateSkeletonTokens';
+import { ILoadingOverlayTokens } from './generateLoadingOverlayTokens';
+import { IColorPickerTokens } from './generateColorPickerTokens';
+import { IRichTextEditorTokens } from './generateRichTextEditorTokens';
+export interface IQuenUIComponents {
+    Accordion: IAccordionTokens;
+    Alert: IAlertTokens;
+    Avatar: IAvatarTokens;
+    Badge: IBadgeTokens;
+    Breadcrumbs: IBreadcrumbsTokens;
+    Button: IButtonTokens;
+    Card: ICardTokens;
+    Checkbox: ICheckboxTokens;
+    Divider: IDividerTokens;
+    Drawer: IDrawerTokens;
+    Dropdown: IDropdownTokens;
+    Image: IImageTokens;
+    Input: IInputTokens;
+    Layout: ILayoutTokens;
+    Loader: ILoaderTokens;
+    Menu: IMenuTokens;
+    Modal: IModalTokens;
+    Notification: INotificationTokens;
+    Pagination: IPaginationTokens;
+    Progress: IProgressTokens;
+    RadioButton: IRadioButtonTokens;
+    Switch: ISwitchTokens;
+    Tabs: ITabsTokens;
+    Tag: ITagTokens;
+    Message: IMessageTokens;
+    Calendar: ICalendarTokens;
+    Slider: ISliderTokens;
+    Skeleton: ISkeletonTokens;
+    LoadingOverlay: ILoadingOverlayTokens;
+    ColorPicker: IColorPickerTokens;
+    RichTextEditor: IRichTextEditorTokens;
+}
+export declare const generateComponentTokens: (theme: IQuenUITheme) => IQuenUIComponents;

package/dist/componentTokens/index.es.js

@@ -0,0 +1,69 @@
+import { generateAlertTokens } from "./generateAlertTokens.es.js";
+import { generateAvatarTokens } from "./generateAvatarTokens.es.js";
+import { generateBadgeTokens } from "./generateBadgeTokens.es.js";
+import { generateBreadcrumbsTokens } from "./generateBreadcrumbsTokens.es.js";
+import { generateButtonTokens } from "./generateButtonTokens.es.js";
+import { generateCardTokens } from "./generateCardTokens.es.js";
+import { generateCheckboxTokens } from "./generateCheckboxTokens.es.js";
+import { generateDividerTokens } from "./generateDividerTokens.es.js";
+import { generateDrawerTokens } from "./generateDrawerTokens.es.js";
+import { generateDropdownTokens } from "./generateDropdownTokens.es.js";
+import { generateImageTokens } from "./generateImageTokens.es.js";
+import { generateInputTokens } from "./generateInputTokens.es.js";
+import { generateLayoutTokens } from "./generateLayoutTokens.es.js";
+import { generateLoaderTokens } from "./generateLoaderTokens.es.js";
+import { generateMenuTokens } from "./generateMenuTokens.es.js";
+import { generateModalTokens } from "./generateModalTokens.es.js";
+import { generateNotificationTokens } from "./generateNotificationTokens.es.js";
+import { generatePaginationTokens } from "./generatePaginationTokens.es.js";
+import { generateProgressTokens } from "./generateProgressTokens.es.js";
+import { generateRadioButtonTokens } from "./generateRadioButtonTokens.es.js";
+import { generateSwitchTokens } from "./generateSwitchTokens.es.js";
+import { generateTabsTokens } from "./generateTabsTokens.es.js";
+import { generateTagTokens } from "./generateTagTokens.es.js";
+import { generateAccordionTokens } from "./generateAccordionTokens.es.js";
+import { generateMessageTokens } from "./generateMessageTokens.es.js";
+import { generateCalendarTokens } from "./generateCalendarTokens.es.js";
+import { generateSliderTokens } from "./generateSliderTokens.es.js";
+import { generateSkeletonTokens } from "./generateSkeletonTokens.es.js";
+import { generateLoadingOverlayTokens } from "./generateLoadingOverlayTokens.es.js";
+import { generateColorPickerTokens } from "./generateColorPickerTokens.es.js";
+import { generateRichTextEditorTokens } from "./generateRichTextEditorTokens.es.js";
+const generateComponentTokens = (theme) => {
+  return {
+    Alert: generateAlertTokens(theme),
+    Avatar: generateAvatarTokens(theme),
+    Badge: generateBadgeTokens(theme),
+    Breadcrumbs: generateBreadcrumbsTokens(theme),
+    Button: generateButtonTokens(theme),
+    Card: generateCardTokens(theme),
+    Checkbox: generateCheckboxTokens(theme),
+    Divider: generateDividerTokens(theme),
+    Drawer: generateDrawerTokens(theme),
+    Dropdown: generateDropdownTokens(theme),
+    Image: generateImageTokens(theme),
+    Input: generateInputTokens(theme),
+    Layout: generateLayoutTokens(theme),
+    Loader: generateLoaderTokens(theme),
+    Menu: generateMenuTokens(theme),
+    Modal: generateModalTokens(theme),
+    Notification: generateNotificationTokens(theme),
+    Pagination: generatePaginationTokens(theme),
+    Progress: generateProgressTokens(theme),
+    RadioButton: generateRadioButtonTokens(theme),
+    Switch: generateSwitchTokens(theme),
+    Tabs: generateTabsTokens(theme),
+    Tag: generateTagTokens(theme),
+    Accordion: generateAccordionTokens(theme),
+    Message: generateMessageTokens(theme),
+    Calendar: generateCalendarTokens(theme),
+    Slider: generateSliderTokens(theme),
+    Skeleton: generateSkeletonTokens(theme),
+    LoadingOverlay: generateLoadingOverlayTokens(theme),
+    ColorPicker: generateColorPickerTokens(theme),
+    RichTextEditor: generateRichTextEditorTokens(theme)
+  };
+};
+export {
+  generateComponentTokens
+};

package/dist/createTheme.cjs.js

@@ -2,7 +2,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const helpers = require("@quen-ui/helpers");
 const lightTheme = require("./theme/lightTheme.cjs.js");
+const index = require("./componentTokens/index.cjs.js");
+const generateCommonColorTokens = require("./colors/generateCommonColorTokens.cjs.js");
 const createTheme = (newTheme, defaultTheme = lightTheme.QuenUILightTheme) => {
-  return helpers.deepMerge(defaultTheme, newTheme);
+  const mergedTheme = helpers.deepMerge(defaultTheme, newTheme);
+  const commonColorTokens = generateCommonColorTokens.generateCommonColorTokens(mergedTheme);
+  const componentTokens = index.generateComponentTokens({
+    ...mergedTheme,
+    commonColorTokens
+  });
+  return {
+    ...mergedTheme,
+    commonColorTokens,
+    components: componentTokens
+  };
 };
 exports.createTheme = createTheme;

package/dist/createTheme.d.ts

@@ -1,3 +1,3 @@
-import { TDeepPartial } from '@quen-ui/helpers';
+import { TDeepPartial } from '../../helpers';
 import { IQuenUITheme } from './theme/types';
-export declare const createTheme: (newTheme: TDeepPartial<IQuenUITheme>, defaultTheme?: IQuenUITheme) => IQuenUITheme<import('./colors/types').TQuenUIColors> & TDeepPartial<IQuenUITheme<import('./colors/types').TQuenUIColors>>;
+export declare const createTheme: (newTheme: TDeepPartial<IQuenUITheme>, defaultTheme?: IQuenUITheme) => IQuenUITheme;

package/dist/createTheme.es.js

@@ -1,7 +1,19 @@
 import { deepMerge } from "@quen-ui/helpers";
 import { QuenUILightTheme } from "./theme/lightTheme.es.js";
+import { generateComponentTokens } from "./componentTokens/index.es.js";
+import { generateCommonColorTokens } from "./colors/generateCommonColorTokens.es.js";
 const createTheme = (newTheme, defaultTheme = QuenUILightTheme) => {
-  return deepMerge(defaultTheme, newTheme);
+  const mergedTheme = deepMerge(defaultTheme, newTheme);
+  const commonColorTokens = generateCommonColorTokens(mergedTheme);
+  const componentTokens = generateComponentTokens({
+    ...mergedTheme,
+    commonColorTokens
+  });
+  return {
+    ...mergedTheme,
+    commonColorTokens,
+    components: componentTokens
+  };
 };
 export {
   createTheme

package/dist/index.d.ts

@@ -14,3 +14,4 @@ export type { IQuenUIColor, TDefaultQuenUIColors } from './colors/types';
 export { useTheme } from './useTheme';
 export { createTheme } from './createTheme';
 export { injectCssVarsFromTheme, getVariables } from './injectCssVarsFromTheme';
+export type { IQuenUIComponents } from './componentTokens';

package/dist/theme/darkTheme.cjs.js

@@ -4,6 +4,8 @@ const index = require("../colors/index.cjs.js");
 const control = require("../constants/control.cjs.js");
 const space = require("../constants/space.cjs.js");
 const font = require("../constants/font.cjs.js");
+const index$1 = require("../componentTokens/index.cjs.js");
+const generateCommonColorTokens = require("../colors/generateCommonColorTokens.cjs.js");
 const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
 const QuenUIDarkTheme = {
   colors: index.QUEN_UI_DARK_COLORS,
@@ -14,6 +16,9 @@ const QuenUIDarkTheme = {
   space: space.QUENUI_DEFAULT_SPACE,
   fonts: font.QUENUI_DEFAULT_FONT,
   colorBody: "#1c1c1c",
-  components: {}
+  components: {},
+  commonColorTokens: {}
 };
+QuenUIDarkTheme.commonColorTokens = generateCommonColorTokens.generateCommonColorTokens(QuenUIDarkTheme);
+QuenUIDarkTheme.components = index$1.generateComponentTokens(QuenUIDarkTheme);
 exports.QuenUIDarkTheme = QuenUIDarkTheme;

package/dist/theme/darkTheme.es.js

@@ -2,6 +2,8 @@ import { QUEN_UI_DARK_COLORS } from "../colors/index.es.js";
 import { QUENUI_DEFAULT_CONTROL } from "../constants/control.es.js";
 import { QUENUI_DEFAULT_SPACE } from "../constants/space.es.js";
 import { QUENUI_DEFAULT_FONT } from "../constants/font.es.js";
+import { generateComponentTokens } from "../componentTokens/index.es.js";
+import { generateCommonColorTokens } from "../colors/generateCommonColorTokens.es.js";
 const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
 const QuenUIDarkTheme = {
   colors: QUEN_UI_DARK_COLORS,
@@ -12,8 +14,11 @@ const QuenUIDarkTheme = {
   space: QUENUI_DEFAULT_SPACE,
   fonts: QUENUI_DEFAULT_FONT,
   colorBody: "#1c1c1c",
-  components: {}
+  components: {},
+  commonColorTokens: {}
 };
+QuenUIDarkTheme.commonColorTokens = generateCommonColorTokens(QuenUIDarkTheme);
+QuenUIDarkTheme.components = generateComponentTokens(QuenUIDarkTheme);
 export {
   QuenUIDarkTheme
 };

package/dist/theme/lightTheme.cjs.js

@@ -4,6 +4,8 @@ const index = require("../colors/index.cjs.js");
 const control = require("../constants/control.cjs.js");
 const space = require("../constants/space.cjs.js");
 const font = require("../constants/font.cjs.js");
+const index$1 = require("../componentTokens/index.cjs.js");
+const generateCommonColorTokens = require("../colors/generateCommonColorTokens.cjs.js");
 const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
 const QuenUILightTheme = {
   colors: index.QUEN_UI_LIGHT_COLORS,
@@ -14,6 +16,9 @@ const QuenUILightTheme = {
   space: space.QUENUI_DEFAULT_SPACE,
   fonts: font.QUENUI_DEFAULT_FONT,
   colorBody: "#fffffe",
-  components: {}
+  components: {},
+  commonColorTokens: {}
 };
+QuenUILightTheme.commonColorTokens = generateCommonColorTokens.generateCommonColorTokens(QuenUILightTheme);
+QuenUILightTheme.components = index$1.generateComponentTokens(QuenUILightTheme);
 exports.QuenUILightTheme = QuenUILightTheme;

package/dist/theme/lightTheme.es.js

@@ -2,6 +2,8 @@ import { QUEN_UI_LIGHT_COLORS } from "../colors/index.es.js";
 import { QUENUI_DEFAULT_CONTROL } from "../constants/control.es.js";
 import { QUENUI_DEFAULT_SPACE } from "../constants/space.es.js";
 import { QUENUI_DEFAULT_FONT } from "../constants/font.es.js";
+import { generateComponentTokens } from "../componentTokens/index.es.js";
+import { generateCommonColorTokens } from "../colors/generateCommonColorTokens.es.js";
 const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
 const QuenUILightTheme = {
   colors: QUEN_UI_LIGHT_COLORS,
@@ -12,8 +14,11 @@ const QuenUILightTheme = {
   space: QUENUI_DEFAULT_SPACE,
   fonts: QUENUI_DEFAULT_FONT,
   colorBody: "#fffffe",
-  components: {}
+  components: {},
+  commonColorTokens: {}
 };
+QuenUILightTheme.commonColorTokens = generateCommonColorTokens(QuenUILightTheme);
+QuenUILightTheme.components = generateComponentTokens(QuenUILightTheme);
 export {
   QuenUILightTheme
 };

package/dist/theme/types.d.ts

@@ -1,7 +1,8 @@
-import { TQuenUIColors } from '../colors/types';
+import { TQuenUIColors, IQuenUICommonTokensColor } from '../colors/types';
 import { IQuenUIThemeControl } from '../types/control';
 import { IQuenUIThemeSpace } from '../types/space';
 import { IQuenUIFont } from '../types/fonts';
+import { IQuenUIComponents } from '../componentTokens';
 export interface IQuenUITheme<C extends TQuenUIColors = TQuenUIColors> {
     colors: C;
     primaryColor: keyof TQuenUIColors;
@@ -11,5 +12,6 @@ export interface IQuenUITheme<C extends TQuenUIColors = TQuenUIColors> {
     control: IQuenUIThemeControl;
     space: IQuenUIThemeSpace;
     fonts: IQuenUIFont;
-    components: Record<string, any>;
+    components: IQuenUIComponents | Record<string, any>;
+    commonColorTokens: IQuenUICommonTokensColor;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quen-ui/theme",
   "private": false,
-  "version": "0.0.14",
+  "version": "1.0.1",
   "type": "module",
   "homepage": "https://quen-ui.github.io/quen-ui/",
   "description": "Provides a consistent visual style for components from `@quen-ui/components`.",
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc -b tsconfig.build.json && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -31,16 +31,16 @@
   },
   "dependencies": {
     "@quen-ui/helpers": "*",
-    "styled-components": "^6.1.15"
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
     "globals": "^15.15.0",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.50.0",
+    "vite": "^7.3.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",