@vsn-ux/gaia-styles 0.6.8 → 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 (13) hide show
  1. package/dist/all-10pt.css +23 -8
  2. package/dist/all-no-reset-10pt.css +23 -8
  3. package/dist/all-no-reset.css +23 -8
  4. package/dist/all.css +23 -8
  5. package/dist/components/side-navigation.css +9 -3
  6. package/dist/components/text-area.css +14 -5
  7. package/dist/components.css +23 -8
  8. package/dist/docs/Input.md +16 -0
  9. package/dist/docs/SideNavigation.md +28 -2
  10. package/dist/docs/TextArea.md +20 -0
  11. package/package.json +1 -1
  12. package/src/styles/components/side-navigation.css +11 -3
  13. 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);
@@ -4657,13 +4666,19 @@
4657
4666
  }
4658
4667
  }
4659
4668
  .ga-side-navigation__item--level-2 {
4660
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4669
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4661
4670
  }
4662
4671
  .ga-side-navigation__item--level-3 {
4663
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4672
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4664
4673
  }
4665
4674
  .ga-side-navigation__item--level-4 {
4666
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4675
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4676
+ }
4677
+ .ga-side-navigation__item--level-5 {
4678
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4679
+ }
4680
+ .ga-side-navigation__item--level-6 {
4681
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4667
4682
  }
4668
4683
  .ga-side-navigation__item-icon {
4669
4684
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
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);
@@ -4504,13 +4513,19 @@
4504
4513
  }
4505
4514
  }
4506
4515
  .ga-side-navigation__item--level-2 {
4507
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4516
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4508
4517
  }
4509
4518
  .ga-side-navigation__item--level-3 {
4510
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4519
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4511
4520
  }
4512
4521
  .ga-side-navigation__item--level-4 {
4513
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4522
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4523
+ }
4524
+ .ga-side-navigation__item--level-5 {
4525
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4526
+ }
4527
+ .ga-side-navigation__item--level-6 {
4528
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4514
4529
  }
4515
4530
  .ga-side-navigation__item-icon {
4516
4531
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
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);
@@ -4504,13 +4513,19 @@
4504
4513
  }
4505
4514
  }
4506
4515
  .ga-side-navigation__item--level-2 {
4507
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4516
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4508
4517
  }
4509
4518
  .ga-side-navigation__item--level-3 {
4510
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4519
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4511
4520
  }
4512
4521
  .ga-side-navigation__item--level-4 {
4513
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4522
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4523
+ }
4524
+ .ga-side-navigation__item--level-5 {
4525
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4526
+ }
4527
+ .ga-side-navigation__item--level-6 {
4528
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4514
4529
  }
4515
4530
  .ga-side-navigation__item-icon {
4516
4531
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
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);
@@ -4657,13 +4666,19 @@
4657
4666
  }
4658
4667
  }
4659
4668
  .ga-side-navigation__item--level-2 {
4660
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4669
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4661
4670
  }
4662
4671
  .ga-side-navigation__item--level-3 {
4663
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4672
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4664
4673
  }
4665
4674
  .ga-side-navigation__item--level-4 {
4666
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4675
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4676
+ }
4677
+ .ga-side-navigation__item--level-5 {
4678
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4679
+ }
4680
+ .ga-side-navigation__item--level-6 {
4681
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4667
4682
  }
4668
4683
  .ga-side-navigation__item-icon {
4669
4684
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
package/dist/components/side-navigation.css CHANGED
@@ -311,13 +311,19 @@
311
311
  }
312
312
  }
313
313
  .ga-side-navigation__item--level-2 {
314
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
314
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
315
315
  }
316
316
  .ga-side-navigation__item--level-3 {
317
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
317
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
318
318
  }
319
319
  .ga-side-navigation__item--level-4 {
320
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
320
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
321
+ }
322
+ .ga-side-navigation__item--level-5 {
323
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
324
+ }
325
+ .ga-side-navigation__item--level-6 {
326
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
321
327
  }
322
328
  .ga-side-navigation__item-icon {
323
329
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
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);
@@ -4159,13 +4168,19 @@ textarea.ga-text-area {
4159
4168
  }
4160
4169
  }
4161
4170
  .ga-side-navigation__item--level-2 {
4162
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4171
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4163
4172
  }
4164
4173
  .ga-side-navigation__item--level-3 {
4165
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4174
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4166
4175
  }
