@vsn-ux/gaia-styles 0.6.9 → 0.6.10

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 (10) hide show
  1. package/dist/all-10pt.css +14 -5
  2. package/dist/all-no-reset-10pt.css +14 -5
  3. package/dist/all-no-reset.css +14 -5
  4. package/dist/all.css +14 -5
  5. package/dist/components/text-area.css +14 -5
  6. package/dist/components.css +14 -5
  7. package/dist/docs/Input.md +16 -0
  8. package/dist/docs/TextArea.md +20 -0
  9. package/package.json +1 -1
  10. package/src/styles/components/text-area.css +12 -2
package/dist/all-10pt.css CHANGED
@@ -3906,21 +3906,30 @@
3906
3906
  transition-timing-function: var(--ga-easing-standard);
3907
3907
  &:hover {
3908
3908
  border-color: var(--ga-color-border-action-hover);
3909
+ &:not(:placeholder-shown) {
3910
+ background-color: var(--ga-color-surface-action-hover-2);
3911
+ }
3909
3912
  }
3910
3913
  &:disabled {
3911
3914
  border-color: var(--ga-color-border-disabled);
3912
3915
  background-color: var(--ga-color-surface-disabled);
3913
3916
  color: var(--ga-color-text-disable-selected);
3917
+ &:not(:placeholder-shown) {
3918
+ border-color: var(--ga-color-surface-disable-selected);
3919
+ background-color: var(--ga-color-surface-disable-selected);
3920
+ color: var(--ga-color-text-on-action);
3921
+ }
3914
3922
  }
3915
3923
  &:focus {
3916
- border-color: var(--ga-color-border-focus);
3917
- outline-style: var(--tw-outline-style);
3918
- outline-width: 1px;
3919
- outline-color: var(--ga-color-border-focus);
3924
+ &:not(.ga-text-area--invalid) {
3925
+ border-color: var(--ga-color-border-focus);
3926
+ outline-style: var(--tw-outline-style);
3927
+ outline-width: 1px;
3928
+ outline-color: var(--ga-color-border-focus);
3929
+ }
3920
3930
  }
