tyrell-components 1.0.0-TC39 → 1.0.0-TC40
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/css/tyrell-theme.css +28 -0
- package/dist/tyrell-theme.css +28 -0
- package/dist/tyrell.js +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
package/css/tyrell-theme.css
CHANGED
|
@@ -1371,3 +1371,31 @@ html:root,
|
|
|
1371
1371
|
transition-timing-function: ease;
|
|
1372
1372
|
}
|
|
1373
1373
|
}
|
|
1374
|
+
|
|
1375
|
+
/* Interactive components (button, input, switch, tabs, …) each carry their
|
|
1376
|
+
* OWN short transition — background-color/border-color/color at 0.15–0.2s —
|
|
1377
|
+
* for snappy hover/focus/active feedback. CSS transitions fire on ANY
|
|
1378
|
+
* computed-value change, not just interaction, so a theme switch also
|
|
1379
|
+
* (re-)triggers every one of those, racing the coordinated 0.45s dial
|
|
1380
|
+
* crossfade above at a different speed on every element — hundreds of
|
|
1381
|
+
* mistimed transitions instead of one wash, which reads as jittery rather
|
|
1382
|
+
* than smooth.
|
|
1383
|
+
*
|
|
1384
|
+
* `.ty-theme-switching` is an opt-in escape hatch: add it to `<html>` (or
|
|
1385
|
+
* a scoped `[data-ty-theme]` root) for the duration of a theme switch to
|
|
1386
|
+
* silence local transitions on its descendants — NOT on the switching
|
|
1387
|
+
* element itself, so the dial crossfade above is untouched. Five lines of
|
|
1388
|
+
* JS around your theme toggle:
|
|
1389
|
+
*
|
|
1390
|
+
* root.classList.add('ty-theme-switching');
|
|
1391
|
+
* root.classList.toggle('dark'); // or flip the theme pack
|
|
1392
|
+
* setTimeout(() => root.classList.remove('ty-theme-switching'),
|
|
1393
|
+
* parseFloat(getComputedStyle(root)
|
|
1394
|
+
* .getPropertyValue('--ty-theme-transition')) * 1000 || 450);
|
|
1395
|
+
*
|
|
1396
|
+
* Purely additive — nothing here runs unless you add the class yourself. */
|
|
1397
|
+
.ty-theme-switching *,
|
|
1398
|
+
.ty-theme-switching *::before,
|
|
1399
|
+
.ty-theme-switching *::after {
|
|
1400
|
+
transition: none !important;
|
|
1401
|
+
}
|
package/dist/tyrell-theme.css
CHANGED
|
@@ -1371,3 +1371,31 @@ html:root,
|
|
|
1371
1371
|
transition-timing-function: ease;
|
|
1372
1372
|
}
|
|
1373
1373
|
}
|
|
1374
|
+
|
|
1375
|
+
/* Interactive components (button, input, switch, tabs, …) each carry their
|
|
1376
|
+
* OWN short transition — background-color/border-color/color at 0.15–0.2s —
|
|
1377
|
+
* for snappy hover/focus/active feedback. CSS transitions fire on ANY
|
|
1378
|
+
* computed-value change, not just interaction, so a theme switch also
|
|
1379
|
+
* (re-)triggers every one of those, racing the coordinated 0.45s dial
|
|
1380
|
+
* crossfade above at a different speed on every element — hundreds of
|
|
1381
|
+
* mistimed transitions instead of one wash, which reads as jittery rather
|
|
1382
|
+
* than smooth.
|
|
1383
|
+
*
|
|
1384
|
+
* `.ty-theme-switching` is an opt-in escape hatch: add it to `<html>` (or
|
|
1385
|
+
* a scoped `[data-ty-theme]` root) for the duration of a theme switch to
|
|
1386
|
+
* silence local transitions on its descendants — NOT on the switching
|
|
1387
|
+
* element itself, so the dial crossfade above is untouched. Five lines of
|
|
1388
|
+
* JS around your theme toggle:
|
|
1389
|
+
*
|
|
1390
|
+
* root.classList.add('ty-theme-switching');
|
|
1391
|
+
* root.classList.toggle('dark'); // or flip the theme pack
|
|
1392
|
+
* setTimeout(() => root.classList.remove('ty-theme-switching'),
|
|
1393
|
+
* parseFloat(getComputedStyle(root)
|
|
1394
|
+
* .getPropertyValue('--ty-theme-transition')) * 1000 || 450);
|
|
1395
|
+
*
|
|
1396
|
+
* Purely additive — nothing here runs unless you add the class yourself. */
|
|
1397
|
+
.ty-theme-switching *,
|
|
1398
|
+
.ty-theme-switching *::before,
|
|
1399
|
+
.ty-theme-switching *::after {
|
|
1400
|
+
transition: none !important;
|
|
1401
|
+
}
|