@quen-ui/theme 0.0.14 → 1.0.1

package/dist/colors/generateCommonColorTokens.cjs.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const polished = require("polished");
+const generateCommonColorTokens = (theme) => ({
+  successColor: theme.commonColorTokens?.successColor ?? theme.colors.green[9],
+  successBackground: theme.commonColorTokens?.successBackground ?? theme.colors.green[7],
+  secondaryColor: theme.commonColorTokens?.secondaryColor ?? theme.colors.grayViolet[9],
+  secondaryBackground: theme.commonColorTokens?.secondaryBackground ?? theme.colors.gray[6],
+  warningColor: theme.commonColorTokens?.warningColor ?? theme.colors.orange[9],
+  warningBackground: theme.commonColorTokens?.warningBackground ?? theme.colors.orange[7],
+  dangerColor: theme.commonColorTokens?.dangerColor ?? theme.colors.red[9],
+  dangerBackground: theme.commonColorTokens?.dangerBackground ?? theme.colors.red[7],
+  disabledColor: theme.commonColorTokens?.disabledColor ?? theme.colors.gray[4],
+  disabledBackground: theme.commonColorTokens?.disabledBackground ?? theme.colors.gray[2],
+  primaryBackground: theme.commonColorTokens?.primaryBackground ?? theme.colors[theme.primaryColor][9],
+  borderColor: theme.commonColorTokens?.borderColor ?? theme.colors.grayViolet[9],
+  overlayBackground: theme.commonColorTokens.overlayBackground ?? polished.rgba(theme.colors.grayViolet[5], 0.7),
+  hoverBackground: theme.commonColorTokens.hoverBackground ?? theme.colors.grayViolet[5],
+  activeBackground: theme.commonColorTokens.activeBackground ?? theme.colors[theme.primaryColor][5]
+});
+exports.generateCommonColorTokens = generateCommonColorTokens;

package/dist/colors/generateCommonColorTokens.d.ts

@@ -0,0 +1,3 @@
+import { IQuenUITheme } from '../theme/types';
+import { IQuenUICommonTokensColor } from './types';
+export declare const generateCommonColorTokens: (theme: IQuenUITheme) => IQuenUICommonTokensColor;

package/dist/colors/generateCommonColorTokens.es.js

@@ -0,0 +1,21 @@
+import { rgba } from "polished";
+const generateCommonColorTokens = (theme) => ({
+  successColor: theme.commonColorTokens?.successColor ?? theme.colors.green[9],
+  successBackground: theme.commonColorTokens?.successBackground ?? theme.colors.green[7],
+  secondaryColor: theme.commonColorTokens?.secondaryColor ?? theme.colors.grayViolet[9],
+  secondaryBackground: theme.commonColorTokens?.secondaryBackground ?? theme.colors.gray[6],
+  warningColor: theme.commonColorTokens?.warningColor ?? theme.colors.orange[9],
+  warningBackground: theme.commonColorTokens?.warningBackground ?? theme.colors.orange[7],
+  dangerColor: theme.commonColorTokens?.dangerColor ?? theme.colors.red[9],
+  dangerBackground: theme.commonColorTokens?.dangerBackground ?? theme.colors.red[7],
+  disabledColor: theme.commonColorTokens?.disabledColor ?? theme.colors.gray[4],
+  disabledBackground: theme.commonColorTokens?.disabledBackground ?? theme.colors.gray[2],
+  primaryBackground: theme.commonColorTokens?.primaryBackground ?? theme.colors[theme.primaryColor][9],
+  borderColor: theme.commonColorTokens?.borderColor ?? theme.colors.grayViolet[9],
+  overlayBackground: theme.commonColorTokens.overlayBackground ?? rgba(theme.colors.grayViolet[5], 0.7),
+  hoverBackground: theme.commonColorTokens.hoverBackground ?? theme.colors.grayViolet[5],
+  activeBackground: theme.commonColorTokens.activeBackground ?? theme.colors[theme.primaryColor][5]
+});
+export {
+  generateCommonColorTokens
+};

