@parto-system-design/ui 1.1.1 → 1.1.2

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/index.css CHANGED
@@ -13,6 +13,9 @@
13
13
  .invisible {
14
14
  visibility: hidden;
15
15
  }
16
+ .visible {
17
+ visibility: visible;
18
+ }
16
19
  .sr-only {
17
20
  position: absolute;
18
21
  width: 1px;
@@ -145,6 +148,9 @@
145
148
  .hidden {
146
149
  display: none;
147
150
  }
151
+ .inline {
152
+ display: inline;
153
+ }
148
154
  .inline-block {
149
155
  display: inline-block;
150
156
  }
@@ -260,9 +266,21 @@
260
266
  .w-\(--sidebar-width\) {
261
267
  width: var(--sidebar-width);
262
268
  }
269
+ .w-1\/2 {
270
+ width: calc(1/2 * 100%);
271
+ }
272
+ .w-1\/3 {
273
+ width: calc(1/3 * 100%);
274
+ }
275
+ .w-1\/4 {
276
+ width: calc(1/4 * 100%);
277
+ }
263
278
  .w-3\/4 {
264
279
  width: calc(3/4 * 100%);
265
280
  }
281
+ .w-\[--radix-popover-trigger-width\] {
282
+ width: --radix-popover-trigger-width;
283
+ }
266
284
  .w-\[1px\] {
267
285
  width: 1px;
268
286
  }
@@ -314,6 +332,9 @@
314
332
  .max-w-max {
315
333
  max-width: max-content;
316
334
  }
335
+ .min-w-\[1\.25rem\] {
336
+ min-width: 1.25rem;
337
+ }
317
338
  .min-w-\[8rem\] {
318
339
  min-width: 8rem;
319
340
  }
@@ -446,6 +467,9 @@
446
467
  .grid-cols-1 {
447
468
  grid-template-columns: repeat(1, minmax(0, 1fr));
448
469
  }
470
+ .grid-cols-2 {
471
+ grid-template-columns: repeat(2, minmax(0, 1fr));
472
+ }
449
473
  .flex-col {
450
474
  flex-direction: column;
451
475
  }
@@ -491,9 +515,25 @@
491
515
  .justify-center {
492
516
  justify-content: center;
493
517
  }
518
+ .justify-end {
519
+ justify-content: flex-end;
520
+ }
494
521
  .justify-start {
495
522
  justify-content: flex-start;
496
523
  }
524
+ .divide-x {
525
+ :where(& > :not(:last-child)) {
526
+ --tw-divide-x-reverse: 0;
527
+ border-inline-style: var(--tw-border-style);
528
+ border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
529
+ border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
530
+ }
531
+ }
532
+ .divide-border {
533
+ :where(& > :not(:last-child)) {
534
+ border-color: hsl(var(--border-default));
535
+ }
536
+ }
497
537
  .self-stretch {
498
538
  align-self: stretch;
499
539
  }
@@ -573,6 +613,10 @@
573
613
  border-style: var(--tw-border-style);
574
614
  border-width: 0px;
575
615
  }
