@quen-ui/theme 1.0.1 → 1.2.0

package/dist/componentTokens/generateBannerTokens.cjs.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateBannerTokens = (theme) => ({
+  info: {
+    background: theme.components.Banner?.info?.background ?? theme.colors.grayViolet[6],
+    borderColor: theme.components.Banner?.info?.borderColor ?? theme.colors.violet[6],
+    color: theme.components.Banner?.info?.color ?? theme.colors.violet[9],
+    iconColor: theme.components.Banner?.info?.iconColor ?? theme.colors.violet[7]
+  },
+  success: {
+    background: theme.components.Banner?.success?.background ?? theme.colors.green[2],
+    borderColor: theme.components.Banner?.success?.borderColor ?? theme.colors.green[6],
+    color: theme.components.Banner?.success?.color ?? theme.colors.green[9],
+    iconColor: theme.components.Banner?.success?.iconColor ?? theme.colors.green[7]
+  },
+  warning: {
+    background: theme.components.Banner?.warning?.background ?? theme.colors.orange[2],
+    borderColor: theme.components.Banner?.warning?.borderColor ?? theme.colors.orange[6],
+    color: theme.components.Banner?.warning?.color ?? theme.colors.orange[9],
+    iconColor: theme.components.Banner?.warning?.iconColor ?? theme.colors.orange[7]
+  },
+  danger: {
+    background: theme.components.Banner?.danger?.background ?? theme.colors.red[2],
+    borderColor: theme.components.Banner?.danger?.borderColor ?? theme.colors.red[6],
+    color: theme.components.Banner?.danger?.color ?? theme.colors.red[9],
+    iconColor: theme.components.Banner?.danger?.iconColor ?? theme.colors.red[7]
+  },
+  neutral: {
+    background: theme.components.Banner?.neutral?.background ?? theme.colors.grayViolet[1],
+    borderColor: theme.components.Banner?.neutral?.borderColor ?? theme.colors.gray[7],
+    color: theme.components.Banner?.neutral?.color ?? theme.colors.gray[9],
+    iconColor: theme.components.Banner?.neutral?.iconColor ?? theme.colors.violet[7]
+  }
+});
+exports.generateBannerTokens = generateBannerTokens;

package/dist/componentTokens/generateBannerTokens.d.ts

@@ -0,0 +1,34 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IBannerTokens {
+    info: {
+        background: string;
+        borderColor: string;
+        color: string;
+        iconColor: string;
+    };
+    success: {
+        background: string;
+        borderColor: string;
+        color: string;
+        iconColor: string;
+    };
+    warning: {
+        background: string;
+        borderColor: string;
+        color: string;
+        iconColor: string;
+    };
+    danger: {
+        background: string;
+        borderColor: string;
+        color: string;
+        iconColor: string;
+    };
+    neutral: {
+        background: string;
+        borderColor: string;
+        color: string;
+        iconColor: string;
+    };
+}
+export declare const generateBannerTokens: (theme: IQuenUITheme) => IBannerTokens;

package/dist/componentTokens/generateBannerTokens.es.js

@@ -0,0 +1,35 @@
+const generateBannerTokens = (theme) => ({
+  info: {
+    background: theme.components.Banner?.info?.background ?? theme.colors.grayViolet[6],
+    borderColor: theme.components.Banner?.info?.borderColor ?? theme.colors.violet[6],
+    color: theme.components.Banner?.info?.color ?? theme.colors.violet[9],
+    iconColor: theme.components.Banner?.info?.iconColor ?? theme.colors.violet[7]
+  },
+  success: {
+    background: theme.components.Banner?.success?.background ?? theme.colors.green[2],
+    borderColor: theme.components.Banner?.success?.borderColor ?? theme.colors.green[6],
+    color: theme.components.Banner?.success?.color ?? theme.colors.green[9],
+    iconColor: theme.components.Banner?.success?.iconColor ?? theme.colors.green[7]
+  },
+  warning: {
+    background: theme.components.Banner?.warning?.background ?? theme.colors.orange[2],
+    borderColor: theme.components.Banner?.warning?.borderColor ?? theme.colors.orange[6],
+    color: theme.components.Banner?.warning?.color ?? theme.colors.orange[9],
+    iconColor: theme.components.Banner?.warning?.iconColor ?? theme.colors.orange[7]
+  },
+  danger: {
+    background: theme.components.Banner?.danger?.background ?? theme.colors.red[2],
+    borderColor: theme.components.Banner?.danger?.borderColor ?? theme.colors.red[6],
+    color: theme.components.Banner?.danger?.color ?? theme.colors.red[9],
+    iconColor: theme.components.Banner?.danger?.iconColor ?? theme.colors.red[7]
+  },
+  neutral: {
+    background: theme.components.Banner?.neutral?.background ?? theme.colors.grayViolet[1],
+    borderColor: theme.components.Banner?.neutral?.borderColor ?? theme.colors.gray[7],
+    color: theme.components.Banner?.neutral?.color ?? theme.colors.gray[9],
+    iconColor: theme.components.Banner?.neutral?.iconColor ?? theme.colors.violet[7]
+  }
+});
+export {
+  generateBannerTokens
+};

