@eocrm/design-system 0.6.21 → 0.6.22
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/AI-PRIMER.md +1 -1
- package/README.md +17 -4
- package/docs/components/Link.md +2 -2
- package/docs/setup.md +1 -1
- package/package.json +2 -2
- package/src/components/Link/Link.tokens.scss +4 -3
- package/src/components/Link/Link.tsx +1 -1
package/AI-PRIMER.md
CHANGED
|
@@ -20,7 +20,7 @@ Read this first. Each component's contract is its `docs/components/<Name>.md`; t
|
|
|
20
20
|
|
|
21
21
|
See [docs/setup.md](docs/setup.md).
|
|
22
22
|
|
|
23
|
-
Accent: blue by default; `<html data-accent="
|
|
23
|
+
Accent: blue by default; `<html data-accent="…">` switches to `tealpine`, `indigo`, `grape`, `berry`, `slate`, `ocean` or `moss` (see [README.md](./README.md#accent)).
|
|
24
24
|
|
|
25
25
|
## Localization (i18n)
|
|
26
26
|
|
package/README.md
CHANGED
|
@@ -63,17 +63,30 @@ If you need only the tokens (you're providing your own reset), import `@eocrm/de
|
|
|
63
63
|
|
|
64
64
|
## Accent
|
|
65
65
|
|
|
66
|
-
The accent family defaults to blue. To switch the whole app to
|
|
66
|
+
The accent family defaults to blue. To switch the whole app to another accent, set `data-accent` on `<html>` (omit the attribute for blue):
|
|
67
67
|
|
|
68
68
|
```html
|
|
69
69
|
<html data-accent="tealpine" data-theme="dark"></html>
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
-
|
|
72
|
+
| `data-accent` | Hue | Compose objects |
|
|
73
|
+
| ------------- | ---------------- | ------------------------------------------------------ |
|
|
74
|
+
| _(none)_ | Blue (default) | `EocrmLightTokens` / `EocrmDarkTokens` |
|
|
75
|
+
| `tealpine` | Teal pine | `EocrmTealPineLightTokens` / `EocrmTealPineDarkTokens` |
|
|
76
|
+
| `indigo` | Indigo | `EocrmIndigoLightTokens` / `EocrmIndigoDarkTokens` |
|
|
77
|
+
| `grape` | Purple | `EocrmGrapeLightTokens` / `EocrmGrapeDarkTokens` |
|
|
78
|
+
| `berry` | Magenta-pink | `EocrmBerryLightTokens` / `EocrmBerryDarkTokens` |
|
|
79
|
+
| `slate` | Neutral graphite | `EocrmSlateLightTokens` / `EocrmSlateDarkTokens` |
|
|
80
|
+
| `ocean` | Cyan-blue | `EocrmOceanLightTokens` / `EocrmOceanDarkTokens` |
|
|
81
|
+
| `moss` | Olive green | `EocrmMossLightTokens` / `EocrmMossDarkTokens` |
|
|
73
82
|
|
|
74
|
-
|
|
83
|
+
Each accent swaps `--color-accent`, `-hover`, `-pressed`, `-fg`, `-bg-subtle`, `-subtle-bg` and `--ring-accent`, plus the default `Link` colour (`--color-link-fg` / `-hover`), in light, forced dark (`data-theme="dark"`) and OS dark. They ship in the existing `tokens.scss` / `dark.scss`, so there is no new import. `AppProvider`'s `tokens` / `darkTokens` overrides win over `data-accent` in every theme (see [docs/setup.md](docs/setup.md)). Info colours stay blue under any accent; DropdownMenu checked items, the OptionsPicker selected row and StagePath done states follow the accent. In light theme, Teal pine's default `Link`s use a slightly brighter teal than the accent (`#007676`, AA on every grey surface) at medium weight (not inside headings, `<strong>` or `<th>`), because the accent alone sits too close to the navy body text to read as a link. Slate's default `Link`s are medium weight for the same reason. Indigo and Berry also set a slightly different link colour from their accent (`#4342c4`, `#a82c68`) to keep links at AA on every grey surface.
|
|
75
84
|
|
|
76
|
-
|
|
85
|
+
Compose: each accent's Light / Dark objects sit beside `EocrmLightTokens` / `EocrmDarkTokens`; only accent colours differ. The link colour tokens are web-only (Compose has no `Link`), so Compose links keep the accent colour.
|
|
86
|
+
|
|
87
|
+
There is deliberately no red, orange or yellow accent: a primary button in those hues reads as a danger or warning action.
|
|
88
|
+
|
|
89
|
+
**Known issue:** in light theme, Teal pine and Moss sit close to `--color-success` in hue. Review success/accent pairings visually before switching the CRM to either.
|
|
77
90
|
|
|
78
91
|
---
|
|
79
92
|
|
package/docs/components/Link.md
CHANGED
|
@@ -40,7 +40,7 @@ import { Link as RouterLink } from 'react-router-dom';
|
|
|
40
40
|
- **Polymorphic**: `as={Component}` forwards all of Component's props with full TypeScript inference.
|
|
41
41
|
- **Library has no router dependency** — the `as` mechanism is consumer-driven.
|
|
42
42
|
- **Three variants**:
|
|
43
|
-
- `default`: link colour (`--color-link-fg`; the accent unless the accent set overrides it — `tealpine` uses a brighter teal at medium weight), hover-underline. Inline CTA ("View all →").
|
|
43
|
+
- `default`: link colour (`--color-link-fg`; the accent unless the accent set overrides it — `tealpine` uses a brighter teal at medium weight; `slate` links are medium weight), hover-underline. Inline CTA ("View all →").
|
|
44
44
|
- `muted`: muted color, hover-accent. Low-emphasis nav (breadcrumb-style).
|
|
45
45
|
- `subtle`: foreground color, hover-accent + underline. Dense-surface name links. **Not deprecated** — this is `Link`'s own variant and is unrelated to `Text`/`Title`'s `tone="subtle"`, which WAS deprecated. Same word, opposite status: a grep for "subtle deprecated" will land on the tone, and `PersonDisplay.Name` uses this variant deliberately.
|
|
46
46
|
- **`underline` prop** (`'hover'` | `'always'` | `'none'`, default `'hover'`) — orthogonal to `variant`:
|
|
@@ -62,4 +62,4 @@ import { Link as RouterLink } from 'react-router-dom';
|
|
|
62
62
|
- ❌ Forgetting `rel="noopener noreferrer"` on `target="_blank"` links.
|
|
63
63
|
- ❌ Using `variant="default"` for low-emphasis nav like breadcrumbs.
|
|
64
64
|
- ❌ A Link inside running text/body copy without `underline="always"` — color alone isn't a sufficient visual cue (WCAG 1.4.1).
|
|
65
|
-
- ❌ A `default` Link inside `<Text weight="semibold">` (or `bold`) under `data-accent="tealpine"` — the link renders at the accent's medium weight, lighter than the words around it. Wrap the bold run in `<strong>` or give the Link a matching weight via `className`.
|
|
65
|
+
- ❌ A `default` Link inside `<Text weight="semibold">` (or `bold`) under `data-accent="tealpine"` or `"slate"` — the link renders at the accent's medium weight, lighter than the words around it. Wrap the bold run in `<strong>` or give the Link a matching weight via `className`.
|
package/docs/setup.md
CHANGED
|
@@ -48,4 +48,4 @@ const darkTokens = useMemo(() => ({ '--color-accent': '#a78bfa' }), []);
|
|
|
48
48
|
</AppProvider>;
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
`tokens` apply in light **and** dark; `darkTokens` refine the dark scope only. They're emitted as a single declarative `<style>` that layers over the [dark theme](theming.md#dark-theme) correctly, and they win over a `data-accent` preset's token blocks. One exception to "override the accent and everything follows": a preset may set the link colour apart from its accent (`tealpine`
|
|
51
|
+
`tokens` apply in light **and** dark; `darkTokens` refine the dark scope only. They're emitted as a single declarative `<style>` that layers over the [dark theme](theming.md#dark-theme) correctly, and they win over a `data-accent` preset's token blocks. One exception to "override the accent and everything follows": a preset may set the link colour apart from its accent (`tealpine`, `indigo` and `berry` do), so when rebranding the accent on top of a preset, also override `--color-link-fg` / `--color-link-fg-hover`. Any design token can be overridden — see the generated `@eocrm/design-tokens` Sass contract for the full CSS custom-property set. Contributors change shared values only in `packages/design-tokens/src/tokens.json`; `src/styles/tokens.scss` remains the stable consumer entry point.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eocrm/design-system",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.22",
|
|
4
4
|
"description": "Design system for the EOCRM product — React 19 + SCSS modules + CSS custom properties.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@dnd-kit/core": "^6.3.1",
|
|
51
51
|
"@dnd-kit/sortable": "^10.0.0",
|
|
52
52
|
"@dnd-kit/utilities": "^3.2.2",
|
|
53
|
-
"@eocrm/design-tokens": "0.6.
|
|
53
|
+
"@eocrm/design-tokens": "0.6.22",
|
|
54
54
|
"@floating-ui/react-dom": "^2.1.8",
|
|
55
55
|
"@types/d3-scale": "^4.0.9",
|
|
56
56
|
"@types/d3-shape": "^3.2.0",
|
|
@@ -21,8 +21,9 @@
|
|
|
21
21
|
--link-fg-subtle-hover: var(--color-accent);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
// Teal pine's
|
|
25
|
-
// also step up in weight (the colour alone can't carry the difference).
|
|
26
|
-
:root[data-accent='tealpine']
|
|
24
|
+
// Teal pine's and Slate's accents sit close to the navy body text, so their
|
|
25
|
+
// default links also step up in weight (the colour alone can't carry the difference).
|
|
26
|
+
:root[data-accent='tealpine'],
|
|
27
|
+
:root[data-accent='slate'] {
|
|
27
28
|
--link-font-weight-default: var(--font-weight-medium);
|
|
28
29
|
}
|
|
@@ -14,7 +14,7 @@ import styles from './Link.module.scss';
|
|
|
14
14
|
* Visual variant. Defaults to `'default'`.
|
|
15
15
|
* - `'default'` — link color (`--color-link-fg`, the accent unless the accent set
|
|
16
16
|
* overrides it), no underline at rest, underline + hover color on hover. Under
|
|
17
|
-
* `data-accent="tealpine"` it is also medium weight, except inside headings,
|
|
17
|
+
* `data-accent="tealpine"` or `"slate"` it is also medium weight, except inside headings,
|
|
18
18
|
* `<strong>`/`<b>` and `<th>`.
|
|
19
19
|
* Use for inline CTA links ("View all →", "Read more").
|
|
20
20
|
* - `'muted'` — muted color, no underline, accent-hover on hover.
|