@shohojdhara/atomix 0.4.5 → 0.4.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.
Files changed (40) hide show
  1. package/dist/atomix.css +33 -14
  2. package/dist/atomix.css.map +1 -1
  3. package/dist/atomix.min.css +1 -1
  4. package/dist/atomix.min.css.map +1 -1
  5. package/dist/charts.js +183 -184
  6. package/dist/charts.js.map +1 -1
  7. package/dist/core.js +183 -184
  8. package/dist/core.js.map +1 -1
  9. package/dist/forms.js +183 -184
  10. package/dist/forms.js.map +1 -1
  11. package/dist/heavy.js +183 -184
  12. package/dist/heavy.js.map +1 -1
  13. package/dist/index.d.ts +4 -31
  14. package/dist/index.esm.js +192 -283
  15. package/dist/index.esm.js.map +1 -1
  16. package/dist/index.js +194 -285
  17. package/dist/index.js.map +1 -1
  18. package/dist/index.min.js +1 -1
  19. package/dist/index.min.js.map +1 -1
  20. package/package.json +1 -1
  21. package/src/components/AtomixGlass/AtomixGlass.tsx +60 -38
  22. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +6 -35
  23. package/src/components/AtomixGlass/glass-utils.ts +27 -14
  24. package/src/components/AtomixGlass/stories/Overview.stories.tsx +19 -21
  25. package/src/components/AtomixGlass/stories/Playground.stories.tsx +1162 -515
  26. package/src/components/AtomixGlass/stories/shared-components.tsx +11 -3
  27. package/src/components/Navigation/Navbar/Navbar.tsx +13 -5
  28. package/src/lib/composables/index.ts +1 -2
  29. package/src/lib/composables/useAtomixGlass.ts +246 -222
  30. package/src/lib/composables/useAtomixGlassStyles.ts +46 -23
  31. package/src/lib/constants/components.ts +3 -1
  32. package/src/styles/06-components/_components.atomix-glass.scss +45 -20
  33. package/src/lib/composables/atomix-glass/useGlassBackgroundDetection.ts +0 -329
  34. package/src/lib/composables/atomix-glass/useGlassCornerRadius.ts +0 -82
  35. package/src/lib/composables/atomix-glass/useGlassMouseTracking.ts +0 -153
  36. package/src/lib/composables/atomix-glass/useGlassOverLight.ts +0 -198
  37. package/src/lib/composables/atomix-glass/useGlassState.ts +0 -112
  38. package/src/lib/composables/atomix-glass/useGlassTransforms.ts +0 -160
  39. package/src/lib/composables/glass-styles.ts +0 -302
  40. package/src/lib/composables/useGlassContainer.ts +0 -177
package/dist/atomix.css CHANGED
@@ -1898,19 +1898,22 @@ a, a:hover {
1898
1898
  position: relative;
1899
1899
  --atomix-glass-radius: var(--atomix-radius-md, 16px);
1900
1900
  --atomix-glass-transform: none;
1901
- --atomix-glass-transition: transform var(--atomix-transition-duration, 0.15s) ease-out;
1901
+ --atomix-glass-transition: transform var(--atomix-transition-duration, 0.45s)
1902
+ cubic-bezier(0.22, 1, 0.36, 1);
1902
1903
  --atomix-glass-position: absolute;
1903
1904
  --atomix-glass-container-width: 100%;
1904
1905
  --atomix-glass-container-height: 100%;
1905
1906
  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
1906
- --_glass-z-background: 0;
1907
- --_glass-z-filter: 1;
1908
- --_glass-z-effect: 2;
1909
- --_glass-z-hover: 3;
1910
- --_glass-z-overlay-highlight: 4;
1911
- --_glass-z-border-1: 5;
1912
- --_glass-z-border-2: 6;
1913
- --_glass-z-content: 7;
1907
+ --atomix-glass-base-z-index: 0;
1908
+ --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
1909
+ --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
1910
+ --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
1911
+ --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
1912
+ --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
1913
+ --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
1914
+ --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
1915
+ --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
1916
+ --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
1914
1917
  }
1915
1918
  .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1916
1919
  position: absolute;
@@ -1936,17 +1939,17 @@ a, a:hover {
1936
1939
  background: var(--atomix-glass-hover-1-gradient, none);
1937
1940
  }
