@mindlogic-ai/logician-ui 4.0.0-alpha.22 → 4.0.0-alpha.23
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/components/Typography/Link.d.ts +25 -0
- package/dist/components/Typography/Link.d.ts.map +1 -1
- package/dist/components/Typography/Link.js +31 -4
- package/dist/components/Typography/Link.js.map +1 -1
- package/dist/components/Typography/Link.mjs +31 -5
- package/dist/components/Typography/Link.mjs.map +1 -1
- package/dist/components/Typography/index.d.ts +1 -1
- package/dist/components/Typography/index.d.ts.map +1 -1
- package/dist/theme/colors.d.ts +145 -37
- package/dist/theme/colors.d.ts.map +1 -1
- package/dist/theme/colors.js +98 -68
- package/dist/theme/colors.js.map +1 -1
- package/dist/theme/colors.mjs +98 -68
- package/dist/theme/colors.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/Typography/Link.tsx +31 -4
- package/src/components/Typography/index.ts +1 -1
- package/src/components/a11y.kwcag.test.tsx +118 -1
- package/src/theme/colors.ts +99 -69
|
@@ -2,5 +2,30 @@ import { LinkProps } from '@chakra-ui/react';
|
|
|
2
2
|
export interface LinkCustomProps extends Omit<LinkProps, 'variant'> {
|
|
3
3
|
variant?: 'error';
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* The ramp steps the link paints, exported so a test can assert BOTH halves at
|
|
7
|
+
* once: that the component still picks these tokens, and that these tokens
|
|
8
|
+
* still clear the contrast bar. Asserting only the second half is a test that
|
|
9
|
+
* passes while the component points somewhere else entirely — which is how the
|
|
10
|
+
* dark hover regressed with a green suite.
|
|
11
|
+
*/
|
|
12
|
+
export declare const LINK_RAMP: {
|
|
13
|
+
readonly default: {
|
|
14
|
+
readonly base: "primary.main";
|
|
15
|
+
readonly _dark: "primary.dark";
|
|
16
|
+
};
|
|
17
|
+
readonly error: {
|
|
18
|
+
readonly base: "danger.main";
|
|
19
|
+
readonly _dark: "danger.dark";
|
|
20
|
+
};
|
|
21
|
+
readonly defaultHover: {
|
|
22
|
+
readonly base: "primary.dark";
|
|
23
|
+
readonly _dark: "primary.darker";
|
|
24
|
+
};
|
|
25
|
+
readonly errorHover: {
|
|
26
|
+
readonly base: "danger.dark";
|
|
27
|
+
readonly _dark: "danger.darker";
|
|
28
|
+
};
|
|
29
|
+
};
|
|
5
30
|
export declare const Link: import("react").ForwardRefExoticComponent<LinkCustomProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
6
31
|
//# sourceMappingURL=Link.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,+
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,IAAI,+GAwDhB,CAAC"}
|
|
@@ -5,6 +5,19 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var react = require('@chakra-ui/react');
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* The ramp steps the link paints, exported so a test can assert BOTH halves at
|
|
10
|
+
* once: that the component still picks these tokens, and that these tokens
|
|
11
|
+
* still clear the contrast bar. Asserting only the second half is a test that
|
|
12
|
+
* passes while the component points somewhere else entirely — which is how the
|
|
13
|
+
* dark hover regressed with a green suite.
|
|
14
|
+
*/
|
|
15
|
+
const LINK_RAMP = {
|
|
16
|
+
default: { base: 'primary.main', _dark: 'primary.dark' },
|
|
17
|
+
error: { base: 'danger.main', _dark: 'danger.dark' },
|
|
18
|
+
defaultHover: { base: 'primary.dark', _dark: 'primary.darker' },
|
|
19
|
+
errorHover: { base: 'danger.dark', _dark: 'danger.darker' },
|
|
20
|
+
};
|
|
8
21
|
const Link = React.forwardRef(({ color, variant, ...rest }, ref) => {
|
|
9
22
|
// Theme-aware, because `.main` is tuned against a WHITE page. On the dark
|
|
10
23
|
// canvas (#181A20) `primary.main` measures 4.19:1 and `danger.main` 4.26:1
|
|
@@ -12,10 +25,23 @@ const Link = React.forwardRef(({ color, variant, ...rest }, ref) => {
|
|
|
12
25
|
// text, and every link in a consuming app inherits it. The `.dark` end of
|
|
13
26
|
// each ramp is the far side from the PAGE rather than a fixed lightness, so
|
|
14
27
|
// in dark mode it resolves lighter: 6.68:1 and 6.38:1.
|
|
15
|
-
const defaultColor =
|
|
16
|
-
const errorColor =
|
|
17
|
-
|
|
18
|
-
|
|
28
|
+
const defaultColor = LINK_RAMP.default;
|
|
29
|
+
const errorColor = LINK_RAMP.error;
|
|
30
|
+
// The hover has to move AWAY from the page in BOTH modes, and `.main` is
|
|
31
|
+
// the wrong end of the ramp to move toward in dark. Mirroring the light
|
|
32
|
+
// step ("one darker") instead of reflecting it sent the dark hover back
|
|
33
|
+
// toward the background: resting 6.68:1 → hovering **4.19:1**, under the
|
|
34
|
+
// same 4.5:1 the resting colour above was just fixed to clear. KWCAG
|
|
35
|
+
// 5.3.3 applies to text in every state a user can put it in, and hover is
|
|
36
|
+
// a state a mouse user is IN while reading the link.
|
|
37
|
+
//
|
|
38
|
+
// `.darker` is the step past `.dark` at both ends, so one token is correct
|
|
39
|
+
// in both modes with no special-casing: light 11.98:1 (unchanged from
|
|
40
|
+
// before), dark 10.68:1. Error the same: 10.83:1 and 10.34:1.
|
|
41
|
+
//
|
|
42
|
+
// No axe rule would have caught this — it measures the resting state only.
|
|
43
|
+
const defaultHoverColor = LINK_RAMP.defaultHover;
|
|
44
|
+
const errorHoverColor = LINK_RAMP.errorHover;
|
|
19
45
|
// `color ?? defaultColor`, not a `typeof color === 'string'` narrowing. The
|
|
20
46
|
// old form silently DISCARDED any non-string value, so a call site passing
|
|
21
47
|
// a per-theme `{ base, _dark }` — the documented Chakra way to fix exactly
|
|
@@ -36,5 +62,6 @@ const Link = React.forwardRef(({ color, variant, ...rest }, ref) => {
|
|
|
36
62
|
});
|
|
37
63
|
Link.displayName = 'Link';
|
|
38
64
|
|
|
65
|
+
exports.LINK_RAMP = LINK_RAMP;
|
|
39
66
|
exports.Link = Link;
|
|
40
67
|
//# sourceMappingURL=Link.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../../src/components/Typography/Link.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraLink"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../src/components/Typography/Link.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraLink"],"mappings":";;;;;;;AAOA;;;;;;AAMG;AACI,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IACxD,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;IACpD,YAAY,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,gBAAgB,EAAE;IAC/D,UAAU,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE;;AAGtD,MAAM,IAAI,GAAGA,gBAAU,CAC5B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;;;;;;AAOnC,IAAA,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO;AACtC,IAAA,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK;;;;;;;;;;;;;;AAclC,IAAA,MAAM,iBAAiB,GAAG,SAAS,CAAC,YAAY;AAChD,IAAA,MAAM,eAAe,GAAG,SAAS,CAAC,UAAU;;;;;;;AAQ5C,IAAA,MAAM,SAAS,GACb,OAAO,KAAK,OAAO,GAAG,UAAU,IAAI,KAAK,IAAI,YAAY,CAAC;AAE5D,IAAA,MAAM,UAAU,GACd,OAAO,KAAK,OAAO,GAAG,eAAe,GAAG,iBAAiB;AAE3D,IAAA,QACEC,cAAA,CAACC,UAAU,EAAA,EACT,GAAG,EAAE,GAAG;;;;;AAKR,QAAA,UAAU,EAAC,SAAS,EACpB,SAAS,EAAC,UAAU,EACpB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE;AACN,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,SAAS,EAAE,MAAM;SAClB,EAAA,GACG,IAAI,EAAA,CACR;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;;"}
|
|
@@ -3,6 +3,19 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { Link as Link$1 } from '@chakra-ui/react';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* The ramp steps the link paints, exported so a test can assert BOTH halves at
|
|
8
|
+
* once: that the component still picks these tokens, and that these tokens
|
|
9
|
+
* still clear the contrast bar. Asserting only the second half is a test that
|
|
10
|
+
* passes while the component points somewhere else entirely — which is how the
|
|
11
|
+
* dark hover regressed with a green suite.
|
|
12
|
+
*/
|
|
13
|
+
const LINK_RAMP = {
|
|
14
|
+
default: { base: 'primary.main', _dark: 'primary.dark' },
|
|
15
|
+
error: { base: 'danger.main', _dark: 'danger.dark' },
|
|
16
|
+
defaultHover: { base: 'primary.dark', _dark: 'primary.darker' },
|
|
17
|
+
errorHover: { base: 'danger.dark', _dark: 'danger.darker' },
|
|
18
|
+
};
|
|
6
19
|
const Link = forwardRef(({ color, variant, ...rest }, ref) => {
|
|
7
20
|
// Theme-aware, because `.main` is tuned against a WHITE page. On the dark
|
|
8
21
|
// canvas (#181A20) `primary.main` measures 4.19:1 and `danger.main` 4.26:1
|
|
@@ -10,10 +23,23 @@ const Link = forwardRef(({ color, variant, ...rest }, ref) => {
|
|
|
10
23
|
// text, and every link in a consuming app inherits it. The `.dark` end of
|
|
11
24
|
// each ramp is the far side from the PAGE rather than a fixed lightness, so
|
|
12
25
|
// in dark mode it resolves lighter: 6.68:1 and 6.38:1.
|
|
13
|
-
const defaultColor =
|
|
14
|
-
const errorColor =
|
|
15
|
-
|
|
16
|
-
|
|
26
|
+
const defaultColor = LINK_RAMP.default;
|
|
27
|
+
const errorColor = LINK_RAMP.error;
|
|
28
|
+
// The hover has to move AWAY from the page in BOTH modes, and `.main` is
|
|
29
|
+
// the wrong end of the ramp to move toward in dark. Mirroring the light
|
|
30
|
+
// step ("one darker") instead of reflecting it sent the dark hover back
|
|
31
|
+
// toward the background: resting 6.68:1 → hovering **4.19:1**, under the
|
|
32
|
+
// same 4.5:1 the resting colour above was just fixed to clear. KWCAG
|
|
33
|
+
// 5.3.3 applies to text in every state a user can put it in, and hover is
|
|
34
|
+
// a state a mouse user is IN while reading the link.
|
|
35
|
+
//
|
|
36
|
+
// `.darker` is the step past `.dark` at both ends, so one token is correct
|
|
37
|
+
// in both modes with no special-casing: light 11.98:1 (unchanged from
|
|
38
|
+
// before), dark 10.68:1. Error the same: 10.83:1 and 10.34:1.
|
|
39
|
+
//
|
|
40
|
+
// No axe rule would have caught this — it measures the resting state only.
|
|
41
|
+
const defaultHoverColor = LINK_RAMP.defaultHover;
|
|
42
|
+
const errorHoverColor = LINK_RAMP.errorHover;
|
|
17
43
|
// `color ?? defaultColor`, not a `typeof color === 'string'` narrowing. The
|
|
18
44
|
// old form silently DISCARDED any non-string value, so a call site passing
|
|
19
45
|
// a per-theme `{ base, _dark }` — the documented Chakra way to fix exactly
|
|
@@ -34,5 +60,5 @@ const Link = forwardRef(({ color, variant, ...rest }, ref) => {
|
|
|
34
60
|
});
|
|
35
61
|
Link.displayName = 'Link';
|
|
36
62
|
|
|
37
|
-
export { Link };
|
|
63
|
+
export { LINK_RAMP, Link };
|
|
38
64
|
//# sourceMappingURL=Link.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.mjs","sources":["../../../src/components/Typography/Link.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraLink"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Link.mjs","sources":["../../../src/components/Typography/Link.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraLink"],"mappings":";;;;;AAOA;;;;;;AAMG;AACI,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;IACxD,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;IACpD,YAAY,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,gBAAgB,EAAE;IAC/D,UAAU,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE;;AAGtD,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;;;;;;AAOnC,IAAA,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO;AACtC,IAAA,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK;;;;;;;;;;;;;;AAclC,IAAA,MAAM,iBAAiB,GAAG,SAAS,CAAC,YAAY;AAChD,IAAA,MAAM,eAAe,GAAG,SAAS,CAAC,UAAU;;;;;;;AAQ5C,IAAA,MAAM,SAAS,GACb,OAAO,KAAK,OAAO,GAAG,UAAU,IAAI,KAAK,IAAI,YAAY,CAAC;AAE5D,IAAA,MAAM,UAAU,GACd,OAAO,KAAK,OAAO,GAAG,eAAe,GAAG,iBAAiB;AAE3D,IAAA,QACEA,GAAA,CAACC,MAAU,EAAA,EACT,GAAG,EAAE,GAAG;;;;;AAKR,QAAA,UAAU,EAAC,SAAS,EACpB,SAAS,EAAC,UAAU,EACpB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE;AACN,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,SAAS,EAAE,MAAM;SAClB,EAAA,GACG,IAAI,EAAA,CACR;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
|
|
@@ -4,7 +4,7 @@ export { H2 } from './H2';
|
|
|
4
4
|
export { H3 } from './H3';
|
|
5
5
|
export { H4 } from './H4';
|
|
6
6
|
export { H5 } from './H5';
|
|
7
|
-
export { Link } from './Link';
|
|
7
|
+
export { Link, LINK_RAMP } from './Link';
|
|
8
8
|
export { Overline } from './Overline';
|
|
9
9
|
export { Subtext } from './Subtext';
|
|
10
10
|
export { Subtitle } from './Subtitle';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,YAAY,EAAE,eAAe,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC3D,YAAY,EACV,eAAe,IAAI,YAAY,EAC/B,eAAe,IAAI,aAAa,EAChC,eAAe,IAAI,YAAY,EAC/B,eAAe,IAAI,aAAa,EAChC,eAAe,IAAI,SAAS,EAC5B,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,YAAY,IAAI,OAAO,EACvB,YAAY,IAAI,OAAO,EACvB,YAAY,IAAI,OAAO,EACvB,YAAY,IAAI,OAAO,EACvB,YAAY,IAAI,OAAO,GACxB,MAAM,kBAAkB,CAAC"}
|
package/dist/theme/colors.d.ts
CHANGED
|
@@ -33,6 +33,32 @@
|
|
|
33
33
|
* @see https://www.w3.org/TR/WCAG21/#contrast-minimum
|
|
34
34
|
* @version 3.0.0
|
|
35
35
|
*/
|
|
36
|
+
/**
|
|
37
|
+
* Semantic color tokens that map primitive colors to UI intent.
|
|
38
|
+
*
|
|
39
|
+
* Use these tokens in components instead of raw color values:
|
|
40
|
+
* - `primary.*`: Buttons, links, focus states
|
|
41
|
+
* - `secondary.*`: Accent elements, highlights
|
|
42
|
+
* - `success.*`: Success messages, confirmations
|
|
43
|
+
* - `warning.*`: Warning messages, caution states
|
|
44
|
+
* - `danger.*`: Error messages, destructive actions
|
|
45
|
+
*
|
|
46
|
+
* Each category includes:
|
|
47
|
+
* - `lightest`: Lightest backgrounds (ghost states, very subtle fills)
|
|
48
|
+
* - `extralight`: Extra-light backgrounds (badges, subtle fills)
|
|
49
|
+
* - `lighter`: Light backgrounds (toast backgrounds, subtle fills)
|
|
50
|
+
* - `light`: Medium backgrounds (hover states, medium fills)
|
|
51
|
+
* - `main`: Primary color (buttons, text, icons)
|
|
52
|
+
* - `dark`: Dark variant (text on light backgrounds)
|
|
53
|
+
* - `darker`: Darkest variant (high-contrast text)
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```tsx
|
|
57
|
+
* <Button bgColor="primary.main" />
|
|
58
|
+
* <Alert bgColor="danger.lighter" color="danger.dark" />
|
|
59
|
+
* <Badge bgColor="success.lightest" color="success.dark" />
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
36
62
|
export declare const semanticTokens: {
|
|
37
63
|
readonly colors: {
|
|
38
64
|
/**
|
|
@@ -344,103 +370,103 @@ export declare const semanticTokens: {
|
|
|
344
370
|
readonly 0: {
|
|
345
371
|
readonly value: {
|
|
346
372
|
readonly base: "{colors.gray.0}";
|
|
347
|
-
readonly _dark: "
|
|
373
|
+
readonly _dark: "{colors.grayDark.1500}";
|
|
348
374
|
};
|
|
349
375
|
};
|
|
350
376
|
readonly 50: {
|
|
351
377
|
readonly value: {
|
|
352
378
|
readonly base: "{colors.gray.50}";
|
|
353
|
-
readonly _dark: "
|
|
379
|
+
readonly _dark: "{colors.grayDark.1400}";
|
|
354
380
|
};
|
|
355
381
|
};
|
|
356
382
|
readonly 100: {
|
|
357
383
|
readonly value: {
|
|
358
384
|
readonly base: "{colors.gray.100}";
|
|
359
|
-
readonly _dark: "
|
|
385
|
+
readonly _dark: "{colors.grayDark.1300}";
|
|
360
386
|
};
|
|
361
387
|
};
|
|
362
388
|
readonly 200: {
|
|
363
389
|
readonly value: {
|
|
364
390
|
readonly base: "{colors.gray.200}";
|
|
365
|
-
readonly _dark: "
|
|
391
|
+
readonly _dark: "{colors.grayDark.1200}";
|
|
366
392
|
};
|
|
367
393
|
};
|
|
368
394
|
readonly 300: {
|
|
369
395
|
readonly value: {
|
|
370
396
|
readonly base: "{colors.gray.300}";
|
|
371
|
-
readonly _dark: "
|
|
397
|
+
readonly _dark: "{colors.grayDark.1100}";
|
|
372
398
|
};
|
|
373
399
|
};
|
|
374
400
|
readonly 400: {
|
|
375
401
|
readonly value: {
|
|
376
402
|
readonly base: "{colors.gray.400}";
|
|
377
|
-
readonly _dark: "
|
|
403
|
+
readonly _dark: "{colors.grayDark.1000}";
|
|
378
404
|
};
|
|
379
405
|
};
|
|
380
406
|
readonly 500: {
|
|
381
407
|
readonly value: {
|
|
382
408
|
readonly base: "{colors.gray.500}";
|
|
383
|
-
readonly _dark: "
|
|
409
|
+
readonly _dark: "{colors.grayDark.900}";
|
|
384
410
|
};
|
|
385
411
|
};
|
|
386
412
|
readonly 600: {
|
|
387
413
|
readonly value: {
|
|
388
414
|
readonly base: "{colors.gray.600}";
|
|
389
|
-
readonly _dark: "
|
|
415
|
+
readonly _dark: "{colors.grayDark.fg600}";
|
|
390
416
|
};
|
|
391
417
|
};
|
|
392
418
|
readonly 700: {
|
|
393
419
|
readonly value: {
|
|
394
420
|
readonly base: "{colors.gray.700}";
|
|
395
|
-
readonly _dark: "
|
|
421
|
+
readonly _dark: "{colors.grayDark.fg700}";
|
|
396
422
|
};
|
|
397
423
|
};
|
|
398
424
|
readonly 800: {
|
|
399
425
|
readonly value: {
|
|
400
426
|
readonly base: "{colors.gray.800}";
|
|
401
|
-
readonly _dark: "
|
|
427
|
+
readonly _dark: "{colors.grayDark.600}";
|
|
402
428
|
};
|
|
403
429
|
};
|
|
404
430
|
readonly 900: {
|
|
405
431
|
readonly value: {
|
|
406
432
|
readonly base: "{colors.gray.900}";
|
|
407
|
-
readonly _dark: "
|
|
433
|
+
readonly _dark: "{colors.grayDark.500}";
|
|
408
434
|
};
|
|
409
435
|
};
|
|
410
436
|
readonly 1000: {
|
|
411
437
|
readonly value: {
|
|
412
438
|
readonly base: "{colors.gray.1000}";
|
|
413
|
-
readonly _dark: "
|
|
439
|
+
readonly _dark: "{colors.grayDark.400}";
|
|
414
440
|
};
|
|
415
441
|
};
|
|
416
442
|
readonly 1100: {
|
|
417
443
|
readonly value: {
|
|
418
444
|
readonly base: "{colors.gray.1100}";
|
|
419
|
-
readonly _dark: "
|
|
445
|
+
readonly _dark: "{colors.grayDark.300}";
|
|
420
446
|
};
|
|
421
447
|
};
|
|
422
448
|
readonly 1200: {
|
|
423
449
|
readonly value: {
|
|
424
450
|
readonly base: "{colors.gray.1200}";
|
|
425
|
-
readonly _dark: "
|
|
451
|
+
readonly _dark: "{colors.grayDark.200}";
|
|
426
452
|
};
|
|
427
453
|
};
|
|
428
454
|
readonly 1300: {
|
|
429
455
|
readonly value: {
|
|
430
456
|
readonly base: "{colors.gray.1300}";
|
|
431
|
-
readonly _dark: "
|
|
457
|
+
readonly _dark: "{colors.grayDark.100}";
|
|
432
458
|
};
|
|
433
459
|
};
|
|
434
460
|
readonly 1400: {
|
|
435
461
|
readonly value: {
|
|
436
462
|
readonly base: "{colors.gray.1400}";
|
|
437
|
-
readonly _dark: "
|
|
463
|
+
readonly _dark: "{colors.grayDark.50}";
|
|
438
464
|
};
|
|
439
465
|
};
|
|
440
466
|
readonly 1500: {
|
|
441
467
|
readonly value: {
|
|
442
468
|
readonly base: "{colors.gray.1500}";
|
|
443
|
-
readonly _dark: "
|
|
469
|
+
readonly _dark: "{colors.grayDark.0}";
|
|
444
470
|
};
|
|
445
471
|
};
|
|
446
472
|
};
|
|
@@ -459,61 +485,61 @@ export declare const semanticTokens: {
|
|
|
459
485
|
readonly DEFAULT: {
|
|
460
486
|
readonly value: {
|
|
461
487
|
readonly _light: "{colors.white}";
|
|
462
|
-
readonly _dark: "
|
|
488
|
+
readonly _dark: "{colors.grayDark.1500}";
|
|
463
489
|
};
|
|
464
490
|
};
|
|
465
491
|
readonly canvas: {
|
|
466
492
|
readonly value: {
|
|
467
493
|
readonly base: "{colors.gray.0}";
|
|
468
|
-
readonly _dark: "
|
|
494
|
+
readonly _dark: "{colors.grayDark.1500}";
|
|
469
495
|
};
|
|
470
496
|
};
|
|
471
497
|
readonly surface: {
|
|
472
498
|
readonly value: {
|
|
473
499
|
readonly base: "{colors.white}";
|
|
474
|
-
readonly _dark: "
|
|
500
|
+
readonly _dark: "{colors.grayDark.1400}";
|
|
475
501
|
};
|
|
476
502
|
};
|
|
477
503
|
readonly raised: {
|
|
478
504
|
readonly value: {
|
|
479
505
|
readonly base: "{colors.white}";
|
|
480
|
-
readonly _dark: "
|
|
506
|
+
readonly _dark: "{colors.grayDark.1100}";
|
|
481
507
|
};
|
|
482
508
|
};
|
|
483
509
|
readonly subtle: {
|
|
484
510
|
readonly value: {
|
|
485
511
|
readonly _light: "{colors.gray.50}";
|
|
486
|
-
readonly _dark: "
|
|
512
|
+
readonly _dark: "{colors.grayDark.1300}";
|
|
487
513
|
};
|
|
488
514
|
};
|
|
489
515
|
readonly muted: {
|
|
490
516
|
readonly value: {
|
|
491
517
|
readonly _light: "{colors.gray.100}";
|
|
492
|
-
readonly _dark: "
|
|
518
|
+
readonly _dark: "{colors.grayDark.1200}";
|
|
493
519
|
};
|
|
494
520
|
};
|
|
495
521
|
readonly inverse: {
|
|
496
522
|
readonly value: {
|
|
497
523
|
readonly base: "{colors.gray.1300}";
|
|
498
|
-
readonly _dark: "
|
|
524
|
+
readonly _dark: "{colors.grayDark.50}";
|
|
499
525
|
};
|
|
500
526
|
};
|
|
501
527
|
readonly sunken: {
|
|
502
528
|
readonly value: {
|
|
503
529
|
readonly base: "{colors.gray.50}";
|
|
504
|
-
readonly _dark: "
|
|
530
|
+
readonly _dark: "{colors.grayDark.1500}";
|
|
505
531
|
};
|
|
506
532
|
};
|
|
507
533
|
readonly track: {
|
|
508
534
|
readonly value: {
|
|
509
535
|
readonly base: "{colors.gray.300}";
|
|
510
|
-
readonly _dark: "
|
|
536
|
+
readonly _dark: "{colors.grayDark.1200}";
|
|
511
537
|
};
|
|
512
538
|
};
|
|
513
539
|
readonly panel: {
|
|
514
540
|
readonly value: {
|
|
515
541
|
readonly _light: "{colors.white}";
|
|
516
|
-
readonly _dark: "
|
|
542
|
+
readonly _dark: "{colors.grayDark.1400}";
|
|
517
543
|
};
|
|
518
544
|
};
|
|
519
545
|
/**
|
|
@@ -559,37 +585,37 @@ export declare const semanticTokens: {
|
|
|
559
585
|
readonly DEFAULT: {
|
|
560
586
|
readonly value: {
|
|
561
587
|
readonly _light: "{colors.black}";
|
|
562
|
-
readonly _dark: "
|
|
588
|
+
readonly _dark: "{colors.grayDark.50}";
|
|
563
589
|
};
|
|
564
590
|
};
|
|
565
591
|
readonly emphasized: {
|
|
566
592
|
readonly value: {
|
|
567
593
|
readonly base: "{colors.gray.1300}";
|
|
568
|
-
readonly _dark: "
|
|
594
|
+
readonly _dark: "{colors.grayDark.200}";
|
|
569
595
|
};
|
|
570
596
|
};
|
|
571
597
|
readonly default: {
|
|
572
598
|
readonly value: {
|
|
573
599
|
readonly base: "{colors.gray.1000}";
|
|
574
|
-
readonly _dark: "
|
|
600
|
+
readonly _dark: "{colors.grayDark.300}";
|
|
575
601
|
};
|
|
576
602
|
};
|
|
577
603
|
readonly muted: {
|
|
578
604
|
readonly value: {
|
|
579
605
|
readonly _light: "{colors.gray.900}";
|
|
580
|
-
readonly _dark: "
|
|
606
|
+
readonly _dark: "{colors.grayDark.400}";
|
|
581
607
|
};
|
|
582
608
|
};
|
|
583
609
|
readonly subtle: {
|
|
584
610
|
readonly value: {
|
|
585
611
|
readonly _light: "{colors.gray.700}";
|
|
586
|
-
readonly _dark: "
|
|
612
|
+
readonly _dark: "{colors.grayDark.fgSubtle}";
|
|
587
613
|
};
|
|
588
614
|
};
|
|
589
615
|
readonly inverse: {
|
|
590
616
|
readonly value: {
|
|
591
617
|
readonly base: "{colors.gray.0}";
|
|
592
|
-
readonly _dark: "
|
|
618
|
+
readonly _dark: "{colors.grayDark.1400}";
|
|
593
619
|
};
|
|
594
620
|
};
|
|
595
621
|
};
|
|
@@ -604,25 +630,25 @@ export declare const semanticTokens: {
|
|
|
604
630
|
readonly DEFAULT: {
|
|
605
631
|
readonly value: {
|
|
606
632
|
readonly _light: "{colors.gray.200}";
|
|
607
|
-
readonly _dark: "
|
|
633
|
+
readonly _dark: "{colors.grayDark.800}";
|
|
608
634
|
};
|
|
609
635
|
};
|
|
610
636
|
readonly default: {
|
|
611
637
|
readonly value: {
|
|
612
638
|
readonly base: "{colors.gray.300}";
|
|
613
|
-
readonly _dark: "
|
|
639
|
+
readonly _dark: "{colors.grayDark.1100}";
|
|
614
640
|
};
|
|
615
641
|
};
|
|
616
642
|
readonly subtle: {
|
|
617
643
|
readonly value: {
|
|
618
644
|
readonly _light: "{colors.gray.200}";
|
|
619
|
-
readonly _dark: "
|
|
645
|
+
readonly _dark: "{colors.grayDark.1300}";
|
|
620
646
|
};
|
|
621
647
|
};
|
|
622
648
|
readonly strong: {
|
|
623
649
|
readonly value: {
|
|
624
650
|
readonly base: "{colors.gray.500}";
|
|
625
|
-
readonly _dark: "
|
|
651
|
+
readonly _dark: "{colors.grayDark.900}";
|
|
626
652
|
};
|
|
627
653
|
};
|
|
628
654
|
};
|
|
@@ -920,6 +946,88 @@ export declare const colors: {
|
|
|
920
946
|
value: string;
|
|
921
947
|
};
|
|
922
948
|
};
|
|
949
|
+
/**
|
|
950
|
+
* Dark-mode neutral palette — the halved-saturation counterpart of each
|
|
951
|
+
* primitive `gray.N` (same hue and lightness, HSL saturation cut by ~50%,
|
|
952
|
+
* e.g. `gray.1300` #1E2433 @ 26% → #23262E @ 13%). The blue-tinted `gray`
|
|
953
|
+
* ramp reads as the right neutral in light mode but turns muddy/
|
|
954
|
+
* over-chromatic as a dark surface, so every dark-mode neutral in the
|
|
955
|
+
* semantic layer (`slate.*`, and the `_dark` of `bg`/`fg`/`border`) resolves
|
|
956
|
+
* to a step of this scale instead of a raw `gray` step. Light mode is
|
|
957
|
+
* untouched — it keeps referencing `{colors.gray.*}` verbatim.
|
|
958
|
+
*
|
|
959
|
+
* Exposed as a primitive scale (rather than the previous inlined hex
|
|
960
|
+
* literals) so a consumer theme — e.g. FactChat's per-tenant
|
|
961
|
+
* `theme_color_overrides` — can rebrand dark mode by overriding these
|
|
962
|
+
* tokens, the same way overriding `blue.*` retints the `primary.*` ramp.
|
|
963
|
+
*
|
|
964
|
+
* The three `fg*` steps are the hand-tuned a11y lifts documented at their
|
|
965
|
+
* consuming tokens (`slate.600`/`slate.700`/`fg.subtle` in dark mode): the
|
|
966
|
+
* straight mirrors measured under WCAG AA 4.5:1 on the dark canvas/surface,
|
|
967
|
+
* so these sit slightly lighter than their scale neighbours.
|
|
968
|
+
*/
|
|
969
|
+
grayDark: {
|
|
970
|
+
0: {
|
|
971
|
+
value: string;
|
|
972
|
+
};
|
|
973
|
+
50: {
|
|
974
|
+
value: string;
|
|
975
|
+
};
|
|
976
|
+
100: {
|
|
977
|
+
value: string;
|
|
978
|
+
};
|
|
979
|
+
200: {
|
|
980
|
+
value: string;
|
|
981
|
+
};
|
|
982
|
+
300: {
|
|
983
|
+
value: string;
|
|
984
|
+
};
|
|
985
|
+
400: {
|
|
986
|
+
value: string;
|
|
987
|
+
};
|
|
988
|
+
500: {
|
|
989
|
+
value: string;
|
|
990
|
+
};
|
|
991
|
+
600: {
|
|
992
|
+
value: string;
|
|
993
|
+
};
|
|
994
|
+
700: {
|
|
995
|
+
value: string;
|
|
996
|
+
};
|
|
997
|
+
800: {
|
|
998
|
+
value: string;
|
|
999
|
+
};
|
|
1000
|
+
900: {
|
|
1001
|
+
value: string;
|
|
1002
|
+
};
|
|
1003
|
+
1000: {
|
|
1004
|
+
value: string;
|
|
1005
|
+
};
|
|
1006
|
+
1100: {
|
|
1007
|
+
value: string;
|
|
1008
|
+
};
|
|
1009
|
+
1200: {
|
|
1010
|
+
value: string;
|
|
1011
|
+
};
|
|
1012
|
+
1300: {
|
|
1013
|
+
value: string;
|
|
1014
|
+
};
|
|
1015
|
+
1400: {
|
|
1016
|
+
value: string;
|
|
1017
|
+
};
|
|
1018
|
+
1500: {
|
|
1019
|
+
value: string;
|
|
1020
|
+
};
|
|
1021
|
+
fg600: {
|
|
1022
|
+
value: string;
|
|
1023
|
+
};
|
|
1024
|
+
fg700: {
|
|
1025
|
+
value: string;
|
|
1026
|
+
};
|
|
1027
|
+
fgSubtle: {
|
|
1028
|
+
value: string;
|
|
1029
|
+
};
|
|
1030
|
+
};
|
|
923
1031
|
/**
|
|
924
1032
|
* Legacy purple palette (aliased to violet for backwards compatibility)
|
|
925
1033
|
* @deprecated Use `violet` instead
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAOH,eAAO,MAAM,cAAc;;QAEvB;;;;;;;;;;;;WAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqCH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA6BH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;;;;;;;;;;;;;;;;;;WAwBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAuDH;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAwED;;;;;;;;;eASG;;;;;;;;;;;;;;;;;;;;;;QAcL;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgDH;;;;;;WAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BG,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,kBAAkB,GAC1B,MACI,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,UAAU,GACV,aAAa,EAAE,GACnB,mBAAmB,GACnB,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,EAAE,GACjE,UAAU,SAAS,GAAG,QAAQ,GAAG,QAAQ,EAAE,GAI3C,SACI,CAAC,GACD,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,EAAE,GACV,WAAW,MAAM,GAAG,YAAY,EAAE,GAClC,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,IACzD,UAAU,GACV,YAAY,GACZ,SAAS,GACT,OAAO,GACP,MAAM,GACN,MAAM,GACN,QAAQ,EAAE,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,MAAM;IACjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBH;;;;;;;;;;;;;;;;;;;OAmBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyBH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBJ,CAAC"}
|