@vsn-ux/gaia-styles 0.3.0 → 0.3.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 (25) hide show
  1. package/dist/all-no-reset-10pt.css +19 -2
  2. package/dist/all-no-reset.css +19 -2
  3. package/dist/all.css +19 -2
  4. package/dist/base.css +1 -1
  5. package/dist/components/avatar.css +1 -1
  6. package/dist/components/badge.css +1 -1
  7. package/dist/components/button.css +1 -1
  8. package/dist/components/card.css +2 -1
  9. package/dist/components/checkbox.css +1 -1
  10. package/dist/components/dropdown.css +3 -1
  11. package/dist/components/form-field.css +1 -1
  12. package/dist/components/input.css +16 -2
  13. package/dist/components/menu.css +1 -1
  14. package/dist/components/notification.css +1 -1
  15. package/dist/components/radio.css +1 -1
  16. package/dist/components/segmented-control.css +1 -1
  17. package/dist/components/select.css +1 -1
  18. package/dist/components/tag.css +1 -1
  19. package/dist/components/text-area.css +1 -1
  20. package/dist/components/tooltip.css +1 -1
  21. package/dist/components.css +19 -2
  22. package/package.json +1 -1
  23. package/src/styles/components/card.css +1 -1
  24. package/src/styles/components/dropdown.css +1 -1
  25. package/src/styles/components/input.css +15 -1
package/dist/all-no-reset-10pt.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
@@ -366,6 +366,7 @@
366
366
  }
367
367
  }
368
368
  .ga-card {
369
+ display: inline-block;
369
370
  border-radius: var(--ga-radius);
370
371
  border-style: var(--tw-border-style);
371
372
  border-width: 1px;
@@ -578,6 +579,8 @@
578
579
  margin-inline: auto;
579
580
  margin-block: calc(0.4rem * 5);
580
581
  display: inline-flex;
582
+ min-width: calc(0.4rem * 30);
583
+ justify-content: center;
581
584
  }
582
585
  .ga-dropdown__item-label {
583
586
  min-width: calc(0.4rem * 0);
@@ -684,9 +687,14 @@
684
687
  border-color: var(--ga-color-border-primary);
685
688
  background-color: var(--ga-color-surface-disabled);
686
689
  color: var(--ga-color-text-disable-selected);
690
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
691
+ border-color: var(--ga-color-surface-disable-selected);
692
+ background-color: var(--ga-color-surface-disable-selected);
693
+ color: var(--ga-color-text-on-action);
694
+ }
687
695
  }
688
696
  &:has(input:focus), &:is(input:focus) {
689
- &:not(.ga-input--invalid) {
697
+ &:not(.ga-input--invalid, .ga-input--success) {
690
698
  border-color: var(--ga-color-border-focus);
691
699
  outline-style: var(--tw-outline-style);
692
700
  outline-width: 1px;
@@ -702,6 +710,15 @@
702
710
  background-color: var(--ga-color-surface-error);
703
711
  }
704
712
  }
713
+ &.ga-input--success {
714
+ border-color: var(--ga-color-border-success);
715
+ outline-style: var(--tw-outline-style);
716
+ outline-width: 1px;
717
+ outline-color: var(--ga-color-border-success);
718
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
719
+ background-color: var(--ga-color-surface-success);
720
+ }
721
+ }
705
722
  input, &:is(input) {
706
723
  min-width: calc(0.4rem * 0);
707
724
  --tw-leading: calc(0.4rem * 6);
package/dist/all-no-reset.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
@@ -366,6 +366,7 @@
366
366
  }
367
367
  }
368
368
  .ga-card {
369
+ display: inline-block;
369
370
  border-radius: var(--ga-radius);
370
371
  border-style: var(--tw-border-style);
371
372
  border-width: 1px;
@@ -578,6 +579,8 @@
578
579
  margin-inline: auto;
579
580
  margin-block: calc(0.25rem * 5);
580
581
  display: inline-flex;
582
+ min-width: calc(0.25rem * 30);
583
+ justify-content: center;
581
584
  }
