@vsn-ux/gaia-styles 0.3.0 → 0.3.1

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.
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
@@ -578,6 +578,8 @@
578
578
  margin-inline: auto;
579
579
  margin-block: calc(0.4rem * 5);
580
580
  display: inline-flex;
581
+ min-width: calc(0.4rem * 30);
582
+ justify-content: center;
581
583
  }
582
584
  .ga-dropdown__item-label {
583
585
  min-width: calc(0.4rem * 0);
@@ -686,7 +688,7 @@
686
688
  color: var(--ga-color-text-disable-selected);
687
689
  }
688
690
  &:has(input:focus), &:is(input:focus) {
689
- &:not(.ga-input--invalid) {
691
+ &:not(.ga-input--invalid, .ga-input--success) {
690
692
  border-color: var(--ga-color-border-focus);
691
693
  outline-style: var(--tw-outline-style);
692
694
  outline-width: 1px;
@@ -702,6 +704,15 @@
702
704
  background-color: var(--ga-color-surface-error);
703
705
  }
704
706
  }
707
+ &.ga-input--success {
708
+ border-color: var(--ga-color-border-success);
709
+ outline-style: var(--tw-outline-style);
710
+ outline-width: 1px;
711
+ outline-color: var(--ga-color-border-success);
712
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
713
+ background-color: var(--ga-color-surface-success);
714
+ }
715
+ }
705
716
  input, &:is(input) {
706
717
  min-width: calc(0.4rem * 0);
707
718
  --tw-leading: calc(0.4rem * 6);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
@@ -578,6 +578,8 @@
578
578
  margin-inline: auto;
579
579
  margin-block: calc(0.25rem * 5);
580
580
  display: inline-flex;
581
+ min-width: calc(0.25rem * 30);
582
+ justify-content: center;
581
583
  }
582
584
  .ga-dropdown__item-label {
583
585
  min-width: calc(0.25rem * 0);
@@ -686,7 +688,7 @@
686
688
  color: var(--ga-color-text-disable-selected);
687
689
  }
688
690
  &:has(input:focus), &:is(input:focus) {
689
- &:not(.ga-input--invalid) {
691
+ &:not(.ga-input--invalid, .ga-input--success) {
690
692
  border-color: var(--ga-color-border-focus);
691
693
  outline-style: var(--tw-outline-style);
692
694
  outline-width: 1px;
@@ -702,6 +704,15 @@
702
704
  background-color: var(--ga-color-surface-error);
703
705
  }
704
706
  }
707
+ &.ga-input--success {
708
+ border-color: var(--ga-color-border-success);
709
+ outline-style: var(--tw-outline-style);
710
+ outline-width: 1px;
711
+ outline-color: var(--ga-color-border-success);
712
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
713
+ background-color: var(--ga-color-surface-success);
714
+ }
715
+ }
705
716
  input, &:is(input) {
706
717
  min-width: calc(0.25rem * 0);
707
718
  --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.14 | MIT License | https://tailwindcss.com */
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
@@ -721,6 +721,8 @@
721
721
  margin-inline: auto;
722
722
  margin-block: calc(0.25rem * 5);
723
723
  display: inline-flex;
724
+ min-width: calc(0.25rem * 30);
725
+ justify-content: center;
724
726
  }
725
727
  .ga-dropdown__item-label {
726
728
  min-width: calc(0.25rem * 0);
@@ -829,7 +831,7 @@
829
831
  color: var(--ga-color-text-disable-selected);
830
832
  }