package/dist/colors/types.d.ts

@@ -12,3 +12,20 @@ export interface IQuenUIColor {
 }
 export type TDefaultQuenUIColors = typeof QUENUI_COlORS_PALETTE[number];
 export type TQuenUIColors = Record<TDefaultQuenUIColors, IQuenUIColor>;
+export interface IQuenUICommonTokensColor {
+    successColor: string;
+    warningColor: string;
+    dangerColor: string;
+    dangerBackground: string;
+    secondaryColor: string;
+    secondaryBackground: string;
+    disabledColor: string;
+    disabledBackground: string;
+    successBackground: string;
+    warningBackground: string;
+    primaryBackground: string;
+    borderColor: string;
+    overlayBackground: string;
+    hoverBackground: string;
+    activeBackground: string;
+}

package/dist/componentTokens/generateAccordionTokens.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateAccordionTokens = (theme) => ({
+  radius: theme.components.Accordion?.radius ?? theme.control.radius,
+  disabledColor: theme.components.Accordion?.colorDisabled ?? theme.commonColorTokens.disabledColor,
+  borderColor: theme.components.Accordion?.borderColor ?? theme.commonColorTokens.borderColor,
+  padding: theme.components.Accordion?.paddingHeader ?? theme.space,
+  hoverHeaderBackground: theme.components.Accordion?.hoverHeaderBackground ?? theme.commonColorTokens.hoverBackground
+});
+exports.generateAccordionTokens = generateAccordionTokens;

package/dist/componentTokens/generateAccordionTokens.d.ts

@@ -0,0 +1,15 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IAccordionTokens {
+    /** Container corner radius */
+    radius: string;
+    disabledColor: string;
+    borderColor: string;
+    padding: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+    };
+    hoverHeaderBackground: string;
+}
+export declare const generateAccordionTokens: (theme: IQuenUITheme) => IAccordionTokens;

package/dist/componentTokens/generateAccordionTokens.es.js

@@ -0,0 +1,10 @@
+const generateAccordionTokens = (theme) => ({
+  radius: theme.components.Accordion?.radius ?? theme.control.radius,
+  disabledColor: theme.components.Accordion?.colorDisabled ?? theme.commonColorTokens.disabledColor,
+  borderColor: theme.components.Accordion?.borderColor ?? theme.commonColorTokens.borderColor,
+  padding: theme.components.Accordion?.paddingHeader ?? theme.space,
+  hoverHeaderBackground: theme.components.Accordion?.hoverHeaderBackground ?? theme.commonColorTokens.hoverBackground
+});
+export {
+  generateAccordionTokens
+};

package/dist/componentTokens/generateAlertTokens.cjs.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateAlertTokens = (theme) => ({
+  radius: theme.components.Alert?.radius ?? theme.control.radius,
+  successBackground: theme.components.Alert?.successBackground ?? [
+    theme.colors.green[1],
+    theme.colors.green[4]
+  ],
+  dangerBackground: theme.components.Alert?.dangerBackground ?? [
+    theme.colors.red[1],
+    theme.colors.red[4]
+  ],
+  warningBackground: theme.components.Alert?.warningBackground ?? [
+    theme.colors.orange[1],
+    theme.colors.orange[4]
+  ],
+  infoBackground: theme.components.Alert?.infoBackground ?? theme.colors.grayViolet[9],
+  colorSuccessIcon: theme.components.Alert?.colorSuccessIcon ?? theme.colors.green[9],
+  colorDangerIcon: theme.components.Alert?.colorDangerIcon ?? theme.colors.red[9],
+  colorWarningIcon: theme.components.Alert?.colorWarningIcon ?? theme.colors.orange[9],
+  colorInfoIcon: theme.components.Alert?.colorInfoIcon ?? theme.colors.grayViolet[9],
+  colorText: theme.components.Alert?.colorText ?? theme.textColor,
+  colorIcon: theme.components.Alert?.colorIcon ?? theme.colors.grayViolet[1]
+});
+exports.generateAlertTokens = generateAlertTokens;

