@helpwave/hightide 0.6.5 → 0.6.7

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.
@@ -145,6 +145,7 @@
145
145
  --color-border: var(--color-gray-200);
146
146
  --color-divider: var(--color-gray-100);
147
147
  --color-focus: var(--color-primary);
148
+ --color-outline-variant: var(--color-gray-200);
148
149
  --font-space: 'Space Grotesk', sans-serif;
149
150
  }
150
151
  }
@@ -318,12 +319,12 @@
318
319
  .inset-0 {
319
320
  inset: calc(var(--spacing) * 0);
320
321
  }
322
+ .-top-1 {
323
+ top: calc(var(--spacing) * -1);
324
+ }
321
325
  .top-0 {
322
326
  top: calc(var(--spacing) * 0);
323
327
  }
324
- .top-0\.5 {
325
- top: calc(var(--spacing) * 0.5);
326
- }
327
328
  .top-1\/2 {
328
329
  top: calc(1/2 * 100%);
329
330
  }
@@ -333,12 +334,12 @@
333
334
  .top-full {
334
335
  top: 100%;
335
336
  }
337
+ .-right-1 {
338
+ right: calc(var(--spacing) * -1);
339
+ }
336
340
  .right-0 {
337
341
  right: calc(var(--spacing) * 0);
338
342
  }
339
- .right-0\.5 {
340
- right: calc(var(--spacing) * 0.5);
341
- }
342
343
  .right-1 {
343
344
  right: calc(var(--spacing) * 1);
344
345
  }
@@ -360,6 +361,9 @@
360
361
  .left-0 {
361
362
  left: calc(var(--spacing) * 0);
362
363
  }
364
+ .left-1\/1 {
365
+ left: calc(1/1 * 100%);
366
+ }
363
367
  .left-1\/2 {
364
368
  left: calc(1/2 * 100%);
365
369
  }
@@ -393,9 +397,6 @@
393
397
  .z-\[10\] {
394
398
  z-index: 10;
395
399
  }
