@dmsi/wedgekit-react 0.0.38 → 0.0.40

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 (11) hide show
  1. package/dist/chunk-6DONKNDT.js +25 -0
  2. package/dist/components/MobileDataGrid.cjs +14 -2
  3. package/dist/components/MobileDataGrid.js +1 -1
  4. package/dist/components/Theme.cjs +14 -2
  5. package/dist/components/Theme.js +1 -1
  6. package/dist/index.css +328 -0
  7. package/package.json +1 -1
  8. package/src/components/Theme.tsx +10 -1
  9. package/src/darkmode.css +139 -1
  10. package/src/index.css +207 -1
  11. package/dist/chunk-CHTO7PW4.js +0 -13
package/dist/chunk-6DONKNDT.js ADDED
@@ -0,0 +1,25 @@
1
+ // src/components/Theme.tsx
2
+ import { jsx } from "react/jsx-runtime";
3
+ function Theme({
4
+ theme,
5
+ children,
6
+ id,
7
+ ref
8
+ }) {
9
+ return /* @__PURE__ */ jsx(
10
+ "div",
11
+ {
12
+ id,
13
+ className: "contents",
14
+ "data-theme": theme,
15
+ ref: (e) => {
16
+ if (ref) ref.current = e;
17
+ },
18
+ children
19
+ }
20
+ );
21
+ }
22
+
23
+ export {
24
+ Theme
25
+ };
package/dist/components/MobileDataGrid.cjs CHANGED
@@ -523,9 +523,21 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
523
523
  function Theme({
524
524
  theme,
525
525
  children,
526
- id
526
+ id,
527
+ ref
527
528
  }) {
528
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id, className: "contents", "data-theme": theme, children });
529
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
530
+ "div",
531
+ {
532
+ id,
533
+ className: "contents",
534
+ "data-theme": theme,
535
+ ref: (e) => {
536
+ if (ref) ref.current = e;
537
+ },
538
+ children
539
+ }
540
+ );
529
541
  }
530
542
 
531
543
  // src/components/Heading.tsx
package/dist/components/MobileDataGrid.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Theme
3
- } from "../chunk-CHTO7PW4.js";
3
+ } from "../chunk-6DONKNDT.js";
4
4
  import {
5
5
  Stack
6
6
  } from "../chunk-IOSLZ3WW.js";
package/dist/components/Theme.cjs CHANGED
@@ -27,9 +27,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
27
27
  function Theme({
28
28
  theme,
29
29
  children,
30
- id
30
+ id,
31
+ ref
31
32
  }) {
32
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id, className: "contents", "data-theme": theme, children });
33
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
34
+ "div",
35
+ {
36
+ id,
37
+ className: "contents",
38
+ "data-theme": theme,
39
+ ref: (e) => {
40
+ if (ref) ref.current = e;
41
+ },
42
+ children
43
+ }
44
+ );
33
45
  }
34
46
  // Annotate the CommonJS export names for ESM import in node:
35
47
  0 && (module.exports = {
package/dist/components/Theme.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Theme
3
- } from "../chunk-CHTO7PW4.js";
3
+ } from "../chunk-6DONKNDT.js";
4
4
  import "../chunk-ORMEWXMH.js";
5
5
  export {
6
6
  Theme
package/dist/index.css CHANGED
@@ -4111,6 +4111,334 @@
4111
4111
  }
4112
4112
  }
4113
4113
  }