package/dist/componentTokens/generateCardTokens.cjs.js

@@ -2,6 +2,7 @@
 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]
+  borderColor: theme.components.Card?.borderColor ?? theme.colors.grayViolet[5],
+  shadow: theme.components.Card?.shadow ?? `0 2px 4px ${theme.colors.grayViolet[5]}`
 });
 exports.generateCardTokens = generateCardTokens;

package/dist/componentTokens/generateCardTokens.d.ts

@@ -4,5 +4,7 @@ export interface ICardTokens {
     radius: string;
     /** Border color of the card */
     borderColor: string;
+    /** Shadow of the card */
+    shadow: string;
 }
 export declare const generateCardTokens: (theme: IQuenUITheme) => ICardTokens;

package/dist/componentTokens/generateCardTokens.es.js

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

package/dist/componentTokens/generateStepperTokens.cjs.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const generateStepperTokens = (theme) => ({
+  padding: theme.components.Stepper?.padding ?? "24px 0",
+  iconSize: theme.components.Stepper?.iconSize ?? "32px",
+  iconRadius: theme.components.Stepper?.iconRadius ?? "50%",
+  connectorThickness: theme.components.Stepper?.connectorThickness ?? "1px",
+  connectorMinWidth: theme.components.Stepper?.connectorMinWidth ?? "50px",
+  iconBackground: {
+    default: theme.components.Stepper?.iconBackgroundDefault ?? theme.colors.gray[5],
+    active: theme.components.Stepper?.iconBackgroundActive ?? theme.colors[theme.primaryColor][9],
+    completed: theme.components.Stepper?.iconBackgroundCompleted ?? theme.colors[theme.primaryColor][5],
+    error: theme.components.Stepper?.iconBackgroundError ?? theme.colors.red[9],
+    hover: theme.components.Stepper?.iconBackgroundHover ?? theme.colors[theme.primaryColor][7]
+  },
+  iconColor: {
+    default: theme.components.Stepper?.iconColorDefault ?? theme.colors.grayViolet[5],
+    active: theme.components.Stepper?.iconColorActive ?? "white",
+    completed: theme.components.Stepper?.iconColorCompleted ?? "white",
+    error: theme.components.Stepper?.iconColorError ?? "white"
+  },
+  connectorColor: {
+    default: theme.components.Stepper?.connectorColorDefault ?? theme.colors.gray[5],
+    active: theme.components.Stepper?.connectorColorActive ?? theme.colors[theme.primaryColor][9]
+  },
+  disabledOpacity: theme.components.Stepper?.disabledOpacity ?? 0.5
+});
+exports.generateStepperTokens = generateStepperTokens;

package/dist/componentTokens/generateStepperTokens.d.ts

@@ -0,0 +1,36 @@
+import { IQuenUITheme } from '../theme/types';
+export interface IStepperTokens {
+    /** Padding stepper container */
+    padding: string;
+    /**Step icon size */
+    iconSize: string;
+    /** Radius icons */
+    iconRadius: string;
+    /** Connector line thickness */
+    connectorThickness: string;
+    /** Minimum line width (horizontal mode) */
+    connectorMinWidth: string;
+    /** Backgrounds icons */
+    iconBackground: {
+        default: string;
+        active: string;
+        completed: string;
+        error: string;
+        hover: string;
+    };
+    /** Color of text/number inside the icon */
+    iconColor: {
+        default: string;
+        active: string;
+        completed: string;
+        error: string;
+    };
+    /** Connector line colors */
+    connectorColor: {
+        default: string;
+        active: string;
+    };
+    /** State disabled */
+    disabledOpacity: string | number;
+}
+export declare const generateStepperTokens: (theme: IQuenUITheme) => IStepperTokens;

package/dist/componentTokens/generateStepperTokens.es.js