396
- .z-\[300\] {
397
- z-index: 300;
398
- }
399
400
  .container {
400
401
  width: 100%;
401
402
  @media (width >= 40rem) {
@@ -456,6 +457,9 @@
456
457
  .mb-\[6px\] {
457
458
  margin-bottom: 6px;
458
459
  }
460
+ .-ml-1 {
461
+ margin-left: calc(var(--spacing) * -1);
462
+ }
459
463
  .ml-0\.5 {
460
464
  margin-left: calc(var(--spacing) * 0.5);
461
465
  }
@@ -487,6 +491,11 @@
487
491
  flex-direction: row;
488
492
  column-gap: calc(var(--spacing) * 6);
489
493
  }
494
+ .flex-row-8 {
495
+ display: flex;
496
+ flex-direction: row;
497
+ column-gap: calc(var(--spacing) * 8);
498
+ }
490
499
  .flex-col-0 {
491
500
  display: flex;
492
501
  flex-direction: column;
@@ -567,6 +576,12 @@
567
576
  min-width: calc(var(--spacing) * 6);
568
577
  max-width: calc(var(--spacing) * 6);
569
578
  }
579
+ .expandable-content-h-39 {
580
+ height: calc(var(--spacing) * 39);
581
+ &[data-expanded] {
582
+ max-height: calc(var(--spacing) * 39);
583
+ }
584
+ }
570
585
  .expandable-content-h-40 {
571
586
  height: calc(var(--spacing) * 40);
572
587
  &[data-expanded] {
@@ -654,6 +669,9 @@
654
669
  .max-h-71 {
655
670
  max-height: calc(var(--spacing) * 71);
656
671
  }
672
+ .max-h-128 {
673
+ max-height: calc(var(--spacing) * 128);
674
+ }
657
675
  .\!min-h-10 {
658
676
  min-height: calc(var(--spacing) * 10) !important;
659
677
  }
@@ -702,12 +720,6 @@
702
720
  .w-24 {
703
721
  width: calc(var(--spacing) * 24);
704
722
  }
705
- .w-40 {
706
- width: calc(var(--spacing) * 40);
707
- }
708
- .w-50 {
709
- width: calc(var(--spacing) * 50);
710
- }
711
723
  .w-64 {
712
724
  width: calc(var(--spacing) * 64);
713
725
  }
@@ -723,9 +735,6 @@
723
735
  .w-\[70\%\] {
724
736
  width: 70%;
725
737
  }
726
- .w-\[400px\] {
727
- width: 400px;
728
- }
729
738
  .w-fit {
730
739
  width: fit-content;
731
740
  }
@@ -762,9 +771,6 @@
762
771
  .max-w-128 {
763
772
  max-width: calc(var(--spacing) * 128);
764
773
  }
765
- .max-w-full {
766
- max-width: 100%;
767
- }
768
774
  .min-w-0 {
769
775
  min-width: calc(var(--spacing) * 0);
770
776
  }
@@ -774,6 +780,9 @@
774
780
  .min-w-20 {
775
781
  min-width: calc(var(--spacing) * 20);
776
782
  }
783
+ .min-w-24 {
784
+ min-width: calc(var(--spacing) * 24);
785
+ }
777
786
  .min-w-26 {
778
787
  min-width: calc(var(--spacing) * 26);
779
788
  }
@@ -783,6 +792,12 @@
783
792
  .min-w-56 {
784
793
  min-width: calc(var(--spacing) * 56);
785
794
  }
795
+ .min-w-64 {
796
+ min-width: calc(var(--spacing) * 64);
797
+ }
798
+ .min-w-72 {
799
+ min-width: calc(var(--spacing) * 72);
800
+ }
786
801
  .min-w-80 {
787
802
  min-width: calc(var(--spacing) * 80);
788
803
  }
@@ -809,6 +824,10 @@
809
824
  --tw-translate-x: calc(1/2 * 100%);
810
825
  translate: var(--tw-translate-x) var(--tw-translate-y);
811
826
  }
827
+ .translate-x-4 {
828
+ --tw-translate-x: calc(var(--spacing) * 4);
829
+ translate: var(--tw-translate-x) var(--tw-translate-y);
830
+ }
812
831
  .-translate-y-1\/2 {
813
832
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
814
833
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -823,12 +842,6 @@
823
842
  .animate-bounce {
824
843
  animation: var(--animate-bounce);
825
844
  }
826
- .animate-pop-in {
827
- animation: pop-in var(--animation-duration-in, 250ms) ease-in-out forwards;
828
- }
829
- .animate-pop-out {
830
- animation: pop-out var(--animation-duration-out, 170ms) ease-in-out forwards;
831
- }
832
845
  .animate-pulse {
833
846
  animation: var(--animate-pulse);
834
847
  }
@@ -957,6 +970,12 @@
957
970
  .justify-start {
958
971
  justify-content: flex-start;
959
972
  }
973
+ .gap-1 {
974
+ gap: calc(var(--spacing) * 1);
975
+ }
976
+ .gap-2 {
977
+ gap: calc(var(--spacing) * 2);
978
+ }
960
979
  .gap-4 {
961
980
  gap: calc(var(--spacing) * 4);
962
981
  }
@@ -1046,9 +1065,6 @@
1046
1065
  --tw-border-style: dashed;
1047
1066
  border-style: dashed;
1048
1067
  }
1049
- .border-divider {
1050
- border-color: var(--color-divider);
1051
- }
1052
1068
  .border-divider\/50 {
1053
1069
  border-color: color-mix(in srgb, #E6E6E6 50%, transparent);
1054
1070
  @supports (color: color-mix(in lab, red, red)) {
@@ -1116,9 +1132,6 @@
1116
1132
  .bg-negative {
1117
1133
  background-color: var(--color-negative);
1118
1134
  }
1119
- .bg-overlay-shadow {
1120
- background-color: var(--color-overlay-shadow);
1121
- }
1122
1135
  .bg-positive {
1123
1136
  background-color: var(--color-positive);
1124
1137
  }
@@ -1167,9 +1180,6 @@
1167
1180
  .bg-surface {
1168
1181
  background-color: var(--color-surface);
1169
1182
  }
1170
- .bg-surface-variant {
1171
- background-color: var(--color-surface-variant);
1172
- }
1173
1183
  .bg-text-image-dark-text {
1174
1184
  background-color: var(--color-text-image-dark-text);
1175
1185
  }
@@ -1320,12 +1330,6 @@
1320
1330
  .text-center {
1321
1331
  text-align: center;
1322
1332
  }
1323
- .text-left {
1324
- text-align: left;
1325
- }
1326
- .text-right {
1327
- text-align: right;
1328
- }
1329
1333
  .typography-headline-lg {
1330
1334
  font-family: var(--font-space);
1331
1335
  font-size: var(--text-4xl);
@@ -1444,10 +1448,6 @@
1444
1448
  --tw-font-weight: var(--font-weight-bold);
1445
1449
  font-weight: var(--font-weight-bold);
1446
1450
  }
1447
- .font-normal {
1448
- --tw-font-weight: var(--font-weight-normal);
1449
- font-weight: var(--font-weight-normal);
1450
- }
1451
1451
  .font-semibold {
1452
1452
  --tw-font-weight: var(--font-weight-semibold);
1453
1453
  font-weight: var(--font-weight-semibold);
@@ -1455,9 +1455,6 @@
1455
1455
  .text-nowrap {
1456
1456
  text-wrap: nowrap;
1457
1457
  }
1458
- .overflow-ellipsis {
1459
- text-overflow: ellipsis;
1460
- }
1461
1458
  .text-ellipsis {
1462
1459
  text-overflow: ellipsis;
1463
1460
  }
@@ -1488,9 +1485,6 @@
1488
1485
  .text-on-background {
1489
1486
  color: var(--color-on-background);
1490
1487
  }
1491
- .text-on-positive {
1492
- color: var(--color-on-positive);
1493
- }
1494
1488
  .text-on-primary {
1495
1489
  color: var(--color-on-primary);
1496
1490
  }
@@ -1564,21 +1558,10 @@
1564
1558
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1565
1559
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1566
1560
  }
1567
- .shadow-xl {
1568
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1569
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1570
- }
1571
1561
  .ring {
1572
1562
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1573
1563
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1574
1564
  }
1575
- .shadow-around-lg {
1576
- --shadow-right: 10px 0 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
1577
- --shadow-left: -10px 0 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
1578
- --shadow-top: 0 -10px 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
1579
- --shadow-bottom: 0 10px 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
1580
- box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
1581
- }
1582
1565
  .shadow-around-md {
1583
1566
  --shadow-right: 5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
1584
1567
  --shadow-left: -5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
@@ -1589,9 +1572,6 @@
1589
1572
  .shadow-side {
1590
1573
  box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
1591
1574
  }
1592
- .shadow-strong {
1593
- --tw-shadow-color: rgba(0, 0, 0, 0.05);
1594
- }
1595
1575
  .focus-style-default {
1596
1576
  &:focus-visible:not(.focus-style-none) {
1597
1577
  transition: outline-offset var(--animation-duration-in, 250ms);
@@ -1622,6 +1602,9 @@
1622
1602
  outline-style: var(--tw-outline-style);
1623
1603
  outline-width: 1px;
1624
1604
  }
1605
+ .outline-offset-0 {
1606
+ outline-offset: 0px;
1607
+ }
1625
1608
  .outline-primary {
1626
1609
  outline-color: var(--color-primary);
1627
1610
  }
@@ -1683,6 +1666,10 @@
1683
1666
  .delay-25 {
1684
1667
  transition-delay: 25ms;
1685
1668
  }
1669
+ .duration-\(--animation-duration-in\) {
1670
+ --tw-duration: var(--animation-duration-in);
1671
+ transition-duration: var(--animation-duration-in);
1672
+ }
1686
1673
  .duration-200 {
1687
1674
  --tw-duration: 200ms;
1688
1675
  transition-duration: 200ms;
@@ -1968,12 +1955,28 @@
1968
1955
  }
1969
1956
  }
1970
1957
  }
1958
+ .focus\:border-primary {
1959
+ &:focus {
1960
+ border-color: var(--color-primary);
1961
+ }
1962
+ }
1971
1963
  .focus\:ring-0 {
1972
1964
  &:focus {
1973
1965
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1974
1966
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1975
1967
  }
1976
1968
  }
1969
+ .focus\:outline-1 {
1970
+ &:focus {
1971
+ outline-style: var(--tw-outline-style);
1972
+ outline-width: 1px;
1973
+ }
1974
+ }
1975
+ .focus\:outline-offset-1 {
1976
+ &:focus {
1977
+ outline-offset: 1px;
1978
+ }
1979
+ }
1977
1980
  .focus-visible\:ring-0 {
1978
1981
  &:focus-visible {
1979
1982
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2042,18 +2045,6 @@
2042
2045
  font-weight: var(--font-weight-normal);
2043
2046
  }
2044
2047
  }
2045
- .motion-safe\:duration-100 {
2046
- @media (prefers-reduced-motion: no-preference) {
2047
- --tw-duration: 100ms;
2048
- transition-duration: 100ms;
2049
- }
2050
- }
2051
- .motion-reduce\:duration-0 {
2052
- @media (prefers-reduced-motion: reduce) {
2053
- --tw-duration: 0ms;
2054
- transition-duration: 0ms;
2055
- }
2056
- }
2057
2048
  .desktop\:block {
2058
2049
  @media (width >= 64rem) {
2059
2050
  display: block;
@@ -3041,19 +3032,14 @@
3041
3032
  }
3042
3033
  }
3043
3034
  @layer components {
3044
- [data-name="table-container"] {
3045
- display: flex;
3046
- flex-direction: column;
3047
- row-gap: calc(var(--spacing) * 4);
3048
- }
3049
- [data-name="table-scroll-wrapper"] {
3035
+ .table-container {
3050
3036
  display: flex;
3051
3037
  flex-direction: column;
3052
3038
  row-gap: calc(var(--spacing) * 0);
3053
3039
  width: 100%;
3054
3040
  overflow: auto;
3055
3041
  }
3056
- [data-name="table"] {
3042
+ .table {
3057
3043
  table-layout: fixed;
3058
3044
  border-collapse: separate;
3059
3045
  --tw-border-spacing-x: calc(var(--spacing) * 0);
@@ -3063,9 +3049,9 @@
3063
3049
  background-color: var(--color-table-background);
3064
3050
  color: var(--color-table-text);
3065
3051
  }
3066
- [data-name="table-filler-cell"] {
3052
+ .table-filler-cell {
3067
3053
  display: flex;
3068
- height: calc(var(--spacing) * 4);
3054
+ height: calc(var(--spacing) * 6);
3069
3055
  width: calc(1/2 * 100%);
3070
3056
  flex-direction: row;
3071
3057
  align-items: center;
@@ -3073,17 +3059,14 @@
3073
3059
  font-weight: var(--font-weight-bold);
3074
3060
  color: var(--color-disabled);
3075
3061
  }
3076
- [data-name="table-cell"] {
3062
+ .table-default-cell {
3077
3063
  display: block;
3078
3064
  max-width: 100%;
3079
3065
  overflow: hidden;
3080
3066
  white-space: nowrap;
3081
3067
  text-overflow: ellipsis;
3082
3068
  }
3083
- [data-name="table-header-cell"] {
3084
- position: relative;
3085
- --tw-font-weight: var(--font-weight-bold);
3086
- font-weight: var(--font-weight-bold);
3069
+ .table-header-cell {
3087
3070
  padding-inline: calc(var(--spacing) * 3);
3088
3071
  padding-block: calc(var(--spacing) * 2.5);
3089
3072
  &:first-child {
@@ -3109,23 +3092,29 @@
3109
3092
  border-top-right-radius: var(--radius-lg);
3110
3093
  }
3111
3094
  background-color: var(--color-table-header-background);
3095
+ --tw-font-weight: var(--font-weight-bold);
3096
+ font-weight: var(--font-weight-bold);
3112
3097
  color: var(--color-description);
3098
+ &[data-sticky] {
3099
+ position: sticky;
3100
+ top: calc(var(--spacing) * 0);
3101
+ }
3113
3102
  }
3114
- [data-name="table-body-row"] {
3103
+ .table-body-row {
3115
3104
  &:hover {
3116
3105
  @media (hover: hover) {
3117
3106
  background-color: var(--color-table-row-hover-background);
3118
3107
  }
3119
3108
  }
3120
3109
  }
3121
- [data-name="table-body-filler-row"] {
3110
+ .table-body-filler-row {
3122
3111
  &:hover {
3123
3112
  @media (hover: hover) {
3124
3113
  cursor: not-allowed;
3125
3114
  }
3126
3115
  }
3127
3116
  }
3128
- [data-name="table-body-cell"], [data-name="table-body-filler-cell"] {
3117
+ .table-body-cell, .table-body-filler-cell {
3129
3118
  padding-inline: calc(var(--spacing) * 3);
3130
3119
  padding-block: calc(var(--spacing) * 2.5);
3131
3120
  &:first-child {
@@ -3155,7 +3144,7 @@
3155
3144
  }
3156
3145
  }
3157
3146
  }
3158
- [data-name="table-resize-indicator"] {
3147
+ .table-resize-indicator {
3159
3148
  position: absolute;
3160
3149
  top: calc(1/2 * 100%);
3161
3150
  right: calc(var(--spacing) * 1);
@@ -3166,9 +3155,6 @@
3166
3155
  border-radius: 0.25rem;
3167
3156
  background-color: var(--color-primary);
3168
3157
  cursor: col-resize;
3169
- touch-action: none;
3170
- -webkit-user-select: none;
3171
- user-select: none;
3172
3158
  opacity: 0%;
3173
3159
  transition-property: opacity;
3174
3160
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3188,7 +3174,7 @@
3188
3174
  }
3189
3175
  }
3190
3176
  }
3191
- [data-name="table-body-row"]:last-child > [data-name="table-body-cell"] {
3177
+ .table-body-row:last-child > .table-body-cell {
3192
3178
  &:first-child {
3193
3179
  border-bottom-left-radius: var(--radius-lg);
3194
3180
  }
@@ -4020,7 +4006,7 @@
4020
4006
  }
4021
4007
  }
4022
4008
  @layer components {
4023
- [data-name="tooltip"] {
4009
+ .tooltip {
4024
4010
  position: absolute;
4025
4011
  border-radius: 0.25rem;
4026
4012
  padding-inline: calc(var(--spacing) * 2);
@@ -4030,16 +4016,19 @@
4030
4016
  --shadow-top: 0 -5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
4031
4017
  --shadow-bottom: 0 5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
4032
4018
  box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
4019
+ overflow: hidden;
4020
+ text-overflow: ellipsis;
4021
+ white-space: nowrap;
4033
4022
  background-color: var(--color-tooltip-background);
4034
4023
  font-size: var(--text-xs);
4035
4024
  line-height: var(--tw-leading, var(--text-xs--line-height));
4036
4025
  --tw-font-weight: var(--font-weight-semibold);
4037
4026
  font-weight: var(--font-weight-semibold);
4038
4027
  color: var(--color-tooltip-text);
4039
- &[data-state="opening"] {
4028
+ &[data-state="opening"][data-animated] {
4040
4029
  animation: fade-in calc(var(--animation-duration-in, 250ms) * 2) ease-in-out 1 forwards;
4041
4030
  }
4042
- &[data-state="closing"] {
4031
+ &[data-state="closing"][data-animated] {
4043
4032
  animation: fade-in var(--animation-duration-out, 170ms) ease-in-out 1 reverse forwards;
4044
4033
  }
4045
4034
  &[data-state="closed"] {
@@ -4249,7 +4238,7 @@
4249
4238
  }
4250
4239
  }
4251
4240
  @layer components {
4252
- [data-name="dialog-container"] {
4241
+ .dialog-container {
4253
4242
  position: fixed;
4254
4243
  inset: calc(var(--spacing) * 0);
4255
4244
  height: 100vh;
@@ -4259,12 +4248,13 @@
4259
4248
  touch-action: none;
4260
4249
  }
4261
4250
  }
4262
- [data-name="dialog-background"] {
4251
+ .dialog-background {
4263
4252
  position: fixed;
4264
4253
  inset: calc(var(--spacing) * 0);
4265
4254
  height: 100vh;
4266
4255
  width: 100vw;
4267
4256
  background-color: var(--color-overlay-shadow);
4257
+ animation-fill-mode: forwards;
4268
4258
  &[data-state="opening"] {
4269
4259
  animation-duration: var(--animation-duration-in);
4270
4260
  }
@@ -4276,7 +4266,7 @@
4276
4266
  animation-name: fade-in;
4277
4267
  }
4278
4268
  }
4279
- [data-name="dialog-content"] {
4269
+ .dialog-content {
4280
4270
  display: flex;
4281
4271
  flex-direction: column;
4282
4272
  row-gap: calc(var(--spacing) * 2);
@@ -4713,6 +4703,39 @@
4713
4703
  }
4714
4704
  }
4715
4705
  }
4706
+ .pop-up {
4707
+ border-radius: var(--radius-md);
4708
+ border-style: var(--tw-border-style);
4709
+ border-width: 2px;
4710
+ border-color: var(--color-outline-variant);
4711
+ background-color: var(--coloring-solid-color,var(--coloring-color));
4712
+ color: var(--coloring-solid-text,var(--coloring-on-color));
4713
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4714
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4715
+ --coloring-color: initial;
4716
+ --coloring-on-color: initial;
4717
+ --coloring-hover: initial;
4718
+ --coloring-text: initial;
4719
+ --coloring-text-hover: initial;
4720
+ --coloring-outline: initial;
4721
+ --coloring-outline-hover: initial;
4722
+ --coloring-tonal: initial;
4723
+ --coloring-tonal-background: initial;
4724
+ --coloring-tonal-text: initial;
4725
+ --coloring-tonal-hover: initial;
4726
+ --coloring-color: var(--color-surface);
4727
+ --coloring-on-color: var(--color-on-surface);
4728
+ --coloring-hover: var(--color-surface-hover);
4729
+ &:focus-within {
4730
+ border-color: var(--color-primary);
4731
+ }
4732
+ &[data-positioned] {
4733
+ animation: pop-in var(--animation-duration-in, 250ms) ease-in-out forwards;
4734
+ }
4735
+ &:not([data-positioned]) {
4736
+ opacity: 0%;
4737
+ }
4738
+ }
4716
4739
  @layer components {
4717
4740
  * {
4718
4741
  list-style-type: none;
@@ -1,14 +1,15 @@
1
1
  @layer components {
2
- [data-name="dialog-container"] {
3
- @apply fixed inset-0 h-screen w-screen;
2
+ .dialog-container {
4
3
  @apply fixed inset-0 h-screen w-screen;
5
4
  &:not([data-open]) {
6
5
  @apply touch-none pointer-events-none;
7
6
  }
8
7
  }
9
8
 
10
- [data-name="dialog-background"] {
9
+ .dialog-background {
11
10
  @apply fixed inset-0 h-screen w-screen bg-overlay-shadow;
11
+ animation-fill-mode: forwards;
12
+
12
13
  &[data-state="opening"] {
13
14
  animation-duration: var(--animation-duration-in);
14
15
  }
@@ -24,7 +25,7 @@
24
25
  }
25
26
  }
26
27
 
27
- [data-name="dialog-content"] {
28
+ .dialog-content {
28
29
  @apply flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)];
29
30
  animation-timing-function: ease-out;
30
31
  animation-fill-mode: forwards;
@@ -20,4 +20,5 @@
20
20
  @import "./day-picker.css";
21
21
  @import "./time-picker.css";
22
22
  @import "./property.css";
23
+ @import "./pop-up.css";
23
24
  @import "./general.css";
@@ -0,0 +1,11 @@
1
+ .pop-up {
2
+ @apply surface coloring-solid rounded-md border-2 border-outline-variant shadow-md;
3
+ @apply focus-within:border-primary;
4
+
5
+ &[data-positioned] {
6
+ @apply animate-pop-in;
7
+ }
8
+ &:not([data-positioned]) {
9
+ @apply opacity-0;
10
+ }
11
+ }
@@ -1,54 +1,50 @@
1
1
  @layer components {
2
- [data-name="table-container"] {
3
- @apply flex-col-4;
4
- }
5
-
6
- [data-name="table-scroll-wrapper"] {
2
+ .table-container {
7
3
  @apply flex-col-0 w-full overflow-auto;
8
4
  }
9
5
 
10
- [data-name="table"] {
6
+ .table {
11
7
  @apply table-fixed border-separate border-spacing-0 rounded-lg;
12
8
  @apply bg-table-background text-table-text;
13
9
  }
14
10
 
15
- [data-name="table-filler-cell"] {
16
- @apply flex flex-row items-center w-1/2 h-4 text-disabled font-bold;
11
+ .table-filler-cell {
12
+ @apply flex flex-row items-center w-1/2 h-6 text-disabled font-bold;
17
13
  }
18
14
 
19
- [data-name="table-cell"] {
15
+ .table-default-cell {
20
16
  @apply block max-w-full overflow-ellipsis truncate;
21
17
  }
22
18
 
23
- [data-name="table-header-row"] {
24
- }
25
-
26
- [data-name="table-header-cell"] {
27
- @apply relative font-bold;
19
+ .table-header-cell {
28
20
  @apply px-3 first:pl-6 last:pr-6 py-2.5;
29
21
  @apply border-y-1 first:border-l-1 last:border-r-1;
30
22
  @apply first:rounded-tl-lg last:rounded-tr-lg;
31
- @apply bg-table-header-background text-description;
23
+ @apply bg-table-header-background text-description font-bold;
24
+
25
+ &[data-sticky] {
26
+ @apply sticky top-0;
27
+ }
32
28
  }
33
29
 
34
- [data-name="table-body-row"] {
30
+ .table-body-row {
35
31
  @apply hover:bg-table-row-hover-background;
36
32
  }
37
33
 
38
- [data-name="table-body-filler-row"] {
34
+ .table-body-filler-row {
39
35
  @apply hover:cursor-not-allowed;
40
36
  }
41
37
 
42
- [data-name="table-body-cell"], [data-name="table-body-filler-cell"] {
38
+ .table-body-cell, .table-body-filler-cell {
43
39
  @apply px-3 first:pl-6 last:pr-6 py-2.5;
44
40
  @apply border-b-1 first:border-l-1 last:border-r-1;
45
41
  @apply [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
46
42
  }
47
43
 
48
- [data-name="table-resize-indicator"] {
44
+ .table-resize-indicator {
49
45
  @apply absolute right-1 top-1/2 -translate-y-1/2;
50
46
  @apply h-6 w-2 rounded bg-primary;
51
- @apply cursor-col-resize select-none touch-none;
47
+ @apply cursor-col-resize;
52
48
  @apply opacity-0 transition-opacity;
53
49
 
54
50
  &[data-active] {
@@ -64,7 +60,7 @@
64
60
  }
65
61
  }
66
62
 
67
- [data-name="table-body-row"]:last-child > [data-name="table-body-cell"] {
63
+ .table-body-row:last-child > .table-body-cell {
68
64
  @apply first:rounded-bl-lg last:rounded-br-lg;
69
65
  }
70
66
  }