4114
+ [data-theme=light] {
4115
+ --color-text-primary-normal: var(--color-neutral-500);
4116
+ --color-text-primary-active: var(--color-neutral-400);
4117
+ --color-text-primary-disabled: var(--color-neutral-300);
4118
+ --color-text-primary-error: var(--color-critical-400);
4119
+ --color-text-secondary-normal: var(--color-neutral-400);
4120
+ --color-text-secondary-disabled: var(--color-neutral-300);
4121
+ --color-text-secondary-error: var(--color-critical-400);
4122
+ --color-text-success-normal: var(--color-success-500);
4123
+ --color-text-success-disabled: var(--color-neutral-400);
4124
+ --color-text-success-error: var(--color-critical-400);
4125
+ --color-text-warning-normal: var(--color-warning-500);
4126
+ --color-text-warning-disabled: var(--color-neutral-400);
4127
+ --color-text-warning-error: var(--color-critical-400);
4128
+ --color-text-brand-primary-normal: var(--color-neutral-000);
4129
+ --color-text-link-normal: var(--color-link-400);
4130
+ --color-text-link-hover: var(--color-link-500);
4131
+ --color-text-link-active: var(--color-link-300);
4132
+ --color-text-link-disabled: var(--color-neutral-400);
4133
+ --color-border-primary-normal: var(--color-neutral-300);
4134
+ --color-border-primary-focus: var(--color-action-400);
4135
+ --color-border-primary-error: var(--color-critical-400);
4136
+ --color-border-primary-normal: var(--color-neutral-300);
4137
+ --color-icon-primary-normal: var(--color-neutral-400);
4138
+ --color-icon-primary-disabled: var(--color-neutral-300);
4139
+ --color-icon-success-normal: var(--color-success-400);
4140
+ --color-icon-success-disabled: var(--color-neutral-400);
4141
+ --color-icon-warning-normal: var(--color-warning-400);
4142
+ --color-icon-warning-disabled: var(--color-neutral-400);
4143
+ --color-icon-critical-normal: var(--color-critical-400);
4144
+ --color-icon-critical-disabled: var(--color-neutral-400);
4145
+ --color-background-primary-normal: var(--color-neutral-000);
4146
+ --color-background-grouped-primary-normal: var(--color-neutral-000);
4147
+ --color-background-secondary-normal: var(--color-neutral-300);
4148
+ --color-background-grouped-secondary-normal: var(--color-neutral-100);
4149
+ --color-background-success-normal: var(--color-success-400);
4150
+ --color-background-warning-normal: var(--color-warning-400);
4151
+ --color-background-critical-normal: var(--color-critical-400);
4152
+ --color-text-action-normal: var(--color-action-400);
4153
+ --color-text-action-hover: var(--color-action-500);
4154
+ --color-text-action-active: var(--color-action-300);
4155
+ --color-text-action-disabled: var(--color-neutral-400);
4156
+ --color-text-action-primary-normal: var(--color-action-400);
4157
+ --color-text-action-primary-hover: var(--color-action-500);
4158
+ --color-text-action-primary-active: var(--color-action-300);
4159
+ --color-text-action-primary-disabled: var(--color-neutral-400);
4160
+ --color-brand-text-action-primary-normal: var( --color-neutral-000 );
4161
+ --color-brand-text-action-primary-hover: var( --color-brand-200 );
4162
+ --color-brand-text-action-primary-active: var( --color-brand-200 );
4163
+ --color-brand-text-on-action-primary-normal: var( --color-neutral-000 );
4164
+ --color-brand-text-on-action-primary-hover: var( --color-brand-500 );
4165
+ --color-brand-text-on-action-primary-active: var( --color-brand-300 );
4166
+ --color-text-on-action-primary-normal: var(--color-neutral-000);
4167
+ --color-text-on-action-primary-hover: var(--color-neutral-000);
4168
+ --color-text-on-action-primary-active: var(--color-neutral-000);
4169
+ --color-text-on-action-primary-disabled: var(--color-neutral-400);
4170
+ --color-text-action-critical-normal: var(--color-critical-400);
4171
+ --color-text-action-critical-hover: var(--color-critical-500);
4172
+ --color-text-action-critical-active: var(--color-critical-300);
4173
+ --color-text-action-critical-disabled: var(--color-neutral-400);
4174
+ --color-border-action-normal: var(--color-action-400);
4175
+ --color-border-action-hover: var(--color-action-500);
4176
+ --color-border-action-active: var(--color-action-300);
4177
+ --color-border-action-disabled: var(--color-neutral-200);
4178
+ --color-text-critical-normal: var(--color-critical-400);
4179
+ --color-text-critical-disabled: var(--color-neutral-400);
4180
+ --color-text-critical-error: var(--color-critical-400);
4181
+ --color-border-action-critical-normal: var(--color-critical-400);
4182
+ --color-border-action-critical-hover: var(--color-critical-500);
4183
+ --color-border-action-critical-active: var(--color-critical-300);
4184
+ --color-border-action-critical-disabled: var(--color-neutral-200);
4185
+ --color-background-action-normal: var(--color-action-400);
4186
+ --color-background-action-hover: var(--color-action-500);
4187
+ --color-background-action-active: var(--color-action-300);
4188
+ --color-background-action-disabled: var(--color-neutral-200);
4189
+ --color-background-action-critical-normal: var(--color-critical-400);
4190
+ --color-background-action-critical-hover: var(--color-critical-500);
4191
+ --color-background-action-critical-active: var(--color-critical-300);
4192
+ --color-background-action-critical-disabled: var(--color-neutral-200);
4193
+ --color-icon-action-primary-normal: var(--color-neutral-500);
4194
+ --color-icon-action-primary-hover: var(--color-action-500);
4195
+ --color-icon-action-primary-active: var(--color-action-300);
4196
+ --color-icon-action-primary-disabled: var(--color-neutral-300);
4197
+ --color-icon-action-secondary-normal: var(--color-action-400);
4198
+ --color-icon-action-secondary-hover: var(--color-action-500);
4199
+ --color-icon-action-secondary-active: var(--color-action-300);
4200
+ --color-icon-action-secondary-disabled: var(--color-neutral-400);
4201
+ --color-icon-on-action-primary-normal: var(--color-neutral-000);
4202
+ --color-icon-on-action-primary-hover: var(--color-neutral-000);
4203
+ --color-icon-on-action-primary-active: var(--color-neutral-000);
4204
+ --color-icon-on-action-primary-disabled: var(--color-neutral-400);
4205
+ --color-icon-on-action-secondary-normal: var(--color-action-400);
4206
+ --color-icon-on-action-secondary-hover: var(--color-action-500);
4207
+ --color-icon-on-action-secondary-active: var(--color-action-300);
4208
+ --color-icon-on-action-secondary-disabled: var(--color-neutral-400);
4209
+ --color-icon-action-critical-normal: var(--color-critical-400);
4210
+ --color-icon-action-critical-hover: var(--color-critical-500);
4211
+ --color-icon-action-critical-active: var(--color-critical-300);
4212
+ --color-icon-action-critical-disabled: var(--color-neutral-400);
4213
+ --color-icon-action-critical-secondary-normal: var(--color-critical-400);
4214
+ --color-icon-action-critical-secondary-hover: var(--color-critical-500);
4215
+ --color-icon-action-critical-secondary-active: var(--color-critical-300);
4216
+ --color-icon-action-critical-secondary-disabled: var(--color-neutral-400);
4217
+ --color-icon-brand-primary-normal: var(--color-brand-400);
4218
+ --color-icon-brand-primary-hover: var(--color-brand-500);
4219
+ --color-icon-brand-primary-active: var(--color-brand-300);
4220
+ --color-icon-brand-primary-disabled: var(--color-neutral-300);
4221
+ --color-background-action-primary-normal: var(--color-action-400);
4222
+ --color-background-action-primary-hover: var(--color-action-500);
4223
+ --color-background-action-primary-active: var(--color-action-300);
4224
+ --color-background-action-primary-disabled: var(--color-neutral-200);
4225
+ --color-background-action-secondary-normal: var(--color-neutral-000);
4226
+ --color-background-action-secondary-hover: var(--color-action-100);
4227
+ --color-background-action-secondary-active: var(--color-neutral-000);
4228
+ --color-background-action-secondary-disabled: var(--color-neutral-200);
4229
+ --color-background-brand-normal: var(--color-brand-400);
4230
+ --color-background-on-action-primary-normal: var( --color-neutral-000 );
4231
+ --color-background-on-action-primary-hover: var( --color-neutral-000 );
4232
+ --color-background-on-action-primary-active: var( --color-neutral-000 );
4233
+ --color-background-on-action-primary-disabled: var( --color-neutral-200 );
4234
+ --color-background-on-action-secondary-normal: var( --color-neutral-100 );
4235
+ --color-background-on-action-secondary-hover: var( --color-brand-500 );
4236
+ --color-background-on-action-secondary-active: var( --color-brand-400 );
4237
+ --color-background-on-action-secondary-disabled: var( --color-neutral-200 );
4238
+ --color-background-action-critical-primary-normal: var(--color-critical-400);
4239
+ --color-background-action-critical-primary-hover: var(--color-critical-500);
4240
+ --color-background-action-critical-primary-active: var(--color-critical-300);
4241
+ --color-background-action-critical-primary-disabled: var(--color-neutral-200);
4242
+ --color-background-action-critical-secondary-normal: var(--color-neutral-000);
4243
+ --color-background-action-critical-secondary-hover: var(--color-critical-100);
4244
+ --color-background-action-critical-secondary-active: var(--color-neutral-000);
4245
+ --color-background-action-critical-secondary-disabled: var( --color-neutral-200 );
4246
+ --color-background-brand-normal: var( --color-brand-400 );
4247
+ }
4248
+ @media (prefers-color-scheme: dark) {
4249
+ :root {
4250
+ --color-text-primary-normal: var(--color-neutral-000);
4251
+ --color-text-primary-disabled: var(--color-neutral-400);
4252
+ --color-text-primary-error: var(--color-critical-300);
4253
+ --color-text-secondary-normal: var(--color-neutral-300);
4254
+ --color-text-secondary-disabled: var(--color-neutral-400);
4255
+ --color-text-secondary-error: var(--color-critical-300);
4256
+ --color-text-success-normal: var(--color-success-200);
4257
+ --color-text-success-disabled: var(--color-neutral-300);
4258
+ --color-text-success-error: var(--color-critical-300);
4259
+ --color-text-warning-normal: var(--color-warning-200);
4260
+ --color-text-warning-disabled: var(--color-neutral-300);
4261
+ --color-text-warning-error: var(--color-critical-300);
4262
+ --color-text-link-normal: var(--color-link-300);
4263
+ --color-text-link-hover: var(--color-link-400);
4264
+ --color-text-link-active: var(--color-link-200);
4265
+ --color-text-link-disabled: var(--color-neutral-400);
4266
+ --color-border-primary-normal: var(--color-neutral-400);
4267
+ --color-border-primary-focus: var(--color-action-300);
4268
+ --color-border-primary-error: var(--color-critical-300);
4269
+ --color-icon-primary-normal: var(--color-neutral-300);
4270
+ --color-icon-primary-disabled: var(--color-neutral-400);
4271
+ --color-icon-success-normal: var(--color-success-300);
4272
+ --color-icon-success-disabled: var(--color-neutral-400);
4273
+ --color-icon-warning-normal: var(--color-warning-300);
4274
+ --color-icon-warning-disabled: var(--color-neutral-400);
4275
+ --color-icon-critical-normal: var(--color-critical-300);
4276
+ --color-icon-critical-disabled: var(--color-neutral-400);
4277
+ --color-background-primary-normal: var(--color-neutral-600);
4278
+ --color-background-grouped-primary-normal: var(--color-neutral-500);
4279
+ --color-background-secondary-normal: var(--color-neutral-500);
4280
+ --color-background-grouped-secondary-normal: var(--color-neutral-600);
4281
+ --color-background-success-normal: var(--color-success-300);
4282
+ --color-background-warning-normal: var(--color-warning-300);
4283
+ --color-background-critical-normal: var(--color-critical-300);
4284
+ --color-text-action-primary-normal: var(--color-action-300);
4285
+ --color-text-action-primary-hover: var(--color-action-400);
4286
+ --color-text-action-primary-active: var(--color-action-200);
4287
+ --color-text-action-primary-disabled: var(--color-neutral-400);
4288
+ --color-text-on-action-primary-normal: var(--color-neutral-600);
4289
+ --color-text-on-action-primary-hover: var(--color-neutral-500);
4290
+ --color-text-on-action-primary-active: var(--color-neutral-600);
4291
+ --color-text-on-action-primary-disabled: var(--color-neutral-400);
4292
+ --color-text-action-critical-normal: var(--color-critical-300);
4293
+ --color-text-action-critical-hover: var(--color-critical-400);
4294
+ --color-text-action-critical-active: var(--color-critical-200);
4295
+ --color-text-action-critical-disabled: var(--color-neutral-400);
4296
+ --color-border-action-normal: var(--color-action-300);
4297
+ --color-border-action-hover: var(--color-action-400);
4298
+ --color-border-action-active: var(--color-action-200);
4299
+ --color-border-action-disabled: var(--color-neutral-450);
4300
+ --color-text-critical-normal: var(--color-critical-300);
4301
+ --color-text-critical-disabled: var(--color-neutral-300);
4302
+ --color-text-critical-error: var(--color-critical-300);
4303
+ --color-border-action-critical-normal: var(--color-critical-300);
4304
+ --color-border-action-critical-hover: var(--color-critical-400);
4305
+ --color-border-action-critical-active: var(--color-critical-200);
4306
+ --color-border-action-critical-disabled: var(--color-neutral-450);
4307
+ --color-icon-action-primary-normal: var(--color-neutral-000);
4308
+ --color-icon-action-primary-hover: var(--color-action-300);
4309
+ --color-icon-action-primary-active: var(--color-action-200);
4310
+ --color-icon-action-primary-disabled: var(--color-neutral-400);
4311
+ --color-icon-action-secondary-normal: var(--color-action-300);
4312
+ --color-icon-action-secondary-hover: var(--color-action-400);
4313
+ --color-icon-action-secondary-active: var(--color-action-200);
4314
+ --color-icon-action-secondary-disabled: var(--color-neutral-400);
4315
+ --color-icon-on-action-primary-normal: var(--color-neutral-600);
4316
+ --color-icon-on-action-primary-hover: var(--color-neutral-500);
4317
+ --color-icon-on-action-primary-active: var(--color-neutral-600);
4318
+ --color-icon-on-action-primary-disabled: var(--color-neutral-400);
4319
+ --color-icon-action-critical-normal: var(--color-critical-300);
4320
+ --color-icon-action-critical-hover: var(--color-critical-400);
4321
+ --color-icon-action-critical-active: var(--color-critical-200);
4322
+ --color-icon-action-critical-disabled: var(--color-neutral-400);
4323
+ --color-icon-brand-primary-normal: var(--color-brand-300);
4324
+ --color-icon-brand-primary-hover: var(--color-brand-400);
4325
+ --color-icon-brand-primary-active: var(--color-brand-200);
4326
+ --color-icon-brand-primary-disabled: var(--color-neutral-400);
4327
+ --color-background-action-primary-normal: var(--color-action-300);
4328
+ --color-background-action-primary-hover: var(--color-action-400);
4329
+ --color-background-action-primary-active: var(--color-action-200);
4330
+ --color-background-action-primary-disabled: var(--color-neutral-450);
4331
+ --color-background-action-secondary-normal: var(--color-neutral-600);
4332
+ --color-background-action-secondary-hover: var(--color-action-500);
4333
+ --color-background-action-secondary-active: var(--color-neutral-600);
4334
+ --color-background-action-secondary-disabled: var(--color-neutral-450);
4335
+ --color-background-brand-normal: var(--color-brand-400);
4336
+ --color-background-action-critical-primary-normal: var( --color-critical-300 );
4337
+ --color-background-action-critical-primary-hover: var(--color-critical-400);
4338
+ --color-background-action-critical-primary-active: var( --color-critical-200 );
4339
+ --color-background-action-critical-primary-disabled: var( --color-neutral-450 );
4340
+ --color-background-action-critical-secondary-normal: var( --color-neutral-600 );
4341
+ --color-background-action-critical-secondary-hover: var( --color-critical-500 );
4342
+ --color-background-action-critical-secondary-active: var( --color-neutral-600 );
4343
+ --color-background-action-critical-secondary-disabled: var( --color-neutral-450 );
4344
+ }
4345
+ }
4346
+ [data-theme=dark] {
4347
+ --color-text-primary-normal: var(--color-neutral-000);
4348
+ --color-text-primary-disabled: var(--color-neutral-400);
4349
+ --color-text-primary-error: var(--color-critical-300);
4350
+ --color-text-secondary-normal: var(--color-neutral-300);
4351
+ --color-text-secondary-disabled: var(--color-neutral-400);
4352
+ --color-text-secondary-error: var(--color-critical-300);
4353
+ --color-text-success-normal: var(--color-success-200);
4354
+ --color-text-success-disabled: var(--color-neutral-300);
4355
+ --color-text-success-error: var(--color-critical-300);
4356
+ --color-text-warning-normal: var(--color-warning-200);
4357
+ --color-text-warning-disabled: var(--color-neutral-300);
4358
+ --color-text-warning-error: var(--color-critical-300);
4359
+ --color-text-link-normal: var(--color-link-300);
4360
+ --color-text-link-hover: var(--color-link-400);
4361
+ --color-text-link-active: var(--color-link-200);
4362
+ --color-text-link-disabled: var(--color-neutral-400);
4363
+ --color-border-primary-normal: var(--color-neutral-400);
4364
+ --color-border-primary-focus: var(--color-action-300);
4365
+ --color-border-primary-error: var(--color-critical-300);
4366
+ --color-icon-primary-normal: var(--color-neutral-300);
4367
+ --color-icon-primary-disabled: var(--color-neutral-400);
4368
+ --color-icon-success-normal: var(--color-success-300);
4369
+ --color-icon-success-disabled: var(--color-neutral-400);
4370
+ --color-icon-warning-normal: var(--color-warning-300);
4371
+ --color-icon-warning-disabled: var(--color-neutral-400);
4372
+ --color-icon-critical-normal: var(--color-critical-300);
4373
+ --color-icon-critical-disabled: var(--color-neutral-400);
4374
+ --color-background-primary-normal: var(--color-neutral-600);
4375
+ --color-background-grouped-primary-normal: var(--color-neutral-500);
4376
+ --color-background-secondary-normal: var(--color-neutral-500);
4377
+ --color-background-grouped-secondary-normal: var(--color-neutral-600);
4378
+ --color-background-success-normal: var(--color-success-300);
4379
+ --color-background-warning-normal: var(--color-warning-300);
4380
+ --color-background-critical-normal: var(--color-critical-300);
4381
+ --color-text-action-primary-normal: var(--color-action-300);
4382
+ --color-text-action-primary-hover: var(--color-action-400);
4383
+ --color-text-action-primary-active: var(--color-action-200);
4384
+ --color-text-action-primary-disabled: var(--color-neutral-400);
4385
+ --color-text-on-action-primary-normal: var(--color-neutral-600);
4386
+ --color-text-on-action-primary-hover: var(--color-neutral-500);
4387
+ --color-text-on-action-primary-active: var(--color-neutral-600);
4388
+ --color-text-on-action-primary-disabled: var(--color-neutral-400);
4389
+ --color-text-action-critical-normal: var(--color-critical-300);
4390
+ --color-text-action-critical-hover: var(--color-critical-400);
4391
+ --color-text-action-critical-active: var(--color-critical-200);
4392
+ --color-text-action-critical-disabled: var(--color-neutral-400);
4393
+ --color-border-action-normal: var(--color-action-300);
4394
+ --color-border-action-hover: var(--color-action-400);
4395
+ --color-border-action-active: var(--color-action-200);
4396
+ --color-border-action-disabled: var(--color-neutral-450);
4397
+ --color-text-critical-normal: var(--color-critical-300);
4398
+ --color-text-critical-disabled: var(--color-neutral-300);
4399
+ --color-text-critical-error: var(--color-critical-300);
4400
+ --color-border-action-critical-normal: var(--color-critical-300);
4401
+ --color-border-action-critical-hover: var(--color-critical-400);
4402
+ --color-border-action-critical-active: var(--color-critical-200);
4403
+ --color-border-action-critical-disabled: var(--color-neutral-450);
4404
+ --color-icon-action-primary-normal: var(--color-neutral-000);
4405
+ --color-icon-action-primary-hover: var(--color-action-300);
4406
+ --color-icon-action-primary-active: var(--color-action-200);
4407
+ --color-icon-action-primary-disabled: var(--color-neutral-400);
4408
+ --color-icon-action-secondary-normal: var(--color-action-300);
4409
+ --color-icon-action-secondary-hover: var(--color-action-400);
4410
+ --color-icon-action-secondary-active: var(--color-action-200);
4411
+ --color-icon-action-secondary-disabled: var(--color-neutral-400);
4412
+ --color-icon-on-action-primary-normal: var(--color-neutral-600);
4413
+ --color-icon-on-action-primary-hover: var(--color-neutral-500);
4414
+ --color-icon-on-action-primary-active: var(--color-neutral-600);
4415
+ --color-icon-on-action-primary-disabled: var(--color-neutral-400);
4416
+ --color-icon-action-critical-normal: var(--color-critical-300);
4417
+ --color-icon-action-critical-hover: var(--color-critical-400);
4418
+ --color-icon-action-critical-active: var(--color-critical-200);
4419
+ --color-icon-action-critical-disabled: var(--color-neutral-400);
4420
+ --color-icon-brand-primary-normal: var(--color-brand-300);
4421
+ --color-icon-brand-primary-hover: var(--color-brand-400);
4422
+ --color-icon-brand-primary-active: var(--color-brand-200);
4423
+ --color-icon-brand-primary-disabled: var(--color-neutral-400);
4424
+ --color-background-action-primary-normal: var(--color-action-300);
4425
+ --color-background-action-primary-hover: var(--color-action-400);
4426
+ --color-background-action-primary-active: var(--color-action-200);
4427
+ --color-background-action-primary-disabled: var(--color-neutral-450);
4428
+ --color-background-action-secondary-normal: var(--color-neutral-600);
4429
+ --color-background-action-secondary-hover: var(--color-action-500);
4430
+ --color-background-action-secondary-active: var(--color-neutral-600);
4431
+ --color-background-action-secondary-disabled: var(--color-neutral-450);
4432
+ --color-background-brand-normal: var(--color-brand-400);
4433
+ --color-background-action-critical-primary-normal: var( --color-critical-300 );
4434
+ --color-background-action-critical-primary-hover: var(--color-critical-400);
4435
+ --color-background-action-critical-primary-active: var( --color-critical-200 );
4436
+ --color-background-action-critical-primary-disabled: var( --color-neutral-450 );
4437
+ --color-background-action-critical-secondary-normal: var( --color-neutral-600 );
4438
+ --color-background-action-critical-secondary-hover: var( --color-critical-500 );
4439
+ --color-background-action-critical-secondary-active: var( --color-neutral-600 );
4440
+ --color-background-action-critical-secondary-disabled: var( --color-neutral-450 );
4441
+ }
4114
4442
  [data-theme=brand] {
4115
4443
  --color-text-primary-normal: var(--color-neutral-000);
4116
4444
  --color-text-primary-disabled: var(--color-neutral-400);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dmsi/wedgekit-react",
3
3
  "private": false,
4
- "version": "0.0.38",
4
+ "version": "0.0.40",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "tsup",
package/src/components/Theme.tsx CHANGED
@@ -2,13 +2,22 @@ export function Theme({
2
2
  theme,
3
3
  children,
4
4
  id,
5
+ ref,
5
6
  }: {
6
7
  theme: "auto" | "brand";
7
8
  children: React.ReactNode;
8
9
  id?: string;
10
+ ref?: React.RefObject<HTMLDivElement | null>;
9
11
  }) {
10
12
  return (
11
- <div id={id} className="contents" data-theme={theme}>
13
+ <div
14
+ id={id}
15
+ className="contents"
16
+ data-theme={theme}
17
+ ref={(e) => {
18
+ if (ref) ref.current = e;
19
+ }}
20
+ >
12
21
  {children}
13
22
  </div>
14
23
  );
package/src/darkmode.css CHANGED
@@ -137,4 +137,142 @@
137
137
  --color-neutral-450
138
138
  );
139
139
  }
