@vsn-ux/gaia-styles 0.5.8 → 0.5.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.
package/dist/all-10pt.css CHANGED
@@ -741,6 +741,11 @@
741
741
  }
742
742
  .ga-calendar__navigation-button {
743
743
  cursor: pointer;
744
+ &:hover {
745
+ @media (hover: hover) {
746
+ color: var(--ga-color-icon-action-hover);
747
+ }
748
+ }
744
749
  }
745
750
  .ga-calendar__week-row {
746
751
  display: flex;
@@ -865,6 +870,9 @@
865
870
  }
866
871
  &.ga-calendar__day--disabled {
867
872
  cursor: not-allowed;
873
+ border-radius: calc(
874
+ var(--ga-radius-sharp) * var(--ga-base-scaling-factor, 1)
875
+ );
868
876
  background-color: var(--ga-color-surface-disabled);
869
877
  color: var(--ga-color-text-disable-selected);
870
878
  }
@@ -933,7 +941,6 @@
933
941
  grid-template-columns: repeat(7, minmax(0, 1fr));
934
942
  align-items: center;
935
943
  justify-items: center;
936
- gap: calc(0.4rem * 4);
937
944
  }
938
945
  .ga-calendar__weekday {
939
946
  font-size: calc(
@@ -1070,6 +1077,19 @@
1070
1077
  margin-top: calc(0.4rem * 2);
1071
1078
  }
1072
1079
  }
1080
+ .ga-datepicker-toggle {
1081
+ cursor: pointer;
1082
+ &:hover {
1083
+ @media (hover: hover) {
1084
+ &:not(*:disabled) {
1085
+ color: var(--ga-color-icon-action-hover);
1086
+ }
1087
+ }
1088
+ }
1089
+ &:disabled {
1090
+ cursor: not-allowed;
1091
+ }
1092
+ }
1073
1093
  .ga-dropdown {
1074
1094
  display: flex;
1075
1095
  max-height: calc(0.4rem * 81);
@@ -594,6 +594,11 @@
594
594
  }
595
595
  .ga-calendar__navigation-button {
596
596
  cursor: pointer;
597
+ &:hover {
598
+ @media (hover: hover) {
599
+ color: var(--ga-color-icon-action-hover);
600
+ }
601
+ }
597
602
  }
598
603
  .ga-calendar__week-row {
599
604
  display: flex;
@@ -718,6 +723,9 @@
718
723
  }
719
724
  &.ga-calendar__day--disabled {
720
725
  cursor: not-allowed;
726
+ border-radius: calc(
727
+ var(--ga-radius-sharp) * var(--ga-base-scaling-factor, 1)
728
+ );
721
729
  background-color: var(--ga-color-surface-disabled);
722
730
  color: var(--ga-color-text-disable-selected);
723
731
  }
@@ -786,7 +794,6 @@
786
794
  grid-template-columns: repeat(7, minmax(0, 1fr));
787
795
  align-items: center;
788
796
  justify-items: center;
789
- gap: calc(0.4rem * 4);
790
797
  }
791
798
  .ga-calendar__weekday {
792
799
  font-size: calc(
@@ -923,6 +930,19 @@
923
930
  margin-top: calc(0.4rem * 2);
924
931
  }
925
932
  }
933
+ .ga-datepicker-toggle {
934
+ cursor: pointer;
935
+ &:hover {
936
+ @media (hover: hover) {
937
+ &:not(*:disabled) {
938
+ color: var(--ga-color-icon-action-hover);
939
+ }
940
+ }
941
+ }
942
+ &:disabled {
943
+ cursor: not-allowed;
944
+ }
945
+ }
926
946
  .ga-dropdown {
927
947
  display: flex;
928
948
  max-height: calc(0.4rem * 81);
@@ -594,6 +594,11 @@
594
594
  }
595
595
  .ga-calendar__navigation-button {
596
596
  cursor: pointer;
597
+ &:hover {
598
+ @media (hover: hover) {
599
+ color: var(--ga-color-icon-action-hover);
600
+ }
601
+ }
597
602
  }