package/dist/componentTokens/generateAlertTokens.d.ts

@@ -0,0 +1,26 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IAlertTokens {
+    /** Container corner radius */
+    radius: string;
+    /** Background gradient for the "success" state */
+    successBackground: [string, string];
+    /** Background gradient for the "warning" state */
+    warningBackground: [string, string];
+    /** Background gradient for the "danger" state */
+    dangerBackground: [string, string];
+    /** Background gradient for the "default" state */
+    infoBackground: string;
+    /** Background color of the icon for the "success" state */
+    colorSuccessIcon: string;
+    /** Background color of the icon for the "danger" state */
+    colorDangerIcon: string;
+    /** Background color of the icon for the "warning" state */
+    colorWarningIcon: string;
+    /** Background color of the icon for the "default" state */
+    colorInfoIcon: string;
+    /** Text color */
+    colorText: string;
+    /** Icon Color */
+    colorIcon: string;
+}
+export declare const generateAlertTokens: (theme: IQuenUITheme) => IAlertTokens;

package/dist/componentTokens/generateAlertTokens.es.js

@@ -0,0 +1,25 @@
+const generateAlertTokens = (theme) => ({
+  radius: theme.components.Alert?.radius ?? theme.control.radius,
+  successBackground: theme.components.Alert?.successBackground ?? [
+    theme.colors.green[1],
+    theme.colors.green[4]
+  ],
+  dangerBackground: theme.components.Alert?.dangerBackground ?? [
+    theme.colors.red[1],
+    theme.colors.red[4]
+  ],
+  warningBackground: theme.components.Alert?.warningBackground ?? [
+    theme.colors.orange[1],
+    theme.colors.orange[4]
+  ],
+  infoBackground: theme.components.Alert?.infoBackground ?? theme.colors.grayViolet[9],
+  colorSuccessIcon: theme.components.Alert?.colorSuccessIcon ?? theme.colors.green[9],
+  colorDangerIcon: theme.components.Alert?.colorDangerIcon ?? theme.colors.red[9],
+  colorWarningIcon: theme.components.Alert?.colorWarningIcon ?? theme.colors.orange[9],
+  colorInfoIcon: theme.components.Alert?.colorInfoIcon ?? theme.colors.grayViolet[9],
+  colorText: theme.components.Alert?.colorText ?? theme.textColor,
+  colorIcon: theme.components.Alert?.colorIcon ?? theme.colors.grayViolet[1]
+});
+export {
+  generateAlertTokens
+};

package/dist/componentTokens/generateAvatarTokens.cjs.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const polished = require("polished");
+const generateAvatarTokens = (theme) => ({
+  radius: theme.components.Avatar?.radius ?? polished.math(`${theme.control.radius} * 4`),
+  borderWidth: theme.components.Avatar?.borderWidth ?? polished.math(`${theme.control.borderWidth} * 2`),
+  borderColorOnline: theme.components.Avatar?.borderColorOnline ?? theme.colors.green[5],
+  borderColorDefault: theme.components.Avatar?.borderColorDefault ?? theme.colors.grayViolet[5],
+  color: theme.components.Avatar?.color ?? theme.textColor
+});
+exports.generateAvatarTokens = generateAvatarTokens;

package/dist/componentTokens/generateAvatarTokens.d.ts

@@ -0,0 +1,14 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IAvatarTokens {
+    /** Border radius of the avatar shape */
+    radius: string;
+    /** Thickness of the avatar border */
+    borderWidth: string;
+    /** Border color when the avatar is in an “online” state */
+    borderColorOnline: string;
+    /** Default border color when the avatar is not in an “online” state. */
+    borderColorDefault: string;
+    /** Text and icon color inside the avatar */
+    color: string;
+}
+export declare const generateAvatarTokens: (theme: IQuenUITheme) => IAvatarTokens;

package/dist/componentTokens/generateAvatarTokens.es.js