616
+ .border-2 {
617
+ border-style: var(--tw-border-style);
618
+ border-width: 2px;
619
+ }
576
620
  .border-y {
577
621
  border-block-style: var(--tw-border-style);
578
622
  border-block-width: 1px;
@@ -640,6 +684,15 @@
640
684
  .border {
641
685
  border-color: hsl(var(--border-default));
642
686
  }
687
+ .border-\[hsl\(var\(--sentiment-negative\)\/0\.3\)\] {
688
+ border-color: hsl(var(--sentiment-negative)/0.3);
689
+ }
690
+ .border-\[hsl\(var\(--sentiment-neutral\)\/0\.3\)\] {
691
+ border-color: hsl(var(--sentiment-neutral)/0.3);
692
+ }
693
+ .border-\[hsl\(var\(--sentiment-positive\)\/0\.3\)\] {
694
+ border-color: hsl(var(--sentiment-positive)/0.3);
695
+ }
643
696
  .border-border {
644
697
  border-color: hsl(var(--border-default));
645
698
  }
@@ -748,6 +801,33 @@
748
801
  .bg {
749
802
  background-color: hsl(var(--background-default));
750
803
  }
804
+ .bg-\[hsl\(var\(--sentiment-negative\)\)\] {
805
+ background-color: hsl(var(--sentiment-negative));
806
+ }
807
+ .bg-\[hsl\(var\(--sentiment-negative\)\/0\.1\)\] {
808
+ background-color: hsl(var(--sentiment-negative)/0.1);
809
+ }
810
+ .bg-\[hsl\(var\(--sentiment-negative\)\/0\.12\)\] {
811
+ background-color: hsl(var(--sentiment-negative)/0.12);
812
+ }
813
+ .bg-\[hsl\(var\(--sentiment-neutral\)\)\] {
814
+ background-color: hsl(var(--sentiment-neutral));
815
+ }
816
+ .bg-\[hsl\(var\(--sentiment-neutral\)\/0\.1\)\] {
817
+ background-color: hsl(var(--sentiment-neutral)/0.1);
818
+ }
819
+ .bg-\[hsl\(var\(--sentiment-neutral\)\/0\.12\)\] {
820
+ background-color: hsl(var(--sentiment-neutral)/0.12);
821
+ }
822
+ .bg-\[hsl\(var\(--sentiment-positive\)\)\] {
823
+ background-color: hsl(var(--sentiment-positive));
824
+ }
825
+ .bg-\[hsl\(var\(--sentiment-positive\)\/0\.1\)\] {
826
+ background-color: hsl(var(--sentiment-positive)/0.1);
827
+ }
828
+ .bg-\[hsl\(var\(--sentiment-positive\)\/0\.12\)\] {
829
+ background-color: hsl(var(--sentiment-positive)/0.12);
830
+ }
751
831
  .bg-accent {
752
832
  background-color: hsl(var(--background-surface-200));
753
833
  }
@@ -793,6 +873,9 @@
793
873
  .bg-brand-600 {
794
874
  background-color: hsl(var(--brand-600));
795
875
  }
876
+ .bg-card {
877
+ background-color: hsl(var(--background-surface-100));
878
+ }
796
879
  .bg-destructive {
797
880
  background-color: hsl(var(--destructive-default));
798
881
  }
@@ -930,6 +1013,9 @@
930
1013
  .text-center {
931
1014
  text-align: center;
932
1015
  }
1016
+ .text-end {
1017
+ text-align: end;
1018
+ }
933
1019
  .text-left {
934
1020
  text-align: left;
935
1021
  }
@@ -942,20 +1028,69 @@
942
1028
  .align-middle {
943
1029
  vertical-align: middle;
944
1030
  }
945
- .text-\[0\.8rem\] {
946
- font-size: 0.8rem;
1031
+ .text-2xl {
1032
+ font-size: 1.5rem;
1033
+ line-height: var(--tw-leading, 2rem);
1034
+ }
1035
+ .text-2xs {
1036
+ font-size: 0.625rem;
1037
+ line-height: var(--tw-leading, 1rem);
1038
+ }
1039
+ .text-3xl {
1040
+ font-size: 1.875rem;
1041
+ line-height: var(--tw-leading, 2.375rem);
1042
+ }
1043
+ .text-4xl {
1044
+ font-size: 2.25rem;
1045
+ line-height: var(--tw-leading, 2.75rem);
1046
+ }
1047
+ .text-base {
1048
+ font-size: 1rem;
1049
+ line-height: var(--tw-leading, 1.625rem);
947
1050
  }
948
- .text-\[10px\] {
949
- font-size: 10px;
1051
+ .text-lg {
1052
+ font-size: 1.125rem;
1053
+ line-height: var(--tw-leading, 1.75rem);
1054
+ }
1055
+ .text-sm {
1056
+ font-size: 0.875rem;
1057
+ line-height: var(--tw-leading, 1.375rem);
1058
+ }
1059
+ .text-xl {
1060
+ font-size: 1.25rem;
1061
+ line-height: var(--tw-leading, 1.875rem);
1062
+ }
1063
+ .text-xs {
1064
+ font-size: 0.75rem;
1065
+ line-height: var(--tw-leading, 1.125rem);
1066
+ }
1067
+ .text-\[0\.6em\] {
1068
+ font-size: 0.6em;
950
1069
  }
951
1070
  .leading-none {
952
1071
  --tw-leading: 1;
953
1072
  line-height: 1;
954
1073
  }
1074
+ .font-black {
1075
+ --tw-font-weight: 900;
1076
+ font-weight: 900;
1077
+ }
1078
+ .font-bold {
1079
+ --tw-font-weight: 700;
1080
+ font-weight: 700;
1081
+ }
1082
+ .font-medium {
1083
+ --tw-font-weight: 500;
1084
+ font-weight: 500;
1085
+ }
955
1086
  .font-regular {
956
1087
  --tw-font-weight: 400;
957
1088
  font-weight: 400;
958
1089
  }
1090
+ .font-semibold {
1091
+ --tw-font-weight: 600;
1092
+ font-weight: 600;
1093
+ }
959
1094
  .font-regular {
960
1095
  font-weight: 400;
961
1096
  }
@@ -989,9 +1124,21 @@
989
1124
  .text {
990
1125
  color: hsl(var(--foreground-default));
991
1126
  }
1127
+ .text-\[hsl\(var\(--sentiment-negative\)\)\] {
1128
+ color: hsl(var(--sentiment-negative));
1129
+ }
1130
+ .text-\[hsl\(var\(--sentiment-neutral\)\)\] {
1131
+ color: hsl(var(--sentiment-neutral));
1132
+ }
1133
+ .text-\[hsl\(var\(--sentiment-positive\)\)\] {
1134
+ color: hsl(var(--sentiment-positive));
1135
+ }
992
1136
  .text-accent-foreground {
993
1137
  color: hsl(var(--foreground-default));
994
1138
  }
1139
+ .text-alternative {
1140
+ color: hsl(var(--background-alternative-default));
1141
+ }
995
1142
  .text-background {
996
1143
  color: hsl(var(--background-default));
997
1144
  }
@@ -1004,6 +1151,9 @@
1004
1151
  .text-border-muted {
1005
1152
  color: hsl(var(--border-muted));
1006
1153
  }
1154
+ .text-brand {
1155
+ color: hsl(var(--brand-default));
1156
+ }
1007
1157
  .text-brand-600 {
1008
1158
  color: hsl(var(--brand-600));
1009
1159
  }
@@ -1022,6 +1172,12 @@
1022
1172
  .text-destructive {
1023
1173
  color: hsl(var(--destructive-default));
1024
1174
  }
1175
+ .text-destructive-200 {
1176
+ color: hsl(var(--destructive-200));
1177
+ }
1178
+ .text-destructive-400 {
1179
+ color: hsl(var(--destructive-400));
1180
+ }
1025
1181
  .text-destructive-600 {
1026
1182
  color: hsl(var(--destructive-600));
1027
1183
  }
@@ -1088,6 +1244,9 @@
1088
1244
  .text-warning {
1089
1245
  color: hsl(var(--warning-default));
1090
1246
  }
1247
+ .text-warning-600 {
1248
+ color: hsl(var(--warning-600));
1249
+ }
1091
1250
  .uppercase {
1092
1251
  text-transform: uppercase;
1093
1252
  }
@@ -1119,14 +1278,42 @@
1119
1278
  .opacity-70 {
1120
1279
  opacity: 70%;
1121
1280
  }
1281
+ .shadow {
1282
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.07)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.07));
1283
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1284
+ }
1122
1285
  .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
1123
1286
  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
1124
1287
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1125
1288
  }
1289
+ .shadow-card {
1290
+ --tw-shadow: 0 2px 8px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.04));
1291
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1292
+ }
1293
+ .shadow-dropdown {
1294
+ --tw-shadow: 0 4px 16px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.12));
1295
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1296
+ }
1297
+ .shadow-lg {
1298
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.08)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.04));
1299
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1300
+ }
1301
+ .shadow-md {
1302
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.07)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1303
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1304
+ }
1126
1305
  .shadow-none {
1127
1306
  --tw-shadow: 0 0 #0000;
1128
1307
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1129
1308
  }
1309
+ .shadow-sm {
1310
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1311
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1312
+ }
1313
+ .shadow-xl {
1314
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.08)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.04));
1315
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1316
+ }
1130
1317
  .ring {
1131
1318
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1132
1319
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1139,8 +1326,8 @@
1139
1326
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1140
1327
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1141
1328
  }
