@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/boomdevs.css
CHANGED
|
@@ -2125,7 +2125,7 @@ a, a:hover {
|
|
|
2125
2125
|
position: relative;
|
|
2126
2126
|
--atomix-glass-radius: var(--atomix-radius-md, 16px);
|
|
2127
2127
|
--atomix-glass-transform: none;
|
|
2128
|
-
--atomix-glass-transition:
|
|
2128
|
+
--atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
|
|
2129
2129
|
--atomix-glass-position: absolute;
|
|
2130
2130
|
--atomix-glass-container-width: 100%;
|
|
2131
2131
|
--atomix-glass-container-height: 100%;
|
|
@@ -2216,7 +2216,7 @@ a, a:hover {
|
|
|
2216
2216
|
height: var(--atomix-glass-container-height);
|
|
2217
2217
|
position: relative;
|
|
2218
2218
|
border-radius: var(--atomix-glass-radius);
|
|
2219
|
-
transition:
|
|
2219
|
+
transition: var(--atomix-glass-transition);
|
|
2220
2220
|
}
|
|
2221
2221
|
.c-atomix-glass__inner {
|
|
2222
2222
|
width: var(--atomix-glass-container-width);
|
|
@@ -2264,6 +2264,7 @@ a, a:hover {
|
|
|
2264
2264
|
}
|
|
2265
2265
|
.c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
|
|
2266
2266
|
opacity: var(--atomix-opacity-50, 0.5);
|
|
2267
|
+
z-index: -1;
|
|
2267
2268
|
}
|
|
2268
2269
|
.c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
|
|
2269
2270
|
opacity: var(--atomix-opacity-25, 0.25);
|
|
@@ -4795,23 +4796,50 @@ a, a:hover {
|
|
|
4795
4796
|
cursor: pointer;
|
|
4796
4797
|
padding: 0.5rem;
|
|
4797
4798
|
border-radius: 50%;
|
|
4798
|
-
transition: background-color 0.2s ease;
|
|
4799
|
+
transition: background-color 0.2s ease, opacity 0.2s ease;
|
|
4799
4800
|
color: var(--atomix-body-color);
|
|
4800
4801
|
}
|
|
4801
|
-
.c-color-mode-toggle:hover {
|
|
4802
|
+
.c-color-mode-toggle:hover:not(:disabled) {
|
|
4802
4803
|
background-color: rgba(0, 0, 0, 0.05);
|
|
4803
4804
|
}
|
|
4804
|
-
.c-color-mode-toggle:focus {
|
|
4805
|
+
.c-color-mode-toggle:focus-visible {
|
|
4805
4806
|
outline: none;
|
|
4806
4807
|
box-shadow: 0 0 0 2px var(--atomix-primary);
|
|
4807
4808
|
}
|
|
4809
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
4810
|
+
transform: scale(0.95);
|
|
4811
|
+
}
|
|
4808
4812
|
.c-color-mode-toggle svg {
|
|
4809
|
-
|
|
4810
|
-
|
|
4813
|
+
display: block;
|
|
4814
|
+
transition: transform 0.2s ease;
|
|
4815
|
+
}
|
|
4816
|
+
.c-color-mode-toggle--sm {
|
|
4817
|
+
padding: 0.375rem;
|
|
4818
|
+
}
|
|
4819
|
+
.c-color-mode-toggle--md {
|
|
4820
|
+
padding: 0.5rem;
|
|
4811
4821
|
}
|
|
4812
|
-
|
|
4822
|
+
.c-color-mode-toggle--lg {
|
|
4823
|
+
padding: 0.625rem;
|
|
4824
|
+
}
|
|
4825
|
+
.c-color-mode-toggle--disabled, .c-color-mode-toggle:disabled {
|
|
4826
|
+
cursor: not-allowed;
|
|
4827
|
+
opacity: 0.5;
|
|
4828
|
+
}
|
|
4829
|
+
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
|
|
4813
4830
|
background-color: rgba(255, 255, 255, 0.1);
|
|
4814
4831
|
}
|
|
4832
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4833
|
+
.c-color-mode-toggle {
|
|
4834
|
+
transition: none;
|
|
4835
|
+
}
|
|
4836
|
+
.c-color-mode-toggle svg {
|
|
4837
|
+
transition: none;
|
|
4838
|
+
}
|
|
4839
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
4840
|
+
transform: none;
|
|
4841
|
+
}
|
|
4842
|
+
}
|
|
4815
4843
|
.c-countdown {
|
|
4816
4844
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
4817
4845
|
--atomix-countdown-font-size: 1rem;
|