@@ -0,0 +1,11 @@
+import { math } from "polished";
+const generateAvatarTokens = (theme) => ({
+  radius: theme.components.Avatar?.radius ?? math(`${theme.control.radius} * 4`),
+  borderWidth: theme.components.Avatar?.borderWidth ?? math(`${theme.control.borderWidth} * 2`),
+  borderColorOnline: theme.components.Avatar?.borderColorOnline ?? theme.colors.green[5],
+  borderColorDefault: theme.components.Avatar?.borderColorDefault ?? theme.colors.grayViolet[5],
+  color: theme.components.Avatar?.color ?? theme.textColor
+});
+export {
+  generateAvatarTokens
+};

package/dist/componentTokens/generateBadgeTokens.cjs.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateBadgeTokens = (theme) => ({
+  successBackground: theme.components.Badge?.successBackground ?? theme.commonColorTokens.successColor,
+  warningBackground: theme.components.Badge?.warningBackground ?? theme.commonColorTokens.warningColor,
+  dangerBackground: theme.components.Badge?.dangerBackground ?? theme.commonColorTokens.dangerColor,
+  secondaryBackground: theme.components.Badge?.secondaryBackground ?? theme.commonColorTokens.secondaryColor,
+  disabledBackground: theme.components.Badge?.disabledBackground ?? theme.commonColorTokens.disabledColor,
+  primaryBackground: theme.components.Badge?.primaryBackground ?? theme.colors[theme.primaryColor][9],
+  radius: theme.components.Badge?.radius ?? theme.control.radius,
+  disabledColor: theme.components.Badge?.disabledColor ?? theme.commonColorTokens.disabledColor
+});
+exports.generateBadgeTokens = generateBadgeTokens;

package/dist/componentTokens/generateBadgeTokens.d.ts

@@ -0,0 +1,20 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IBadgeTokens {
+    /** Background color for success badges */
+    successBackground: string;
+    /** Background color for warning badges */
+    warningBackground: string;
+    /** Background color for danger badges */
+    dangerBackground: string;
+    /** Background color for secondary badges */
+    secondaryBackground: string;
+    /** Background color for disabled badges */
+    disabledBackground: string;
+    /** Background color for primary badges */
+    primaryBackground: string;
+    /** Border radius applied to all badges */
+    radius: string;
+    /** Text color for disabled badges */
+    disabledColor: string;
+}
+export declare const generateBadgeTokens: (theme: IQuenUITheme) => IBadgeTokens;

package/dist/componentTokens/generateBadgeTokens.es.js

@@ -0,0 +1,13 @@
+const generateBadgeTokens = (theme) => ({
+  successBackground: theme.components.Badge?.successBackground ?? theme.commonColorTokens.successColor,
+  warningBackground: theme.components.Badge?.warningBackground ?? theme.commonColorTokens.warningColor,
+  dangerBackground: theme.components.Badge?.dangerBackground ?? theme.commonColorTokens.dangerColor,
+  secondaryBackground: theme.components.Badge?.secondaryBackground ?? theme.commonColorTokens.secondaryColor,
+  disabledBackground: theme.components.Badge?.disabledBackground ?? theme.commonColorTokens.disabledColor,
+  primaryBackground: theme.components.Badge?.primaryBackground ?? theme.colors[theme.primaryColor][9],
+  radius: theme.components.Badge?.radius ?? theme.control.radius,
+  disabledColor: theme.components.Badge?.disabledColor ?? theme.commonColorTokens.disabledColor
+});
+export {
+  generateBadgeTokens
+};

package/dist/componentTokens/generateBreadcrumbsTokens.cjs.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateBreadcrumbsTokens = (theme) => ({
+  color: theme.components.Breadcrumbs?.color ?? theme.textColor,
+  primaryColor: theme.components.Breadcrumbs?.primaryColor ?? theme.colors[theme.primaryColor][9],
+  hoverColor: theme.components.Breadcrumbs?.hoverColor ?? theme.colors.grayViolet[6]
+});
+exports.generateBreadcrumbsTokens = generateBreadcrumbsTokens;

package/dist/componentTokens/generateBreadcrumbsTokens.d.ts

