@almadar/ui 6.28.0 → 6.30.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.
- package/dist/{EntityBindingContext-C6FgxdfG.d.cts → EntityBindingContext-ChCONv2W.d.cts} +3 -39
- package/dist/{EntityBindingContext-C6FgxdfG.d.ts → EntityBindingContext-ChCONv2W.d.ts} +3 -39
- package/dist/avl/index.cjs +74 -48
- package/dist/avl/index.js +74 -48
- package/dist/components/index.cjs +54 -45
- package/dist/components/index.d.cts +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +54 -45
- package/dist/context/index.cjs +135 -105
- package/dist/context/index.d.cts +2 -60
- package/dist/context/index.d.ts +2 -60
- package/dist/context/index.js +135 -105
- package/dist/lib/index.cjs +455 -0
- package/dist/lib/index.d.cts +42 -1
- package/dist/lib/index.d.ts +42 -1
- package/dist/lib/index.js +438 -1
- package/dist/marketing/index.cjs +4 -5
- package/dist/marketing/index.js +4 -5
- package/dist/providers/index.cjs +194 -156
- package/dist/providers/index.d.cts +1 -1
- package/dist/providers/index.d.ts +1 -1
- package/dist/providers/index.js +194 -156
- package/dist/runtime/index.cjs +74 -48
- package/dist/runtime/index.d.cts +16 -2
- package/dist/runtime/index.d.ts +16 -2
- package/dist/runtime/index.js +74 -48
- package/dist/themeTokens-DVRwufw8.d.cts +112 -0
- package/dist/themeTokens-DVRwufw8.d.ts +112 -0
- package/package.json +7 -6
- package/scripts/audit-tailwind-safelist.ts +4 -0
- package/tailwind-preset.cjs +155 -28
- package/themes/almadar-website.css +37 -107
- package/themes/almadar.css +37 -108
- package/themes/atelier.css +145 -240
- package/themes/bloomberg-dense.css +145 -252
- package/themes/clay.css +39 -137
- package/themes/comic.css +39 -145
- package/themes/corporate.css +39 -131
- package/themes/game-adventure.css +22 -87
- package/themes/game-rpg.css +22 -84
- package/themes/game-sci-fi.css +22 -88
- package/themes/game-ui-pack.css +22 -85
- package/themes/gazette.css +43 -135
- package/themes/glass.css +39 -148
- package/themes/kiosk.css +51 -146
- package/themes/linear-clean.css +145 -215
- package/themes/minimalist.css +39 -125
- package/themes/neon.css +39 -132
- package/themes/notion-editorial.css +145 -215
- package/themes/prism.css +37 -100
- package/themes/retro.css +39 -130
- package/themes/terminal.css +61 -152
- package/themes/trait-wars.css +121 -285
- package/themes/wireframe.css +41 -128
package/dist/context/index.cjs
CHANGED
|
@@ -759,17 +759,127 @@ function useTheme() {
|
|
|
759
759
|
var ThemeContext_default = ThemeContext;
|
|
760
760
|
|
|
761
761
|
// lib/themeTokens.ts
|
|
762
|
+
function applyFlat(obj, table, vars) {
|
|
763
|
+
if (!obj) return;
|
|
764
|
+
for (const { cssVar, key } of table) {
|
|
765
|
+
const value = obj[key];
|
|
766
|
+
if (value !== void 0) vars[cssVar] = value;
|
|
767
|
+
}
|
|
768
|
+
}
|
|
769
|
+
var DENSITY_SPACING_VARS = [
|
|
770
|
+
{ cssVar: "--space-0", key: "space0" },
|
|
771
|
+
{ cssVar: "--space-1", key: "space1" },
|
|
772
|
+
{ cssVar: "--space-2", key: "space2" },
|
|
773
|
+
{ cssVar: "--space-3", key: "space3" },
|
|
774
|
+
{ cssVar: "--space-4", key: "space4" },
|
|
775
|
+
{ cssVar: "--space-5", key: "space5" },
|
|
776
|
+
{ cssVar: "--space-6", key: "space6" },
|
|
777
|
+
{ cssVar: "--space-7", key: "space7" },
|
|
778
|
+
{ cssVar: "--space-8", key: "space8" },
|
|
779
|
+
{ cssVar: "--space-9", key: "space9" },
|
|
780
|
+
{ cssVar: "--space-10", key: "space10" },
|
|
781
|
+
{ cssVar: "--space-11", key: "space11" },
|
|
782
|
+
{ cssVar: "--space-12", key: "space12" }
|
|
783
|
+
];
|
|
784
|
+
var DENSITY_ELEMENT_VARS = [
|
|
785
|
+
{ cssVar: "--button-height-sm", key: "buttonHeightSm" },
|
|
786
|
+
{ cssVar: "--button-height-md", key: "buttonHeightMd" },
|
|
787
|
+
{ cssVar: "--button-height-lg", key: "buttonHeightLg" },
|
|
788
|
+
{ cssVar: "--input-height-sm", key: "inputHeightSm" },
|
|
789
|
+
{ cssVar: "--input-height-md", key: "inputHeightMd" },
|
|
790
|
+
{ cssVar: "--input-height-lg", key: "inputHeightLg" },
|
|
791
|
+
{ cssVar: "--row-height-compact", key: "rowHeightCompact" },
|
|
792
|
+
{ cssVar: "--row-height-normal", key: "rowHeightNormal" },
|
|
793
|
+
{ cssVar: "--row-height-spacious", key: "rowHeightSpacious" },
|
|
794
|
+
{ cssVar: "--card-padding-sm", key: "cardPaddingSm" },
|
|
795
|
+
{ cssVar: "--card-padding-md", key: "cardPaddingMd" },
|
|
796
|
+
{ cssVar: "--card-padding-lg", key: "cardPaddingLg" },
|
|
797
|
+
{ cssVar: "--dialog-padding", key: "dialogPadding" },
|
|
798
|
+
{ cssVar: "--section-gap", key: "sectionGap" }
|
|
799
|
+
];
|
|
800
|
+
var TYPE_FAMILY_VARS = [
|
|
801
|
+
{ cssVar: "--font-family-display", key: "displayFamily" },
|
|
802
|
+
{ cssVar: "--font-family-body", key: "bodyFamily" },
|
|
803
|
+
{ cssVar: "--font-family-mono", key: "monoFamily" }
|
|
804
|
+
];
|
|
805
|
+
var TYPE_SIZE_KEYS = [
|
|
806
|
+
"xs",
|
|
807
|
+
"sm",
|
|
808
|
+
"base",
|
|
809
|
+
"lg",
|
|
810
|
+
"xl",
|
|
811
|
+
"2xl",
|
|
812
|
+
"3xl",
|
|
813
|
+
"4xl",
|
|
814
|
+
"display-1",
|
|
815
|
+
"display-2"
|
|
816
|
+
];
|
|
817
|
+
var TYPE_INTENT_VARS = [
|
|
818
|
+
{ key: "headingMajor", cssName: "heading-major" },
|
|
819
|
+
{ key: "headingMinor", cssName: "heading-minor" },
|
|
820
|
+
{ key: "bodyEmphasis", cssName: "body-emphasis" },
|
|
821
|
+
{ key: "bodyDefault", cssName: "body-default" },
|
|
822
|
+
{ key: "bodyQuiet", cssName: "body-quiet" },
|
|
823
|
+
{ key: "caption", cssName: "caption" },
|
|
824
|
+
{ key: "numeric", cssName: "numeric" }
|
|
825
|
+
];
|
|
826
|
+
var MOTION_DURATION_KEYS = [
|
|
827
|
+
"instant",
|
|
828
|
+
"fast",
|
|
829
|
+
"normal",
|
|
830
|
+
"slow",
|
|
831
|
+
"dramatic"
|
|
832
|
+
];
|
|
833
|
+
var MOTION_EASING_KEYS = [
|
|
834
|
+
"linear",
|
|
835
|
+
"standard",
|
|
836
|
+
"emphasized",
|
|
837
|
+
"spring"
|
|
838
|
+
];
|
|
839
|
+
var MOTION_INTENT_VARS = [
|
|
840
|
+
{ key: "enter", cssName: "enter" },
|
|
841
|
+
{ key: "exit", cssName: "exit" },
|
|
842
|
+
{ key: "hover", cssName: "hover" },
|
|
843
|
+
{ key: "press", cssName: "press" },
|
|
844
|
+
{ key: "expand", cssName: "expand" },
|
|
845
|
+
{ key: "transition", cssName: "transition" }
|
|
846
|
+
];
|
|
847
|
+
var ICONOGRAPHY_VARS = [
|
|
848
|
+
{ cssVar: "--icon-family", key: "family" },
|
|
849
|
+
{ cssVar: "--icon-stroke-width", key: "strokeWidth" },
|
|
850
|
+
{ cssVar: "--icon-default-size", key: "defaultSize" }
|
|
851
|
+
];
|
|
852
|
+
var ELEVATION_VARS = [
|
|
853
|
+
{ cssVar: "--elevation-card", key: "cardElevation" },
|
|
854
|
+
{ cssVar: "--elevation-popover", key: "popoverElevation" },
|
|
855
|
+
{ cssVar: "--elevation-dialog", key: "dialogElevation" },
|
|
856
|
+
{ cssVar: "--elevation-toast", key: "toastElevation" }
|
|
857
|
+
];
|
|
858
|
+
var GEOMETRY_VARS = [
|
|
859
|
+
{ cssVar: "--radius-container", key: "radiusContainer" },
|
|
860
|
+
{ cssVar: "--radius-interactive", key: "radiusInteractive" },
|
|
861
|
+
{ cssVar: "--radius-pill", key: "radiusPill" },
|
|
862
|
+
{ cssVar: "--border-hairline", key: "borderHairline" },
|
|
863
|
+
{ cssVar: "--border-standard", key: "borderStandard" },
|
|
864
|
+
{ cssVar: "--border-heavy", key: "borderHeavy" }
|
|
865
|
+
];
|
|
866
|
+
var LEGACY_PREFIXES = {
|
|
867
|
+
colors: "--color-",
|
|
868
|
+
radii: "--radius-",
|
|
869
|
+
spacing: "--space-",
|
|
870
|
+
shadows: "--shadow-"
|
|
871
|
+
};
|
|
762
872
|
function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
|
|
763
873
|
const vars = {};
|
|
764
874
|
const isDark = mode === "dark";
|
|
765
875
|
const pickColors = isDark && darkVariant?.colors ? darkVariant.colors : tokens.colors;
|
|
766
876
|
if (pickColors) {
|
|
767
877
|
for (const [key, value] of Object.entries(pickColors)) {
|
|
768
|
-
vars[
|
|
878
|
+
vars[`${LEGACY_PREFIXES.colors}${key}`] = value;
|
|
769
879
|
}
|
|
770
880
|
if (isDark && darkVariant?.colors && tokens.colors) {
|
|
771
881
|
for (const [key, value] of Object.entries(tokens.colors)) {
|
|
772
|
-
const varName =
|
|
882
|
+
const varName = `${LEGACY_PREFIXES.colors}${key}`;
|
|
773
883
|
if (!(varName in vars)) vars[varName] = value;
|
|
774
884
|
}
|
|
775
885
|
}
|
|
@@ -777,13 +887,13 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
|
|
|
777
887
|
const pickRadii = isDark && darkVariant?.radii ? darkVariant.radii : tokens.radii;
|
|
778
888
|
if (pickRadii) {
|
|
779
889
|
for (const [key, value] of Object.entries(pickRadii)) {
|
|
780
|
-
vars[
|
|
890
|
+
vars[`${LEGACY_PREFIXES.radii}${key}`] = value;
|
|
781
891
|
}
|
|
782
892
|
}
|
|
783
893
|
const pickSpacing = isDark && darkVariant?.spacing ? darkVariant.spacing : tokens.spacing;
|
|
784
894
|
if (pickSpacing) {
|
|
785
895
|
for (const [key, value] of Object.entries(pickSpacing)) {
|
|
786
|
-
vars[
|
|
896
|
+
vars[`${LEGACY_PREFIXES.spacing}${key}`] = value;
|
|
787
897
|
}
|
|
788
898
|
}
|
|
789
899
|
const pickTypography = isDark && darkVariant?.typography ? darkVariant.typography : tokens.typography;
|
|
@@ -795,7 +905,7 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
|
|
|
795
905
|
const pickShadows = isDark && darkVariant?.shadows ? darkVariant.shadows : tokens.shadows;
|
|
796
906
|
if (pickShadows) {
|
|
797
907
|
for (const [key, value] of Object.entries(pickShadows)) {
|
|
798
|
-
vars[
|
|
908
|
+
vars[`${LEGACY_PREFIXES.shadows}${key}`] = value;
|
|
799
909
|
}
|
|
800
910
|
}
|
|
801
911
|
const pickDensity = isDark && darkVariant?.density ? darkVariant.density : tokens.density;
|
|
@@ -814,46 +924,8 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
|
|
|
814
924
|
}
|
|
815
925
|
function emitDensity(density, vars) {
|
|
816
926
|
if (!density) return;
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
const pairs2 = [
|
|
820
|
-
["0", s.space0],
|
|
821
|
-
["1", s.space1],
|
|
822
|
-
["2", s.space2],
|
|
823
|
-
["3", s.space3],
|
|
824
|
-
["4", s.space4],
|
|
825
|
-
["5", s.space5],
|
|
826
|
-
["6", s.space6],
|
|
827
|
-
["7", s.space7],
|
|
828
|
-
["8", s.space8],
|
|
829
|
-
["9", s.space9],
|
|
830
|
-
["10", s.space10],
|
|
831
|
-
["11", s.space11],
|
|
832
|
-
["12", s.space12]
|
|
833
|
-
];
|
|
834
|
-
for (const [k, v] of pairs2) {
|
|
835
|
-
if (v !== void 0) vars[`--space-${k}`] = v;
|
|
836
|
-
}
|
|
837
|
-
}
|
|
838
|
-
const pairs = [
|
|
839
|
-
["button-height-sm", density.buttonHeightSm],
|
|
840
|
-
["button-height-md", density.buttonHeightMd],
|
|
841
|
-
["button-height-lg", density.buttonHeightLg],
|
|
842
|
-
["input-height-sm", density.inputHeightSm],
|
|
843
|
-
["input-height-md", density.inputHeightMd],
|
|
844
|
-
["input-height-lg", density.inputHeightLg],
|
|
845
|
-
["row-height-compact", density.rowHeightCompact],
|
|
846
|
-
["row-height-normal", density.rowHeightNormal],
|
|
847
|
-
["row-height-spacious", density.rowHeightSpacious],
|
|
848
|
-
["card-padding-sm", density.cardPaddingSm],
|
|
849
|
-
["card-padding-md", density.cardPaddingMd],
|
|
850
|
-
["card-padding-lg", density.cardPaddingLg],
|
|
851
|
-
["dialog-padding", density.dialogPadding],
|
|
852
|
-
["section-gap", density.sectionGap]
|
|
853
|
-
];
|
|
854
|
-
for (const [k, v] of pairs) {
|
|
855
|
-
if (v !== void 0) vars[`--${k}`] = v;
|
|
856
|
-
}
|
|
927
|
+
applyFlat(density.spacing, DENSITY_SPACING_VARS, vars);
|
|
928
|
+
applyFlat(density, DENSITY_ELEMENT_VARS, vars);
|
|
857
929
|
}
|
|
858
930
|
function typeSizeKeyStr(k) {
|
|
859
931
|
return k;
|
|
@@ -870,24 +942,11 @@ function emitTypeIntent(name, intent, vars) {
|
|
|
870
942
|
}
|
|
871
943
|
function emitTypeScale(ts, vars) {
|
|
872
944
|
if (!ts) return;
|
|
873
|
-
|
|
874
|
-
if (ts.bodyFamily !== void 0) vars["--font-family-body"] = ts.bodyFamily;
|
|
875
|
-
if (ts.monoFamily !== void 0) vars["--font-family-mono"] = ts.monoFamily;
|
|
945
|
+
applyFlat(ts, TYPE_FAMILY_VARS, vars);
|
|
876
946
|
if (ts.scale) {
|
|
877
947
|
const s = ts.scale;
|
|
878
|
-
const
|
|
879
|
-
|
|
880
|
-
["sm", s.sm],
|
|
881
|
-
["base", s.base],
|
|
882
|
-
["lg", s.lg],
|
|
883
|
-
["xl", s.xl],
|
|
884
|
-
["2xl", s["2xl"]],
|
|
885
|
-
["3xl", s["3xl"]],
|
|
886
|
-
["4xl", s["4xl"]],
|
|
887
|
-
["display-1", s["display-1"]],
|
|
888
|
-
["display-2", s["display-2"]]
|
|
889
|
-
];
|
|
890
|
-
for (const [k, entry] of pairs) {
|
|
948
|
+
for (const k of TYPE_SIZE_KEYS) {
|
|
949
|
+
const entry = s[k];
|
|
891
950
|
if (entry !== void 0) {
|
|
892
951
|
vars[`--text-${k}`] = entry.size;
|
|
893
952
|
vars[`--leading-${k}`] = entry.lineHeight;
|
|
@@ -896,13 +955,10 @@ function emitTypeScale(ts, vars) {
|
|
|
896
955
|
}
|
|
897
956
|
if (ts.intents) {
|
|
898
957
|
const i = ts.intents;
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
if (i.bodyQuiet) emitTypeIntent("body-quiet", i.bodyQuiet, vars);
|
|
904
|
-
if (i.caption) emitTypeIntent("caption", i.caption, vars);
|
|
905
|
-
if (i.numeric) emitTypeIntent("numeric", i.numeric, vars);
|
|
958
|
+
for (const { key, cssName } of TYPE_INTENT_VARS) {
|
|
959
|
+
const intent = i[key];
|
|
960
|
+
if (intent) emitTypeIntent(cssName, intent, vars);
|
|
961
|
+
}
|
|
906
962
|
}
|
|
907
963
|
}
|
|
908
964
|
function emitMotionIntent(name, intent, vars) {
|
|
@@ -913,60 +969,34 @@ function emitMotion(m, vars) {
|
|
|
913
969
|
if (!m) return;
|
|
914
970
|
if (m.durations) {
|
|
915
971
|
const d = m.durations;
|
|
916
|
-
const
|
|
917
|
-
|
|
918
|
-
["fast", d.fast],
|
|
919
|
-
["normal", d.normal],
|
|
920
|
-
["slow", d.slow],
|
|
921
|
-
["dramatic", d.dramatic]
|
|
922
|
-
];
|
|
923
|
-
for (const [k, v] of pairs) {
|
|
972
|
+
for (const k of MOTION_DURATION_KEYS) {
|
|
973
|
+
const v = d[k];
|
|
924
974
|
if (v !== void 0) vars[`--duration-${k}`] = v;
|
|
925
975
|
}
|
|
926
976
|
}
|
|
927
977
|
if (m.easings) {
|
|
928
978
|
const e = m.easings;
|
|
929
|
-
const
|
|
930
|
-
|
|
931
|
-
["standard", e.standard],
|
|
932
|
-
["emphasized", e.emphasized],
|
|
933
|
-
["spring", e.spring]
|
|
934
|
-
];
|
|
935
|
-
for (const [k, v] of pairs) {
|
|
979
|
+
for (const k of MOTION_EASING_KEYS) {
|
|
980
|
+
const v = e[k];
|
|
936
981
|
if (v !== void 0) vars[`--easing-${k}`] = v;
|
|
937
982
|
}
|
|
938
983
|
}
|
|
939
984
|
if (m.intents) {
|
|
940
985
|
const i = m.intents;
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
if (i.expand) emitMotionIntent("expand", i.expand, vars);
|
|
946
|
-
if (i.transition) emitMotionIntent("transition", i.transition, vars);
|
|
986
|
+
for (const { key, cssName } of MOTION_INTENT_VARS) {
|
|
987
|
+
const intent = i[key];
|
|
988
|
+
if (intent) emitMotionIntent(cssName, intent, vars);
|
|
989
|
+
}
|
|
947
990
|
}
|
|
948
991
|
}
|
|
949
992
|
function emitIconography(i, vars) {
|
|
950
|
-
|
|
951
|
-
if (i.family !== void 0) vars["--icon-family"] = i.family;
|
|
952
|
-
if (i.strokeWidth !== void 0) vars["--icon-stroke-width"] = i.strokeWidth;
|
|
953
|
-
if (i.defaultSize !== void 0) vars["--icon-default-size"] = i.defaultSize;
|
|
993
|
+
applyFlat(i, ICONOGRAPHY_VARS, vars);
|
|
954
994
|
}
|
|
955
995
|
function emitElevation(e, vars) {
|
|
956
|
-
|
|
957
|
-
if (e.cardElevation !== void 0) vars["--elevation-card"] = e.cardElevation;
|
|
958
|
-
if (e.popoverElevation !== void 0) vars["--elevation-popover"] = e.popoverElevation;
|
|
959
|
-
if (e.dialogElevation !== void 0) vars["--elevation-dialog"] = e.dialogElevation;
|
|
960
|
-
if (e.toastElevation !== void 0) vars["--elevation-toast"] = e.toastElevation;
|
|
996
|
+
applyFlat(e, ELEVATION_VARS, vars);
|
|
961
997
|
}
|
|
962
998
|
function emitGeometry(g, vars) {
|
|
963
|
-
|
|
964
|
-
if (g.radiusContainer !== void 0) vars["--radius-container"] = g.radiusContainer;
|
|
965
|
-
if (g.radiusInteractive !== void 0) vars["--radius-interactive"] = g.radiusInteractive;
|
|
966
|
-
if (g.radiusPill !== void 0) vars["--radius-pill"] = g.radiusPill;
|
|
967
|
-
if (g.borderHairline !== void 0) vars["--border-hairline"] = g.borderHairline;
|
|
968
|
-
if (g.borderStandard !== void 0) vars["--border-standard"] = g.borderStandard;
|
|
969
|
-
if (g.borderHeavy !== void 0) vars["--border-heavy"] = g.borderHeavy;
|
|
999
|
+
applyFlat(g, GEOMETRY_VARS, vars);
|
|
970
1000
|
}
|
|
971
1001
|
function resolveThemeForRuntime(theme) {
|
|
972
1002
|
if (theme === void 0) return void 0;
|
package/dist/context/index.d.cts
CHANGED
|
@@ -1,65 +1,7 @@
|
|
|
1
1
|
export { U as UISlotContext, a as UISlotProvider, u as useSlotContent, b as useSlotHasContent, c as useUISlots } from '../UISlotContext-BlRDbHDy.cjs';
|
|
2
2
|
export { B as BUILT_IN_THEMES, C as ColorMode, a as CurrentPagePathContext, b as CurrentPagePathProvider, c as CurrentPagePathProviderProps, D as DesignTheme, d as DesignThemeProvider, O as OrbitalThemeProvider, e as OrbitalThemeProviderProps, R as ResolvedMode, T as ThemeContext, f as ThemeProvider, g as ThemeProviderProps, U as UIThemeDefinition, u as useCurrentPagePath, h as useDesignTheme, i as useTheme } from '../CurrentPagePathContext-J1lqjvAq.cjs';
|
|
3
|
-
|
|
4
|
-
export { ANONYMOUS_USER, UISlot } from '@almadar/core';
|
|
3
|
+
export { T as ThemeMode, r as resolveThemeForRuntime, t as themeTokensToCssVars } from '../themeTokens-DVRwufw8.cjs';
|
|
5
4
|
export { U as UserContext, a as UserContextValue, b as UserData, c as UserProvider, d as UserProviderProps, u as useHasPermission, e as useHasRole, f as useUser, g as useUserForEvaluation } from '../UserContext-D566nfWA.cjs';
|
|
5
|
+
export { ANONYMOUS_USER, UISlot } from '@almadar/core';
|
|
6
6
|
export { S as SlotAnimation, a as SlotChangeCallback, b as SlotContent, c as SlotRenderConfig, U as UISlotManager } from '../useUISlots-GNwGLlW2.cjs';
|
|
7
7
|
import 'react';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* themeTokens — runtime mirror of the orbital compiler's theme codegen.
|
|
11
|
-
*
|
|
12
|
-
* The compile path (orbital-rust/crates/orbital-shell-typescript/src/codegen/theme.rs)
|
|
13
|
-
* reads `OrbitalDefinition.theme.tokens` and emits CSS custom-property
|
|
14
|
-
* declarations into a `[data-theme="<name>-<mode>"]` block. The runtime
|
|
15
|
-
* does not parse compiled CSS — it reads the same `tokens` object directly
|
|
16
|
-
* and produces the same `{ '--color-primary': '…', '--radius-md': '…' }` map
|
|
17
|
-
* that the compiler emits.
|
|
18
|
-
*
|
|
19
|
-
* Keeping the two paths byte-identical at the variable level is the contract:
|
|
20
|
-
* editing tokens via the Studio Design System tab must produce the exact
|
|
21
|
-
* same rendered result as editing them in source and running `orbital
|
|
22
|
-
* compile`. The mapping rules here mirror `generate_tokens_css` /
|
|
23
|
-
* `generate_tokens_css_dark` (theme.rs:122–351).
|
|
24
|
-
*
|
|
25
|
-
* Compile vs runtime difference (intentional):
|
|
26
|
-
* - Compile emits the FULL set: schema overrides on top of defaults. This is
|
|
27
|
-
* needed because the compiled CSS replaces the theme entirely.
|
|
28
|
-
* - Runtime emits ONLY the keys present in `tokens` (and `variants.dark`).
|
|
29
|
-
* Missing keys cascade from the parent `[data-theme]` rule on the document
|
|
30
|
-
* element. The provider scopes overrides to an orbital subtree without
|
|
31
|
-
* shadowing inherited defaults.
|
|
32
|
-
*
|
|
33
|
-
* @packageDocumentation
|
|
34
|
-
*/
|
|
35
|
-
|
|
36
|
-
/** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
|
|
37
|
-
type ThemeMode = 'light' | 'dark';
|
|
38
|
-
/**
|
|
39
|
-
* Convert `ThemeTokens` (+ optional dark variant) into a CSS custom-property
|
|
40
|
-
* map keyed by variable name (e.g. `--color-primary`).
|
|
41
|
-
*
|
|
42
|
-
* Mapping rules (mirror theme.rs):
|
|
43
|
-
* - `tokens.colors.<k>` → `--color-<k>`
|
|
44
|
-
* - `tokens.radii.<k>` → `--radius-<k>`
|
|
45
|
-
* - `tokens.spacing.<k>` → `--space-<k>`
|
|
46
|
-
* - `tokens.typography.<k>` → `--<k>` (keys already include their `font-`/
|
|
47
|
-
* `letter-`/`line-` prefix)
|
|
48
|
-
* - `tokens.shadows.<k>` → `--shadow-<k>` (schema key has no prefix)
|
|
49
|
-
*
|
|
50
|
-
* In `'dark'` mode, the `darkVariant` overrides are merged on top of the
|
|
51
|
-
* base tokens per category — same precedence the Rust compiler uses
|
|
52
|
-
* (`generate_tokens_css_dark`). Categories not present in `darkVariant` fall
|
|
53
|
-
* back to the base tokens.
|
|
54
|
-
*/
|
|
55
|
-
declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
|
|
56
|
-
/**
|
|
57
|
-
* `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
|
|
58
|
-
* unresolved import reference (e.g. `"Ocean.theme"`) that should have been
|
|
59
|
-
* inlined by the compiler's import phase before runtime. If we still see a
|
|
60
|
-
* string here, the upstream resolution path didn't run — return `undefined`
|
|
61
|
-
* rather than guess. `OrbitalThemeProvider` falls through to passthrough.
|
|
62
|
-
*/
|
|
63
|
-
declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
|
|
64
|
-
|
|
65
|
-
export { type ThemeMode, resolveThemeForRuntime, themeTokensToCssVars };
|
package/dist/context/index.d.ts
CHANGED
|
@@ -1,65 +1,7 @@
|
|
|
1
1
|
export { U as UISlotContext, a as UISlotProvider, u as useSlotContent, b as useSlotHasContent, c as useUISlots } from '../UISlotContext-CB89mv7N.js';
|
|
2
2
|
export { B as BUILT_IN_THEMES, C as ColorMode, a as CurrentPagePathContext, b as CurrentPagePathProvider, c as CurrentPagePathProviderProps, D as DesignTheme, d as DesignThemeProvider, O as OrbitalThemeProvider, e as OrbitalThemeProviderProps, R as ResolvedMode, T as ThemeContext, f as ThemeProvider, g as ThemeProviderProps, U as UIThemeDefinition, u as useCurrentPagePath, h as useDesignTheme, i as useTheme } from '../CurrentPagePathContext-J1lqjvAq.js';
|
|
3
|
-
|
|
4
|
-
export { ANONYMOUS_USER, UISlot } from '@almadar/core';
|
|
3
|
+
export { T as ThemeMode, r as resolveThemeForRuntime, t as themeTokensToCssVars } from '../themeTokens-DVRwufw8.js';
|
|
5
4
|
export { U as UserContext, a as UserContextValue, b as UserData, c as UserProvider, d as UserProviderProps, u as useHasPermission, e as useHasRole, f as useUser, g as useUserForEvaluation } from '../UserContext-D566nfWA.js';
|
|
5
|
+
export { ANONYMOUS_USER, UISlot } from '@almadar/core';
|
|
6
6
|
export { S as SlotAnimation, a as SlotChangeCallback, b as SlotContent, c as SlotRenderConfig, U as UISlotManager } from '../useUISlots-GNwGLlW2.js';
|
|
7
7
|
import 'react';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* themeTokens — runtime mirror of the orbital compiler's theme codegen.
|
|
11
|
-
*
|
|
12
|
-
* The compile path (orbital-rust/crates/orbital-shell-typescript/src/codegen/theme.rs)
|
|
13
|
-
* reads `OrbitalDefinition.theme.tokens` and emits CSS custom-property
|
|
14
|
-
* declarations into a `[data-theme="<name>-<mode>"]` block. The runtime
|
|
15
|
-
* does not parse compiled CSS — it reads the same `tokens` object directly
|
|
16
|
-
* and produces the same `{ '--color-primary': '…', '--radius-md': '…' }` map
|
|
17
|
-
* that the compiler emits.
|
|
18
|
-
*
|
|
19
|
-
* Keeping the two paths byte-identical at the variable level is the contract:
|
|
20
|
-
* editing tokens via the Studio Design System tab must produce the exact
|
|
21
|
-
* same rendered result as editing them in source and running `orbital
|
|
22
|
-
* compile`. The mapping rules here mirror `generate_tokens_css` /
|
|
23
|
-
* `generate_tokens_css_dark` (theme.rs:122–351).
|
|
24
|
-
*
|
|
25
|
-
* Compile vs runtime difference (intentional):
|
|
26
|
-
* - Compile emits the FULL set: schema overrides on top of defaults. This is
|
|
27
|
-
* needed because the compiled CSS replaces the theme entirely.
|
|
28
|
-
* - Runtime emits ONLY the keys present in `tokens` (and `variants.dark`).
|
|
29
|
-
* Missing keys cascade from the parent `[data-theme]` rule on the document
|
|
30
|
-
* element. The provider scopes overrides to an orbital subtree without
|
|
31
|
-
* shadowing inherited defaults.
|
|
32
|
-
*
|
|
33
|
-
* @packageDocumentation
|
|
34
|
-
*/
|
|
35
|
-
|
|
36
|
-
/** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
|
|
37
|
-
type ThemeMode = 'light' | 'dark';
|
|
38
|
-
/**
|
|
39
|
-
* Convert `ThemeTokens` (+ optional dark variant) into a CSS custom-property
|
|
40
|
-
* map keyed by variable name (e.g. `--color-primary`).
|
|
41
|
-
*
|
|
42
|
-
* Mapping rules (mirror theme.rs):
|
|
43
|
-
* - `tokens.colors.<k>` → `--color-<k>`
|
|
44
|
-
* - `tokens.radii.<k>` → `--radius-<k>`
|
|
45
|
-
* - `tokens.spacing.<k>` → `--space-<k>`
|
|
46
|
-
* - `tokens.typography.<k>` → `--<k>` (keys already include their `font-`/
|
|
47
|
-
* `letter-`/`line-` prefix)
|
|
48
|
-
* - `tokens.shadows.<k>` → `--shadow-<k>` (schema key has no prefix)
|
|
49
|
-
*
|
|
50
|
-
* In `'dark'` mode, the `darkVariant` overrides are merged on top of the
|
|
51
|
-
* base tokens per category — same precedence the Rust compiler uses
|
|
52
|
-
* (`generate_tokens_css_dark`). Categories not present in `darkVariant` fall
|
|
53
|
-
* back to the base tokens.
|
|
54
|
-
*/
|
|
55
|
-
declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
|
|
56
|
-
/**
|
|
57
|
-
* `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
|
|
58
|
-
* unresolved import reference (e.g. `"Ocean.theme"`) that should have been
|
|
59
|
-
* inlined by the compiler's import phase before runtime. If we still see a
|
|
60
|
-
* string here, the upstream resolution path didn't run — return `undefined`
|
|
61
|
-
* rather than guess. `OrbitalThemeProvider` falls through to passthrough.
|
|
62
|
-
*/
|
|
63
|
-
declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
|
|
64
|
-
|
|
65
|
-
export { type ThemeMode, resolveThemeForRuntime, themeTokensToCssVars };
|