@edgeandnode/eds-react 1.0.0 → 1.0.1

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.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/package.json +3 -3
  3. package/skill/SKILL.md +7 -4
  4. package/skill/references/tokens.md +24 -12
  5. package/src/__snapshots__/compiled.css +255 -281
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @edgeandnode/eds-react
2
2
 
3
- React components for The Edge Design System.
3
+ React components for the Edge Design System.
4
4
 
5
5
  ## Installation
6
6
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@edgeandnode/eds-react",
3
- "version": "1.0.0",
4
- "description": "React components for The Edge Design System",
3
+ "version": "1.0.1",
4
+ "description": "React components for the Edge Design System",
5
5
  "author": "Edge & Node and contributors",
6
6
  "license": "MIT",
7
7
  "repository": {
@@ -48,7 +48,7 @@
48
48
  "dependencies": {
49
49
  "@base-ui/react": "^1.8.0",
50
50
  "@base-ui/utils": "^0.4.0",
51
- "@edgeandnode/eds-css": "1.0.0",
51
+ "@edgeandnode/eds-css": "1.0.1",
52
52
  "@edgeandnode/eds-icons": "1.0.0",
53
53
  "@edgeandnode/eds-utils": "1.0.0",
54
54
  "@react-aria/utils": "^3.34.1",
package/skill/SKILL.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: eds
3
- version: 1.0.0
3
+ version: 1.0.1
4
4
  description: The Edge Design System (EDS) is for building user interfaces for Edge & Node products. Use this skill when designing, implementing, reviewing, or polishing Edge & Node product UIs, when using `@edgeandnode/eds-react`, or when EDS is mentioned. Covers component selection, design patterns, tokens, and best practices – not just APIs. APIs are fully typed in the npm package.
5
5
  allowed-tools:
6
6
  - mcp__storybook__get-changed-stories
@@ -28,7 +28,7 @@ EDS is the design system for Edge & Node products. This skill teaches you how to
28
28
  "mcpServers": {
29
29
  "storybook": {
30
30
  "type": "http",
31
- "url": "https://a16faa3--6ab2abb8934bb76c7e8e086c.chromatic.com/mcp"
31
+ "url": "https://f87aca8--6ab2abb8934bb76c7e8e086c.chromatic.com/mcp"
32
32
  }
33
33
  }
34
34
  }
@@ -43,7 +43,7 @@ Add this to the project's `.mcp.json` file (create it if it doesn't exist). For
43
43
  ```json
44
44
  {
45
45
  "dependencies": {
46
- "@edgeandnode/eds-react": "^1.0.0",
46
+ "@edgeandnode/eds-react": "^1.0.1",
47
47
  "react": "^19.0.0",
48
48
  "react-dom": "^19.0.0"
49
49
  },
@@ -165,7 +165,7 @@ import { EDSProvider } from '@edgeandnode/eds-react'
165
165
 
166
166
  2. **Tailwind defaults don't exist.** Standard classes like `text-sm`, `rounded-md`, `text-gray-500` do NOT work. Use EDS tokens (`text-14`, `rounded-8`, `text-space-500`). Also `border-divider` does NOT exist; use `border-muted` or `border-subtle`.
167
167
 
168
- 3. **Never use primitive color tokens directly.** Always use semantic tokens (e.g. `bg-canvas` instead of `bg-space-1800`) to ensure UIs adapt automatically to light/dark mode. Tailwind maps custom property prefixes to utilities: `--background-color-*` → `bg-*`, `--text-color-*` → `text-*`, `--border-color-*` → `border-*`. These prefixes aren't officially documented by Tailwind, but [they work](https://github.com/tailwindlabs/tailwindcss/discussions/19020#discussioncomment-14528253) and EDS semantic tokens rely on them.
168
+ 3. **Never use primitive color tokens directly.** Always use semantic tokens (e.g. `bg-canvas` instead of `bg-space-900`) to ensure UIs adapt automatically to light/dark mode. Tailwind maps custom property prefixes to utilities: `--background-color-*` → `bg-*`, `--text-color-*` → `text-*`, `--border-color-*` → `border-*`. These prefixes aren't officially documented by Tailwind, but [they work](https://github.com/tailwindlabs/tailwindcss/discussions/19020#discussioncomment-14528253) and EDS semantic tokens rely on them.
169
169
 
170
170
  4. **Avoid opacity, use color tokens.** Don't default to `opacity-*` classes. Use semantic color tokens (e.g. `text-muted`, `text-subtle`, `bg-subtle`) which have appropriate transparency built in. Opacity is a last resort.
171
171
 
@@ -401,6 +401,9 @@ Login buttons are typically `secondary`, not `primary`. Sign-up or critical CTAs
401
401
  - **Avoid `leading-*` and `tracking-*` classes.** Each font size has appropriate line height and letter spacing defaults. Overriding them breaks the typographic rhythm.
402
402
  - **`text-caption` is for small annotations, not section headings.** Use it for labels like "STATUS", "CATEGORY", "OVERVIEW" in small text. For section headings, use regular `text-20 font-medium` or `text-18 font-medium`.
403
403
  - **`text-10` is very small.** Use it sparingly, mostly paired with `text-caption`. For labels and small text, prefer `text-12`.
404
+ - **`font-sans` (Inter) is the default and inherits.** Never set it explicitly.
405
+ - **`font-serif` (Newsreader) is opt-in.** Use it for editorial and marketing headings. Don't use it in product UI unless the user asks for it.
406
+ - **`font-mono` is the system monospace font on purpose.** Don't replace it with a web font. `CodeBlock` and `CodeInline` already apply it.
404
407
 
405
408
  ### Anti-Patterns
406
409
 
package/skill/references/tokens.md CHANGED
@@ -31,11 +31,13 @@ Always use semantic tokens over raw color scales. They adapt to light/dark mode
31
31
  | `bg-default` | Active/selected state |
32
32
  | `bg-elevated` | Hover states |
33
33
  | `bg-strong` | Strongly emphasized |
34
- | `bg-brand-*` | Brand purple |
34
+ | `bg-brand-*` | Brand blue |
35
35
  | `bg-inverse-*` | Inverted backgrounds |
36
36
  | `bg-code` | Inline code background |
37
37
  | `bg-backdrop` | Modal/overlay backdrop |
38
38
 
39
+ The neutral backgrounds step away from `bg-canvas` in order: `canvas` → `subtle` → `muted` → `default` → `elevated` → `strong`. Each step is lighter than the previous one in dark mode and darker in light mode.
40
+
39
41
  `bg-brand-*` scale: `subtlest`, `subtler`, `subtle`, `muted`, `default`, `elevated`, `strong`.
40
42
  `bg-inverse-*` scale: `canvas`, `subtle`, `muted`, `default`, `elevated`, `strong`.
41
43
 
@@ -43,7 +45,7 @@ Always use semantic tokens over raw color scales. They adapt to light/dark mode
43
45
 
44
46
  | Utility | Use For |
45
47
  | ----------------- | ------------------------------------------ |
46
- | `border-focus` | Focus rings (brand purple) |
48
+ | `border-focus` | Focus rings (brand blue) |
47
49
  | `border-subtle` | Faint borders |
48
50
  | `border-muted` | Standard borders |
49
51
  | `border-default` | Emphasized borders |
@@ -70,22 +72,32 @@ Example: `bg-status-success-subtle`, `text-status-error-default`, `border-status
70
72
 