@@ -0,0 +1,10 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IBreadcrumbsTokens {
+    /** Default text color for breadcrumb items */
+    color: string;
+    /** Color for the active or last breadcrumb item */
+    primaryColor: string;
+    /** Text color when hovering over a breadcrumb item */
+    hoverColor: string;
+}
+export declare const generateBreadcrumbsTokens: (theme: IQuenUITheme) => IBreadcrumbsTokens;

package/dist/componentTokens/generateBreadcrumbsTokens.es.js

@@ -0,0 +1,8 @@
+const generateBreadcrumbsTokens = (theme) => ({
+  color: theme.components.Breadcrumbs?.color ?? theme.textColor,
+  primaryColor: theme.components.Breadcrumbs?.primaryColor ?? theme.colors[theme.primaryColor][9],
+  hoverColor: theme.components.Breadcrumbs?.hoverColor ?? theme.colors.grayViolet[6]
+});
+export {
+  generateBreadcrumbsTokens
+};

package/dist/componentTokens/generateButtonTokens.cjs.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateButtonTokens = (theme) => ({
+  disabledColor: theme.components.Button?.disabledColor ?? theme.commonColorTokens.disabledColor,
+  disabledBackground: theme.components.Button?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  radius: theme.components.Button?.radius ?? theme.control.radius,
+  color: theme.components.Button?.color ?? "white",
+  secondaryBackground: theme.components.Button?.secondaryBackground ?? theme.commonColorTokens.secondaryBackground,
+  dangerBackground: theme.components.Button?.dangerBackground ?? theme.commonColorTokens.dangerBackground,
+  successBackground: theme.components.Button?.successBackground ?? theme.commonColorTokens.successBackground,
+  warningBackground: theme.components.Button?.warningBackground ?? theme.commonColorTokens.warningBackground,
+  ghostColor: theme.components.Button?.ghostColor ?? theme.textColor
+});
+exports.generateButtonTokens = generateButtonTokens;

package/dist/componentTokens/generateButtonTokens.d.ts

@@ -0,0 +1,22 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IButtonTokens {
+    /** Background color for disabled buttons */
+    disabledBackground: string;
+    /** Text color for disabled buttons */
+    disabledColor: string;
+    /** Border radius for all buttons */
+    radius: string;
+    /** Default text color for button content */
+    color: string;
+    /** Background color for secondary buttons */
+    secondaryBackground: string;
+    /** Background color for danger (error) buttons */
+    dangerBackground: string;
+    /** Background color for success buttons */
+    successBackground: string;
+    /** Background color for warning buttons */
+    warningBackground: string;
+    /** Text color for ghost (transparent) button variant */
+    ghostColor: string;
+}
+export declare const generateButtonTokens: (theme: IQuenUITheme) => IButtonTokens;

package/dist/componentTokens/generateButtonTokens.es.js

@@ -0,0 +1,14 @@
+const generateButtonTokens = (theme) => ({
+  disabledColor: theme.components.Button?.disabledColor ?? theme.commonColorTokens.disabledColor,
+  disabledBackground: theme.components.Button?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  radius: theme.components.Button?.radius ?? theme.control.radius,
+  color: theme.components.Button?.color ?? "white",
+  secondaryBackground: theme.components.Button?.secondaryBackground ?? theme.commonColorTokens.secondaryBackground,
+  dangerBackground: theme.components.Button?.dangerBackground ?? theme.commonColorTokens.dangerBackground,
+  successBackground: theme.components.Button?.successBackground ?? theme.commonColorTokens.successBackground,
+  warningBackground: theme.components.Button?.warningBackground ?? theme.commonColorTokens.warningBackground,
+  ghostColor: theme.components.Button?.ghostColor ?? theme.textColor
+});
+export {
+  generateButtonTokens
+};