140
- }
140
+ }
141
+
142
+ [data-theme="dark"] {
143
+ --color-text-primary-normal: var(--color-neutral-000);
144
+
145
+ --color-text-primary-disabled: var(--color-neutral-400);
146
+ --color-text-primary-error: var(--color-critical-300);
147
+
148
+ --color-text-secondary-normal: var(--color-neutral-300);
149
+ --color-text-secondary-disabled: var(--color-neutral-400);
150
+ --color-text-secondary-error: var(--color-critical-300);
151
+
152
+ --color-text-success-normal: var(--color-success-200);
153
+ --color-text-success-disabled: var(--color-neutral-300);
154
+ --color-text-success-error: var(--color-critical-300);
155
+
156
+ --color-text-warning-normal: var(--color-warning-200);
157
+ --color-text-warning-disabled: var(--color-neutral-300);
158
+ --color-text-warning-error: var(--color-critical-300);
159
+
160
+ --color-text-link-normal: var(--color-link-300);
161
+ --color-text-link-hover: var(--color-link-400);
162
+ --color-text-link-active: var(--color-link-200);
163
+ --color-text-link-disabled: var(--color-neutral-400);
164
+
165
+ --color-border-primary-normal: var(--color-neutral-400);
166
+ --color-border-primary-focus: var(--color-action-300);
167
+ --color-border-primary-error: var(--color-critical-300);
168
+
169
+ --color-icon-primary-normal: var(--color-neutral-300);
170
+ --color-icon-primary-disabled: var(--color-neutral-400);
171
+
172
+ --color-icon-success-normal: var(--color-success-300);
173
+ --color-icon-success-disabled: var(--color-neutral-400);
174
+
175
+ --color-icon-warning-normal: var(--color-warning-300);
176
+ --color-icon-warning-disabled: var(--color-neutral-400);
177
+
178
+ --color-icon-critical-normal: var(--color-critical-300);
179
+ --color-icon-critical-disabled: var(--color-neutral-400);
180
+
181
+ --color-background-primary-normal: var(--color-neutral-600);
182
+ --color-background-grouped-primary-normal: var(--color-neutral-500);
183
+ --color-background-secondary-normal: var(--color-neutral-500);
184
+ --color-background-grouped-secondary-normal: var(--color-neutral-600);
185
+ --color-background-success-normal: var(--color-success-300);
186
+ --color-background-warning-normal: var(--color-warning-300);
187
+ --color-background-critical-normal: var(--color-critical-300);
188
+
189
+ --color-text-action-primary-normal: var(--color-action-300);
190
+ --color-text-action-primary-hover: var(--color-action-400);
191
+ --color-text-action-primary-active: var(--color-action-200);
192
+ --color-text-action-primary-disabled: var(--color-neutral-400);
193
+
194
+ --color-text-on-action-primary-normal: var(--color-neutral-600);
195
+ --color-text-on-action-primary-hover: var(--color-neutral-500);
196
+ --color-text-on-action-primary-active: var(--color-neutral-600);
197
+ --color-text-on-action-primary-disabled: var(--color-neutral-400);
198
+
199
+ --color-text-action-critical-normal: var(--color-critical-300);
200
+ --color-text-action-critical-hover: var(--color-critical-400);
201
+ --color-text-action-critical-active: var(--color-critical-200);
202
+ --color-text-action-critical-disabled: var(--color-neutral-400);
203
+
204
+ --color-border-action-normal: var(--color-action-300);
205
+ --color-border-action-hover: var(--color-action-400);
206
+ --color-border-action-active: var(--color-action-200);
207
+ --color-border-action-disabled: var(--color-neutral-450);
208
+
209
+ --color-text-critical-normal: var(--color-critical-300);
210
+ --color-text-critical-disabled: var(--color-neutral-300);
211
+ --color-text-critical-error: var(--color-critical-300);
212
+
213
+ --color-border-action-critical-normal: var(--color-critical-300);
214
+ --color-border-action-critical-hover: var(--color-critical-400);
215
+ --color-border-action-critical-active: var(--color-critical-200);
216
+ --color-border-action-critical-disabled: var(--color-neutral-450);
217
+
218
+ --color-icon-action-primary-normal: var(--color-neutral-000);
219
+ --color-icon-action-primary-hover: var(--color-action-300);
220
+ --color-icon-action-primary-active: var(--color-action-200);
221
+ --color-icon-action-primary-disabled: var(--color-neutral-400);
222
+
223
+ --color-icon-action-secondary-normal: var(--color-action-300);
224
+ --color-icon-action-secondary-hover: var(--color-action-400);
225
+ --color-icon-action-secondary-active: var(--color-action-200);
226
+ --color-icon-action-secondary-disabled: var(--color-neutral-400);
227
+
228
+ --color-icon-on-action-primary-normal: var(--color-neutral-600);
229
+ --color-icon-on-action-primary-hover: var(--color-neutral-500);
230
+ --color-icon-on-action-primary-active: var(--color-neutral-600);
231
+ --color-icon-on-action-primary-disabled: var(--color-neutral-400);
232
+
233
+ --color-icon-action-critical-normal: var(--color-critical-300);
234
+ --color-icon-action-critical-hover: var(--color-critical-400);
235
+ --color-icon-action-critical-active: var(--color-critical-200);
236
+ --color-icon-action-critical-disabled: var(--color-neutral-400);
237
+
238
+ --color-icon-brand-primary-normal: var(--color-brand-300);
239
+ --color-icon-brand-primary-hover: var(--color-brand-400);
240
+ --color-icon-brand-primary-active: var(--color-brand-200);
241
+ --color-icon-brand-primary-disabled: var(--color-neutral-400);
242
+
243
+ --color-background-action-primary-normal: var(--color-action-300);
244
+ --color-background-action-primary-hover: var(--color-action-400);
245
+ --color-background-action-primary-active: var(--color-action-200);
246
+ --color-background-action-primary-disabled: var(--color-neutral-450);
247
+
248
+ --color-background-action-secondary-normal: var(--color-neutral-600);
249
+ --color-background-action-secondary-hover: var(--color-action-500);
250
+ --color-background-action-secondary-active: var(--color-neutral-600);
251
+ --color-background-action-secondary-disabled: var(--color-neutral-450);
252
+
253
+ --color-background-brand-normal: var(--color-brand-400);
254
+
255
+ --color-background-action-critical-primary-normal: var(
256
+ --color-critical-300
257
+ );
258
+ --color-background-action-critical-primary-hover: var(--color-critical-400);
259
+ --color-background-action-critical-primary-active: var(
260
+ --color-critical-200
261
+ );
262
+ --color-background-action-critical-primary-disabled: var(
263
+ --color-neutral-450
264
+ );
265
+
266
+ --color-background-action-critical-secondary-normal: var(
267
+ --color-neutral-600
268
+ );
269
+ --color-background-action-critical-secondary-hover: var(
270
+ --color-critical-500
271
+ );
272
+ --color-background-action-critical-secondary-active: var(
273
+ --color-neutral-600
274
+ );
275
+ --color-background-action-critical-secondary-disabled: var(
276
+ --color-neutral-450
277
+ );
278
+ }
package/src/index.css CHANGED
@@ -422,7 +422,213 @@
422
422
  ); /* Created for Main Navigation */
