reshaped 2.5.7 → 2.5.9
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/bundle.css +1 -1
- package/bundle.js +8 -8
- package/components/Breadcrumbs/Breadcrumbs.d.ts +1 -4
- package/components/Breadcrumbs/Breadcrumbs.js +0 -9
- package/components/Breadcrumbs/BreadcrumbsItem.d.ts +4 -0
- package/components/Breadcrumbs/BreadcrumbsItem.js +11 -0
- package/components/Breadcrumbs/index.d.ts +7 -1
- package/components/Breadcrumbs/index.js +5 -1
- package/components/FormControl/FormControl.context.d.ts +1 -1
- package/components/Select/Select.module.css +1 -1
- package/package.json +13 -13
- package/themes/_generator/tests/themes.stories.d.ts +1 -0
- package/themes/_generator/tests/themes.stories.js +24 -0
- package/themes/_generator/tokens/types.d.ts +1 -0
- package/themes/_generator/utilities/generateBackgroundColors.js +10 -12
- package/themes/index.d.ts +1 -1
- package/themes/index.js +2 -2
- package/types/config.d.ts +7 -1
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import * as T from "./Breadcrumbs.types";
|
|
3
|
-
declare const Breadcrumbs:
|
|
4
|
-
(props: T.Props): React.JSX.Element;
|
|
5
|
-
Item: (props: T.ItemProps) => React.JSX.Element;
|
|
6
|
-
};
|
|
3
|
+
declare const Breadcrumbs: (props: T.Props) => React.JSX.Element;
|
|
7
4
|
export default Breadcrumbs;
|
|
@@ -3,18 +3,10 @@ import React from "react";
|
|
|
3
3
|
import { classNames } from "../../utilities/helpers.js";
|
|
4
4
|
import View from "../View/index.js";
|
|
5
5
|
import Icon from "../Icon/index.js";
|
|
6
|
-
import Link from "../Link/index.js";
|
|
7
6
|
import Text from "../Text/index.js";
|
|
8
7
|
import Button from "../Button/index.js";
|
|
9
8
|
import IconChevronRight from "../../icons/ChevronRight.js";
|
|
10
9
|
import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
|
|
11
|
-
const BreadcrumbsItem = (props) => {
|
|
12
|
-
const { children, onClick, href, icon, disabled } = props;
|
|
13
|
-
if (!href && !onClick && !disabled) {
|
|
14
|
-
return (React.createElement(Text, { variant: "body-3", weight: "medium", color: "neutral" }, children));
|
|
15
|
-
}
|
|
16
|
-
return (React.createElement(Link, { onClick: onClick, href: href, icon: icon, disabled: disabled, variant: "plain", color: "inherit" }, children));
|
|
17
|
-
};
|
|
18
10
|
const Breadcrumbs = (props) => {
|
|
19
11
|
const { children, separator, color, defaultVisibleItems, ariaLabel, className, attributes } = props;
|
|
20
12
|
const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;
|
|
@@ -50,5 +42,4 @@ const Breadcrumbs = (props) => {
|
|
|
50
42
|
React.createElement(Text, { variant: "body-3", color: color === "primary" ? "primary" : "neutral-faded" }, itemNode)));
|
|
51
43
|
}))));
|
|
52
44
|
};
|
|
53
|
-
Breadcrumbs.Item = BreadcrumbsItem;
|
|
54
45
|
export default Breadcrumbs;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Text from "../Text/index.js";
|
|
3
|
+
import Link from "../Link/index.js";
|
|
4
|
+
const BreadcrumbsItem = (props) => {
|
|
5
|
+
const { children, onClick, href, icon, disabled } = props;
|
|
6
|
+
if (!href && !onClick && !disabled) {
|
|
7
|
+
return (React.createElement(Text, { variant: "body-3", weight: "medium", color: "neutral" }, children));
|
|
8
|
+
}
|
|
9
|
+
return (React.createElement(Link, { onClick: onClick, href: href, icon: icon, disabled: disabled, variant: "plain", color: "inherit" }, children));
|
|
10
|
+
};
|
|
11
|
+
export default BreadcrumbsItem;
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import BreadcrumbsItem from "./BreadcrumbsItem";
|
|
2
|
+
type CompoundComponent = typeof Breadcrumbs & {
|
|
3
|
+
Item: typeof BreadcrumbsItem;
|
|
4
|
+
};
|
|
5
|
+
declare const Breadcrumbs: (props: import("./Breadcrumbs.types").Props) => import("react").JSX.Element;
|
|
2
6
|
export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types";
|
|
7
|
+
declare const _default: CompoundComponent;
|
|
8
|
+
export default _default;
|
|
@@ -11,7 +11,7 @@ export declare const useFormControl: () => {
|
|
|
11
11
|
accessKey?: string | undefined;
|
|
12
12
|
autoFocus?: boolean | undefined;
|
|
13
13
|
className?: string | undefined;
|
|
14
|
-
contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
|
|
14
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
15
15
|
contextMenu?: string | undefined;
|
|
16
16
|
dir?: string | undefined;
|
|
17
17
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot
|
|
1
|
+
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:900px){.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:1280px){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "2.5.
|
|
4
|
+
"version": "2.5.9",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -84,28 +84,28 @@
|
|
|
84
84
|
"@commitlint/config-conventional": "18.1.0",
|
|
85
85
|
"@commitlint/types": "18.1.0",
|
|
86
86
|
"@size-limit/preset-big-lib": "9.0.0",
|
|
87
|
-
"@storybook/addon-a11y": "7.
|
|
88
|
-
"@storybook/react": "7.
|
|
89
|
-
"@storybook/react-vite": "7.
|
|
87
|
+
"@storybook/addon-a11y": "7.5.3",
|
|
88
|
+
"@storybook/react": "7.5.3",
|
|
89
|
+
"@storybook/react-vite": "7.5.3",
|
|
90
90
|
"@testing-library/jest-dom": "6.1.4",
|
|
91
91
|
"@testing-library/react": "14.0.0",
|
|
92
92
|
"@testing-library/user-event": "14.5.1",
|
|
93
|
-
"@types/events": "3.0.
|
|
94
|
-
"@types/jest": "29.5.
|
|
93
|
+
"@types/events": "3.0.3",
|
|
94
|
+
"@types/jest": "29.5.8",
|
|
95
95
|
"@types/node": "20.8.10",
|
|
96
|
-
"@types/react": "18.2.
|
|
97
|
-
"@types/react-dom": "18.2.
|
|
96
|
+
"@types/react": "18.2.37",
|
|
97
|
+
"@types/react-dom": "18.2.15",
|
|
98
98
|
"@typescript-eslint/eslint-plugin": "6.9.1",
|
|
99
99
|
"@typescript-eslint/parser": "6.9.1",
|
|
100
|
-
"@vitejs/plugin-react": "4.1.
|
|
100
|
+
"@vitejs/plugin-react": "4.1.1",
|
|
101
101
|
"chromatic": "7.6.0",
|
|
102
102
|
"cz-conventional-changelog": "3.3.0",
|
|
103
103
|
"eslint": "8.52.0",
|
|
104
104
|
"eslint-config-airbnb-typescript": "17.1.0",
|
|
105
105
|
"eslint-config-prettier": "9.0.0",
|
|
106
106
|
"eslint-plugin-import": "2.28.1",
|
|
107
|
-
"eslint-plugin-jsx-a11y": "6.
|
|
108
|
-
"eslint-plugin-prettier": "5.0.
|
|
107
|
+
"eslint-plugin-jsx-a11y": "6.8.0",
|
|
108
|
+
"eslint-plugin-prettier": "5.0.1",
|
|
109
109
|
"eslint-plugin-react": "7.33.2",
|
|
110
110
|
"eslint-plugin-react-hooks": "4.6.0",
|
|
111
111
|
"identity-obj-proxy": "3.0.0",
|
|
@@ -123,8 +123,8 @@
|
|
|
123
123
|
"react-dom": "18.2.0",
|
|
124
124
|
"resolve-tspaths": "0.8.17",
|
|
125
125
|
"size-limit": "9.0.0",
|
|
126
|
-
"storybook": "7.
|
|
127
|
-
"stylelint": "15.
|
|
126
|
+
"storybook": "7.5.3",
|
|
127
|
+
"stylelint": "15.11.0",
|
|
128
128
|
"stylelint-config-prettier": "9.0.5",
|
|
129
129
|
"stylelint-config-standard": "34.0.0",
|
|
130
130
|
"ts-jest": "29.1.1",
|
|
@@ -103,3 +103,27 @@ export const generation = () => (<Example>
|
|
|
103
103
|
</View>
|
|
104
104
|
</Example.Item>
|
|
105
105
|
</Example>);
|
|
106
|
+
const onColorsCss = getThemeCSS("on-color", {
|
|
107
|
+
color: {
|
|
108
|
+
backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
|
|
109
|
+
backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
|
|
110
|
+
},
|
|
111
|
+
}, {
|
|
112
|
+
onColorValues: {
|
|
113
|
+
primary: {
|
|
114
|
+
hexLight: "#d1fae5",
|
|
115
|
+
hexDark: "#022c22",
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
});
|
|
119
|
+
export const onColors = () => (<Example>
|
|
120
|
+
<Example.Item title="custom on color values">
|
|
121
|
+
<style>{onColorsCss}</style>
|
|
122
|
+
<Theme name="on-color">
|
|
123
|
+
<View gap={2} direction="row">
|
|
124
|
+
<Button color="primary">Primary button</Button>
|
|
125
|
+
<Button color="critical">Critical button</Button>
|
|
126
|
+
</View>
|
|
127
|
+
</Theme>
|
|
128
|
+
</Example.Item>
|
|
129
|
+
</Example>);
|
|
@@ -8,6 +8,7 @@ import type * as TShadow from "./shadow/shadow.types";
|
|
|
8
8
|
import type * as TUnit from "./unit/unit.types";
|
|
9
9
|
import type * as TViewport from "./viewport/viewport.types";
|
|
10
10
|
export type TokenType = "fontFamily" | "fontWeight" | "unit" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow";
|
|
11
|
+
export type ColorHue = "primary" | "positive" | "critical" | "neutral";
|
|
11
12
|
export type BaseThemeDefinition = {
|
|
12
13
|
viewport: Record<TViewport.Name, TViewport.Token>;
|
|
13
14
|
};
|
|
@@ -24,18 +24,16 @@ const generateBackgroundColors = (definition, themeOptions) => {
|
|
|
24
24
|
if (!bgToken)
|
|
25
25
|
return;
|
|
26
26
|
if (needsDynamicForeground) {
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
lightHexColor: (_c = (_b =
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
darkHexColor: (_j = (_h = definition === null || definition === void 0 ? void 0 : definition.color) === null || _h === void 0 ? void 0 : _h.black) === null || _j === void 0 ? void 0 : _j.hex,
|
|
38
|
-
});
|
|
27
|
+
const overrideKeys = (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.onColorValues) && Object.keys(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.onColorValues);
|
|
28
|
+
const onColorKey = overrideKeys && overrideKeys.find((key) => tokenName.toLowerCase().includes(key));
|
|
29
|
+
const onColorHexMap = {
|
|
30
|
+
lightHexColor: (onColorKey && ((_c = (_b = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.onColorValues) === null || _b === void 0 ? void 0 : _b[onColorKey]) === null || _c === void 0 ? void 0 : _c.hexLight)) ||
|
|
31
|
+
((_e = (_d = definition === null || definition === void 0 ? void 0 : definition.color) === null || _d === void 0 ? void 0 : _d.white) === null || _e === void 0 ? void 0 : _e.hex),
|
|
32
|
+
darkHexColor: (onColorKey && ((_g = (_f = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.onColorValues) === null || _f === void 0 ? void 0 : _f[onColorKey]) === null || _g === void 0 ? void 0 : _g.hexDark)) ||
|
|
33
|
+
((_j = (_h = definition === null || definition === void 0 ? void 0 : definition.color) === null || _h === void 0 ? void 0 : _h.black) === null || _j === void 0 ? void 0 : _j.hex),
|
|
34
|
+
};
|
|
35
|
+
const hex = (0, color_1.getOnColor)(Object.assign({ bgHexColor: bgToken.hex, mode: "light" }, onColorHexMap));
|
|
36
|
+
const hexDark = (0, color_1.getOnColor)(Object.assign({ bgHexColor: bgToken.hexDark || bgToken.hex, mode: "dark" }, onColorHexMap));
|
|
39
37
|
// eslint-disable-next-line no-param-reassign
|
|
40
38
|
definition.color[generatedForegroundName] = {
|
|
41
39
|
hex,
|
package/themes/index.d.ts
CHANGED
|
@@ -9,4 +9,4 @@ export declare const generateThemeColors: (options: {
|
|
|
9
9
|
}) => Record<import("./_generator/tokens/color/color.types").Name, import("./_generator/tokens/color/color.types").Token> & {
|
|
10
10
|
[tokenName: string]: import("./_generator/tokens/color/color.types").Token;
|
|
11
11
|
};
|
|
12
|
-
export declare const getThemeCSS: (name: string, definition: T.PartialDeep<FullThemeDefinition
|
|
12
|
+
export declare const getThemeCSS: (name: string, definition: T.PartialDeep<FullThemeDefinition>, options?: T.PublicOptions["themeOptions"]) => string;
|
package/themes/index.js
CHANGED
|
@@ -14,8 +14,8 @@ const generateThemeColors = (options) => {
|
|
|
14
14
|
return (0, generateColors_1.default)(options);
|
|
15
15
|
};
|
|
16
16
|
exports.generateThemeColors = generateThemeColors;
|
|
17
|
-
const getThemeCSS = (name, definition) => {
|
|
18
|
-
const code = (0, transform_1.default)(name, definition, { isFragment: true });
|
|
17
|
+
const getThemeCSS = (name, definition, options) => {
|
|
18
|
+
const code = (0, transform_1.default)(name, definition, { themeOptions: options, isFragment: true });
|
|
19
19
|
return code.variables;
|
|
20
20
|
};
|
|
21
21
|
exports.getThemeCSS = getThemeCSS;
|
package/types/config.d.ts
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
|
-
import { PartialUserThemeDefinition } from "../themes/_generator/tokens/types";
|
|
1
|
+
import { PartialUserThemeDefinition, ColorHue } from "../themes/_generator/tokens/types";
|
|
2
2
|
export type ReshapedConfig = {
|
|
3
3
|
themes?: Record<string, PartialUserThemeDefinition>;
|
|
4
4
|
themeFragments?: Record<string, PartialUserThemeDefinition>;
|
|
5
5
|
themeOptions?: {
|
|
6
6
|
generateOnColorsFor?: string[];
|
|
7
|
+
onColorValues?: {
|
|
8
|
+
[key in ColorHue]?: {
|
|
9
|
+
hexDark: string;
|
|
10
|
+
hexLight: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
7
13
|
};
|
|
8
14
|
};
|