71
73
  Use sparingly — only for custom illustrations, brand treatments, or cases where semantic tokens don't apply. **These do NOT adapt to light/dark mode.**
72
74
 
73
- | Scale | Purpose | Range |
74
- | ----------- | ------------------------ | -------- |
75
- | `space` | Dark grays | 100–1800 |
76
- | `foam` | Light grays | 100–1000 |
77
- | `brand` | Purple (primary brand) | 100–1200 |
78
- | `galactic` | Blue (info, links) | 100–1100 |
79
- | `starfield` | Green (success) | 100–1100 |
80
- | `solar` | Yellow/orange (warning) | 100–1100 |
81
- | `sonja` | Red/pink (error, danger) | 100–1100 |
75
+ | Scale | Purpose | Range |
76
+ | ----------- | ------------------------ | ------- |
77
+ | `space` | Dark grays | 100–900 |
78
+ | `foam` | Light grays | 100–900 |
79
+ | `brand` | Blue (primary brand) | 100–900 |
80
+ | `galactic` | Blue (info, links) | 100–900 |
81
+ | `starfield` | Green (success) | 100–900 |
82
+ | `solar` | Yellow/orange (warning) | 100–900 |
83
+ | `sonja` | Red/pink (error, danger) | 100–900 |
84
+
85
+ Within each scale, `100` is the lightest step and `900` the darkest. For the colored scales, `500` is the base color.
82
86
 
83
87
  ```tsx
84
- <div className="bg-brand-500">Brand purple (fixed, won't adapt to theme)</div>
88
+ <div className="bg-brand-500">Brand blue (fixed, won't adapt to theme)</div>
85
89
  ```
86
90
 
87
91
  ## Typography
88
92
 
93
+ ### Font Families
94
+
95
+ | Utility | Font | Use For |
96
+ | ------------ | ---------------- | ---------------------------------------------------------- |
97
+ | `font-sans` | Inter | **Default** — everything, never needs to be set (inherits) |
98
+ | `font-serif` | Newsreader | Opt-in: editorial and marketing headings, not product UI |
99
+ | `font-mono` | System monospace | Code (already applied by `CodeBlock` and `CodeInline`) |
100
+
89
101
  ### Font Sizes
90
102
 
91
103
  Standard Tailwind sizes (`text-sm`, `text-lg`, `text-base`) **do not exist**. Use numeric pixel values: