@vsn-ux/gaia-styles 0.6.7 → 0.6.8

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 (17) hide show
  1. package/dist/all-10pt.css +404 -0
  2. package/dist/all-no-reset-10pt.css +404 -0
  3. package/dist/all-no-reset.css +404 -0
  4. package/dist/all.css +404 -0
  5. package/dist/components/file-uploader.css +247 -0
  6. package/dist/components/loader.css +127 -0
  7. package/dist/components/quantity-selector.css +80 -0
  8. package/dist/components.css +404 -0
  9. package/dist/docs/FileUploader.md +67 -0
  10. package/dist/docs/Loader.md +77 -0
  11. package/dist/docs/QuantitySelector.md +96 -0
  12. package/package.json +3 -1
  13. package/src/images/loader.svg +4 -0
  14. package/src/styles/components/file-uploader.css +95 -0
  15. package/src/styles/components/loader.css +108 -0
  16. package/src/styles/components/quantity-selector.css +45 -0
  17. package/src/styles/components.css +3 -0
package/dist/all-10pt.css CHANGED
@@ -1719,6 +1719,223 @@
1719
1719
  opacity: 0;
1720
1720
  }
1721
1721
  }
1722
+ .ga-file-uploader {
1723
+ display: flex;
1724
+ flex-direction: column;
1725
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
1726
+ .ga-file-uploader__heading {
1727
+ display: flex;
1728
+ flex: 1;
1729
+ flex-direction: column;
1730
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
1731
+ .ga-file-uploader__heading-label {
1732
+ vertical-align: middle;
1733
+ font-size: calc(
1734
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1735
+ );
1736
+ line-height: var(--tw-leading, calc(
1737
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1738
+ ));
1739
+ letter-spacing: var(--tw-tracking, calc(
1740
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
1741
+ ));
1742
+ --tw-font-weight: 500;
1743
+ font-weight: 500;
1744
+ }
1745
+ .ga-file-uploader__heading-description {
1746
+ font-size: calc(
1747
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
1748
+ );
1749
+ line-height: var(--tw-leading, calc(
1750
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
1751
+ ));
1752
+ letter-spacing: var(--tw-tracking, 0);
1753
+ --tw-font-weight: 400;
1754
+ font-weight: 400;
1755
+ }
1756
+ }
1757
+ .ga-button {
1758
+ width: fit-content;
1759
+ }
1760
+ .ga-file-uploader__heading {
1761
+ color: var(--ga-color-text-body);
1762
+ }
1763
+ &.ga-file-uploader--disabled .ga-file-uploader__heading {
1764
+ color: var(--ga-color-text-disable-selected);
1765
+ }
1766
+ .ga-file-uploader__file-list {
1767
+ display: flex;
1768
+ flex: 1;
1769
+ flex-direction: column;
1770
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
1771
+ .ga-file-uploader__file-item {
1772
+ display: flex;
1773
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
1774
+ max-width: 58rem;
1775
+ min-width: 22rem;
1776
+ align-items: center;
1777
+ justify-content: space-between;
1778
+ border-radius: var(--ga-radius);
1779
+ background-color: var(--ga-color-surface-disabled);
1780
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
1781
+ padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
1782
+ font-size: calc(
1783
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1784
+ );
1785
+ line-height: var(--tw-leading, calc(
1786
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1787
+ ));
1788
+ letter-spacing: var(--tw-tracking, calc(
1789
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
1790
+ ));
1791
+ --tw-font-weight: 400;
1792
+ font-weight: 400;
1793
+ color: var(--ga-color-text-body);
1794
+ .ga-file-uploader__file-action {
1795
+ display: flex;
1796
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
1797
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
1798
+ cursor: pointer;
1799
+ align-items: center;
1800
+ justify-content: center;
1801
+ border-radius: var(--ga-radius);
1802
+ --tw-border-style: none;
1803
+ border-style: none;
1804
+ background-color: transparent;
1805
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
1806
+ color: var(--ga-color-icon-action);
1807
+ &:focus-visible {
1808
+ outline-style: var(--tw-outline-style);
1809
+ outline-width: 2px;
1810
+ outline-offset: 2px;
1811
+ outline-color: var(--ga-color-border-focus);
1812
+ }
1813
+ }
1814
+ .ga-file-uploader__file-icon {
1815
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
1816
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
1817
+ }
1818
+ &.ga-file-uploader__file-item--success {
1819
+ .ga-file-uploader__file-icon {
1820
+ color: var(--ga-color-icon-success);
1821
+ }
1822
+ }
1823
+ &.ga-file-uploader__file-item--error {
1824
+ height: auto;
1825
+ flex-direction: column;
1826
+ align-items: flex-start;
1827
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
1828
+ border-style: var(--tw-border-style);
1829
+ border-width: 1px;
1830
+ border-color: var(--ga-color-border-error);
1831
+ background-color: var(--ga-color-surface-error);
1832
+ outline-style: var(--tw-outline-style);
1833
+ outline-width: 1px;
1834
+ outline-color: var(--ga-color-border-error);
1835
+ .ga-file-uploader__error-file {
1836
+ display: flex;
1837
+ width: 100%;
1838
+ align-items: center;
1839
+ justify-content: space-between;
1840
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
1841
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
1842
+ }
1843
+ .ga-file-uploader__error-callout {
1844
+ display: flex;
1845
+ flex-direction: row;
1846
+ align-items: center;
1847
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
1848
+ vertical-align: middle;
1849
+ font-size: calc(
1850
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
1851
+ );
1852
+ line-height: var(--tw-leading, calc(
1853
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
1854
+ ));
1855
+ letter-spacing: var(--tw-tracking, calc(
1856
+ var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
1857
+ ));
1858
+ --tw-font-weight: 400;
1859
+ font-weight: 400;
1860
+ .ga-file-uploader__error-callout-icon {
1861
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
1862
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
1863
+ color: var(--ga-color-icon-error);
1864
+ }
1865
+ }
1866
+ }
1867
+ }
1868
+ }
1869
+ .ga-file-uploader__input {
1870
+ position: absolute;
1871
+ width: 1px;
1872
+ height: 1px;
1873
+ padding: 0;
1874
+ margin: -1px;
1875
+ overflow: hidden;
1876
+ clip-path: inset(50%);
1877
+ white-space: nowrap;
1878
+ border-width: 0;
1879
+ }
1880
+ .ga-file-uploader__dropzone {
1881
+ display: flex;
1882
+ min-height: 6.25rem;
1883
+ flex: 1;
1884
+ align-items: center;
1885
+ justify-content: center;
1886
+ border-radius: var(--ga-radius);
1887
+ border-style: var(--tw-border-style);
1888
+ border-width: 1px;
1889
+ --tw-border-style: dashed;
1890
+ border-style: dashed;
1891
+ border-color: var(--ga-color-border-action);
1892
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
1893
+ text-align: center;
1894
+ font-size: calc(
1895
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1896
+ );
1897
+ line-height: var(--tw-leading, calc(
1898
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1899
+ ));
1900
+ letter-spacing: var(--tw-tracking, calc(
1901
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
1902
+ ));
1903
+ --tw-font-weight: 400;
1904
+ font-weight: 400;
1905
+ color: var(--ga-color-text-action);
1906
+ &:hover {
1907
+ border-color: var(--ga-color-border-action-hover);
1908
+ background-color: var(--ga-color-surface-action-hover-2);
1909
+ color: var(--ga-color-text-action-hover);
1910
+ }
1911
+ &:focus-visible, &:focus-within {
1912
+ --tw-border-style: none;
1913
+ border-style: none;
1914
+ outline-style: var(--tw-outline-style);
1915
+ outline-width: 2px;
1916
+ outline-color: var(--ga-color-border-focus);
1917
+ --tw-outline-style: solid;
1918
+ outline-style: solid;
1919
+ }
1920
+ &.ga-file-uploader__dropzone--drag-hover {
1921
+ --tw-border-style: none;
1922
+ border-style: none;
1923
+ background-color: var(--ga-color-surface-page);
1924
+ color: var(--ga-color-text-action-hover);
1925
+ outline-style: var(--tw-outline-style);
1926
+ outline-width: 2px;
1927
+ outline-color: var(--ga-color-border-focus);
1928
+ --tw-outline-style: solid;
1929
+ outline-style: solid;
1930
+ }
1931
+ }
1932
+ .ga-file-uploader__dropzone[aria-disabled='true'], &.ga-file-uploader--disabled .ga-file-uploader__dropzone {
1933
+ cursor: not-allowed;
1934
+ border-color: var(--ga-color-border-disabled);
1935
+ background-color: var(--ga-color-surface-primary);
1936
+ color: var(--ga-color-text-disabled);
1937
+ }
1938
+ }
1722
1939
  .ga-form-field {
1723
1940
  display: flex;
1724
1941
  flex-direction: column;
@@ -1900,6 +2117,132 @@
1900
2117
  outline-style: none;
1901
2118
  }
