@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.
Files changed (35) hide show
  1. package/dist/all-10pt.css +1 -2
  2. package/dist/all-no-reset-10pt.css +1 -2
  3. package/dist/all-no-reset.css +1 -2
  4. package/dist/all.css +1 -2
  5. package/dist/components/tabs.css +1 -2
  6. package/dist/components.css +1 -2
  7. package/dist/docs/Avatar.md +52 -0
  8. package/dist/docs/Badge.md +60 -0
  9. package/dist/docs/Button.md +60 -0
  10. package/dist/docs/Calendar.md +468 -0
  11. package/dist/docs/Card.md +57 -0
  12. package/dist/docs/Checkbox.md +112 -0
  13. package/dist/docs/Container.md +62 -0
  14. package/dist/docs/Datepicker.md +107 -0
  15. package/dist/docs/Dropdown.md +152 -0
  16. package/dist/docs/FormField.md +101 -0
  17. package/dist/docs/Input.md +84 -0
  18. package/dist/docs/Link.md +109 -0
  19. package/dist/docs/Menu.md +316 -0
  20. package/dist/docs/Modal.md +337 -0
  21. package/dist/docs/Notification.md +341 -0
  22. package/dist/docs/ProgressBar.md +87 -0
  23. package/dist/docs/ProgressIndicator.md +217 -0
  24. package/dist/docs/QuickFilterButton.md +74 -0
  25. package/dist/docs/Radio.md +106 -0
  26. package/dist/docs/SegmentedControl.md +69 -0
  27. package/dist/docs/Select.md +411 -0
  28. package/dist/docs/Switch.md +97 -0
  29. package/dist/docs/Tabs.md +129 -0
  30. package/dist/docs/Tag.md +154 -0
  31. package/dist/docs/TextArea.md +51 -0
  32. package/dist/docs/TextSize.md +63 -0
  33. package/dist/docs/Tooltip.md +95 -0
  34. package/package.json +3 -1
  35. 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: var(--ga-color-surface-primary);
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/all-no-reset-10pt.css CHANGED
@@ -2737,8 +2737,7 @@
2737
2737
  cursor: pointer;
2738
2738
  align-items: center;
2739
2739
  gap: calc(0.4rem * 2);
2740
- border-color: var(--ga-color-surface-primary);
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: var(--ga-color-surface-primary);
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: var(--ga-color-surface-primary);
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: var(--ga-color-surface-primary);
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: var(--ga-color-surface-primary);
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
  );
package/dist/docs/Avatar.md ADDED
@@ -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
+ ```
package/dist/docs/Badge.md ADDED
@@ -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
+ ```
package/dist/docs/Button.md ADDED
@@ -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
+ ```