@mohasinac/appkit 4.54.1 → 4.55.0-next.0
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/.build-stamp.json +5 -5
- package/dist/features/media/messages/en.json +67 -67
- package/dist/security/csp.d.ts +16 -1
- package/dist/security/csp.js +5 -3
- package/dist/styles.css +536 -381
- package/dist/tokens/themes/index.d.ts +3 -1
- package/dist/tokens/themes/index.js +11 -1
- package/dist/tokens/themes/technical-dark.d.ts +30 -0
- package/dist/tokens/themes/technical-dark.js +103 -0
- package/dist/tokens/themes/technical-light.d.ts +22 -0
- package/dist/tokens/themes/technical-light.js +89 -0
- package/dist/tokens/tokens.css +155 -0
- package/dist/ui/components/GatedPrice.style.css +43 -43
- package/dist/ui/components/QuickCreateModal.style.css +78 -78
- package/dist/ui/forms/FormShell.style.css +260 -260
- package/package.json +1 -1
|
@@ -2,8 +2,10 @@ import { DEFAULT_DARK_THEME } from "./default-dark";
|
|
|
2
2
|
import { DEFAULT_LIGHT_THEME } from "./default-light";
|
|
3
3
|
import { COBALT_NIGHT_THEME } from "./cobalt-night";
|
|
4
4
|
import { SUNSET_THEME } from "./sunset";
|
|
5
|
+
import { TECHNICAL_DARK_THEME } from "./technical-dark";
|
|
6
|
+
import { TECHNICAL_LIGHT_THEME } from "./technical-light";
|
|
5
7
|
import type { ThemeMode, ThemeRecord } from "./types";
|
|
6
|
-
export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME };
|
|
8
|
+
export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME, TECHNICAL_DARK_THEME, TECHNICAL_LIGHT_THEME, };
|
|
7
9
|
export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required";
|
|
8
10
|
export type { RequiredThemeToken } from "./required";
|
|
9
11
|
export type { GradientKey, ThemeMode, ThemeRecord } from "./types";
|
|
@@ -2,7 +2,9 @@ import { DEFAULT_DARK_THEME } from "./default-dark.js";
|
|
|
2
2
|
import { DEFAULT_LIGHT_THEME } from "./default-light.js";
|
|
3
3
|
import { COBALT_NIGHT_THEME } from "./cobalt-night.js";
|
|
4
4
|
import { SUNSET_THEME } from "./sunset.js";
|
|
5
|
-
|
|
5
|
+
import { TECHNICAL_DARK_THEME } from "./technical-dark.js";
|
|
6
|
+
import { TECHNICAL_LIGHT_THEME } from "./technical-light.js";
|
|
7
|
+
export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME, TECHNICAL_DARK_THEME, TECHNICAL_LIGHT_THEME, };
|
|
6
8
|
export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required.js";
|
|
7
9
|
/** Built-in themes that ship with appkit; admin cannot delete these. */
|
|
8
10
|
export const BUILT_IN_THEMES = [
|
|
@@ -17,6 +19,14 @@ export const BUILT_IN_THEMES = [
|
|
|
17
19
|
export const THEME_TEMPLATES = [
|
|
18
20
|
COBALT_NIGHT_THEME,
|
|
19
21
|
SUNSET_THEME,
|
|
22
|
+
/*
|
|
23
|
+
* Technical Dark / Light — a developer-tool identity: graphite surfaces,
|
|
24
|
+
* hairline borders, a mono-forward type stack and syntax-palette accents
|
|
25
|
+
* reused semantically (difficulty badges, submission verdicts, status chips).
|
|
26
|
+
* Shipped as a matched PAIR so switching mode does not change identity.
|
|
27
|
+
*/
|
|
28
|
+
TECHNICAL_DARK_THEME,
|
|
29
|
+
TECHNICAL_LIGHT_THEME,
|
|
20
30
|
];
|
|
21
31
|
/**
|
|
22
32
|
* Find the default built-in theme for a given mode.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { ThemeRecord } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Theme template — Technical Dark.
|
|
4
|
+
*
|
|
5
|
+
* A developer-tool identity rather than a marketing one: a near-black graphite
|
|
6
|
+
* base, ONE elevation step, hairline borders, and accents drawn from a syntax
|
|
7
|
+
* palette (keyword violet, string green, number amber, error red) reused
|
|
8
|
+
* semantically for difficulty badges, submission verdicts and status chips.
|
|
9
|
+
*
|
|
10
|
+
* Deliberately different from `default-dark` (crimson + cyan on navy): there is
|
|
11
|
+
* no brand gradient wash, surfaces sit close together in luminance, and the
|
|
12
|
+
* type stack is mono-forward — `display`/`sans` are monospace for headings,
|
|
13
|
+
* labels, IDs and tables, while `editorial` carries a real reading face so
|
|
14
|
+
* 2,000-word lessons stay comfortable. That three-slot split is why no separate
|
|
15
|
+
* "prose font" token was needed.
|
|
16
|
+
*
|
|
17
|
+
* Not a built-in (`builtIn: false`) — seeded as a selectable template that an
|
|
18
|
+
* admin can assign as the default dark theme or clone from `ThemeManagerView`.
|
|
19
|
+
* Only overrides the tokens the matching CSS block overrides; everything else
|
|
20
|
+
* (spacing, font sizes, unredefined gradients) falls back to
|
|
21
|
+
* `DEFAULT_DARK_THEME`, the same way the CSS block cascades from `:root`.
|
|
22
|
+
*
|
|
23
|
+
* Contrast against `appkit-color-bg` (#0b0d10), measured not estimated:
|
|
24
|
+
* text 15.82:1, muted 7.72:1, faint 4.68:1, primary 6.53:1, and every status
|
|
25
|
+
* colour ≥ 4.5:1 (lowest: error 7.01:1). Nothing here is AA-large-only.
|
|
26
|
+
*
|
|
27
|
+
* Mirrors the `[data-theme="technical-dark"]` block in
|
|
28
|
+
* `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
|
|
29
|
+
*/
|
|
30
|
+
export declare const TECHNICAL_DARK_THEME: ThemeRecord;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { DEFAULT_DARK_THEME } from "./default-dark.js";
|
|
2
|
+
/**
|
|
3
|
+
* Theme template — Technical Dark.
|
|
4
|
+
*
|
|
5
|
+
* A developer-tool identity rather than a marketing one: a near-black graphite
|
|
6
|
+
* base, ONE elevation step, hairline borders, and accents drawn from a syntax
|
|
7
|
+
* palette (keyword violet, string green, number amber, error red) reused
|
|
8
|
+
* semantically for difficulty badges, submission verdicts and status chips.
|
|
9
|
+
*
|
|
10
|
+
* Deliberately different from `default-dark` (crimson + cyan on navy): there is
|
|
11
|
+
* no brand gradient wash, surfaces sit close together in luminance, and the
|
|
12
|
+
* type stack is mono-forward — `display`/`sans` are monospace for headings,
|
|
13
|
+
* labels, IDs and tables, while `editorial` carries a real reading face so
|
|
14
|
+
* 2,000-word lessons stay comfortable. That three-slot split is why no separate
|
|
15
|
+
* "prose font" token was needed.
|
|
16
|
+
*
|
|
17
|
+
* Not a built-in (`builtIn: false`) — seeded as a selectable template that an
|
|
18
|
+
* admin can assign as the default dark theme or clone from `ThemeManagerView`.
|
|
19
|
+
* Only overrides the tokens the matching CSS block overrides; everything else
|
|
20
|
+
* (spacing, font sizes, unredefined gradients) falls back to
|
|
21
|
+
* `DEFAULT_DARK_THEME`, the same way the CSS block cascades from `:root`.
|
|
22
|
+
*
|
|
23
|
+
* Contrast against `appkit-color-bg` (#0b0d10), measured not estimated:
|
|
24
|
+
* text 15.82:1, muted 7.72:1, faint 4.68:1, primary 6.53:1, and every status
|
|
25
|
+
* colour ≥ 4.5:1 (lowest: error 7.01:1). Nothing here is AA-large-only.
|
|
26
|
+
*
|
|
27
|
+
* Mirrors the `[data-theme="technical-dark"]` block in
|
|
28
|
+
* `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
|
|
29
|
+
*/
|
|
30
|
+
export const TECHNICAL_DARK_THEME = {
|
|
31
|
+
id: "technical-dark",
|
|
32
|
+
name: "Technical Dark",
|
|
33
|
+
mode: "dark",
|
|
34
|
+
builtIn: false,
|
|
35
|
+
tokens: {
|
|
36
|
+
// Brand — keyword violet. Chosen because it reads as "syntax", not
|
|
37
|
+
// "product", and sits far from every status hue below.
|
|
38
|
+
"appkit-color-primary": "#7c8cff",
|
|
39
|
+
"appkit-color-primary-50": "#eef0ff",
|
|
40
|
+
"appkit-color-primary-100": "#e0e4ff",
|
|
41
|
+
"appkit-color-primary-200": "#c7cdff",
|
|
42
|
+
"appkit-color-primary-300": "#a5aeff",
|
|
43
|
+
"appkit-color-primary-400": "#8e99ff",
|
|
44
|
+
"appkit-color-primary-500": "#7c8cff",
|
|
45
|
+
"appkit-color-primary-600": "#5a68e8",
|
|
46
|
+
"appkit-color-primary-700": "#4650c4",
|
|
47
|
+
"appkit-color-primary-800": "#373f9c",
|
|
48
|
+
"appkit-color-primary-900": "#2b317a",
|
|
49
|
+
"appkit-color-primary-950": "#171a45",
|
|
50
|
+
// Secondary — string green.
|
|
51
|
+
"appkit-color-secondary": "#56d39a",
|
|
52
|
+
"appkit-color-secondary-50": "#ecfdf5",
|
|
53
|
+
"appkit-color-secondary-100": "#d1fae5",
|
|
54
|
+
"appkit-color-secondary-200": "#a7f3d0",
|
|
55
|
+
"appkit-color-secondary-300": "#7ee7b8",
|
|
56
|
+
"appkit-color-secondary-400": "#56d39a",
|
|
57
|
+
"appkit-color-secondary-500": "#34b87d",
|
|
58
|
+
"appkit-color-secondary-600": "#1f9664",
|
|
59
|
+
"appkit-color-secondary-700": "#187752",
|
|
60
|
+
"appkit-color-secondary-800": "#155e42",
|
|
61
|
+
"appkit-color-secondary-900": "#124b36",
|
|
62
|
+
"appkit-color-secondary-950": "#062a1d",
|
|
63
|
+
// Surfaces — one elevation step, hairline borders. Editor chrome.
|
|
64
|
+
"appkit-color-bg": "#0b0d10",
|
|
65
|
+
"appkit-color-surface": "#13161b",
|
|
66
|
+
"appkit-color-surface-elevated": "rgba(19, 22, 27, 0.92)",
|
|
67
|
+
"appkit-color-surface-input": "rgba(27, 31, 38, 0.7)",
|
|
68
|
+
"appkit-color-surface-hover": "rgba(148, 163, 184, 0.1)",
|
|
69
|
+
"appkit-color-surface-raised": "rgba(27, 31, 38, 0.8)",
|
|
70
|
+
"appkit-color-primary-surface": "rgba(124, 140, 255, 0.16)",
|
|
71
|
+
"appkit-color-border": "#242a33",
|
|
72
|
+
"appkit-color-border-subtle": "rgba(36, 42, 51, 0.6)",
|
|
73
|
+
"appkit-color-text": "#e4e8ee",
|
|
74
|
+
"appkit-color-text-muted": "#9aa4b2",
|
|
75
|
+
// 4.68:1 — clears AA at body size, so faint metadata is still readable
|
|
76
|
+
// rather than merely decorative.
|
|
77
|
+
"appkit-color-text-faint": "#747d8c",
|
|
78
|
+
// Dark ink on the violet fill: 6.53:1, where white measures only 2.98:1
|
|
79
|
+
// and would fail. This is why primary is not simply paired with white.
|
|
80
|
+
"appkit-color-text-on-primary": "#0b0d10",
|
|
81
|
+
"appkit-color-success": "#4ade80",
|
|
82
|
+
"appkit-color-success-surface": "rgba(22, 101, 68, 0.22)",
|
|
83
|
+
"appkit-color-warning": "#f2b544",
|
|
84
|
+
"appkit-color-warning-surface": "rgba(120, 78, 10, 0.22)",
|
|
85
|
+
"appkit-color-error": "#ff6b6b",
|
|
86
|
+
"appkit-color-error-surface": "rgba(140, 30, 30, 0.22)",
|
|
87
|
+
"appkit-color-info": "#58b4ff",
|
|
88
|
+
"appkit-color-info-surface": "rgba(12, 74, 110, 0.22)",
|
|
89
|
+
// Amber, deliberately NOT any status or brand hue: a focus ring that
|
|
90
|
+
// doubles as an error colour is unreadable on an invalid field.
|
|
91
|
+
"appkit-color-focus-ring": "#ffb86b",
|
|
92
|
+
// Flatter than the default theme's glow — editor chrome, not neon.
|
|
93
|
+
"appkit-shadow-glow": "0 0 0 1px rgba(124,140,255,0.14), 0 4px 16px -6px rgba(124,140,255,0.2)",
|
|
94
|
+
"appkit-shadow-glow-pink": "0 0 0 1px rgba(86,211,154,0.14), 0 4px 18px -6px rgba(86,211,154,0.22)",
|
|
95
|
+
// Mono-forward: headings, labels, IDs, nav and tables are monospace;
|
|
96
|
+
// `editorial` is the reading face for lessons and blog prose.
|
|
97
|
+
"appkit-font-display": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
|
|
98
|
+
"appkit-font-sans": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
|
|
99
|
+
"appkit-font-editorial": "var(--font-body), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
|
|
100
|
+
"appkit-font-mono": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
|
|
101
|
+
},
|
|
102
|
+
gradients: { ...DEFAULT_DARK_THEME.gradients },
|
|
103
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { ThemeRecord } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Theme template — Technical Light.
|
|
4
|
+
*
|
|
5
|
+
* A true counterpart to `technical-dark`, not an afterthought: same geometry,
|
|
6
|
+
* same mono-forward type stack, same syntax-derived accent *roles* — but every
|
|
7
|
+
* accent is re-darkened for a paper-white ground rather than reused from the
|
|
8
|
+
* dark preset. Reusing them would have been the easy mistake: #7c8cff on
|
|
9
|
+
* #fbfbfa measures 2.88:1, which fails AA outright, so primary drops to
|
|
10
|
+
* #4b5bd6 (5.38:1) and each status hue is darkened to match.
|
|
11
|
+
*
|
|
12
|
+
* Not a built-in (`builtIn: false`). Only overrides the tokens the matching CSS
|
|
13
|
+
* block overrides; everything else falls back to `DEFAULT_LIGHT_THEME`.
|
|
14
|
+
*
|
|
15
|
+
* Contrast against `appkit-color-bg` (#fbfbfa), measured not estimated:
|
|
16
|
+
* text 17.15:1, muted 5.84:1, faint 4.67:1, primary 5.38:1, white-on-primary
|
|
17
|
+
* 5.58:1, and every status colour ≥ 4.5:1 (lowest: success 4.80:1).
|
|
18
|
+
*
|
|
19
|
+
* Mirrors the `[data-theme="technical-light"]` block in
|
|
20
|
+
* `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
|
|
21
|
+
*/
|
|
22
|
+
export declare const TECHNICAL_LIGHT_THEME: ThemeRecord;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { DEFAULT_LIGHT_THEME } from "./default-light.js";
|
|
2
|
+
/**
|
|
3
|
+
* Theme template — Technical Light.
|
|
4
|
+
*
|
|
5
|
+
* A true counterpart to `technical-dark`, not an afterthought: same geometry,
|
|
6
|
+
* same mono-forward type stack, same syntax-derived accent *roles* — but every
|
|
7
|
+
* accent is re-darkened for a paper-white ground rather than reused from the
|
|
8
|
+
* dark preset. Reusing them would have been the easy mistake: #7c8cff on
|
|
9
|
+
* #fbfbfa measures 2.88:1, which fails AA outright, so primary drops to
|
|
10
|
+
* #4b5bd6 (5.38:1) and each status hue is darkened to match.
|
|
11
|
+
*
|
|
12
|
+
* Not a built-in (`builtIn: false`). Only overrides the tokens the matching CSS
|
|
13
|
+
* block overrides; everything else falls back to `DEFAULT_LIGHT_THEME`.
|
|
14
|
+
*
|
|
15
|
+
* Contrast against `appkit-color-bg` (#fbfbfa), measured not estimated:
|
|
16
|
+
* text 17.15:1, muted 5.84:1, faint 4.67:1, primary 5.38:1, white-on-primary
|
|
17
|
+
* 5.58:1, and every status colour ≥ 4.5:1 (lowest: success 4.80:1).
|
|
18
|
+
*
|
|
19
|
+
* Mirrors the `[data-theme="technical-light"]` block in
|
|
20
|
+
* `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
|
|
21
|
+
*/
|
|
22
|
+
export const TECHNICAL_LIGHT_THEME = {
|
|
23
|
+
id: "technical-light",
|
|
24
|
+
name: "Technical Light",
|
|
25
|
+
mode: "light",
|
|
26
|
+
builtIn: false,
|
|
27
|
+
tokens: {
|
|
28
|
+
// Same violet ROLE as the dark preset, re-darkened for white.
|
|
29
|
+
"appkit-color-primary": "#4b5bd6",
|
|
30
|
+
"appkit-color-primary-50": "#eef0ff",
|
|
31
|
+
"appkit-color-primary-100": "#e0e4ff",
|
|
32
|
+
"appkit-color-primary-200": "#c7cdff",
|
|
33
|
+
"appkit-color-primary-300": "#a5aeff",
|
|
34
|
+
"appkit-color-primary-400": "#7c8cff",
|
|
35
|
+
"appkit-color-primary-500": "#5a68e8",
|
|
36
|
+
"appkit-color-primary-600": "#4b5bd6",
|
|
37
|
+
"appkit-color-primary-700": "#3b45ad",
|
|
38
|
+
"appkit-color-primary-800": "#2f3789",
|
|
39
|
+
"appkit-color-primary-900": "#262c6d",
|
|
40
|
+
"appkit-color-primary-950": "#151840",
|
|
41
|
+
"appkit-color-secondary": "#0f8f5f",
|
|
42
|
+
"appkit-color-secondary-50": "#ecfdf5",
|
|
43
|
+
"appkit-color-secondary-100": "#d1fae5",
|
|
44
|
+
"appkit-color-secondary-200": "#a7f3d0",
|
|
45
|
+
"appkit-color-secondary-300": "#6ee7b7",
|
|
46
|
+
"appkit-color-secondary-400": "#34b87d",
|
|
47
|
+
"appkit-color-secondary-500": "#0f8f5f",
|
|
48
|
+
"appkit-color-secondary-600": "#0c744d",
|
|
49
|
+
"appkit-color-secondary-700": "#0a5c3d",
|
|
50
|
+
"appkit-color-secondary-800": "#084830",
|
|
51
|
+
"appkit-color-secondary-900": "#063a27",
|
|
52
|
+
"appkit-color-secondary-950": "#032016",
|
|
53
|
+
// Paper white, not pure #fff — pure white against a mono type stack
|
|
54
|
+
// glares at the sizes this UI uses.
|
|
55
|
+
"appkit-color-bg": "#fbfbfa",
|
|
56
|
+
"appkit-color-surface": "#ffffff",
|
|
57
|
+
"appkit-color-surface-elevated": "rgba(255, 255, 255, 0.96)",
|
|
58
|
+
"appkit-color-surface-input": "rgba(244, 244, 242, 0.8)",
|
|
59
|
+
"appkit-color-surface-hover": "rgba(22, 24, 29, 0.05)",
|
|
60
|
+
"appkit-color-surface-raised": "rgba(244, 244, 242, 0.9)",
|
|
61
|
+
"appkit-color-primary-surface": "rgba(75, 91, 214, 0.1)",
|
|
62
|
+
"appkit-color-border": "#e2e2df",
|
|
63
|
+
"appkit-color-border-subtle": "rgba(226, 226, 223, 0.7)",
|
|
64
|
+
"appkit-color-text": "#16181d",
|
|
65
|
+
"appkit-color-text-muted": "#5c6370",
|
|
66
|
+
// #767d89 measured 4.00:1 here — AA for large text only. Darkened so even
|
|
67
|
+
// faint metadata clears AA at body size.
|
|
68
|
+
"appkit-color-text-faint": "#6b7280",
|
|
69
|
+
"appkit-color-text-on-primary": "#ffffff",
|
|
70
|
+
"appkit-color-success": "#13804f",
|
|
71
|
+
"appkit-color-success-surface": "rgba(19, 128, 79, 0.1)",
|
|
72
|
+
"appkit-color-warning": "#9a6400",
|
|
73
|
+
"appkit-color-warning-surface": "rgba(154, 100, 0, 0.1)",
|
|
74
|
+
"appkit-color-error": "#c62828",
|
|
75
|
+
"appkit-color-error-surface": "rgba(198, 40, 40, 0.1)",
|
|
76
|
+
"appkit-color-info": "#0a69b5",
|
|
77
|
+
"appkit-color-info-surface": "rgba(10, 105, 181, 0.1)",
|
|
78
|
+
// Darkened amber. The dark preset's #ffb86b measures 1.65:1 here —
|
|
79
|
+
// effectively an invisible focus ring, which is a keyboard trap.
|
|
80
|
+
"appkit-color-focus-ring": "#b45a00",
|
|
81
|
+
"appkit-shadow-glow": "0 0 0 1px rgba(75,91,214,0.14), 0 4px 16px -6px rgba(75,91,214,0.18)",
|
|
82
|
+
"appkit-shadow-glow-pink": "0 0 0 1px rgba(15,143,95,0.14), 0 4px 18px -6px rgba(15,143,95,0.2)",
|
|
83
|
+
"appkit-font-display": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
|
|
84
|
+
"appkit-font-sans": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
|
|
85
|
+
"appkit-font-editorial": "var(--font-body), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
|
|
86
|
+
"appkit-font-mono": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
|
|
87
|
+
},
|
|
88
|
+
gradients: { ...DEFAULT_LIGHT_THEME.gradients },
|
|
89
|
+
};
|
package/dist/tokens/tokens.css
CHANGED
|
@@ -632,6 +632,161 @@
|
|
|
632
632
|
--appkit-shadow-glow-pink: 0 0 0 1px rgba(244,63,94,0.18), 0 4px 20px -4px rgba(244,63,94,0.30);
|
|
633
633
|
}
|
|
634
634
|
|
|
635
|
+
/* --- Theme — Technical Dark ([data-theme="technical-dark"]) --------------- */
|
|
636
|
+
/* Developer-tool identity: graphite surfaces, hairline borders, a mono-forward
|
|
637
|
+
type stack, and accents from a syntax palette (keyword violet, string green,
|
|
638
|
+
number amber, error red) reused semantically for difficulty badges,
|
|
639
|
+
submission verdicts and status chips.
|
|
640
|
+
|
|
641
|
+
Mirrors src/tokens/themes/technical-dark.ts — values must stay identical or
|
|
642
|
+
the first paint disagrees with the hydrated theme.
|
|
643
|
+
|
|
644
|
+
Contrast on --appkit-color-bg (#0b0d10), measured: text 15.82:1,
|
|
645
|
+
muted 7.72:1, faint 4.68:1, primary 6.53:1, lowest status 7.01:1. */
|
|
646
|
+
[data-theme="technical-dark"] {
|
|
647
|
+
--appkit-color-primary: #7c8cff;
|
|
648
|
+
--appkit-color-primary-50: #eef0ff;
|
|
649
|
+
--appkit-color-primary-100: #e0e4ff;
|
|
650
|
+
--appkit-color-primary-200: #c7cdff;
|
|
651
|
+
--appkit-color-primary-300: #a5aeff;
|
|
652
|
+
--appkit-color-primary-400: #8e99ff;
|
|
653
|
+
--appkit-color-primary-500: #7c8cff;
|
|
654
|
+
--appkit-color-primary-600: #5a68e8;
|
|
655
|
+
--appkit-color-primary-700: #4650c4;
|
|
656
|
+
--appkit-color-primary-800: #373f9c;
|
|
657
|
+
--appkit-color-primary-900: #2b317a;
|
|
658
|
+
--appkit-color-primary-950: #171a45;
|
|
659
|
+
|
|
660
|
+
--appkit-color-secondary: #56d39a;
|
|
661
|
+
--appkit-color-secondary-50: #ecfdf5;
|
|
662
|
+
--appkit-color-secondary-100: #d1fae5;
|
|
663
|
+
--appkit-color-secondary-200: #a7f3d0;
|
|
664
|
+
--appkit-color-secondary-300: #7ee7b8;
|
|
665
|
+
--appkit-color-secondary-400: #56d39a;
|
|
666
|
+
--appkit-color-secondary-500: #34b87d;
|
|
667
|
+
--appkit-color-secondary-600: #1f9664;
|
|
668
|
+
--appkit-color-secondary-700: #187752;
|
|
669
|
+
--appkit-color-secondary-800: #155e42;
|
|
670
|
+
--appkit-color-secondary-900: #124b36;
|
|
671
|
+
--appkit-color-secondary-950: #062a1d;
|
|
672
|
+
|
|
673
|
+
--appkit-color-bg: #0b0d10;
|
|
674
|
+
--appkit-color-surface: #13161b;
|
|
675
|
+
--appkit-color-surface-elevated: rgba(19, 22, 27, 0.92);
|
|
676
|
+
--appkit-color-surface-input: rgba(27, 31, 38, 0.7);
|
|
677
|
+
|
|
678
|
+
--appkit-color-surface-hover: rgba(148, 163, 184, 0.1);
|
|
679
|
+
--appkit-color-surface-raised: rgba(27, 31, 38, 0.8);
|
|
680
|
+
--appkit-color-primary-surface: rgba(124, 140, 255, 0.16);
|
|
681
|
+
|
|
682
|
+
--appkit-color-border: #242a33;
|
|
683
|
+
--appkit-color-border-subtle: rgba(36, 42, 51, 0.6);
|
|
684
|
+
|
|
685
|
+
--appkit-color-text: #e4e8ee;
|
|
686
|
+
--appkit-color-text-muted: #9aa4b2;
|
|
687
|
+
--appkit-color-text-faint: #747d8c;
|
|
688
|
+
/* Dark ink on the violet fill: 6.53:1, where white measures 2.98:1 and
|
|
689
|
+
fails. Declared here AND in the TS record or first paint disagrees. */
|
|
690
|
+
--appkit-color-text-on-primary: #0b0d10;
|
|
691
|
+
|
|
692
|
+
--appkit-color-success: #4ade80;
|
|
693
|
+
--appkit-color-success-surface: rgba(22, 101, 68, 0.22);
|
|
694
|
+
--appkit-color-warning: #f2b544;
|
|
695
|
+
--appkit-color-warning-surface: rgba(120, 78, 10, 0.22);
|
|
696
|
+
--appkit-color-error: #ff6b6b;
|
|
697
|
+
--appkit-color-error-surface: rgba(140, 30, 30, 0.22);
|
|
698
|
+
--appkit-color-info: #58b4ff;
|
|
699
|
+
--appkit-color-info-surface: rgba(12, 74, 110, 0.22);
|
|
700
|
+
|
|
701
|
+
/* Amber, deliberately not a status or brand hue — a focus ring that doubles
|
|
702
|
+
as an error colour is unreadable on an invalid field. */
|
|
703
|
+
--appkit-color-focus-ring: #ffb86b;
|
|
704
|
+
--appkit-shadow-glow: 0 0 0 1px rgba(124,140,255,0.14), 0 4px 16px -6px rgba(124,140,255,0.2);
|
|
705
|
+
--appkit-shadow-glow-pink: 0 0 0 1px rgba(86,211,154,0.14), 0 4px 18px -6px rgba(86,211,154,0.22);
|
|
706
|
+
|
|
707
|
+
/* Mono-forward: display/sans are monospace for headings, labels, IDs and
|
|
708
|
+
tables; editorial carries the reading face for long lesson prose. */
|
|
709
|
+
--appkit-font-display: var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
|
|
710
|
+
--appkit-font-sans: var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
|
|
711
|
+
--appkit-font-editorial: var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
712
|
+
--appkit-font-mono: var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
/* --- Theme — Technical Light ([data-theme="technical-light"]) ------------- */
|
|
716
|
+
/* The matched light counterpart. Every accent is RE-DARKENED rather than
|
|
717
|
+
reused: the dark preset's #7c8cff measures 2.88:1 on this ground and fails
|
|
718
|
+
AA, and its #ffb86b focus ring measures 1.65:1 — an invisible focus ring is
|
|
719
|
+
a keyboard trap.
|
|
720
|
+
|
|
721
|
+
Mirrors src/tokens/themes/technical-light.ts.
|
|
722
|
+
|
|
723
|
+
Contrast on --appkit-color-bg (#fbfbfa), measured: text 17.15:1,
|
|
724
|
+
muted 5.84:1, faint 4.67:1, primary 5.38:1, lowest status 4.80:1. */
|
|
725
|
+
[data-theme="technical-light"] {
|
|
726
|
+
--appkit-color-primary: #4b5bd6;
|
|
727
|
+
--appkit-color-primary-50: #eef0ff;
|
|
728
|
+
--appkit-color-primary-100: #e0e4ff;
|
|
729
|
+
--appkit-color-primary-200: #c7cdff;
|
|
730
|
+
--appkit-color-primary-300: #a5aeff;
|
|
731
|
+
--appkit-color-primary-400: #7c8cff;
|
|
732
|
+
--appkit-color-primary-500: #5a68e8;
|
|
733
|
+
--appkit-color-primary-600: #4b5bd6;
|
|
734
|
+
--appkit-color-primary-700: #3b45ad;
|
|
735
|
+
--appkit-color-primary-800: #2f3789;
|
|
736
|
+
--appkit-color-primary-900: #262c6d;
|
|
737
|
+
--appkit-color-primary-950: #151840;
|
|
738
|
+
|
|
739
|
+
--appkit-color-secondary: #0f8f5f;
|
|
740
|
+
--appkit-color-secondary-50: #ecfdf5;
|
|
741
|
+
--appkit-color-secondary-100: #d1fae5;
|
|
742
|
+
--appkit-color-secondary-200: #a7f3d0;
|
|
743
|
+
--appkit-color-secondary-300: #6ee7b7;
|
|
744
|
+
--appkit-color-secondary-400: #34b87d;
|
|
745
|
+
--appkit-color-secondary-500: #0f8f5f;
|
|
746
|
+
--appkit-color-secondary-600: #0c744d;
|
|
747
|
+
--appkit-color-secondary-700: #0a5c3d;
|
|
748
|
+
--appkit-color-secondary-800: #084830;
|
|
749
|
+
--appkit-color-secondary-900: #063a27;
|
|
750
|
+
--appkit-color-secondary-950: #032016;
|
|
751
|
+
|
|
752
|
+
--appkit-color-bg: #fbfbfa;
|
|
753
|
+
--appkit-color-surface: #ffffff;
|
|
754
|
+
--appkit-color-surface-elevated: rgba(255, 255, 255, 0.96);
|
|
755
|
+
--appkit-color-surface-input: rgba(244, 244, 242, 0.8);
|
|
756
|
+
|
|
757
|
+
--appkit-color-surface-hover: rgba(22, 24, 29, 0.05);
|
|
758
|
+
--appkit-color-surface-raised: rgba(244, 244, 242, 0.9);
|
|
759
|
+
--appkit-color-primary-surface: rgba(75, 91, 214, 0.1);
|
|
760
|
+
|
|
761
|
+
--appkit-color-border: #e2e2df;
|
|
762
|
+
--appkit-color-border-subtle: rgba(226, 226, 223, 0.7);
|
|
763
|
+
|
|
764
|
+
--appkit-color-text: #16181d;
|
|
765
|
+
--appkit-color-text-muted: #5c6370;
|
|
766
|
+
/* #767d89 measured 4.00:1 — AA for large text only. Darkened to clear AA
|
|
767
|
+
at body size. */
|
|
768
|
+
--appkit-color-text-faint: #6b7280;
|
|
769
|
+
--appkit-color-text-on-primary: #ffffff;
|
|
770
|
+
|
|
771
|
+
--appkit-color-success: #13804f;
|
|
772
|
+
--appkit-color-success-surface: rgba(19, 128, 79, 0.1);
|
|
773
|
+
--appkit-color-warning: #9a6400;
|
|
774
|
+
--appkit-color-warning-surface: rgba(154, 100, 0, 0.1);
|
|
775
|
+
--appkit-color-error: #c62828;
|
|
776
|
+
--appkit-color-error-surface: rgba(198, 40, 40, 0.1);
|
|
777
|
+
--appkit-color-info: #0a69b5;
|
|
778
|
+
--appkit-color-info-surface: rgba(10, 105, 181, 0.1);
|
|
779
|
+
|
|
780
|
+
--appkit-color-focus-ring: #b45a00;
|
|
781
|
+
--appkit-shadow-glow: 0 0 0 1px rgba(75,91,214,0.14), 0 4px 16px -6px rgba(75,91,214,0.18);
|
|
782
|
+
--appkit-shadow-glow-pink: 0 0 0 1px rgba(15,143,95,0.14), 0 4px 18px -6px rgba(15,143,95,0.2);
|
|
783
|
+
|
|
784
|
+
--appkit-font-display: var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
|
|
785
|
+
--appkit-font-sans: var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
|
|
786
|
+
--appkit-font-editorial: var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
787
|
+
--appkit-font-mono: var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
|
|
788
|
+
}
|
|
789
|
+
|
|
635
790
|
/* --- Typography ----------------------------------------------------------- */
|
|
636
791
|
:root {
|
|
637
792
|
--appkit-font-sans: var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Sign-in gate for money amounts on public listing surfaces.
|
|
3
|
-
*
|
|
4
|
-
* The pending state must occupy the SAME vertical space as a rendered price, or
|
|
5
|
-
* every card in a grid reflows once the session resolves. It is deliberately a
|
|
6
|
-
* silent placeholder rather than a shimmer: the wait is short, and an animated
|
|
7
|
-
* skeleton on 24 cards reads as a page that failed to load.
|
|
8
|
-
*/
|
|
9
|
-
.appkit-gated-price__pending {
|
|
10
|
-
display: inline-block;
|
|
11
|
-
min-width: 5rem;
|
|
12
|
-
height: 1.25rem;
|
|
13
|
-
border-radius: 0.25rem;
|
|
14
|
-
/* 🛑 `--appkit-color-surface-muted` is NOT a token — 15 uses, 0 definitions,
|
|
15
|
-
and `audit-undefined-css-vars` ratchets it down. An undefined custom
|
|
16
|
-
property with no fallback makes the whole declaration invalid, so this
|
|
17
|
-
placeholder had no background at all and the grid still reflowed on
|
|
18
|
-
resolve, which is the one job it has. */
|
|
19
|
-
background: var(--appkit-color-surface-input);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.appkit-gated-price__prompt {
|
|
23
|
-
display: inline-flex;
|
|
24
|
-
align-items: center;
|
|
25
|
-
/*
|
|
26
|
-
* The eye is a 2rem IconButton while `__pending` above is a 1.25rem price
|
|
27
|
-
* line, so a GUEST's row grows by 0.75rem once the session resolves. That is
|
|
28
|
-
* deliberate and is the lesser of the two: the alternative is making
|
|
29
|
-
* `__pending` 2rem, which shifts the row for SIGNED-IN users — the ones who
|
|
30
|
-
* end up looking at real content. The guest shift happens once per load and
|
|
31
|
-
* applies to every card identically, so the grid moves as one rather than
|
|
32
|
-
* going ragged.
|
|
33
|
-
*/
|
|
34
|
-
line-height: 1.25rem;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/*
|
|
38
|
-
* 🛑 The eye itself has NO rules here, on purpose. It is an `<IconButton
|
|
39
|
-
* size="sm" variant="outline">`, so its box, ink, hover and focus ring all
|
|
40
|
-
* come from the design system — a second, private set of button styles for
|
|
41
|
-
* one control is exactly how a UI ends up with two kinds of icon button that
|
|
42
|
-
* drift apart. This wrapper only has to keep the row's height stable.
|
|
43
|
-
*/
|
|
1
|
+
/**
|
|
2
|
+
* Sign-in gate for money amounts on public listing surfaces.
|
|
3
|
+
*
|
|
4
|
+
* The pending state must occupy the SAME vertical space as a rendered price, or
|
|
5
|
+
* every card in a grid reflows once the session resolves. It is deliberately a
|
|
6
|
+
* silent placeholder rather than a shimmer: the wait is short, and an animated
|
|
7
|
+
* skeleton on 24 cards reads as a page that failed to load.
|
|
8
|
+
*/
|
|
9
|
+
.appkit-gated-price__pending {
|
|
10
|
+
display: inline-block;
|
|
11
|
+
min-width: 5rem;
|
|
12
|
+
height: 1.25rem;
|
|
13
|
+
border-radius: 0.25rem;
|
|
14
|
+
/* 🛑 `--appkit-color-surface-muted` is NOT a token — 15 uses, 0 definitions,
|
|
15
|
+
and `audit-undefined-css-vars` ratchets it down. An undefined custom
|
|
16
|
+
property with no fallback makes the whole declaration invalid, so this
|
|
17
|
+
placeholder had no background at all and the grid still reflowed on
|
|
18
|
+
resolve, which is the one job it has. */
|
|
19
|
+
background: var(--appkit-color-surface-input);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.appkit-gated-price__prompt {
|
|
23
|
+
display: inline-flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
/*
|
|
26
|
+
* The eye is a 2rem IconButton while `__pending` above is a 1.25rem price
|
|
27
|
+
* line, so a GUEST's row grows by 0.75rem once the session resolves. That is
|
|
28
|
+
* deliberate and is the lesser of the two: the alternative is making
|
|
29
|
+
* `__pending` 2rem, which shifts the row for SIGNED-IN users — the ones who
|
|
30
|
+
* end up looking at real content. The guest shift happens once per load and
|
|
31
|
+
* applies to every card identically, so the grid moves as one rather than
|
|
32
|
+
* going ragged.
|
|
33
|
+
*/
|
|
34
|
+
line-height: 1.25rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/*
|
|
38
|
+
* 🛑 The eye itself has NO rules here, on purpose. It is an `<IconButton
|
|
39
|
+
* size="sm" variant="outline">`, so its box, ink, hover and focus ring all
|
|
40
|
+
* come from the design system — a second, private set of button styles for
|
|
41
|
+
* one control is exactly how a UI ends up with two kinds of icon button that
|
|
42
|
+
* drift apart. This wrapper only has to keep the row's height stable.
|
|
43
|
+
*/
|