@shohojdhara/atomix 0.6.2 → 0.6.4
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 +26 -22
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +5 -5
- 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 +2 -2
- package/dist/charts.js +251 -131
- package/dist/charts.js.map +1 -1
- package/dist/core.d.ts +5 -39
- package/dist/core.js +254 -137
- package/dist/core.js.map +1 -1
- package/dist/forms.d.ts +2 -1
- package/dist/forms.js +342 -177
- package/dist/forms.js.map +1 -1
- package/dist/heavy.js +254 -135
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +141 -159
- package/dist/index.esm.js +348 -195
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +348 -195
- 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/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/useAtomixGlass.ts +238 -138
- package/src/lib/composables/useAtomixGlassStyles.ts +201 -149
- package/src/lib/constants/components.ts +50 -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 +21 -63
- package/src/styles/01-settings/_settings.atomix-glass.scss +5 -5
- 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.select.scss +15 -2
- package/src/styles/06-components/_components.upload.scss +3 -3
- package/CHANGELOG.md +0 -165
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));
|
|
@@ -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;
|
|
@@ -10000,7 +9996,7 @@ a, a:hover {
|
|
|
10000
9996
|
transition-timing-function: ease-in-out;
|
|
10001
9997
|
transition-delay: 0s;
|
|
10002
9998
|
}
|
|
10003
|
-
.c-
|
|
9999
|
+
.c-select__body {
|
|
10004
10000
|
position: absolute;
|
|
10005
10001
|
width: 100%;
|
|
10006
10002
|
height: 0px;
|
|
@@ -10009,7 +10005,6 @@ a, a:hover {
|
|
|
10009
10005
|
border-radius: var(--atomix-select-panel-border-radius);
|
|
10010
10006
|
box-shadow: var(--atomix-select-panel-box-shadow);
|
|
10011
10007
|
overflow: hidden;
|
|
10012
|
-
z-index: 99;
|
|
10013
10008
|
transition-property: all;
|
|
10014
10009
|
transition-duration: 0.2s;
|
|
10015
10010
|
transition-timing-function: ease-in-out;
|
|
@@ -10043,6 +10038,15 @@ a, a:hover {
|
|
|
10043
10038
|
.c-select--lg {
|
|
10044
10039
|
--atomix-select-font-size: var(--atomix-select-font-size-lg);
|
|
10045
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
|
+
}
|
|
10046
10050
|
.c-select.is-open {
|
|
10047
10051
|
--atomix-select-bg: var(--atomix-select-expanded-bg);
|
|
10048
10052
|
}
|
|
@@ -11287,7 +11291,7 @@ a, a:hover {
|
|
|
11287
11291
|
}
|
|
11288
11292
|
.c-upload__loader-progress {
|
|
11289
11293
|
display: flex;
|
|
11290
|
-
gap:
|
|
11294
|
+
gap: 0.625rem;
|
|
11291
11295
|
color: var(--atomix-upload-loader-text-color);
|
|
11292
11296
|
font-size: var(--atomix-upload-loader-text-font-size);
|
|
11293
11297
|
line-height: 1.43;
|
|
@@ -11317,8 +11321,8 @@ a, a:hover {
|
|
|
11317
11321
|
outline-offset: 2px;
|
|
11318
11322
|
}
|
|
11319
11323
|
.c-upload__loader-bar {
|
|
11320
|
-
width:
|
|
11321
|
-
height:
|
|
11324
|
+
width: 1.375rem;
|
|
11325
|
+
height: 1.375rem;
|
|
11322
11326
|
}
|
|
11323
11327
|
.c-upload__loader-bar svg {
|
|
11324
11328
|
width: 100%;
|