423
423
  }
424
424
 
425
- /* @import "./darkmode.css"; */
425
+ [data-theme="light"]{
426
+
427
+ /** Color Token Aliases */
428
+
429
+ --color-text-primary-normal: var(--color-neutral-500);
430
+ --color-text-primary-active: var(--color-neutral-400);
431
+ --color-text-primary-disabled: var(--color-neutral-300);
432
+ --color-text-primary-error: var(--color-critical-400);
433
+
434
+ --color-text-secondary-normal: var(--color-neutral-400);
435
+ --color-text-secondary-disabled: var(--color-neutral-300);
436
+ --color-text-secondary-error: var(--color-critical-400);
437
+
438
+ --color-text-success-normal: var(--color-success-500);
439
+ --color-text-success-disabled: var(--color-neutral-400);
440
+ --color-text-success-error: var(--color-critical-400);
441
+
442
+ --color-text-warning-normal: var(--color-warning-500);
443
+ --color-text-warning-disabled: var(--color-neutral-400);
444
+ --color-text-warning-error: var(--color-critical-400);
445
+
446
+ --color-text-brand-primary-normal: var(--color-neutral-000);
447
+
448
+ --color-text-link-normal: var(--color-link-400);
449
+ --color-text-link-hover: var(--color-link-500);
450
+ --color-text-link-active: var(--color-link-300);
451
+ --color-text-link-disabled: var(--color-neutral-400);
452
+
453
+ --color-border-primary-normal: var(--color-neutral-300);
454
+ --color-border-primary-focus: var(--color-action-400);
455
+ --color-border-primary-error: var(--color-critical-400);
456
+ --color-border-primary-normal: var(--color-neutral-300);
457
+
458
+ --color-icon-primary-normal: var(--color-neutral-400);
459
+ --color-icon-primary-disabled: var(--color-neutral-300);
460
+
461
+ --color-icon-success-normal: var(--color-success-400);
462
+ --color-icon-success-disabled: var(--color-neutral-400);
463
+
464
+ --color-icon-warning-normal: var(--color-warning-400);
465
+ --color-icon-warning-disabled: var(--color-neutral-400);
466
+
467
+ --color-icon-critical-normal: var(--color-critical-400);
468
+ --color-icon-critical-disabled: var(--color-neutral-400);
469
+
470
+ --color-background-primary-normal: var(--color-neutral-000);
471
+ --color-background-grouped-primary-normal: var(--color-neutral-000);
472
+ --color-background-secondary-normal: var(--color-neutral-300);
473
+ --color-background-grouped-secondary-normal: var(--color-neutral-100);
474
+ --color-background-success-normal: var(--color-success-400);
475
+ --color-background-warning-normal: var(--color-warning-400);
476
+ --color-background-critical-normal: var(--color-critical-400);
477
+
478
+ --color-text-action-normal: var(--color-action-400);
479
+ --color-text-action-hover: var(--color-action-500);
480
+ --color-text-action-active: var(--color-action-300);
481
+ --color-text-action-disabled: var(--color-neutral-400);
482
+
483
+ --color-text-action-primary-normal: var(--color-action-400);
484
+ --color-text-action-primary-hover: var(--color-action-500);
485
+ --color-text-action-primary-active: var(--color-action-300);
486
+ --color-text-action-primary-disabled: var(--color-neutral-400);
487
+
488
+ --color-brand-text-action-primary-normal: var(
489
+ --color-neutral-000
490
+ ); /* Created for Navigation Button as no token was added for it on Figma */
491
+ --color-brand-text-action-primary-hover: var(
492
+ --color-brand-200
493
+ ); /* Created for Navigation Button as no token was added for it on Figma */
494
+ --color-brand-text-action-primary-active: var(
495
+ --color-brand-200
496
+ ); /* Created for Navigation Button as no token was added for it on Figma */
497
+
498
+ --color-brand-text-on-action-primary-normal: var(
499
+ --color-neutral-000
500
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
501
+ --color-brand-text-on-action-primary-hover: var(
502
+ --color-brand-500
503
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
504
+ --color-brand-text-on-action-primary-active: var(
505
+ --color-brand-300
506
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
507
+
508
+ --color-text-on-action-primary-normal: var(--color-neutral-000);
509
+ --color-text-on-action-primary-hover: var(--color-neutral-000);
510
+ --color-text-on-action-primary-active: var(--color-neutral-000);
511
+ --color-text-on-action-primary-disabled: var(--color-neutral-400);
512
+
513
+ --color-text-action-critical-normal: var(--color-critical-400);
514
+ --color-text-action-critical-hover: var(--color-critical-500);
515
+ --color-text-action-critical-active: var(--color-critical-300);
516
+ --color-text-action-critical-disabled: var(--color-neutral-400);
517
+
518
+ --color-border-action-normal: var(--color-action-400);
519
+ --color-border-action-hover: var(--color-action-500);
520
+ --color-border-action-active: var(--color-action-300);
521
+ --color-border-action-disabled: var(--color-neutral-200);
522
+
523
+ --color-text-critical-normal: var(--color-critical-400);
524
+ --color-text-critical-disabled: var(--color-neutral-400);
525
+ --color-text-critical-error: var(--color-critical-400);
526
+
527
+ --color-border-action-critical-normal: var(--color-critical-400);
528
+ --color-border-action-critical-hover: var(--color-critical-500);
529
+ --color-border-action-critical-active: var(--color-critical-300);
530
+ --color-border-action-critical-disabled: var(--color-neutral-200);
531
+
532
+ --color-background-action-normal: var(--color-action-400);
533
+ --color-background-action-hover: var(--color-action-500);
534
+ --color-background-action-active: var(--color-action-300);
535
+ --color-background-action-disabled: var(--color-neutral-200);
536
+
537
+ --color-background-action-critical-normal: var(--color-critical-400);
538
+ --color-background-action-critical-hover: var(--color-critical-500);
539
+ --color-background-action-critical-active: var(--color-critical-300);
540
+ --color-background-action-critical-disabled: var(--color-neutral-200);
541
+
542
+ --color-icon-action-primary-normal: var(--color-neutral-500);
543
+ --color-icon-action-primary-hover: var(--color-action-500);
544
+ --color-icon-action-primary-active: var(--color-action-300);
545
+ --color-icon-action-primary-disabled: var(--color-neutral-300);
546
+
547
+ --color-icon-action-secondary-normal: var(--color-action-400);
548
+ --color-icon-action-secondary-hover: var(--color-action-500);
549
+ --color-icon-action-secondary-active: var(--color-action-300);
550
+ --color-icon-action-secondary-disabled: var(--color-neutral-400);
551
+
552
+ --color-icon-on-action-primary-normal: var(--color-neutral-000);
553
+ --color-icon-on-action-primary-hover: var(--color-neutral-000);
554
+ --color-icon-on-action-primary-active: var(--color-neutral-000);
555
+ --color-icon-on-action-primary-disabled: var(--color-neutral-400);
556
+
557
+ --color-icon-on-action-secondary-normal: var(--color-action-400);
558
+ --color-icon-on-action-secondary-hover: var(--color-action-500);
559
+ --color-icon-on-action-secondary-active: var(--color-action-300);
560
+ --color-icon-on-action-secondary-disabled: var(--color-neutral-400);
561
+
562
+ --color-icon-action-critical-normal: var(--color-critical-400);
563
+ --color-icon-action-critical-hover: var(--color-critical-500);
564
+ --color-icon-action-critical-active: var(--color-critical-300);
565
+ --color-icon-action-critical-disabled: var(--color-neutral-400);
566
+
567
+ --color-icon-action-critical-secondary-normal: var(--color-critical-400);
568
+ --color-icon-action-critical-secondary-hover: var(--color-critical-500);
569
+ --color-icon-action-critical-secondary-active: var(--color-critical-300);
570
+ --color-icon-action-critical-secondary-disabled: var(--color-neutral-400);
571
+
572
+ --color-icon-brand-primary-normal: var(--color-brand-400);
573
+ --color-icon-brand-primary-hover: var(--color-brand-500);
574
+ --color-icon-brand-primary-active: var(--color-brand-300);
575
+ --color-icon-brand-primary-disabled: var(--color-neutral-300);
576
+
577
+ --color-background-action-primary-normal: var(--color-action-400);
578
+ --color-background-action-primary-hover: var(--color-action-500);
579
+ --color-background-action-primary-active: var(--color-action-300);
580
+ --color-background-action-primary-disabled: var(--color-neutral-200);
581
+
582
+ --color-background-action-secondary-normal: var(--color-neutral-000);
583
+ --color-background-action-secondary-hover: var(--color-action-100);
584
+ --color-background-action-secondary-active: var(--color-neutral-000);
585
+ --color-background-action-secondary-disabled: var(--color-neutral-200);
586
+
587
+ --color-background-brand-normal: var(--color-brand-400);
588
+
589
+ --color-background-on-action-primary-normal: var(
590
+ --color-neutral-000
591
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
592
+ --color-background-on-action-primary-hover: var(
593
+ --color-neutral-000
594
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
595
+ --color-background-on-action-primary-active: var(
596
+ --color-neutral-000
597
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
598
+ --color-background-on-action-primary-disabled: var(
599
+ --color-neutral-200
600
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
601
+
602
+ --color-background-on-action-secondary-normal: var(
603
+ --color-neutral-100
604
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
605
+ --color-background-on-action-secondary-hover: var(
606
+ --color-brand-500
607
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
608
+ --color-background-on-action-secondary-active: var(
609
+ --color-brand-400
610
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
611
+ --color-background-on-action-secondary-disabled: var(
612
+ --color-neutral-200
613
+ ); /* Created for Navigation Tab as no token was added for it on Figma */
614
+
615
+ --color-background-action-critical-primary-normal: var(--color-critical-400);
616
+ --color-background-action-critical-primary-hover: var(--color-critical-500);
617
+ --color-background-action-critical-primary-active: var(--color-critical-300);
618
+ --color-background-action-critical-primary-disabled: var(--color-neutral-200);
619
+
620
+ --color-background-action-critical-secondary-normal: var(--color-neutral-000);
621
+ --color-background-action-critical-secondary-hover: var(--color-critical-100);
622
+ --color-background-action-critical-secondary-active: var(--color-neutral-000);
623
+ --color-background-action-critical-secondary-disabled: var(
624
+ --color-neutral-200
625
+ );
626
+ --color-background-brand-normal: var(
627
+ --color-brand-400
628
+ ); /* Created for Main Navigation */
629
+ }
630
+
631
+ @import "./darkmode.css";
426
632
  @import "./brand.css";
427
633
 
428
634
  body {
package/dist/chunk-CHTO7PW4.js DELETED
@@ -1,13 +0,0 @@
1
- // src/components/Theme.tsx
2
- import { jsx } from "react/jsx-runtime";
3
- function Theme({
4
- theme,
5
- children,
6
- id
7
- }) {
8
- return /* @__PURE__ */ jsx("div", { id, className: "contents", "data-theme": theme, children });
9
- }
10
-
11
- export {
12
- Theme
13
- };