1142
- .\[--tw-ring-color\:conic-gradient\(from_180deg\,\#22c55e\,\#4ade80\,\#22c55e\)\] {
1143
- --tw-ring-color: conic-gradient(from 180deg,#22c55e,#4ade80,#22c55e);
1329
+ .\[--tw-ring-color\:conic-gradient\(from_180deg\,hsl\(var\(--brand-default\)\)\,hsl\(var\(--brand-400\)\)\,hsl\(var\(--brand-default\)\)\)\] {
1330
+ --tw-ring-color: conic-gradient(from 180deg,hsl(var(--brand-default)),hsl(var(--brand-400)),hsl(var(--brand-default)));
1144
1331
  }
1145
1332
  .ring-background {
1146
1333
  --tw-ring-color: hsl(var(--background-default));
@@ -1151,6 +1338,9 @@
1151
1338
  .ring-primary {
1152
1339
  --tw-ring-color: hsl(var(--brand-default));
1153
1340
  }
1341
+ .ring-ring {
1342
+ --tw-ring-color: hsl(var(--border-strong));
1343
+ }
1154
1344
  .ring-ring\/50 {
1155
1345
  --tw-ring-color: hsl(var(--border-strong));
1156
1346
  @supports (color: color-mix(in lab, red, red)) {
@@ -1182,9 +1372,8 @@
1182
1372
  outline-style: var(--tw-outline-style);
1183
1373
  outline-width: 1px;
1184
1374
  }
1185
- .outline-0 {
1186
- outline-style: var(--tw-outline-style);
1187
- outline-width: 0px;
1375
+ .filter {
1376
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1188
1377
  }
1189
1378
  .transition {
1190
1379
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
@@ -1280,6 +1469,11 @@
1280
1469
  -webkit-user-select: none;
1281
1470
  user-select: none;
1282
1471
  }
1472
+ .divide-x-reverse {
1473
+ :where(& > :not(:last-child)) {
1474
+ --tw-divide-x-reverse: 1;
1475
+ }
1476
+ }
1283
1477
  .duration-200 {
1284
1478
  animation-duration: 200ms;
1285
1479
  }
@@ -1301,9 +1495,15 @@
1301
1495
  .ease-out {
1302
1496
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
1303
1497
  }
1498
+ .fade-in {
1499
+ --tw-enter-opacity: 0;
1500
+ }
1304
1501
  .fade-in-50 {
1305
1502
  --tw-enter-opacity: 0.5;
1306
1503
  }
1504
+ .fade-out {
1505
+ --tw-exit-opacity: 0;
1506
+ }
1307
1507
  .group-focus-within\/menu-item\:opacity-100 {
1308
1508
  &:is(:where(.group\/menu-item):focus-within *) {
1309
1509
  opacity: 100%;
@@ -1448,6 +1648,12 @@
1448
1648
  border-color: hsl(var(--border-muted));
1449
1649
  }
1450
1650
  }
1651
+ .group-data-\[variant\=floating\]\:shadow-sm {
1652
+ &:is(:where(.group)[data-variant="floating"] *) {
1653
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1654
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1655
+ }
1656
+ }
1451
1657
  .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
1452
1658
  &:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) {
1453
1659
  display: block;
@@ -1499,6 +1705,12 @@
1499
1705
  color: hsl(var(--foreground-default));
1500
1706
  }
1501
1707
  }
1708
+ .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
1709
+ &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
1710
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.07)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.07));
1711
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1712
+ }
1713
+ }
1502
1714
  .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
1503
1715
  &:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
1504
1716
  --tw-duration: 200ms;
@@ -1559,6 +1771,18 @@
1559
1771
  background-color: transparent;
1560
1772
  }
1561
1773
  }
1774
+ .file\:text-sm {
1775
+ &::file-selector-button {
1776
+ font-size: 0.875rem;
1777
+ line-height: var(--tw-leading, 1.375rem);
1778
+ }
1779
+ }
1780
+ .file\:font-medium {
1781
+ &::file-selector-button {
1782
+ --tw-font-weight: 500;
1783
+ font-weight: 500;
1784
+ }
1785
+ }
1562
1786
  .file\:text-foreground {
1563
1787
  &::file-selector-button {
1564
1788
  color: hsl(var(--foreground-default));
@@ -1719,6 +1943,16 @@
1719
1943
  }
1720
1944
  }
1721
1945
  }
1946
+ .hover\:border-foreground\/30 {
1947
+ &:hover {
1948
+ @media (hover: hover) {
1949
+ border-color: hsl(var(--foreground-default));
1950
+ @supports (color: color-mix(in lab, red, red)) {
1951
+ border-color: color-mix(in oklab, hsl(var(--foreground-default)) 30%, transparent);
1952
+ }
1953
+ }
1954
+ }
1955
+ }
1722
1956
  .hover\:border-stronger {
1723
1957
  &:hover {
1724
1958
  @media (hover: hover) {
@@ -1795,6 +2029,20 @@
1795
2029
  }
1796
2030
  }
1797
2031
  }
2032
+ .hover\:bg-background-surface-200 {
2033
+ &:hover {
2034
+ @media (hover: hover) {
2035
+ background-color: hsl(var(--background-surface-200));
2036
+ }
2037
+ }
2038
+ }
2039
+ .hover\:bg-brand-300 {
2040
+ &:hover {
2041
+ @media (hover: hover) {
2042
+ background-color: hsl(var(--brand-300));
2043
+ }
2044
+ }
2045
+ }
1798
2046
  .hover\:bg-brand-400 {
1799
2047
  &:hover {
1800
2048
  @media (hover: hover) {
@@ -1812,6 +2060,13 @@
1812
2060
  }
1813
2061
  }
1814
2062
  }
2063
+ .hover\:bg-destructive-300 {
2064
+ &:hover {
2065
+ @media (hover: hover) {
2066
+ background-color: hsl(var(--destructive-300));
2067
+ }
2068
+ }
2069
+ }
1815
2070
  .hover\:bg-destructive-400 {
1816
2071
  &:hover {
1817
2072
  @media (hover: hover) {
@@ -1819,10 +2074,13 @@
1819
2074
  }
1820
2075
  }
1821
2076
  }
1822
- .hover\:bg-muted {
2077
+ .hover\:bg-foreground\/10 {
1823
2078
  &:hover {
1824
2079
  @media (hover: hover) {
1825
- background-color: hsl(var(--background-muted));
2080
+ background-color: hsl(var(--foreground-default));
2081
+ @supports (color: color-mix(in lab, red, red)) {
2082
+ background-color: color-mix(in oklab, hsl(var(--foreground-default)) 10%, transparent);
2083
+ }
1826
2084
  }
1827
2085
  }
1828
2086
  }
@@ -1833,13 +2091,10 @@
1833
2091
  }
1834
2092
  }
1835
2093
  }
