@wavv/ui 2.2.2 → 2.2.3
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/build/assets/icons/PersonSupport.d.ts +3 -0
- package/build/assets/icons/PersonSupport.js +39 -0
- package/build/components/Icon/customIcons.d.ts +1 -0
- package/build/components/Icon/customIcons.js +2 -0
- package/build/components/Icon/icons.d.ts +1 -1
- package/build/components/Icon/icons.js +1 -1
- package/build/components/ToggleButton/ToggleButton.js +8 -8
- package/build/tailwind/theme.css +8 -0
- package/build/theme/ThemeTypes.d.ts +29 -0
- package/build/theme/common/common.d.ts +8 -0
- package/build/theme/core/colors.d.ts +25 -2
- package/build/theme/core/colors.js +8 -0
- package/build/theme/core/dark/dark.js +108 -3
- package/build/theme/core/light/light.js +105 -0
- package/build/theme/eighties/colors.d.ts +8 -0
- package/build/theme/eighties/colors.js +8 -0
- package/build/theme/eighties/dark/dark.js +108 -3
- package/build/theme/eighties/light/light.js +105 -0
- package/package.json +1 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
const PersonSupport = (props)=>/*#__PURE__*/ jsxs("svg", {
|
|
3
|
+
viewBox: "0 0 24 24",
|
|
4
|
+
fill: "none",
|
|
5
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
6
|
+
...props,
|
|
7
|
+
children: [
|
|
8
|
+
/*#__PURE__*/ jsx("path", {
|
|
9
|
+
d: "M20 22.5001C20 20.7433 19.4221 19.0461 18.3717 17.6626",
|
|
10
|
+
stroke: "currentColor",
|
|
11
|
+
strokeWidth: 1.5,
|
|
12
|
+
strokeLinecap: "round",
|
|
13
|
+
strokeLinejoin: "round"
|
|
14
|
+
}),
|
|
15
|
+
/*#__PURE__*/ jsx("path", {
|
|
16
|
+
d: "M16.584 7.49998C15.8124 5.73409 14.0503 4.5 12 4.5C10.0209 4.5 8.31036 5.64984 7.5 7.31792",
|
|
17
|
+
stroke: "currentColor",
|
|
18
|
+
strokeWidth: 1.5,
|
|
19
|
+
strokeLinecap: "round",
|
|
20
|
+
strokeLinejoin: "round"
|
|
21
|
+
}),
|
|
22
|
+
/*#__PURE__*/ jsx("path", {
|
|
23
|
+
d: "M4 22.4999C4 20.3781 4.84286 18.3433 6.34315 16.843C7.84344 15.3428 9.87827 14.4999 12 14.4999M12 14.4999C13.576 14.4999 14.9818 13.7707 15.8982 12.6313M12 14.4999C10.6013 14.4999 9.33675 13.9256 8.42928 12.9999",
|
|
24
|
+
stroke: "currentColor",
|
|
25
|
+
strokeWidth: 1.5,
|
|
26
|
+
strokeLinecap: "round",
|
|
27
|
+
strokeLinejoin: "round"
|
|
28
|
+
}),
|
|
29
|
+
/*#__PURE__*/ jsx("path", {
|
|
30
|
+
d: "M5 7.79996H7.33333C7.74589 7.79996 8.14155 7.94746 8.43328 8.21C8.725 8.47255 8.88889 8.82865 8.88889 9.19995V11.2999C8.88889 11.6712 8.725 12.0273 8.43328 12.2899C8.14155 12.5524 7.74589 12.6999 7.33333 12.6999H6.55556C6.143 12.6999 5.74733 12.5524 5.45561 12.2899C5.16389 12.0273 5 11.6712 5 11.2999V7.79996ZM5 7.79996C5 6.97263 5.18106 6.15341 5.53284 5.38907C5.88463 4.62472 6.40024 3.93022 7.05025 3.34521C7.70026 2.76021 8.47194 2.29616 9.32122 1.97956C10.1705 1.66295 11.0807 1.5 12 1.5C12.9193 1.5 13.8295 1.66295 14.6788 1.97956C15.5281 2.29616 16.2997 2.76021 16.9497 3.34521C17.5998 3.93022 18.1154 4.62472 18.4672 5.38907C18.8189 6.15341 19 6.97263 19 7.79996M19 7.79996V11.2999M19 7.79996H16.6667C16.2541 7.79996 15.8584 7.94746 15.5667 8.21C15.275 8.47255 15.1111 8.82865 15.1111 9.19995V11.2999C15.1111 11.6712 15.275 12.0273 15.5667 12.2899C15.8584 12.5524 16.2541 12.6999 16.6667 12.6999H17.4444C17.857 12.6999 18.2527 12.5524 18.5444 12.2899C18.8361 12.0273 19 11.6712 19 11.2999M19 11.2999V12.6999C19 13.4425 18.5383 14.6547 17.9548 15.1798C17.3714 15.7049 16.3251 16.4999 15.5 16.4999H14.2451",
|
|
31
|
+
stroke: "currentColor",
|
|
32
|
+
strokeWidth: 1.5,
|
|
33
|
+
strokeLinecap: "round",
|
|
34
|
+
strokeLinejoin: "round"
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
});
|
|
38
|
+
const icons_PersonSupport = PersonSupport;
|
|
39
|
+
export { icons_PersonSupport as default };
|
|
@@ -8,6 +8,7 @@ declare const customIcons: {
|
|
|
8
8
|
'caret-up': typeof CaretUp;
|
|
9
9
|
dialpad: typeof Dialpad;
|
|
10
10
|
exclamation: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
'person-support': (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
phone: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
'phone-add': (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
'phone-blocked': (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,6 +2,7 @@ import CaretDown from "../../assets/icons/CaretDown.js";
|
|
|
2
2
|
import CaretUp from "../../assets/icons/CaretUp.js";
|
|
3
3
|
import Dialpad from "../../assets/icons/Dialpad.js";
|
|
4
4
|
import Exclamation from "../../assets/icons/Exclamation.js";
|
|
5
|
+
import PersonSupport from "../../assets/icons/PersonSupport.js";
|
|
5
6
|
import Phone from "../../assets/icons/Phone.js";
|
|
6
7
|
import PhoneAdd from "../../assets/icons/PhoneAdd.js";
|
|
7
8
|
import PhoneBlocked from "../../assets/icons/PhoneBlocked.js";
|
|
@@ -25,6 +26,7 @@ const customIcons_customIcons = {
|
|
|
25
26
|
'caret-up': CaretUp,
|
|
26
27
|
dialpad: Dialpad,
|
|
27
28
|
exclamation: Exclamation,
|
|
29
|
+
'person-support': PersonSupport,
|
|
28
30
|
phone: Phone,
|
|
29
31
|
'phone-add': PhoneAdd,
|
|
30
32
|
'phone-blocked': PhoneBlocked,
|
|
@@ -2,7 +2,6 @@ declare const icons: {
|
|
|
2
2
|
readonly 'activity-history': "id-card";
|
|
3
3
|
readonly add: "plus";
|
|
4
4
|
readonly 'add-circle': "circle-plus";
|
|
5
|
-
readonly 'add-person': "user-round-plus";
|
|
6
5
|
readonly 'arrow-down': "arrow-down";
|
|
7
6
|
readonly 'arrow-left': "arrow-left";
|
|
8
7
|
readonly 'arrow-right': "arrow-right";
|
|
@@ -101,6 +100,7 @@ declare const icons: {
|
|
|
101
100
|
readonly pause: "pause";
|
|
102
101
|
readonly 'pause-circle': "circle-pause";
|
|
103
102
|
readonly person: "user-round";
|
|
103
|
+
readonly 'person-add': "user-round-plus";
|
|
104
104
|
readonly play: "play";
|
|
105
105
|
readonly 'play-circle': "circle-play";
|
|
106
106
|
readonly priority: "arrow-up-wide-narrow";
|
|
@@ -2,7 +2,6 @@ const icons = {
|
|
|
2
2
|
'activity-history': 'id-card',
|
|
3
3
|
add: 'plus',
|
|
4
4
|
'add-circle': 'circle-plus',
|
|
5
|
-
'add-person': 'user-round-plus',
|
|
6
5
|
'arrow-down': 'arrow-down',
|
|
7
6
|
'arrow-left': 'arrow-left',
|
|
8
7
|
'arrow-right': 'arrow-right',
|
|
@@ -101,6 +100,7 @@ const icons = {
|
|
|
101
100
|
pause: 'pause',
|
|
102
101
|
'pause-circle': 'circle-pause',
|
|
103
102
|
person: 'user-round',
|
|
103
|
+
'person-add': 'user-round-plus',
|
|
104
104
|
play: 'play',
|
|
105
105
|
'play-circle': 'circle-play',
|
|
106
106
|
priority: 'arrow-up-wide-narrow',
|
|
@@ -43,15 +43,15 @@ const Button = styled(ToggleButton)(({ theme, secondary, negative, positive, cau
|
|
|
43
43
|
if (positive) buttonType = 'positive';
|
|
44
44
|
if (caution) buttonType = 'caution';
|
|
45
45
|
if (isDisabled) buttonType = 'disabled';
|
|
46
|
-
const sizeStyle = theme.
|
|
47
|
-
const style = theme.
|
|
48
|
-
const background = style.
|
|
49
|
-
const backgroundHover = style.
|
|
50
|
-
const backgroundActive = style.
|
|
46
|
+
const sizeStyle = theme.toggleButton[size || 'small'];
|
|
47
|
+
const style = theme.toggleButton[buttonType];
|
|
48
|
+
const background = style.background.default;
|
|
49
|
+
const backgroundHover = style.background.hover;
|
|
50
|
+
const backgroundActive = style.background.active;
|
|
51
51
|
const borderColor = style.border.default;
|
|
52
|
-
const color = style.
|
|
53
|
-
const colorHover = style.
|
|
54
|
-
const colorActive = style.
|
|
52
|
+
const color = style.color.default;
|
|
53
|
+
const colorHover = style.color.hover;
|
|
54
|
+
const colorActive = style.color.active;
|
|
55
55
|
const buttonHeight = height || sizeStyle.height;
|
|
56
56
|
return {
|
|
57
57
|
display: 'inline-flex',
|
package/build/tailwind/theme.css
CHANGED
|
@@ -24,24 +24,32 @@
|
|
|
24
24
|
--color-errorTint0: rgba(255,96,104,0.05);
|
|
25
25
|
--color-errorTint1: rgba(255,96,104,0.1);
|
|
26
26
|
--color-errorTint2: rgba(255,96,104,0.2);
|
|
27
|
+
--color-errorTint3: rgba(255,96,104,0.3);
|
|
28
|
+
--color-errorTint4: rgba(255,96,104,0.4);
|
|
27
29
|
--color-warning: #FF9900;
|
|
28
30
|
--color-warningShade1: #E68A00;
|
|
29
31
|
--color-warningShade2: #CC7A00;
|
|
30
32
|
--color-warningTint0: rgba(255,153,0,0.05);
|
|
31
33
|
--color-warningTint1: rgba(255,153,0,0.1);
|
|
32
34
|
--color-warningTint2: rgba(255,153,0,0.2);
|
|
35
|
+
--color-warningTint3: rgba(255,153,0,0.3);
|
|
36
|
+
--color-warningTint4: rgba(255,153,0,0.4);
|
|
33
37
|
--color-alert: #F0BB00;
|
|
34
38
|
--color-alertShade1: #E4B200;
|
|
35
39
|
--color-alertShade2: #C09600;
|
|
36
40
|
--color-alertTint0: rgba(240,187,0,0.05);
|
|
37
41
|
--color-alertTint1: rgba(240,187,0,0.1);
|
|
38
42
|
--color-alertTint2: rgba(240,187,0,0.2);
|
|
43
|
+
--color-alertTint3: rgba(240,187,0,0.3);
|
|
44
|
+
--color-alertTint4: rgba(240,187,0,0.4);
|
|
39
45
|
--color-success: #00C242;
|
|
40
46
|
--color-successShade1: #00AF3B;
|
|
41
47
|
--color-successShade2: #009B35;
|
|
42
48
|
--color-successTint0: rgba(0,194,66,0.05);
|
|
43
49
|
--color-successTint1: rgba(0,194,66,0.1);
|
|
44
50
|
--color-successTint2: rgba(0,194,66,0.2);
|
|
51
|
+
--color-successTint3: rgba(0,194,66,0.3);
|
|
52
|
+
--color-successTint4: rgba(0,194,66,0.4);
|
|
45
53
|
--color-grayscale0: rgba(0,29,50,0.05);
|
|
46
54
|
--color-grayscale1: rgba(0,29,50,0.1);
|
|
47
55
|
--color-grayscale2: rgba(0,29,50,0.2);
|
|
@@ -56,6 +56,23 @@ export type ButtonState = {
|
|
|
56
56
|
};
|
|
57
57
|
divider: string;
|
|
58
58
|
};
|
|
59
|
+
export type ToggleButtonState = {
|
|
60
|
+
color: {
|
|
61
|
+
default: string;
|
|
62
|
+
hover: string;
|
|
63
|
+
active: string;
|
|
64
|
+
};
|
|
65
|
+
background: {
|
|
66
|
+
default: string;
|
|
67
|
+
hover: string;
|
|
68
|
+
active: string;
|
|
69
|
+
};
|
|
70
|
+
border: {
|
|
71
|
+
default: string;
|
|
72
|
+
hover: string;
|
|
73
|
+
active: string;
|
|
74
|
+
};
|
|
75
|
+
};
|
|
59
76
|
export interface ITheme {
|
|
60
77
|
name: 'light' | 'dark';
|
|
61
78
|
accent: string;
|
|
@@ -105,6 +122,18 @@ export interface ITheme {
|
|
|
105
122
|
default: string;
|
|
106
123
|
};
|
|
107
124
|
};
|
|
125
|
+
toggleButton: {
|
|
126
|
+
tiny: ButtonSize;
|
|
127
|
+
small: ButtonSize;
|
|
128
|
+
medium: ButtonSize;
|
|
129
|
+
large: ButtonSize;
|
|
130
|
+
primary: ToggleButtonState;
|
|
131
|
+
secondary: ToggleButtonState;
|
|
132
|
+
negative: ToggleButtonState;
|
|
133
|
+
positive: ToggleButtonState;
|
|
134
|
+
caution: ToggleButtonState;
|
|
135
|
+
disabled: ToggleButtonState;
|
|
136
|
+
};
|
|
108
137
|
calendar: {
|
|
109
138
|
background: {
|
|
110
139
|
container: string;
|
|
@@ -25,24 +25,32 @@ declare const _default: {
|
|
|
25
25
|
errorTint0: string;
|
|
26
26
|
errorTint1: string;
|
|
27
27
|
errorTint2: string;
|
|
28
|
+
errorTint3: string;
|
|
29
|
+
errorTint4: string;
|
|
28
30
|
warning: string;
|
|
29
31
|
warningShade1: string;
|
|
30
32
|
warningShade2: string;
|
|
31
33
|
warningTint0: string;
|
|
32
34
|
warningTint1: string;
|
|
33
35
|
warningTint2: string;
|
|
36
|
+
warningTint3: string;
|
|
37
|
+
warningTint4: string;
|
|
34
38
|
alert: string;
|
|
35
39
|
alertShade1: string;
|
|
36
40
|
alertShade2: string;
|
|
37
41
|
alertTint0: string;
|
|
38
42
|
alertTint1: string;
|
|
39
43
|
alertTint2: string;
|
|
44
|
+
alertTint3: string;
|
|
45
|
+
alertTint4: string;
|
|
40
46
|
success: string;
|
|
41
47
|
successShade1: string;
|
|
42
48
|
successShade2: string;
|
|
43
49
|
successTint0: string;
|
|
44
50
|
successTint1: string;
|
|
45
51
|
successTint2: string;
|
|
52
|
+
successTint3: string;
|
|
53
|
+
successTint4: string;
|
|
46
54
|
grayscale0: string;
|
|
47
55
|
grayscale1: string;
|
|
48
56
|
grayscale2: string;
|
|
@@ -24,24 +24,32 @@ declare const colors: {
|
|
|
24
24
|
errorTint0: string;
|
|
25
25
|
errorTint1: string;
|
|
26
26
|
errorTint2: string;
|
|
27
|
+
errorTint3: string;
|
|
28
|
+
errorTint4: string;
|
|
27
29
|
warning: string;
|
|
28
30
|
warningShade1: string;
|
|
29
31
|
warningShade2: string;
|
|
30
32
|
warningTint0: string;
|
|
31
33
|
warningTint1: string;
|
|
32
34
|
warningTint2: string;
|
|
35
|
+
warningTint3: string;
|
|
36
|
+
warningTint4: string;
|
|
33
37
|
alert: string;
|
|
34
38
|
alertShade1: string;
|
|
35
39
|
alertShade2: string;
|
|
36
40
|
alertTint0: string;
|
|
37
41
|
alertTint1: string;
|
|
38
42
|
alertTint2: string;
|
|
43
|
+
alertTint3: string;
|
|
44
|
+
alertTint4: string;
|
|
39
45
|
success: string;
|
|
40
46
|
successShade1: string;
|
|
41
47
|
successShade2: string;
|
|
42
48
|
successTint0: string;
|
|
43
49
|
successTint1: string;
|
|
44
50
|
successTint2: string;
|
|
51
|
+
successTint3: string;
|
|
52
|
+
successTint4: string;
|
|
45
53
|
grayscale0: string;
|
|
46
54
|
grayscale1: string;
|
|
47
55
|
grayscale2: string;
|
|
@@ -117,6 +125,10 @@ export interface IColors {
|
|
|
117
125
|
errorTint1: string;
|
|
118
126
|
/** 20% of #FF6068 */
|
|
119
127
|
errorTint2: string;
|
|
128
|
+
/** 30% of #FF6068 */
|
|
129
|
+
errorTint3: string;
|
|
130
|
+
/** 40% of #FF6068 */
|
|
131
|
+
errorTint4: string;
|
|
120
132
|
/** #FF9900 */
|
|
121
133
|
warning: string;
|
|
122
134
|
/** #E68A00 */
|
|
@@ -129,6 +141,10 @@ export interface IColors {
|
|
|
129
141
|
warningTint1: string;
|
|
130
142
|
/** 20% of #FF9900 */
|
|
131
143
|
warningTint2: string;
|
|
144
|
+
/** 30% of #FF9900 */
|
|
145
|
+
warningTint3: string;
|
|
146
|
+
/** 40% of #FF9900 */
|
|
147
|
+
warningTint4: string;
|
|
132
148
|
/** #F0BB00 */
|
|
133
149
|
alert: string;
|
|
134
150
|
/** #E4B200 */
|
|
@@ -141,6 +157,10 @@ export interface IColors {
|
|
|
141
157
|
alertTint1: string;
|
|
142
158
|
/** 20% of #F0BB00 */
|
|
143
159
|
alertTint2: string;
|
|
160
|
+
/** 30% of #F0BB00 */
|
|
161
|
+
alertTint3: string;
|
|
162
|
+
/** 40% of #F0BB00 */
|
|
163
|
+
alertTint4: string;
|
|
144
164
|
/** #00C242 */
|
|
145
165
|
success: string;
|
|
146
166
|
/** #00AF3B */
|
|
@@ -149,10 +169,13 @@ export interface IColors {
|
|
|
149
169
|
successShade2: string;
|
|
150
170
|
/** 5% of #00C242 */
|
|
151
171
|
successTint0: string;
|
|
152
|
-
/** 10% of #00C242 */
|
|
153
|
-
successTint1: string;
|
|
172
|
+
/** 10% of #00C242 */ successTint1: string;
|
|
154
173
|
/** 20% of #00C242 */
|
|
155
174
|
successTint2: string;
|
|
175
|
+
/** 30% of #00C242 */
|
|
176
|
+
successTint3: string;
|
|
177
|
+
/** 40% of #00C242 */
|
|
178
|
+
successTint4: string;
|
|
156
179
|
/** 5% of #001D32 */
|
|
157
180
|
grayscale0: string;
|
|
158
181
|
/** 10% of #001D32 */
|
|
@@ -32,24 +32,32 @@ const colors = {
|
|
|
32
32
|
errorTint0: transparentize(0.95, error),
|
|
33
33
|
errorTint1: transparentize(0.9, error),
|
|
34
34
|
errorTint2: transparentize(0.8, error),
|
|
35
|
+
errorTint3: transparentize(0.7, error),
|
|
36
|
+
errorTint4: transparentize(0.6, error),
|
|
35
37
|
warning,
|
|
36
38
|
warningShade1: '#E68A00',
|
|
37
39
|
warningShade2: '#CC7A00',
|
|
38
40
|
warningTint0: transparentize(0.95, warning),
|
|
39
41
|
warningTint1: transparentize(0.9, warning),
|
|
40
42
|
warningTint2: transparentize(0.8, warning),
|
|
43
|
+
warningTint3: transparentize(0.7, warning),
|
|
44
|
+
warningTint4: transparentize(0.6, warning),
|
|
41
45
|
alert: alertColor,
|
|
42
46
|
alertShade1: '#E4B200',
|
|
43
47
|
alertShade2: '#C09600',
|
|
44
48
|
alertTint0: transparentize(0.95, alertColor),
|
|
45
49
|
alertTint1: transparentize(0.9, alertColor),
|
|
46
50
|
alertTint2: transparentize(0.8, alertColor),
|
|
51
|
+
alertTint3: transparentize(0.7, alertColor),
|
|
52
|
+
alertTint4: transparentize(0.6, alertColor),
|
|
47
53
|
success,
|
|
48
54
|
successShade1: '#00AF3B',
|
|
49
55
|
successShade2: '#009B35',
|
|
50
56
|
successTint0: transparentize(0.95, success),
|
|
51
57
|
successTint1: transparentize(0.9, success),
|
|
52
58
|
successTint2: transparentize(0.8, success),
|
|
59
|
+
successTint3: transparentize(0.7, success),
|
|
60
|
+
successTint4: transparentize(0.6, success),
|
|
53
61
|
grayscale0: transparentize(0.95, grayVal),
|
|
54
62
|
grayscale1: transparentize(0.9, grayVal),
|
|
55
63
|
grayscale2: transparentize(0.8, grayVal),
|
|
@@ -3,7 +3,7 @@ import colors from "../colors.js";
|
|
|
3
3
|
import darkScale from "./darkScale.js";
|
|
4
4
|
const white = '#FFFFFF';
|
|
5
5
|
const accent = colors.brandDark;
|
|
6
|
-
const
|
|
6
|
+
const dark_dark = {
|
|
7
7
|
...common,
|
|
8
8
|
...darkScale,
|
|
9
9
|
name: 'dark',
|
|
@@ -277,6 +277,111 @@ const dark = {
|
|
|
277
277
|
default: white
|
|
278
278
|
}
|
|
279
279
|
},
|
|
280
|
+
toggleButton: {
|
|
281
|
+
...index_js_button,
|
|
282
|
+
primary: {
|
|
283
|
+
color: {
|
|
284
|
+
default: darkScale.scale10,
|
|
285
|
+
hover: darkScale.scale10,
|
|
286
|
+
active: darkScale.scale10
|
|
287
|
+
},
|
|
288
|
+
background: {
|
|
289
|
+
default: colors.brandTint0,
|
|
290
|
+
hover: colors.brandTint2,
|
|
291
|
+
active: colors.brandTint4
|
|
292
|
+
},
|
|
293
|
+
border: {
|
|
294
|
+
default: colors.brand,
|
|
295
|
+
hover: colors.brand,
|
|
296
|
+
active: colors.brand
|
|
297
|
+
}
|
|
298
|
+
},
|
|
299
|
+
secondary: {
|
|
300
|
+
color: {
|
|
301
|
+
default: darkScale.scale10,
|
|
302
|
+
hover: darkScale.scale10,
|
|
303
|
+
active: darkScale.scale10
|
|
304
|
+
},
|
|
305
|
+
background: {
|
|
306
|
+
default: darkScale.scale0,
|
|
307
|
+
hover: darkScale.scale1,
|
|
308
|
+
active: darkScale.scale3
|
|
309
|
+
},
|
|
310
|
+
border: {
|
|
311
|
+
default: darkScale.background5,
|
|
312
|
+
hover: darkScale.background5,
|
|
313
|
+
active: darkScale.background5
|
|
314
|
+
}
|
|
315
|
+
},
|
|
316
|
+
negative: {
|
|
317
|
+
color: {
|
|
318
|
+
default: darkScale.scale10,
|
|
319
|
+
hover: darkScale.scale10,
|
|
320
|
+
active: darkScale.scale10
|
|
321
|
+
},
|
|
322
|
+
background: {
|
|
323
|
+
default: colors.errorTint0,
|
|
324
|
+
hover: colors.errorTint2,
|
|
325
|
+
active: colors.errorTint4
|
|
326
|
+
},
|
|
327
|
+
border: {
|
|
328
|
+
default: colors.error,
|
|
329
|
+
hover: colors.error,
|
|
330
|
+
active: colors.error
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
positive: {
|
|
334
|
+
color: {
|
|
335
|
+
default: darkScale.scale10,
|
|
336
|
+
hover: darkScale.scale10,
|
|
337
|
+
active: darkScale.scale10
|
|
338
|
+
},
|
|
339
|
+
background: {
|
|
340
|
+
default: colors.successTint0,
|
|
341
|
+
hover: colors.successTint2,
|
|
342
|
+
active: colors.successTint4
|
|
343
|
+
},
|
|
344
|
+
border: {
|
|
345
|
+
default: colors.success,
|
|
346
|
+
hover: colors.success,
|
|
347
|
+
active: colors.success
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
caution: {
|
|
351
|
+
color: {
|
|
352
|
+
default: darkScale.scale10,
|
|
353
|
+
hover: darkScale.scale10,
|
|
354
|
+
active: darkScale.scale10
|
|
355
|
+
},
|
|
356
|
+
background: {
|
|
357
|
+
default: colors.warningTint0,
|
|
358
|
+
hover: colors.warningTint2,
|
|
359
|
+
active: colors.warningTint4
|
|
360
|
+
},
|
|
361
|
+
border: {
|
|
362
|
+
default: colors.warning,
|
|
363
|
+
hover: colors.warning,
|
|
364
|
+
active: colors.warning
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
disabled: {
|
|
368
|
+
color: {
|
|
369
|
+
default: darkScale.scale4,
|
|
370
|
+
hover: darkScale.scale4,
|
|
371
|
+
active: darkScale.scale4
|
|
372
|
+
},
|
|
373
|
+
background: {
|
|
374
|
+
default: darkScale.scale0,
|
|
375
|
+
hover: darkScale.scale0,
|
|
376
|
+
active: darkScale.scale0
|
|
377
|
+
},
|
|
378
|
+
border: {
|
|
379
|
+
default: darkScale.scale1,
|
|
380
|
+
hover: darkScale.scale1,
|
|
381
|
+
active: darkScale.scale1
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
},
|
|
280
385
|
calendar: {
|
|
281
386
|
background: {
|
|
282
387
|
container: colors.brandBackground3,
|
|
@@ -453,5 +558,5 @@ const dark = {
|
|
|
453
558
|
}
|
|
454
559
|
}
|
|
455
560
|
};
|
|
456
|
-
const
|
|
457
|
-
export {
|
|
561
|
+
const dark = dark_dark;
|
|
562
|
+
export { dark as default };
|
|
@@ -276,6 +276,111 @@ const light_light = {
|
|
|
276
276
|
default: white
|
|
277
277
|
}
|
|
278
278
|
},
|
|
279
|
+
toggleButton: {
|
|
280
|
+
...index_js_button,
|
|
281
|
+
primary: {
|
|
282
|
+
color: {
|
|
283
|
+
default: lightScale.scale10,
|
|
284
|
+
hover: lightScale.scale10,
|
|
285
|
+
active: lightScale.scale10
|
|
286
|
+
},
|
|
287
|
+
background: {
|
|
288
|
+
default: colors.brandTint0,
|
|
289
|
+
hover: colors.brandTint2,
|
|
290
|
+
active: colors.brandTint4
|
|
291
|
+
},
|
|
292
|
+
border: {
|
|
293
|
+
default: colors.brand,
|
|
294
|
+
hover: colors.brand,
|
|
295
|
+
active: colors.brand
|
|
296
|
+
}
|
|
297
|
+
},
|
|
298
|
+
secondary: {
|
|
299
|
+
color: {
|
|
300
|
+
default: lightScale.scale10,
|
|
301
|
+
hover: lightScale.scale10,
|
|
302
|
+
active: lightScale.scale10
|
|
303
|
+
},
|
|
304
|
+
background: {
|
|
305
|
+
default: lightScale.scale0,
|
|
306
|
+
hover: lightScale.scale1,
|
|
307
|
+
active: lightScale.scale3
|
|
308
|
+
},
|
|
309
|
+
border: {
|
|
310
|
+
default: lightScale.background5,
|
|
311
|
+
hover: lightScale.background5,
|
|
312
|
+
active: lightScale.background5
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
negative: {
|
|
316
|
+
color: {
|
|
317
|
+
default: lightScale.scale10,
|
|
318
|
+
hover: lightScale.scale10,
|
|
319
|
+
active: lightScale.scale10
|
|
320
|
+
},
|
|
321
|
+
background: {
|
|
322
|
+
default: colors.errorTint0,
|
|
323
|
+
hover: colors.errorTint2,
|
|
324
|
+
active: colors.errorTint4
|
|
325
|
+
},
|
|
326
|
+
border: {
|
|
327
|
+
default: colors.error,
|
|
328
|
+
hover: colors.error,
|
|
329
|
+
active: colors.error
|
|
330
|
+
}
|
|
331
|
+
},
|
|
332
|
+
positive: {
|
|
333
|
+
color: {
|
|
334
|
+
default: lightScale.scale10,
|
|
335
|
+
hover: lightScale.scale10,
|
|
336
|
+
active: lightScale.scale10
|
|
337
|
+
},
|
|
338
|
+
background: {
|
|
339
|
+
default: colors.successTint0,
|
|
340
|
+
hover: colors.successTint2,
|
|
341
|
+
active: colors.successTint4
|
|
342
|
+
},
|
|
343
|
+
border: {
|
|
344
|
+
default: colors.success,
|
|
345
|
+
hover: colors.success,
|
|
346
|
+
active: colors.success
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
caution: {
|
|
350
|
+
color: {
|
|
351
|
+
default: lightScale.scale10,
|
|
352
|
+
hover: lightScale.scale10,
|
|
353
|
+
active: lightScale.scale10
|
|
354
|
+
},
|
|
355
|
+
background: {
|
|
356
|
+
default: colors.warningTint0,
|
|
357
|
+
hover: colors.warningTint2,
|
|
358
|
+
active: colors.warningTint4
|
|
359
|
+
},
|
|
360
|
+
border: {
|
|
361
|
+
default: colors.warning,
|
|
362
|
+
hover: colors.warning,
|
|
363
|
+
active: colors.warning
|
|
364
|
+
}
|
|
365
|
+
},
|
|
366
|
+
disabled: {
|
|
367
|
+
color: {
|
|
368
|
+
default: lightScale.scale4,
|
|
369
|
+
hover: lightScale.scale4,
|
|
370
|
+
active: lightScale.scale4
|
|
371
|
+
},
|
|
372
|
+
background: {
|
|
373
|
+
default: lightScale.scale0,
|
|
374
|
+
hover: lightScale.scale0,
|
|
375
|
+
active: lightScale.scale0
|
|
376
|
+
},
|
|
377
|
+
border: {
|
|
378
|
+
default: lightScale.scale1,
|
|
379
|
+
hover: lightScale.scale1,
|
|
380
|
+
active: lightScale.scale1
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
},
|
|
279
384
|
calendar: {
|
|
280
385
|
background: {
|
|
281
386
|
container: colors.contrast10,
|
|
@@ -24,24 +24,32 @@ declare const colors: {
|
|
|
24
24
|
errorTint0: string;
|
|
25
25
|
errorTint1: string;
|
|
26
26
|
errorTint2: string;
|
|
27
|
+
errorTint3: string;
|
|
28
|
+
errorTint4: string;
|
|
27
29
|
warning: string;
|
|
28
30
|
warningShade1: string;
|
|
29
31
|
warningShade2: string;
|
|
30
32
|
warningTint0: string;
|
|
31
33
|
warningTint1: string;
|
|
32
34
|
warningTint2: string;
|
|
35
|
+
warningTint3: string;
|
|
36
|
+
warningTint4: string;
|
|
33
37
|
alert: string;
|
|
34
38
|
alertShade1: string;
|
|
35
39
|
alertShade2: string;
|
|
36
40
|
alertTint0: string;
|
|
37
41
|
alertTint1: string;
|
|
38
42
|
alertTint2: string;
|
|
43
|
+
alertTint3: string;
|
|
44
|
+
alertTint4: string;
|
|
39
45
|
success: string;
|
|
40
46
|
successShade1: string;
|
|
41
47
|
successShade2: string;
|
|
42
48
|
successTint0: string;
|
|
43
49
|
successTint1: string;
|
|
44
50
|
successTint2: string;
|
|
51
|
+
successTint3: string;
|
|
52
|
+
successTint4: string;
|
|
45
53
|
grayscale0: string;
|
|
46
54
|
grayscale1: string;
|
|
47
55
|
grayscale2: string;
|
|
@@ -33,24 +33,32 @@ const colors = {
|
|
|
33
33
|
errorTint0: transparentize(0.95, error),
|
|
34
34
|
errorTint1: transparentize(0.9, error),
|
|
35
35
|
errorTint2: transparentize(0.8, error),
|
|
36
|
+
errorTint3: transparentize(0.7, error),
|
|
37
|
+
errorTint4: transparentize(0.6, error),
|
|
36
38
|
warning,
|
|
37
39
|
warningShade1: '#E6AF00',
|
|
38
40
|
warningShade2: '#CC9B00',
|
|
39
41
|
warningTint0: transparentize(0.95, warning),
|
|
40
42
|
warningTint1: transparentize(0.9, warning),
|
|
41
43
|
warningTint2: transparentize(0.8, warning),
|
|
44
|
+
warningTint3: transparentize(0.7, warning),
|
|
45
|
+
warningTint4: transparentize(0.6, warning),
|
|
42
46
|
alert: alertColor,
|
|
43
47
|
alertShade1: '#E6E652',
|
|
44
48
|
alertShade2: '#CCCC48',
|
|
45
49
|
alertTint0: transparentize(0.95, alertColor),
|
|
46
50
|
alertTint1: transparentize(0.9, alertColor),
|
|
47
51
|
alertTint2: transparentize(0.8, alertColor),
|
|
52
|
+
alertTint3: transparentize(0.7, alertColor),
|
|
53
|
+
alertTint4: transparentize(0.6, alertColor),
|
|
48
54
|
success,
|
|
49
55
|
successShade1: '#33E512',
|
|
50
56
|
successShade2: '#2CCF10',
|
|
51
57
|
successTint0: transparentize(0.95, success),
|
|
52
58
|
successTint1: transparentize(0.9, success),
|
|
53
59
|
successTint2: transparentize(0.8, success),
|
|
60
|
+
successTint3: transparentize(0.7, success),
|
|
61
|
+
successTint4: transparentize(0.6, success),
|
|
54
62
|
grayscale0: transparentize(0.95, grayVal),
|
|
55
63
|
grayscale1: transparentize(0.9, grayVal),
|
|
56
64
|
grayscale2: transparentize(0.8, grayVal),
|
|
@@ -3,7 +3,7 @@ import colors from "../colors.js";
|
|
|
3
3
|
import darkScale from "./darkScale.js";
|
|
4
4
|
const white = '#FFFFFF';
|
|
5
5
|
const accent = colors.brandDark;
|
|
6
|
-
const
|
|
6
|
+
const dark_dark = {
|
|
7
7
|
...common,
|
|
8
8
|
...darkScale,
|
|
9
9
|
name: 'dark',
|
|
@@ -277,6 +277,111 @@ const dark = {
|
|
|
277
277
|
default: white
|
|
278
278
|
}
|
|
279
279
|
},
|
|
280
|
+
toggleButton: {
|
|
281
|
+
...index_js_button,
|
|
282
|
+
primary: {
|
|
283
|
+
color: {
|
|
284
|
+
default: darkScale.scale10,
|
|
285
|
+
hover: darkScale.scale10,
|
|
286
|
+
active: darkScale.scale10
|
|
287
|
+
},
|
|
288
|
+
background: {
|
|
289
|
+
default: colors.brandTint0,
|
|
290
|
+
hover: colors.brandTint2,
|
|
291
|
+
active: colors.brandTint4
|
|
292
|
+
},
|
|
293
|
+
border: {
|
|
294
|
+
default: colors.brand,
|
|
295
|
+
hover: colors.brand,
|
|
296
|
+
active: colors.brand
|
|
297
|
+
}
|
|
298
|
+
},
|
|
299
|
+
secondary: {
|
|
300
|
+
color: {
|
|
301
|
+
default: darkScale.scale10,
|
|
302
|
+
hover: darkScale.scale10,
|
|
303
|
+
active: darkScale.scale10
|
|
304
|
+
},
|
|
305
|
+
background: {
|
|
306
|
+
default: darkScale.scale0,
|
|
307
|
+
hover: darkScale.scale1,
|
|
308
|
+
active: darkScale.scale3
|
|
309
|
+
},
|
|
310
|
+
border: {
|
|
311
|
+
default: darkScale.background5,
|
|
312
|
+
hover: darkScale.background5,
|
|
313
|
+
active: darkScale.background5
|
|
314
|
+
}
|
|
315
|
+
},
|
|
316
|
+
negative: {
|
|
317
|
+
color: {
|
|
318
|
+
default: darkScale.scale10,
|
|
319
|
+
hover: darkScale.scale10,
|
|
320
|
+
active: darkScale.scale10
|
|
321
|
+
},
|
|
322
|
+
background: {
|
|
323
|
+
default: colors.errorTint0,
|
|
324
|
+
hover: colors.errorTint2,
|
|
325
|
+
active: colors.errorTint4
|
|
326
|
+
},
|
|
327
|
+
border: {
|
|
328
|
+
default: colors.error,
|
|
329
|
+
hover: colors.error,
|
|
330
|
+
active: colors.error
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
positive: {
|
|
334
|
+
color: {
|
|
335
|
+
default: darkScale.scale10,
|
|
336
|
+
hover: darkScale.scale10,
|
|
337
|
+
active: darkScale.scale10
|
|
338
|
+
},
|
|
339
|
+
background: {
|
|
340
|
+
default: colors.successTint0,
|
|
341
|
+
hover: colors.successTint2,
|
|
342
|
+
active: colors.successTint4
|
|
343
|
+
},
|
|
344
|
+
border: {
|
|
345
|
+
default: colors.success,
|
|
346
|
+
hover: colors.success,
|
|
347
|
+
active: colors.success
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
caution: {
|
|
351
|
+
color: {
|
|
352
|
+
default: darkScale.scale10,
|
|
353
|
+
hover: darkScale.scale10,
|
|
354
|
+
active: darkScale.scale10
|
|
355
|
+
},
|
|
356
|
+
background: {
|
|
357
|
+
default: colors.warningTint0,
|
|
358
|
+
hover: colors.warningTint2,
|
|
359
|
+
active: colors.warningTint4
|
|
360
|
+
},
|
|
361
|
+
border: {
|
|
362
|
+
default: colors.warning,
|
|
363
|
+
hover: colors.warning,
|
|
364
|
+
active: colors.warning
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
disabled: {
|
|
368
|
+
color: {
|
|
369
|
+
default: darkScale.scale4,
|
|
370
|
+
hover: darkScale.scale4,
|
|
371
|
+
active: darkScale.scale4
|
|
372
|
+
},
|
|
373
|
+
background: {
|
|
374
|
+
default: darkScale.scale0,
|
|
375
|
+
hover: darkScale.scale0,
|
|
376
|
+
active: darkScale.scale0
|
|
377
|
+
},
|
|
378
|
+
border: {
|
|
379
|
+
default: darkScale.scale1,
|
|
380
|
+
hover: darkScale.scale1,
|
|
381
|
+
active: darkScale.scale1
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
},
|
|
280
385
|
calendar: {
|
|
281
386
|
background: {
|
|
282
387
|
container: colors.brandBackground3,
|
|
@@ -453,5 +558,5 @@ const dark = {
|
|
|
453
558
|
}
|
|
454
559
|
}
|
|
455
560
|
};
|
|
456
|
-
const
|
|
457
|
-
export {
|
|
561
|
+
const dark = dark_dark;
|
|
562
|
+
export { dark as default };
|
|
@@ -276,6 +276,111 @@ const light_light = {
|
|
|
276
276
|
default: white
|
|
277
277
|
}
|
|
278
278
|
},
|
|
279
|
+
toggleButton: {
|
|
280
|
+
...index_js_button,
|
|
281
|
+
primary: {
|
|
282
|
+
color: {
|
|
283
|
+
default: lightScale.scale10,
|
|
284
|
+
hover: lightScale.scale10,
|
|
285
|
+
active: lightScale.scale10
|
|
286
|
+
},
|
|
287
|
+
background: {
|
|
288
|
+
default: colors.brandTint0,
|
|
289
|
+
hover: colors.brandTint2,
|
|
290
|
+
active: colors.brandTint4
|
|
291
|
+
},
|
|
292
|
+
border: {
|
|
293
|
+
default: colors.brand,
|
|
294
|
+
hover: colors.brand,
|
|
295
|
+
active: colors.brand
|
|
296
|
+
}
|
|
297
|
+
},
|
|
298
|
+
secondary: {
|
|
299
|
+
color: {
|
|
300
|
+
default: lightScale.scale10,
|
|
301
|
+
hover: lightScale.scale10,
|
|
302
|
+
active: lightScale.scale10
|
|
303
|
+
},
|
|
304
|
+
background: {
|
|
305
|
+
default: lightScale.scale0,
|
|
306
|
+
hover: lightScale.scale1,
|
|
307
|
+
active: lightScale.scale3
|
|
308
|
+
},
|
|
309
|
+
border: {
|
|
310
|
+
default: lightScale.background5,
|
|
311
|
+
hover: lightScale.background5,
|
|
312
|
+
active: lightScale.background5
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
negative: {
|
|
316
|
+
color: {
|
|
317
|
+
default: lightScale.scale10,
|
|
318
|
+
hover: lightScale.scale10,
|
|
319
|
+
active: lightScale.scale10
|
|
320
|
+
},
|
|
321
|
+
background: {
|
|
322
|
+
default: colors.errorTint0,
|
|
323
|
+
hover: colors.errorTint2,
|
|
324
|
+
active: colors.errorTint4
|
|
325
|
+
},
|
|
326
|
+
border: {
|
|
327
|
+
default: colors.error,
|
|
328
|
+
hover: colors.error,
|
|
329
|
+
active: colors.error
|
|
330
|
+
}
|
|
331
|
+
},
|
|
332
|
+
positive: {
|
|
333
|
+
color: {
|
|
334
|
+
default: lightScale.scale10,
|
|
335
|
+
hover: lightScale.scale10,
|
|
336
|
+
active: lightScale.scale10
|
|
337
|
+
},
|
|
338
|
+
background: {
|
|
339
|
+
default: colors.successTint0,
|
|
340
|
+
hover: colors.successTint2,
|
|
341
|
+
active: colors.successTint4
|
|
342
|
+
},
|
|
343
|
+
border: {
|
|
344
|
+
default: colors.success,
|
|
345
|
+
hover: colors.success,
|
|
346
|
+
active: colors.success
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
caution: {
|
|
350
|
+
color: {
|
|
351
|
+
default: lightScale.scale10,
|
|
352
|
+
hover: lightScale.scale10,
|
|
353
|
+
active: lightScale.scale10
|
|
354
|
+
},
|
|
355
|
+
background: {
|
|
356
|
+
default: colors.warningTint0,
|
|
357
|
+
hover: colors.warningTint2,
|
|
358
|
+
active: colors.warningTint4
|
|
359
|
+
},
|
|
360
|
+
border: {
|
|
361
|
+
default: colors.warning,
|
|
362
|
+
hover: colors.warning,
|
|
363
|
+
active: colors.warning
|
|
364
|
+
}
|
|
365
|
+
},
|
|
366
|
+
disabled: {
|
|
367
|
+
color: {
|
|
368
|
+
default: lightScale.scale4,
|
|
369
|
+
hover: lightScale.scale4,
|
|
370
|
+
active: lightScale.scale4
|
|
371
|
+
},
|
|
372
|
+
background: {
|
|
373
|
+
default: lightScale.scale0,
|
|
374
|
+
hover: lightScale.scale0,
|
|
375
|
+
active: lightScale.scale0
|
|
376
|
+
},
|
|
377
|
+
border: {
|
|
378
|
+
default: lightScale.scale1,
|
|
379
|
+
hover: lightScale.scale1,
|
|
380
|
+
active: lightScale.scale1
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
},
|
|
279
384
|
calendar: {
|
|
280
385
|
background: {
|
|
281
386
|
container: colors.contrast10,
|