@shohojdhara/atomix 0.5.0 → 0.5.1

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 (76) hide show
  1. package/dist/atomix.css +95 -69
  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.d.ts +1 -0
  6. package/dist/charts.js +231 -332
  7. package/dist/charts.js.map +1 -1
  8. package/dist/core.d.ts +1 -0
  9. package/dist/core.js +232 -333
  10. package/dist/core.js.map +1 -1
  11. package/dist/forms.d.ts +1 -0
  12. package/dist/forms.js +231 -332
  13. package/dist/forms.js.map +1 -1
  14. package/dist/heavy.d.ts +11 -2
  15. package/dist/heavy.js +233 -334
  16. package/dist/heavy.js.map +1 -1
  17. package/dist/index.d.ts +13 -2
  18. package/dist/index.esm.js +228 -327
  19. package/dist/index.esm.js.map +1 -1
  20. package/dist/index.js +227 -326
  21. package/dist/index.js.map +1 -1
  22. package/dist/index.min.js +1 -1
  23. package/dist/index.min.js.map +1 -1
  24. package/package.json +11 -1
  25. package/src/components/AtomixGlass/AtomixGlass.tsx +188 -128
  26. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +62 -90
  27. package/src/components/AtomixGlass/PerformanceDashboard.tsx +153 -201
  28. package/src/components/AtomixGlass/glass-utils.ts +50 -0
  29. package/src/components/AtomixGlass/stories/AnimationFeatures.stories.tsx +52 -46
  30. package/src/components/AtomixGlass/stories/Examples.stories.tsx +573 -236
  31. package/src/components/AtomixGlass/stories/Playground.stories.tsx +88 -41
  32. package/src/components/AtomixGlass/stories/argTypes.ts +19 -19
  33. package/src/components/AtomixGlass/stories/shared-components.tsx +7 -12
  34. package/src/components/AtomixGlass/stories/types.ts +3 -3
  35. package/src/lib/composables/useAtomixGlass.ts +108 -71
  36. package/src/lib/composables/useAtomixGlassStyles.ts +0 -2
  37. package/src/lib/constants/components.ts +1 -0
  38. package/src/lib/types/components.ts +1 -0
  39. package/src/lib/utils/displacement-generator.ts +1 -1
  40. package/src/styles/06-components/_components.atomix-glass.scss +158 -97
  41. package/scripts/cli/__tests__/README.md +0 -81
  42. package/scripts/cli/__tests__/basic.test.js +0 -116
  43. package/scripts/cli/__tests__/clean.test.js +0 -278
  44. package/scripts/cli/__tests__/component-generator.test.js +0 -332
  45. package/scripts/cli/__tests__/component-validator.test.js +0 -433
  46. package/scripts/cli/__tests__/generator.test.js +0 -613
  47. package/scripts/cli/__tests__/glass-motion.test.js +0 -256
  48. package/scripts/cli/__tests__/integration.test.js +0 -938
  49. package/scripts/cli/__tests__/migrate.test.js +0 -74
  50. package/scripts/cli/__tests__/security.test.js +0 -206
  51. package/scripts/cli/__tests__/test-setup.js +0 -135
  52. package/scripts/cli/__tests__/theme-bridge.test.js +0 -507
  53. package/scripts/cli/__tests__/token-manager.test.js +0 -251
  54. package/scripts/cli/__tests__/token-provider.test.js +0 -361
  55. package/scripts/cli/__tests__/utils.test.js +0 -165
  56. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +0 -216
  57. package/src/components/AtomixGlass/stories/AnimationTests.stories.tsx +0 -95
  58. package/src/components/AtomixGlass/stories/CardExamples.stories.tsx +0 -212
  59. package/src/components/AtomixGlass/stories/Customization.stories.tsx +0 -131
  60. package/src/components/AtomixGlass/stories/DashboardExamples.stories.tsx +0 -348
  61. package/src/components/AtomixGlass/stories/EcommerceExamples.stories.tsx +0 -410
  62. package/src/components/AtomixGlass/stories/FormExamples.stories.tsx +0 -436
  63. package/src/components/AtomixGlass/stories/HeroExamples.stories.tsx +0 -264
  64. package/src/components/AtomixGlass/stories/InteractivePlayground.stories.tsx +0 -247
  65. package/src/components/AtomixGlass/stories/MobileUIExamples.stories.tsx +0 -418
  66. package/src/components/AtomixGlass/stories/ModalExamples.stories.tsx +0 -402
  67. package/src/components/AtomixGlass/stories/Modes.stories.tsx +0 -1082
  68. package/src/components/AtomixGlass/stories/Overview.stories.tsx +0 -497
  69. package/src/components/AtomixGlass/stories/Performance.stories.tsx +0 -103
  70. package/src/components/AtomixGlass/stories/PresetGallery.stories.tsx +0 -335
  71. package/src/components/AtomixGlass/stories/Shaders.stories.tsx +0 -395
  72. package/src/components/AtomixGlass/stories/WidgetExamples.stories.tsx +0 -441
  73. package/src/components/TypedButton/TypedButton.stories.tsx +0 -59
  74. package/src/components/TypedButton/TypedButton.tsx +0 -39
  75. package/src/components/TypedButton/index.ts +0 -2
  76. package/src/lib/composables/useTypedButton.ts +0 -66