1902
2119
  }
2120
+ .ga-loader {
2121
+ display: flex;
2122
+ flex-direction: column;
2123
+ align-items: center;
2124
+ justify-content: center;
2125
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
2126
+ &.ga-loader--small {
2127
+ font-size: calc(
2128
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
2129
+ );
2130
+ line-height: var(--tw-leading, calc(
2131
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
2132
+ ));
2133
+ letter-spacing: var(--tw-tracking, calc(
2134
+ var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
2135
+ ));
2136
+ .ga-loader__icon {
2137
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
2138
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
2139
+ }
2140
+ }
2141
+ &.ga-loader--medium {
2142
+ font-size: calc(
2143
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
2144
+ );
2145
+ line-height: var(--tw-leading, calc(
2146
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
2147
+ ));
2148
+ letter-spacing: var(--tw-tracking, 0);
2149
+ .ga-loader__icon {
2150
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
2151
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
2152
+ }
2153
+ }
2154
+ &.ga-loader--large {
2155
+ font-size: calc(
2156
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
2157
+ );
2158
+ line-height: var(--tw-leading, calc(
2159
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
2160
+ ));
2161
+ letter-spacing: var(--tw-tracking, calc(
2162
+ var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
2163
+ ));
2164
+ .ga-loader__icon {
2165
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
2166
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
2167
+ }
2168
+ }
2169
+ .ga-loader__icon--animated {
2170
+ animation: ga-loader-animation 1100ms linear infinite;
2171
+ }
2172
+ .ga-loader__icon--reduced-motion {
2173
+ display: none;
2174
+ color: var(--ga-color-icon-primary);
2175
+ }
2176
+ @media (prefers-reduced-motion: reduce) {
2177
+ .ga-loader__icon--animated {
2178
+ display: none;
2179
+ }
2180
+ .ga-loader__icon--reduced-motion {
2181
+ display: block;
2182
+ }
2183
+ }
2184
+ .ga-loader__label {
2185
+ color: var(--ga-color-text-body);
2186
+ &:empty {
2187
+ display: none;
2188
+ }
2189
+ }
2190
+ }
2191
+ .ga-inline-loading {
2192
+ display: flex;
2193
+ flex-direction: row;
2194
+ align-items: center;
2195
+ gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
2196
+ font-size: calc(
2197
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
2198
+ );
2199
+ line-height: var(--tw-leading, calc(
2200
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
2201
+ ));
2202
+ letter-spacing: var(--tw-tracking, 0);
2203
+ color: var(--ga-color-text-body);
2204
+ &.ga-inline-loading--active {
2205
+ .ga-inline-loading__icon {
2206
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
2207
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
2208
+ animation: ga-loader-animation 1100ms linear infinite;
2209
+ }
2210
+ }
2211
+ &.ga-inline-loading--completed {
2212
+ .ga-inline-loading__icon {
2213
+ color: var(--ga-color-icon-success);
2214
+ }
2215
+ }
2216
+ &.ga-inline-loading--error {
2217
+ .ga-inline-loading__icon {
2218
+ color: var(--ga-color-icon-error);
2219
+ }
2220
+ }
2221
+ &.ga-inline-loading--inactive {
2222
+ color: var(--ga-color-text-disable-selected);
2223
+ }
2224
+ .ga-inline-loading__icon {
2225
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
2226
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
2227
+ }
2228
+ }
2229
+ @keyframes ga-loader-animation {
2230
+ 0% {
2231
+ transform: rotate(0deg);
2232
+ }
2233
+ 31.82% {
2234
+ transform: rotate(90deg);
2235
+ }
2236
+ 63.64% {
2237
+ transform: rotate(180deg);
2238
+ }
2239
+ 81.82% {
2240
+ transform: rotate(270deg);
2241
+ }
2242
+ 100% {
2243
+ transform: rotate(360deg);
2244
+ }
2245
+ }
1903
2246
  .ga-notification {
1904
2247
  position: relative;
1905
2248
  display: inline-flex;
@@ -3853,6 +4196,67 @@
3853
4196
  color: var(--ga-color-icon-primary);
3854
4197
  }
