@cytario/design 5.2.0 → 6.0.0

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 (9) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.d.ts +81 -90
  3. package/dist/index.js +357 -371
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -1
  6. package/src/styles/tailwind.css +1 -0
  7. package/src/tokens/utilities.css +55 -0
  8. package/src/tokens/variables-dark.css +89 -67
  9. package/src/tokens/variables.css +79 -88
package/dist/index.js CHANGED
@@ -18,46 +18,50 @@ var sizeStyles = {
18
18
  };
19
19
  var variantStyles = {
20
20
  primary: [
21
- "bg-(--color-action-primary) text-(--color-text-inverse)",
22
- "hover:bg-(--color-action-primary-hover)",
23
- "pressed:bg-(--color-action-primary-active)"
21
+ "bg-primary text-primary-foreground",
22
+ "hover:bg-primary-hover",
23
+ "pressed:bg-primary-pressed"
24
24
  ].join(" "),
25
25
  secondary: [
26
- "bg-transparent text-(--color-action-secondary)",
27
- "border border-(--color-border-brand)",
28
- "hover:bg-purple-50",
29
- "pressed:bg-purple-100"
30
- ].join(" "),
31
- ghost: [
32
- "bg-transparent text-(--color-text-primary)",
33
- "hover:bg-(--color-surface-hover)",
34
- "pressed:bg-(--color-surface-pressed)"
26
+ "bg-secondary text-secondary-foreground",
27
+ "hover:bg-secondary-hover",
28
+ "pressed:bg-secondary-pressed"
35
29
  ].join(" "),
36
30
  destructive: [
37
- "bg-(--color-action-danger) text-(--color-text-inverse)",
38
- "hover:bg-(--color-action-danger-hover)",
39
- "pressed:bg-(--color-action-danger-hover)"
40
- ].join(" "),
41
- default: [
42
- "bg-(--color-action-default) text-(--color-text-inverse)",
43
- "hover:bg-(--color-action-default-hover)",
44
- "pressed:bg-slate-600"
31
+ "bg-destructive text-destructive-foreground",
32
+ "hover:bg-destructive-hover",
33
+ "pressed:bg-destructive-pressed"
45
34
  ].join(" "),
46
35
  success: [
47
- "bg-(--color-action-success) text-(--color-text-inverse)",
48
- "hover:bg-(--color-action-success-hover)",
49
- "pressed:bg-green-800"
36
+ "bg-success text-success-foreground",
37
+ "hover:bg-success-hover",
38
+ "pressed:bg-success-pressed"
39
+ ].join(" "),
40
+ warning: [
41
+ "bg-warning text-warning-foreground",
42
+ "hover:bg-warning-hover",
43
+ "pressed:bg-warning-pressed"
50
44
  ].join(" "),
51
45
  info: [
52
- "bg-(--color-action-info) text-(--color-text-inverse)",
53
- "hover:bg-(--color-action-info-hover)",
54
- "pressed:bg-slate-800"
46
+ "bg-info text-info-foreground",
47
+ "hover:bg-info-hover",
48
+ "pressed:bg-info-pressed"
55
49
  ].join(" "),
56
50
  neutral: [
57
- "bg-(--color-surface-default) text-(--color-text-primary)",
58
- "border border-(--color-border-default)",
59
- "hover:bg-(--color-surface-subtle)",
60
- "pressed:bg-(--color-surface-muted)"
51
+ "bg-muted text-foreground",
52
+ "hover:bg-accent",
53
+ "pressed:bg-accent-pressed"
54
+ ].join(" "),
55
+ outline: [
56
+ "bg-transparent text-foreground",
57
+ "border border-border",
58
+ "hover:bg-muted",
59
+ "pressed:bg-accent-pressed"
60
+ ].join(" "),
61
+ ghost: [
62
+ "bg-transparent text-foreground",
63
+ "hover:bg-muted",
64
+ "pressed:bg-accent-pressed"
61
65
  ].join(" ")
62
66
  };
63
67
 
