@vsn-ux/gaia-styles 0.6.0 → 0.6.2
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/dist/all-10pt.css +1 -2
- package/dist/all-no-reset-10pt.css +1 -2
- package/dist/all-no-reset.css +1 -2
- package/dist/all.css +1 -2
- package/dist/components/tabs.css +1 -2
- package/dist/components.css +1 -2
- package/dist/docs/Avatar.md +52 -0
- package/dist/docs/Badge.md +60 -0
- package/dist/docs/Button.md +60 -0
- package/dist/docs/Calendar.md +468 -0
- package/dist/docs/Card.md +57 -0
- package/dist/docs/Checkbox.md +112 -0
- package/dist/docs/Container.md +62 -0
- package/dist/docs/Datepicker.md +107 -0
- package/dist/docs/Dropdown.md +152 -0
- package/dist/docs/FormField.md +101 -0
- package/dist/docs/Input.md +84 -0
- package/dist/docs/Link.md +109 -0
- package/dist/docs/Menu.md +316 -0
- package/dist/docs/Modal.md +337 -0
- package/dist/docs/Notification.md +341 -0
- package/dist/docs/ProgressBar.md +87 -0
- package/dist/docs/ProgressIndicator.md +217 -0
- package/dist/docs/QuickFilterButton.md +74 -0
- package/dist/docs/Radio.md +106 -0
- package/dist/docs/SegmentedControl.md +69 -0
- package/dist/docs/Select.md +411 -0
- package/dist/docs/Switch.md +97 -0
- package/dist/docs/Tabs.md +129 -0
- package/dist/docs/Tag.md +154 -0
- package/dist/docs/TextArea.md +51 -0
- package/dist/docs/TextSize.md +63 -0
- package/dist/docs/Tooltip.md +95 -0
- package/package.json +3 -1
- package/src/styles/components/tabs.css +1 -1
package/dist/all-10pt.css
CHANGED
|
@@ -2890,8 +2890,7 @@
|
|
|
2890
2890
|
cursor: pointer;
|
|
2891
2891
|
align-items: center;
|
|
2892
2892
|
gap: calc(0.4rem * 2);
|
|
2893
|
-
border-color:
|
|
2894
|
-
background-color: var(--ga-color-surface-primary);
|
|
2893
|
+
border-color: transparent;
|
|
2895
2894
|
font-size: calc(
|
|
2896
2895
|
var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
|
|
2897
2896
|
);
|
|
@@ -2737,8 +2737,7 @@
|
|
|
2737
2737
|
cursor: pointer;
|
|
2738
2738
|
align-items: center;
|
|
2739
2739
|
gap: calc(0.4rem * 2);
|
|
2740
|
-
border-color:
|
|
2741
|
-
background-color: var(--ga-color-surface-primary);
|
|
2740
|
+
border-color: transparent;
|
|
2742
2741
|
font-size: calc(
|
|
2743
2742
|
var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
|
|
2744
2743
|
);
|
package/dist/all-no-reset.css
CHANGED
|
@@ -2737,8 +2737,7 @@
|
|
|
2737
2737
|
cursor: pointer;
|
|
2738
2738
|
align-items: center;
|
|
2739
2739
|
gap: calc(0.25rem * 2);
|
|
2740
|
-
border-color:
|
|
2741
|
-
background-color: var(--ga-color-surface-primary);
|
|
2740
|
+
border-color: transparent;
|
|
2742
2741
|
font-size: calc(
|
|
2743
2742
|
var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
|
|
2744
2743
|
);
|
package/dist/all.css
CHANGED
|
@@ -2890,8 +2890,7 @@
|
|
|
2890
2890
|
cursor: pointer;
|
|
2891
2891
|
align-items: center;
|
|
2892
2892
|
gap: calc(0.25rem * 2);
|
|
2893
|
-
border-color:
|
|
2894
|
-
background-color: var(--ga-color-surface-primary);
|
|
2893
|
+
border-color: transparent;
|
|
2895
2894
|
font-size: calc(
|
|
2896
2895
|
var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
|
|
2897
2896
|
);
|
package/dist/components/tabs.css
CHANGED
|
@@ -13,8 +13,7 @@
|
|
|
13
13
|
cursor: pointer;
|
|
14
14
|
align-items: center;
|
|
15
15
|
gap: calc(0.25rem * 2);
|
|
16
|
-
border-color:
|
|
17
|
-
background-color: var(--ga-color-surface-primary);
|
|
16
|
+
border-color: transparent;
|
|
18
17
|
font-size: calc(
|
|
19
18
|
var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
|
|
20
19
|
);
|
package/dist/components.css
CHANGED
|
@@ -2392,8 +2392,7 @@
|
|
|
2392
2392
|
cursor: pointer;
|
|
2393
2393
|
align-items: center;
|
|
2394
2394
|
gap: calc(0.25rem * 2);
|
|
2395
|
-
border-color:
|
|
2396
|
-
background-color: var(--ga-color-surface-primary);
|
|
2395
|
+
border-color: transparent;
|
|
2397
2396
|
font-size: calc(
|
|
2398
2397
|
var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
|
|
2399
2398
|
);
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Avatar
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-avatar [--small|--large]
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Elements Hierarchy
|
|
10
|
+
|
|
11
|
+
### Core Block
|
|
12
|
+
|
|
13
|
+
- `ga-avatar` - Main container for the entire avatar component (default size 40px × 40px)
|
|
14
|
+
|
|
15
|
+
### Modifiers
|
|
16
|
+
|
|
17
|
+
- `ga-avatar--small` - Smaller sized avatar (24px × 24px)
|
|
18
|
+
- `ga-avatar--large` - Larger sized avatar (64px × 64px)
|
|
19
|
+
|
|
20
|
+
## Examples
|
|
21
|
+
|
|
22
|
+
### Text
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<span class="ga-avatar ga-avatar--small">RB</span>
|
|
26
|
+
<span class="ga-avatar">RB</span>
|
|
27
|
+
<span class="ga-avatar ga-avatar--large">RB</span>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Icon
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<span class="ga-avatar ga-avatar--small">
|
|
34
|
+
<!-- icon: user-round, size=16 -->
|
|
35
|
+
</span>
|
|
36
|
+
<span class="ga-avatar"><!-- icon: user-round, size=30 --></span>
|
|
37
|
+
<span class="ga-avatar ga-avatar--large">
|
|
38
|
+
<!-- icon: user-round, size=44 -->
|
|
39
|
+
</span>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Image
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<span class="ga-avatar ga-avatar--small">
|
|
46
|
+
<img src="https://i.pravatar.cc/64?img=70" />
|
|
47
|
+
</span>
|
|
48
|
+
<span class="ga-avatar"><img src="https://i.pravatar.cc/64?img=70" /></span>
|
|
49
|
+
<span class="ga-avatar ga-avatar--large">
|
|
50
|
+
<img src="https://i.pravatar.cc/64?img=70" />
|
|
51
|
+
</span>
|
|
52
|
+
```
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Badge
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-badge [--text|--dot] [--default|--default-inverted|--information|--error|--warning|--success|--muted|--disabled]
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Elements Hierarchy
|
|
10
|
+
|
|
11
|
+
### Core Block
|
|
12
|
+
|
|
13
|
+
- `ga-badge` - Main container for the badge component that displays status indicators or counts
|
|
14
|
+
|
|
15
|
+
### Display Variants
|
|
16
|
+
|
|
17
|
+
- `ga-badge--text` - Text badge variant
|
|
18
|
+
- `ga-badge--dot` - Dot badge variant
|
|
19
|
+
|
|
20
|
+
### Status Modifiers
|
|
21
|
+
|
|
22
|
+
- `ga-badge--default` - Default style with action surface color
|
|
23
|
+
- `ga-badge--default-inverted` - Inverted default style
|
|
24
|
+
- `ga-badge--muted` - Muted style
|
|
25
|
+
- `ga-badge--information` - Information style
|
|
26
|
+
- `ga-badge--error` - Error style
|
|
27
|
+
- `ga-badge--warning` - Warning style
|
|
28
|
+
- `ga-badge--success` - Success style
|
|
29
|
+
- `ga-badge--disabled` - Disabled style
|
|
30
|
+
- `ga-badge--disabled-inverted` - Disabled inverted style
|
|
31
|
+
|
|
32
|
+
## Examples
|
|
33
|
+
|
|
34
|
+
### Text
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<span class="ga-badge ga-badge--text ga-badge--default">25</span>
|
|
38
|
+
<span class="ga-badge ga-badge--text ga-badge--default-inverted">99</span>
|
|
39
|
+
<span class="ga-badge ga-badge--text ga-badge--muted">9</span>
|
|
40
|
+
<span class="ga-badge ga-badge--text ga-badge--information">7</span>
|
|
41
|
+
<span class="ga-badge ga-badge--text ga-badge--error">-237%</span>
|
|
42
|
+
<span class="ga-badge ga-badge--text ga-badge--warning">9</span>
|
|
43
|
+
<span class="ga-badge ga-badge--text ga-badge--success">+25K</span>
|
|
44
|
+
<span class="ga-badge ga-badge--text ga-badge--disabled">0</span>
|
|
45
|
+
<span class="ga-badge ga-badge--text ga-badge--disabled-inverted">0</span>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Dot
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<span class="ga-badge ga-badge--dot ga-badge--default"></span>
|
|
52
|
+
<span class="ga-badge ga-badge--dot ga-badge--default-inverted"></span>
|
|
53
|
+
<span class="ga-badge ga-badge--dot ga-badge--muted"></span>
|
|
54
|
+
<span class="ga-badge ga-badge--dot ga-badge--information"></span>
|
|
55
|
+
<span class="ga-badge ga-badge--dot ga-badge--error"></span>
|
|
56
|
+
<span class="ga-badge ga-badge--dot ga-badge--warning"></span>
|
|
57
|
+
<span class="ga-badge ga-badge--dot ga-badge--success"></span>
|
|
58
|
+
<span class="ga-badge ga-badge--dot ga-badge--disabled"></span>
|
|
59
|
+
<span class="ga-badge ga-badge--dot ga-badge--disabled-inverted"></span>
|
|
60
|
+
```
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Button
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-button [--primary|--secondary|--ghost|--transparent] [--icon-only]
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Elements Hierarchy
|
|
10
|
+
|
|
11
|
+
### Core Block
|
|
12
|
+
|
|
13
|
+
- `ga-button` - Main container for the button component
|
|
14
|
+
|
|
15
|
+
### Modifiers
|
|
16
|
+
|
|
17
|
+
#### Variant modifiers
|
|
18
|
+
|
|
19
|
+
- `ga-button--primary` - Primary button
|
|
20
|
+
- `ga-button--secondary` - Secondary button
|
|
21
|
+
- `ga-button--ghost` - Transparent button with no border
|
|
22
|
+
- `ga-button--transparent` - Transparent button with border
|
|
23
|
+
|
|
24
|
+
#### Type modifiers
|
|
25
|
+
|
|
26
|
+
- `ga-button--icon-only` - Button variant optimized for displaying only an icon (different paddings)
|
|
27
|
+
|
|
28
|
+
## Examples
|
|
29
|
+
|
|
30
|
+
### Text (with optional icon) Button
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<button class="ga-button ga-button--primary">Button</button>
|
|
34
|
+
<button class="ga-button ga-button--secondary">Button</button>
|
|
35
|
+
<button class="ga-button ga-button--ghost">Button</button>
|
|
36
|
+
<button class="ga-button ga-button--transparent">Button</button>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<button class="ga-button ga-button--primary">
|
|
41
|
+
<UserRoundPlusIcon class="ga-icon" /> Button
|
|
42
|
+
</button>
|
|
43
|
+
<button class="ga-button ga-button--secondary">
|
|
44
|
+
<UserRoundPlusIcon class="ga-icon" /> Button
|
|
45
|
+
</button>
|
|
46
|
+
<button class="ga-button ga-button--ghost">
|
|
47
|
+
<UserRoundPlusIcon class="ga-icon" /> Button
|
|
48
|
+
</button>
|
|
49
|
+
<button class="ga-button ga-button--transparent">
|
|
50
|
+
<UserRoundPlusIcon class="ga-icon" /> Button
|
|
51
|
+
</button>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Icon (only) Button
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<button class="ga-button ga-button--primary ga-button--icon-only">
|
|
58
|
+
<DownloadIcon class="ga-icon" />
|
|
59
|
+
</button>
|
|
60
|
+
```
|