598
603
  .ga-calendar__week-row {
599
604
  display: flex;
@@ -718,6 +723,9 @@
718
723
  }
719
724
  &.ga-calendar__day--disabled {
720
725
  cursor: not-allowed;
726
+ border-radius: calc(
727
+ var(--ga-radius-sharp) * var(--ga-base-scaling-factor, 1)
728
+ );
721
729
  background-color: var(--ga-color-surface-disabled);
722
730
  color: var(--ga-color-text-disable-selected);
723
731
  }
@@ -786,7 +794,6 @@
786
794
  grid-template-columns: repeat(7, minmax(0, 1fr));
787
795
  align-items: center;
788
796
  justify-items: center;
789
- gap: calc(0.25rem * 4);
790
797
  }
791
798
  .ga-calendar__weekday {
792
799
  font-size: calc(
@@ -923,6 +930,19 @@
923
930
  margin-top: calc(0.25rem * 2);
924
931
  }
925
932
  }
933
+ .ga-datepicker-toggle {
934
+ cursor: pointer;
935
+ &:hover {
936
+ @media (hover: hover) {
937
+ &:not(*:disabled) {
938
+ color: var(--ga-color-icon-action-hover);
939
+ }
940
+ }
941
+ }
942
+ &:disabled {
943
+ cursor: not-allowed;
944
+ }
945
+ }
926
946
  .ga-dropdown {
927
947
  display: flex;
928
948
  max-height: calc(0.25rem * 81);
package/dist/all.css CHANGED
@@ -741,6 +741,11 @@
741
741
  }
742
742
  .ga-calendar__navigation-button {
743
743
  cursor: pointer;
744
+ &:hover {
745
+ @media (hover: hover) {
746
+ color: var(--ga-color-icon-action-hover);
747
+ }
748
+ }
744
749
  }
745
750
  .ga-calendar__week-row {
746
751
  display: flex;
@@ -865,6 +870,9 @@
865
870
  }
866
871
  &.ga-calendar__day--disabled {
867
872
  cursor: not-allowed;
873
+ border-radius: calc(
874
+ var(--ga-radius-sharp) * var(--ga-base-scaling-factor, 1)
875
+ );
868
876
  background-color: var(--ga-color-surface-disabled);
869
877
  color: var(--ga-color-text-disable-selected);
870
878
  }
@@ -933,7 +941,6 @@
933
941
  grid-template-columns: repeat(7, minmax(0, 1fr));
934
942
  align-items: center;
935
943
  justify-items: center;
936
- gap: calc(0.25rem * 4);
937
944
  }
938
945
  .ga-calendar__weekday {
939
946
  font-size: calc(
@@ -1070,6 +1077,19 @@
1070
1077
  margin-top: calc(0.25rem * 2);
1071
1078
  }
1072
1079
  }
1080
+ .ga-datepicker-toggle {
1081
+ cursor: pointer;
1082
+ &:hover {
1083
+ @media (hover: hover) {
1084
+ &:not(*:disabled) {
1085
+ color: var(--ga-color-icon-action-hover);
1086
+ }
1087
+ }
1088
+ }
1089
+ &:disabled {
1090
+ cursor: not-allowed;
1091
+ }
1092
+ }
1073
1093
  .ga-dropdown {
1074
1094
  display: flex;
1075
1095
  max-height: calc(0.25rem * 81);
@@ -49,6 +49,11 @@
49
49
  }
50
50
  .ga-calendar__navigation-button {
51
51
  cursor: pointer;
52
+ &:hover {
53
+ @media (hover: hover) {
54
+ color: var(--ga-color-icon-action-hover);
55
+ }
56
+ }
52
57
  }
53
58
  .ga-calendar__week-row {
54
59
  display: flex;
@@ -173,6 +178,9 @@
173
178
  }
174
179
  &.ga-calendar__day--disabled {
175
180
  cursor: not-allowed;
181
+ border-radius: calc(
182
+ var(--ga-radius-sharp) * var(--ga-base-scaling-factor, 1)
183
+ );
176
184
  background-color: var(--ga-color-surface-disabled);
177
185
  color: var(--ga-color-text-disable-selected);
178
186
  }