4167
4176
  .ga-side-navigation__item--level-4 {
4168
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4177
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4178
+ }
4179
+ .ga-side-navigation__item--level-5 {
4180
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4181
+ }
4182
+ .ga-side-navigation__item--level-6 {
4183
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4169
4184
  }
4170
4185
  .ga-side-navigation__item-icon {
4171
4186
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
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/SideNavigation.md CHANGED
@@ -115,6 +115,8 @@ ga-side-navigation
115
115
  - `ga-side-navigation__item--level-2` - Second-level tree item
116
116
  - `ga-side-navigation__item--level-3` - Third-level tree item
117
117
  - `ga-side-navigation__item--level-4` - Fourth-level tree item
118
+ - `ga-side-navigation__item--level-5` - Fifth-level tree item (not recommended to go beyond level 4 for usability reasons, but supported by styles)
119
+ - `ga-side-navigation__item--level-6` - Sixth-level tree item (not recommended to go beyond level 4 for usability reasons, but supported by styles)
118
120
 
119
121
  ## Examples
120
122
 
@@ -328,7 +330,7 @@ ga-side-navigation
328
330
  <!-- icon: chevron-down, size=16 -->
329
331
  </span>
330
332
  <div class="ga-side-navigation__item-content">
331
- <div class="ga-side-navigation__item-label">Accounts</div>
333
+ <div class="ga-side-navigation__item-label">Settings</div>
332
334
  </div>
333
335
  </div>
334
336
  <div
@@ -350,11 +352,35 @@ ga-side-navigation
350
352
  </div>
351
353
  </div>
352
354
  <div class="ga-side-navigation__item ga-side-navigation__item--level-3">
353
- <span class="ga-side-navigation__item-icon"></span>
355
+ <span class="ga-side-navigation__item-icon">
356
+ <!-- icon: chevron-down, size=16 -->
357
+ </span>
354
358
  <div class="ga-side-navigation__item-content">
355
359
  <div class="ga-side-navigation__item-label">Account balances</div>
356
360
  </div>
357
361
  </div>
362
+ <div class="ga-side-navigation__item ga-side-navigation__item--level-4">
363
+ <span class="ga-side-navigation__item-icon">
364
+ <!-- icon: chevron-down, size=16 -->
365
+ </span>
366
+ <div class="ga-side-navigation__item-content">
367
+ <div class="ga-side-navigation__item-label">Level 4 label</div>
368
+ </div>
369
+ </div>
370
+ <div class="ga-side-navigation__item ga-side-navigation__item--level-5">
371
+ <span class="ga-side-navigation__item-icon">
372
+ <!-- icon: chevron-down, size=16 -->
373
+ </span>
374
+ <div class="ga-side-navigation__item-content">
375
+ <div class="ga-side-navigation__item-label">Level 5 label</div>
376
+ </div>
377
+ </div>
378
+ <div class="ga-side-navigation__item ga-side-navigation__item--level-6">
379
+ <span class="ga-side-navigation__item-icon"></span>
380
+ <div class="ga-side-navigation__item-content">
381
+ <div class="ga-side-navigation__item-label">Level 6 label</div>
382
+ </div>
383
+ </div>
358
384
  <div class="ga-side-navigation__item ga-side-navigation__item--level-2">
359
385
  <span class="ga-side-navigation__item-icon">
360
386
  <!-- icon: chevron-right, size=16 -->
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.8",
3
+ "version": "0.6.10",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {
package/src/styles/components/side-navigation.css CHANGED
@@ -161,15 +161,23 @@
161
161
  }
162
162
 
163
163
  .ga-side-navigation__item--level-2 {
164
- @apply pl-8;
164
+ @apply pl-10;
165
165
  }
166
166
 
167
167
  .ga-side-navigation__item--level-3 {
168
- @apply pl-14;
168
+ @apply pl-16;
169
169
  }
170
170
 
171
171
  .ga-side-navigation__item--level-4 {
172
- @apply pl-20;
172
+ @apply pl-22;
173
+ }
174
+
175
+ .ga-side-navigation__item--level-5 {
176
+ @apply pl-28;
177
+ }
178
+
179
+ .ga-side-navigation__item--level-6 {
180
+ @apply pl-34;
173
181
  }
174
182
 
175
183
  .ga-side-navigation__item-icon {
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);