@knime/kds-styles 10.2.0 → 11.0.0
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/CHANGELOG.md +2 -0
- package/README.md +1 -1
- package/dist/css/basics.css +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -60,7 +60,7 @@ An app that cannot import `index.css` yet — e.g. it still needs the `@knime/st
|
|
|
60
60
|
|
|
61
61
|
Do so deliberately if the app is only partially migrated: legacy `--knime-*` properties are hard-coded light and ignore `light-dark()`, so those parts stay light, and `color-scheme` also switches browser chrome (scrollbars, form controls, canvas background).
|
|
62
62
|
|
|
63
|
-
For an explicit user override, call `
|
|
63
|
+
For an explicit user override, call `useKdsDarkModeController()` from `@knime/kds-components`. It writes `color-scheme` inline on `<html>`, winning over the rule above. It needs a DOM, so in a server-rendered app call it from client-only code and leave the `system` default to CSS.
|
|
64
64
|
|
|
65
65
|
### Design Tokens in JavaScript/TypeScript
|
|
66
66
|
|
package/dist/css/basics.css
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
/*
|
|
5
5
|
* Follow the device preference. The color tokens resolve via `light-dark()`,
|
|
6
6
|
* so this needs no JavaScript and applies on the first paint.
|
|
7
|
-
* `
|
|
8
|
-
* light/dark preference.
|
|
7
|
+
* `useKdsDarkModeController()` overrides it with an inline style for an
|
|
8
|
+
* explicit light/dark preference.
|
|
9
9
|
*/
|
|
10
10
|
color-scheme: light dark;
|
|
11
11
|
}
|