@@ -179,10 +183,10 @@ function Button({
179
183
  ...props
180
184
  }) {
181
185
  const { inGroup, position } = useInputGroup();
182
- const groupGhost = inGroup && variant === "ghost" ? "bg-(--color-surface-default) text-(--color-text-secondary) border border-(--color-border-default) hover:bg-(--color-surface-hover) hover:text-(--color-text-primary) hover:border-(--color-border-strong) pressed:bg-(--color-surface-pressed) pressed:text-(--color-text-primary)" : "";
186
+ const groupGhost = inGroup && variant === "ghost" ? "bg-background text-muted-foreground border border-border hover:bg-accent hover:text-foreground hover:border-border pressed:bg-accent pressed:text-foreground" : "";
183
187
  const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-md";
184
188
  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
185
- const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
189
+ const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
186
190
  return /* @__PURE__ */ jsxs2(
187
191
  AriaButton,
188
192
  {
@@ -231,8 +235,8 @@ var tooltipCx = [
231
235
  // Natural content width (capped at max-w-xs): being positioned near the
232
236
  // right viewport edge must shift the tooltip left, not squeeze its layout.
233
237
  "w-max max-w-xs",
234
- "bg-(--color-surface-overlay) backdrop-blur-sm",
235
- "text-(--color-text-inverse) text-sm",
238
+ "bg-overlay backdrop-blur-sm",
239
+ "text-primary-foreground text-sm",
236
240
  "pointer-events-none"
237
241
  ].join(" ");
238
242
  function Tooltip({ content, children }) {
@@ -435,7 +439,7 @@ function useOverflowDetection(ref) {
435
439
  // src/components/TruncatedText/TruncatedText.tsx
436
440
  import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
437
441
  var spanCx = "truncate overflow-hidden whitespace-nowrap block min-w-0 w-full";
438
- var copyCx = "hover:bg-(--color-surface-hover) transition-colors rounded cursor-pointer";
442
+ var copyCx = "hover:bg-accent transition-colors rounded cursor-pointer";
439
443
  var leftStyle = { direction: "rtl", textAlign: "left" };
440
444
  var pinScroll = (e) => {
441
445
  if (e.currentTarget.scrollLeft !== 0) e.currentTarget.scrollLeft = 0;
@@ -451,7 +455,7 @@ var CopiedOverlay = () => /* @__PURE__ */ jsx5(
451
455
  {
452
456
  role: "status",
453
457
  "aria-live": "polite",
454
- className: "absolute inset-0 flex items-center text-(--color-text-secondary) pointer-events-none",
458
+ className: "absolute inset-0 flex items-center text-muted-foreground pointer-events-none",
455
459
  children: "Copied"
456
460
  }
457
461
  );
@@ -585,10 +589,10 @@ function IconButton({
585
589
  ...props
586
590
  }) {
587
591
  const { inGroup, position } = useInputGroup();
588
- const groupGhost = inGroup && variant === "ghost" ? "bg-(--color-surface-default) text-(--color-text-secondary) border border-(--color-border-default) hover:bg-(--color-surface-hover) hover:text-(--color-text-primary) hover:border-(--color-border-strong) pressed:bg-(--color-surface-pressed) pressed:text-(--color-text-primary)" : "";
592
+ const groupGhost = inGroup && variant === "ghost" ? "bg-background text-muted-foreground border border-border hover:bg-accent hover:text-foreground hover:border-border pressed:bg-accent pressed:text-foreground" : "";
589
593
  const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-md";
590
594
  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
591
- const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
595
+ const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
592
596
  const button = /* @__PURE__ */ jsx6(
593
597
  AriaButton2,
594
598
  {
@@ -637,7 +641,7 @@ function Label({ isRequired, children, className, ...props }) {
637
641
  className: [
638
642
  "text-sm",
639
643
  "font-medium",
640
- "text-(--color-text-primary)",
644
+ "text-foreground",
641
645
  className
642
646
  ].filter(Boolean).join(" "),
643
647
  children: [
@@ -646,7 +650,7 @@ function Label({ isRequired, children, className, ...props }) {
646
650
  "span",
647
651
  {
648
652
  "aria-hidden": "true",
649
- className: "ml-0.5 text-(--color-text-danger)",
653
+ className: "ml-0.5 text-destructive",
650
654
  children: "*"
651
655
  }
652
656
  )
@@ -692,7 +696,7 @@ function Input({
692
696
  const Field = FieldProp;
693
697
  const isInvalid = !!errorMessage;
694
698
  const { inGroup, position } = useInputGroup();
695
- const borderColor = isInvalid ? "border-(--color-border-danger)" : "border-(--color-border-default) hover:border-(--color-border-strong)";
699
+ const borderColor = isInvalid ? "border-destructive-border" : "border-border hover:border-border";
696
700
  const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-md";
697
701
  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
698
702
  return /* @__PURE__ */ jsxs6(
@@ -718,10 +722,10 @@ function Input({
718
722
  "flex items-center overflow-hidden",
719
723
  radiusClass,
720
724
  "border",
721
- "bg-(--color-surface-default)",
725
+ "bg-background",
722
726
  "outline-none transition-colors",
723
727
  borderColor,
724
- "focus-within:ring-2 focus-within:ring-(--color-border-focus) focus-within:border-(--color-border-focus)",
728
+ "focus-within:ring-2 focus-within:ring-ring focus-within:border-ring",
725
729
  inGroup && "focus-within:z-10",
726
730
  isDisabled && "opacity-50 pointer-events-none"
727
731
  ),
@@ -731,9 +735,9 @@ function Input({
731
735
  {
732
736
  className: twMerge2(
733
737
  "self-stretch flex items-center shrink-0 select-none",
734
- "bg-(--color-surface-subtle)",
735
- "border-r border-r-(--color-border-default)",
736
- "text-(--color-text-secondary)",
738
+ "bg-card",
739
+ "border-r border-r-border",
740
+ "text-muted-foreground",
737
741
  sizeStyles[size]
738
742
  ),
739
743
  children: prefix
@@ -747,8 +751,8 @@ function Input({
747
751
  "w-full bg-transparent",
748
752
  sizeStyles[size],
749
753
  alignClasses[align],
750
- "text-(--color-text-primary)",
751
- "placeholder:text-(--color-text-tertiary)",
754
+ "text-foreground",
755
+ "placeholder:text-muted-foreground",
752
756
  "outline-none border-none"
753
757
  )
754
758
  }
@@ -765,12 +769,12 @@ function Input({
765
769
  alignClasses[align],
766
770
  radiusClass,
767
771
  "border",
768
- "text-(--color-text-primary)",
769
- "bg-(--color-surface-default)",
770
- "placeholder:text-(--color-text-tertiary)",
772
+ "text-foreground",
773
+ "bg-background",
774
+ "placeholder:text-muted-foreground",
771
775
  "outline-none transition-colors",
772
776
  borderColor,
773
- "focus:ring-2 focus:ring-(--color-border-focus) focus:border-(--color-border-focus)",
777
+ "focus:ring-2 focus:ring-ring focus:border-ring",
774
778
  inGroup && "focus:z-10",
775
779
  "disabled:opacity-50 disabled:pointer-events-none"
776
780
  )
@@ -780,7 +784,7 @@ function Input({
780
784
  Text,
781
785
  {
782
786
  slot: "description",
783
- className: "text-sm text-(--color-text-secondary)",
787
+ className: "text-sm text-muted-foreground",
784
788
  children: description
785
789
  }
786
790
  ),
@@ -789,7 +793,7 @@ function Input({
789
793
  {
790
794
  slot: "errorMessage",
791
795
  role: "alert",
792
- className: "text-sm text-(--color-text-danger)",
796
+ className: "text-sm text-destructive",
793
797
  children: errorMessage
794
798
  }
795
799
  )
@@ -845,12 +849,12 @@ function Select({
845
849
  w-full rounded-md
846
850
  text-left
847
851
  border outline-none transition-colors
848
- focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2
852
+ focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
849
853
  cursor-pointer disabled:opacity-50 disabled:pointer-events-none
850
- bg-(--color-surface-default)
854
+ bg-background
851
855
  `,
852
856
  sizeStyles[size],
853
- hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)"
857
+ hasError ? "border-destructive-border" : "border-border"
854
858
  ),
855
859
  children: [
856
860
  /* @__PURE__ */ jsx9(
@@ -858,7 +862,7 @@ function Select({
858
862
  {
859
863
  className: twMerge3(
860
864
  renderItem ? "min-w-0" : "truncate",
861
- "data-placeholder:text-(--color-text-tertiary)"
865
+ "data-placeholder:text-muted-foreground"
862
866
  ),
863
867
  children: ({ selectedItem, isPlaceholder }) => {
864
868
  if (isPlaceholder) return placeholder;
@@ -872,7 +876,7 @@ function Select({
872
876
  {
873
877
  "aria-hidden": true,
874
878
  className: twMerge3(
875
- "shrink-0 text-(--color-text-secondary)",
879
+ "shrink-0 text-muted-foreground",
876
880
  size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
877
881
  )
878
882
  }
@@ -880,13 +884,13 @@ function Select({
880
884
  ]
881
885
  }
882
886
  ),
883
- description && /* @__PURE__ */ jsx9(Text2, { slot: "description", className: "text-sm text-(--color-text-secondary)", children: description }),
887
+ description && /* @__PURE__ */ jsx9(Text2, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
884
888
  hasError && /* @__PURE__ */ jsx9(
885
889
  Text2,
886
890
  {
887
891
  slot: "errorMessage",
888
892
  role: "alert",
889
- className: "text-sm text-(--color-text-danger)",
893
+ className: "text-sm text-destructive",
890
894
  children: errorMessage
891
895
  }
892
896
  ),
@@ -896,8 +900,8 @@ function Select({
896
900
  className: twMerge3(
897
901
  "w-(--trigger-width)",
898
902
  "rounded-md",
899
- "border border-(--color-border-default)",
900
- "bg-(--color-surface-default)",
903
+ "border border-border",
904
+ "bg-background",
901
905
  "shadow-lg",
902
906
  "overflow-auto",
903
907
  "entering:animate-in entering:fade-in",
@@ -912,17 +916,17 @@ function Select({
912
916
  `
913
917
  flex items-center justify-between gap-2
914
918
  rounded-sm
915
- text-(--color-text-primary)
919
+ text-foreground
916
920
  cursor-pointer outline-none
917
- hover:bg-(--color-surface-muted)
918
- focus-visible:bg-(--color-surface-muted)
919
- selected:text-(--color-action-primary) selected:font-medium
921
+ hover:bg-muted
922
+ focus-visible:bg-muted
923
+ selected:text-primary selected:font-medium
920
924
  `,
921
925
  sizeStyles[size]
922
926
  ),
923
927
  children: ({ isSelected }) => /* @__PURE__ */ jsxs7(Fragment, { children: [
924
928
  /* @__PURE__ */ jsx9("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
925
- isSelected && /* @__PURE__ */ jsx9(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
929
+ isSelected && /* @__PURE__ */ jsx9(Check, { className: "h-4 w-4 shrink-0 text-primary" })
926
930
  ] })
927
931
  }
928
932
  ) })
@@ -953,7 +957,7 @@ function Table({ size = "comfortable", className, ...props }) {
953
957
  {
954
958
  ...props,
955
959
  className: [
956
- "w-full border-collapse text-(--font-size-sm) text-(--color-text-primary)",
960
+ "w-full border-collapse text-(--font-size-sm) text-foreground",
957
961
  tableSizeClass[size],
958
962
  className
959
963
  ].filter(Boolean).join(" ")
@@ -969,14 +973,14 @@ function Column(props) {
969
973
  {
970
974
  ...props,
971
975
  className: [
972
- "px-3 py-2 text-left font-semibold text-(--color-text-secondary)",
973
- "border-b-2 border-(--color-border-default)",
976
+ "px-3 py-2 text-left font-semibold text-muted-foreground",
977
+ "border-b-2 border-border",
974
978
  "cursor-default select-none outline-none",
975
- "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
979
+ "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
976
980
  ].join(" "),
977
981
  children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs8("span", { className: "inline-flex items-center gap-1", children: [
978
982
  props.children,
979
- allowsSorting && /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
983
+ allowsSorting && /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "text-muted-foreground", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
980
984
  ] })
981
985
  }
982
986
  );
@@ -990,11 +994,11 @@ function Row(props) {
990
994
  {
991
995
  ...props,
992
996
  className: [
993
- "border-b border-(--color-border-default)",
994
- "even:bg-(--color-surface-subtle)",
995
- "hover:bg-(--color-surface-muted)",
997
+ "border-b border-border",
998
+ "even:bg-card",
999
+ "hover:bg-muted",
996
1000
  "outline-none",
997
- "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]",
1001
+ "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
998
1002
  "transition-colors"
999
1003
  ].join(" ")
1000
1004
  }
@@ -1007,9 +1011,9 @@ function Cell(props) {
1007
1011
  ...props,
1008
1012
  className: [
1009
1013
  "px-3 py-(--table-row-py)",
1010
- "text-(--color-text-primary)",
1014
+ "text-foreground",
1011
1015
  "outline-none",
1012
- "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
1016
+ "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
1013
1017
  ].join(" ")
1014
1018
  }
1015
1019
  );
@@ -1046,10 +1050,10 @@ function Dialog({
1046
1050
  onOpenChange,
1047
1051
  isDismissable,
1048
1052
  className: [
1049
- "fixed inset-0 z-50 bg-(--color-overlay-backdrop) backdrop-blur-sm",
1053
+ "fixed inset-0 z-50 bg-backdrop backdrop-blur-sm",
1050
1054
  "flex items-center justify-center",
1051
- "data-[entering]:animate-in data-[entering]:fade-in",
1052
- "data-[exiting]:animate-out data-[exiting]:fade-out"
1055
+ "entering:animate-in entering:fade-in",
1056
+ "exiting:animate-out exiting:fade-out"
1053
1057
  ].join(" "),
1054
1058
  children: /* @__PURE__ */ jsx11(
1055
1059
  Modal,
@@ -1057,18 +1061,18 @@ function Dialog({
1057
1061
  className: [
1058
1062
  "w-full mx-4",
1059
1063
  sizeStyles2[size],
1060
- "bg-(--color-surface-default) rounded-lg shadow-xl max-h-[85vh] flex flex-col",
1061
- "data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
1062
- "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
1064
+ "bg-background rounded-lg shadow-xl max-h-[85vh] flex flex-col",
1065
+ "entering:animate-in entering:zoom-in-95 entering:fade-in",
1066
+ "exiting:animate-out exiting:zoom-out-95 exiting:fade-out",
1063
1067
  className
1064
1068
  ].filter(Boolean).join(" "),
1065
1069
  children: /* @__PURE__ */ jsx11(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs9(Fragment2, { children: [
1066
- /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
1070
+ /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
1067
1071
  /* @__PURE__ */ jsx11(
1068
1072
  Heading,
1069
1073
  {
1070
1074
  slot: "title",
1071
- className: "text-lg font-semibold text-(--color-text-primary)",
1075
+ className: "text-lg font-semibold text-foreground",
1072
1076
  children: title
1073
1077
  }
1074
1078
  ),
@@ -1079,8 +1083,8 @@ function Dialog({
1079
1083
  onClick: close,
1080
1084
  className: [
1081
1085
  "inline-flex items-center justify-center rounded-sm p-1",
1082
- "text-(--color-text-secondary) hover:text-(--color-text-primary) hover:bg-(--color-surface-muted)",
1083
- "outline-none focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1086
+ "text-muted-foreground hover:text-foreground hover:bg-muted",
1087
+ "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
1084
1088
  "transition-colors"
1085
1089
  ].join(" "),
1086
1090
  "aria-label": "Close",
@@ -1121,18 +1125,18 @@ var defaultDuration = {
1121
1125
  var variantConfig = {
1122
1126
  success: {
1123
1127
  icon: CheckCircle,
1124
- containerClass: "bg-(--color-surface-success) border-(--color-border-success) text-(--color-text-success)",
1125
- iconClass: "text-(--color-action-success)"
1128
+ containerClass: "bg-success-surface border-success-border text-success",
1129
+ iconClass: "text-success"
1126
1130
  },
1127
1131
  error: {
1128
1132
  icon: XCircle,
1129
- containerClass: "bg-(--color-surface-danger) border-(--color-border-danger) text-(--color-text-danger)",
1130
- iconClass: "text-(--color-action-danger)"
1133
+ containerClass: "bg-destructive-surface border-destructive-border text-destructive",
1134
+ iconClass: "text-destructive"
1131
1135
  },
1132
1136
  info: {
1133
1137
  icon: Info,
1134
- containerClass: "bg-(--color-surface-info) border-(--color-border-info) text-(--color-text-info)",
1135
- iconClass: "text-(--color-text-info)"
1138
+ containerClass: "bg-info-surface border-info-border text-info",
1139
+ iconClass: "text-info"
1136
1140
  }
1137
1141
  };
1138
1142
  var PlacementContext = createContext2("bottom-right");
@@ -1275,9 +1279,9 @@ function EmptyState({
1275
1279
  className
1276
1280
  ].filter(Boolean).join(" "),
1277
1281
  children: [
1278
- icon && /* @__PURE__ */ jsx14(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
1279
- /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
1280
- description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
1282
+ icon && /* @__PURE__ */ jsx14(Icon, { icon, size: "xl", className: "text-muted-foreground" }),
1283
+ /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-foreground mt-4", children: title }),
1284
+ description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground mt-2 max-w-sm", children: description }),
1281
1285
  action && /* @__PURE__ */ jsx14("div", { className: "mt-6", children: action })
1282
1286
  ]
1283
1287
  }
@@ -1296,7 +1300,7 @@ function Checkbox({ children, className, ...props }) {
1296
1300
  {
1297
1301
  ...props,
1298
1302
  className: [
1299
- "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1303
+ "group flex items-center gap-2 text-sm text-foreground cursor-pointer",
1300
1304
  "disabled:opacity-50 disabled:cursor-default",
1301
1305
  className
1302
1306
  ].filter(Boolean).join(" "),
@@ -1307,12 +1311,12 @@ function Checkbox({ children, className, ...props }) {
1307
1311
  className: [
1308
1312
  "flex items-center justify-center w-6 h-6 shrink-0",
1309
1313
  "rounded-sm border transition-colors",
1310
- "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1311
- isSelected || isIndeterminate ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) group-hover:border-(--color-border-strong)"
1314
+ "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
1315
+ isSelected || isIndeterminate ? "bg-primary border-primary" : "bg-background border-border group-hover:border-border"
1312
1316
  ].join(" "),
1313
1317
  children: [
1314
- isSelected && /* @__PURE__ */ jsx15(Check2, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
1315
- isIndeterminate && /* @__PURE__ */ jsx15("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
1318
+ isSelected && /* @__PURE__ */ jsx15(Check2, { className: "w-4 h-4 text-primary-foreground", strokeWidth: 3 }),
1319
+ isIndeterminate && /* @__PURE__ */ jsx15("div", { className: "w-3 h-0.5 bg-primary-foreground rounded-full" })
1316
1320
  ]
1317
1321
  }
1318
1322
  ),
@@ -1328,9 +1332,9 @@ import {
1328
1332
  } from "react-aria-components";
1329
1333
  import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
1330
1334
  var trackColorMap = {
1331
- primary: "bg-(--color-action-primary)",
1332
- success: "bg-(--color-action-success)",
1333
- destructive: "bg-(--color-action-danger)"
1335
+ primary: "bg-primary",
1336
+ success: "bg-success",
1337
+ destructive: "bg-destructive"
1334
1338
  };
1335
1339
  var presetColors = new Set(Object.keys(trackColorMap));
1336
1340
  function isPresetColor(color) {
@@ -1348,7 +1352,7 @@ function Switch({
1348
1352
  {
1349
1353
  ...props,
1350
1354
  className: [
1351
- "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1355
+ "group flex items-center gap-2 text-sm text-foreground cursor-pointer",
1352
1356
  "disabled:opacity-50 disabled:cursor-default",
1353
1357
  className
1354
1358
  ].filter(Boolean).join(" "),
@@ -1358,15 +1362,15 @@ function Switch({
1358
1362
  {
1359
1363
  className: [
1360
1364
  "w-9 h-5 rounded-full transition-colors shrink-0 p-0.5",
1361
- "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1362
- isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-(--color-border-strong)" : ""
1365
+ "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
1366
+ isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-border" : ""
1363
1367
  ].join(" "),
1364
1368
  style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
1365
1369
  children: /* @__PURE__ */ jsx16(
1366
1370
  "div",
1367
1371
  {
1368
1372
  className: [
1369
- "w-4 h-4 rounded-full bg-(--color-surface-default) transition-transform shadow-sm",
1373
+ "w-4 h-4 rounded-full bg-background transition-transform shadow-sm",
1370
1374
  isSelected ? "translate-x-4" : "translate-x-0"
1371
1375
  ].join(" ")
1372
1376
  }
@@ -1405,7 +1409,7 @@ function Radio({ children, className, ...props }) {
1405
1409
  {
1406
1410
  ...props,
1407
1411
  className: [
1408
- "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1412
+ "group flex items-center gap-2 text-sm text-foreground cursor-pointer",
1409
1413
  "disabled:opacity-50 disabled:cursor-default",
1410
1414
  className
1411
1415
  ].filter(Boolean).join(" "),
@@ -1416,10 +1420,10 @@ function Radio({ children, className, ...props }) {
1416
1420
  className: [
1417
1421
  "flex items-center justify-center w-5 h-5 shrink-0",
1418
1422
  "rounded-full border-2 transition-colors",
1419
- "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1420
- isSelected ? "border-(--color-action-primary)" : "border-(--color-border-default) group-hover:border-(--color-border-strong)"
1423
+ "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
1424
+ isSelected ? "border-primary" : "border-border group-hover:border-border"
1421
1425
  ].join(" "),
1422
- children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
1426
+ children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
1423
1427
  }
1424
1428
  ),
1425
1429
  children && /* @__PURE__ */ jsx17("span", { children })
@@ -1443,8 +1447,8 @@ function RadioButton({ children, className, ...props }) {
1443
1447
  className: [
1444
1448
  "px-4 py-2 text-sm font-medium",
1445
1449
  "rounded-md border transition-colors text-center",
1446
- "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1447
- isSelected ? "bg-(--color-action-primary) border-(--color-action-primary) text-(--color-text-inverse)" : "bg-(--color-surface-default) border-(--color-border-default) text-(--color-text-primary) hover:border-(--color-border-strong)"
1450
+ "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
1451
+ isSelected ? "bg-primary border-primary text-primary-foreground" : "bg-background border-border text-foreground hover:border-border"
1448
1452
  ].join(" "),
1449
1453
  children
1450
1454
  }
@@ -1471,7 +1475,7 @@ function Fieldset({ legend, children, className }) {
1471
1475
  className: [
1472
1476
  "text-lg",
1473
1477
  "font-semibold",
1474
- "text-(--color-text-primary)",
1478
+ "text-foreground",
1475
1479
  "p-0"
1476
1480
  ].join(" "),
1477
1481
  children: legend
@@ -1533,9 +1537,9 @@ function InputAddon({ children, className }) {
1533
1537
  className: [
1534
1538
  "flex items-center self-stretch shrink-0 select-none",
1535
1539
  "px-3 py-2 text-base",
1536
- "bg-(--color-surface-subtle)",
1537
- "text-(--color-text-secondary)",
1538
- "border border-(--color-border-default)",
1540
+ "bg-card",
1541
+ "text-muted-foreground",
1542
+ "border border-border",
1539
1543
  radiusClass,
1540
1544
  marginClass,
1541
1545
  className
@@ -1582,7 +1586,7 @@ function Heading2({
1582
1586
  {
1583
1587
  className: twMerge4(
1584
1588
  weightStyles[weight],
1585
- "text-(--color-text-primary)",
1589
+ "text-foreground",
1586
1590
  sizeStyles3[resolvedSize],
1587
1591
  className
1588
1592
  ),
@@ -1619,8 +1623,8 @@ var variantStyles2 = {
1619
1623
  "hover:text-teal-800"
1620
1624
  ].join(" "),
1621
1625
  subtle: [
1622
- "text-(--color-text-secondary) no-underline",
1623
- "hover:underline hover:text-(--color-text-primary)"
1626
+ "text-muted-foreground no-underline",
1627
+ "hover:underline hover:text-foreground"
1624
1628
  ].join(" ")
1625
1629
  };
1626
1630
  function Link({
@@ -1634,7 +1638,7 @@ function Link({
1634
1638
  ...props,
1635
1639
  className: [
1636
1640
  "outline-none transition-colors",
1637
- "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
1641
+ "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm",
1638
1642
  variantStyles2[variant],
1639
1643
  className
1640
1644
  ].filter(Boolean).join(" ")
@@ -1670,12 +1674,12 @@ function Breadcrumbs({ items, className }) {
1670
1674
  "flex items-center gap-1",
1671
1675
  isLast ? "min-w-0" : "shrink-0"
1672
1676
  ].join(" "),
1673
- children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
1677
+ children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
1674
1678
  /* @__PURE__ */ jsx23(
1675
1679
  Link2,
1676
1680
  {
1677
1681
  href: item.href,
1678
- className: "whitespace-nowrap text-(--color-text-secondary) outline-none transition-colors hover:text-(--color-text-primary) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
1682
+ className: "whitespace-nowrap text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm",
1679
1683
  children: item.label
1680
1684
  }
1681
1685
  ),
@@ -1729,7 +1733,7 @@ function ButtonLink({
1729
1733
  "font-medium",
1730
1734
  "leading-tight",
1731
1735
  "outline-none transition-colors no-underline",
1732
- "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1736
+ "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
1733
1737
  variantStyles[variant],
1734
1738
  sizeStyles[size],
1735
1739
  className
@@ -1765,7 +1769,7 @@ function IconButtonLink({
1765
1769
  "inline-flex items-center justify-center cursor-pointer",
1766
1770
  "rounded-md",
1767
1771
  "outline-none transition-colors no-underline",
1768
- "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1772
+ "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
1769
1773
  variantStyles[variant],
1770
1774
  squareSizeStyles2[size],
1771
1775
  className
@@ -1794,29 +1798,29 @@ var squareSizeStyles3 = {
1794
1798
  var variantStyles3 = {
1795
1799
  default: {
1796
1800
  base: [
1797
- "bg-transparent text-(--color-text-primary)",
1798
- "hover:bg-(--color-surface-hover)",
1799
- "pressed:bg-(--color-surface-pressed)"
1801
+ "bg-transparent text-foreground",
1802
+ "hover:bg-accent",
1803
+ "pressed:bg-accent"
1800
1804
  ].join(" "),
1801
- selected: "bg-(--color-surface-pressed) text-(--color-text-primary)"
1805
+ selected: "bg-accent text-foreground"
1802
1806
  },
1803
1807
  primary: {
1804
1808
  base: [
1805
- "bg-transparent text-(--color-text-primary)",
1806
- "hover:bg-(--color-surface-hover)",
1807
- "pressed:bg-(--color-surface-pressed)"
1809
+ "bg-transparent text-foreground",
1810
+ "hover:bg-accent",
1811
+ "pressed:bg-accent"
1808
1812
  ].join(" "),
1809
- selected: "bg-(--color-action-primary-active) text-(--color-text-inverse)"
1813
+ selected: "bg-primary-pressed text-primary-foreground"
1810
1814
  },
1811
1815
  outlined: {
1812
1816
  base: [
1813
- "bg-(--color-surface-default) text-(--color-text-primary)",
1814
- "border border-(--color-border-default)",
1815
- "hover:bg-(--color-surface-subtle)",
1816
- "pressed:bg-(--color-surface-muted)"
1817
+ "bg-background text-foreground",
1818
+ "border border-border",
1819
+ "hover:bg-card",
1820
+ "pressed:bg-muted"
1817
1821
  ].join(" "),
1818
1822
  selected: [
1819
- "bg-neutral-800 text-(--color-text-inverse)",
1823
+ "bg-neutral-800 text-primary-foreground",
1820
1824
  "border border-neutral-800"
1821
1825
  ].join(" ")
1822
1826
  }
@@ -1839,7 +1843,7 @@ function ToggleButton({
1839
1843
  "font-medium",
1840
1844
  "leading-tight",
1841
1845
  "outline-none transition-colors",
1842
- "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1846
+ "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
1843
1847
  "disabled:opacity-50 disabled:pointer-events-none",
1844
1848
  isSquare ? squareSizeStyles3[size] : sizeStyles[size],
1845
1849
  isSelected ? styles.selected : styles.base,
@@ -1882,7 +1886,7 @@ function ToggleButtonGroup({
1882
1886
  ...props,
1883
1887
  orientation: "horizontal",
1884
1888
  className: twMerge7(
1885
- "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
1889
+ "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
1886
1890
  className
1887
1891
  ),
1888
1892
  children
@@ -1907,13 +1911,13 @@ function ToggleButtonGroupItem({
1907
1911
  "font-medium",
1908
1912
  "outline-none transition-colors cursor-pointer",
1909
1913
  // Focus ring
1910
- "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
1914
+ "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
1911
1915
  // Disabled
1912
1916
  isDisabled && "opacity-50 pointer-events-none",
1913
1917
  // Size
1914
1918
  isIconOnly ? iconOnlySizeStyles[size] : sizeStyles4[size],
1915
1919
  // Selected state
1916
- isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
1920
+ isSelected ? "bg-background text-foreground shadow-sm font-semibold" : isPressed ? "bg-card text-foreground" : isHovered ? "bg-card text-foreground" : "bg-transparent text-muted-foreground",
1917
1921
  className
1918
1922
  ),
1919
1923
  children
@@ -1930,8 +1934,8 @@ import {
1930
1934
  } from "react-aria-components";
1931
1935
  import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
1932
1936
  var popoverStyles = [
1933
- "bg-(--color-surface-default) rounded-md",
1934
- "shadow-lg border border-(--color-border-default)",
1937
+ "bg-background rounded-md",
1938
+ "shadow-lg border border-border",
1935
1939
  "py-1 min-w-48",
1936
1940
  "entering:animate-in entering:fade-in entering:zoom-in-95",
1937
1941
  "exiting:animate-out exiting:fade-out exiting:zoom-out-95"
@@ -1975,10 +1979,10 @@ function Menu({
1975
1979
  className: [
1976
1980
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
1977
1981
  "transition-colors",
1978
- "focus:bg-(--color-surface-muted)",
1979
- "hover:bg-(--color-surface-muted)",
1982
+ "focus:bg-muted",
1983
+ "hover:bg-muted",
1980
1984
  "disabled:opacity-50 disabled:pointer-events-none",
1981
- item.isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)"
1985
+ item.isDanger ? "text-destructive" : "text-foreground"
1982
1986
  ].filter(Boolean).join(" "),
1983
1987
  children: [
1984
1988
  item.icon && /* @__PURE__ */ jsx27(Icon, { icon: item.icon, size: "sm" }),
@@ -2030,10 +2034,10 @@ function MenuItem({
2030
2034
  className: [
2031
2035
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
2032
2036
  "transition-colors",
2033
- "focus:bg-(--color-surface-muted)",
2034
- "hover:bg-(--color-surface-muted)",
2037
+ "focus:bg-muted",
2038
+ "hover:bg-muted",
2035
2039
  "disabled:opacity-50 disabled:pointer-events-none",
2036
- isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)",
2040
+ isDanger ? "text-destructive" : "text-foreground",
2037
2041
  className
2038
2042
  ].filter(Boolean).join(" "),
2039
2043
  children: [
@@ -2065,15 +2069,15 @@ function MenuCheckboxItem({
2065
2069
  className: ({ isSelected }) => [
2066
2070
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
2067
2071
  "transition-colors",
2068
- "focus:bg-(--color-surface-muted)",
2069
- "hover:bg-(--color-surface-muted)",
2072
+ "focus:bg-muted",
2073
+ "hover:bg-muted",
2070
2074
  "disabled:opacity-50 disabled:pointer-events-none",
2071
- "text-(--color-text-primary)",
2075
+ "text-foreground",
2072
2076
  isSelected ? "font-medium" : "",
2073
2077
  className
2074
2078
  ].filter(Boolean).join(" "),
2075
2079
  children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
2076
- /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check3, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
2080
+ /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check3, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
2077
2081
  /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
2078
2082
  ] })
2079
2083
  }
@@ -2099,7 +2103,7 @@ function MenuSection({
2099
2103
  className: [
2100
2104
  "px-3 py-1.5",
2101
2105
  "text-xs font-semibold",
2102
- "text-(--color-text-secondary)",
2106
+ "text-muted-foreground",
2103
2107
  "uppercase tracking-wider",
2104
2108
  "select-none"
2105
2109
  ].join(" "),
@@ -2125,7 +2129,7 @@ function MenuSeparator({ className }) {
2125
2129
  Separator,
2126
2130
  {
2127
2131
  className: [
2128
- "border-t border-(--color-border-default) my-1",
2132
+ "border-t border-border my-1",
2129
2133
  className
2130
2134
  ].filter(Boolean).join(" ")
2131
2135
  }
@@ -2146,7 +2150,7 @@ function Popover3({ children, isOpen, onOpenChange }) {
2146
2150
  function PopoverTrigger({ children, className }) {
2147
2151
  const cx = `
2148
2152
  inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
2149
- focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm
2153
+ focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm
2150
2154
  `;
2151
2155
  return /* @__PURE__ */ jsx33(AriaButton3, { className: twMerge8(cx, className), children });
2152
2156
  }
@@ -2159,8 +2163,8 @@ function PopoverContent({
2159
2163
  }) {
2160
2164
  const cx = `
2161
2165
  z-50
2162
- bg-(--color-surface-default)
2163
- border border-(--color-border-default)
2166
+ bg-background
2167
+ border border-border
2164
2168
  rounded-md shadow-lg
2165
2169
  entering:animate-in entering:fade-in entering:duration-300
2166
2170
  exiting:animate-out exiting:fade-out exiting:duration-300
@@ -2226,8 +2230,8 @@ function TabList({
2226
2230
  ...props
2227
2231
  }) {
2228
2232
  const { variant } = useContext4(TabsContext);
2229
- const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-(--color-border-default)" : "inline-flex items-center bg-(--color-surface-muted) rounded-lg p-1 gap-1";
2230
- const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-(--color-border-default)" : "flex-col";
2233
+ const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-border" : "inline-flex items-center bg-muted rounded-lg p-1 gap-1";
2234
+ const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-border" : "flex-col";
2231
2235
  return /* @__PURE__ */ jsx34(
2232
2236
  AriaTabList,
2233
2237
  {
@@ -2250,7 +2254,7 @@ function Tab({ className, ...props }) {
2250
2254
  if (variant === "unstyled") {
2251
2255
  return twMerge9(
2252
2256
  "cursor-pointer outline-none",
2253
- "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
2257
+ "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
2254
2258
  isDisabled ? "opacity-50 pointer-events-none" : "",
2255
2259
  className
2256
2260
  );
@@ -2260,7 +2264,7 @@ function Tab({ className, ...props }) {
2260
2264
  "cursor-pointer outline-none transition-colors",
2261
2265
  "font-medium",
2262
2266
  // Focus ring
2263
- "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
2267
+ "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
2264
2268
  // Disabled
2265
2269
  isDisabled ? "opacity-50 pointer-events-none" : "",
2266
2270
  // Size
@@ -2287,14 +2291,14 @@ function getTabVariantStyles(variant, state) {
2287
2291
  "text-teal-700 font-semibold",
2288
2292
  // Bottom indicator via pseudo-element
2289
2293
  "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-teal-600"
2290
- ].join(" ") : state.isPressed ? "text-(--color-text-primary) bg-(--color-surface-muted)" : state.isHovered ? "text-(--color-text-primary) bg-(--color-surface-subtle)" : "text-(--color-text-secondary) bg-transparent"
2294
+ ].join(" ") : state.isPressed ? "text-foreground bg-muted" : state.isHovered ? "text-foreground bg-card" : "text-muted-foreground bg-transparent"
2291
2295
  ];
2292
2296
  }
2293
2297
  return [
2294
2298
  // Shape
2295
2299
  "rounded-md",
2296
2300
  // Color states
2297
- state.isSelected ? "text-(--color-text-primary) font-semibold bg-(--color-surface-default) shadow-sm" : state.isPressed ? "text-(--color-text-primary) bg-(--color-surface-subtle) shadow-none" : state.isHovered ? "text-(--color-text-primary) bg-(--color-surface-pressed)" : "text-(--color-text-secondary) bg-transparent"
2301
+ state.isSelected ? "text-foreground font-semibold bg-background shadow-sm" : state.isPressed ? "text-foreground bg-card shadow-none" : state.isHovered ? "text-foreground bg-accent" : "text-muted-foreground bg-transparent"
2298
2302
  ];
2299
2303
  }
2300
2304
  function TabPanel({ className, ...props }) {
@@ -2355,7 +2359,7 @@ function SegmentedControl({
2355
2359
  defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
2356
2360
  onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
2357
2361
  className: twMerge10(
2358
- "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
2362
+ "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
2359
2363
  className
2360
2364
  ),
2361
2365
  children
@@ -2378,13 +2382,13 @@ function SegmentedControlItem({
2378
2382
  "font-medium",
2379
2383
  "outline-none transition-colors cursor-pointer",
2380
2384
  // Focus ring
2381
- "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
2385
+ "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
2382
2386
  // Disabled
2383
2387
  isDisabled && "opacity-50 pointer-events-none",
2384
2388
  // Size
2385
2389
  sizeStyles6[size],
2386
2390
  // Selected state
2387
- isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
2391
+ isSelected ? "bg-background text-foreground shadow-sm font-semibold" : isPressed ? "bg-card text-foreground" : isHovered ? "bg-card text-foreground" : "bg-transparent text-muted-foreground",
2388
2392
  className
2389
2393
  )
2390
2394
  }
@@ -2458,9 +2462,9 @@ function Card({
2458
2462
  }) {
2459
2463
  const isInteractive = interactive || !!href || !!onPress;
2460
2464
  const containerClass = twMerge12(
2461
- "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
2462
- isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
2463
- (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
2465
+ "bg-background border border-border rounded-lg overflow-hidden shadow-sm",
2466
+ isInteractive && "transition-all hover:shadow-md hover:border-ring cursor-pointer",
2467
+ (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
2464
2468
  className
2465
2469
  );
2466
2470
  const handleKeyDown = useCallback3(
@@ -2477,7 +2481,7 @@ function Card({
2477
2481
  "div",
2478
2482
  {
2479
2483
  className: twMerge12(
2480
- "border-b border-(--color-border-default)",
2484
+ "border-b border-border",
2481
2485
  paddingStyles[padding]
2482
2486
  ),
2483
2487
  children: header
@@ -2488,7 +2492,7 @@ function Card({
2488
2492
  "div",
2489
2493
  {
2490
2494
  className: twMerge12(
2491
- "border-t border-(--color-border-default)",
2495
+ "border-t border-border",
2492
2496
  paddingStyles[padding]
2493
2497
  ),
2494
2498
  children: footer
@@ -2575,11 +2579,11 @@ function DeltaIndicator({
2575
2579
  {
2576
2580
  className: twMerge13(
2577
2581
  "inline-flex items-center gap-1 font-medium",
2578
- "text-(--color-text-tertiary)",
2582
+ "text-muted-foreground",
2579
2583
  className
2580
2584
  ),
2581
2585
  children: [
2582
- label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
2586
+ label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
2583
2587
  unavailableText
2584
2588
  ]
2585
2589
  }
@@ -2623,7 +2627,7 @@ function DeltaIndicator({
2623
2627
  className
2624
2628
  ),
2625
2629
  children: [
2626
- label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
2630
+ label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
2627
2631
  /* @__PURE__ */ jsx38(IconComponent, { size: 14, "aria-hidden": true }),
2628
2632
  valueText
2629
2633
  ]
@@ -2639,7 +2643,7 @@ var fillStyles = {
2639
2643
  success: "bg-(--color-progress-fill-success)",
2640
2644
  warning: "bg-(--color-progress-fill-warning)",
2641
2645
  danger: "bg-(--color-progress-fill-danger)",
2642
- neutral: "bg-(--color-text-secondary)"
2646
+ neutral: "bg-muted-foreground"
2643
2647
  };
2644
2648
  var sizeStyles8 = {
2645
2649
  sm: "h-1.5",
@@ -2658,8 +2662,8 @@ function ProgressBar({
2658
2662
  const clampedValue = Math.min(100, Math.max(0, value));
2659
2663
  return /* @__PURE__ */ jsxs25("div", { className: twMerge14("w-full", className), children: [
2660
2664
  (label || description || showValue) && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
2661
- /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
2662
- /* @__PURE__ */ jsx39("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
2665
+ /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-foreground", children: label }),
2666
+ /* @__PURE__ */ jsx39("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
2663
2667
  ] }),
2664
2668
  /* @__PURE__ */ jsx39(
2665
2669
  "div",
@@ -2702,26 +2706,26 @@ import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
2702
2706
  var variantConfig2 = {
2703
2707
  info: {
2704
2708
  icon: Info2,
2705
- containerClass: "bg-(--color-banner-info-bg) border-(--color-banner-info-border) text-(--color-banner-info-text)",
2706
- iconClass: "text-(--color-banner-info-icon)",
2709
+ containerClass: "bg-info-surface border-info-border text-info-surface-foreground",
2710
+ iconClass: "text-info",
2707
2711
  role: "status"
2708
2712
  },
2709
2713
  warning: {
2710
2714
  icon: AlertTriangle,
2711
- containerClass: "bg-(--color-banner-warning-bg) border-(--color-banner-warning-border) text-(--color-banner-warning-text)",
2712
- iconClass: "text-(--color-banner-warning-icon)",
2715
+ containerClass: "bg-warning-surface border-warning-border text-warning-surface-foreground",
2716
+ iconClass: "text-warning",
2713
2717
  role: "alert"
2714
2718
  },
2715
2719
  danger: {
2716
2720
  icon: AlertCircle,
2717
- containerClass: "bg-(--color-banner-danger-bg) border-(--color-banner-danger-border) text-(--color-banner-danger-text)",
2718
- iconClass: "text-(--color-banner-danger-icon)",
2721
+ containerClass: "bg-destructive-surface border-destructive-border text-destructive-surface-foreground",
2722
+ iconClass: "text-destructive",
2719
2723
  role: "alert"
2720
2724
  },
2721
2725
  success: {
2722
2726
  icon: CheckCircle2,
2723
- containerClass: "bg-(--color-banner-success-bg) border-(--color-banner-success-border) text-(--color-banner-success-text)",
2724
- iconClass: "text-(--color-banner-success-icon)",
2727
+ containerClass: "bg-success-surface border-success-border text-success-surface-foreground",
2728
+ iconClass: "text-success",
2725
2729
  role: "status"
2726
2730
  }
2727
2731
  };
@@ -2808,19 +2812,19 @@ function MetricCard({
2808
2812
  }) {
2809
2813
  const config = sizeConfig[size];
2810
2814
  const containerClass = twMerge16(
2811
- "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
2815
+ "bg-background border border-border rounded-lg shadow-sm",
2812
2816
  config.padding,
2813
- href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
2817
+ href && "block transition-shadow hover:shadow-md hover:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
2814
2818
  className
2815
2819
  );
2816
2820
  const content = /* @__PURE__ */ jsxs27(Fragment9, { children: [
2817
- /* @__PURE__ */ jsx41("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
2821
+ /* @__PURE__ */ jsx41("div", { className: twMerge16(config.labelClass, "text-muted-foreground"), children: label }),
2818
2822
  /* @__PURE__ */ jsx41(
2819
2823
  "div",
2820
2824
  {
2821
2825
  className: twMerge16(
2822
2826
  config.valueClass,
2823
- "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
2827
+ "font-semibold text-foreground mt-1 tabular-nums"
2824
2828
  ),
2825
2829
  children: value
2826
2830
  }
@@ -2985,7 +2989,7 @@ function CheckIcon() {
2985
2989
  "svg",
2986
2990
  {
2987
2991
  "aria-hidden": "true",
2988
- className: "h-4 w-4 text-(--color-text-inverse)",
2992
+ className: "h-4 w-4 text-primary-foreground",
2989
2993
  viewBox: "0 0 16 16",
2990
2994
  fill: "none",
2991
2995
  stroke: "currentColor",
@@ -3015,7 +3019,7 @@ function FormWizardProgress({ labels }) {
3015
3019
  "aria-hidden": "true",
3016
3020
  className: [
3017
3021
  "h-0.5 flex-1",
3018
- index <= currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
3022
+ index <= currentStep ? "bg-primary" : "bg-border"
3019
3023
  ].join(" ")
3020
3024
  }
3021
3025
  ) : /* @__PURE__ */ jsx46("div", { className: "flex-1", "aria-hidden": "true" }),
@@ -3026,9 +3030,9 @@ function FormWizardProgress({ labels }) {
3026
3030
  "flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
3027
3031
  "text-sm font-medium",
3028
3032
  "transition-colors",
3029
- isCompleted ? "bg-(--color-brand-primary) text-(--color-text-inverse)" : "",
3030
- isCurrent ? "border-2 border-(--color-brand-primary) bg-(--color-surface-default) text-(--color-brand-primary)" : "",
3031
- isFuture ? "border-2 border-(--color-border-default) bg-(--color-surface-default) text-(--color-text-tertiary)" : ""
3033
+ isCompleted ? "bg-primary text-primary-foreground" : "",
3034
+ isCurrent ? "border-2 border-primary bg-background text-primary" : "",
3035
+ isFuture ? "border-2 border-border bg-background text-muted-foreground" : ""
3032
3036
  ].join(" "),
3033
3037
  "aria-hidden": "true",
3034
3038
  children: isCompleted ? /* @__PURE__ */ jsx46(CheckIcon, {}) : index + 1
@@ -3040,7 +3044,7 @@ function FormWizardProgress({ labels }) {
3040
3044
  "aria-hidden": "true",
3041
3045
  className: [
3042
3046
  "h-0.5 flex-1",
3043
- index < currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
3047
+ index < currentStep ? "bg-primary" : "bg-border"
3044
3048
  ].join(" ")
3045
3049
  }
3046
3050
  ) : /* @__PURE__ */ jsx46("div", { className: "flex-1", "aria-hidden": "true" })
@@ -3050,7 +3054,7 @@ function FormWizardProgress({ labels }) {
3050
3054
  {
3051
3055
  className: [
3052
3056
  "mt-2 text-center text-sm",
3053
- isCurrent ? "font-semibold text-(--color-text-primary)" : "font-normal text-(--color-text-secondary)"
3057
+ isCurrent ? "font-semibold text-foreground" : "font-normal text-muted-foreground"
3054
3058
  ].join(" "),
3055
3059
  children: label
3056
3060
  }
@@ -3105,6 +3109,7 @@ var ColorPurple600 = "#6b2695";
3105
3109
  var ColorPurple700 = "#5c2483";
3106
3110
  var ColorPurple800 = "#4a1d6a";
3107
3111
  var ColorPurple900 = "#3a1754";
3112
+ var ColorPurple950 = "#2a0f3e";
3108
3113
  var ColorTeal50 = "#edf9f9";
3109
3114
  var ColorTeal100 = "#d0f0f0";
3110
3115
  var ColorTeal200 = "#a1e1e2";
@@ -3115,6 +3120,7 @@ var ColorTeal600 = "#2a9b9c";
3115
3120
  var ColorTeal700 = "#217d7e";
3116
3121
  var ColorTeal800 = "#1a6364";
3117
3122
  var ColorTeal900 = "#144d4e";
3123
+ var ColorTeal950 = "#0a2829";
3118
3124
  var ColorGreen50 = "#f0fdf4";
3119
3125
  var ColorGreen100 = "#dcfce7";
3120
3126
  var ColorGreen200 = "#bbf7d0";
@@ -3125,6 +3131,7 @@ var ColorGreen600 = "#16a34a";
3125
3131
  var ColorGreen700 = "#15803d";
3126
3132
  var ColorGreen800 = "#166534";
3127
3133
  var ColorGreen900 = "#14532d";
3134
+ var ColorGreen950 = "#052e16";
3128
3135
  var ColorRose50 = "#fff1f2";
3129
3136
  var ColorRose100 = "#ffe4e6";
3130
3137
  var ColorRose200 = "#fecdd3";
@@ -3135,6 +3142,7 @@ var ColorRose600 = "#e11d48";
3135
3142
  var ColorRose700 = "#be123c";
3136
3143
  var ColorRose800 = "#9f1239";
3137
3144
  var ColorRose900 = "#881337";
3145
+ var ColorRose950 = "#4c0519";
3138
3146
  var ColorSlate50 = "#f8fafc";
3139
3147
  var ColorSlate100 = "#f1f5f9";
3140
3148
  var ColorSlate200 = "#e2e8f0";
@@ -3145,6 +3153,7 @@ var ColorSlate600 = "#475569";
3145
3153
  var ColorSlate700 = "#334155";
3146
3154
  var ColorSlate800 = "#1e293b";
3147
3155
  var ColorSlate900 = "#0f172a";
3156
+ var ColorSlate950 = "#020617";
3148
3157
  var ColorAmber50 = "#fffbeb";
3149
3158
  var ColorAmber100 = "#fef3c7";
3150
3159
  var ColorAmber200 = "#fde68a";
@@ -3155,102 +3164,88 @@ var ColorAmber600 = "#d97706";
3155
3164
  var ColorAmber700 = "#b45309";
3156
3165
  var ColorAmber800 = "#92400e";
3157
3166
  var ColorAmber900 = "#78350f";
3158
- var ColorNeutral0 = "#ffffff";
3159
- var ColorNeutral50 = "#f9fafb";
3160
- var ColorNeutral100 = "#f3f4f6";
3161
- var ColorNeutral200 = "#e5e7eb";
3162
- var ColorNeutral300 = "#d1d5db";
3163
- var ColorNeutral400 = "#9ca3af";
3164
- var ColorNeutral500 = "#6b7280";
3165
- var ColorNeutral600 = "#4b5563";
3166
- var ColorNeutral700 = "#374151";
3167
- var ColorNeutral800 = "#1f2937";
3168
- var ColorNeutral900 = "#111827";
3169
- var ColorNeutral950 = "#030712";
3170
- var ColorNeutral1000 = "#000000";
3171
- var ColorBrandPrimary = "#5c2483";
3172
- var ColorBrandAccent = "#35b7b8";
3173
- var ColorActionPrimary = "#5c2483";
3174
- var ColorActionPrimaryHover = "#6b2695";
3175
- var ColorActionPrimaryActive = "#4a1d6a";
3176
- var ColorActionSecondary = "#5c2483";
3177
- var ColorActionSecondaryHover = "#6b2695";
3178
- var ColorActionDanger = "#e11d48";
3179
- var ColorActionDangerHover = "#be123c";
3180
- var ColorActionSuccess = "#16a34a";
3181
- var ColorActionSuccessHover = "#15803d";
3182
- var ColorActionInfo = "#475569";
3183
- var ColorActionInfoHover = "#334155";
3184
- var ColorActionDefault = "#1e293b";
3185
- var ColorActionDefaultHover = "#334155";
3186
- var ColorTextPrimary = "#111827";
3187
- var ColorTextSecondary = "#4b5563";
3188
- var ColorTextTertiary = "#9ca3af";
3189
- var ColorTextInverse = "#ffffff";
3190
- var ColorTextBrand = "#5c2483";
3191
- var ColorTextAccent = "#35b7b8";
3192
- var ColorTextDanger = "#e11d48";
3193
- var ColorTextSuccess = "#16a34a";
3194
- var ColorTextInfo = "#475569";
3195
- var ColorTextWarning = "#d97706";
3196
- var ColorSurfaceDefault = "#ffffff";
3197
- var ColorSurfaceSubtle = "#f9fafb";
3198
- var ColorSurfaceMuted = "#f3f4f6";
3199
- var ColorSurfaceBrand = "#5c2483";
3200
- var ColorSurfaceAccent = "#35b7b8";
3201
- var ColorSurfaceDanger = "#fff1f2";
3202
- var ColorSurfaceSuccess = "#f0fdf4";
3203
- var ColorSurfaceWarning = "#fffbeb";
3204
- var ColorSurfaceInfo = "#f8fafc";
3205
- var ColorSurfaceOverlay = "#000000cc";
3206
- var ColorSurfaceHover = "#f3f4f6";
3207
- var ColorSurfacePressed = "#e5e7eb";
3208
- var ColorSurfaceSelected = "#edf9f9";
3209
- var ColorSurfaceSelectedHover = "#d0f0f0";
3210
- var ColorBorderDefault = "#e5e7eb";
3211
- var ColorBorderStrong = "#d1d5db";
3212
- var ColorBorderBrand = "#5c2483";
3213
- var ColorBorderAccent = "#35b7b8";
3214
- var ColorBorderFocus = "#35b7b8";
3215
- var ColorBorderDanger = "#e11d48";
3216
- var ColorBorderSuccess = "#16a34a";
3217
- var ColorBorderInfo = "#94a3b8";
3218
- var ColorBorderWarning = "#d97706";
3219
- var ColorOverlayBackdrop = "#00000066";
3220
- var ColorStatusSuccess = "#22c55e";
3221
- var ColorStatusDanger = "#f43f5e";
3222
- var ColorStatusWarning = "#d97706";
3223
- var ColorStatusInfo = "#64748b";
3167
+ var ColorAmber950 = "#451a03";
3168
+ var ColorBlue50 = "#eff6ff";
3169
+ var ColorBlue100 = "#dbeafe";
3170
+ var ColorBlue200 = "#bfdbfe";
3171
+ var ColorBlue300 = "#93c5fd";
3172
+ var ColorBlue400 = "#60a5fa";
3173
+ var ColorBlue500 = "#3b82f6";
3174
+ var ColorBlue600 = "#2563eb";
3175
+ var ColorBlue700 = "#1d4ed8";
3176
+ var ColorBlue800 = "#1e40af";
3177
+ var ColorBlue900 = "#1e3a8a";
3178
+ var ColorBlue950 = "#172554";
3179
+ var ColorWhite = "#ffffff";
3180
+ var ColorBlack = "#000000";
3181
+ var ColorAlphaBlack80 = "#000000cc";
3182
+ var ColorAlphaBlack60 = "#00000099";
3183
+ var ColorAlphaBlack40 = "#00000066";
3184
+ var ColorAlphaBlack06 = "#0000000f";
3185
+ var ColorAlphaWhite10 = "#ffffff1a";
3186
+ var ColorAlphaWhite06 = "#ffffff0f";
3187
+ var ColorBackground = "#ffffff";
3188
+ var ColorForeground = "#0f172a";
3189
+ var ColorCard = "#f8fafc";
3190
+ var ColorMuted = "#f1f5f9";
3191
+ var ColorMutedForeground = "#475569";
3192
+ var ColorAccent = "#e2e8f0";
3193
+ var ColorAccentForeground = "#0f172a";
3194
+ var ColorAccentPressed = "#cbd5e1";
3195
+ var ColorBorder = "#e2e8f0";
3196
+ var ColorRing = "#35b7b8";
3197
+ var ColorOverlay = "#000000cc";
3198
+ var ColorBackdrop = "#00000066";
3199
+ var ColorPrimary = "#5c2483";
3200
+ var ColorPrimaryForeground = "#ffffff";
3201
+ var ColorPrimaryHover = "#4a1d6a";
3202
+ var ColorPrimaryPressed = "#3a1754";
3203
+ var ColorSecondary = "#217d7e";
3204
+ var ColorSecondaryForeground = "#ffffff";
3205
+ var ColorSecondaryHover = "#1a6364";
3206
+ var ColorSecondaryPressed = "#144d4e";
3207
+ var ColorDestructive = "#e11d48";
3208
+ var ColorDestructiveForeground = "#ffffff";
3209
+ var ColorDestructiveHover = "#be123c";
3210
+ var ColorDestructivePressed = "#9f1239";
3211
+ var ColorDestructiveSurface = "#fff1f2";
3212
+ var ColorDestructiveSurfaceForeground = "#be123c";
3213
+ var ColorDestructiveBorder = "#fecdd3";
3214
+ var ColorSuccess = "#15803d";
3215
+ var ColorSuccessForeground = "#ffffff";
3216
+ var ColorSuccessHover = "#166534";
3217
+ var ColorSuccessPressed = "#14532d";
3218
+ var ColorSuccessSurface = "#f0fdf4";
3219
+ var ColorSuccessSurfaceForeground = "#15803d";
3220
+ var ColorSuccessBorder = "#bbf7d0";
3221
+ var ColorWarning = "#f59e0b";
3222
+ var ColorWarningForeground = "#0f172a";
3223
+ var ColorWarningHover = "#fbbf24";
3224
+ var ColorWarningPressed = "#fcd34d";
3225
+ var ColorWarningSurface = "#fffbeb";
3226
+ var ColorWarningSurfaceForeground = "#92400e";
3227
+ var ColorWarningBorder = "#fde68a";
3228
+ var ColorInfo = "#2563eb";
3229
+ var ColorInfoForeground = "#ffffff";
3230
+ var ColorInfoHover = "#1d4ed8";
3231
+ var ColorInfoPressed = "#1e40af";
3232
+ var ColorInfoSurface = "#eff6ff";
3233
+ var ColorInfoSurfaceForeground = "#1d4ed8";
3234
+ var ColorInfoBorder = "#bfdbfe";
3224
3235
  var ColorDeltaIncreaseBg = "#fff1f2";
3225
3236
  var ColorDeltaIncreaseText = "#be123c";
3226
3237
  var ColorDeltaIncreaseIcon = "#f43f5e";
3227
3238
  var ColorDeltaDecreaseBg = "#f0fdf4";
3228
3239
  var ColorDeltaDecreaseText = "#15803d";
3229
3240
  var ColorDeltaDecreaseIcon = "#22c55e";
3230
- var ColorDeltaFlatBg = "#f3f4f6";
3231
- var ColorDeltaFlatText = "#6b7280";
3232
- var ColorDeltaFlatIcon = "#9ca3af";
3233
- var ColorProgressTrack = "#e5e7eb";
3241
+ var ColorDeltaFlatBg = "#f1f5f9";
3242
+ var ColorDeltaFlatText = "#64748b";
3243
+ var ColorDeltaFlatIcon = "#94a3b8";
3244
+ var ColorProgressTrack = "#e2e8f0";
3234
3245
  var ColorProgressFill = "#6b2695";
3235
3246
  var ColorProgressFillSuccess = "#22c55e";
3236
3247
  var ColorProgressFillWarning = "#f59e0b";
3237
3248
  var ColorProgressFillDanger = "#f43f5e";
3238
- var ColorBannerInfoBg = "#f8fafc";
3239
- var ColorBannerInfoText = "#334155";
3240
- var ColorBannerInfoBorder = "#e2e8f0";
3241
- var ColorBannerInfoIcon = "#64748b";
3242
- var ColorBannerWarningBg = "#fffbeb";
3243
- var ColorBannerWarningText = "#92400e";
3244
- var ColorBannerWarningBorder = "#fde68a";
3245
- var ColorBannerWarningIcon = "#f59e0b";
3246
- var ColorBannerDangerBg = "#fff1f2";
3247
- var ColorBannerDangerText = "#be123c";
3248
- var ColorBannerDangerBorder = "#fecdd3";
3249
- var ColorBannerDangerIcon = "#f43f5e";
3250
- var ColorBannerSuccessBg = "#f0fdf4";
3251
- var ColorBannerSuccessText = "#15803d";
3252
- var ColorBannerSuccessBorder = "#bbf7d0";
3253
- var ColorBannerSuccessIcon = "#22c55e";
3254
3249
  var ColorBadgePurpleBg = "#ead9f5";
3255
3250
  var ColorBadgePurpleText = "#5c2483";
3256
3251
  var ColorBadgeTealBg = "#d0f0f0";
@@ -3259,8 +3254,8 @@ var ColorBadgeSlateBg = "#f1f5f9";
3259
3254
  var ColorBadgeSlateText = "#334155";
3260
3255
  var ColorBadgeRoseBg = "#ffe4e6";
3261
3256
  var ColorBadgeRoseText = "#be123c";
3262
- var ColorBadgeNeutralBg = "#f3f4f6";
3263
- var ColorBadgeNeutralText = "#374151";
3257
+ var ColorBadgeNeutralBg = "#f1f5f9";
3258
+ var ColorBadgeNeutralText = "#334155";
3264
3259
  var ColorBadgeGreenBg = "#dcfce7";
3265
3260
  var ColorBadgeGreenText = "#15803d";
3266
3261
  var ColorBadgeAmberBg = "#fef3c7";
@@ -3312,19 +3307,15 @@ export {
3312
3307
  Card,
3313
3308
  Cell,
3314
3309
  Checkbox,
3315
- ColorActionDanger,
3316
- ColorActionDangerHover,
3317
- ColorActionDefault,
3318
- ColorActionDefaultHover,
3319
- ColorActionInfo,
3320
- ColorActionInfoHover,
3321
- ColorActionPrimary,
3322
- ColorActionPrimaryActive,
3323
- ColorActionPrimaryHover,
3324
- ColorActionSecondary,
3325
- ColorActionSecondaryHover,
3326
- ColorActionSuccess,
3327
- ColorActionSuccessHover,
3310
+ ColorAccent,
3311
+ ColorAccentForeground,
3312
+ ColorAccentPressed,
3313
+ ColorAlphaBlack06,
3314
+ ColorAlphaBlack40,
3315
+ ColorAlphaBlack60,
3316
+ ColorAlphaBlack80,
3317
+ ColorAlphaWhite06,
3318
+ ColorAlphaWhite10,
3328
3319
  ColorAmber100,
3329
3320
  ColorAmber200,
3330
3321
  ColorAmber300,
@@ -3335,6 +3326,9 @@ export {
3335
3326
  ColorAmber700,
3336
3327
  ColorAmber800,
3337
3328
  ColorAmber900,
3329
+ ColorAmber950,
3330
+ ColorBackdrop,
3331
+ ColorBackground,
3338
3332
  ColorBadgeAmberBg,
3339
3333
  ColorBadgeAmberText,
3340
3334
  ColorBadgeGreenBg,
@@ -3349,33 +3343,20 @@ export {
3349
3343
  ColorBadgeSlateText,
3350
3344
  ColorBadgeTealBg,
3351
3345
  ColorBadgeTealText,
3352
- ColorBannerDangerBg,
3353
- ColorBannerDangerBorder,
3354
- ColorBannerDangerIcon,
3355
- ColorBannerDangerText,
3356
- ColorBannerInfoBg,
3357
- ColorBannerInfoBorder,
3358
- ColorBannerInfoIcon,
3359
- ColorBannerInfoText,
3360
- ColorBannerSuccessBg,
3361
- ColorBannerSuccessBorder,
3362
- ColorBannerSuccessIcon,
3363
- ColorBannerSuccessText,
3364
- ColorBannerWarningBg,
3365
- ColorBannerWarningBorder,
3366
- ColorBannerWarningIcon,
3367
- ColorBannerWarningText,
3368
- ColorBorderAccent,
3369
- ColorBorderBrand,
3370
- ColorBorderDanger,
3371
- ColorBorderDefault,
3372
- ColorBorderFocus,
3373
- ColorBorderInfo,
3374
- ColorBorderStrong,
3375
- ColorBorderSuccess,
3376
- ColorBorderWarning,
3377
- ColorBrandAccent,
3378
- ColorBrandPrimary,
3346
+ ColorBlack,
3347
+ ColorBlue100,
3348
+ ColorBlue200,
3349
+ ColorBlue300,
3350
+ ColorBlue400,
3351
+ ColorBlue50,
3352
+ ColorBlue500,
3353
+ ColorBlue600,
3354
+ ColorBlue700,
3355
+ ColorBlue800,
3356
+ ColorBlue900,
3357
+ ColorBlue950,
3358
+ ColorBorder,
3359
+ ColorCard,
3379
3360
  ColorDeltaDecreaseBg,
3380
3361
  ColorDeltaDecreaseIcon,
3381
3362
  ColorDeltaDecreaseText,
@@ -3385,6 +3366,14 @@ export {
3385
3366
  ColorDeltaIncreaseBg,
3386
3367
  ColorDeltaIncreaseIcon,
3387
3368
  ColorDeltaIncreaseText,
3369
+ ColorDestructive,
3370
+ ColorDestructiveBorder,
3371
+ ColorDestructiveForeground,
3372
+ ColorDestructiveHover,
3373
+ ColorDestructivePressed,
3374
+ ColorDestructiveSurface,
3375
+ ColorDestructiveSurfaceForeground,
3376
+ ColorForeground,
3388
3377
  ColorGreen100,
3389
3378
  ColorGreen200,
3390
3379
  ColorGreen300,
@@ -3395,20 +3384,21 @@ export {
3395
3384
  ColorGreen700,
3396
3385
  ColorGreen800,
3397
3386
  ColorGreen900,
3398
- ColorNeutral0,
3399
- ColorNeutral100,
3400
- ColorNeutral1000,
3401
- ColorNeutral200,
3402
- ColorNeutral300,
3403
- ColorNeutral400,
3404
- ColorNeutral50,
3405
- ColorNeutral500,
3406
- ColorNeutral600,
3407
- ColorNeutral700,
3408
- ColorNeutral800,
3409
- ColorNeutral900,
3410
- ColorNeutral950,
3411
- ColorOverlayBackdrop,
3387
+ ColorGreen950,
3388
+ ColorInfo,
3389
+ ColorInfoBorder,
3390
+ ColorInfoForeground,
3391
+ ColorInfoHover,
3392
+ ColorInfoPressed,
3393
+ ColorInfoSurface,
3394
+ ColorInfoSurfaceForeground,
3395
+ ColorMuted,
3396
+ ColorMutedForeground,
3397
+ ColorOverlay,
3398
+ ColorPrimary,
3399
+ ColorPrimaryForeground,
3400
+ ColorPrimaryHover,
3401
+ ColorPrimaryPressed,
3412
3402
  ColorProgressFill,
3413
3403
  ColorProgressFillDanger,
3414
3404
  ColorProgressFillSuccess,
@@ -3424,6 +3414,8 @@ export {
3424
3414
  ColorPurple700,
3425
3415
  ColorPurple800,
3426
3416
  ColorPurple900,
3417
+ ColorPurple950,
3418
+ ColorRing,
3427
3419
  ColorRose100,
3428
3420
  ColorRose200,
3429
3421
  ColorRose300,
@@ -3434,6 +3426,11 @@ export {
3434
3426
  ColorRose700,
3435
3427
  ColorRose800,
3436
3428
  ColorRose900,
3429
+ ColorRose950,
3430
+ ColorSecondary,
3431
+ ColorSecondaryForeground,
3432
+ ColorSecondaryHover,
3433
+ ColorSecondaryPressed,
3437
3434
  ColorSlate100,
3438
3435
  ColorSlate200,
3439
3436
  ColorSlate300,
@@ -3444,24 +3441,14 @@ export {
3444
3441
  ColorSlate700,
3445
3442
  ColorSlate800,
3446
3443
  ColorSlate900,
3447
- ColorStatusDanger,
3448
- ColorStatusInfo,
3449
- ColorStatusSuccess,
3450
- ColorStatusWarning,
3451
- ColorSurfaceAccent,
3452
- ColorSurfaceBrand,
3453
- ColorSurfaceDanger,
3454
- ColorSurfaceDefault,
3455
- ColorSurfaceHover,
3456
- ColorSurfaceInfo,
3457
- ColorSurfaceMuted,
3458
- ColorSurfaceOverlay,
3459
- ColorSurfacePressed,
3460
- ColorSurfaceSelected,
3461
- ColorSurfaceSelectedHover,
3462
- ColorSurfaceSubtle,
3463
- ColorSurfaceSuccess,
3464
- ColorSurfaceWarning,
3444
+ ColorSlate950,
3445
+ ColorSuccess,
3446
+ ColorSuccessBorder,
3447
+ ColorSuccessForeground,
3448
+ ColorSuccessHover,
3449
+ ColorSuccessPressed,
3450
+ ColorSuccessSurface,
3451
+ ColorSuccessSurfaceForeground,
3465
3452
  ColorTeal100,
3466
3453
  ColorTeal200,
3467
3454
  ColorTeal300,
@@ -3472,16 +3459,15 @@ export {
3472
3459
  ColorTeal700,
3473
3460
  ColorTeal800,
3474
3461
  ColorTeal900,
3475
- ColorTextAccent,
3476
- ColorTextBrand,
3477
- ColorTextDanger,
3478
- ColorTextInfo,
3479
- ColorTextInverse,
3480
- ColorTextPrimary,
3481
- ColorTextSecondary,
3482
- ColorTextSuccess,
3483
- ColorTextTertiary,
3484
- ColorTextWarning,
3462
+ ColorTeal950,
3463
+ ColorWarning,
3464
+ ColorWarningBorder,
3465
+ ColorWarningForeground,
3466
+ ColorWarningHover,
3467
+ ColorWarningPressed,
3468
+ ColorWarningSurface,
3469
+ ColorWarningSurfaceForeground,
3470
+ ColorWhite,
3485
3471
  Column,
3486
3472
  DeltaIndicator,
3487
3473
  Dialog,