@quen-ui/theme 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/componentTokens/generateBannerTokens.cjs.js +35 -0
- package/dist/componentTokens/generateBannerTokens.d.ts +34 -0
- package/dist/componentTokens/generateBannerTokens.es.js +35 -0
- package/dist/componentTokens/generateStepperTokens.cjs.js +28 -0
- package/dist/componentTokens/generateStepperTokens.d.ts +36 -0
- package/dist/componentTokens/generateStepperTokens.es.js +28 -0
- package/dist/componentTokens/index.cjs.js +5 -1
- package/dist/componentTokens/index.d.ts +4 -0
- package/dist/componentTokens/index.es.js +5 -1
- package/package.json +1 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const generateBannerTokens = (theme) => ({
|
|
4
|
+
info: {
|
|
5
|
+
background: theme.components.Banner?.info?.background ?? theme.colors.grayViolet[6],
|
|
6
|
+
borderColor: theme.components.Banner?.info?.borderColor ?? theme.colors.violet[6],
|
|
7
|
+
color: theme.components.Banner?.info?.color ?? theme.colors.violet[9],
|
|
8
|
+
iconColor: theme.components.Banner?.info?.iconColor ?? theme.colors.violet[7]
|
|
9
|
+
},
|
|
10
|
+
success: {
|
|
11
|
+
background: theme.components.Banner?.success?.background ?? theme.colors.green[2],
|
|
12
|
+
borderColor: theme.components.Banner?.success?.borderColor ?? theme.colors.green[6],
|
|
13
|
+
color: theme.components.Banner?.success?.color ?? theme.colors.green[9],
|
|
14
|
+
iconColor: theme.components.Banner?.success?.iconColor ?? theme.colors.green[7]
|
|
15
|
+
},
|
|
16
|
+
warning: {
|
|
17
|
+
background: theme.components.Banner?.warning?.background ?? theme.colors.orange[2],
|
|
18
|
+
borderColor: theme.components.Banner?.warning?.borderColor ?? theme.colors.orange[6],
|
|
19
|
+
color: theme.components.Banner?.warning?.color ?? theme.colors.orange[9],
|
|
20
|
+
iconColor: theme.components.Banner?.warning?.iconColor ?? theme.colors.orange[7]
|
|
21
|
+
},
|
|
22
|
+
danger: {
|
|
23
|
+
background: theme.components.Banner?.danger?.background ?? theme.colors.red[2],
|
|
24
|
+
borderColor: theme.components.Banner?.danger?.borderColor ?? theme.colors.red[6],
|
|
25
|
+
color: theme.components.Banner?.danger?.color ?? theme.colors.red[9],
|
|
26
|
+
iconColor: theme.components.Banner?.danger?.iconColor ?? theme.colors.red[7]
|
|
27
|
+
},
|
|
28
|
+
neutral: {
|
|
29
|
+
background: theme.components.Banner?.neutral?.background ?? theme.colors.grayViolet[1],
|
|
30
|
+
borderColor: theme.components.Banner?.neutral?.borderColor ?? theme.colors.gray[7],
|
|
31
|
+
color: theme.components.Banner?.neutral?.color ?? theme.colors.gray[9],
|
|
32
|
+
iconColor: theme.components.Banner?.neutral?.iconColor ?? theme.colors.violet[7]
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
exports.generateBannerTokens = generateBannerTokens;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { IQuenUITheme } from '../theme/types';
|
|
2
|
+
export interface IBannerTokens {
|
|
3
|
+
info: {
|
|
4
|
+
background: string;
|
|
5
|
+
borderColor: string;
|
|
6
|
+
color: string;
|
|
7
|
+
iconColor: string;
|
|
8
|
+
};
|
|
9
|
+
success: {
|
|
10
|
+
background: string;
|
|
11
|
+
borderColor: string;
|
|
12
|
+
color: string;
|
|
13
|
+
iconColor: string;
|
|
14
|
+
};
|
|
15
|
+
warning: {
|
|
16
|
+
background: string;
|
|
17
|
+
borderColor: string;
|
|
18
|
+
color: string;
|
|
19
|
+
iconColor: string;
|
|
20
|
+
};
|
|
21
|
+
danger: {
|
|
22
|
+
background: string;
|
|
23
|
+
borderColor: string;
|
|
24
|
+
color: string;
|
|
25
|
+
iconColor: string;
|
|
26
|
+
};
|
|
27
|
+
neutral: {
|
|
28
|
+
background: string;
|
|
29
|
+
borderColor: string;
|
|
30
|
+
color: string;
|
|
31
|
+
iconColor: string;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
export declare const generateBannerTokens: (theme: IQuenUITheme) => IBannerTokens;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
const generateBannerTokens = (theme) => ({
|
|
2
|
+
info: {
|
|
3
|
+
background: theme.components.Banner?.info?.background ?? theme.colors.grayViolet[6],
|
|
4
|
+
borderColor: theme.components.Banner?.info?.borderColor ?? theme.colors.violet[6],
|
|
5
|
+
color: theme.components.Banner?.info?.color ?? theme.colors.violet[9],
|
|
6
|
+
iconColor: theme.components.Banner?.info?.iconColor ?? theme.colors.violet[7]
|
|
7
|
+
},
|
|
8
|
+
success: {
|
|
9
|
+
background: theme.components.Banner?.success?.background ?? theme.colors.green[2],
|
|
10
|
+
borderColor: theme.components.Banner?.success?.borderColor ?? theme.colors.green[6],
|
|
11
|
+
color: theme.components.Banner?.success?.color ?? theme.colors.green[9],
|
|
12
|
+
iconColor: theme.components.Banner?.success?.iconColor ?? theme.colors.green[7]
|
|
13
|
+
},
|
|
14
|
+
warning: {
|
|
15
|
+
background: theme.components.Banner?.warning?.background ?? theme.colors.orange[2],
|
|
16
|
+
borderColor: theme.components.Banner?.warning?.borderColor ?? theme.colors.orange[6],
|
|
17
|
+
color: theme.components.Banner?.warning?.color ?? theme.colors.orange[9],
|
|
18
|
+
iconColor: theme.components.Banner?.warning?.iconColor ?? theme.colors.orange[7]
|
|
19
|
+
},
|
|
20
|
+
danger: {
|
|
21
|
+
background: theme.components.Banner?.danger?.background ?? theme.colors.red[2],
|
|
22
|
+
borderColor: theme.components.Banner?.danger?.borderColor ?? theme.colors.red[6],
|
|
23
|
+
color: theme.components.Banner?.danger?.color ?? theme.colors.red[9],
|
|
24
|
+
iconColor: theme.components.Banner?.danger?.iconColor ?? theme.colors.red[7]
|
|
25
|
+
},
|
|
26
|
+
neutral: {
|
|
27
|
+
background: theme.components.Banner?.neutral?.background ?? theme.colors.grayViolet[1],
|
|
28
|
+
borderColor: theme.components.Banner?.neutral?.borderColor ?? theme.colors.gray[7],
|
|
29
|
+
color: theme.components.Banner?.neutral?.color ?? theme.colors.gray[9],
|
|
30
|
+
iconColor: theme.components.Banner?.neutral?.iconColor ?? theme.colors.violet[7]
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
export {
|
|
34
|
+
generateBannerTokens
|
|
35
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const generateStepperTokens = (theme) => ({
|
|
4
|
+
padding: theme.components.Stepper?.padding ?? "24px 0",
|
|
5
|
+
iconSize: theme.components.Stepper?.iconSize ?? "32px",
|
|
6
|
+
iconRadius: theme.components.Stepper?.iconRadius ?? "50%",
|
|
7
|
+
connectorThickness: theme.components.Stepper?.connectorThickness ?? "1px",
|
|
8
|
+
connectorMinWidth: theme.components.Stepper?.connectorMinWidth ?? "50px",
|
|
9
|
+
iconBackground: {
|
|
10
|
+
default: theme.components.Stepper?.iconBackgroundDefault ?? theme.colors.gray[5],
|
|
11
|
+
active: theme.components.Stepper?.iconBackgroundActive ?? theme.colors[theme.primaryColor][9],
|
|
12
|
+
completed: theme.components.Stepper?.iconBackgroundCompleted ?? theme.colors[theme.primaryColor][5],
|
|
13
|
+
error: theme.components.Stepper?.iconBackgroundError ?? theme.colors.red[9],
|
|
14
|
+
hover: theme.components.Stepper?.iconBackgroundHover ?? theme.colors[theme.primaryColor][7]
|
|
15
|
+
},
|
|
16
|
+
iconColor: {
|
|
17
|
+
default: theme.components.Stepper?.iconColorDefault ?? theme.colors.grayViolet[5],
|
|
18
|
+
active: theme.components.Stepper?.iconColorActive ?? "white",
|
|
19
|
+
completed: theme.components.Stepper?.iconColorCompleted ?? "white",
|
|
20
|
+
error: theme.components.Stepper?.iconColorError ?? "white"
|
|
21
|
+
},
|
|
22
|
+
connectorColor: {
|
|
23
|
+
default: theme.components.Stepper?.connectorColorDefault ?? theme.colors.gray[5],
|
|
24
|
+
active: theme.components.Stepper?.connectorColorActive ?? theme.colors[theme.primaryColor][9]
|
|
25
|
+
},
|
|
26
|
+
disabledOpacity: theme.components.Stepper?.disabledOpacity ?? 0.5
|
|
27
|
+
});
|
|
28
|
+
exports.generateStepperTokens = generateStepperTokens;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { IQuenUITheme } from '../theme/types';
|
|
2
|
+
export interface IStepperTokens {
|
|
3
|
+
/** Padding stepper container */
|
|
4
|
+
padding: string;
|
|
5
|
+
/**Step icon size */
|
|
6
|
+
iconSize: string;
|
|
7
|
+
/** Radius icons */
|
|
8
|
+
iconRadius: string;
|
|
9
|
+
/** Connector line thickness */
|
|
10
|
+
connectorThickness: string;
|
|
11
|
+
/** Minimum line width (horizontal mode) */
|
|
12
|
+
connectorMinWidth: string;
|
|
13
|
+
/** Backgrounds icons */
|
|
14
|
+
iconBackground: {
|
|
15
|
+
default: string;
|
|
16
|
+
active: string;
|
|
17
|
+
completed: string;
|
|
18
|
+
error: string;
|
|
19
|
+
hover: string;
|
|
20
|
+
};
|
|
21
|
+
/** Color of text/number inside the icon */
|
|
22
|
+
iconColor: {
|
|
23
|
+
default: string;
|
|
24
|
+
active: string;
|
|
25
|
+
completed: string;
|
|
26
|
+
error: string;
|
|
27
|
+
};
|
|
28
|
+
/** Connector line colors */
|
|
29
|
+
connectorColor: {
|
|
30
|
+
default: string;
|
|
31
|
+
active: string;
|
|
32
|
+
};
|
|
33
|
+
/** State disabled */
|
|
34
|
+
disabledOpacity: string | number;
|
|
35
|
+
}
|
|
36
|
+
export declare const generateStepperTokens: (theme: IQuenUITheme) => IStepperTokens;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const generateStepperTokens = (theme) => ({
|
|
2
|
+
padding: theme.components.Stepper?.padding ?? "24px 0",
|
|
3
|
+
iconSize: theme.components.Stepper?.iconSize ?? "32px",
|
|
4
|
+
iconRadius: theme.components.Stepper?.iconRadius ?? "50%",
|
|
5
|
+
connectorThickness: theme.components.Stepper?.connectorThickness ?? "1px",
|
|
6
|
+
connectorMinWidth: theme.components.Stepper?.connectorMinWidth ?? "50px",
|
|
7
|
+
iconBackground: {
|
|
8
|
+
default: theme.components.Stepper?.iconBackgroundDefault ?? theme.colors.gray[5],
|
|
9
|
+
active: theme.components.Stepper?.iconBackgroundActive ?? theme.colors[theme.primaryColor][9],
|
|
10
|
+
completed: theme.components.Stepper?.iconBackgroundCompleted ?? theme.colors[theme.primaryColor][5],
|
|
11
|
+
error: theme.components.Stepper?.iconBackgroundError ?? theme.colors.red[9],
|
|
12
|
+
hover: theme.components.Stepper?.iconBackgroundHover ?? theme.colors[theme.primaryColor][7]
|
|
13
|
+
},
|
|
14
|
+
iconColor: {
|
|
15
|
+
default: theme.components.Stepper?.iconColorDefault ?? theme.colors.grayViolet[5],
|
|
16
|
+
active: theme.components.Stepper?.iconColorActive ?? "white",
|
|
17
|
+
completed: theme.components.Stepper?.iconColorCompleted ?? "white",
|
|
18
|
+
error: theme.components.Stepper?.iconColorError ?? "white"
|
|
19
|
+
},
|
|
20
|
+
connectorColor: {
|
|
21
|
+
default: theme.components.Stepper?.connectorColorDefault ?? theme.colors.gray[5],
|
|
22
|
+
active: theme.components.Stepper?.connectorColorActive ?? theme.colors[theme.primaryColor][9]
|
|
23
|
+
},
|
|
24
|
+
disabledOpacity: theme.components.Stepper?.disabledOpacity ?? 0.5
|
|
25
|
+
});
|
|
26
|
+
export {
|
|
27
|
+
generateStepperTokens
|
|
28
|
+
};
|
|
@@ -31,6 +31,8 @@ const generateSkeletonTokens = require("./generateSkeletonTokens.cjs.js");
|
|
|
31
31
|
const generateLoadingOverlayTokens = require("./generateLoadingOverlayTokens.cjs.js");
|
|
32
32
|
const generateColorPickerTokens = require("./generateColorPickerTokens.cjs.js");
|
|
33
33
|
const generateRichTextEditorTokens = require("./generateRichTextEditorTokens.cjs.js");
|
|
34
|
+
const generateStepperTokens = require("./generateStepperTokens.cjs.js");
|
|
35
|
+
const generateBannerTokens = require("./generateBannerTokens.cjs.js");
|
|
34
36
|
const generateComponentTokens = (theme) => {
|
|
35
37
|
return {
|
|
36
38
|
Alert: generateAlertTokens.generateAlertTokens(theme),
|
|
@@ -63,7 +65,9 @@ const generateComponentTokens = (theme) => {
|
|
|
63
65
|
Skeleton: generateSkeletonTokens.generateSkeletonTokens(theme),
|
|
64
66
|
LoadingOverlay: generateLoadingOverlayTokens.generateLoadingOverlayTokens(theme),
|
|
65
67
|
ColorPicker: generateColorPickerTokens.generateColorPickerTokens(theme),
|
|
66
|
-
RichTextEditor: generateRichTextEditorTokens.generateRichTextEditorTokens(theme)
|
|
68
|
+
RichTextEditor: generateRichTextEditorTokens.generateRichTextEditorTokens(theme),
|
|
69
|
+
Stepper: generateStepperTokens.generateStepperTokens(theme),
|
|
70
|
+
Banner: generateBannerTokens.generateBannerTokens(theme)
|
|
67
71
|
};
|
|
68
72
|
};
|
|
69
73
|
exports.generateComponentTokens = generateComponentTokens;
|
|
@@ -30,6 +30,8 @@ import { ISkeletonTokens } from './generateSkeletonTokens';
|
|
|
30
30
|
import { ILoadingOverlayTokens } from './generateLoadingOverlayTokens';
|
|
31
31
|
import { IColorPickerTokens } from './generateColorPickerTokens';
|
|
32
32
|
import { IRichTextEditorTokens } from './generateRichTextEditorTokens';
|
|
33
|
+
import { IStepperTokens } from './generateStepperTokens';
|
|
34
|
+
import { IBannerTokens } from './generateBannerTokens';
|
|
33
35
|
export interface IQuenUIComponents {
|
|
34
36
|
Accordion: IAccordionTokens;
|
|
35
37
|
Alert: IAlertTokens;
|
|
@@ -62,5 +64,7 @@ export interface IQuenUIComponents {
|
|
|
62
64
|
LoadingOverlay: ILoadingOverlayTokens;
|
|
63
65
|
ColorPicker: IColorPickerTokens;
|
|
64
66
|
RichTextEditor: IRichTextEditorTokens;
|
|
67
|
+
Stepper: IStepperTokens;
|
|
68
|
+
Banner: IBannerTokens;
|
|
65
69
|
}
|
|
66
70
|
export declare const generateComponentTokens: (theme: IQuenUITheme) => IQuenUIComponents;
|
|
@@ -29,6 +29,8 @@ import { generateSkeletonTokens } from "./generateSkeletonTokens.es.js";
|
|
|
29
29
|
import { generateLoadingOverlayTokens } from "./generateLoadingOverlayTokens.es.js";
|
|
30
30
|
import { generateColorPickerTokens } from "./generateColorPickerTokens.es.js";
|
|
31
31
|
import { generateRichTextEditorTokens } from "./generateRichTextEditorTokens.es.js";
|
|
32
|
+
import { generateStepperTokens } from "./generateStepperTokens.es.js";
|
|
33
|
+
import { generateBannerTokens } from "./generateBannerTokens.es.js";
|
|
32
34
|
const generateComponentTokens = (theme) => {
|
|
33
35
|
return {
|
|
34
36
|
Alert: generateAlertTokens(theme),
|
|
@@ -61,7 +63,9 @@ const generateComponentTokens = (theme) => {
|
|
|
61
63
|
Skeleton: generateSkeletonTokens(theme),
|
|
62
64
|
LoadingOverlay: generateLoadingOverlayTokens(theme),
|
|
63
65
|
ColorPicker: generateColorPickerTokens(theme),
|
|
64
|
-
RichTextEditor: generateRichTextEditorTokens(theme)
|
|
66
|
+
RichTextEditor: generateRichTextEditorTokens(theme),
|
|
67
|
+
Stepper: generateStepperTokens(theme),
|
|
68
|
+
Banner: generateBannerTokens(theme)
|
|
65
69
|
};
|
|
66
70
|
};
|
|
67
71
|
export {
|
package/package.json
CHANGED