package/dist/componentTokens/generateCalendarTokens.cjs.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateCalendarTokens = (theme) => ({
+  radius: theme.components.Calendar?.radius ?? theme.control.radius,
+  activeBackground: theme.components.Calendar?.activeBackground ?? theme.commonColorTokens.primaryBackground,
+  secondaryColor: theme.components.Calendar?.secondaryColor ?? theme.commonColorTokens.secondaryColor,
+  background: theme.components.Calendar?.background ?? theme.colorBody,
+  borderColor: theme.components.Calendar?.borderColor ?? theme.commonColorTokens.borderColor
+});
+exports.generateCalendarTokens = generateCalendarTokens;

package/dist/componentTokens/generateCalendarTokens.d.ts

@@ -0,0 +1,10 @@
+import { IQuenUITheme } from '../theme/types';
+export interface ICalendarTokens {
+    /** Container corner radius */
+    radius: string;
+    activeBackground: string;
+    secondaryColor: string;
+    background: string;
+    borderColor: string;
+}
+export declare const generateCalendarTokens: (theme: IQuenUITheme) => ICalendarTokens;

package/dist/componentTokens/generateCalendarTokens.es.js

@@ -0,0 +1,10 @@
+const generateCalendarTokens = (theme) => ({
+  radius: theme.components.Calendar?.radius ?? theme.control.radius,
+  activeBackground: theme.components.Calendar?.activeBackground ?? theme.commonColorTokens.primaryBackground,
+  secondaryColor: theme.components.Calendar?.secondaryColor ?? theme.commonColorTokens.secondaryColor,
+  background: theme.components.Calendar?.background ?? theme.colorBody,
+  borderColor: theme.components.Calendar?.borderColor ?? theme.commonColorTokens.borderColor
+});
+export {
+  generateCalendarTokens
+};

package/dist/componentTokens/generateCardTokens.cjs.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateCardTokens = (theme) => ({
+  radius: theme.components.Card?.radius ?? theme.control.radius,
+  borderColor: theme.components.Card?.borderColor ?? theme.colors.grayViolet[5]
+});
+exports.generateCardTokens = generateCardTokens;

package/dist/componentTokens/generateCardTokens.d.ts

@@ -0,0 +1,8 @@
+import { IQuenUITheme } from '../theme/types';
+export interface ICardTokens {
+    /** Border radius of the card */
+    radius: string;
+    /** Border color of the card */
+    borderColor: string;
+}
+export declare const generateCardTokens: (theme: IQuenUITheme) => ICardTokens;

package/dist/componentTokens/generateCardTokens.es.js

@@ -0,0 +1,7 @@
+const generateCardTokens = (theme) => ({
+  radius: theme.components.Card?.radius ?? theme.control.radius,
+  borderColor: theme.components.Card?.borderColor ?? theme.colors.grayViolet[5]
+});
+export {
+  generateCardTokens
+};

package/dist/componentTokens/generateCheckboxTokens.cjs.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateCheckboxTokens = (theme) => ({
+  backgroundFilled: theme.components.Checkbox?.backgroundFilled ?? theme.colors[theme.primaryColor][9],
+  disabledBackground: theme.components.Checkbox?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  errorColor: theme.components.Checkbox?.errorColor ?? theme.commonColorTokens.dangerColor,
+  borderErrorColor: theme.components.Checkbox?.borderErrorColor ?? theme.commonColorTokens.dangerBackground,
+  borderDisabledColor: theme.components.Checkbox?.borderDisabledColor ?? theme.colors[theme.primaryColor][3],
+  checkColor: theme.components.Checkbox?.checkColor ?? theme.colors.grayViolet[9],
+  borderColor: theme.components.Checkbox?.borderColor ?? theme.colors.grayViolet[7],
+  disabledCheckColor: theme.components.Checkbox?.disabledCheckColor ?? theme.commonColorTokens.disabledColor,
+  radius: theme.components.Checkbox?.radius ?? theme.control.radius
+});
+exports.generateCheckboxTokens = generateCheckboxTokens;

package/dist/componentTokens/generateCheckboxTokens.d.ts