3921
3931
  &.ga-text-area--invalid {
3922
3932
  border-color: var(--ga-color-border-error);
3923
- background-color: var(--ga-color-surface-error);
3924
3933
  outline-style: var(--tw-outline-style);
3925
3934
  outline-width: 1px;
3926
3935
  outline-color: var(--ga-color-border-error);
package/dist/all-no-reset-10pt.css CHANGED
@@ -3753,21 +3753,30 @@
3753
3753
  transition-timing-function: var(--ga-easing-standard);
3754
3754
  &:hover {
3755
3755
  border-color: var(--ga-color-border-action-hover);
3756
+ &:not(:placeholder-shown) {
3757
+ background-color: var(--ga-color-surface-action-hover-2);
3758
+ }
3756
3759
  }
3757
3760
  &:disabled {
3758
3761
  border-color: var(--ga-color-border-disabled);
3759
3762
  background-color: var(--ga-color-surface-disabled);
3760
3763
  color: var(--ga-color-text-disable-selected);
3764
+ &:not(:placeholder-shown) {
3765
+ border-color: var(--ga-color-surface-disable-selected);
3766
+ background-color: var(--ga-color-surface-disable-selected);
3767
+ color: var(--ga-color-text-on-action);
3768
+ }
3761
3769
  }
3762
3770
  &:focus {
3763
- border-color: var(--ga-color-border-focus);
3764
- outline-style: var(--tw-outline-style);
3765
- outline-width: 1px;
3766
- outline-color: var(--ga-color-border-focus);
3771
+ &:not(.ga-text-area--invalid) {
3772
+ border-color: var(--ga-color-border-focus);
3773
+ outline-style: var(--tw-outline-style);
3774
+ outline-width: 1px;
3775
+ outline-color: var(--ga-color-border-focus);
3776
+ }
3767
3777
  }
3768
3778
  &.ga-text-area--invalid {
3769
3779
  border-color: var(--ga-color-border-error);
3770
- background-color: var(--ga-color-surface-error);
3771
3780
  outline-style: var(--tw-outline-style);
3772
3781
  outline-width: 1px;
3773
3782
  outline-color: var(--ga-color-border-error);
package/dist/all-no-reset.css CHANGED
@@ -3753,21 +3753,30 @@
3753
3753
  transition-timing-function: var(--ga-easing-standard);
3754
3754
  &:hover {
3755
3755
  border-color: var(--ga-color-border-action-hover);
3756
+ &:not(:placeholder-shown) {
3757
+ background-color: var(--ga-color-surface-action-hover-2);
3758
+ }
3756
3759
  }
3757
3760
  &:disabled {
3758
3761
  border-color: var(--ga-color-border-disabled);
3759
3762
  background-color: var(--ga-color-surface-disabled);
3760
3763
  color: var(--ga-color-text-disable-selected);
3764
+ &:not(:placeholder-shown) {
3765
+ border-color: var(--ga-color-surface-disable-selected);
3766
+ background-color: var(--ga-color-surface-disable-selected);
3767
+ color: var(--ga-color-text-on-action);
3768
+ }
3761
3769
  }
3762
3770
  &:focus {
3763
- border-color: var(--ga-color-border-focus);
3764
- outline-style: var(--tw-outline-style);
3765
- outline-width: 1px;
3766
- outline-color: var(--ga-color-border-focus);
3771
+ &:not(.ga-text-area--invalid) {
3772
+ border-color: var(--ga-color-border-focus);
3773
+ outline-style: var(--tw-outline-style);
3774
+ outline-width: 1px;
3775
+ outline-color: var(--ga-color-border-focus);
3776
+ }
3767
3777
  }
3768
3778
  &.ga-text-area--invalid {
3769
3779
  border-color: var(--ga-color-border-error);
3770
- background-color: var(--ga-color-surface-error);
3771
3780
  outline-style: var(--tw-outline-style);
3772
3781
  outline-width: 1px;
3773
3782
  outline-color: var(--ga-color-border-error);
package/dist/all.css CHANGED
@@ -3906,21 +3906,30 @@
3906
3906
  transition-timing-function: var(--ga-easing-standard);
3907
3907
  &:hover {
3908
3908
  border-color: var(--ga-color-border-action-hover);
3909
+ &:not(:placeholder-shown) {
3910
+ background-color: var(--ga-color-surface-action-hover-2);
3911
+ }
3909
3912
  }
3910
3913
  &:disabled {
3911
3914
  border-color: var(--ga-color-border-disabled);
3912
3915
  background-color: var(--ga-color-surface-disabled);
3913
3916
  color: var(--ga-color-text-disable-selected);
3917
+ &:not(:placeholder-shown) {
3918
+ border-color: var(--ga-color-surface-disable-selected);
3919
+ background-color: var(--ga-color-surface-disable-selected);
3920
+ color: var(--ga-color-text-on-action);
3921
+ }
3914
3922
  }
3915
3923
  &:focus {
3916
- border-color: var(--ga-color-border-focus);
3917
- outline-style: var(--tw-outline-style);
3918
- outline-width: 1px;
3919
- outline-color: var(--ga-color-border-focus);
3924
+ &:not(.ga-text-area--invalid) {
3925
+ border-color: var(--ga-color-border-focus);
3926
+ outline-style: var(--tw-outline-style);
3927
+ outline-width: 1px;
3928
+ outline-color: var(--ga-color-border-focus);
3929
+ }
3920
3930
  }
3921
3931
  &.ga-text-area--invalid {
3922
3932
  border-color: var(--ga-color-border-error);
3923
- background-color: var(--ga-color-surface-error);
3924
3933
  outline-style: var(--tw-outline-style);
3925
3934
  outline-width: 1px;
3926
3935
  outline-color: var(--ga-color-border-error);
package/dist/components/text-area.css CHANGED
@@ -29,21 +29,30 @@ textarea.ga-text-area {
29
29
  transition-timing-function: var(--ga-easing-standard);
30
30
  &:hover {
31
31
  border-color: var(--ga-color-border-action-hover);
32
+ &:not(:placeholder-shown) {
33
+ background-color: var(--ga-color-surface-action-hover-2);
34
+ }
32
35
  }
33
36
  &:disabled {
34
37
  border-color: var(--ga-color-border-disabled);
35
38
  background-color: var(--ga-color-surface-disabled);
36
39
  color: var(--ga-color-text-disable-selected);
40
+ &:not(:placeholder-shown) {
41
+ border-color: var(--ga-color-surface-disable-selected);
42
+ background-color: var(--ga-color-surface-disable-selected);
43
+ color: var(--ga-color-text-on-action);
44
+ }
37
45
  }
38
46
  &:focus {
39
- border-color: var(--ga-color-border-focus);
40
- outline-style: var(--tw-outline-style);
41
- outline-width: 1px;
42
- outline-color: var(--ga-color-border-focus);
47
+ &:not(.ga-text-area--invalid) {
48
+ border-color: var(--ga-color-border-focus);
49
+ outline-style: var(--tw-outline-style);
50
+ outline-width: 1px;
51
+ outline-color: var(--ga-color-border-focus);
52
+ }
43
53
  }
44
54
  &.ga-text-area--invalid {
45
55
  border-color: var(--ga-color-border-error);
46
- background-color: var(--ga-color-surface-error);
47
56
  outline-style: var(--tw-outline-style);
48
57
  outline-width: 1px;
49
58
  outline-color: var(--ga-color-border-error);
package/dist/components.css CHANGED
@@ -3408,21 +3408,30 @@ textarea.ga-text-area {
3408
3408
  transition-timing-function: var(--ga-easing-standard);
3409
3409
  &:hover {
3410
3410
  border-color: var(--ga-color-border-action-hover);
3411
+ &:not(:placeholder-shown) {
3412
+ background-color: var(--ga-color-surface-action-hover-2);
3413
+ }
3411
3414
  }
3412
3415
  &:disabled {
3413
3416
  border-color: var(--ga-color-border-disabled);
3414
3417
  background-color: var(--ga-color-surface-disabled);
3415
3418
  color: var(--ga-color-text-disable-selected);
3419
+ &:not(:placeholder-shown) {
3420
+ border-color: var(--ga-color-surface-disable-selected);
3421
+ background-color: var(--ga-color-surface-disable-selected);
3422
+ color: var(--ga-color-text-on-action);
3423
+ }
3416
3424
  }
3417
3425
  &:focus {
3418
- border-color: var(--ga-color-border-focus);
3419
- outline-style: var(--tw-outline-style);
3420
- outline-width: 1px;
3421
- outline-color: var(--ga-color-border-focus);
3426
+ &:not(.ga-text-area--invalid) {
3427
+ border-color: var(--ga-color-border-focus);
3428
+ outline-style: var(--tw-outline-style);
3429
+ outline-width: 1px;
3430
+ outline-color: var(--ga-color-border-focus);
3431
+ }
3422
3432
  }
3423
3433
  &.ga-text-area--invalid {
3424
3434
  border-color: var(--ga-color-border-error);
3425
- background-color: var(--ga-color-surface-error);
3426
3435
  outline-style: var(--tw-outline-style);
3427
3436
  outline-width: 1px;
3428
3437
  outline-color: var(--ga-color-border-error);
package/dist/docs/Input.md CHANGED
@@ -55,6 +55,15 @@ ga-input [--invalid|--success]
55
55
  </div>
56
56
  ```
57
57
 
58
+ ### Hover
59
+
60
+ ```html
61
+ <div class="ga-input"><input type="text" placeholder="Placeholder" /></div>
62
+ <div class="ga-input">
63
+ <input type="text" placeholder="Placeholder" readonly="" value="Filled" />
64
+ </div>
65
+ ```
66
+
58
67
  ### Disabled
59
68
 
60
69
  ```html
@@ -73,6 +82,10 @@ ga-input [--invalid|--success]
73
82
  <input type="text" placeholder="Placeholder" />
74
83
  <!-- icon: triangle-alert, size=24 -->
75
84
  </div>
85
+ <div class="ga-input ga-input--invalid">
86
+ <input type="text" placeholder="Placeholder" readonly="" value="Filled" />
87
+ <!-- icon: triangle-alert, size=24 -->
88
+ </div>
76
89
  ```
77
90
 
78
91
  ### Success
@@ -81,4 +94,7 @@ ga-input [--invalid|--success]
81
94
  <div class="ga-input ga-input--success">
82
95
  <input type="text" placeholder="Placeholder" />
83
96
  </div>
97
+ <div class="ga-input ga-input--success">
98
+ <input type="text" placeholder="Placeholder" readonly="" value="Filled" />
99
+ </div>
84
100
  ```
package/dist/docs/TextArea.md CHANGED
@@ -29,6 +29,15 @@ ga-text-area [--invalid]
29
29
  <textarea class="ga-text-area" rows="5" placeholder="Placeholder"></textarea>
30
30
  ```
31
31
 
32
+ ### Hover
33
+
34
+ ```html
35
+ <textarea class="ga-text-area" rows="5" placeholder="Placeholder"></textarea>
36
+ <textarea class="ga-text-area" rows="5" placeholder="Placeholder" readonly="">
37
+ Filled</textarea
38
+ >
39
+ ```
40
+
32
41
  ### Disabled
33
42
 
34
43
  ```html
@@ -38,6 +47,9 @@ ga-text-area [--invalid]
38
47
  placeholder="Placeholder"
39
48
  disabled=""
40
49
  ></textarea>
50
+ <textarea class="ga-text-area" rows="5" placeholder="Placeholder" disabled="">
51
+ Filled</textarea
52
+ >
41
53
  ```
42
54
 
43
55
  ### Invalid
@@ -48,4 +60,12 @@ ga-text-area [--invalid]
48
60
  rows="5"
49
61
  placeholder="Placeholder"
50
62
  ></textarea>
63
+ <textarea
64
+ class="ga-text-area ga-text-area--invalid"
65
+ rows="5"
66
+ placeholder="Placeholder"
67
+ readonly=""
68
+ >
69
+ Filled</textarea
70
+ >
51
71
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.6.9",
3
+ "version": "0.6.10",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {
package/src/styles/components/text-area.css CHANGED
@@ -3,18 +3,28 @@ textarea.ga-text-area {
3
3
 
4
4
  &:hover {
5
5
  @apply border-(--ga-color-border-action-hover);
6
+
7
+ &:not(:placeholder-shown) {
8
+ @apply bg-(--ga-color-surface-action-hover-2);
9
+ }
6
10
  }
7
11
 
8
12
  &:disabled {
9
13
  @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
14
+
15
+ &:not(:placeholder-shown) {
16
+ @apply border-(--ga-color-surface-disable-selected) bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);
17
+ }
10
18
  }
11
19
 
12
20
  &:focus {
13
- @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
21
+ &:not(.ga-text-area--invalid) {
22
+ @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
23
+ }
14
24
  }
15
25
 
16
26
  &.ga-text-area--invalid {
17
- @apply border-(--ga-color-border-error) bg-(--ga-color-surface-error) outline outline-(--ga-color-border-error);
27
+ @apply border-(--ga-color-border-error) outline outline-(--ga-color-border-error);
18
28
 
19
29
  &:not(:placeholder-shown) {
20
30
  @apply bg-(--ga-color-surface-error);