1836
- .hover\:bg-muted\/50 {
2094
+ .hover\:bg-muted {
1837
2095
  &:hover {
1838
2096
  @media (hover: hover) {
1839
2097
  background-color: hsl(var(--background-muted));
1840
- @supports (color: color-mix(in lab, red, red)) {
1841
- background-color: color-mix(in oklab, hsl(var(--background-muted)) 50%, transparent);
1842
- }
1843
2098
  }
1844
2099
  }
1845
2100
  }
@@ -1881,6 +2136,13 @@
1881
2136
  }
1882
2137
  }
1883
2138
  }
2139
+ .hover\:bg-warning-300 {
2140
+ &:hover {
2141
+ @media (hover: hover) {
2142
+ background-color: hsl(var(--warning-300));
2143
+ }
2144
+ }
2145
+ }
1884
2146
  .hover\:bg-warning-400 {
1885
2147
  &:hover {
1886
2148
  @media (hover: hover) {
@@ -1966,6 +2228,14 @@
1966
2228
  }
1967
2229
  }
1968
2230
  }
2231
+ .hover\:shadow-md {
2232
+ &:hover {
2233
+ @media (hover: hover) {
2234
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.07)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2235
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2236
+ }
2237
+ }
2238
+ }
1969
2239
  .hover\:ring-4 {
1970
2240
  &:hover {
1971
2241
  @media (hover: hover) {
@@ -2102,6 +2372,16 @@
2102
2372
  --tw-ring-color: hsl(var(--brand-default));
2103
2373
  }
2104
2374
  }
2375
+ .focus-visible\:ring-current {
2376
+ &:focus-visible {
2377
+ --tw-ring-color: currentcolor;
2378
+ }
2379
+ }
2380
+ .focus-visible\:ring-primary {
2381
+ &:focus-visible {
2382
+ --tw-ring-color: hsl(var(--brand-default));
2383
+ }
2384
+ }
2105
2385
  .focus-visible\:ring-ring {
2106
2386
  &:focus-visible {
2107
2387
  --tw-ring-color: hsl(var(--border-strong));
@@ -2153,27 +2433,6 @@
2153
2433
  outline-width: 1px;
2154
2434
  }
2155
2435
  }
2156
- .focus-visible\:outline-4 {
2157
- &:focus-visible {
2158
- outline-style: var(--tw-outline-style);
2159
- outline-width: 4px;
2160
- }
2161
- }
2162
- .focus-visible\:outline-offset-1 {
2163
- &:focus-visible {
2164
- outline-offset: 1px;
2165
- }
2166
- }
2167
- .focus-visible\:outline-border-strong {
2168
- &:focus-visible {
2169
- outline-color: hsl(var(--border-strong));
2170
- }
2171
- }
2172
- .focus-visible\:outline-brand-600 {
2173
- &:focus-visible {
2174
- outline-color: hsl(var(--brand-600));
2175
- }
2176
- }
2177
2436
  .focus-visible\:outline-none {
2178
2437
  &:focus-visible {
2179
2438
  --tw-outline-style: none;
@@ -2457,6 +2716,12 @@
2457
2716
  background-color: hsl(var(--background-selection));
2458
2717
  }
2459
2718
  }
2719
+ .data-\[active\=true\]\:font-medium {
2720
+ &[data-active="true"] {
2721
+ --tw-font-weight: 500;
2722
+ font-weight: 500;
2723
+ }
2724
+ }
2460
2725
  .data-\[active\=true\]\:text-accent-foreground {
2461
2726
  &[data-active="true"] {
2462
2727
  color: hsl(var(--foreground-default));
@@ -2736,16 +3001,6 @@
2736
3001
  }
2737
3002
  }
2738
3003
  }
2739
- .data-\[state\=active\]\:bg-background {
2740
- &[data-state="active"] {
2741
- background-color: hsl(var(--background-default));
2742
- }
2743
- }
2744
- .data-\[state\=active\]\:text-foreground {
2745
- &[data-state="active"] {
2746
- color: hsl(var(--foreground-default));
2747
- }
2748
- }
2749
3004
  .data-\[state\=checked\]\:border-brand {
2750
3005
  &[data-state="checked"] {
2751
3006
  border-color: hsl(var(--brand-default));
@@ -2893,16 +3148,46 @@
2893
3148
  --tw-exit-opacity: 0;
2894
3149
  }
2895
3150
  }
3151
+ .data-\[state\=off\]\:text-muted-foreground {
3152
+ &[data-state="off"] {
3153
+ color: hsl(var(--foreground-muted));
3154
+ }
3155
+ }
3156
+ .data-\[state\=off\]\:hover\:text-foreground {
3157
+ &[data-state="off"] {
3158
+ &:hover {
3159
+ @media (hover: hover) {
3160
+ color: hsl(var(--foreground-default));
3161
+ }
3162
+ }
3163
+ }
3164
+ }
2896
3165
  .data-\[state\=on\]\:bg-accent {
2897
3166
  &[data-state="on"] {
2898
3167
  background-color: hsl(var(--background-surface-200));
2899
3168
  }
2900
3169
  }
3170
+ .data-\[state\=on\]\:bg-primary {
3171
+ &[data-state="on"] {
3172
+ background-color: hsl(var(--brand-default));
3173
+ }
3174
+ }
2901
3175
  .data-\[state\=on\]\:text-accent-foreground {
2902
3176
  &[data-state="on"] {
2903
3177
  color: hsl(var(--foreground-default));
2904
3178
  }
2905
3179
  }
3180
+ .data-\[state\=on\]\:text-primary-foreground {
3181
+ &[data-state="on"] {
3182
+ color: hsl(var(--foreground-contrast));
3183
+ }
3184
+ }
3185
+ .data-\[state\=on\]\:shadow-sm {
3186
+ &[data-state="on"] {
3187
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
3188
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3189
+ }
3190
+ }
2906
3191
  .data-\[state\=open\]\:animate-accordion-down {
2907
3192
  &[data-state="open"] {
2908
3193
  animation: accordion-down 0.2s ease-out;
@@ -2999,26 +3284,6 @@
2999
3284
  opacity: 100%;
3000
3285
  }
3001
3286
  }
3002
- .data-\[state\=open\]\:outline-border-strong {
3003
- &[data-state="open"] {
3004
- outline-color: hsl(var(--border-strong));
3005
- }
3006
- }
3007
- .data-\[state\=open\]\:outline-brand-600 {
3008
- &[data-state="open"] {
3009
- outline-color: hsl(var(--brand-600));
3010
- }
3011
- }
3012
- .data-\[state\=open\]\:outline-destructive {
3013
- &[data-state="open"] {
3014
- outline-color: hsl(var(--destructive-default));
3015
- }
3016
- }
3017
- .data-\[state\=open\]\:outline-warning {
3018
- &[data-state="open"] {
3019
- outline-color: hsl(var(--warning-default));
3020
- }
3021
- }
3022
3287
  .data-\[state\=open\]\:duration-500 {
3023
3288
  &[data-state="open"] {
3024
3289
  --tw-duration: 500ms;
@@ -3145,14 +3410,14 @@
3145
3410
  }
3146
3411
  }