@@ -0,0 +1,22 @@
+import { IQuenUITheme } from '../theme/types';
+export interface ICheckboxTokens {
+    /** Background color for the filled (checked) checkbox state */
+    backgroundFilled: string;
+    /** Background color for the disabled checkbox state */
+    disabledBackground: string;
+    /** Text and icon color used for error messages or states */
+    errorColor: string;
+    /** Border color applied when the checkbox is in an error state */
+    borderErrorColor: string;
+    /** Border color for the disabled checkbox */
+    borderDisabledColor: string;
+    /** Color of the checkmark icon in the checked state */
+    checkColor: string;
+    /** Default border color of the checkbox */
+    borderColor: string;
+    /** Color of the checkmark when the checkbox is disabled */
+    disabledCheckColor: string;
+    /** Border radius of the checkbox element */
+    radius: string;
+}
+export declare const generateCheckboxTokens: (theme: IQuenUITheme) => ICheckboxTokens;

package/dist/componentTokens/generateCheckboxTokens.es.js

@@ -0,0 +1,14 @@
+const generateCheckboxTokens = (theme) => ({
+  backgroundFilled: theme.components.Checkbox?.backgroundFilled ?? theme.colors[theme.primaryColor][9],
+  disabledBackground: theme.components.Checkbox?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  errorColor: theme.components.Checkbox?.errorColor ?? theme.commonColorTokens.dangerColor,
+  borderErrorColor: theme.components.Checkbox?.borderErrorColor ?? theme.commonColorTokens.dangerBackground,
+  borderDisabledColor: theme.components.Checkbox?.borderDisabledColor ?? theme.colors[theme.primaryColor][3],
+  checkColor: theme.components.Checkbox?.checkColor ?? theme.colors.grayViolet[9],
+  borderColor: theme.components.Checkbox?.borderColor ?? theme.colors.grayViolet[7],
+  disabledCheckColor: theme.components.Checkbox?.disabledCheckColor ?? theme.commonColorTokens.disabledColor,
+  radius: theme.components.Checkbox?.radius ?? theme.control.radius
+});
+export {
+  generateCheckboxTokens
+};

package/dist/componentTokens/generateColorPickerTokens.cjs.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateColorPickerTokens = (theme) => ({
+  radius: theme.components.ColorPicker?.radius ?? theme.control.radius,
+  padding: theme.components.ColorPicker?.padding ?? {
+    l: "1rem",
+    m: "0.75rem",
+    s: "0.625rem",
+    xs: "0.5rem"
+  },
+  borderColor: theme.components.ColorPicker?.borderColor ?? theme.commonColorTokens.borderColor,
+  background: theme.components.ColorPicker?.background ?? theme.colorBody
+});
+exports.generateColorPickerTokens = generateColorPickerTokens;

package/dist/componentTokens/generateColorPickerTokens.d.ts

@@ -0,0 +1,10 @@
+import { IQuenUITheme } from '../theme/types';
+import { IQuenUIThemeSpace } from '../types/space';
+export interface IColorPickerTokens {
+    /** Container corner radius */
+    radius: string;
+    padding: IQuenUIThemeSpace;
+    borderColor: string;
+    background: string;
+}
+export declare const generateColorPickerTokens: (theme: IQuenUITheme) => IColorPickerTokens;

package/dist/componentTokens/generateColorPickerTokens.es.js

@@ -0,0 +1,14 @@
+const generateColorPickerTokens = (theme) => ({
+  radius: theme.components.ColorPicker?.radius ?? theme.control.radius,
+  padding: theme.components.ColorPicker?.padding ?? {
+    l: "1rem",
+    m: "0.75rem",
+    s: "0.625rem",
+    xs: "0.5rem"
+  },
+  borderColor: theme.components.ColorPicker?.borderColor ?? theme.commonColorTokens.borderColor,
+  background: theme.components.ColorPicker?.background ?? theme.colorBody
+});
+export {
+  generateColorPickerTokens
+};