package/dist/atomix.css CHANGED
@@ -1896,81 +1896,96 @@ a, a:hover {
1896
1896
  }
1897
1897
  .c-atomix-glass {
1898
1898
  position: relative;
1899
- --atomix-glass-transition: all 0.15s ease;
1899
+ --_glass-radius: var(--atomix-glass-radius, var(--atomix-radius-md, 0.75rem));
1900
+ --_glass-transform: var(--atomix-glass-transform, translateZ(0));
1901
+ --_glass-backdrop: var(--atomix-glass-border-backdrop, blur(14px) saturate(140%));
1900
1902
  --atomix-glass-position: absolute;
1901
- --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
1902
- --atomix-glass-base-z-index: 0;
1903
- --_glass-z-background: calc(var(--atomix-glass-base-z-index) + 0);
1904
- --_glass-z-container: calc(var(--atomix-glass-base-z-index) + 1);
1905
- --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + 1);
1906
- --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + 2);
1907
- --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + 3);
1908
- --_glass-z-overlay-highlight: calc(var(--atomix-glass-base-z-index) + 4);
1909
- --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + 5);
1910
- --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + 6);
1911
- --_glass-z-content: calc(var(--atomix-glass-base-z-index) + 7);
1912
- position: relative;
1913
- }
1914
- .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1903
+ --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem);
1904
+ --atomix-glass-top: 0;
1905
+ --atomix-glass-left: 0;
1906
+ --atomix-glass-right: auto;
1907
+ --atomix-glass-bottom: auto;
1908
+ --_glass-transition: var(--atomix-transition-base);
1909
+ --atomix-glass-base-z-index: var(--atomix-z-index-base, 0);
1910
+ --_glass-z-background: calc(
1911
+ var(--atomix-glass-base-z-index) + var(--atomix-z-index-background, 0)
1912
+ );
1913
+ --_glass-z-container: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1914
+ --_glass-z-filter: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1915
+ --_glass-z-effect: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1916
+ --_glass-z-hover: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1917
+ --_glass-z-overlay-highlight: calc(
1918
+ var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1)
1919
+ );
1920
+ --_glass-z-border-1: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1921
+ --_glass-z-border-2: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-overlay, 1));
1922
+ --_glass-z-border-3: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
1923
+ --_glass-z-content: calc(var(--atomix-glass-base-z-index) + var(--atomix-z-index-content, 2));
1924
+ --atomix-glass-border-shadow:
1925
+ 0 0 0 0.5px var(--atomix-glass-border-color, rgba(255, 255, 255, 0.45)) inset,
1926
+ 0 1px 2px var(--atomix-glass-inner-shadow-color, rgba(255, 255, 255, 0.18)) inset,
1927
+ 0 2px 6px var(--atomix-glass-outer-shadow-color, rgba(0, 0, 0, 0.28));
1928
+ }
1929
+ .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3, .c-atomix-glass__base, .c-atomix-glass__overlay {
1915
1930
  position: var(--atomix-glass-position);
1916
1931
  top: var(--atomix-glass-top);
1917
1932
  left: var(--atomix-glass-left);
1933
+ right: var(--atomix-glass-right);
1934
+ bottom: var(--atomix-glass-bottom);
1935
+ width: var(--atomix-glass-width);
1936
+ height: var(--atomix-glass-height);
1918
1937
  pointer-events: none;
1919
- border-radius: var(--atomix-glass-radius);
1920
- transform: var(--atomix-glass-transform);
1921
- transition: var(--atomix-glass-transition);
1938
+ border-radius: var(--_glass-radius);
1939
+ transform: var(--_glass-transform);
1940
+ transition: var(--_glass-transition);
1941
+ }
1942
+ .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1922
1943
  z-index: var(--_glass-z-hover);
