@lucasvu/scope-ui 0.0.4 → 0.0.5
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/AI_SETUP.md +18 -4
- package/README.md +20 -6
- package/bin/scope-ui-init.mjs +306 -20
- package/dist/index.cjs +237 -15
- package/dist/index.d.cts +406 -5
- package/dist/index.d.ts +406 -5
- package/dist/index.js +236 -16
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -875,7 +875,7 @@ type UiAiComponentDescriptor = {
|
|
|
875
875
|
declare const uiAiManifest: {
|
|
876
876
|
readonly packageName: "@lucasvu/scope-ui";
|
|
877
877
|
readonly styleImport: "@lucasvu/scope-ui/styles.css";
|
|
878
|
-
readonly rules: readonly ["Import the stylesheet once at the app entry before rendering any component.", "Prefer the canonical component for each intent instead of mixing legacy MainFe components.", "Use Input/Textarea/Select label props directly for simple fields; use Field only to wrap custom controls or grouped content.", "Use Select for small fixed option lists, SearchableSelect for larger local lists, Combobox for type-and-pick flows, and AsyncCombobox for remote search.", "Always provide a stable rowKey to DataTable and use sortMode=\"server\" when sorting happens on the backend.", "Prefer Card as the outer layout section and keep alerts, stats, and tables inside CardContent when building dashboards or forms.", "Do not import MainFe components unless the target explicitly asks for legacy main-fe styling."];
|
|
878
|
+
readonly rules: readonly ["Import the stylesheet once at the app entry before rendering any component.", "If the project declares an approved theme preset in AGENTS.md or ui-theme.css, stay inside that preset and do not invent a second palette.", "Prefer the canonical component for each intent instead of mixing legacy MainFe components.", "Use Input/Textarea/Select label props directly for simple fields; use Field only to wrap custom controls or grouped content.", "Use Select for small fixed option lists, SearchableSelect for larger local lists, Combobox for type-and-pick flows, and AsyncCombobox for remote search.", "Always provide a stable rowKey to DataTable and use sortMode=\"server\" when sorting happens on the backend.", "Prefer Card as the outer layout section and keep alerts, stats, and tables inside CardContent when building dashboards or forms.", "Do not import MainFe components unless the target explicitly asks for legacy main-fe styling."];
|
|
879
879
|
readonly components: ({
|
|
880
880
|
name: string;
|
|
881
881
|
importName: string;
|
|
@@ -918,6 +918,233 @@ type UiThemeToken = {
|
|
|
918
918
|
defaultDark: string;
|
|
919
919
|
usedBy: string[];
|
|
920
920
|
};
|
|
921
|
+
type UiThemePreset = {
|
|
922
|
+
id: string;
|
|
923
|
+
label: string;
|
|
924
|
+
description: string;
|
|
925
|
+
recommendedFor: string[];
|
|
926
|
+
tokens: {
|
|
927
|
+
light: Record<string, string>;
|
|
928
|
+
dark: Record<string, string>;
|
|
929
|
+
};
|
|
930
|
+
};
|
|
931
|
+
declare const uiThemePresets: readonly [{
|
|
932
|
+
readonly id: "ocean";
|
|
933
|
+
readonly label: "Ocean Glass";
|
|
934
|
+
readonly description: "Blue-cyan preset with clean glass surfaces. Matches the current default visual language.";
|
|
935
|
+
readonly recommendedFor: ["Admin dashboards", "SaaS CRUD screens", "Projects that want the existing package look"];
|
|
936
|
+
readonly tokens: {
|
|
937
|
+
readonly light: {
|
|
938
|
+
readonly '--tw-background': "0 0% 100%";
|
|
939
|
+
readonly '--tw-foreground': "222.2 47.4% 11.2%";
|
|
940
|
+
readonly '--tw-primary': "221.2 83.2% 53.3%";
|
|
941
|
+
readonly '--tw-accent': "199 89% 48%";
|
|
942
|
+
readonly '--tw-success': "142.1 76.2% 36.3%";
|
|
943
|
+
readonly '--tw-destructive': "0 84.2% 60.2%";
|
|
944
|
+
readonly '--tw-border': "214.3 31.8% 91.4%";
|
|
945
|
+
readonly '--radius': "0.75rem";
|
|
946
|
+
readonly '--surface': "rgba(255, 255, 255, 0.92)";
|
|
947
|
+
readonly '--surface-strong': "rgba(241, 245, 249, 0.96)";
|
|
948
|
+
readonly '--grey': "rgba(248, 250, 252, 0.96)";
|
|
949
|
+
readonly '--grey-strong': "rgba(241, 245, 249, 0.98)";
|
|
950
|
+
readonly '--shadow-sm': "0 10px 28px -18px rgba(15, 23, 42, 0.22)";
|
|
951
|
+
readonly '--shadow': "0 24px 60px -28px rgba(15, 23, 42, 0.3)";
|
|
952
|
+
readonly '--primary-grad-from': "199 89% 48%";
|
|
953
|
+
readonly '--primary-grad-to': "221.2 83.2% 53.3%";
|
|
954
|
+
};
|
|
955
|
+
readonly dark: {
|
|
956
|
+
readonly '--tw-background': "222.2 84% 4.9%";
|
|
957
|
+
readonly '--tw-foreground': "210 40% 98%";
|
|
958
|
+
readonly '--tw-primary': "217.2 91.2% 59.8%";
|
|
959
|
+
readonly '--tw-accent': "199 89% 48%";
|
|
960
|
+
readonly '--tw-success': "142.1 70.6% 45.3%";
|
|
961
|
+
readonly '--tw-destructive': "0 62.8% 30.6%";
|
|
962
|
+
readonly '--tw-border': "217.2 32.6% 17.5%";
|
|
963
|
+
readonly '--radius': "0.75rem";
|
|
964
|
+
readonly '--surface': "rgba(15, 23, 42, 0.78)";
|
|
965
|
+
readonly '--surface-strong': "rgba(30, 41, 59, 0.92)";
|
|
966
|
+
readonly '--grey': "rgba(30, 41, 59, 0.88)";
|
|
967
|
+
readonly '--grey-strong': "rgba(51, 65, 85, 0.92)";
|
|
968
|
+
readonly '--shadow-sm': "0 16px 32px -18px rgba(2, 6, 23, 0.48)";
|
|
969
|
+
readonly '--shadow': "0 28px 80px -32px rgba(2, 6, 23, 0.7)";
|
|
970
|
+
readonly '--primary-grad-from': "198.6 88.7% 48.4%";
|
|
971
|
+
readonly '--primary-grad-to': "221.2 83.2% 53.3%";
|
|
972
|
+
};
|
|
973
|
+
};
|
|
974
|
+
}, {
|
|
975
|
+
readonly id: "sunset";
|
|
976
|
+
readonly label: "Sunset Ember";
|
|
977
|
+
readonly description: "Warm orange-coral preset with softer cream surfaces for branded landing or growth products.";
|
|
978
|
+
readonly recommendedFor: ["Growth products", "Commerce backoffices", "Projects that want a warmer visual tone"];
|
|
979
|
+
readonly tokens: {
|
|
980
|
+
readonly light: {
|
|
981
|
+
readonly '--tw-background': "30 100% 98%";
|
|
982
|
+
readonly '--tw-foreground': "20 24% 14%";
|
|
983
|
+
readonly '--tw-primary': "14 90% 56%";
|
|
984
|
+
readonly '--tw-accent': "29 100% 58%";
|
|
985
|
+
readonly '--tw-success': "145 63% 38%";
|
|
986
|
+
readonly '--tw-destructive': "0 78% 58%";
|
|
987
|
+
readonly '--tw-border': "24 45% 89%";
|
|
988
|
+
readonly '--radius': "0.85rem";
|
|
989
|
+
readonly '--surface': "rgba(255, 247, 240, 0.92)";
|
|
990
|
+
readonly '--surface-strong': "rgba(255, 237, 223, 0.96)";
|
|
991
|
+
readonly '--grey': "rgba(255, 243, 231, 0.96)";
|
|
992
|
+
readonly '--grey-strong': "rgba(255, 232, 214, 0.98)";
|
|
993
|
+
readonly '--shadow-sm': "0 12px 30px -18px rgba(194, 65, 12, 0.18)";
|
|
994
|
+
readonly '--shadow': "0 28px 64px -30px rgba(154, 52, 18, 0.24)";
|
|
995
|
+
readonly '--primary-grad-from': "29 100% 58%";
|
|
996
|
+
readonly '--primary-grad-to': "14 90% 56%";
|
|
997
|
+
};
|
|
998
|
+
readonly dark: {
|
|
999
|
+
readonly '--tw-background': "20 24% 8%";
|
|
1000
|
+
readonly '--tw-foreground': "40 33% 96%";
|
|
1001
|
+
readonly '--tw-primary': "18 100% 62%";
|
|
1002
|
+
readonly '--tw-accent': "35 100% 58%";
|
|
1003
|
+
readonly '--tw-success': "145 60% 47%";
|
|
1004
|
+
readonly '--tw-destructive': "0 73% 52%";
|
|
1005
|
+
readonly '--tw-border': "18 24% 22%";
|
|
1006
|
+
readonly '--radius': "0.85rem";
|
|
1007
|
+
readonly '--surface': "rgba(41, 24, 18, 0.84)";
|
|
1008
|
+
readonly '--surface-strong': "rgba(59, 34, 24, 0.9)";
|
|
1009
|
+
readonly '--grey': "rgba(70, 42, 29, 0.88)";
|
|
1010
|
+
readonly '--grey-strong': "rgba(92, 54, 38, 0.9)";
|
|
1011
|
+
readonly '--shadow-sm': "0 18px 36px -20px rgba(67, 20, 7, 0.48)";
|
|
1012
|
+
readonly '--shadow': "0 30px 84px -34px rgba(67, 20, 7, 0.62)";
|
|
1013
|
+
readonly '--primary-grad-from': "35 100% 58%";
|
|
1014
|
+
readonly '--primary-grad-to': "18 100% 62%";
|
|
1015
|
+
};
|
|
1016
|
+
};
|
|
1017
|
+
}, {
|
|
1018
|
+
readonly id: "forest";
|
|
1019
|
+
readonly label: "Forest Mist";
|
|
1020
|
+
readonly description: "Emerald-teal preset with soft botanical surfaces for calmer productivity products.";
|
|
1021
|
+
readonly recommendedFor: ["Operations tools", "Internal platforms", "Products that want a calmer green tone"];
|
|
1022
|
+
readonly tokens: {
|
|
1023
|
+
readonly light: {
|
|
1024
|
+
readonly '--tw-background': "138 40% 98%";
|
|
1025
|
+
readonly '--tw-foreground': "160 25% 14%";
|
|
1026
|
+
readonly '--tw-primary': "158 64% 40%";
|
|
1027
|
+
readonly '--tw-accent': "173 58% 44%";
|
|
1028
|
+
readonly '--tw-success': "145 63% 36%";
|
|
1029
|
+
readonly '--tw-destructive': "0 78% 58%";
|
|
1030
|
+
readonly '--tw-border': "143 21% 88%";
|
|
1031
|
+
readonly '--radius': "0.8rem";
|
|
1032
|
+
readonly '--surface': "rgba(245, 252, 249, 0.92)";
|
|
1033
|
+
readonly '--surface-strong': "rgba(232, 245, 239, 0.96)";
|
|
1034
|
+
readonly '--grey': "rgba(240, 248, 244, 0.96)";
|
|
1035
|
+
readonly '--grey-strong': "rgba(225, 240, 232, 0.98)";
|
|
1036
|
+
readonly '--shadow-sm': "0 12px 28px -18px rgba(5, 86, 66, 0.18)";
|
|
1037
|
+
readonly '--shadow': "0 26px 62px -30px rgba(6, 78, 59, 0.24)";
|
|
1038
|
+
readonly '--primary-grad-from': "173 58% 44%";
|
|
1039
|
+
readonly '--primary-grad-to': "158 64% 40%";
|
|
1040
|
+
};
|
|
1041
|
+
readonly dark: {
|
|
1042
|
+
readonly '--tw-background': "164 35% 8%";
|
|
1043
|
+
readonly '--tw-foreground': "144 35% 96%";
|
|
1044
|
+
readonly '--tw-primary': "160 70% 46%";
|
|
1045
|
+
readonly '--tw-accent': "174 72% 45%";
|
|
1046
|
+
readonly '--tw-success': "145 68% 46%";
|
|
1047
|
+
readonly '--tw-destructive': "0 70% 52%";
|
|
1048
|
+
readonly '--tw-border': "160 20% 20%";
|
|
1049
|
+
readonly '--radius': "0.8rem";
|
|
1050
|
+
readonly '--surface': "rgba(16, 36, 31, 0.84)";
|
|
1051
|
+
readonly '--surface-strong': "rgba(21, 51, 44, 0.9)";
|
|
1052
|
+
readonly '--grey': "rgba(24, 61, 52, 0.88)";
|
|
1053
|
+
readonly '--grey-strong': "rgba(31, 77, 65, 0.9)";
|
|
1054
|
+
readonly '--shadow-sm': "0 18px 34px -20px rgba(1, 44, 34, 0.48)";
|
|
1055
|
+
readonly '--shadow': "0 30px 82px -34px rgba(1, 44, 34, 0.6)";
|
|
1056
|
+
readonly '--primary-grad-from': "174 72% 45%";
|
|
1057
|
+
readonly '--primary-grad-to': "160 70% 46%";
|
|
1058
|
+
};
|
|
1059
|
+
};
|
|
1060
|
+
}, {
|
|
1061
|
+
readonly id: "graphite";
|
|
1062
|
+
readonly label: "Graphite Pulse";
|
|
1063
|
+
readonly description: "Neutral slate preset with restrained blue accents for products that need a steadier enterprise tone.";
|
|
1064
|
+
readonly recommendedFor: ["Enterprise admin panels", "B2B internal tools", "Projects that want a more neutral interface"];
|
|
1065
|
+
readonly tokens: {
|
|
1066
|
+
readonly light: {
|
|
1067
|
+
readonly '--tw-background': "220 18% 97%";
|
|
1068
|
+
readonly '--tw-foreground': "222 24% 14%";
|
|
1069
|
+
readonly '--tw-primary': "221 24% 32%";
|
|
1070
|
+
readonly '--tw-accent': "198 83% 44%";
|
|
1071
|
+
readonly '--tw-success': "160 56% 38%";
|
|
1072
|
+
readonly '--tw-destructive': "0 72% 54%";
|
|
1073
|
+
readonly '--tw-border': "218 17% 86%";
|
|
1074
|
+
readonly '--radius': "0.7rem";
|
|
1075
|
+
readonly '--surface': "rgba(248, 250, 252, 0.94)";
|
|
1076
|
+
readonly '--surface-strong': "rgba(226, 232, 240, 0.96)";
|
|
1077
|
+
readonly '--grey': "rgba(241, 245, 249, 0.98)";
|
|
1078
|
+
readonly '--grey-strong': "rgba(226, 232, 240, 0.99)";
|
|
1079
|
+
readonly '--shadow-sm': "0 12px 30px -20px rgba(15, 23, 42, 0.18)";
|
|
1080
|
+
readonly '--shadow': "0 28px 66px -30px rgba(15, 23, 42, 0.24)";
|
|
1081
|
+
readonly '--primary-grad-from': "198 83% 44%";
|
|
1082
|
+
readonly '--primary-grad-to': "221 24% 32%";
|
|
1083
|
+
};
|
|
1084
|
+
readonly dark: {
|
|
1085
|
+
readonly '--tw-background': "222 32% 8%";
|
|
1086
|
+
readonly '--tw-foreground': "210 25% 96%";
|
|
1087
|
+
readonly '--tw-primary': "210 24% 82%";
|
|
1088
|
+
readonly '--tw-accent': "192 92% 52%";
|
|
1089
|
+
readonly '--tw-success': "158 64% 45%";
|
|
1090
|
+
readonly '--tw-destructive': "0 72% 56%";
|
|
1091
|
+
readonly '--tw-border': "217 19% 24%";
|
|
1092
|
+
readonly '--radius': "0.7rem";
|
|
1093
|
+
readonly '--surface': "rgba(15, 23, 42, 0.82)";
|
|
1094
|
+
readonly '--surface-strong': "rgba(30, 41, 59, 0.92)";
|
|
1095
|
+
readonly '--grey': "rgba(30, 41, 59, 0.9)";
|
|
1096
|
+
readonly '--grey-strong': "rgba(51, 65, 85, 0.92)";
|
|
1097
|
+
readonly '--shadow-sm': "0 18px 38px -22px rgba(2, 6, 23, 0.48)";
|
|
1098
|
+
readonly '--shadow': "0 32px 88px -34px rgba(2, 6, 23, 0.68)";
|
|
1099
|
+
readonly '--primary-grad-from': "192 92% 52%";
|
|
1100
|
+
readonly '--primary-grad-to': "210 24% 82%";
|
|
1101
|
+
};
|
|
1102
|
+
};
|
|
1103
|
+
}];
|
|
1104
|
+
declare const uiDefaultThemePreset: {
|
|
1105
|
+
readonly id: "ocean";
|
|
1106
|
+
readonly label: "Ocean Glass";
|
|
1107
|
+
readonly description: "Blue-cyan preset with clean glass surfaces. Matches the current default visual language.";
|
|
1108
|
+
readonly recommendedFor: ["Admin dashboards", "SaaS CRUD screens", "Projects that want the existing package look"];
|
|
1109
|
+
readonly tokens: {
|
|
1110
|
+
readonly light: {
|
|
1111
|
+
readonly '--tw-background': "0 0% 100%";
|
|
1112
|
+
readonly '--tw-foreground': "222.2 47.4% 11.2%";
|
|
1113
|
+
readonly '--tw-primary': "221.2 83.2% 53.3%";
|
|
1114
|
+
readonly '--tw-accent': "199 89% 48%";
|
|
1115
|
+
readonly '--tw-success': "142.1 76.2% 36.3%";
|
|
1116
|
+
readonly '--tw-destructive': "0 84.2% 60.2%";
|
|
1117
|
+
readonly '--tw-border': "214.3 31.8% 91.4%";
|
|
1118
|
+
readonly '--radius': "0.75rem";
|
|
1119
|
+
readonly '--surface': "rgba(255, 255, 255, 0.92)";
|
|
1120
|
+
readonly '--surface-strong': "rgba(241, 245, 249, 0.96)";
|
|
1121
|
+
readonly '--grey': "rgba(248, 250, 252, 0.96)";
|
|
1122
|
+
readonly '--grey-strong': "rgba(241, 245, 249, 0.98)";
|
|
1123
|
+
readonly '--shadow-sm': "0 10px 28px -18px rgba(15, 23, 42, 0.22)";
|
|
1124
|
+
readonly '--shadow': "0 24px 60px -28px rgba(15, 23, 42, 0.3)";
|
|
1125
|
+
readonly '--primary-grad-from': "199 89% 48%";
|
|
1126
|
+
readonly '--primary-grad-to': "221.2 83.2% 53.3%";
|
|
1127
|
+
};
|
|
1128
|
+
readonly dark: {
|
|
1129
|
+
readonly '--tw-background': "222.2 84% 4.9%";
|
|
1130
|
+
readonly '--tw-foreground': "210 40% 98%";
|
|
1131
|
+
readonly '--tw-primary': "217.2 91.2% 59.8%";
|
|
1132
|
+
readonly '--tw-accent': "199 89% 48%";
|
|
1133
|
+
readonly '--tw-success': "142.1 70.6% 45.3%";
|
|
1134
|
+
readonly '--tw-destructive': "0 62.8% 30.6%";
|
|
1135
|
+
readonly '--tw-border': "217.2 32.6% 17.5%";
|
|
1136
|
+
readonly '--radius': "0.75rem";
|
|
1137
|
+
readonly '--surface': "rgba(15, 23, 42, 0.78)";
|
|
1138
|
+
readonly '--surface-strong': "rgba(30, 41, 59, 0.92)";
|
|
1139
|
+
readonly '--grey': "rgba(30, 41, 59, 0.88)";
|
|
1140
|
+
readonly '--grey-strong': "rgba(51, 65, 85, 0.92)";
|
|
1141
|
+
readonly '--shadow-sm': "0 16px 32px -18px rgba(2, 6, 23, 0.48)";
|
|
1142
|
+
readonly '--shadow': "0 28px 80px -32px rgba(2, 6, 23, 0.7)";
|
|
1143
|
+
readonly '--primary-grad-from': "198.6 88.7% 48.4%";
|
|
1144
|
+
readonly '--primary-grad-to': "221.2 83.2% 53.3%";
|
|
1145
|
+
};
|
|
1146
|
+
};
|
|
1147
|
+
};
|
|
921
1148
|
declare const uiThemeContract: {
|
|
922
1149
|
readonly packageName: "@lucasvu/scope-ui";
|
|
923
1150
|
readonly importOrder: readonly ["import '@lucasvu/scope-ui/styles.css'", "import './styles/ui-theme.css'"];
|
|
@@ -926,7 +1153,181 @@ declare const uiThemeContract: {
|
|
|
926
1153
|
readonly dark: readonly [".dark", "[data-ui-theme='dark']"];
|
|
927
1154
|
};
|
|
928
1155
|
readonly overrideFile: "src/styles/ui-theme.css";
|
|
929
|
-
readonly
|
|
1156
|
+
readonly defaultPreset: "ocean";
|
|
1157
|
+
readonly presets: readonly [{
|
|
1158
|
+
readonly id: "ocean";
|
|
1159
|
+
readonly label: "Ocean Glass";
|
|
1160
|
+
readonly description: "Blue-cyan preset with clean glass surfaces. Matches the current default visual language.";
|
|
1161
|
+
readonly recommendedFor: ["Admin dashboards", "SaaS CRUD screens", "Projects that want the existing package look"];
|
|
1162
|
+
readonly tokens: {
|
|
1163
|
+
readonly light: {
|
|
1164
|
+
readonly '--tw-background': "0 0% 100%";
|
|
1165
|
+
readonly '--tw-foreground': "222.2 47.4% 11.2%";
|
|
1166
|
+
readonly '--tw-primary': "221.2 83.2% 53.3%";
|
|
1167
|
+
readonly '--tw-accent': "199 89% 48%";
|
|
1168
|
+
readonly '--tw-success': "142.1 76.2% 36.3%";
|
|
1169
|
+
readonly '--tw-destructive': "0 84.2% 60.2%";
|
|
1170
|
+
readonly '--tw-border': "214.3 31.8% 91.4%";
|
|
1171
|
+
readonly '--radius': "0.75rem";
|
|
1172
|
+
readonly '--surface': "rgba(255, 255, 255, 0.92)";
|
|
1173
|
+
readonly '--surface-strong': "rgba(241, 245, 249, 0.96)";
|
|
1174
|
+
readonly '--grey': "rgba(248, 250, 252, 0.96)";
|
|
1175
|
+
readonly '--grey-strong': "rgba(241, 245, 249, 0.98)";
|
|
1176
|
+
readonly '--shadow-sm': "0 10px 28px -18px rgba(15, 23, 42, 0.22)";
|
|
1177
|
+
readonly '--shadow': "0 24px 60px -28px rgba(15, 23, 42, 0.3)";
|
|
1178
|
+
readonly '--primary-grad-from': "199 89% 48%";
|
|
1179
|
+
readonly '--primary-grad-to': "221.2 83.2% 53.3%";
|
|
1180
|
+
};
|
|
1181
|
+
readonly dark: {
|
|
1182
|
+
readonly '--tw-background': "222.2 84% 4.9%";
|
|
1183
|
+
readonly '--tw-foreground': "210 40% 98%";
|
|
1184
|
+
readonly '--tw-primary': "217.2 91.2% 59.8%";
|
|
1185
|
+
readonly '--tw-accent': "199 89% 48%";
|
|
1186
|
+
readonly '--tw-success': "142.1 70.6% 45.3%";
|
|
1187
|
+
readonly '--tw-destructive': "0 62.8% 30.6%";
|
|
1188
|
+
readonly '--tw-border': "217.2 32.6% 17.5%";
|
|
1189
|
+
readonly '--radius': "0.75rem";
|
|
1190
|
+
readonly '--surface': "rgba(15, 23, 42, 0.78)";
|
|
1191
|
+
readonly '--surface-strong': "rgba(30, 41, 59, 0.92)";
|
|
1192
|
+
readonly '--grey': "rgba(30, 41, 59, 0.88)";
|
|
1193
|
+
readonly '--grey-strong': "rgba(51, 65, 85, 0.92)";
|
|
1194
|
+
readonly '--shadow-sm': "0 16px 32px -18px rgba(2, 6, 23, 0.48)";
|
|
1195
|
+
readonly '--shadow': "0 28px 80px -32px rgba(2, 6, 23, 0.7)";
|
|
1196
|
+
readonly '--primary-grad-from': "198.6 88.7% 48.4%";
|
|
1197
|
+
readonly '--primary-grad-to': "221.2 83.2% 53.3%";
|
|
1198
|
+
};
|
|
1199
|
+
};
|
|
1200
|
+
}, {
|
|
1201
|
+
readonly id: "sunset";
|
|
1202
|
+
readonly label: "Sunset Ember";
|
|
1203
|
+
readonly description: "Warm orange-coral preset with softer cream surfaces for branded landing or growth products.";
|
|
1204
|
+
readonly recommendedFor: ["Growth products", "Commerce backoffices", "Projects that want a warmer visual tone"];
|
|
1205
|
+
readonly tokens: {
|
|
1206
|
+
readonly light: {
|
|
1207
|
+
readonly '--tw-background': "30 100% 98%";
|
|
1208
|
+
readonly '--tw-foreground': "20 24% 14%";
|
|
1209
|
+
readonly '--tw-primary': "14 90% 56%";
|
|
1210
|
+
readonly '--tw-accent': "29 100% 58%";
|
|
1211
|
+
readonly '--tw-success': "145 63% 38%";
|
|
1212
|
+
readonly '--tw-destructive': "0 78% 58%";
|
|
1213
|
+
readonly '--tw-border': "24 45% 89%";
|
|
1214
|
+
readonly '--radius': "0.85rem";
|
|
1215
|
+
readonly '--surface': "rgba(255, 247, 240, 0.92)";
|
|
1216
|
+
readonly '--surface-strong': "rgba(255, 237, 223, 0.96)";
|
|
1217
|
+
readonly '--grey': "rgba(255, 243, 231, 0.96)";
|
|
1218
|
+
readonly '--grey-strong': "rgba(255, 232, 214, 0.98)";
|
|
1219
|
+
readonly '--shadow-sm': "0 12px 30px -18px rgba(194, 65, 12, 0.18)";
|
|
1220
|
+
readonly '--shadow': "0 28px 64px -30px rgba(154, 52, 18, 0.24)";
|
|
1221
|
+
readonly '--primary-grad-from': "29 100% 58%";
|
|
1222
|
+
readonly '--primary-grad-to': "14 90% 56%";
|
|
1223
|
+
};
|
|
1224
|
+
readonly dark: {
|
|
1225
|
+
readonly '--tw-background': "20 24% 8%";
|
|
1226
|
+
readonly '--tw-foreground': "40 33% 96%";
|
|
1227
|
+
readonly '--tw-primary': "18 100% 62%";
|
|
1228
|
+
readonly '--tw-accent': "35 100% 58%";
|
|
1229
|
+
readonly '--tw-success': "145 60% 47%";
|
|
1230
|
+
readonly '--tw-destructive': "0 73% 52%";
|
|
1231
|
+
readonly '--tw-border': "18 24% 22%";
|
|
1232
|
+
readonly '--radius': "0.85rem";
|
|
1233
|
+
readonly '--surface': "rgba(41, 24, 18, 0.84)";
|
|
1234
|
+
readonly '--surface-strong': "rgba(59, 34, 24, 0.9)";
|
|
1235
|
+
readonly '--grey': "rgba(70, 42, 29, 0.88)";
|
|
1236
|
+
readonly '--grey-strong': "rgba(92, 54, 38, 0.9)";
|
|
1237
|
+
readonly '--shadow-sm': "0 18px 36px -20px rgba(67, 20, 7, 0.48)";
|
|
1238
|
+
readonly '--shadow': "0 30px 84px -34px rgba(67, 20, 7, 0.62)";
|
|
1239
|
+
readonly '--primary-grad-from': "35 100% 58%";
|
|
1240
|
+
readonly '--primary-grad-to': "18 100% 62%";
|
|
1241
|
+
};
|
|
1242
|
+
};
|
|
1243
|
+
}, {
|
|
1244
|
+
readonly id: "forest";
|
|
1245
|
+
readonly label: "Forest Mist";
|
|
1246
|
+
readonly description: "Emerald-teal preset with soft botanical surfaces for calmer productivity products.";
|
|
1247
|
+
readonly recommendedFor: ["Operations tools", "Internal platforms", "Products that want a calmer green tone"];
|
|
1248
|
+
readonly tokens: {
|
|
1249
|
+
readonly light: {
|
|
1250
|
+
readonly '--tw-background': "138 40% 98%";
|
|
1251
|
+
readonly '--tw-foreground': "160 25% 14%";
|
|
1252
|
+
readonly '--tw-primary': "158 64% 40%";
|
|
1253
|
+
readonly '--tw-accent': "173 58% 44%";
|
|
1254
|
+
readonly '--tw-success': "145 63% 36%";
|
|
1255
|
+
readonly '--tw-destructive': "0 78% 58%";
|
|
1256
|
+
readonly '--tw-border': "143 21% 88%";
|
|
1257
|
+
readonly '--radius': "0.8rem";
|
|
1258
|
+
readonly '--surface': "rgba(245, 252, 249, 0.92)";
|
|
1259
|
+
readonly '--surface-strong': "rgba(232, 245, 239, 0.96)";
|
|
1260
|
+
readonly '--grey': "rgba(240, 248, 244, 0.96)";
|
|
1261
|
+
readonly '--grey-strong': "rgba(225, 240, 232, 0.98)";
|
|
1262
|
+
readonly '--shadow-sm': "0 12px 28px -18px rgba(5, 86, 66, 0.18)";
|
|
1263
|
+
readonly '--shadow': "0 26px 62px -30px rgba(6, 78, 59, 0.24)";
|
|
1264
|
+
readonly '--primary-grad-from': "173 58% 44%";
|
|
1265
|
+
readonly '--primary-grad-to': "158 64% 40%";
|
|
1266
|
+
};
|
|
1267
|
+
readonly dark: {
|
|
1268
|
+
readonly '--tw-background': "164 35% 8%";
|
|
1269
|
+
readonly '--tw-foreground': "144 35% 96%";
|
|
1270
|
+
readonly '--tw-primary': "160 70% 46%";
|
|
1271
|
+
readonly '--tw-accent': "174 72% 45%";
|
|
1272
|
+
readonly '--tw-success': "145 68% 46%";
|
|
1273
|
+
readonly '--tw-destructive': "0 70% 52%";
|
|
1274
|
+
readonly '--tw-border': "160 20% 20%";
|
|
1275
|
+
readonly '--radius': "0.8rem";
|
|
1276
|
+
readonly '--surface': "rgba(16, 36, 31, 0.84)";
|
|
1277
|
+
readonly '--surface-strong': "rgba(21, 51, 44, 0.9)";
|
|
1278
|
+
readonly '--grey': "rgba(24, 61, 52, 0.88)";
|
|
1279
|
+
readonly '--grey-strong': "rgba(31, 77, 65, 0.9)";
|
|
1280
|
+
readonly '--shadow-sm': "0 18px 34px -20px rgba(1, 44, 34, 0.48)";
|
|
1281
|
+
readonly '--shadow': "0 30px 82px -34px rgba(1, 44, 34, 0.6)";
|
|
1282
|
+
readonly '--primary-grad-from': "174 72% 45%";
|
|
1283
|
+
readonly '--primary-grad-to': "160 70% 46%";
|
|
1284
|
+
};
|
|
1285
|
+
};
|
|
1286
|
+
}, {
|
|
1287
|
+
readonly id: "graphite";
|
|
1288
|
+
readonly label: "Graphite Pulse";
|
|
1289
|
+
readonly description: "Neutral slate preset with restrained blue accents for products that need a steadier enterprise tone.";
|
|
1290
|
+
readonly recommendedFor: ["Enterprise admin panels", "B2B internal tools", "Projects that want a more neutral interface"];
|
|
1291
|
+
readonly tokens: {
|
|
1292
|
+
readonly light: {
|
|
1293
|
+
readonly '--tw-background': "220 18% 97%";
|
|
1294
|
+
readonly '--tw-foreground': "222 24% 14%";
|
|
1295
|
+
readonly '--tw-primary': "221 24% 32%";
|
|
1296
|
+
readonly '--tw-accent': "198 83% 44%";
|
|
1297
|
+
readonly '--tw-success': "160 56% 38%";
|
|
1298
|
+
readonly '--tw-destructive': "0 72% 54%";
|
|
1299
|
+
readonly '--tw-border': "218 17% 86%";
|
|
1300
|
+
readonly '--radius': "0.7rem";
|
|
1301
|
+
readonly '--surface': "rgba(248, 250, 252, 0.94)";
|
|
1302
|
+
readonly '--surface-strong': "rgba(226, 232, 240, 0.96)";
|
|
1303
|
+
readonly '--grey': "rgba(241, 245, 249, 0.98)";
|
|
1304
|
+
readonly '--grey-strong': "rgba(226, 232, 240, 0.99)";
|
|
1305
|
+
readonly '--shadow-sm': "0 12px 30px -20px rgba(15, 23, 42, 0.18)";
|
|
1306
|
+
readonly '--shadow': "0 28px 66px -30px rgba(15, 23, 42, 0.24)";
|
|
1307
|
+
readonly '--primary-grad-from': "198 83% 44%";
|
|
1308
|
+
readonly '--primary-grad-to': "221 24% 32%";
|
|
1309
|
+
};
|
|
1310
|
+
readonly dark: {
|
|
1311
|
+
readonly '--tw-background': "222 32% 8%";
|
|
1312
|
+
readonly '--tw-foreground': "210 25% 96%";
|
|
1313
|
+
readonly '--tw-primary': "210 24% 82%";
|
|
1314
|
+
readonly '--tw-accent': "192 92% 52%";
|
|
1315
|
+
readonly '--tw-success': "158 64% 45%";
|
|
1316
|
+
readonly '--tw-destructive': "0 72% 56%";
|
|
1317
|
+
readonly '--tw-border': "217 19% 24%";
|
|
1318
|
+
readonly '--radius': "0.7rem";
|
|
1319
|
+
readonly '--surface': "rgba(15, 23, 42, 0.82)";
|
|
1320
|
+
readonly '--surface-strong': "rgba(30, 41, 59, 0.92)";
|
|
1321
|
+
readonly '--grey': "rgba(30, 41, 59, 0.9)";
|
|
1322
|
+
readonly '--grey-strong': "rgba(51, 65, 85, 0.92)";
|
|
1323
|
+
readonly '--shadow-sm': "0 18px 38px -22px rgba(2, 6, 23, 0.48)";
|
|
1324
|
+
readonly '--shadow': "0 32px 88px -34px rgba(2, 6, 23, 0.68)";
|
|
1325
|
+
readonly '--primary-grad-from': "192 92% 52%";
|
|
1326
|
+
readonly '--primary-grad-to': "210 24% 82%";
|
|
1327
|
+
};
|
|
1328
|
+
};
|
|
1329
|
+
}];
|
|
1330
|
+
readonly rules: readonly ["Import the package stylesheet before your project theme override stylesheet.", "Choose one approved preset and keep the entire project on that preset instead of mixing palettes page by page.", "Override tokens in one shared theme file instead of scattering colors across components.", "Use :root for the default light theme and .dark or [data-ui-theme='dark'] for dark theme.", "Only override tokens declared here. Do not patch component internals unless you are extending the library.", "For AI-generated screens, choose one theme source of truth and keep component code token-driven."];
|
|
930
1331
|
readonly tokens: {
|
|
931
1332
|
name: string;
|
|
932
1333
|
description: string;
|
|
@@ -934,11 +1335,11 @@ declare const uiThemeContract: {
|
|
|
934
1335
|
defaultDark: string;
|
|
935
1336
|
usedBy: string[];
|
|
936
1337
|
}[];
|
|
937
|
-
readonly exampleCss:
|
|
1338
|
+
readonly exampleCss: string;
|
|
938
1339
|
};
|
|
939
|
-
declare const uiProjectAiRules: readonly ["Use @lucasvu/scope-ui as the default UI library.", "Import @lucasvu/scope-ui/styles.css once at the app entry.", "Import the project override theme file after the package stylesheet.", "Read uiAiManifest to choose the correct component by intent before coding.", "Read uiThemeContract before changing colors, shadows, or theme behavior.", "Prefer root exports and avoid MainFe unless the task explicitly targets a legacy screen."];
|
|
1340
|
+
declare const uiProjectAiRules: readonly ["Use @lucasvu/scope-ui as the default UI library.", "Import @lucasvu/scope-ui/styles.css once at the app entry.", "Import the project override theme file after the package stylesheet.", "Stay inside the approved theme preset declared by the project and do not invent a second palette.", "Read uiAiManifest to choose the correct component by intent before coding.", "Read uiThemeContract before changing colors, shadows, radius, or theme behavior.", "Prefer root exports and avoid MainFe unless the task explicitly targets a legacy screen."];
|
|
940
1341
|
|
|
941
1342
|
type ClassValue = string | false | null | undefined;
|
|
942
1343
|
declare function cn(...values: ClassValue[]): string;
|
|
943
1344
|
|
|
944
|
-
export { Alert, type AlertProps, ArgonSidebar, AsyncCombobox, type AsyncComboboxProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, Button$1 as Button, type ButtonProps$1 as ButtonProps, Card$1 as Card, CardAction$1 as CardAction, CardContent$1 as CardContent, CardDescription$1 as CardDescription, CardFooter$1 as CardFooter, CardHeader$1 as CardHeader, CardTitle$1 as CardTitle, Combobox$1 as Combobox, type ComboboxOption$2 as ComboboxOption, FormControl as Control, DataTable$1 as DataTable, type DataTableAlign$1 as DataTableAlign, type DataTableColumn$1 as DataTableColumn, type DataTablePagination$1 as DataTablePagination, type DataTableProps$1 as DataTableProps, type DataTableRowSelection$1 as DataTableRowSelection, type DataTableSortDirection$1 as DataTableSortDirection, type DataTableSortState$1 as DataTableSortState, FormDescription as Description, FormField as Field, Form, FormControl, FormDescription, FormField, type FormFieldProps, FormItem, FormLabel, FormMessage, Input$1 as Input, type InputProps$1 as InputProps, FormItem as Item, FormLabel as Label, LineClampTooltip, type LineClampTooltipProps, Loading, type LoadingProps, index as MainFe, FormMessage as Message, MultiSelect, type MultiSelectOption, NumericInput, type NumericInputProps, type Option, OverflowTooltip, type OverflowTooltipProps, PageTitle$1 as PageTitle, Pagination, type PaginationInfo, type PaginationProps, type PermissionChecker, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, SectionTitle$1 as SectionTitle, Select, type SelectOption, type SelectProps, Sidebar, SidebarItem, type SidebarProps, Stat, type StatProps, type TabItem, Table$1 as Table, TableBody$1 as TableBody, TableCell$1 as TableCell, TableHeader$1 as TableHeader, TableRow$1 as TableRow, Tabs, type TabsProps, Textarea, type TextareaProps, Tooltip, type Trend, TruncatedText, type TruncatedTextProps, type UiAiComponentDescriptor, type UiAiComponentProp, type UiThemeToken, cn, defaultPermissionChecker, filterSidebarItems, hasActiveDescendant, uiAiManifest, uiProjectAiRules, uiThemeContract };
|
|
1345
|
+
export { Alert, type AlertProps, ArgonSidebar, AsyncCombobox, type AsyncComboboxProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, Button$1 as Button, type ButtonProps$1 as ButtonProps, Card$1 as Card, CardAction$1 as CardAction, CardContent$1 as CardContent, CardDescription$1 as CardDescription, CardFooter$1 as CardFooter, CardHeader$1 as CardHeader, CardTitle$1 as CardTitle, Combobox$1 as Combobox, type ComboboxOption$2 as ComboboxOption, FormControl as Control, DataTable$1 as DataTable, type DataTableAlign$1 as DataTableAlign, type DataTableColumn$1 as DataTableColumn, type DataTablePagination$1 as DataTablePagination, type DataTableProps$1 as DataTableProps, type DataTableRowSelection$1 as DataTableRowSelection, type DataTableSortDirection$1 as DataTableSortDirection, type DataTableSortState$1 as DataTableSortState, FormDescription as Description, FormField as Field, Form, FormControl, FormDescription, FormField, type FormFieldProps, FormItem, FormLabel, FormMessage, Input$1 as Input, type InputProps$1 as InputProps, FormItem as Item, FormLabel as Label, LineClampTooltip, type LineClampTooltipProps, Loading, type LoadingProps, index as MainFe, FormMessage as Message, MultiSelect, type MultiSelectOption, NumericInput, type NumericInputProps, type Option, OverflowTooltip, type OverflowTooltipProps, PageTitle$1 as PageTitle, Pagination, type PaginationInfo, type PaginationProps, type PermissionChecker, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, SectionTitle$1 as SectionTitle, Select, type SelectOption, type SelectProps, Sidebar, SidebarItem, type SidebarProps, Stat, type StatProps, type TabItem, Table$1 as Table, TableBody$1 as TableBody, TableCell$1 as TableCell, TableHeader$1 as TableHeader, TableRow$1 as TableRow, Tabs, type TabsProps, Textarea, type TextareaProps, Tooltip, type Trend, TruncatedText, type TruncatedTextProps, type UiAiComponentDescriptor, type UiAiComponentProp, type UiThemePreset, type UiThemeToken, cn, defaultPermissionChecker, filterSidebarItems, hasActiveDescendant, uiAiManifest, uiDefaultThemePreset, uiProjectAiRules, uiThemeContract, uiThemePresets };
|