@shohojdhara/atomix 0.2.5 → 0.2.6
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/dist/atomix.css +36 -8
- package/dist/atomix.min.css +1 -1
- package/dist/index.d.ts +30 -1
- package/dist/index.esm.js +81 -39
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +81 -39
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/themes/applemix.css +36 -8
- package/dist/themes/applemix.min.css +1 -1
- package/dist/themes/boomdevs.css +36 -8
- package/dist/themes/boomdevs.min.css +1 -1
- package/dist/themes/esrar.css +36 -8
- package/dist/themes/esrar.min.css +1 -1
- package/dist/themes/flashtrade.css +36 -8
- package/dist/themes/flashtrade.min.css +1 -1
- package/dist/themes/mashroom.css +36 -8
- package/dist/themes/mashroom.min.css +1 -1
- package/dist/themes/shaj-default.css +36 -8
- package/dist/themes/shaj-default.min.css +1 -1
- package/package.json +1 -1
- package/src/components/AtomixGlass/AtomixGlass.tsx +0 -2
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +0 -1
- package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx +121 -11
- package/src/components/ColorModeToggle/ColorModeToggle.tsx +146 -45
- package/src/components/ColorModeToggle/index.ts +1 -1
- package/src/lib/constants/components.ts +1 -1
- package/src/styles/06-components/_components.atomix-glass.scss +4 -3
- package/src/styles/06-components/_components.color-mode-toggle.scss +43 -6
package/dist/themes/applemix.css
CHANGED
|
@@ -1783,7 +1783,7 @@ a, a:hover {
|
|
|
1783
1783
|
position: relative;
|
|
1784
1784
|
--atomix-glass-radius: var(--atomix-radius-md, 16px);
|
|
1785
1785
|
--atomix-glass-transform: none;
|
|
1786
|
-
--atomix-glass-transition:
|
|
1786
|
+
--atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
|
|
1787
1787
|
--atomix-glass-position: absolute;
|
|
1788
1788
|
--atomix-glass-container-width: 100%;
|
|
1789
1789
|
--atomix-glass-container-height: 100%;
|
|
@@ -1874,7 +1874,7 @@ a, a:hover {
|
|
|
1874
1874
|
height: var(--atomix-glass-container-height);
|
|
1875
1875
|
position: relative;
|
|
1876
1876
|
border-radius: var(--atomix-glass-radius);
|
|
1877
|
-
transition:
|
|
1877
|
+
transition: var(--atomix-glass-transition);
|
|
1878
1878
|
}
|
|
1879
1879
|
.c-atomix-glass__inner {
|
|
1880
1880
|
width: var(--atomix-glass-container-width);
|
|
@@ -1922,6 +1922,7 @@ a, a:hover {
|
|
|
1922
1922
|
}
|
|
1923
1923
|
.c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
|
|
1924
1924
|
opacity: var(--atomix-opacity-50, 0.5);
|
|
1925
|
+
z-index: -1;
|
|
1925
1926
|
}
|
|
1926
1927
|
.c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
|
|
1927
1928
|
opacity: var(--atomix-opacity-25, 0.25);
|
|
@@ -4455,23 +4456,50 @@ a, a:hover {
|
|
|
4455
4456
|
cursor: pointer;
|
|
4456
4457
|
padding: 0.5rem;
|
|
4457
4458
|
border-radius: 50%;
|
|
4458
|
-
transition: background-color 0.2s ease;
|
|
4459
|
+
transition: background-color 0.2s ease, opacity 0.2s ease;
|
|
4459
4460
|
color: var(--atomix-body-color);
|
|
4460
4461
|
}
|
|
4461
|
-
.c-color-mode-toggle:hover {
|
|
4462
|
+
.c-color-mode-toggle:hover:not(:disabled) {
|
|
4462
4463
|
background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 50%, transparent);
|
|
4463
4464
|
}
|
|
4464
|
-
.c-color-mode-toggle:focus {
|
|
4465
|
+
.c-color-mode-toggle:focus-visible {
|
|
4465
4466
|
outline: none;
|
|
4466
4467
|
box-shadow: 0 0 0 2px var(--atomix-primary);
|
|
4467
4468
|
}
|
|
4469
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
4470
|
+
transform: scale(0.95);
|
|
4471
|
+
}
|
|
4468
4472
|
.c-color-mode-toggle svg {
|
|
4469
|
-
|
|
4470
|
-
|
|
4473
|
+
display: block;
|
|
4474
|
+
transition: transform 0.2s ease;
|
|
4475
|
+
}
|
|
4476
|
+
.c-color-mode-toggle--sm {
|
|
4477
|
+
padding: 0.375rem;
|
|
4478
|
+
}
|
|
4479
|
+
.c-color-mode-toggle--md {
|
|
4480
|
+
padding: 0.5rem;
|
|
4471
4481
|
}
|
|
4472
|
-
|
|
4482
|
+
.c-color-mode-toggle--lg {
|
|
4483
|
+
padding: 0.625rem;
|
|
4484
|
+
}
|
|
4485
|
+
.c-color-mode-toggle--disabled, .c-color-mode-toggle:disabled {
|
|
4486
|
+
cursor: not-allowed;
|
|
4487
|
+
opacity: 0.5;
|
|
4488
|
+
}
|
|
4489
|
+
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
|
|
4473
4490
|
background-color: color-mix(in srgb, rgba(255, 255, 255, 0.1) 50%, transparent);
|
|
4474
4491
|
}
|
|
4492
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4493
|
+
.c-color-mode-toggle {
|
|
4494
|
+
transition: none;
|
|
4495
|
+
}
|
|
4496
|
+
.c-color-mode-toggle svg {
|
|
4497
|
+
transition: none;
|
|
4498
|
+
}
|
|
4499
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
4500
|
+
transform: none;
|
|
4501
|
+
}
|
|
4502
|
+
}
|
|
4475
4503
|
.c-countdown {
|
|
4476
4504
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
4477
4505
|
--atomix-countdown-font-size: 1rem;
|