@wavv/ui 2.3.0-alpha.1 → 2.3.1
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/components/Checkbox.d.ts +3 -1
- package/build/components/Checkbox.js +2 -1
- package/build/components/Ellipsis.d.ts +3 -2
- package/build/components/Form.d.ts +6 -3
- package/build/components/FormControl.d.ts +1 -0
- package/build/components/FormControl.js +2 -2
- package/build/components/Radio.d.ts +3 -1
- package/build/components/Radio.js +2 -1
- package/build/components/Toggle.d.ts +3 -1
- package/build/components/Toggle.js +2 -1
- package/package.json +25 -25
- package/build/theme/eighties/colors.d.ts +0 -76
- package/build/theme/eighties/colors.js +0 -86
- package/build/theme/eighties/dark/dark.d.ts +0 -3
- package/build/theme/eighties/dark/dark.js +0 -562
- package/build/theme/eighties/dark/darkScale.d.ts +0 -22
- package/build/theme/eighties/dark/darkScale.js +0 -36
- package/build/theme/eighties/light/light.d.ts +0 -3
- package/build/theme/eighties/light/light.js +0 -561
- package/build/theme/eighties/light/lightScale.d.ts +0 -22
- package/build/theme/eighties/light/lightScale.js +0 -35
|
@@ -7,6 +7,8 @@ type Props = {
|
|
|
7
7
|
label?: string;
|
|
8
8
|
/** Sets the label on the left or right of the checkbox */
|
|
9
9
|
labelPosition?: 'left' | 'right';
|
|
10
|
+
/** Sets the color of the label */
|
|
11
|
+
labelColor?: string;
|
|
10
12
|
/** Disables the checkbox */
|
|
11
13
|
disabled?: boolean;
|
|
12
14
|
/** Prevents the checkbox from being changed */
|
|
@@ -23,7 +25,7 @@ type Props = {
|
|
|
23
25
|
className?: CheckboxProps['className'];
|
|
24
26
|
style?: CheckboxProps['style'];
|
|
25
27
|
} & Margin & Omit<CheckboxProps, 'value' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'isIndeterminate'>;
|
|
26
|
-
declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
27
29
|
export declare const ControlContainer: import("@emotion/styled").StyledComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement> & {
|
|
28
30
|
theme?: import("@emotion/react").Theme;
|
|
29
31
|
} & {
|
|
@@ -8,7 +8,7 @@ import { ControlLabel } from "./FormControl.js";
|
|
|
8
8
|
import getFlexPosition from "./helpers/getFlexPosition.js";
|
|
9
9
|
import { marginProps } from "./helpers/styledProps.js";
|
|
10
10
|
import Icon from "./Icon/index.js";
|
|
11
|
-
const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props })=>{
|
|
11
|
+
const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props })=>{
|
|
12
12
|
const labelRight = 'right' === labelPosition;
|
|
13
13
|
const isControlled = 'boolean' == typeof checked;
|
|
14
14
|
return /*#__PURE__*/ jsx(ControlContainer, {
|
|
@@ -34,6 +34,7 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
|
|
|
34
34
|
children: [
|
|
35
35
|
label && /*#__PURE__*/ jsx(ControlLabel, {
|
|
36
36
|
disabled: disabled,
|
|
37
|
+
color: labelColor,
|
|
37
38
|
children: label
|
|
38
39
|
}),
|
|
39
40
|
/*#__PURE__*/ jsx(Icon, {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { CSSObject } from '@emotion/react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
2
3
|
import type { Attributes } from './typeDefs/elementTypes';
|
|
3
4
|
import type { MarginPadding, Width } from './types';
|
|
4
5
|
type ElAttributes = Attributes<HTMLDivElement>;
|
|
@@ -6,7 +7,7 @@ type Props = {
|
|
|
6
7
|
children: ReactNode;
|
|
7
8
|
/** Number of lines to clamp */
|
|
8
9
|
clampLines?: number;
|
|
9
|
-
textAlign?:
|
|
10
|
+
textAlign?: CSSObject['textAlign'];
|
|
10
11
|
} & MarginPadding & Width & ElAttributes;
|
|
11
12
|
declare const Ellipsis: ({ children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export default Ellipsis;
|
|
@@ -14,19 +14,21 @@ declare const Form: {
|
|
|
14
14
|
Field({ children, inline, align, disabled, ...props }: FieldProps & {
|
|
15
15
|
children?: ReactNode;
|
|
16
16
|
}): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: {
|
|
17
|
+
Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: {
|
|
18
18
|
id?: string;
|
|
19
19
|
label?: string;
|
|
20
20
|
labelPosition?: "left" | "right";
|
|
21
|
+
labelColor?: string;
|
|
21
22
|
disabled?: boolean;
|
|
22
23
|
checked?: boolean;
|
|
23
24
|
className?: string;
|
|
24
25
|
iconColor?: string;
|
|
25
26
|
} & Margin & import("react").HTMLProps<HTMLInputElement> & import("./types").AsProp) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: {
|
|
27
|
+
Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props }: {
|
|
27
28
|
id?: string;
|
|
28
29
|
label?: string;
|
|
29
30
|
labelPosition?: "left" | "right";
|
|
31
|
+
labelColor?: string;
|
|
30
32
|
disabled?: boolean;
|
|
31
33
|
checked?: boolean;
|
|
32
34
|
gap?: number;
|
|
@@ -34,10 +36,11 @@ declare const Form: {
|
|
|
34
36
|
className?: import("react-aria-components").SwitchProps["className"];
|
|
35
37
|
style?: import("react-aria-components").SwitchProps["style"];
|
|
36
38
|
} & Margin & Omit<import("react-aria-components").SwitchProps, "isDisabled" | "isSelected">) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
-
Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props }: {
|
|
39
|
+
Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props }: {
|
|
38
40
|
id?: string;
|
|
39
41
|
label?: string;
|
|
40
42
|
labelPosition?: "left" | "right";
|
|
43
|
+
labelColor?: string;
|
|
41
44
|
disabled?: boolean;
|
|
42
45
|
readOnly?: boolean;
|
|
43
46
|
checked?: boolean;
|
|
@@ -20,5 +20,6 @@ export declare const ControlLabel: import("@emotion/styled").StyledComponent<{
|
|
|
20
20
|
as?: React.ElementType;
|
|
21
21
|
} & {
|
|
22
22
|
disabled?: boolean;
|
|
23
|
+
color?: string;
|
|
23
24
|
} & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
24
25
|
export type CheckboxAttributes = Attributes<HTMLInputElement>;
|
|
@@ -64,9 +64,9 @@ const ControlInput = styled.input({
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
}));
|
|
67
|
-
const ControlLabel = styled.span(({ theme, disabled })=>({
|
|
67
|
+
const ControlLabel = styled.span(({ theme, disabled, color })=>({
|
|
68
68
|
fontSize: theme.font.size.md,
|
|
69
|
-
color: disabled ? theme.formControl.color.disabled : theme.scale10,
|
|
69
|
+
color: disabled ? theme.formControl.color.disabled : color || theme.scale10,
|
|
70
70
|
cursor: disabled ? 'not-allowed' : 'pointer'
|
|
71
71
|
}));
|
|
72
72
|
export { ControlContainer, ControlInput, ControlLabel };
|
|
@@ -8,6 +8,8 @@ type RadioProps = {
|
|
|
8
8
|
label?: string;
|
|
9
9
|
/** Sets the label on the left or right of the radio */
|
|
10
10
|
labelPosition?: 'left' | 'right';
|
|
11
|
+
/** Sets the color of the label */
|
|
12
|
+
labelColor?: string;
|
|
11
13
|
/** Disables the radio */
|
|
12
14
|
disabled?: boolean;
|
|
13
15
|
/** Controls the checked property of the radio */
|
|
@@ -17,5 +19,5 @@ type RadioProps = {
|
|
|
17
19
|
/** Sets the color of the icon */
|
|
18
20
|
iconColor?: string;
|
|
19
21
|
} & Margin & ElAttributes;
|
|
20
|
-
declare const Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare const Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
23
|
export default Radio;
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import RadioButton from "../assets/icons/RadioButton.js";
|
|
3
3
|
import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
|
|
4
4
|
import Icon from "./Icon/index.js";
|
|
5
|
-
const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
|
|
5
|
+
const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
|
|
6
6
|
const labelRight = 'right' === labelPosition;
|
|
7
7
|
const marginProps = {
|
|
8
8
|
margin,
|
|
@@ -22,6 +22,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop,
|
|
|
22
22
|
children: [
|
|
23
23
|
label && /*#__PURE__*/ jsx(ControlLabel, {
|
|
24
24
|
disabled: disabled,
|
|
25
|
+
color: labelColor,
|
|
25
26
|
children: label
|
|
26
27
|
}),
|
|
27
28
|
/*#__PURE__*/ jsx(ControlInput, {
|
|
@@ -7,6 +7,8 @@ type Props = {
|
|
|
7
7
|
label?: string;
|
|
8
8
|
/** Sets the label on the left or right of the toggle */
|
|
9
9
|
labelPosition?: 'left' | 'right';
|
|
10
|
+
/** Sets the color of the label */
|
|
11
|
+
labelColor?: string;
|
|
10
12
|
/** Disables the toggle */
|
|
11
13
|
disabled?: boolean;
|
|
12
14
|
/** Controls the checked property of the toggle */
|
|
@@ -18,7 +20,7 @@ type Props = {
|
|
|
18
20
|
className?: SwitchProps['className'];
|
|
19
21
|
style?: SwitchProps['style'];
|
|
20
22
|
} & Margin & Omit<SwitchProps, 'isDisabled' | 'isSelected'>;
|
|
21
|
-
declare const Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare const Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
22
24
|
export declare const ControlContainer: import("@emotion/styled").StyledComponent<SwitchProps & import("react").RefAttributes<HTMLLabelElement> & {
|
|
23
25
|
theme?: import("@emotion/react").Theme;
|
|
24
26
|
} & {
|
|
@@ -6,7 +6,7 @@ import ToggleOn from "../assets/icons/ToggleOn.js";
|
|
|
6
6
|
import { ControlLabel } from "./FormControl.js";
|
|
7
7
|
import { marginProps } from "./helpers/styledProps.js";
|
|
8
8
|
import Icon from "./Icon/index.js";
|
|
9
|
-
const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, ...props })=>{
|
|
9
|
+
const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props })=>{
|
|
10
10
|
const labelRight = 'right' === labelPosition;
|
|
11
11
|
const isControlled = 'boolean' == typeof checked;
|
|
12
12
|
return /*#__PURE__*/ jsx(ControlContainer, {
|
|
@@ -24,6 +24,7 @@ const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, ...pro
|
|
|
24
24
|
children: [
|
|
25
25
|
label && /*#__PURE__*/ jsx(ControlLabel, {
|
|
26
26
|
disabled: disabled,
|
|
27
|
+
color: labelColor,
|
|
27
28
|
children: label
|
|
28
29
|
}),
|
|
29
30
|
/*#__PURE__*/ jsx(Icon, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wavv/ui",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -31,22 +31,22 @@
|
|
|
31
31
|
"@emotion/styled": "^11.14.1",
|
|
32
32
|
"@internationalized/date": "3.10.0",
|
|
33
33
|
"@react-hook/resize-observer": "^2.0.2",
|
|
34
|
-
"@tiptap/core": "^3.
|
|
35
|
-
"@tiptap/extension-character-count": "^3.
|
|
36
|
-
"@tiptap/extension-highlight": "^3.
|
|
37
|
-
"@tiptap/extension-placeholder": "^3.
|
|
38
|
-
"@tiptap/extension-task-item": "^3.
|
|
39
|
-
"@tiptap/extension-task-list": "^3.
|
|
40
|
-
"@tiptap/markdown": "^3.
|
|
41
|
-
"@tiptap/pm": "^3.
|
|
42
|
-
"@tiptap/react": "^3.
|
|
43
|
-
"@tiptap/starter-kit": "^3.
|
|
34
|
+
"@tiptap/core": "^3.11.0",
|
|
35
|
+
"@tiptap/extension-character-count": "^3.11.0",
|
|
36
|
+
"@tiptap/extension-highlight": "^3.11.0",
|
|
37
|
+
"@tiptap/extension-placeholder": "^3.11.0",
|
|
38
|
+
"@tiptap/extension-task-item": "^3.11.0",
|
|
39
|
+
"@tiptap/extension-task-list": "^3.11.0",
|
|
40
|
+
"@tiptap/markdown": "^3.11.0",
|
|
41
|
+
"@tiptap/pm": "^3.11.0",
|
|
42
|
+
"@tiptap/react": "^3.11.0",
|
|
43
|
+
"@tiptap/starter-kit": "^3.11.0",
|
|
44
44
|
"cmdk": "^1.1.1",
|
|
45
45
|
"date-fns": "^4.1.0",
|
|
46
46
|
"draft-js": "^0.11.7",
|
|
47
|
-
"es-toolkit": "^1.
|
|
48
|
-
"libphonenumber-js": "^1.12.
|
|
49
|
-
"lucide-react": "^0.
|
|
47
|
+
"es-toolkit": "^1.42.0",
|
|
48
|
+
"libphonenumber-js": "^1.12.27",
|
|
49
|
+
"lucide-react": "^0.554.0",
|
|
50
50
|
"polished": "^4.1.4",
|
|
51
51
|
"prism-react-renderer": "^2.4.1",
|
|
52
52
|
"react-aria": "3.44.0",
|
|
@@ -61,14 +61,14 @@
|
|
|
61
61
|
"@babel/core": "^7.28.5",
|
|
62
62
|
"@babel/preset-env": "^7.28.5",
|
|
63
63
|
"@babel/preset-typescript": "^7.28.5",
|
|
64
|
-
"@biomejs/biome": "2.3.
|
|
65
|
-
"@chromatic-com/storybook": "^4.1.
|
|
64
|
+
"@biomejs/biome": "2.3.6",
|
|
65
|
+
"@chromatic-com/storybook": "^4.1.3",
|
|
66
66
|
"@emotion/babel-plugin": "^11.13.5",
|
|
67
67
|
"@emotion/react": "^11.14.0",
|
|
68
|
-
"@rsbuild/core": "1.6.
|
|
68
|
+
"@rsbuild/core": "1.6.7",
|
|
69
69
|
"@rsbuild/plugin-react": "^1.4.2",
|
|
70
70
|
"@rsbuild/plugin-svgr": "^1.2.2",
|
|
71
|
-
"@rslib/core": "^0.
|
|
71
|
+
"@rslib/core": "^0.18.0",
|
|
72
72
|
"@storybook/addon-docs": "^9.1.16",
|
|
73
73
|
"@storybook/addon-links": "^9.1.16",
|
|
74
74
|
"@storybook/addon-themes": "^9.1.16",
|
|
@@ -77,21 +77,21 @@
|
|
|
77
77
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
78
78
|
"@svgr/plugin-prettier": "^8.1.0",
|
|
79
79
|
"@swc/plugin-emotion": "12.0.0",
|
|
80
|
-
"@types/draft-js": "^0.11.
|
|
80
|
+
"@types/draft-js": "^0.11.20",
|
|
81
81
|
"@types/jest": "^30.0.0",
|
|
82
82
|
"@types/ncp": "^2.0.8",
|
|
83
|
-
"@types/node": "^24.10.
|
|
83
|
+
"@types/node": "^24.10.1",
|
|
84
84
|
"@types/prompts": "^2.4.9",
|
|
85
85
|
"@types/randomcolor": "^0.5.9",
|
|
86
|
-
"@types/react": "^19.2.
|
|
87
|
-
"@types/react-dom": "^19.2.
|
|
86
|
+
"@types/react": "^19.2.6",
|
|
87
|
+
"@types/react-dom": "^19.2.3",
|
|
88
88
|
"@types/signale": "^1.4.7",
|
|
89
89
|
"@types/webfontloader": "^1.6.38",
|
|
90
90
|
"chalk": "^5.6.2",
|
|
91
91
|
"change-case": "^5.4.4",
|
|
92
|
-
"chromatic": "^13.3.
|
|
92
|
+
"chromatic": "^13.3.4",
|
|
93
93
|
"jest": "^30.2.0",
|
|
94
|
-
"lefthook": "^2.0.
|
|
94
|
+
"lefthook": "^2.0.4",
|
|
95
95
|
"ncp": "^2.0.0",
|
|
96
96
|
"path": "^0.12.7",
|
|
97
97
|
"phone": "^3.1.67",
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
"replace": "^1.2.2",
|
|
106
106
|
"signale": "^1.4.0",
|
|
107
107
|
"storybook": "^9.1.16",
|
|
108
|
-
"storybook-react-rsbuild": "^2.1.
|
|
108
|
+
"storybook-react-rsbuild": "^2.1.6",
|
|
109
109
|
"tsc-files": "^1.1.4",
|
|
110
110
|
"tslib": "^2.8.1",
|
|
111
111
|
"tsx": "^4.20.6",
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
declare const colors: {
|
|
2
|
-
logo1: string;
|
|
3
|
-
logo2: string;
|
|
4
|
-
logo3: string;
|
|
5
|
-
brand: string;
|
|
6
|
-
brandShade1: string;
|
|
7
|
-
brandShade2: string;
|
|
8
|
-
brandDark: string;
|
|
9
|
-
brandDarkShade1: string;
|
|
10
|
-
brandTint0: string;
|
|
11
|
-
brandTint1: string;
|
|
12
|
-
brandTint2: string;
|
|
13
|
-
brandTint3: string;
|
|
14
|
-
brandTint4: string;
|
|
15
|
-
brandBackground0: string;
|
|
16
|
-
brandBackground1: string;
|
|
17
|
-
brandBackground2: string;
|
|
18
|
-
brandBackground3: string;
|
|
19
|
-
brandBackground4: string;
|
|
20
|
-
brandBackground5: string;
|
|
21
|
-
error: string;
|
|
22
|
-
errorShade1: string;
|
|
23
|
-
errorShade2: string;
|
|
24
|
-
errorTint0: string;
|
|
25
|
-
errorTint1: string;
|
|
26
|
-
errorTint2: string;
|
|
27
|
-
errorTint3: string;
|
|
28
|
-
errorTint4: string;
|
|
29
|
-
warning: string;
|
|
30
|
-
warningShade1: string;
|
|
31
|
-
warningShade2: string;
|
|
32
|
-
warningTint0: string;
|
|
33
|
-
warningTint1: string;
|
|
34
|
-
warningTint2: string;
|
|
35
|
-
warningTint3: string;
|
|
36
|
-
warningTint4: string;
|
|
37
|
-
alert: string;
|
|
38
|
-
alertShade1: string;
|
|
39
|
-
alertShade2: string;
|
|
40
|
-
alertTint0: string;
|
|
41
|
-
alertTint1: string;
|
|
42
|
-
alertTint2: string;
|
|
43
|
-
alertTint3: string;
|
|
44
|
-
alertTint4: string;
|
|
45
|
-
success: string;
|
|
46
|
-
successShade1: string;
|
|
47
|
-
successShade2: string;
|
|
48
|
-
successTint0: string;
|
|
49
|
-
successTint1: string;
|
|
50
|
-
successTint2: string;
|
|
51
|
-
successTint3: string;
|
|
52
|
-
successTint4: string;
|
|
53
|
-
grayscale0: string;
|
|
54
|
-
grayscale1: string;
|
|
55
|
-
grayscale2: string;
|
|
56
|
-
grayscale3: string;
|
|
57
|
-
grayscale4: string;
|
|
58
|
-
grayscale5: string;
|
|
59
|
-
grayscale6: string;
|
|
60
|
-
grayscale7: string;
|
|
61
|
-
grayscale8: string;
|
|
62
|
-
grayscale9: string;
|
|
63
|
-
grayscale10: string;
|
|
64
|
-
contrast0: string;
|
|
65
|
-
contrast1: string;
|
|
66
|
-
contrast2: string;
|
|
67
|
-
contrast3: string;
|
|
68
|
-
contrast4: string;
|
|
69
|
-
contrast5: string;
|
|
70
|
-
contrast6: string;
|
|
71
|
-
contrast7: string;
|
|
72
|
-
contrast8: string;
|
|
73
|
-
contrast9: string;
|
|
74
|
-
contrast10: string;
|
|
75
|
-
};
|
|
76
|
-
export default colors;
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { transparentize } from "polished";
|
|
2
|
-
const brand = '#40E0D0';
|
|
3
|
-
const brandDark = '#FF00A8';
|
|
4
|
-
const error = '#FF3366';
|
|
5
|
-
const warning = '#FFD23F';
|
|
6
|
-
const alertColor = '#FFFF66';
|
|
7
|
-
const success = '#0ECD9D';
|
|
8
|
-
const grayVal = '#2B003E';
|
|
9
|
-
const white = '#FFFDF2';
|
|
10
|
-
const colors = {
|
|
11
|
-
logo1: brand,
|
|
12
|
-
logo2: brandDark,
|
|
13
|
-
logo3: '#8A2BE2',
|
|
14
|
-
brand,
|
|
15
|
-
brandShade1: '#E00096',
|
|
16
|
-
brandShade2: '#C00084',
|
|
17
|
-
brandDark,
|
|
18
|
-
brandDarkShade1: '#36C7B8',
|
|
19
|
-
brandTint0: transparentize(0.95, brand),
|
|
20
|
-
brandTint1: transparentize(0.9, brand),
|
|
21
|
-
brandTint2: transparentize(0.8, brand),
|
|
22
|
-
brandTint3: transparentize(0.7, brand),
|
|
23
|
-
brandTint4: transparentize(0.6, brand),
|
|
24
|
-
brandBackground0: '#2C073B',
|
|
25
|
-
brandBackground1: '#360948',
|
|
26
|
-
brandBackground2: '#400A55',
|
|
27
|
-
brandBackground3: '#4A0C62',
|
|
28
|
-
brandBackground4: '#540D6E',
|
|
29
|
-
brandBackground5: '#6F3386',
|
|
30
|
-
error,
|
|
31
|
-
errorShade1: '#E02E5C',
|
|
32
|
-
errorShade2: '#C92852',
|
|
33
|
-
errorTint0: transparentize(0.95, error),
|
|
34
|
-
errorTint1: transparentize(0.9, error),
|
|
35
|
-
errorTint2: transparentize(0.8, error),
|
|
36
|
-
errorTint3: transparentize(0.7, error),
|
|
37
|
-
errorTint4: transparentize(0.6, error),
|
|
38
|
-
warning,
|
|
39
|
-
warningShade1: '#E6AF00',
|
|
40
|
-
warningShade2: '#CC9B00',
|
|
41
|
-
warningTint0: transparentize(0.95, warning),
|
|
42
|
-
warningTint1: transparentize(0.9, warning),
|
|
43
|
-
warningTint2: transparentize(0.8, warning),
|
|
44
|
-
warningTint3: transparentize(0.7, warning),
|
|
45
|
-
warningTint4: transparentize(0.6, warning),
|
|
46
|
-
alert: alertColor,
|
|
47
|
-
alertShade1: '#E6E652',
|
|
48
|
-
alertShade2: '#CCCC48',
|
|
49
|
-
alertTint0: transparentize(0.95, alertColor),
|
|
50
|
-
alertTint1: transparentize(0.9, alertColor),
|
|
51
|
-
alertTint2: transparentize(0.8, alertColor),
|
|
52
|
-
alertTint3: transparentize(0.7, alertColor),
|
|
53
|
-
alertTint4: transparentize(0.6, alertColor),
|
|
54
|
-
success,
|
|
55
|
-
successShade1: '#33E512',
|
|
56
|
-
successShade2: '#2CCF10',
|
|
57
|
-
successTint0: transparentize(0.95, success),
|
|
58
|
-
successTint1: transparentize(0.9, success),
|
|
59
|
-
successTint2: transparentize(0.8, success),
|
|
60
|
-
successTint3: transparentize(0.7, success),
|
|
61
|
-
successTint4: transparentize(0.6, success),
|
|
62
|
-
grayscale0: transparentize(0.95, grayVal),
|
|
63
|
-
grayscale1: transparentize(0.9, grayVal),
|
|
64
|
-
grayscale2: transparentize(0.8, grayVal),
|
|
65
|
-
grayscale3: transparentize(0.7, grayVal),
|
|
66
|
-
grayscale4: transparentize(0.6, grayVal),
|
|
67
|
-
grayscale5: transparentize(0.5, grayVal),
|
|
68
|
-
grayscale6: transparentize(0.4, grayVal),
|
|
69
|
-
grayscale7: transparentize(0.3, grayVal),
|
|
70
|
-
grayscale8: transparentize(0.2, grayVal),
|
|
71
|
-
grayscale9: transparentize(0.1, grayVal),
|
|
72
|
-
grayscale10: grayVal,
|
|
73
|
-
contrast0: transparentize(0.95, white),
|
|
74
|
-
contrast1: transparentize(0.9, white),
|
|
75
|
-
contrast2: transparentize(0.8, white),
|
|
76
|
-
contrast3: transparentize(0.7, white),
|
|
77
|
-
contrast4: transparentize(0.6, white),
|
|
78
|
-
contrast5: transparentize(0.5, white),
|
|
79
|
-
contrast6: transparentize(0.4, white),
|
|
80
|
-
contrast7: transparentize(0.3, white),
|
|
81
|
-
contrast8: transparentize(0.2, white),
|
|
82
|
-
contrast9: transparentize(0.1, white),
|
|
83
|
-
contrast10: white
|
|
84
|
-
};
|
|
85
|
-
const eighties_colors = colors;
|
|
86
|
-
export { eighties_colors as default };
|