1923
1944
  }
1924
1945
  .c-atomix-glass__base, .c-atomix-glass__overlay {
1925
- pointer-events: none;
1926
- border-radius: var(--atomix-glass-radius);
1927
- transform: var(--atomix-glass-transform);
1928
- transition: var(--atomix-glass-transition);
1929
1946
  z-index: var(--_glass-z-effect);
1930
1947
  }
1931
1948
  .c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
1932
1949
  mix-blend-mode: overlay;
1933
- opacity: var(--atomix-glass-hover-1-opacity, 0);
1934
- background: var(--atomix-glass-hover-1-gradient, none);
1935
1950
  }
1936
1951
  .c-atomix-glass__hover-1 {
1937
- transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
1952
+ transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
1938
1953
  opacity: var(--atomix-glass-hover-1-opacity, 0);
1939
- background: var(--atomix-glass-hover-1-gradient, none);
1954
+ background: var(--atomix-glass-hover-1-gradient, radial-gradient(60% 60% at 50% 0%, var(--atomix-glass-hover-1-start-color, rgba(255, 255, 255, 0.18)) 0%, var(--atomix-glass-hover-1-end-color, rgba(255, 255, 255, 0)) 60%));
1940
1955
  }
1941
1956
  .c-atomix-glass__hover-2 {
1942
- transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
1957
+ transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
1943
1958
  opacity: var(--atomix-glass-hover-2-opacity, 0);
1944
- background: var(--atomix-glass-hover-2-gradient, none);
1959
+ background: var(--atomix-glass-hover-2-gradient, radial-gradient(80% 80% at 50% 100%, var(--atomix-glass-hover-2-start-color, rgba(0, 0, 0, 0.12)) 0%, var(--atomix-glass-hover-2-end-color, rgba(0, 0, 0, 0)) 60%));
1945
1960
  }
1946
1961
  .c-atomix-glass__hover-3 {
1947
- transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
1962
+ transition: var(--_glass-transition);
1948
1963
  opacity: var(--atomix-glass-hover-3-opacity, 0);
1949
- background: var(--atomix-glass-hover-3-gradient, none);
1964
+ background: var(--atomix-glass-hover-3-gradient, linear-gradient(180deg, var(--atomix-glass-hover-3-start-color, rgba(255, 255, 255, 0.06)) 0%, var(--atomix-glass-hover-3-end-color, rgba(255, 255, 255, 0)) 100%));
1950
1965
  }
1951
1966
  .c-atomix-glass__base {
1952
1967
  mix-blend-mode: soft-light;
1953
- opacity: var(--atomix-glass-base-opacity, 0);
1954
- background: var(--atomix-glass-base-gradient, none);
1968
+ opacity: var(--atomix-glass-base-opacity, 0.6);
1969
+ background: var(--atomix-glass-base-gradient, linear-gradient(180deg, var(--atomix-glass-base-start-color, rgba(255, 255, 255, 0.08)) 0%, var(--atomix-glass-base-end-color, rgba(255, 255, 255, 0.02)) 100%));
1955
1970
  }
1956
1971
  .c-atomix-glass__overlay {
1957
1972
  mix-blend-mode: overlay;
1958
- opacity: var(--atomix-glass-overlay-opacity, 0);
1959
- background: var(--atomix-glass-overlay-gradient, none);
1973
+ opacity: var(--atomix-glass-overlay-opacity, 0.35);
1974
+ background: var(--atomix-glass-overlay-gradient, radial-gradient(120% 120% at 50% -10%, var(--atomix-glass-overlay-start-color, rgba(255, 255, 255, 0.12)) 0%, var(--atomix-glass-overlay-end-color, rgba(255, 255, 255, 0)) 40%));
1960
1975
  }