3147
3412
  }
3148
- .data-\[state\=selected\]\:bg-muted {
3413
+ .data-\[state\=selected\]\:bg-selection {
3149
3414
  &[data-state="selected"] {
3150
- background-color: hsl(var(--background-muted));
3415
+ background-color: hsl(var(--background-selection));
3151
3416
  }
3152
3417
  }
3153
- .data-\[state\=selected\]\:bg-muted {
3418
+ .data-\[state\=selected\]\:bg-selection {
3154
3419
  &[data-state="selected"] {
3155
- background-color: hsl(var(--background-muted));
3420
+ background-color: hsl(var(--background-selection));
3156
3421
  }
3157
3422
  }
3158
3423
  .data-\[state\=unchecked\]\:hover\:bg-border {
@@ -3201,6 +3466,18 @@
3201
3466
  }
3202
3467
  }
3203
3468
  }
3469
+ .data-\[variant\=label\]\:text-sm {
3470
+ &[data-variant="label"] {
3471
+ font-size: 0.875rem;
3472
+ line-height: var(--tw-leading, 1.375rem);
3473
+ }
3474
+ }
3475
+ .data-\[variant\=legend\]\:text-base {
3476
+ &[data-variant="legend"] {
3477
+ font-size: 1rem;
3478
+ line-height: var(--tw-leading, 1.625rem);
3479
+ }
3480
+ }
3204
3481
  .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\] {
3205
3482
  &[data-vaul-drawer-direction="bottom"] {
3206
3483
  max-height: 80vh;
@@ -3491,6 +3768,18 @@
3491
3768
  }
3492
3769
  }
3493
3770
  }
3771
+ .\[\&_\[cmdk-group-heading\]\]\:text-xs {
3772
+ & [cmdk-group-heading] {
3773
+ font-size: 0.75rem;
3774
+ line-height: var(--tw-leading, 1.125rem);
3775
+ }
3776
+ }
3777
+ .\[\&_\[cmdk-group-heading\]\]\:font-medium {
3778
+ & [cmdk-group-heading] {
3779
+ --tw-font-weight: 500;
3780
+ font-weight: 500;
3781
+ }
3782
+ }
3494
3783
  .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
3495
3784
  & [cmdk-group-heading] {
3496
3785
  color: hsl(var(--foreground-muted));
@@ -3563,6 +3852,16 @@
3563
3852
  border-width: 0px;
3564
3853
  }
3565
3854
  }
3855
+ .\[\&\:\:-webkit-search-cancel-button\]\:hidden {
3856
+ &::-webkit-search-cancel-button {
3857
+ display: none;
3858
+ }
3859
+ }
3860
+ .\[\&\:\:-webkit-search-decoration\]\:hidden {
3861
+ &::-webkit-search-decoration {
3862
+ display: none;
3863
+ }
3864
+ }
3566
3865
  .\[\&\:hover_svg\]\:\!text-primary {
3567
3866
  &:hover svg {
3568
3867
  color: hsl(var(--brand-default)) !important;
@@ -3777,6 +4076,22 @@
3777
4076
  rotate: 180deg;
3778
4077
  }
3779
4078
  }
4079
+ .\[\[data-bordered\]_\&\]\:border {
4080
+ [data-bordered] & {
4081
+ border-style: var(--tw-border-style);
4082
+ border-width: 1px;
4083
+ }
4084
+ }
4085
+ .\[\[data-bordered\]_\&\]\:border {
4086
+ [data-bordered] & {
4087
+ border-color: hsl(var(--border-default));
4088
+ }
4089
+ }
4090
+ .\[\[data-bordered\]_\&\]\:border-border {
4091
+ [data-bordered] & {
4092
+ border-color: hsl(var(--border-default));
4093
+ }
4094
+ }
3780
4095
  .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
3781
4096
  [data-side=left][data-state=collapsed] & {
3782
4097
  cursor: e-resize;
@@ -3787,6 +4102,57 @@
3787
4102
  cursor: w-resize;
3788
4103
  }
3789
4104
  }
4105
+ .\[\[data-size\=lg\]_\&\]\:h-full {
4106
+ [data-size=lg] & {
4107
+ height: 100%;
4108
+ }
4109
+ }
4110
+ .\[\[data-size\=lg\]_\&\]\:text-base {
4111
+ [data-size=lg] & {
4112
+ font-size: 1rem;
4113
+ line-height: var(--tw-leading, 1.625rem);
4114
+ }
4115
+ }
4116
+ .\[\[data-size\=lg\]_\&\]\:text-lg {
4117
+ [data-size=lg] & {
4118
+ font-size: 1.125rem;
4119
+ line-height: var(--tw-leading, 1.75rem);
4120
+ }
4121
+ }
4122
+ .\[\[data-size\=md\]_\&\]\:h-full {
4123
+ [data-size=md] & {
4124
+ height: 100%;
4125
+ }
4126
+ }
4127
+ .\[\[data-size\=md\]_\&\]\:text-base {
4128
+ [data-size=md] & {
4129
+ font-size: 1rem;
4130
+ line-height: var(--tw-leading, 1.625rem);
4131
+ }
4132
+ }
4133
+ .\[\[data-size\=md\]_\&\]\:text-sm {
4134
+ [data-size=md] & {
4135
+ font-size: 0.875rem;
4136
+ line-height: var(--tw-leading, 1.375rem);
4137
+ }
4138
+ }
4139
+ .\[\[data-size\=sm\]_\&\]\:h-full {
4140
+ [data-size=sm] & {
4141
+ height: 100%;
4142
+ }
4143
+ }
4144
+ .\[\[data-size\=sm\]_\&\]\:text-sm {
4145
+ [data-size=sm] & {
4146
+ font-size: 0.875rem;
4147
+ line-height: var(--tw-leading, 1.375rem);
4148
+ }
4149
+ }
4150
+ .\[\[data-size\=sm\]_\&\]\:text-xs {
4151
+ [data-size=sm] & {
4152
+ font-size: 0.75rem;
4153
+ line-height: var(--tw-leading, 1.125rem);
4154
+ }
4155
+ }
3790
4156
  .\[\[data-slot\=tooltip-content\]_\&\]\:bg-background\/20 {
3791
4157
  [data-slot=tooltip-content] & {
3792
4158
  background-color: hsl(var(--background-default));
@@ -3810,6 +4176,115 @@
3810
4176
  }
3811
4177
  }