582
585
  .ga-dropdown__item-label {
583
586
  min-width: calc(0.25rem * 0);
@@ -684,9 +687,14 @@
684
687
  border-color: var(--ga-color-border-primary);
685
688
  background-color: var(--ga-color-surface-disabled);
686
689
  color: var(--ga-color-text-disable-selected);
690
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
691
+ border-color: var(--ga-color-surface-disable-selected);
692
+ background-color: var(--ga-color-surface-disable-selected);
693
+ color: var(--ga-color-text-on-action);
694
+ }
687
695
  }
688
696
  &:has(input:focus), &:is(input:focus) {
689
- &:not(.ga-input--invalid) {
697
+ &:not(.ga-input--invalid, .ga-input--success) {
690
698
  border-color: var(--ga-color-border-focus);
691
699
  outline-style: var(--tw-outline-style);
692
700
  outline-width: 1px;
@@ -702,6 +710,15 @@
702
710
  background-color: var(--ga-color-surface-error);
703
711
  }
704
712
  }
713
+ &.ga-input--success {
714
+ border-color: var(--ga-color-border-success);
715
+ outline-style: var(--tw-outline-style);
716
+ outline-width: 1px;
717
+ outline-color: var(--ga-color-border-success);
718
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
719
+ background-color: var(--ga-color-surface-success);
720
+ }
721
+ }
705
722
  input, &:is(input) {
706
723
  min-width: calc(0.25rem * 0);
707
724
  --tw-leading: calc(0.25rem * 6);
package/dist/all.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
@@ -509,6 +509,7 @@
509
509
  }
510
510
  }
511
511
  .ga-card {
512
+ display: inline-block;
512
513
  border-radius: var(--ga-radius);
513
514
  border-style: var(--tw-border-style);
514
515
  border-width: 1px;
@@ -721,6 +722,8 @@
721
722
  margin-inline: auto;
722
723
  margin-block: calc(0.25rem * 5);
723
724
  display: inline-flex;
725
+ min-width: calc(0.25rem * 30);
726
+ justify-content: center;
724
727
  }
725
728
  .ga-dropdown__item-label {
726
729
  min-width: calc(0.25rem * 0);
@@ -827,9 +830,14 @@
827
830
  border-color: var(--ga-color-border-primary);
828
831
  background-color: var(--ga-color-surface-disabled);
829
832
  color: var(--ga-color-text-disable-selected);
833
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
834
+ border-color: var(--ga-color-surface-disable-selected);
835
+ background-color: var(--ga-color-surface-disable-selected);
836
+ color: var(--ga-color-text-on-action);
837
+ }
830
838
  }