1961
1976
  .c-atomix-glass__overlay-highlight {
1962
1977
  position: absolute;
1963
1978
  inset: var(--atomix-spacing-0-5, 0.125rem);
1964
1979
  pointer-events: none;
1965
- border-radius: var(--atomix-glass-radius);
1966
- transform: var(--atomix-glass-transform);
1967
- transition: var(--atomix-glass-transition);
1980
+ border-radius: var(--_glass-radius);
1981
+ transform: var(--_glass-transform);
1982
+ transition: var(--_glass-transition);
1968
1983
  mix-blend-mode: screen;
1969
1984
  z-index: var(--_glass-z-overlay-highlight);
1970
- opacity: var(--atomix-glass-overlay-highlight-opacity, 0);
1971
- background: var(--atomix-glass-overlay-highlight-bg, none);
1985
+ opacity: var(--atomix-glass-overlay-highlight-opacity, 0.25);
1986
+ background: var(--atomix-glass-overlay-highlight-bg, linear-gradient(180deg, var(--atomix-glass-highlight-start-color, rgba(255, 255, 255, 0.24)) 0%, var(--atomix-glass-highlight-end-color, rgba(255, 255, 255, 0)) 60%));
1972
1987
  }
1973
- .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
1988
+ .c-atomix-glass__border-backdrop, .c-atomix-glass__border-1, .c-atomix-glass__border-2 {
1974
1989
  padding: var(--atomix-glass-border-width);
1975
1990
  box-sizing: border-box;
1976
1991
  overflow: hidden;
@@ -1986,41 +2001,48 @@ a, a:hover {
1986
2001
  position: var(--atomix-glass-position);
1987
2002
  top: var(--atomix-glass-top);
1988
2003
  left: var(--atomix-glass-left);
2004
+ right: var(--atomix-glass-right);
2005
+ bottom: var(--atomix-glass-bottom);
1989
2006
  width: var(--atomix-glass-width);
1990
2007
  height: var(--atomix-glass-height);
1991
- border-radius: var(--atomix-glass-radius);
1992
- transform: var(--atomix-glass-transform);
1993
- transition: var(--atomix-glass-transition);
2008
+ border-radius: var(--_glass-radius);
2009
+ transform: var(--_glass-transform);
2010
+ transition: var(--_glass-transition);
2011
+ }
2012
+ .c-atomix-glass__border-backdrop {
2013
+ mix-blend-mode: overlay;
2014
+ z-index: var(--_glass-z-border-1);
2015
+ -webkit-backdrop-filter: var(--_glass-backdrop);
2016
+ backdrop-filter: var(--_glass-backdrop);
2017
+ box-shadow: var(--atomix-glass-border-shadow);
1994
2018
  }
1995
2019
  .c-atomix-glass__border-1 {
1996
- opacity: var(--atomix-opacity-20, 0.2);
2020
+ opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
1997
2021
  mix-blend-mode: screen;
1998
- z-index: var(--_glass-z-border-1);
2022
+ z-index: var(--_glass-z-border-2);
1999
2023
  background: var(--atomix-glass-border-gradient-1, none);
2000
- box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35));
2001
2024
  }
2002
2025
  .c-atomix-glass__border-2 {
2003
2026
  mix-blend-mode: overlay;
2004
- z-index: var(--_glass-z-border-2);
2027
+ z-index: var(--_glass-z-border-3);
2005
2028
  background: var(--atomix-glass-border-gradient-2, none);
2006
- box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35));
2007
2029
  }
2008
2030
  .c-atomix-glass__container {
2009
- position: var(--atomix-glass-position);
2031
+ position: relative;
2010
2032
  top: var(--atomix-glass-top);
2011
2033
  left: var(--atomix-glass-left);
2012
- border-radius: var(--atomix-glass-radius);
2013
- transition: var(--atomix-glass-transition);
2014
- transform: var(--atomix-glass-transform);
2034
+ right: var(--atomix-glass-right);
2035
+ bottom: var(--atomix-glass-bottom);
2036
+ border-radius: var(--_glass-radius);
2037
+ transition: var(--_glass-transition);
2038
+ transform: var(--_glass-transform);
2015
2039
  z-index: var(--_glass-z-container);
2016
2040
  }
2017
2041
  .c-atomix-glass__inner {
2018
2042
  width: 100%;
2019
2043
  height: 100%;
2020
2044
  position: relative;
2021
- border-radius: var(--atomix-glass-radius);
2022
- padding: var(--atomix-glass-container-padding);
2023
- box-shadow: var(--atomix-glass-container-box-shadow);
2045
+ border-radius: var(--_glass-radius);
2024
2046
  }