3812
4178
  }
4179
+ .\[\[data-sticky-header\]_\&\]\:sticky {
4180
+ [data-sticky-header] & {
4181
+ position: sticky;
4182
+ }
4183
+ }
4184
+ .\[\[data-sticky-header\]_\&\]\:z-10 {
4185
+ [data-sticky-header] & {
4186
+ z-index: 10;
4187
+ }
4188
+ }
4189
+ .\[\[data-variant\=default\]_\&\]\:rounded-md {
4190
+ [data-variant=default] & {
4191
+ border-radius: calc(var(--radius) - 2px);
4192
+ }
4193
+ }
4194
+ .\[\[data-variant\=default\]_\&\]\:data-\[state\=active\]\:bg-background {
4195
+ [data-variant=default] & {
4196
+ &[data-state="active"] {
4197
+ background-color: hsl(var(--background-default));
4198
+ }
4199
+ }
4200
+ }
4201
+ .\[\[data-variant\=default\]_\&\]\:data-\[state\=active\]\:text-foreground {
4202
+ [data-variant=default] & {
4203
+ &[data-state="active"] {
4204
+ color: hsl(var(--foreground-default));
4205
+ }
4206
+ }
4207
+ }
4208
+ .\[\[data-variant\=default\]_\&\]\:data-\[state\=active\]\:shadow-sm {
4209
+ [data-variant=default] & {
4210
+ &[data-state="active"] {
4211
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
4212
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4213
+ }
4214
+ }
4215
+ }
4216
+ .\[\[data-variant\=outline\]_\&\]\:border-e {
4217
+ [data-variant=outline] & {
4218
+ border-inline-end-style: var(--tw-border-style);
4219
+ border-inline-end-width: 1px;
4220
+ }
4221
+ }
4222
+ .\[\[data-variant\=outline\]_\&\]\:border-border {
4223
+ [data-variant=outline] & {
4224
+ border-color: hsl(var(--border-default));
4225
+ }
4226
+ }
4227
+ .\[\[data-variant\=outline\]_\&\]\:first\:rounded-s-lg {
4228
+ [data-variant=outline] & {
4229
+ &:first-child {
4230
+ border-start-start-radius: var(--radius);
4231
+ border-end-start-radius: var(--radius);
4232
+ }
4233
+ }
4234
+ }
4235
+ .\[\[data-variant\=outline\]_\&\]\:last\:rounded-e-lg {
4236
+ [data-variant=outline] & {
4237
+ &:last-child {
4238
+ border-start-end-radius: var(--radius);
4239
+ border-end-end-radius: var(--radius);
4240
+ }
4241
+ }
4242
+ }
4243
+ .\[\[data-variant\=outline\]_\&\]\:last\:border-e-0 {
4244
+ [data-variant=outline] & {
4245
+ &:last-child {
4246
+ border-inline-end-style: var(--tw-border-style);
4247
+ border-inline-end-width: 0px;
4248
+ }
4249
+ }
4250
+ }
4251
+ .\[\[data-variant\=outline\]_\&\]\:data-\[state\=active\]\:text-foreground {
4252
+ [data-variant=outline] & {
4253
+ &[data-state="active"] {
4254
+ color: hsl(var(--foreground-default));
4255
+ }
4256
+ }
4257
+ }
4258
+ .\[\[data-variant\=underline\]_\&\]\:rounded-none {
4259
+ [data-variant=underline] & {
4260
+ border-radius: 0;
4261
+ }
4262
+ }
4263
+ .\[\[data-variant\=underline\]_\&\]\:border-b-2 {
4264
+ [data-variant=underline] & {
4265
+ border-bottom-style: var(--tw-border-style);
4266
+ border-bottom-width: 2px;
4267
+ }
4268
+ }
4269
+ .\[\[data-variant\=underline\]_\&\]\:border-transparent {
4270
+ [data-variant=underline] & {
4271
+ border-color: transparent;
4272
+ }
4273
+ }
4274
+ .\[\[data-variant\=underline\]_\&\]\:data-\[state\=active\]\:border-brand {
4275
+ [data-variant=underline] & {
4276
+ &[data-state="active"] {
4277
+ border-color: hsl(var(--brand-default));
4278
+ }
4279
+ }
4280
+ }
4281
+ .\[\[data-variant\=underline\]_\&\]\:data-\[state\=active\]\:text-foreground {
4282
+ [data-variant=underline] & {
4283
+ &[data-state="active"] {
4284
+ color: hsl(var(--foreground-default));
4285
+ }
4286
+ }
4287
+ }
3813
4288
  :root {
3814
4289
  --colors-black: 0deg 0% 0%;
3815
4290
  --colors-white: 0deg 0% 100%;
@@ -3946,9 +4421,22 @@
3946
4421
  --xxl: 128px;
3947
4422
  --content-width-screen-xl: 1128px;
3948
4423
  --font-family-body: Inter;
4424
+ --social-platform-instagram: #E1306C;
4425
+ --social-platform-tiktok: #FE2C55;
4426
+ --social-platform-youtube: #FF0000;
4427
+ --social-platform-linkedin: #0A66C2;
4428
+ --social-platform-telegram: #26A5E4;
3949
4429
  }
3950
4430
  [data-theme='light'], .light {
3951
4431
  --helpers-os-appearance: Light;
4432
+ --social-platform-twitter: #000000;
4433
+ --social-platform-threads: #000000;
4434
+ --shadow-tooltip: 0 2px 12px rgba(0, 0, 0, 0.12);
4435
+ --shadow-tooltip-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
4436
+ --focus-ring-color: hsl(var(--brand-default));
4437
+ --placeholder-color: hsl(var(--foreground-muted));
4438
+ --disabled-opacity: 0.5;
4439
+ --transition-base: 150ms ease;
3952
4440
  --code-block-5: 14deg 80.4% 58%;
3953
4441
  --code-block-4: 276.3deg 60% 52.9%;
3954
4442
  --code-block-3: 83.8deg 61.6% 48%;
@@ -4014,17 +4502,41 @@
4014
4502
  --chart-3: 30.3deg 80.3% 47.8%;
4015
4503
  --chart-4: 247.8deg 100% 70%;
4016
4504
  --chart-5: var(--colors-gray-light-900);
4505
+ --engagement-excellent: 142deg 76% 19%;
4506
+ --engagement-excellent-hover: 143deg 72% 14%;
4507
+ --engagement-very-good: 142deg 71% 45%;
4508
+ --engagement-very-good-hover: 142deg 72% 35%;
4509
+ --engagement-good: 84deg 81% 44%;
4510
+ --engagement-good-hover: 85deg 85% 35%;
4511
+ --engagement-average: 48deg 96% 50%;
4512
+ --engagement-average-hover: 48deg 96% 42%;
4513
+ --engagement-low: 25deg 95% 53%;
4514
+ --engagement-low-hover: 25deg 95% 45%;
4515
+ --engagement-poor: 0deg 84% 60%;
4516
+ --engagement-poor-hover: 0deg 72% 51%;
4517
+ --engagement-inactive: 0deg 0% 83.1%;
4518
+ --sentiment-positive: 142deg 71% 45%;
4519
+ --sentiment-negative: 0deg 84% 60%;
4520
+ --sentiment-neutral: 0deg 0% 43.5%;
4017
4521
  }
