@nysds/mcp-server 1.18.0 → 1.18.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/README.md +44 -29
- package/data/cem/custom-elements.json +109 -73
- package/data/guides/frameworks/react.md +70 -0
- package/data/guides/themes.md +61 -0
- package/data/tokens/tokens.css +1 -1
- package/data/tokens/tokens.json +1092 -399
- package/dist/lib/token-parser.d.ts +19 -31
- package/dist/lib/token-parser.d.ts.map +1 -1
- package/dist/lib/token-parser.js +57 -87
- package/dist/tools/guide-tools.d.ts.map +1 -1
- package/dist/tools/guide-tools.js +3 -1
- package/dist/tools/token-tools.d.ts +2 -3
- package/dist/tools/token-tools.d.ts.map +1 -1
- package/dist/tools/token-tools.js +66 -343
- package/package.json +3 -3
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# NYSDS Themes
|
|
2
|
+
|
|
3
|
+
NYSDS supports 8 agency themes that remap the `--nys-color-theme-*` design tokens to agency-specific color palettes. The default theme (NY.gov blue) is active when no theme is explicitly set.
|
|
4
|
+
|
|
5
|
+
## Available Themes
|
|
6
|
+
|
|
7
|
+
| Theme ID | Name | Description | Primary Color |
|
|
8
|
+
|----------|------|-------------|---------------|
|
|
9
|
+
| `default` | Default (NY.gov) | Default NY.gov theme for general state sites | `#154973` |
|
|
10
|
+
| `admin` | Administration | For administrative and regulatory agencies | `#a2350a` |
|
|
11
|
+
| `business` | Business | For commerce and economic development agencies | `#084b52` |
|
|
12
|
+
| `environment` | Environment | For environmental and conservation agencies | `#233f2b` |
|
|
13
|
+
| `health` | Health | For health and human services agencies | `#43285d` |
|
|
14
|
+
| `local` | Local Government | For local government entities | `#402217` |
|
|
15
|
+
| `safety` | Public Safety | For public safety agencies | `#435d6e` |
|
|
16
|
+
| `transportation` | Transportation | For DOT and transit authorities | `#0b5583` |
|
|
17
|
+
|
|
18
|
+
## How to Apply a Theme
|
|
19
|
+
|
|
20
|
+
### HTML attribute (recommended)
|
|
21
|
+
|
|
22
|
+
Set the `data-nys-theme` attribute on a root element:
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<html data-nys-theme="admin">
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### CSS class
|
|
29
|
+
|
|
30
|
+
Apply a theme class to any element:
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<body class="nys-theme-admin">
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Scoped theming
|
|
37
|
+
|
|
38
|
+
Apply a theme to a specific section of the page:
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<section data-nys-theme="health">
|
|
42
|
+
<!-- All NYSDS components inside will use the Health theme -->
|
|
43
|
+
</section>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## What Themes Change
|
|
47
|
+
|
|
48
|
+
Themes remap these CSS custom properties to the agency's color palette:
|
|
49
|
+
|
|
50
|
+
- `--nys-color-theme` — primary theme color
|
|
51
|
+
- `--nys-color-theme-strong` — darker variant
|
|
52
|
+
- `--nys-color-theme-stronger` — darkest variant
|
|
53
|
+
- `--nys-color-theme-weak` — lighter variant
|
|
54
|
+
- `--nys-color-theme-weaker` — lightest variant
|
|
55
|
+
- `--nys-color-theme-weakest` — near-white variant
|
|
56
|
+
|
|
57
|
+
All NYSDS components that use `--nys-color-theme-*` tokens automatically reflect the active theme.
|
|
58
|
+
|
|
59
|
+
## Default Behavior
|
|
60
|
+
|
|
61
|
+
The default theme applies at `:root` level. You do not need to set `data-nys-theme="default"` unless you are overriding a parent theme within a nested section.
|
package/data/tokens/tokens.css
CHANGED