2025
2047
  .c-atomix-glass__filter {
2026
2048
  position: absolute;
@@ -2032,21 +2054,21 @@ a, a:hover {
2032
2054
  z-index: var(--_glass-z-filter);
2033
2055
  }
2034
2056
  .c-atomix-glass__filter svg {
2035
- border-radius: var(--atomix-glass-radius);
2057
+ border-radius: var(--_glass-radius);
2036
2058
  }
2037
2059
  .c-atomix-glass__filter-overlay {
2038
2060
  position: absolute;
2039
2061
  inset: 0;
2040
2062
  pointer-events: none;
2041
- border-radius: var(--atomix-glass-container-radius);
2042
- -webkit-backdrop-filter: var(--atomix-glass-container-backdrop);
2043
- backdrop-filter: var(--atomix-glass-container-backdrop);
2063
+ border-radius: var(--_glass-radius);
2064
+ -webkit-backdrop-filter: var(--atomix-glass-container-backdrop, var(--_glass-backdrop));
2065
+ backdrop-filter: var(--atomix-glass-container-backdrop, var(--_glass-backdrop));
2044
2066
  }
2045
2067
  .c-atomix-glass__filter-shadow {
2046
2068
  position: absolute;
2047
2069
  inset: var(--atomix-glass-border-width);
2048
2070
  pointer-events: none;
2049
- border-radius: var(--atomix-glass-container-radius);
2071
+ border-radius: var(--_glass-radius);
2050
2072
  box-shadow: var(--atomix-glass-container-shadow);
2051
2073
  opacity: var(--atomix-glass-container-shadow-opacity);
2052
2074
  background: var(--atomix-glass-container-bg);
@@ -2055,20 +2077,23 @@ a, a:hover {
2055
2077
  position: relative;
2056
2078
  width: var(--atomix-glass-container-width);
2057
2079
  height: var(--atomix-glass-container-height);
2058
- border-radius: var(--atomix-glass-radius);
2080
+ border-radius: var(--_glass-radius);
2059
2081
  z-index: var(--_glass-z-content);
2060
2082
  text-shadow: var(--atomix-glass-container-text-shadow);
2083
+ box-shadow: var(--atomix-glass-container-box-shadow);
2061
2084
  }
2062
2085
  .c-atomix-glass__background-layer {
2063
2086
  position: var(--atomix-glass-position);
2064
2087
  top: var(--atomix-glass-top);
2065
2088
  left: var(--atomix-glass-left);
2089
+ right: var(--atomix-glass-right);
2090
+ bottom: var(--atomix-glass-bottom);
2066
2091
  width: var(--atomix-glass-width);
2067
2092
  height: var(--atomix-glass-height);
2068
2093
  pointer-events: none;
2069
- border-radius: var(--atomix-glass-radius);
2070
- transform: var(--atomix-glass-transform);
2071
- transition: var(--atomix-glass-transition);
2094
+ border-radius: var(--_glass-radius);
2095
+ transform: var(--_glass-transform);
2096
+ transition: var(--_glass-transition);
2072
2097
  z-index: var(--_glass-z-background);
2073
2098
  }
2074
2099
  .c-atomix-glass__background-layer--dark {
@@ -2079,24 +2104,25 @@ a, a:hover {
2079
2104
  mix-blend-mode: overlay;
2080
2105
  }
2081
2106
  .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
2082
- opacity: var(--atomix-opacity-50, 0.5);
2107
+ opacity: var(--atomix-glass-over-light-dark-opacity, var(--atomix-opacity-50, 0.5));
2083
2108
  }
2084
2109
  .c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
2085
- opacity: var(--atomix-opacity-25, 0.25);
2110
+ opacity: var(--atomix-glass-over-light-black-opacity, var(--atomix-opacity-25, 0.25));
2086
2111
  }
2087
2112
  .c-atomix-glass__background-layer--hidden {
2088
2113
  opacity: var(--atomix-opacity-0, 0);
2089
2114
  }
2090
2115
  .c-atomix-glass--reduced-motion {
2091
2116
  --atomix-glass-transition: none;
2117
+ --_glass-transition: none;
2092
2118
  }
2093
2119
  .c-atomix-glass--reduced-motion * {
2094
2120
  transition: none !important;
2095
2121
  }
2096
2122
  .c-atomix-glass--high-contrast {
2097
- border: var(--atomix-spacing-0-5, 2px) solid currentColor;
2098
- outline: var(--atomix-spacing-0-5, 2px) solid transparent;
2099
- outline-offset: var(--atomix-spacing-0-5, 2px);
2123
+ border: var(--atomix-spacing-0-5) solid currentColor;
2124
+ outline: var(--atomix-spacing-0-5) solid transparent;
2125
+ outline-offset: var(--atomix-spacing-0-5);
2100
2126
  }
2101
2127
  .c-atomix-glass--disabled-effects {
2102
2128
  --atomix-glass-transform: none;