4018
4522
  [data-theme='dark'], .dark {
4019
4523
  --helpers-os-appearance: Dark;
4524
+ --social-platform-twitter: #E7E9EA;
4525
+ --social-platform-threads: #E7E9EA;
4526
+ --shadow-tooltip: 0 2px 12px rgba(0, 0, 0, 0.4);
4527
+ --shadow-tooltip-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
4528
+ --focus-ring-color: hsl(var(--brand-default));
4529
+ --placeholder-color: hsl(var(--foreground-muted));
4530
+ --disabled-opacity: 0.5;
4531
+ --transition-base: 150ms ease;
4020
4532
  --code-block-5: 13.8deg 89.7% 69.6%;
4021
4533
  --code-block-4: 276.1deg 67.7% 74.5%;
4022
4534
  --code-block-3: 83.8deg 61.7% 63.1%;
4023
4535
  --code-block-2: 33.2deg 90.3% 75.7%;
4024
4536
  --code-block-1: 170.8deg 43.1% 61.4%;
4025
- --secondary-default: 247.8deg 100% 70%;
4026
- --secondary-400: 248.3deg 54.5% 25.9%;
4027
- --secondary-200: 248deg 53.6% 11%;
4537
+ --secondary-default: 247.8deg 80% 68%;
4538
+ --secondary-400: 248deg 55% 32%;
4539
+ --secondary-200: 248deg 50% 15%;
4028
4540
  --brand-link: 155deg 100% 38.6%;
4029
4541
  --brand-default: 153.1deg 60.2% 52.7%;
4030
4542
  --brand-600: 154.9deg 59.5% 70%;
@@ -4082,18 +4594,42 @@
4082
4594
  --chart-3: 38.9deg 100% 42.9%;
4083
4595
  --chart-4: 247.8deg 100% 70%;
4084
4596
  --chart-5: var(--colors-gray-dark-1000);
4597
+ --engagement-excellent: 142deg 76% 26%;
4598
+ --engagement-excellent-hover: 142deg 76% 19%;
4599
+ --engagement-very-good: 142deg 71% 45%;
4600
+ --engagement-very-good-hover: 142deg 72% 35%;
4601
+ --engagement-good: 84deg 81% 44%;
4602
+ --engagement-good-hover: 85deg 85% 35%;
4603
+ --engagement-average: 48deg 96% 50%;
4604
+ --engagement-average-hover: 48deg 96% 42%;
4605
+ --engagement-low: 25deg 95% 53%;
4606
+ --engagement-low-hover: 25deg 95% 45%;
4607
+ --engagement-poor: 0deg 84% 60%;
4608
+ --engagement-poor-hover: 0deg 72% 51%;
4609
+ --engagement-inactive: 0deg 0% 21.2%;
4610
+ --sentiment-positive: 142deg 71% 45%;
4611
+ --sentiment-negative: 0deg 84% 60%;
4612
+ --sentiment-neutral: 0deg 0% 53.7%;
4085
4613
  color-scheme: dark;
4086
4614
  }
4087
4615
  [data-theme='classic-dark'] {
4088
4616
  --helpers-os-appearance: Classic Dark;
4617
+ --social-platform-twitter: #E7E9EA;
4618
+ --social-platform-threads: #E7E9EA;
4619
+ --shadow-tooltip: 0 2px 12px rgba(0, 0, 0, 0.45);
4620
+ --shadow-tooltip-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
4621
+ --focus-ring-color: hsl(var(--brand-default));
4622
+ --placeholder-color: hsl(var(--foreground-muted));
4623
+ --disabled-opacity: 0.5;
4624
+ --transition-base: 150ms ease;
4089
4625
  --code-block-5: 13.8deg 89.7% 69.6%;
4090
4626
  --code-block-4: 276.1deg 67.7% 74.5%;
4091
4627
  --code-block-3: 83.8deg 61.7% 63.1%;
4092
4628
  --code-block-2: 33.2deg 90.3% 75.7%;
4093
4629
  --code-block-1: 170.8deg 43.1% 61.4%;
4094
- --secondary-default: 0deg 0% 100%;
4095
- --secondary-400: 0deg 0% 100%;
4096
- --secondary-200: 0deg 0% 100%;
4630
+ --secondary-default: 247.8deg 75% 65%;
4631
+ --secondary-400: 248deg 52% 28%;
4632
+ --secondary-200: 248deg 48% 13%;
4097
4633
  --brand-link: 153.1deg 60.2% 52.7%;
4098
4634
  --brand-default: 153.1deg 60.2% 52.7%;
4099
4635
  --brand-600: 153deg 59.5% 70%;
@@ -4101,8 +4637,8 @@
4101
4637
  --brand-400: 153.3deg 65.2% 13.5%;
4102
4638
  --brand-300: 153.8deg 69.6% 9%;
4103
4639
  --brand-200: 152.5deg 75% 6.3%;
4104
- --warning-default: 38.9deg 100% 57.1%;
4105
- --warning-600: 38.9deg 89.8% 49.8%;
4640
+ --warning-default: 38.9deg 100% 42.9%;
4641
+ --warning-600: 38.9deg 100% 42.9%;
4106
4642
  --warning-500: 34.8deg 90.9% 21.6%;
4107
4643
  --warning-400: 33.2deg 100% 14.5%;
4108
4644
  --warning-300: 32.3deg 100% 10.2%;
@@ -4151,6 +4687,22 @@
4151
4687
  --chart-3: 38.9deg 100% 42.9%;
4152
4688
  --chart-4: 247.8deg 100% 70%;
4153
4689
  --chart-5: var(--colors-gray-dark-1000);
4690
+ --engagement-excellent: 142deg 76% 26%;
4691
+ --engagement-excellent-hover: 142deg 76% 19%;
4692
+ --engagement-very-good: 142deg 71% 45%;
4693
+ --engagement-very-good-hover: 142deg 72% 35%;
4694
+ --engagement-good: 84deg 81% 44%;
4695
+ --engagement-good-hover: 85deg 85% 35%;
4696
+ --engagement-average: 48deg 96% 50%;
4697
+ --engagement-average-hover: 48deg 96% 42%;
4698
+ --engagement-low: 25deg 95% 53%;
4699
+ --engagement-low-hover: 25deg 95% 45%;
4700
+ --engagement-poor: 0deg 84% 60%;
4701
+ --engagement-poor-hover: 0deg 72% 51%;
4702
+ --engagement-inactive: 0deg 0% 24.3%;
4703
+ --sentiment-positive: 142deg 71% 45%;
4704
+ --sentiment-negative: 0deg 84% 60%;
4705
+ --sentiment-neutral: 0deg 0% 53.7%;
4154
4706
  color-scheme: dark;
4155
4707
  }