3855
4198
  }
4199
+ .ga-input--quantity-selector {
4200
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 40);
4201
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
4202
+ &:has(input:disabled):has(input:not(:placeholder-shown)) {
4203
+ .ga-input__quantity-separator {
4204
+ background-color: var(--ga-color-text-on-action);
4205
+ }
4206
+ .ga-input__quantity-button {
4207
+ color: var(--ga-color-text-on-action);
4208
+ }
4209
+ }
4210
+ input {
4211
+ min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
4212
+ flex: 1;
4213
+ background-color: transparent;
4214
+ padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
4215
+ --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
4216
+ line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
4217
+ --tw-outline-style: none;
4218
+ outline-style: none;
4219
+ appearance: textfield;
4220
+ &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
4221
+ -webkit-appearance: none;
4222
+ margin: 0;
4223
+ }
4224
+ }
4225
+ .ga-input__quantity-separator {
4226
+ height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
4227
+ width: 1px;
4228
+ background-color: var(--ga-color-border-disabled);
4229
+ }
4230
+ .ga-input__quantity-button {
4231
+ display: flex;
4232
+ width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
4233
+ flex-shrink: 0;
4234
+ cursor: pointer;
4235
+ align-items: center;
4236
+ justify-content: center;
4237
+ background-color: transparent;
4238
+ padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
4239
+ &:hover:not(:disabled) {
4240
+ border-radius: var(--ga-radius);
4241
+ background-color: var(--ga-color-surface-action-hover-2);
4242
+ outline-style: var(--tw-outline-style);
4243
+ outline-width: 1px;
4244
+ outline-color: var(--ga-color-border-action-hover);
4245
+ }
4246
+ &:focus-visible {
4247
+ border-radius: var(--ga-radius);
4248
+ outline-style: var(--tw-outline-style);
4249
+ outline-width: 2px;
4250
+ outline-offset: 2px;
4251
+ outline-color: var(--ga-color-border-focus);
4252
+ }
4253
+ &:disabled {
4254
+ cursor: not-allowed;
4255
+ background-color: transparent;
4256
+ color: var(--ga-color-text-disabled);
4257
+ }
4258
+ }
4259
+ }
3856
4260
  .ga-quick-filter-button {
3857
4261
  display: inline-flex;
3858
4262
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);