package/dist/componentTokens/generateDividerTokens.cjs.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateDividerTokens = (theme) => ({
+  radius: theme.components.Divider?.radius ?? theme.control.radius,
+  disabledBackground: theme.components.Divider?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  dangerBackground: theme.components.Divider?.dangerBackground ?? theme.commonColorTokens.dangerBackground,
+  successBackground: theme.components.Divider?.successBackground ?? theme.commonColorTokens.successBackground,
+  warningBackground: theme.components.Divider?.warningBackground ?? theme.commonColorTokens.warningBackground,
+  primaryBackground: theme.components.Divider?.primaryBackground ?? theme.commonColorTokens.primaryBackground
+});
+exports.generateDividerTokens = generateDividerTokens;

package/dist/componentTokens/generateDividerTokens.d.ts

@@ -0,0 +1,16 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IDividerTokens {
+    /** The border radius applied to the edges of the divider */
+    radius: string;
+    /**  Background color used when the divider is in a disabled state */
+    disabledBackground: string;
+    /** Background color for dividers indicating an error or danger state */
+    dangerBackground: string;
+    /**  Background color for dividers indicating success or confirmation */
+    successBackground: string;
+    /**  Background color for dividers representing warnings or alerts */
+    warningBackground: string;
+    /** Default background color for the divider in its primary state */
+    primaryBackground: string;
+}
+export declare const generateDividerTokens: (theme: IQuenUITheme) => IDividerTokens;

package/dist/componentTokens/generateDividerTokens.es.js

@@ -0,0 +1,11 @@
+const generateDividerTokens = (theme) => ({
+  radius: theme.components.Divider?.radius ?? theme.control.radius,
+  disabledBackground: theme.components.Divider?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  dangerBackground: theme.components.Divider?.dangerBackground ?? theme.commonColorTokens.dangerBackground,
+  successBackground: theme.components.Divider?.successBackground ?? theme.commonColorTokens.successBackground,
+  warningBackground: theme.components.Divider?.warningBackground ?? theme.commonColorTokens.warningBackground,
+  primaryBackground: theme.components.Divider?.primaryBackground ?? theme.commonColorTokens.primaryBackground
+});
+export {
+  generateDividerTokens
+};

package/dist/componentTokens/generateDrawerTokens.cjs.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateDrawerTokens = (theme) => ({
+  background: theme.components.Drawer?.background ?? theme.colors.grayViolet[2],
+  overlayBackground: theme.components.Drawer?.overlayBackground ?? theme.commonColorTokens.overlayBackground
+});
+exports.generateDrawerTokens = generateDrawerTokens;

package/dist/componentTokens/generateDrawerTokens.d.ts

@@ -0,0 +1,8 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IDrawerTokens {
+    /** Background color of the drawer panel */
+    background: string;
+    /** Background color of the overlay (the semi-transparent layer behind the drawer) */
+    overlayBackground: string;
+}
+export declare const generateDrawerTokens: (theme: IQuenUITheme) => IDrawerTokens;

package/dist/componentTokens/generateDrawerTokens.es.js

@@ -0,0 +1,7 @@
+const generateDrawerTokens = (theme) => ({
+  background: theme.components.Drawer?.background ?? theme.colors.grayViolet[2],
+  overlayBackground: theme.components.Drawer?.overlayBackground ?? theme.commonColorTokens.overlayBackground
+});
+export {
+  generateDrawerTokens
+};

package/dist/componentTokens/generateDropdownTokens.cjs.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateDropdownTokens = (theme) => ({
+  radius: theme.components.Dropdown?.radius ?? theme.control.radius,
+  background: theme.components.Dropdown?.background ?? theme.colors.grayViolet[1],
+  borderColor: theme.components.Dropdown?.borderColor ?? theme.commonColorTokens.borderColor,
+  disabledBackground: theme.components.Dropdown?.disabledBackground ?? theme.commonColorTokens.disabledBackground,
+  disabledColor: theme.components.Dropdown?.disabledColor ?? theme.commonColorTokens.disabledColor,
+  borderLeftColor: theme.components.Dropdown?.borderLeftColor ?? theme.commonColorTokens.primaryBackground,
+  hoverBackground: theme.components.Dropdown?.hoverBackground ?? theme.colors.grayViolet[5]
+});
+exports.generateDropdownTokens = generateDropdownTokens;