1938
1941
  .c-atomix-glass__hover-1 {
1939
- transition: opacity var(--atomix-transition-duration-fast, 0.15s) ease-out;
1942
+ transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
1940
1943
  opacity: var(--atomix-glass-hover-1-opacity, 0);
1941
1944
  background: var(--atomix-glass-hover-1-gradient, none);
1942
1945
  }
1943
1946
  .c-atomix-glass__hover-2 {
1944
- transition: opacity var(--atomix-transition-duration-base, 0.3s) ease-out;
1947
+ transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
1945
1948
  opacity: var(--atomix-glass-hover-2-opacity, 0);
1946
1949
  background: var(--atomix-glass-hover-2-gradient, none);
1947
1950
  }
1948
1951
  .c-atomix-glass__hover-3 {
1949
- transition: opacity var(--atomix-transition-duration-slow, 0.5s) ease-out;
1952
+ transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
1950
1953
  opacity: var(--atomix-glass-hover-3-opacity, 0);
1951
1954
  background: var(--atomix-glass-hover-3-gradient, none);
1952
1955
  }
@@ -1969,6 +1972,8 @@ a, a:hover {
1969
1972
  transition: var(--atomix-glass-transition);
1970
1973
  mix-blend-mode: screen;
1971
1974
  z-index: var(--_glass-z-overlay-highlight);
1975
+ opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
1976
+ background: var(--atomix-glass-overlay-highlight-bg, none);
1972
1977
  }
1973
1978
  .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
1974
1979
  padding: var(--atomix-glass-border-width);
@@ -2011,12 +2016,15 @@ a, a:hover {
2011
2016
  position: relative;
2012
2017
  border-radius: var(--atomix-glass-radius);
2013
2018
  transition: var(--atomix-glass-transition);
2019
+ z-index: var(--_glass-z-container);
2014
2020
  }
2015
2021
  .c-atomix-glass__inner {
2016
2022
  width: var(--atomix-glass-container-width);
2017
2023
  height: var(--atomix-glass-container-height);
2018
2024
  position: relative;
2019
2025
  border-radius: var(--atomix-glass-radius);
2026
+ padding: var(--atomix-glass-container-padding);
2027
+ box-shadow: var(--atomix-glass-container-box-shadow);
2020
2028
  }
2021
2029
  .c-atomix-glass__filter {
2022
2030
  position: absolute;
@@ -2034,12 +2042,18 @@ a, a:hover {
2034
2042
  position: absolute;
2035
2043
  inset: 0;
2036
2044
  pointer-events: none;
2037
- border-radius: var(--atomix-glass-radius);
2045
+ border-radius: var(--atomix-glass-container-radius);
2046
+ -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
2047
+ backdrop-filter: var(--atomix-glass-container-backdrop);
2038
2048
  }
2039
2049
  .c-atomix-glass__filter-shadow {
2040
2050
  position: absolute;
2041
2051
  inset: var(--atomix-glass-border-width);
2042
2052
  pointer-events: none;
2053
+ border-radius: var(--atomix-glass-container-radius);
2054
+ box-shadow: var(--atomix-glass-container-shadow);
2055
+ opacity: var(--atomix-glass-container-shadow-opacity);
2056
+ background: var(--atomix-glass-container-bg);
2043
2057
  }
2044
2058
  .c-atomix-glass__content {
2045
2059
  position: relative;
@@ -2047,9 +2061,14 @@ a, a:hover {
2047
2061
  height: var(--atomix-glass-container-height);
2048
2062
  border-radius: var(--atomix-glass-radius);
2049
2063
  z-index: var(--_glass-z-content);
2064
+ text-shadow: var(--atomix-glass-container-text-shadow);
2050
2065
  }
2051
2066
  .c-atomix-glass__background-layer {
2052
- position: absolute;
2067
+ position: var(--atomix-glass-position);
2068
+ top: var(--atomix-glass-top);
2069
+ left: var(--atomix-glass-left);
2070
+ width: var(--atomix-glass-width);
2071
+ height: var(--atomix-glass-height);
2053
2072
  pointer-events: none;
2054
2073
  border-radius: var(--atomix-glass-radius);
2055
2074
  transform: var(--atomix-glass-transform);