pixelize-design-library 2.4.2-beta.2 → 2.4.2-beta.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/dist/Theme/chakra/Menu.styles.d.ts +6 -6
- package/dist/Theme/chakra/Menu.styles.js +6 -5
- package/dist/Theme/chakra/Popover.styles.d.ts +3 -3
- package/dist/Theme/chakra/Popover.styles.js +7 -6
- package/dist/Theme/chakra/Switch.styles.d.ts +1 -1
- package/dist/Theme/chakra/Switch.styles.js +7 -9
- package/dist/Theme/chakra/componentStyles.d.ts +9 -9
- package/dist/Theme/provider/PixelizeThemeProvider.js +18 -20
- package/dist/Theme/provider/ThemeSwitcher.js +10 -20
- package/dist/Theme/tokens/brands/lavender/palette.light.js +2 -6
- package/dist/Theme/tokens/brands/slate/palette.light.js +1 -5
- package/dist/esm/Theme/chakra/Menu.styles.js +6 -5
- package/dist/esm/Theme/chakra/Popover.styles.js +7 -6
- package/dist/esm/Theme/chakra/Switch.styles.js +7 -9
- package/dist/esm/Theme/provider/PixelizeThemeProvider.js +18 -20
- package/dist/esm/Theme/provider/ThemeSwitcher.js +10 -20
- package/dist/esm/Theme/tokens/brands/lavender/palette.light.js +2 -6
- package/dist/esm/Theme/tokens/brands/slate/palette.light.js +1 -5
- package/package.json +1 -1
|
@@ -25,26 +25,26 @@ declare const $itemBg: {
|
|
|
25
25
|
export declare const Menu: {
|
|
26
26
|
baseStyle?: (({ theme }: StyleFunctionProps) => {
|
|
27
27
|
list: {
|
|
28
|
-
[$bg.variable]:
|
|
28
|
+
[$bg.variable]: string;
|
|
29
29
|
bg: string;
|
|
30
|
-
color:
|
|
30
|
+
color: string;
|
|
31
31
|
};
|
|
32
32
|
item: {
|
|
33
33
|
bg: string;
|
|
34
34
|
_focus: {
|
|
35
|
-
[$itemBg.variable]:
|
|
35
|
+
[$itemBg.variable]: string;
|
|
36
36
|
bg: string;
|
|
37
37
|
};
|
|
38
38
|
_hover: {
|
|
39
|
-
[$itemBg.variable]:
|
|
39
|
+
[$itemBg.variable]: string;
|
|
40
40
|
bg: string;
|
|
41
41
|
};
|
|
42
42
|
_active: {
|
|
43
|
-
[$itemBg.variable]:
|
|
43
|
+
[$itemBg.variable]: string;
|
|
44
44
|
bg: string;
|
|
45
45
|
};
|
|
46
46
|
_expanded: {
|
|
47
|
-
[$itemBg.variable]:
|
|
47
|
+
[$itemBg.variable]: string;
|
|
48
48
|
bg: string;
|
|
49
49
|
};
|
|
50
50
|
};
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Menu = void 0;
|
|
4
4
|
const react_1 = require("@chakra-ui/react");
|
|
5
5
|
const anatomy_1 = require("@chakra-ui/anatomy");
|
|
6
|
+
const paletteFromTheme_1 = require("./paletteFromTheme");
|
|
6
7
|
const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
|
|
7
8
|
const $bg = (0, react_1.cssVar)("menu-bg");
|
|
8
9
|
/**
|
|
@@ -22,14 +23,14 @@ const $bg = (0, react_1.cssVar)("menu-bg");
|
|
|
22
23
|
*/
|
|
23
24
|
const $itemBg = (0, react_1.cssVar)("menu-item-bg");
|
|
24
25
|
const baseStyle = definePartsStyle(({ theme }) => {
|
|
25
|
-
|
|
26
|
-
const hoverBg =
|
|
27
|
-
const activeBg =
|
|
26
|
+
const colors = (0, paletteFromTheme_1.paletteOf)(theme);
|
|
27
|
+
const hoverBg = colors.primary.opacity[8];
|
|
28
|
+
const activeBg = colors.primary.opacity[16];
|
|
28
29
|
return {
|
|
29
30
|
list: {
|
|
30
|
-
[$bg.variable]:
|
|
31
|
+
[$bg.variable]: colors.backgroundColor.light,
|
|
31
32
|
bg: $bg.reference,
|
|
32
|
-
color:
|
|
33
|
+
color: colors.text[900],
|
|
33
34
|
},
|
|
34
35
|
// Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
|
|
35
36
|
// baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name
|
|
@@ -10,10 +10,10 @@ declare const $arrowShadowColor: {
|
|
|
10
10
|
export declare const Popover: {
|
|
11
11
|
baseStyle?: (({ theme }: StyleFunctionProps) => {
|
|
12
12
|
content: {
|
|
13
|
-
[$popperBg.variable]:
|
|
14
|
-
[$arrowShadowColor.variable]:
|
|
13
|
+
[$popperBg.variable]: string;
|
|
14
|
+
[$arrowShadowColor.variable]: string;
|
|
15
15
|
bg: string;
|
|
16
|
-
color:
|
|
16
|
+
color: string;
|
|
17
17
|
};
|
|
18
18
|
}) | undefined;
|
|
19
19
|
sizes?: {
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Popover = void 0;
|
|
4
4
|
const react_1 = require("@chakra-ui/react");
|
|
5
5
|
const anatomy_1 = require("@chakra-ui/anatomy");
|
|
6
|
+
const paletteFromTheme_1 = require("./paletteFromTheme");
|
|
6
7
|
const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.popoverAnatomy.keys);
|
|
7
8
|
const $popperBg = (0, react_1.cssVar)("popper-bg");
|
|
8
9
|
const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
|
|
@@ -15,15 +16,15 @@ const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
|
|
|
15
16
|
* fixing `$popperBg` here fixes the arrow fill too.
|
|
16
17
|
*/
|
|
17
18
|
const baseStyle = definePartsStyle(({ theme }) => {
|
|
18
|
-
|
|
19
|
-
return
|
|
19
|
+
const colors = (0, paletteFromTheme_1.paletteOf)(theme);
|
|
20
|
+
return {
|
|
20
21
|
content: {
|
|
21
|
-
[$popperBg.variable]:
|
|
22
|
+
[$popperBg.variable]: colors.backgroundColor.light,
|
|
22
23
|
bg: $popperBg.reference,
|
|
23
|
-
[$arrowShadowColor.variable]:
|
|
24
|
-
color:
|
|
24
|
+
[$arrowShadowColor.variable]: colors.border[200],
|
|
25
|
+
color: colors.text[900],
|
|
25
26
|
},
|
|
26
|
-
}
|
|
27
|
+
};
|
|
27
28
|
});
|
|
28
29
|
exports.Popover = defineMultiStyleConfig({
|
|
29
30
|
baseStyle,
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Switch = void 0;
|
|
4
4
|
const react_1 = require("@chakra-ui/react");
|
|
5
5
|
const anatomy_1 = require("@chakra-ui/anatomy");
|
|
6
|
+
const paletteFromTheme_1 = require("./paletteFromTheme");
|
|
6
7
|
const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.switchAnatomy.keys);
|
|
7
8
|
const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
|
|
8
9
|
/**
|
|
@@ -10,15 +11,12 @@ const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
|
|
|
10
11
|
* `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
|
|
11
12
|
* regardless of mode.
|
|
12
13
|
*/
|
|
13
|
-
const baseStyle = definePartsStyle(({ theme }) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
});
|
|
21
|
-
});
|
|
14
|
+
const baseStyle = definePartsStyle(({ theme }) => ({
|
|
15
|
+
thumb: {
|
|
16
|
+
[$thumbBg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
|
|
17
|
+
bg: $thumbBg.reference,
|
|
18
|
+
},
|
|
19
|
+
}));
|
|
22
20
|
exports.Switch = defineMultiStyleConfig({
|
|
23
21
|
baseStyle,
|
|
24
22
|
});
|
|
@@ -70,26 +70,26 @@ export declare const componentStyles: {
|
|
|
70
70
|
Menu: {
|
|
71
71
|
baseStyle?: (({ theme }: StyleFunctionProps) => {
|
|
72
72
|
list: {
|
|
73
|
-
[x: string]:
|
|
73
|
+
[x: string]: string;
|
|
74
74
|
bg: string;
|
|
75
|
-
color:
|
|
75
|
+
color: string;
|
|
76
76
|
};
|
|
77
77
|
item: {
|
|
78
78
|
bg: string;
|
|
79
79
|
_focus: {
|
|
80
|
-
[x: string]:
|
|
80
|
+
[x: string]: string;
|
|
81
81
|
bg: string;
|
|
82
82
|
};
|
|
83
83
|
_hover: {
|
|
84
|
-
[x: string]:
|
|
84
|
+
[x: string]: string;
|
|
85
85
|
bg: string;
|
|
86
86
|
};
|
|
87
87
|
_active: {
|
|
88
|
-
[x: string]:
|
|
88
|
+
[x: string]: string;
|
|
89
89
|
bg: string;
|
|
90
90
|
};
|
|
91
91
|
_expanded: {
|
|
92
|
-
[x: string]:
|
|
92
|
+
[x: string]: string;
|
|
93
93
|
bg: string;
|
|
94
94
|
};
|
|
95
95
|
};
|
|
@@ -139,9 +139,9 @@ export declare const componentStyles: {
|
|
|
139
139
|
Popover: {
|
|
140
140
|
baseStyle?: (({ theme }: StyleFunctionProps) => {
|
|
141
141
|
content: {
|
|
142
|
-
[x: string]:
|
|
142
|
+
[x: string]: string;
|
|
143
143
|
bg: string;
|
|
144
|
-
color:
|
|
144
|
+
color: string;
|
|
145
145
|
};
|
|
146
146
|
}) | undefined;
|
|
147
147
|
sizes?: {
|
|
@@ -188,7 +188,7 @@ export declare const componentStyles: {
|
|
|
188
188
|
Switch: {
|
|
189
189
|
baseStyle?: (({ theme }: StyleFunctionProps) => {
|
|
190
190
|
thumb: {
|
|
191
|
-
[x: string]:
|
|
191
|
+
[x: string]: string;
|
|
192
192
|
bg: string;
|
|
193
193
|
};
|
|
194
194
|
}) | undefined;
|
|
@@ -165,42 +165,40 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
|
|
|
165
165
|
* `data-mode` for consumers that want to hook their own dark CSS.
|
|
166
166
|
*/
|
|
167
167
|
(0, react_1.useLayoutEffect)(() => {
|
|
168
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
169
168
|
const root = document.documentElement;
|
|
170
169
|
root.dataset.mode = resolvedMode;
|
|
171
|
-
const colors = resolvedTheme
|
|
172
|
-
const
|
|
173
|
-
const gray = colors.gray;
|
|
170
|
+
const { colors } = resolvedTheme;
|
|
171
|
+
const { gray, semantic } = colors;
|
|
174
172
|
const HUE_SCALES = [
|
|
175
173
|
"primary", "gray", "red", "orange", "yellow",
|
|
176
174
|
"green", "teal", "blue", "cyan", "purple", "pink",
|
|
177
175
|
];
|
|
178
|
-
const SEMANTIC_SCALES = ["success", "error", "warning", "info"];
|
|
176
|
+
const SEMANTIC_SCALES = ["success", "error", "warning", "info"];
|
|
179
177
|
const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
180
|
-
//
|
|
181
|
-
//
|
|
178
|
+
// The dark gray ramp runs dark(50) → light(900), so low rungs read as surfaces
|
|
179
|
+
// and high rungs as text — correct in dark, cleared in light.
|
|
182
180
|
const SEMANTIC_VARS = {
|
|
183
|
-
"text-heading": gray
|
|
184
|
-
"text-subtle": gray
|
|
185
|
-
"bg-main": gray
|
|
186
|
-
"bg-quaternary": gray
|
|
187
|
-
"bg-accent": gray
|
|
188
|
-
"bg-neutral": gray
|
|
189
|
-
"border-default": gray
|
|
190
|
-
"border-dark": gray
|
|
191
|
-
"border-error":
|
|
192
|
-
"border-warning":
|
|
181
|
+
"text-heading": gray[900], "text-body": gray[700],
|
|
182
|
+
"text-subtle": gray[500], "text-input": gray[500],
|
|
183
|
+
"bg-main": gray[50], "bg-secondary": gray[100], "bg-tertiary": gray[100],
|
|
184
|
+
"bg-quaternary": gray[200], "bg-light": gray[50], "bg-medium": gray[100],
|
|
185
|
+
"bg-accent": gray[200], "bg-subtle": gray[100], "bg-muted": gray[200],
|
|
186
|
+
"bg-neutral": gray[100], "bg-base": gray[50], "bg-table-header": gray[100],
|
|
187
|
+
"border-default": gray[200], "border-light": gray[100],
|
|
188
|
+
"border-dark": gray[300], "border-input": gray[300],
|
|
189
|
+
"border-error": semantic.error[500], "border-success": semantic.success[500],
|
|
190
|
+
"border-warning": semantic.warning[500], "border-info": semantic.info[500],
|
|
193
191
|
};
|
|
194
|
-
const set = (name, val) =>
|
|
192
|
+
const set = (name, val) => root.style.setProperty(`--color-${name}`, val);
|
|
195
193
|
const clear = (name) => root.style.removeProperty(`--color-${name}`);
|
|
196
194
|
const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
|
|
197
195
|
if (resolvedMode === "dark") {
|
|
198
196
|
for (const s of HUE_SCALES)
|
|
199
197
|
for (const r of RUNGS)
|
|
200
|
-
set(`${s}-${r}`,
|
|
198
|
+
set(`${s}-${r}`, colors[s][r]);
|
|
201
199
|
for (const s of SEMANTIC_SCALES)
|
|
202
200
|
for (const r of RUNGS)
|
|
203
|
-
set(`${s}-${r}`,
|
|
201
|
+
set(`${s}-${r}`, semantic[s][r]);
|
|
204
202
|
for (const [name, val] of Object.entries(SEMANTIC_VARS))
|
|
205
203
|
set(name, val);
|
|
206
204
|
}
|
|
@@ -25,33 +25,23 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
|
|
|
25
25
|
* the dot always matches what selecting that brand actually looks like,
|
|
26
26
|
* regardless of which brand/mode is currently active.
|
|
27
27
|
*/
|
|
28
|
-
const brandSwatchColor = (brand) =>
|
|
29
|
-
var _a, _b, _c, _d, _e;
|
|
30
|
-
return (_e = (_d = (_c = (_b = (_a = index_1.brandThemes[brand]) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.400";
|
|
31
|
-
};
|
|
28
|
+
const brandSwatchColor = (brand) => index_1.brandThemes[brand].light.colors.primary[500];
|
|
32
29
|
const BrandSwatch = ({ brand }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
|
|
33
30
|
/**
|
|
34
31
|
* Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
|
|
35
32
|
* are read straight from the active theme — no `useColorModeValue` pairing needed here.
|
|
36
|
-
* Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
|
|
37
33
|
*/
|
|
38
34
|
const useSwitcherColors = () => {
|
|
39
|
-
|
|
40
|
-
const colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
35
|
+
const { colors } = (0, useCustomTheme_1.useCustomTheme)();
|
|
41
36
|
return {
|
|
42
|
-
trackBg:
|
|
43
|
-
activeBg:
|
|
44
|
-
activeColor:
|
|
45
|
-
mutedColor:
|
|
46
|
-
hoverBg:
|
|
47
|
-
borderColor:
|
|
48
|
-
//
|
|
49
|
-
|
|
50
|
-
// Re-deriving it here too and pushing it back via `sx` on every render caused a redundant
|
|
51
|
-
// Emotion style recompute per render, which showed up as flicker while hovering/scrolling
|
|
52
|
-
// this list. Keep menuColor (Menu.styles.ts doesn't set list `color` per this component's
|
|
53
|
-
// needs) but stop duplicating menuBg.
|
|
54
|
-
menuColor: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[900]) !== null && _0 !== void 0 ? _0 : "gray.900",
|
|
37
|
+
trackBg: colors.backgroundColor.secondary,
|
|
38
|
+
activeBg: colors.backgroundColor.main,
|
|
39
|
+
activeColor: colors.primary[500],
|
|
40
|
+
mutedColor: colors.text[600],
|
|
41
|
+
hoverBg: colors.gray[100],
|
|
42
|
+
borderColor: colors.border[200],
|
|
43
|
+
// NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
|
|
44
|
+
menuColor: colors.text[900],
|
|
55
45
|
};
|
|
56
46
|
};
|
|
57
47
|
const BrandMenu = ({ size }) => {
|
|
@@ -188,12 +188,8 @@ const disabled = {
|
|
|
188
188
|
800: "#625d75",
|
|
189
189
|
900: "#4b4759",
|
|
190
190
|
};
|
|
191
|
-
//
|
|
192
|
-
|
|
193
|
-
// original let white drop to 3.53 there (`from` already passed at 5.76, unchanged).
|
|
194
|
-
// Nudged one step further (4.511 -> 4.609): the first pass cleared AA by <0.02, too thin a
|
|
195
|
-
// margin to trust against rounding/rendering variance.
|
|
196
|
-
const gradient = { from: "#8B3FC8", to: "#df187a" };
|
|
191
|
+
// Single-hue gradient: white clears AA by margin, not by hundredths. See gradientTone.test.ts.
|
|
192
|
+
const gradient = { from: "#8b3fc8", to: "#762d9d" };
|
|
197
193
|
const palette = {
|
|
198
194
|
gradient,
|
|
199
195
|
primary,
|
|
@@ -20,11 +20,7 @@ const primary = {
|
|
|
20
20
|
const palette = {
|
|
21
21
|
...neutrals_1.neutralTokens,
|
|
22
22
|
...(0, brandInk_1.buildBrandInk)(PRIMARY_500),
|
|
23
|
-
|
|
24
|
-
// original let white drop to 2.98 there (`from` already passed at 4.83, unchanged).
|
|
25
|
-
// Nudged one step further (4.520 -> 4.608): the first pass cleared AA by <0.02, too thin a
|
|
26
|
-
// margin to trust against rounding/rendering variance.
|
|
27
|
-
gradient: { from: "#6b7280", to: "#5664f6" }, // slate gray → indigo
|
|
23
|
+
gradient: { from: "#666d7a", to: "#4a4e59" },
|
|
28
24
|
primary,
|
|
29
25
|
tertiary: { ...primary },
|
|
30
26
|
gray: {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
|
|
2
2
|
import { menuAnatomy } from "@chakra-ui/anatomy";
|
|
3
|
+
import { paletteOf } from "./paletteFromTheme.js";
|
|
3
4
|
const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
|
|
4
5
|
const $bg = cssVar("menu-bg");
|
|
5
6
|
/**
|
|
@@ -19,14 +20,14 @@ const $bg = cssVar("menu-bg");
|
|
|
19
20
|
*/
|
|
20
21
|
const $itemBg = cssVar("menu-item-bg");
|
|
21
22
|
const baseStyle = definePartsStyle(({ theme }) => {
|
|
22
|
-
|
|
23
|
-
const hoverBg =
|
|
24
|
-
const activeBg =
|
|
23
|
+
const colors = paletteOf(theme);
|
|
24
|
+
const hoverBg = colors.primary.opacity[8];
|
|
25
|
+
const activeBg = colors.primary.opacity[16];
|
|
25
26
|
return {
|
|
26
27
|
list: {
|
|
27
|
-
[$bg.variable]:
|
|
28
|
+
[$bg.variable]: colors.backgroundColor.light,
|
|
28
29
|
bg: $bg.reference,
|
|
29
|
-
color:
|
|
30
|
+
color: colors.text[900],
|
|
30
31
|
},
|
|
31
32
|
// Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
|
|
32
33
|
// baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
|
|
2
2
|
import { popoverAnatomy } from "@chakra-ui/anatomy";
|
|
3
|
+
import { paletteOf } from "./paletteFromTheme.js";
|
|
3
4
|
const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
|
|
4
5
|
const $popperBg = cssVar("popper-bg");
|
|
5
6
|
const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
|
|
@@ -12,15 +13,15 @@ const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
|
|
|
12
13
|
* fixing `$popperBg` here fixes the arrow fill too.
|
|
13
14
|
*/
|
|
14
15
|
const baseStyle = definePartsStyle(({ theme }) => {
|
|
15
|
-
|
|
16
|
-
return
|
|
16
|
+
const colors = paletteOf(theme);
|
|
17
|
+
return {
|
|
17
18
|
content: {
|
|
18
|
-
[$popperBg.variable]:
|
|
19
|
+
[$popperBg.variable]: colors.backgroundColor.light,
|
|
19
20
|
bg: $popperBg.reference,
|
|
20
|
-
[$arrowShadowColor.variable]:
|
|
21
|
-
color:
|
|
21
|
+
[$arrowShadowColor.variable]: colors.border[200],
|
|
22
|
+
color: colors.text[900],
|
|
22
23
|
},
|
|
23
|
-
}
|
|
24
|
+
};
|
|
24
25
|
});
|
|
25
26
|
export const Popover = defineMultiStyleConfig({
|
|
26
27
|
baseStyle,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
|
|
2
2
|
import { switchAnatomy } from "@chakra-ui/anatomy";
|
|
3
|
+
import { paletteOf } from "./paletteFromTheme.js";
|
|
3
4
|
const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);
|
|
4
5
|
const $thumbBg = cssVar("switch-thumb-bg");
|
|
5
6
|
/**
|
|
@@ -7,15 +8,12 @@ const $thumbBg = cssVar("switch-thumb-bg");
|
|
|
7
8
|
* `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
|
|
8
9
|
* regardless of mode.
|
|
9
10
|
*/
|
|
10
|
-
const baseStyle = definePartsStyle(({ theme }) => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
});
|
|
18
|
-
});
|
|
11
|
+
const baseStyle = definePartsStyle(({ theme }) => ({
|
|
12
|
+
thumb: {
|
|
13
|
+
[$thumbBg.variable]: paletteOf(theme).backgroundColor.light,
|
|
14
|
+
bg: $thumbBg.reference,
|
|
15
|
+
},
|
|
16
|
+
}));
|
|
19
17
|
export const Switch = defineMultiStyleConfig({
|
|
20
18
|
baseStyle,
|
|
21
19
|
});
|
|
@@ -159,42 +159,40 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
|
|
|
159
159
|
* `data-mode` for consumers that want to hook their own dark CSS.
|
|
160
160
|
*/
|
|
161
161
|
useLayoutEffect(() => {
|
|
162
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
163
162
|
const root = document.documentElement;
|
|
164
163
|
root.dataset.mode = resolvedMode;
|
|
165
|
-
const colors = resolvedTheme
|
|
166
|
-
const
|
|
167
|
-
const gray = colors.gray;
|
|
164
|
+
const { colors } = resolvedTheme;
|
|
165
|
+
const { gray, semantic } = colors;
|
|
168
166
|
const HUE_SCALES = [
|
|
169
167
|
"primary", "gray", "red", "orange", "yellow",
|
|
170
168
|
"green", "teal", "blue", "cyan", "purple", "pink",
|
|
171
169
|
];
|
|
172
|
-
const SEMANTIC_SCALES = ["success", "error", "warning", "info"];
|
|
170
|
+
const SEMANTIC_SCALES = ["success", "error", "warning", "info"];
|
|
173
171
|
const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
174
|
-
//
|
|
175
|
-
//
|
|
172
|
+
// The dark gray ramp runs dark(50) → light(900), so low rungs read as surfaces
|
|
173
|
+
// and high rungs as text — correct in dark, cleared in light.
|
|
176
174
|
const SEMANTIC_VARS = {
|
|
177
|
-
"text-heading": gray
|
|
178
|
-
"text-subtle": gray
|
|
179
|
-
"bg-main": gray
|
|
180
|
-
"bg-quaternary": gray
|
|
181
|
-
"bg-accent": gray
|
|
182
|
-
"bg-neutral": gray
|
|
183
|
-
"border-default": gray
|
|
184
|
-
"border-dark": gray
|
|
185
|
-
"border-error":
|
|
186
|
-
"border-warning":
|
|
175
|
+
"text-heading": gray[900], "text-body": gray[700],
|
|
176
|
+
"text-subtle": gray[500], "text-input": gray[500],
|
|
177
|
+
"bg-main": gray[50], "bg-secondary": gray[100], "bg-tertiary": gray[100],
|
|
178
|
+
"bg-quaternary": gray[200], "bg-light": gray[50], "bg-medium": gray[100],
|
|
179
|
+
"bg-accent": gray[200], "bg-subtle": gray[100], "bg-muted": gray[200],
|
|
180
|
+
"bg-neutral": gray[100], "bg-base": gray[50], "bg-table-header": gray[100],
|
|
181
|
+
"border-default": gray[200], "border-light": gray[100],
|
|
182
|
+
"border-dark": gray[300], "border-input": gray[300],
|
|
183
|
+
"border-error": semantic.error[500], "border-success": semantic.success[500],
|
|
184
|
+
"border-warning": semantic.warning[500], "border-info": semantic.info[500],
|
|
187
185
|
};
|
|
188
|
-
const set = (name, val) =>
|
|
186
|
+
const set = (name, val) => root.style.setProperty(`--color-${name}`, val);
|
|
189
187
|
const clear = (name) => root.style.removeProperty(`--color-${name}`);
|
|
190
188
|
const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
|
|
191
189
|
if (resolvedMode === "dark") {
|
|
192
190
|
for (const s of HUE_SCALES)
|
|
193
191
|
for (const r of RUNGS)
|
|
194
|
-
set(`${s}-${r}`,
|
|
192
|
+
set(`${s}-${r}`, colors[s][r]);
|
|
195
193
|
for (const s of SEMANTIC_SCALES)
|
|
196
194
|
for (const r of RUNGS)
|
|
197
|
-
set(`${s}-${r}`,
|
|
195
|
+
set(`${s}-${r}`, semantic[s][r]);
|
|
198
196
|
for (const [name, val] of Object.entries(SEMANTIC_VARS))
|
|
199
197
|
set(name, val);
|
|
200
198
|
}
|
|
@@ -22,33 +22,23 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
|
|
|
22
22
|
* the dot always matches what selecting that brand actually looks like,
|
|
23
23
|
* regardless of which brand/mode is currently active.
|
|
24
24
|
*/
|
|
25
|
-
const brandSwatchColor = (brand) =>
|
|
26
|
-
var _a, _b, _c, _d, _e;
|
|
27
|
-
return (_e = (_d = (_c = (_b = (_a = brandThemes[brand]) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.400";
|
|
28
|
-
};
|
|
25
|
+
const brandSwatchColor = (brand) => brandThemes[brand].light.colors.primary[500];
|
|
29
26
|
const BrandSwatch = ({ brand }) => (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
|
|
30
27
|
/**
|
|
31
28
|
* Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
|
|
32
29
|
* are read straight from the active theme — no `useColorModeValue` pairing needed here.
|
|
33
|
-
* Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
|
|
34
30
|
*/
|
|
35
31
|
const useSwitcherColors = () => {
|
|
36
|
-
|
|
37
|
-
const colors = useCustomTheme().colors;
|
|
32
|
+
const { colors } = useCustomTheme();
|
|
38
33
|
return {
|
|
39
|
-
trackBg:
|
|
40
|
-
activeBg:
|
|
41
|
-
activeColor:
|
|
42
|
-
mutedColor:
|
|
43
|
-
hoverBg:
|
|
44
|
-
borderColor:
|
|
45
|
-
//
|
|
46
|
-
|
|
47
|
-
// Re-deriving it here too and pushing it back via `sx` on every render caused a redundant
|
|
48
|
-
// Emotion style recompute per render, which showed up as flicker while hovering/scrolling
|
|
49
|
-
// this list. Keep menuColor (Menu.styles.ts doesn't set list `color` per this component's
|
|
50
|
-
// needs) but stop duplicating menuBg.
|
|
51
|
-
menuColor: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[900]) !== null && _0 !== void 0 ? _0 : "gray.900",
|
|
34
|
+
trackBg: colors.backgroundColor.secondary,
|
|
35
|
+
activeBg: colors.backgroundColor.main,
|
|
36
|
+
activeColor: colors.primary[500],
|
|
37
|
+
mutedColor: colors.text[600],
|
|
38
|
+
hoverBg: colors.gray[100],
|
|
39
|
+
borderColor: colors.border[200],
|
|
40
|
+
// NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
|
|
41
|
+
menuColor: colors.text[900],
|
|
52
42
|
};
|
|
53
43
|
};
|
|
54
44
|
const BrandMenu = ({ size }) => {
|
|
@@ -186,12 +186,8 @@ const disabled = {
|
|
|
186
186
|
800: "#625d75",
|
|
187
187
|
900: "#4b4759",
|
|
188
188
|
};
|
|
189
|
-
//
|
|
190
|
-
|
|
191
|
-
// original let white drop to 3.53 there (`from` already passed at 5.76, unchanged).
|
|
192
|
-
// Nudged one step further (4.511 -> 4.609): the first pass cleared AA by <0.02, too thin a
|
|
193
|
-
// margin to trust against rounding/rendering variance.
|
|
194
|
-
const gradient = { from: "#8B3FC8", to: "#df187a" };
|
|
189
|
+
// Single-hue gradient: white clears AA by margin, not by hundredths. See gradientTone.test.ts.
|
|
190
|
+
const gradient = { from: "#8b3fc8", to: "#762d9d" };
|
|
195
191
|
const palette = {
|
|
196
192
|
gradient,
|
|
197
193
|
primary,
|
|
@@ -18,11 +18,7 @@ const primary = {
|
|
|
18
18
|
const palette = {
|
|
19
19
|
...neutralTokens,
|
|
20
20
|
...buildBrandInk(PRIMARY_500),
|
|
21
|
-
|
|
22
|
-
// original let white drop to 2.98 there (`from` already passed at 4.83, unchanged).
|
|
23
|
-
// Nudged one step further (4.520 -> 4.608): the first pass cleared AA by <0.02, too thin a
|
|
24
|
-
// margin to trust against rounding/rendering variance.
|
|
25
|
-
gradient: { from: "#6b7280", to: "#5664f6" }, // slate gray → indigo
|
|
21
|
+
gradient: { from: "#666d7a", to: "#4a4e59" },
|
|
26
22
|
primary,
|
|
27
23
|
tertiary: { ...primary },
|
|
28
24
|
gray: {
|
package/package.json
CHANGED