@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
|
@@ -2401,7 +2401,7 @@ a, a:hover {
|
|
|
2401
2401
|
position: relative;
|
|
2402
2402
|
--atomix-glass-radius: var(--atomix-radius-md, 16px);
|
|
2403
2403
|
--atomix-glass-transform: none;
|
|
2404
|
-
--atomix-glass-transition:
|
|
2404
|
+
--atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
|
|
2405
2405
|
--atomix-glass-position: absolute;
|
|
2406
2406
|
--atomix-glass-container-width: 100%;
|
|
2407
2407
|
--atomix-glass-container-height: 100%;
|
|
@@ -2492,7 +2492,7 @@ a, a:hover {
|
|
|
2492
2492
|
height: var(--atomix-glass-container-height);
|
|
2493
2493
|
position: relative;
|
|
2494
2494
|
border-radius: var(--atomix-glass-radius);
|
|
2495
|
-
transition:
|
|
2495
|
+
transition: var(--atomix-glass-transition);
|
|
2496
2496
|
}
|
|
2497
2497
|
.c-atomix-glass__inner {
|
|
2498
2498
|
width: var(--atomix-glass-container-width);
|
|
@@ -2540,6 +2540,7 @@ a, a:hover {
|
|
|
2540
2540
|
}
|
|
2541
2541
|
.c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
|
|
2542
2542
|
opacity: var(--atomix-opacity-50, 0.5);
|
|
2543
|
+
z-index: -1;
|
|
2543
2544
|
}
|
|
2544
2545
|
.c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
|
|
2545
2546
|
opacity: var(--atomix-opacity-25, 0.25);
|
|
@@ -5076,23 +5077,50 @@ a, a:hover {
|
|
|
5076
5077
|
cursor: pointer;
|
|
5077
5078
|
padding: 0.5rem;
|
|
5078
5079
|
border-radius: 50%;
|
|
5079
|
-
transition: background-color 0.2s ease;
|
|
5080
|
+
transition: background-color 0.2s ease, opacity 0.2s ease;
|
|
5080
5081
|
color: var(--atomix-body-color);
|
|
5081
5082
|
}
|
|
5082
|
-
.c-color-mode-toggle:hover {
|
|
5083
|
+
.c-color-mode-toggle:hover:not(:disabled) {
|
|
5083
5084
|
background-color: rgba(0, 0, 0, 0.05);
|
|
5084
5085
|
}
|
|
5085
|
-
.c-color-mode-toggle:focus {
|
|
5086
|
+
.c-color-mode-toggle:focus-visible {
|
|
5086
5087
|
outline: none;
|
|
5087
5088
|
box-shadow: 0 0 0 2px var(--atomix-primary);
|
|
5088
5089
|
}
|
|
5090
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
5091
|
+
transform: scale(0.95);
|
|
5092
|
+
}
|
|
5089
5093
|
.c-color-mode-toggle svg {
|
|
5090
|
-
|
|
5091
|
-
|
|
5094
|
+
display: block;
|
|
5095
|
+
transition: transform 0.2s ease;
|
|
5096
|
+
}
|
|
5097
|
+
.c-color-mode-toggle--sm {
|
|
5098
|
+
padding: 0.375rem;
|
|
5099
|
+
}
|
|
5100
|
+
.c-color-mode-toggle--md {
|
|
5101
|
+
padding: 0.5rem;
|
|
5092
5102
|
}
|
|
5093
|
-
|
|
5103
|
+
.c-color-mode-toggle--lg {
|
|
5104
|
+
padding: 0.625rem;
|
|
5105
|
+
}
|
|
5106
|
+
.c-color-mode-toggle--disabled, .c-color-mode-toggle:disabled {
|
|
5107
|
+
cursor: not-allowed;
|
|
5108
|
+
opacity: 0.5;
|
|
5109
|
+
}
|
|
5110
|
+
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
|
|
5094
5111
|
background-color: rgba(255, 255, 255, 0.1);
|
|
5095
5112
|
}
|
|
5113
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5114
|
+
.c-color-mode-toggle {
|
|
5115
|
+
transition: none;
|
|
5116
|
+
}
|
|
5117
|
+
.c-color-mode-toggle svg {
|
|
5118
|
+
transition: none;
|
|
5119
|
+
}
|
|
5120
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
5121
|
+
transform: none;
|
|
5122
|
+
}
|
|
5123
|
+
}
|
|
5096
5124
|
.c-countdown {
|
|
5097
5125
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
5098
5126
|
--atomix-countdown-font-size: 16px;
|