@@ -241,7 +249,6 @@
241
249
  grid-template-columns: repeat(7, minmax(0, 1fr));
242
250
  align-items: center;
243
251
  justify-items: center;
244
- gap: calc(0.25rem * 4);
245
252
  }
246
253
  .ga-calendar__weekday {
247
254
  font-size: calc(
@@ -10,6 +10,19 @@
10
10
  margin-top: calc(0.25rem * 2);
11
11
  }
12
12
  }
13
+ .ga-datepicker-toggle {
14
+ cursor: pointer;
15
+ &:hover {
16
+ @media (hover: hover) {
17
+ &:not(*:disabled) {
18
+ color: var(--ga-color-icon-action-hover);
19
+ }
20
+ }
21
+ }
22
+ &:disabled {
23
+ cursor: not-allowed;
24
+ }
25
+ }
13
26
  @property --tw-border-style {
14
27
  syntax: "*";
15
28
  inherits: false;
@@ -375,6 +375,11 @@
375
375
  }
376
376
  .ga-calendar__navigation-button {
377
377
  cursor: pointer;
378
+ &:hover {
379
+ @media (hover: hover) {
380
+ color: var(--ga-color-icon-action-hover);
381
+ }
382
+ }
378
383
  }
379
384
  .ga-calendar__week-row {
380
385
  display: flex;
@@ -499,6 +504,9 @@
499
504
  }
500
505
  &.ga-calendar__day--disabled {
501
506
  cursor: not-allowed;
507
+ border-radius: calc(
508
+ var(--ga-radius-sharp) * var(--ga-base-scaling-factor, 1)
509
+ );
502
510
  background-color: var(--ga-color-surface-disabled);
503
511
  color: var(--ga-color-text-disable-selected);
504
512
  }
@@ -567,7 +575,6 @@
567
575
  grid-template-columns: repeat(7, minmax(0, 1fr));
568
576
  align-items: center;
569
577
  justify-items: center;
570
- gap: calc(0.25rem * 4);
571
578
  }
572
579
  .ga-calendar__weekday {
573
580
  font-size: calc(
@@ -704,6 +711,19 @@
704
711
  margin-top: calc(0.25rem * 2);
705
712
  }
706
713
  }
714
+ .ga-datepicker-toggle {
715
+ cursor: pointer;
716
+ &:hover {
717
+ @media (hover: hover) {
718
+ &:not(*:disabled) {
719
+ color: var(--ga-color-icon-action-hover);
720
+ }
721
+ }
722
+ }
723
+ &:disabled {
724
+ cursor: not-allowed;
725
+ }
726
+ }
707
727
  .ga-dropdown {
708
728
  display: flex;
709
729
  max-height: calc(0.25rem * 81);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.5.8",
3
+ "version": "0.5.10",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "storybook dev -p 6006",
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  .ga-calendar__navigation-button {
25
- @apply cursor-pointer;
25
+ @apply cursor-pointer hover:text-(--ga-color-icon-action-hover);
26
26
  }
27
27
 
28
28
  .ga-calendar__week-row {
@@ -84,7 +84,7 @@
84
84
  }
85
85
 
86
86
  &.ga-calendar__day--disabled {
87
- @apply cursor-not-allowed bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
87
+ @apply rounded-sharp cursor-not-allowed bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
88
88
  }
89
89
 
90
90
  &.ga-calendar__day--weekend {
@@ -130,7 +130,7 @@
130
130
  }
131
131
 
132
132
  .ga-calendar__weekdays {
133
- @apply mt-2 grid h-6 grid-cols-7 items-center justify-items-center gap-4;
133
+ @apply mt-2 grid h-6 grid-cols-7 items-center justify-items-center;
134
134
  }
135
135
 
136
136
  .ga-calendar__weekday {
@@ -5,3 +5,7 @@
5
5
  @apply mt-2;
6
6
  }
7
7
  }
8
+
9
+ .ga-datepicker-toggle {
10
+ @apply cursor-pointer hover:not-disabled:text-(--ga-color-icon-action-hover) disabled:cursor-not-allowed;
11
+ }