@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/mashroom.css
CHANGED
|
@@ -16273,7 +16273,7 @@ a, a:hover {
|
|
|
16273
16273
|
position: relative;
|
|
16274
16274
|
--atomix-glass-radius: var(--atomix-radius-md, 16px);
|
|
16275
16275
|
--atomix-glass-transform: none;
|
|
16276
|
-
--atomix-glass-transition:
|
|
16276
|
+
--atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
|
|
16277
16277
|
--atomix-glass-position: absolute;
|
|
16278
16278
|
--atomix-glass-container-width: 100%;
|
|
16279
16279
|
--atomix-glass-container-height: 100%;
|
|
@@ -16364,7 +16364,7 @@ a, a:hover {
|
|
|
16364
16364
|
height: var(--atomix-glass-container-height);
|
|
16365
16365
|
position: relative;
|
|
16366
16366
|
border-radius: var(--atomix-glass-radius);
|
|
16367
|
-
transition:
|
|
16367
|
+
transition: var(--atomix-glass-transition);
|
|
16368
16368
|
}
|
|
16369
16369
|
.c-atomix-glass__inner {
|
|
16370
16370
|
width: var(--atomix-glass-container-width);
|
|
@@ -16412,6 +16412,7 @@ a, a:hover {
|
|
|
16412
16412
|
}
|
|
16413
16413
|
.c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
|
|
16414
16414
|
opacity: var(--atomix-opacity-50, 0.5);
|
|
16415
|
+
z-index: -1;
|
|
16415
16416
|
}
|
|
16416
16417
|
.c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
|
|
16417
16418
|
opacity: var(--atomix-opacity-25, 0.25);
|
|
@@ -18948,23 +18949,50 @@ a, a:hover {
|
|
|
18948
18949
|
cursor: pointer;
|
|
18949
18950
|
padding: 0.5rem;
|
|
18950
18951
|
border-radius: 50%;
|
|
18951
|
-
transition: background-color 0.2s ease;
|
|
18952
|
+
transition: background-color 0.2s ease, opacity 0.2s ease;
|
|
18952
18953
|
color: var(--atomix-body-color);
|
|
18953
18954
|
}
|
|
18954
|
-
.c-color-mode-toggle:hover {
|
|
18955
|
+
.c-color-mode-toggle:hover:not(:disabled) {
|
|
18955
18956
|
background-color: rgba(0, 0, 0, 0.05);
|
|
18956
18957
|
}
|
|
18957
|
-
.c-color-mode-toggle:focus {
|
|
18958
|
+
.c-color-mode-toggle:focus-visible {
|
|
18958
18959
|
outline: none;
|
|
18959
18960
|
box-shadow: 0 0 0 2px var(--atomix-primary);
|
|
18960
18961
|
}
|
|
18962
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
18963
|
+
transform: scale(0.95);
|
|
18964
|
+
}
|
|
18961
18965
|
.c-color-mode-toggle svg {
|
|
18962
|
-
|
|
18963
|
-
|
|
18966
|
+
display: block;
|
|
18967
|
+
transition: transform 0.2s ease;
|
|
18968
|
+
}
|
|
18969
|
+
.c-color-mode-toggle--sm {
|
|
18970
|
+
padding: 0.375rem;
|
|
18971
|
+
}
|
|
18972
|
+
.c-color-mode-toggle--md {
|
|
18973
|
+
padding: 0.5rem;
|
|
18964
18974
|
}
|
|
18965
|
-
|
|
18975
|
+
.c-color-mode-toggle--lg {
|
|
18976
|
+
padding: 0.625rem;
|
|
18977
|
+
}
|
|
18978
|
+
.c-color-mode-toggle--disabled, .c-color-mode-toggle:disabled {
|
|
18979
|
+
cursor: not-allowed;
|
|
18980
|
+
opacity: 0.5;
|
|
18981
|
+
}
|
|
18982
|
+
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
|
|
18966
18983
|
background-color: rgba(255, 255, 255, 0.1);
|
|
18967
18984
|
}
|
|
18985
|
+
@media (prefers-reduced-motion: reduce) {
|
|
18986
|
+
.c-color-mode-toggle {
|
|
18987
|
+
transition: none;
|
|
18988
|
+
}
|
|
18989
|
+
.c-color-mode-toggle svg {
|
|
18990
|
+
transition: none;
|
|
18991
|
+
}
|
|
18992
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
18993
|
+
transform: none;
|
|
18994
|
+
}
|
|
18995
|
+
}
|
|
18968
18996
|
.c-countdown {
|
|
18969
18997
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
18970
18998
|
--atomix-countdown-font-size: 16px;
|