@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
|
@@ -1806,7 +1806,7 @@ body {
|
|
|
1806
1806
|
position: relative;
|
|
1807
1807
|
--atomix-glass-radius: var(--atomix-radius-md, 16px);
|
|
1808
1808
|
--atomix-glass-transform: none;
|
|
1809
|
-
--atomix-glass-transition:
|
|
1809
|
+
--atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
|
|
1810
1810
|
--atomix-glass-position: absolute;
|
|
1811
1811
|
--atomix-glass-container-width: 100%;
|
|
1812
1812
|
--atomix-glass-container-height: 100%;
|
|
@@ -1897,7 +1897,7 @@ body {
|
|
|
1897
1897
|
height: var(--atomix-glass-container-height);
|
|
1898
1898
|
position: relative;
|
|
1899
1899
|
border-radius: var(--atomix-glass-radius);
|
|
1900
|
-
transition:
|
|
1900
|
+
transition: var(--atomix-glass-transition);
|
|
1901
1901
|
}
|
|
1902
1902
|
.c-atomix-glass__inner {
|
|
1903
1903
|
width: var(--atomix-glass-container-width);
|
|
@@ -1945,6 +1945,7 @@ body {
|
|
|
1945
1945
|
}
|
|
1946
1946
|
.c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
|
|
1947
1947
|
opacity: var(--atomix-opacity-50, 0.5);
|
|
1948
|
+
z-index: -1;
|
|
1948
1949
|
}
|
|
1949
1950
|
.c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
|
|
1950
1951
|
opacity: var(--atomix-opacity-25, 0.25);
|
|
@@ -4490,25 +4491,52 @@ body {
|
|
|
4490
4491
|
cursor: pointer;
|
|
4491
4492
|
padding: 0.5rem;
|
|
4492
4493
|
border-radius: 50%;
|
|
4493
|
-
transition: background-color 0.2s ease;
|
|
4494
|
+
transition: background-color 0.2s ease, opacity 0.2s ease;
|
|
4494
4495
|
color: var(--atomix-body-color);
|
|
4495
4496
|
}
|
|
4496
|
-
.c-color-mode-toggle:hover {
|
|
4497
|
+
.c-color-mode-toggle:hover:not(:disabled) {
|
|
4497
4498
|
background-color: color-mix(in srgb, rgba(0, 0, 0, 0.05) 70%, transparent);
|
|
4498
4499
|
box-shadow: var(--atomix-box-shadow-inset), 4px 8px 32px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(0, 0, 0, 0.05) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4499
4500
|
}
|
|
4500
|
-
.c-color-mode-toggle:focus {
|
|
4501
|
+
.c-color-mode-toggle:focus-visible {
|
|
4501
4502
|
outline: none;
|
|
4502
4503
|
box-shadow: 0 0 0 2px var(--atomix-primary);
|
|
4503
4504
|
}
|
|
4505
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
4506
|
+
transform: scale(0.95);
|
|
4507
|
+
}
|
|
4504
4508
|
.c-color-mode-toggle svg {
|
|
4505
|
-
|
|
4506
|
-
|
|
4509
|
+
display: block;
|
|
4510
|
+
transition: transform 0.2s ease;
|
|
4511
|
+
}
|
|
4512
|
+
.c-color-mode-toggle--sm {
|
|
4513
|
+
padding: 0.375rem;
|
|
4514
|
+
}
|
|
4515
|
+
.c-color-mode-toggle--md {
|
|
4516
|
+
padding: 0.5rem;
|
|
4507
4517
|
}
|
|
4508
|
-
|
|
4518
|
+
.c-color-mode-toggle--lg {
|
|
4519
|
+
padding: 0.625rem;
|
|
4520
|
+
}
|
|
4521
|
+
.c-color-mode-toggle--disabled, .c-color-mode-toggle:disabled {
|
|
4522
|
+
cursor: not-allowed;
|
|
4523
|
+
opacity: 0.5;
|
|
4524
|
+
}
|
|
4525
|
+
[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
|
|
4509
4526
|
background-color: color-mix(in srgb, rgba(255, 255, 255, 0.1) 70%, transparent);
|
|
4510
4527
|
box-shadow: var(--atomix-box-shadow-inset), 4px 8px 32px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 20px color-mix(in srgb, rgba(255, 255, 255, 0.1) 20%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
4511
4528
|
}
|
|
4529
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4530
|
+
.c-color-mode-toggle {
|
|
4531
|
+
transition: none;
|
|
4532
|
+
}
|
|
4533
|
+
.c-color-mode-toggle svg {
|
|
4534
|
+
transition: none;
|
|
4535
|
+
}
|
|
4536
|
+
.c-color-mode-toggle:active:not(:disabled) {
|
|
4537
|
+
transform: none;
|
|
4538
|
+
}
|
|
4539
|
+
}
|
|
4512
4540
|
.c-countdown {
|
|
4513
4541
|
--atomix-countdown-color: var(--atomix-body-color);
|
|
4514
4542
|
--atomix-countdown-font-size: 1rem;
|