831
833
  &:has(input:focus), &:is(input:focus) {
832
- &:not(.ga-input--invalid) {
834
+ &:not(.ga-input--invalid, .ga-input--success) {
833
835
  border-color: var(--ga-color-border-focus);
834
836
  outline-style: var(--tw-outline-style);
835
837
  outline-width: 1px;
@@ -845,6 +847,15 @@
845
847
  background-color: var(--ga-color-surface-error);
846
848
  }
847
849
  }
850
+ &.ga-input--success {
851
+ border-color: var(--ga-color-border-success);
852
+ outline-style: var(--tw-outline-style);
853
+ outline-width: 1px;
854
+ outline-color: var(--ga-color-border-success);
855
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
856
+ background-color: var(--ga-color-surface-success);
857
+ }
858
+ }
848
859
  input, &:is(input) {
849
860
  min-width: calc(0.25rem * 0);
850
861
  --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.14 | 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;
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-avatar {
3
3
  display: inline-flex;
4
4
  height: calc(0.25rem * 10);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-badge {
3
3
  display: inline-block;
4
4
  border-radius: calc(infinity * 1px);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-button {
3
3
  display: inline-flex;
4
4
  height: calc(0.25rem * 10);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-card {
3
3
  border-radius: var(--ga-radius);
4
4
  border-style: var(--tw-border-style);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-checkbox {
3
3
  position: relative;
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | 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);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-form-field {
3
3
  display: flex;
4
4
  flex-direction: column;
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-input {
3
3
  display: flex;
4
4
  height: calc(0.25rem * 10);
@@ -28,7 +28,7 @@
28
28
  color: var(--ga-color-text-disable-selected);
29
29
  }
30
30
  &:has(input:focus), &:is(input:focus) {
31
- &:not(.ga-input--invalid) {
31
+ &:not(.ga-input--invalid, .ga-input--success) {
32
32
  border-color: var(--ga-color-border-focus);
33
33
  outline-style: var(--tw-outline-style);
34
34
  outline-width: 1px;
@@ -44,6 +44,15 @@
44
44
  background-color: var(--ga-color-surface-error);
45
45
  }
46
46
  }
47
+ &.ga-input--success {
48
+ border-color: var(--ga-color-border-success);
49
+ outline-style: var(--tw-outline-style);
50
+ outline-width: 1px;
51
+ outline-color: var(--ga-color-border-success);
52
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
53
+ background-color: var(--ga-color-surface-success);
54
+ }
55
+ }
47
56
  input, &:is(input) {
48
57
  min-width: calc(0.25rem * 0);
49
58
  --tw-leading: calc(0.25rem * 6);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-menu {
3
3
  display: flex;
4
4
  max-height: calc(0.25rem * 81);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-notification {
3
3
  display: inline-flex;
4
4
  flex-direction: row;
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-radio-group {
3
3
  display: inline-flex;
4
4
  flex-direction: column;
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-segmented-control {
3
3
  display: inline-flex;
4
4
  height: calc(0.25rem * 10);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-native-select {
3
3
  position: relative;
4
4
  select {
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-tag {
3
3
  box-sizing: content-box;
4
4
  display: inline-flex;
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-text-area {
3
3
  display: flex;
4
4
  width: calc(0.25rem * 50);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-tooltip {
3
3
  position: relative;
4
4
  max-width: calc(0.25rem * 100);
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
2
2
  .ga-avatar {
3
3
  display: inline-flex;
4
4
  height: calc(0.25rem * 10);
@@ -396,6 +396,8 @@
396
396
  margin-inline: auto;
397
397
  margin-block: calc(0.25rem * 5);
398
398
  display: inline-flex;
399
+ min-width: calc(0.25rem * 30);
400
+ justify-content: center;
399
401
  }
400
402
  .ga-dropdown__item-label {
401
403
  min-width: calc(0.25rem * 0);
@@ -504,7 +506,7 @@
504
506
  color: var(--ga-color-text-disable-selected);
505
507
  }
506
508
  &:has(input:focus), &:is(input:focus) {
507
- &:not(.ga-input--invalid) {
509
+ &:not(.ga-input--invalid, .ga-input--success) {
508
510
  border-color: var(--ga-color-border-focus);
509
511
  outline-style: var(--tw-outline-style);
510
512
  outline-width: 1px;
@@ -520,6 +522,15 @@
520
522
  background-color: var(--ga-color-surface-error);
521
523
  }
522
524
  }
525
+ &.ga-input--success {
526
+ border-color: var(--ga-color-border-success);
527
+ outline-style: var(--tw-outline-style);
528
+ outline-width: 1px;
529
+ outline-color: var(--ga-color-border-success);
530
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
531
+ background-color: var(--ga-color-surface-success);
532
+ }
533
+ }
523
534
  input, &:is(input) {
524
535
  min-width: calc(0.25rem * 0);
525
536
  --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.1",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "storybook dev -p 6006",
@@ -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 {
@@ -17,7 +17,7 @@
17
17
 
18
18
  &:has(input:focus),
19
19
  &:is(input:focus) {
20
- &:not(.ga-input--invalid) {
20
+ &:not(.ga-input--invalid, .ga-input--success) {
21
21
  @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
22
22
  }
23
23
  }
@@ -31,6 +31,15 @@
31
31
  }
32
32
  }
33
33
 
34
+ &.ga-input--success {
35
+ @apply border-(--ga-color-border-success) outline outline-(--ga-color-border-success);
36
+
37
+ &:has(input:not(:placeholder-shown)),
38
+ &:is(input:not(:placeholder-shown)) {
39
+ @apply bg-(--ga-color-surface-success);
40
+ }
41
+ }
42
+
34
43
  input,
35
44
  &:is(input) {
36
45
  @apply min-w-0 leading-6;