@@ -0,0 +1,28 @@
+const generateStepperTokens = (theme) => ({
+  padding: theme.components.Stepper?.padding ?? "24px 0",
+  iconSize: theme.components.Stepper?.iconSize ?? "32px",
+  iconRadius: theme.components.Stepper?.iconRadius ?? "50%",
+  connectorThickness: theme.components.Stepper?.connectorThickness ?? "1px",
+  connectorMinWidth: theme.components.Stepper?.connectorMinWidth ?? "50px",
+  iconBackground: {
+    default: theme.components.Stepper?.iconBackgroundDefault ?? theme.colors.gray[5],
+    active: theme.components.Stepper?.iconBackgroundActive ?? theme.colors[theme.primaryColor][9],
+    completed: theme.components.Stepper?.iconBackgroundCompleted ?? theme.colors[theme.primaryColor][5],
+    error: theme.components.Stepper?.iconBackgroundError ?? theme.colors.red[9],
+    hover: theme.components.Stepper?.iconBackgroundHover ?? theme.colors[theme.primaryColor][7]
+  },
+  iconColor: {
+    default: theme.components.Stepper?.iconColorDefault ?? theme.colors.grayViolet[5],
+    active: theme.components.Stepper?.iconColorActive ?? "white",
+    completed: theme.components.Stepper?.iconColorCompleted ?? "white",
+    error: theme.components.Stepper?.iconColorError ?? "white"
+  },
+  connectorColor: {
+    default: theme.components.Stepper?.connectorColorDefault ?? theme.colors.gray[5],
+    active: theme.components.Stepper?.connectorColorActive ?? theme.colors[theme.primaryColor][9]
+  },
+  disabledOpacity: theme.components.Stepper?.disabledOpacity ?? 0.5
+});
+export {
+  generateStepperTokens
+};

package/dist/componentTokens/index.cjs.js

@@ -31,6 +31,8 @@ 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 generateStepperTokens = require("./generateStepperTokens.cjs.js");
+const generateBannerTokens = require("./generateBannerTokens.cjs.js");
 const generateComponentTokens = (theme) => {
   return {
     Alert: generateAlertTokens.generateAlertTokens(theme),
@@ -63,7 +65,9 @@ const generateComponentTokens = (theme) => {
     Skeleton: generateSkeletonTokens.generateSkeletonTokens(theme),
     LoadingOverlay: generateLoadingOverlayTokens.generateLoadingOverlayTokens(theme),
     ColorPicker: generateColorPickerTokens.generateColorPickerTokens(theme),
-    RichTextEditor: generateRichTextEditorTokens.generateRichTextEditorTokens(theme)
+    RichTextEditor: generateRichTextEditorTokens.generateRichTextEditorTokens(theme),
+    Stepper: generateStepperTokens.generateStepperTokens(theme),
+    Banner: generateBannerTokens.generateBannerTokens(theme)
   };
 };
 exports.generateComponentTokens = generateComponentTokens;

package/dist/componentTokens/index.d.ts

@@ -30,6 +30,8 @@ import { ISkeletonTokens } from './generateSkeletonTokens';
 import { ILoadingOverlayTokens } from './generateLoadingOverlayTokens';
 import { IColorPickerTokens } from './generateColorPickerTokens';
 import { IRichTextEditorTokens } from './generateRichTextEditorTokens';
+import { IStepperTokens } from './generateStepperTokens';
+import { IBannerTokens } from './generateBannerTokens';
 export interface IQuenUIComponents {
     Accordion: IAccordionTokens;
     Alert: IAlertTokens;
@@ -62,5 +64,7 @@ export interface IQuenUIComponents {
     LoadingOverlay: ILoadingOverlayTokens;
     ColorPicker: IColorPickerTokens;
     RichTextEditor: IRichTextEditorTokens;
+    Stepper: IStepperTokens;
+    Banner: IBannerTokens;
 }
 export declare const generateComponentTokens: (theme: IQuenUITheme) => IQuenUIComponents;

package/dist/componentTokens/index.es.js

@@ -29,6 +29,8 @@ import { generateSkeletonTokens } from "./generateSkeletonTokens.es.js";
 import { generateLoadingOverlayTokens } from "./generateLoadingOverlayTokens.es.js";
 import { generateColorPickerTokens } from "./generateColorPickerTokens.es.js";
 import { generateRichTextEditorTokens } from "./generateRichTextEditorTokens.es.js";
+import { generateStepperTokens } from "./generateStepperTokens.es.js";
+import { generateBannerTokens } from "./generateBannerTokens.es.js";
 const generateComponentTokens = (theme) => {
   return {
     Alert: generateAlertTokens(theme),
@@ -61,7 +63,9 @@ const generateComponentTokens = (theme) => {
     Skeleton: generateSkeletonTokens(theme),
     LoadingOverlay: generateLoadingOverlayTokens(theme),
     ColorPicker: generateColorPickerTokens(theme),
-    RichTextEditor: generateRichTextEditorTokens(theme)
+    RichTextEditor: generateRichTextEditorTokens(theme),
+    Stepper: generateStepperTokens(theme),
+    Banner: generateBannerTokens(theme)
   };
 };
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quen-ui/theme",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.2.0",
   "type": "module",
   "homepage": "https://quen-ui.github.io/quen-ui/",
   "description": "Provides a consistent visual style for components from `@quen-ui/components`.",