831
839
  &:has(input:focus), &:is(input:focus) {
832
- &:not(.ga-input--invalid) {
840
+ &:not(.ga-input--invalid, .ga-input--success) {
833
841
  border-color: var(--ga-color-border-focus);
834
842
  outline-style: var(--tw-outline-style);
835
843
  outline-width: 1px;
@@ -845,6 +853,15 @@
845
853
  background-color: var(--ga-color-surface-error);
846
854
  }
847
855
  }
856
+ &.ga-input--success {
857
+ border-color: var(--ga-color-border-success);
858
+ outline-style: var(--tw-outline-style);
859
+ outline-width: 1px;
860
+ outline-color: var(--ga-color-border-success);
861
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
862
+ background-color: var(--ga-color-surface-success);
863
+ }
864
+ }
848
865
  input, &:is(input) {
849
866
  min-width: calc(0.25rem * 0);
850
867
  --tw-leading: calc(0.25rem * 6);
package/dist/base.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  body {
3
3
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
4
4
  font-feature-settings: 'liga' 1, 'calt' 1;
package/dist/components/avatar.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-avatar {
3
3
  display: inline-flex;
4
4
  height: calc(0.25rem * 10);
package/dist/components/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-badge {
3
3
  display: inline-block;
4
4
  border-radius: calc(infinity * 1px);
package/dist/components/button.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-button {
3
3
  display: inline-flex;
4
4
  height: calc(0.25rem * 10);
package/dist/components/card.css CHANGED
@@ -1,5 +1,6 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-card {
3
+ display: inline-block;
3
4
  border-radius: var(--ga-radius);
4
5
  border-style: var(--tw-border-style);
5
6
  border-width: 1px;
package/dist/components/checkbox.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-checkbox {
3
3
  position: relative;
4
4
  display: inline-flex;
package/dist/components/dropdown.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-dropdown {
3
3
  display: flex;
4
4
  max-height: calc(0.25rem * 81);
@@ -97,6 +97,8 @@
97
97
  margin-inline: auto;
98
98
  margin-block: calc(0.25rem * 5);
99
99
  display: inline-flex;
100
+ min-width: calc(0.25rem * 30);
101
+ justify-content: center;
100
102
  }
101
103
  .ga-dropdown__item-label {
102
104
  min-width: calc(0.25rem * 0);
package/dist/components/form-field.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-form-field {
3
3
  display: flex;
4
4
  flex-direction: column;
package/dist/components/input.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-input {
3
3
  display: flex;
4
4
  height: calc(0.25rem * 10);
@@ -26,9 +26,14 @@
26
26
  border-color: var(--ga-color-border-primary);
27
27
  background-color: var(--ga-color-surface-disabled);
28
28
  color: var(--ga-color-text-disable-selected);
29
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
30
+ border-color: var(--ga-color-surface-disable-selected);
31
+ background-color: var(--ga-color-surface-disable-selected);
32
+ color: var(--ga-color-text-on-action);
33
+ }
29
34
  }
30
35
  &:has(input:focus), &:is(input:focus) {
31
- &:not(.ga-input--invalid) {
36
+ &:not(.ga-input--invalid, .ga-input--success) {
32
37
  border-color: var(--ga-color-border-focus);
33
38
  outline-style: var(--tw-outline-style);
34
39
  outline-width: 1px;
@@ -44,6 +49,15 @@
44
49
  background-color: var(--ga-color-surface-error);
45
50
  }
46
51
  }
52
+ &.ga-input--success {
53
+ border-color: var(--ga-color-border-success);
54
+ outline-style: var(--tw-outline-style);
55
+ outline-width: 1px;
56
+ outline-color: var(--ga-color-border-success);
57
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
58
+ background-color: var(--ga-color-surface-success);
59
+ }
60
+ }
47
61
  input, &:is(input) {
48
62
  min-width: calc(0.25rem * 0);
49
63
  --tw-leading: calc(0.25rem * 6);
package/dist/components/menu.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-menu {
3
3
  display: flex;
4
4
  max-height: calc(0.25rem * 81);
package/dist/components/notification.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-notification {
3
3
  display: inline-flex;
4
4
  flex-direction: row;
package/dist/components/radio.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-radio-group {
3
3
  display: inline-flex;
4
4
  flex-direction: column;
package/dist/components/segmented-control.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-segmented-control {
3
3
  display: inline-flex;
4
4
  height: calc(0.25rem * 10);
package/dist/components/select.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-native-select {
3
3
  position: relative;
4
4
  select {
package/dist/components/tag.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-tag {
3
3
  box-sizing: content-box;
4
4
  display: inline-flex;
package/dist/components/text-area.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-text-area {
3
3
  display: flex;
4
4
  width: calc(0.25rem * 50);
package/dist/components/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-tooltip {
3
3
  position: relative;
4
4
  max-width: calc(0.25rem * 100);
package/dist/components.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
2
2
  .ga-avatar {
3
3
  display: inline-flex;
4
4
  height: calc(0.25rem * 10);
@@ -184,6 +184,7 @@
184
184
  }
185
185
  }
186
186
  .ga-card {
187
+ display: inline-block;
187
188
  border-radius: var(--ga-radius);
188
189
  border-style: var(--tw-border-style);
189
190
  border-width: 1px;
@@ -396,6 +397,8 @@
396
397
  margin-inline: auto;
397
398
  margin-block: calc(0.25rem * 5);
398
399
  display: inline-flex;
400
+ min-width: calc(0.25rem * 30);
401
+ justify-content: center;
399
402
  }
400
403
  .ga-dropdown__item-label {
401
404
  min-width: calc(0.25rem * 0);
@@ -502,9 +505,14 @@
502
505
  border-color: var(--ga-color-border-primary);
503
506
  background-color: var(--ga-color-surface-disabled);
504
507
  color: var(--ga-color-text-disable-selected);
508
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
509
+ border-color: var(--ga-color-surface-disable-selected);
510
+ background-color: var(--ga-color-surface-disable-selected);
511
+ color: var(--ga-color-text-on-action);
512
+ }
505
513
  }
506
514
  &:has(input:focus), &:is(input:focus) {
507
- &:not(.ga-input--invalid) {
515
+ &:not(.ga-input--invalid, .ga-input--success) {
508
516
  border-color: var(--ga-color-border-focus);
509
517
  outline-style: var(--tw-outline-style);
510
518
  outline-width: 1px;
@@ -520,6 +528,15 @@
520
528
  background-color: var(--ga-color-surface-error);
521
529
  }
522
530
  }
531
+ &.ga-input--success {
532
+ border-color: var(--ga-color-border-success);
533
+ outline-style: var(--tw-outline-style);
534
+ outline-width: 1px;
535
+ outline-color: var(--ga-color-border-success);
536
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
537
+ background-color: var(--ga-color-surface-success);
538
+ }
539
+ }
523
540
  input, &:is(input) {
524
541
  min-width: calc(0.25rem * 0);
525
542
  --tw-leading: calc(0.25rem * 6);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "storybook dev -p 6006",
package/src/styles/components/card.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ga-card {
2
- @apply text-md rounded border border-(--ga-color-border-primary) bg-white p-4;
2
+ @apply text-md inline-block rounded border border-(--ga-color-border-primary) bg-white p-4;
3
3
 
4
4
  &.ga-card--selectable {
5
5
  @apply cursor-pointer;
package/src/styles/components/dropdown.css CHANGED
@@ -46,7 +46,7 @@
46
46
  }
47
47
 
48
48
  .ga-dropdown__spinner {
49
- @apply mx-auto my-5 inline-flex;
49
+ @apply mx-auto my-5 inline-flex min-w-30 justify-center;
50
50
  }
51
51
 
52
52
  .ga-dropdown__item-label {
package/src/styles/components/input.css CHANGED
@@ -13,11 +13,16 @@
13
13
  &:has(input:disabled),
14
14
  &:is(input:disabled) {
15
15
  @apply border-(--ga-color-border-primary) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
16
+
17
+ &:has(input:not(:placeholder-shown)),
18
+ &:is(input:not(:placeholder-shown)) {
19
+ @apply border-(--ga-color-surface-disable-selected) bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);
20
+ }
16
21
  }
17
22
 
18
23
  &:has(input:focus),
19
24
  &:is(input:focus) {
20
- &:not(.ga-input--invalid) {
25
+ &:not(.ga-input--invalid, .ga-input--success) {
21
26
  @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
22
27
  }
23
28
  }
@@ -31,6 +36,15 @@
31
36
  }
32
37
  }
33
38
 
39
+ &.ga-input--success {
40
+ @apply border-(--ga-color-border-success) outline outline-(--ga-color-border-success);
41
+
42
+ &:has(input:not(:placeholder-shown)),
43
+ &:is(input:not(:placeholder-shown)) {
44
+ @apply bg-(--ga-color-surface-success);
45
+ }
46
+ }
47
+
34
48
  input,
35
49
  &:is(input) {
36
50
  @apply min-w-0 leading-6;