@shohojdhara/atomix 0.6.1 → 0.6.3
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/README.md +510 -106
- package/dist/atomix.css +30 -24
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +6 -6
- package/dist/atomix.min.css.map +1 -1
- package/dist/atomix.umd.js +1 -1
- package/dist/atomix.umd.js.map +1 -1
- package/dist/atomix.umd.min.js +1 -1
- package/dist/charts.d.ts +11 -2
- package/dist/charts.js +294 -139
- package/dist/charts.js.map +1 -1
- package/dist/core.d.ts +14 -39
- package/dist/core.js +297 -145
- package/dist/core.js.map +1 -1
- package/dist/forms.d.ts +11 -1
- package/dist/forms.js +385 -185
- package/dist/forms.js.map +1 -1
- package/dist/heavy.d.ts +9 -0
- package/dist/heavy.js +297 -143
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +156 -164
- package/dist/index.esm.js +391 -203
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +391 -203
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/theme.d.ts +14 -6
- package/dist/theme.js +2 -9
- package/dist/theme.js.map +1 -1
- package/package.json +26 -26
- package/src/components/AtomixGlass/AtomixGlass.tsx +1 -1
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +8 -1
- package/src/components/AtomixGlass/deprecated/AtomixGlass.deprecated.tsx +390 -0
- package/src/components/AtomixGlass/glass-utils.ts +29 -0
- package/src/components/AtomixGlass/stories/Playground.stories.tsx +32 -1
- package/src/components/Button/Button.stories.tsx +1 -1
- package/src/components/Button/Button.tsx +6 -5
- package/src/components/Card/Card.tsx +2 -2
- package/src/components/Dropdown/Dropdown.tsx +1 -0
- package/src/components/EdgePanel/EdgePanel.tsx +1 -3
- package/src/components/Form/Select.test.tsx +75 -0
- package/src/components/Form/Select.tsx +348 -252
- package/src/components/Form/SelectOption.tsx +16 -10
- package/src/components/index.ts +1 -1
- package/src/layouts/CssGrid/index.ts +1 -0
- package/src/lib/composables/shared-mouse-tracker.ts +62 -6
- package/src/lib/composables/useAtomixGlass.ts +241 -139
- package/src/lib/composables/useAtomixGlassStyles.ts +201 -149
- package/src/lib/constants/components.ts +54 -35
- package/src/lib/theme/config/configLoader.ts +1 -1
- package/src/lib/theme/test/testTheme.ts +2 -2
- package/src/lib/theme/utils/themeUtils.ts +98 -110
- package/src/lib/types/components.ts +29 -65
- package/src/styles/01-settings/_settings.spacing.scss +6 -1
- package/src/styles/03-generic/_generic.reset.scss +1 -1
- package/src/styles/06-components/_components.atomix-glass.scss +20 -29
- package/src/styles/06-components/_components.data-table.scss +5 -4
- package/src/styles/06-components/_components.dynamic-background.scss +9 -8
- package/src/styles/06-components/_components.footer.scss +8 -7
- package/src/styles/06-components/_components.hero.scss +2 -2
- package/src/styles/06-components/_components.messages.scss +16 -16
- package/src/styles/06-components/_components.navbar.scss +2 -0
- package/src/styles/06-components/_components.select.scss +15 -2
- package/src/styles/06-components/_components.upload.scss +3 -3
- package/CHANGELOG.md +0 -165
- package/src/lib/theme/devtools/DesignTokensCustomizer.stories.tsx +0 -215
package/dist/atomix.css
CHANGED
|
@@ -356,7 +356,7 @@ summary {
|
|
|
356
356
|
body {
|
|
357
357
|
min-width: 992px !important;
|
|
358
358
|
}
|
|
359
|
-
.container {
|
|
359
|
+
.o-container {
|
|
360
360
|
min-width: 992px !important;
|
|
361
361
|
}
|
|
362
362
|
}
|
|
@@ -2005,17 +2005,14 @@ a, a:hover {
|
|
|
2005
2005
|
mix-blend-mode: overlay;
|
|
2006
2006
|
}
|
|
2007
2007
|
.c-atomix-glass__hover-1 {
|
|
2008
|
-
transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
|
|
2009
2008
|
opacity: var(--atomix-glass-hover-1-opacity, 0);
|
|
2010
2009
|
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%));
|
|
2011
2010
|
}
|
|
2012
2011
|
.c-atomix-glass__hover-2 {
|
|
2013
|
-
transition: var(--_glass-transition), background var(--atomix-transition-duration-base, 0.3s) var(--atomix-easing-base, cubic-bezier(0.23, 1, 0.32, 1));
|
|
2014
2012
|
opacity: var(--atomix-glass-hover-2-opacity, 0);
|
|
2015
2013
|
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%));
|
|
2016
2014
|
}
|
|
2017
2015
|
.c-atomix-glass__hover-3 {
|
|
2018
|
-
transition: var(--_glass-transition);
|
|
2019
2016
|
opacity: var(--atomix-glass-hover-3-opacity, 0);
|
|
2020
2017
|
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%));
|
|
2021
2018
|
}
|
|
@@ -2070,7 +2067,6 @@ a, a:hover {
|
|
|
2070
2067
|
z-index: var(--_glass-z-border-1);
|
|
2071
2068
|
-webkit-backdrop-filter: blur(30px) saturate(140%) brightness(110%);
|
|
2072
2069
|
backdrop-filter: blur(30px) saturate(140%) brightness(110%);
|
|
2073
|
-
box-shadow: var(--atomix-glass-border-shadow);
|
|
2074
2070
|
}
|
|
2075
2071
|
.c-atomix-glass__border-1 {
|
|
2076
2072
|
opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
|
|
@@ -2153,10 +2149,10 @@ a, a:hover {
|
|
|
2153
2149
|
z-index: var(--_glass-z-background);
|
|
2154
2150
|
}
|
|
2155
2151
|
.c-atomix-glass__background-layer--dark {
|
|
2156
|
-
background-color: var(
|
|
2152
|
+
background-color: var(atomix-gray-9, #1f2937);
|
|
2157
2153
|
}
|
|
2158
2154
|
.c-atomix-glass__background-layer--black {
|
|
2159
|
-
background-color: var(
|
|
2155
|
+
background-color: var(atomix-black, #000000);
|
|
2160
2156
|
mix-blend-mode: overlay;
|
|
2161
2157
|
}
|
|
2162
2158
|
.c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
|
|
@@ -5334,7 +5330,7 @@ a, a:hover {
|
|
|
5334
5330
|
color: var(--atomix-primary);
|
|
5335
5331
|
}
|
|
5336
5332
|
.c-data-table__column-filter {
|
|
5337
|
-
width:
|
|
5333
|
+
width: 7.5rem;
|
|
5338
5334
|
padding: 0.25rem 0.5rem;
|
|
5339
5335
|
font-size: 0.875rem;
|
|
5340
5336
|
border: 1px solid var(--atomix-border-color);
|
|
@@ -5350,7 +5346,7 @@ a, a:hover {
|
|
|
5350
5346
|
position: absolute;
|
|
5351
5347
|
top: 0;
|
|
5352
5348
|
right: 0;
|
|
5353
|
-
width:
|
|
5349
|
+
width: 0.25rem;
|
|
5354
5350
|
height: 100%;
|
|
5355
5351
|
cursor: col-resize;
|
|
5356
5352
|
background-color: transparent;
|
|
@@ -5392,7 +5388,7 @@ a, a:hover {
|
|
|
5392
5388
|
background-color: rgba(var(--atomix-primary-rgb), 0.1);
|
|
5393
5389
|
}
|
|
5394
5390
|
.c-data-table__cell--selection {
|
|
5395
|
-
width:
|
|
5391
|
+
width: 3rem;
|
|
5396
5392
|
text-align: center;
|
|
5397
5393
|
padding: 0.75rem 0.5rem;
|
|
5398
5394
|
}
|
|
@@ -5458,7 +5454,7 @@ a, a:hover {
|
|
|
5458
5454
|
flex: 0 0 auto;
|
|
5459
5455
|
}
|
|
5460
5456
|
.c-data-table-search__input {
|
|
5461
|
-
width:
|
|
5457
|
+
width: 15rem;
|
|
5462
5458
|
}
|
|
5463
5459
|
.c-data-table__pagination-container {
|
|
5464
5460
|
display: flex;
|
|
@@ -5738,8 +5734,8 @@ a, a:hover {
|
|
|
5738
5734
|
transform: rotate(-180deg);
|
|
5739
5735
|
}
|
|
5740
5736
|
.c-dynamic-background {
|
|
5741
|
-
min-height:
|
|
5742
|
-
border-radius:
|
|
5737
|
+
min-height: 12.5rem;
|
|
5738
|
+
border-radius: 1rem;
|
|
5743
5739
|
}
|
|
5744
5740
|
.c-dynamic-background--glass {
|
|
5745
5741
|
background-color: color-mix(in srgb, #8b5cf6 65%, transparent);
|
|
@@ -6179,7 +6175,7 @@ a, a:hover {
|
|
|
6179
6175
|
align-items: center;
|
|
6180
6176
|
text-align: center;
|
|
6181
6177
|
gap: clamp(1.5rem, 4vw, 2.5rem);
|
|
6182
|
-
max-width:
|
|
6178
|
+
max-width: 37.5rem;
|
|
6183
6179
|
margin-left: auto;
|
|
6184
6180
|
margin-right: auto;
|
|
6185
6181
|
}
|
|
@@ -6295,7 +6291,7 @@ a, a:hover {
|
|
|
6295
6291
|
transform: rotate(-90deg);
|
|
6296
6292
|
}
|
|
6297
6293
|
.c-footer__section--collapsible:not(.c-footer__section--collapsed) .c-footer__section-content {
|
|
6298
|
-
max-height:
|
|
6294
|
+
max-height: 31.25rem;
|
|
6299
6295
|
}
|
|
6300
6296
|
}
|
|
6301
6297
|
@media (min-width: 768px) {
|
|
@@ -6709,13 +6705,13 @@ a, a:hover {
|
|
|
6709
6705
|
align-items: center;
|
|
6710
6706
|
text-align: center;
|
|
6711
6707
|
gap: clamp(1.5rem, 4vw, 2.5rem);
|
|
6712
|
-
max-width:
|
|
6708
|
+
max-width: 37.5rem;
|
|
6713
6709
|
margin-left: auto;
|
|
6714
6710
|
margin-right: auto;
|
|
6715
6711
|
}
|
|
6716
6712
|
.c-footer--flexible .c-footer__section-col {
|
|
6717
6713
|
flex: 1 1 auto;
|
|
6718
|
-
min-width:
|
|
6714
|
+
min-width: 15.625rem;
|
|
6719
6715
|
}
|
|
6720
6716
|
.c-footer--sidebar .c-footer__sections--columns {
|
|
6721
6717
|
align-items: flex-start;
|
|
@@ -7217,7 +7213,7 @@ a, a:hover {
|
|
|
7217
7213
|
@media (min-width: 768px) {
|
|
7218
7214
|
.c-hero__title {
|
|
7219
7215
|
font-size: var(--atomix-hero-title-font-size);
|
|
7220
|
-
line-height:
|
|
7216
|
+
line-height: 4.5rem;
|
|
7221
7217
|
}
|
|
7222
7218
|
}
|
|
7223
7219
|
.c-hero__text {
|
|
@@ -7234,7 +7230,7 @@ a, a:hover {
|
|
|
7234
7230
|
.c-hero__image {
|
|
7235
7231
|
width: 100%;
|
|
7236
7232
|
max-width: none;
|
|
7237
|
-
height:
|
|
7233
|
+
height: 23.75rem;
|
|
7238
7234
|
-o-object-fit: cover;
|
|
7239
7235
|
object-fit: cover;
|
|
7240
7236
|
-o-object-position: center;
|
|
@@ -8597,6 +8593,8 @@ a, a:hover {
|
|
|
8597
8593
|
.c-navbar--glass {
|
|
8598
8594
|
position: relative;
|
|
8599
8595
|
background-color: transparent;
|
|
8596
|
+
display: flex;
|
|
8597
|
+
height: 100%;
|
|
8600
8598
|
}
|
|
8601
8599
|
@supports (color: color-mix(in lch, red, blue)){
|
|
8602
8600
|
.c-navbar--glass {
|
|
@@ -9998,7 +9996,7 @@ a, a:hover {
|
|
|
9998
9996
|
transition-timing-function: ease-in-out;
|
|
9999
9997
|
transition-delay: 0s;
|
|
10000
9998
|
}
|
|
10001
|
-
.c-
|
|
9999
|
+
.c-select__body {
|
|
10002
10000
|
position: absolute;
|
|
10003
10001
|
width: 100%;
|
|
10004
10002
|
height: 0px;
|
|
@@ -10007,7 +10005,6 @@ a, a:hover {
|
|
|
10007
10005
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
10008
10006
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
10009
10007
|
overflow: hidden;
|
|
10010
|
-
z-index: 99;
|
|
10011
10008
|
transition-property: all;
|
|
10012
10009
|
transition-duration: 0.2s;
|
|
10013
10010
|
transition-timing-function: ease-in-out;
|
|
@@ -10041,6 +10038,15 @@ a, a:hover {
|
|
|
10041
10038
|
.c-select--lg {
|
|
10042
10039
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
10043
10040
|
}
|
|
10041
|
+
.c-select--glass .c-select__selected {
|
|
10042
|
+
background-color: color-mix(in srgb, var(--atomix-select-bg) 50%, transparent);
|
|
10043
|
+
}
|
|
10044
|
+
.c-select--glass .c-select__body {
|
|
10045
|
+
background-color: color-mix(in srgb, var(--atomix-select-panel-bg) 50%, transparent);
|
|
10046
|
+
}
|
|
10047
|
+
.c-select--glass .c-select__item {
|
|
10048
|
+
background-color: color-mix(in srgb, var(--atomix-select-item-bg) 20%, transparent);
|
|
10049
|
+
}
|
|
10044
10050
|
.c-select.is-open {
|
|
10045
10051
|
--atomix-select-bg: var(--atomix-select-expanded-bg);
|
|
10046
10052
|
}
|
|
@@ -11285,7 +11291,7 @@ a, a:hover {
|
|
|
11285
11291
|
}
|
|
11286
11292
|
.c-upload__loader-progress {
|
|
11287
11293
|
display: flex;
|
|
11288
|
-
gap:
|
|
11294
|
+
gap: 0.625rem;
|
|
11289
11295
|
color: var(--atomix-upload-loader-text-color);
|
|
11290
11296
|
font-size: var(--atomix-upload-loader-text-font-size);
|
|
11291
11297
|
line-height: 1.43;
|
|
@@ -11315,8 +11321,8 @@ a, a:hover {
|
|
|
11315
11321
|
outline-offset: 2px;
|
|
11316
11322
|
}
|
|
11317
11323
|
.c-upload__loader-bar {
|
|
11318
|
-
width:
|
|
11319
|
-
height:
|
|
11324
|
+
width: 1.375rem;
|
|
11325
|
+
height: 1.375rem;
|
|
11320
11326
|
}
|
|
11321
11327
|
.c-upload__loader-bar svg {
|
|
11322
11328
|
width: 100%;
|