@cratis/components 4.22.0 → 4.22.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.
- package/README.md +19 -9
- package/compat-manifest.json +11 -11
- package/dist/esm/theme.css +11 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,23 +65,33 @@ Keep exactly one compatible Pixi resolution across the application and Component
|
|
|
65
65
|
|
|
66
66
|
## Styles
|
|
67
67
|
|
|
68
|
+
```css
|
|
69
|
+
/* index.css */
|
|
70
|
+
@import '@cratis/components/tokens';
|
|
71
|
+
@import '@cratis/components/styles';
|
|
72
|
+
@import '@cratis/components/theme'; /* optional baseline appearance */
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Import this file once at the application entry point, for example `import './index.css';`. Import the stylesheets from CSS rather than from TypeScript: the subpaths ship no type declarations, so on TypeScript 6, which checks side-effect imports by default, `import '@cratis/components/tokens'` in a `.tsx` file fails with TS2882. A Vite project type-checks `import './index.css'` through its `vite/client` types. A project that still imports the stylesheet subpaths from TypeScript declares them in an ambient `.d.ts` file:
|
|
76
|
+
|
|
68
77
|
```ts
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
78
|
+
declare module '@cratis/components/tokens';
|
|
79
|
+
declare module '@cratis/components/styles';
|
|
80
|
+
declare module '@cratis/components/styles/base';
|
|
81
|
+
declare module '@cratis/components/theme';
|
|
72
82
|
```
|
|
73
83
|
|
|
74
|
-
`tokens` supplies conservative light defaults. `styles` contains structural rules and internal utilities in low-priority Cratis cascade layers, with no Tailwind Preflight/reset or token duplication. `theme` adds automatic/explicit dark mode, forced colors, and themed subtrees.
|
|
84
|
+
`tokens` supplies conservative light defaults. `styles` contains structural rules and internal utilities in low-priority Cratis cascade layers, with no Tailwind Preflight/reset or token duplication. `theme` adds automatic/explicit dark mode, forced colors, and themed subtrees. It also maps Arc's `--color-error` and `--color-error-bg` for each light and dark scheme, so an app that customizes those Arc tokens sets them after importing `theme`.
|
|
75
85
|
|
|
76
86
|
A custom product design omits `theme`, imports product CSS after `tokens` and `styles`, and maps its canonical values directly to `--cratis-*`.
|
|
77
87
|
|
|
78
88
|
`styles` is every component's CSS in one file. To pay only for the surfaces the application mounts, import the shared base plus one entry point per subpath instead:
|
|
79
89
|
|
|
80
|
-
```
|
|
81
|
-
import '@cratis/components/tokens';
|
|
82
|
-
import '@cratis/components/styles/base';
|
|
83
|
-
import '@cratis/components/Dialogs/styles';
|
|
84
|
-
import '@cratis/components/DataTables/styles';
|
|
90
|
+
```css
|
|
91
|
+
@import '@cratis/components/tokens';
|
|
92
|
+
@import '@cratis/components/styles/base';
|
|
93
|
+
@import '@cratis/components/Dialogs/styles';
|
|
94
|
+
@import '@cratis/components/DataTables/styles';
|
|
85
95
|
```
|
|
86
96
|
|
|
87
97
|
Every JavaScript subpath publishes a matching `<subpath>/styles`, self-contained for that subpath. `styles/base` carries the internal utilities and the cascade-layer order, and is required exactly once; the aggregate already contains it.
|
package/compat-manifest.json
CHANGED
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
{
|
|
69
69
|
"name": "@cratis/components",
|
|
70
70
|
"role": "core",
|
|
71
|
-
"version": "4.22.
|
|
71
|
+
"version": "4.22.1",
|
|
72
72
|
"releaseMajorRange": ">=4 <5",
|
|
73
73
|
"independentRelease": false,
|
|
74
74
|
"private": false,
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
{
|
|
93
93
|
"name": "@cratis/eslint-plugin-components",
|
|
94
94
|
"role": "eslint",
|
|
95
|
-
"version": "4.22.
|
|
95
|
+
"version": "4.22.1",
|
|
96
96
|
"releaseMajorRange": ">=4 <5",
|
|
97
97
|
"independentRelease": false,
|
|
98
98
|
"private": false,
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
{
|
|
106
106
|
"name": "@cratis/components.migrator",
|
|
107
107
|
"role": "migrator",
|
|
108
|
-
"version": "4.22.
|
|
108
|
+
"version": "4.22.1",
|
|
109
109
|
"releaseMajorRange": ">=4 <5",
|
|
110
110
|
"independentRelease": false,
|
|
111
111
|
"private": false,
|
|
@@ -116,13 +116,13 @@
|
|
|
116
116
|
{
|
|
117
117
|
"name": "@cratis/components.conformance",
|
|
118
118
|
"role": "conformance",
|
|
119
|
-
"version": "4.22.
|
|
119
|
+
"version": "4.22.1",
|
|
120
120
|
"releaseMajorRange": ">=4 <5",
|
|
121
121
|
"independentRelease": false,
|
|
122
122
|
"private": false,
|
|
123
123
|
"packageAccess": "public",
|
|
124
124
|
"peerDependencies": {
|
|
125
|
-
"@cratis/components": "4.22.
|
|
125
|
+
"@cratis/components": "4.22.1",
|
|
126
126
|
"react": "^19.0.0",
|
|
127
127
|
"react-dom": "^19.0.0"
|
|
128
128
|
},
|
|
@@ -132,13 +132,13 @@
|
|
|
132
132
|
{
|
|
133
133
|
"name": "@cratis/components.mui",
|
|
134
134
|
"role": "renderer-adapter",
|
|
135
|
-
"version": "4.22.
|
|
135
|
+
"version": "4.22.1",
|
|
136
136
|
"releaseMajorRange": ">=4 <5",
|
|
137
137
|
"independentRelease": false,
|
|
138
138
|
"private": false,
|
|
139
139
|
"packageAccess": "public",
|
|
140
140
|
"peerDependencies": {
|
|
141
|
-
"@cratis/components": "4.22.
|
|
141
|
+
"@cratis/components": "4.22.1",
|
|
142
142
|
"@emotion/react": ">=11.5 <12",
|
|
143
143
|
"@emotion/styled": ">=11.11 <12",
|
|
144
144
|
"@mui/material": ">=9 <10",
|
|
@@ -188,13 +188,13 @@
|
|
|
188
188
|
{
|
|
189
189
|
"name": "@cratis/components.primereact",
|
|
190
190
|
"role": "renderer-adapter",
|
|
191
|
-
"version": "4.22.
|
|
191
|
+
"version": "4.22.1",
|
|
192
192
|
"releaseMajorRange": ">=4 <5",
|
|
193
193
|
"independentRelease": false,
|
|
194
194
|
"private": false,
|
|
195
195
|
"packageAccess": "public",
|
|
196
196
|
"peerDependencies": {
|
|
197
|
-
"@cratis/components": "4.22.
|
|
197
|
+
"@cratis/components": "4.22.1",
|
|
198
198
|
"@primereact/core": ">=11 <12",
|
|
199
199
|
"@primereact/ui": ">=11 <12",
|
|
200
200
|
"@primeuix/themes": ">=3 <4",
|
|
@@ -256,13 +256,13 @@
|
|
|
256
256
|
{
|
|
257
257
|
"name": "@cratis/components.primereact10",
|
|
258
258
|
"role": "renderer-adapter",
|
|
259
|
-
"version": "4.22.
|
|
259
|
+
"version": "4.22.1",
|
|
260
260
|
"releaseMajorRange": ">=4 <5",
|
|
261
261
|
"independentRelease": false,
|
|
262
262
|
"private": false,
|
|
263
263
|
"packageAccess": "public",
|
|
264
264
|
"peerDependencies": {
|
|
265
|
-
"@cratis/components": "4.22.
|
|
265
|
+
"@cratis/components": "4.22.1",
|
|
266
266
|
"primereact": ">=10.9.9 <11",
|
|
267
267
|
"react": "^19.0.0",
|
|
268
268
|
"react-dom": "^19.0.0"
|
package/dist/esm/theme.css
CHANGED
|
@@ -35,6 +35,8 @@
|
|
|
35
35
|
--cratis-green-500: #16a34a;
|
|
36
36
|
--cratis-orange-500: #d97706;
|
|
37
37
|
--cratis-red-500: #dc2626;
|
|
38
|
+
--color-error: #c00;
|
|
39
|
+
--color-error-bg: #fee;
|
|
38
40
|
--cratis-info-background: #0369a1;
|
|
39
41
|
--cratis-info-text: #ffffff;
|
|
40
42
|
--cratis-success-background: #15803d;
|
|
@@ -70,6 +72,11 @@
|
|
|
70
72
|
--cratis-shadow-toast: 0 2px 12px rgb(0 0 0 / 10%);
|
|
71
73
|
}
|
|
72
74
|
|
|
75
|
+
/* Arc draws an error in var(--color-error, #c00) on var(--color-error-bg, #fee): a field's validation
|
|
76
|
+
message and the command exception panel. Those fallbacks are 2.5:1 / 2.47:1 on the dark surfaces, so
|
|
77
|
+
the dark schemes below map the pair to a lighter red on a deep red. Every explicit-light selector in
|
|
78
|
+
the shared light block above restores the Arc fallbacks, including a light subtree under a root that
|
|
79
|
+
is dark only because of the system setting. */
|
|
73
80
|
:root.cratis-dark,
|
|
74
81
|
.cratis-dark .cratis-theme,
|
|
75
82
|
.cratis-theme.cratis-dark {
|
|
@@ -82,6 +89,8 @@
|
|
|
82
89
|
--cratis-action-background-active: #bfdbfe;
|
|
83
90
|
--cratis-action-text: #030712;
|
|
84
91
|
--cratis-red-500: #f87171;
|
|
92
|
+
--color-error: var(--cratis-red-500);
|
|
93
|
+
--color-error-bg: #450a0a;
|
|
85
94
|
--cratis-info-background: #38bdf8;
|
|
86
95
|
--cratis-info-text: #082f49;
|
|
87
96
|
--cratis-success-background: #4ade80;
|
|
@@ -127,6 +136,8 @@
|
|
|
127
136
|
--cratis-action-background-active: #bfdbfe;
|
|
128
137
|
--cratis-action-text: #030712;
|
|
129
138
|
--cratis-red-500: #f87171;
|
|
139
|
+
--color-error: var(--cratis-red-500);
|
|
140
|
+
--color-error-bg: #450a0a;
|
|
130
141
|
--cratis-info-background: #38bdf8;
|
|
131
142
|
--cratis-info-text: #082f49;
|
|
132
143
|
--cratis-success-background: #4ade80;
|
package/package.json
CHANGED