4156
4708
  @font-face {
@@ -4996,13 +5548,42 @@
4996
5548
  font-feature-settings: "lnum";
4997
5549
  }
4998
5550
  }
4999
- h1, h2, h3, h4, h5, h6 {
5000
- margin: 0 !important;
5001
- padding: 0 !important;
5002
- }
5003
- p {
5004
- margin: 0 !important;
5005
- padding: 0 !important;
5551
+ @layer components {
5552
+ .text-label {
5553
+ font-size: 0.75rem;
5554
+ line-height: 1;
5555
+ font-weight: 500;
5556
+ letter-spacing: 0.025em;
5557
+ }
5558
+ .text-caption {
5559
+ font-size: 0.75rem;
5560
+ line-height: 1.5;
5561
+ color: hsl(var(--foreground-muted));
5562
+ }
5563
+ .text-body-sm {
5564
+ font-size: 0.875rem;
5565
+ line-height: 1.625;
5566
+ }
5567
+ .text-body {
5568
+ font-size: 1rem;
5569
+ line-height: 1.5;
5570
+ }
5571
+ .text-heading-sm {
5572
+ font-size: 0.875rem;
5573
+ line-height: 1.25;
5574
+ font-weight: 600;
5575
+ }
5576
+ .text-heading {
5577
+ font-size: 1rem;
5578
+ line-height: 1.25;
5579
+ font-weight: 600;
5580
+ letter-spacing: -0.025em;
5581
+ }
5582
+ .text-display {
5583
+ font-size: 1.125rem;
5584
+ line-height: 1.25;
5585
+ font-weight: 600;
5586
+ }
5006
5587
  }
5007
5588
  @keyframes enter {
5008
5589
  from {
@@ -5051,6 +5632,11 @@ p {
5051
5632
  syntax: "*";
5052
5633
  inherits: false;
5053
5634
  }
5635
+ @property --tw-divide-x-reverse {
5636
+ syntax: "*";
5637
+ inherits: false;
5638
+ initial-value: 0;
5639
+ }
5054
5640
  @property --tw-border-style {
5055
5641
  syntax: "*";
5056
5642
  inherits: false;
@@ -5196,6 +5782,59 @@ p {
5196
5782
  inherits: false;
5197
5783
  initial-value: solid;
5198
5784
  }
5785
+ @property --tw-blur {
5786
+ syntax: "*";
5787
+ inherits: false;
5788
+ }
5789
+ @property --tw-brightness {
5790
+ syntax: "*";
5791
+ inherits: false;
5792
+ }
5793
+ @property --tw-contrast {
5794
+ syntax: "*";
5795
+ inherits: false;
5796
+ }
5797
+ @property --tw-grayscale {
5798
+ syntax: "*";
5799
+ inherits: false;
5800
+ }
5801
+ @property --tw-hue-rotate {
5802
+ syntax: "*";
5803
+ inherits: false;
5804
+ }
5805
+ @property --tw-invert {
5806
+ syntax: "*";
5807
+ inherits: false;
5808
+ }
5809
+ @property --tw-opacity {
5810
+ syntax: "*";
5811
+ inherits: false;
5812
+ }
5813
+ @property --tw-saturate {
5814
+ syntax: "*";
5815
+ inherits: false;
5816
+ }
5817
+ @property --tw-sepia {
5818
+ syntax: "*";
5819
+ inherits: false;
5820
+ }
5821
+ @property --tw-drop-shadow {
5822
+ syntax: "*";
5823
+ inherits: false;
5824
+ }
5825
+ @property --tw-drop-shadow-color {
5826
+ syntax: "*";
5827
+ inherits: false;
5828
+ }
5829
+ @property --tw-drop-shadow-alpha {
5830
+ syntax: "<percentage>";
5831
+ inherits: false;
5832
+ initial-value: 100%;
5833
+ }
5834
+ @property --tw-drop-shadow-size {
5835
+ syntax: "*";
5836
+ inherits: false;
5837
+ }
5199
5838
  @property --tw-duration {
5200
5839
  syntax: "*";
5201
5840
  inherits: false;
@@ -5235,6 +5874,7 @@ p {
5235
5874
  --tw-rotate-z: initial;
5236
5875
  --tw-skew-x: initial;
5237
5876
  --tw-skew-y: initial;
5877
+ --tw-divide-x-reverse: 0;
5238
5878
  --tw-border-style: solid;
5239
5879
  --tw-gradient-position: initial;
5240
5880
  --tw-gradient-from: #0000;
@@ -5267,6 +5907,19 @@ p {
5267
5907
  --tw-ring-offset-color: #fff;
5268
5908
  --tw-ring-offset-shadow: 0 0 #0000;
5269
5909
  --tw-outline-style: solid;
5910
+ --tw-blur: initial;
5911
+ --tw-brightness: initial;
5912
+ --tw-contrast: initial;
5913
+ --tw-grayscale: initial;
5914
+ --tw-hue-rotate: initial;
5915
+ --tw-invert: initial;
5916
+ --tw-opacity: initial;
5917
+ --tw-saturate: initial;
5918
+ --tw-sepia: initial;
5919
+ --tw-drop-shadow: initial;
5920
+ --tw-drop-shadow-color: initial;
5921
+ --tw-drop-shadow-alpha: 100%;
5922
+ --tw-drop-shadow-size: initial;
5270
5923
  --tw-duration: initial;
5271
5924
  --tw-ease: initial;
5272
5925
  --tw-scale-x: 1;