@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.js
CHANGED
|
@@ -753,17 +753,127 @@ function useTheme() {
|
|
|
753
753
|
var ThemeContext_default = ThemeContext;
|
|
754
754
|
|
|
755
755
|
// lib/themeTokens.ts
|
|
756
|
+
function applyFlat(obj, table, vars) {
|
|
757
|
+
if (!obj) return;
|
|
758
|
+
for (const { cssVar, key } of table) {
|
|
759
|
+
const value = obj[key];
|
|
760
|
+
if (value !== void 0) vars[cssVar] = value;
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
var DENSITY_SPACING_VARS = [
|
|
764
|
+
{ cssVar: "--space-0", key: "space0" },
|
|
765
|
+
{ cssVar: "--space-1", key: "space1" },
|
|
766
|
+
{ cssVar: "--space-2", key: "space2" },
|
|
767
|
+
{ cssVar: "--space-3", key: "space3" },
|
|
768
|
+
{ cssVar: "--space-4", key: "space4" },
|
|
769
|
+
{ cssVar: "--space-5", key: "space5" },
|
|
770
|
+
{ cssVar: "--space-6", key: "space6" },
|
|
771
|
+
{ cssVar: "--space-7", key: "space7" },
|
|
772
|
+
{ cssVar: "--space-8", key: "space8" },
|
|
773
|
+
{ cssVar: "--space-9", key: "space9" },
|
|
774
|
+
{ cssVar: "--space-10", key: "space10" },
|
|
775
|
+
{ cssVar: "--space-11", key: "space11" },
|
|
776
|
+
{ cssVar: "--space-12", key: "space12" }
|
|
777
|
+
];
|
|
778
|
+
var DENSITY_ELEMENT_VARS = [
|
|
779
|
+
{ cssVar: "--button-height-sm", key: "buttonHeightSm" },
|
|
780
|
+
{ cssVar: "--button-height-md", key: "buttonHeightMd" },
|
|
781
|
+
{ cssVar: "--button-height-lg", key: "buttonHeightLg" },
|
|
782
|
+
{ cssVar: "--input-height-sm", key: "inputHeightSm" },
|
|
783
|
+
{ cssVar: "--input-height-md", key: "inputHeightMd" },
|
|
784
|
+
{ cssVar: "--input-height-lg", key: "inputHeightLg" },
|
|
785
|
+
{ cssVar: "--row-height-compact", key: "rowHeightCompact" },
|
|
786
|
+
{ cssVar: "--row-height-normal", key: "rowHeightNormal" },
|
|
787
|
+
{ cssVar: "--row-height-spacious", key: "rowHeightSpacious" },
|
|
788
|
+
{ cssVar: "--card-padding-sm", key: "cardPaddingSm" },
|
|
789
|
+
{ cssVar: "--card-padding-md", key: "cardPaddingMd" },
|
|
790
|
+
{ cssVar: "--card-padding-lg", key: "cardPaddingLg" },
|
|
791
|
+
{ cssVar: "--dialog-padding", key: "dialogPadding" },
|
|
792
|
+
{ cssVar: "--section-gap", key: "sectionGap" }
|
|
793
|
+
];
|
|
794
|
+
var TYPE_FAMILY_VARS = [
|
|
795
|
+
{ cssVar: "--font-family-display", key: "displayFamily" },
|
|
796
|
+
{ cssVar: "--font-family-body", key: "bodyFamily" },
|
|
797
|
+
{ cssVar: "--font-family-mono", key: "monoFamily" }
|
|
798
|
+
];
|
|
799
|
+
var TYPE_SIZE_KEYS = [
|
|
800
|
+
"xs",
|
|
801
|
+
"sm",
|
|
802
|
+
"base",
|
|
803
|
+
"lg",
|
|
804
|
+
"xl",
|
|
805
|
+
"2xl",
|
|
806
|
+
"3xl",
|
|
807
|
+
"4xl",
|
|
808
|
+
"display-1",
|
|
809
|
+
"display-2"
|
|
810
|
+
];
|
|
811
|
+
var TYPE_INTENT_VARS = [
|
|
812
|
+
{ key: "headingMajor", cssName: "heading-major" },
|
|
813
|
+
{ key: "headingMinor", cssName: "heading-minor" },
|
|
814
|
+
{ key: "bodyEmphasis", cssName: "body-emphasis" },
|
|
815
|
+
{ key: "bodyDefault", cssName: "body-default" },
|
|
816
|
+
{ key: "bodyQuiet", cssName: "body-quiet" },
|
|
817
|
+
{ key: "caption", cssName: "caption" },
|
|
818
|
+
{ key: "numeric", cssName: "numeric" }
|
|
819
|
+
];
|
|
820
|
+
var MOTION_DURATION_KEYS = [
|
|
821
|
+
"instant",
|
|
822
|
+
"fast",
|
|
823
|
+
"normal",
|
|
824
|
+
"slow",
|
|
825
|
+
"dramatic"
|
|
826
|
+
];
|
|
827
|
+
var MOTION_EASING_KEYS = [
|
|
828
|
+
"linear",
|
|
829
|
+
"standard",
|
|
830
|
+
"emphasized",
|
|
831
|
+
"spring"
|
|
832
|
+
];
|
|
833
|
+
var MOTION_INTENT_VARS = [
|
|
834
|
+
{ key: "enter", cssName: "enter" },
|
|
835
|
+
{ key: "exit", cssName: "exit" },
|
|
836
|
+
{ key: "hover", cssName: "hover" },
|
|
837
|
+
{ key: "press", cssName: "press" },
|
|
838
|
+
{ key: "expand", cssName: "expand" },
|
|
839
|
+
{ key: "transition", cssName: "transition" }
|
|
840
|
+
];
|
|
841
|
+
var ICONOGRAPHY_VARS = [
|
|
842
|
+
{ cssVar: "--icon-family", key: "family" },
|
|
843
|
+
{ cssVar: "--icon-stroke-width", key: "strokeWidth" },
|
|
844
|
+
{ cssVar: "--icon-default-size", key: "defaultSize" }
|
|
845
|
+
];
|
|
846
|
+
var ELEVATION_VARS = [
|
|
847
|
+
{ cssVar: "--elevation-card", key: "cardElevation" },
|
|
848
|
+
{ cssVar: "--elevation-popover", key: "popoverElevation" },
|
|
849
|
+
{ cssVar: "--elevation-dialog", key: "dialogElevation" },
|
|
850
|
+
{ cssVar: "--elevation-toast", key: "toastElevation" }
|
|
851
|
+
];
|
|
852
|
+
var GEOMETRY_VARS = [
|
|
853
|
+
{ cssVar: "--radius-container", key: "radiusContainer" },
|
|
854
|
+
{ cssVar: "--radius-interactive", key: "radiusInteractive" },
|
|
855
|
+
{ cssVar: "--radius-pill", key: "radiusPill" },
|
|
856
|
+
{ cssVar: "--border-hairline", key: "borderHairline" },
|
|
857
|
+
{ cssVar: "--border-standard", key: "borderStandard" },
|
|
858
|
+
{ cssVar: "--border-heavy", key: "borderHeavy" }
|
|
859
|
+
];
|
|
860
|
+
var LEGACY_PREFIXES = {
|
|
861
|
+
colors: "--color-",
|
|
862
|
+
radii: "--radius-",
|
|
863
|
+
spacing: "--space-",
|
|
864
|
+
shadows: "--shadow-"
|
|
865
|
+
};
|
|
756
866
|
function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
|
|
757
867
|
const vars = {};
|
|
758
868
|
const isDark = mode === "dark";
|
|
759
869
|
const pickColors = isDark && darkVariant?.colors ? darkVariant.colors : tokens.colors;
|
|
760
870
|
if (pickColors) {
|
|
761
871
|
for (const [key, value] of Object.entries(pickColors)) {
|
|
762
|
-
vars[
|
|
872
|
+
vars[`${LEGACY_PREFIXES.colors}${key}`] = value;
|
|
763
873
|
}
|
|
764
874
|
if (isDark && darkVariant?.colors && tokens.colors) {
|
|
765
875
|
for (const [key, value] of Object.entries(tokens.colors)) {
|
|
766
|
-
const varName =
|
|
876
|
+
const varName = `${LEGACY_PREFIXES.colors}${key}`;
|
|
767
877
|
if (!(varName in vars)) vars[varName] = value;
|
|
768
878
|
}
|
|
769
879
|
}
|
|
@@ -771,13 +881,13 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
|
|
|
771
881
|
const pickRadii = isDark && darkVariant?.radii ? darkVariant.radii : tokens.radii;
|
|
772
882
|
if (pickRadii) {
|
|
773
883
|
for (const [key, value] of Object.entries(pickRadii)) {
|
|
774
|
-
vars[
|
|
884
|
+
vars[`${LEGACY_PREFIXES.radii}${key}`] = value;
|
|
775
885
|
}
|
|
776
886
|
}
|
|
777
887
|
const pickSpacing = isDark && darkVariant?.spacing ? darkVariant.spacing : tokens.spacing;
|
|
778
888
|
if (pickSpacing) {
|
|
779
889
|
for (const [key, value] of Object.entries(pickSpacing)) {
|
|
780
|
-
vars[
|
|
890
|
+
vars[`${LEGACY_PREFIXES.spacing}${key}`] = value;
|
|
781
891
|
}
|
|
782
892
|
}
|
|
783
893
|
const pickTypography = isDark && darkVariant?.typography ? darkVariant.typography : tokens.typography;
|
|
@@ -789,7 +899,7 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
|
|
|
789
899
|
const pickShadows = isDark && darkVariant?.shadows ? darkVariant.shadows : tokens.shadows;
|
|
790
900
|
if (pickShadows) {
|
|
791
901
|
for (const [key, value] of Object.entries(pickShadows)) {
|
|
792
|
-
vars[
|
|
902
|
+
vars[`${LEGACY_PREFIXES.shadows}${key}`] = value;
|
|
793
903
|
}
|
|
794
904
|
}
|
|
795
905
|
const pickDensity = isDark && darkVariant?.density ? darkVariant.density : tokens.density;
|
|
@@ -808,46 +918,8 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
|
|
|
808
918
|
}
|
|
809
919
|
function emitDensity(density, vars) {
|
|
810
920
|
if (!density) return;
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
const pairs2 = [
|
|
814
|
-
["0", s.space0],
|
|
815
|
-
["1", s.space1],
|
|
816
|
-
["2", s.space2],
|
|
817
|
-
["3", s.space3],
|
|
818
|
-
["4", s.space4],
|
|
819
|
-
["5", s.space5],
|
|
820
|
-
["6", s.space6],
|
|
821
|
-
["7", s.space7],
|
|
822
|
-
["8", s.space8],
|
|
823
|
-
["9", s.space9],
|
|
824
|
-
["10", s.space10],
|
|
825
|
-
["11", s.space11],
|
|
826
|
-
["12", s.space12]
|
|
827
|
-
];
|
|
828
|
-
for (const [k, v] of pairs2) {
|
|
829
|
-
if (v !== void 0) vars[`--space-${k}`] = v;
|
|
830
|
-
}
|
|
831
|
-
}
|
|
832
|
-
const pairs = [
|
|
833
|
-
["button-height-sm", density.buttonHeightSm],
|
|
834
|
-
["button-height-md", density.buttonHeightMd],
|
|
835
|
-
["button-height-lg", density.buttonHeightLg],
|
|
836
|
-
["input-height-sm", density.inputHeightSm],
|
|
837
|
-
["input-height-md", density.inputHeightMd],
|
|
838
|
-
["input-height-lg", density.inputHeightLg],
|
|
839
|
-
["row-height-compact", density.rowHeightCompact],
|
|
840
|
-
["row-height-normal", density.rowHeightNormal],
|
|
841
|
-
["row-height-spacious", density.rowHeightSpacious],
|
|
842
|
-
["card-padding-sm", density.cardPaddingSm],
|
|
843
|
-
["card-padding-md", density.cardPaddingMd],
|
|
844
|
-
["card-padding-lg", density.cardPaddingLg],
|
|
845
|
-
["dialog-padding", density.dialogPadding],
|
|
846
|
-
["section-gap", density.sectionGap]
|
|
847
|
-
];
|
|
848
|
-
for (const [k, v] of pairs) {
|
|
849
|
-
if (v !== void 0) vars[`--${k}`] = v;
|
|
850
|
-
}
|
|
921
|
+
applyFlat(density.spacing, DENSITY_SPACING_VARS, vars);
|
|
922
|
+
applyFlat(density, DENSITY_ELEMENT_VARS, vars);
|
|
851
923
|
}
|
|
852
924
|
function typeSizeKeyStr(k) {
|
|
853
925
|
return k;
|
|
@@ -864,24 +936,11 @@ function emitTypeIntent(name, intent, vars) {
|
|
|
864
936
|
}
|
|
865
937
|
function emitTypeScale(ts, vars) {
|
|
866
938
|
if (!ts) return;
|
|
867
|
-
|
|
868
|
-
if (ts.bodyFamily !== void 0) vars["--font-family-body"] = ts.bodyFamily;
|
|
869
|
-
if (ts.monoFamily !== void 0) vars["--font-family-mono"] = ts.monoFamily;
|
|
939
|
+
applyFlat(ts, TYPE_FAMILY_VARS, vars);
|
|
870
940
|
if (ts.scale) {
|
|
871
941
|
const s = ts.scale;
|
|
872
|
-
const
|
|
873
|
-
|
|
874
|
-
["sm", s.sm],
|
|
875
|
-
["base", s.base],
|
|
876
|
-
["lg", s.lg],
|
|
877
|
-
["xl", s.xl],
|
|
878
|
-
["2xl", s["2xl"]],
|
|
879
|
-
["3xl", s["3xl"]],
|
|
880
|
-
["4xl", s["4xl"]],
|
|
881
|
-
["display-1", s["display-1"]],
|
|
882
|
-
["display-2", s["display-2"]]
|
|
883
|
-
];
|
|
884
|
-
for (const [k, entry] of pairs) {
|
|
942
|
+
for (const k of TYPE_SIZE_KEYS) {
|
|
943
|
+
const entry = s[k];
|
|
885
944
|
if (entry !== void 0) {
|
|
886
945
|
vars[`--text-${k}`] = entry.size;
|
|
887
946
|
vars[`--leading-${k}`] = entry.lineHeight;
|
|
@@ -890,13 +949,10 @@ function emitTypeScale(ts, vars) {
|
|
|
890
949
|
}
|
|
891
950
|
if (ts.intents) {
|
|
892
951
|
const i = ts.intents;
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
if (i.bodyQuiet) emitTypeIntent("body-quiet", i.bodyQuiet, vars);
|
|
898
|
-
if (i.caption) emitTypeIntent("caption", i.caption, vars);
|
|
899
|
-
if (i.numeric) emitTypeIntent("numeric", i.numeric, vars);
|
|
952
|
+
for (const { key, cssName } of TYPE_INTENT_VARS) {
|
|
953
|
+
const intent = i[key];
|
|
954
|
+
if (intent) emitTypeIntent(cssName, intent, vars);
|
|
955
|
+
}
|
|
900
956
|
}
|
|
901
957
|
}
|
|
902
958
|
function emitMotionIntent(name, intent, vars) {
|
|
@@ -907,60 +963,34 @@ function emitMotion(m, vars) {
|
|
|
907
963
|
if (!m) return;
|
|
908
964
|
if (m.durations) {
|
|
909
965
|
const d = m.durations;
|
|
910
|
-
const
|
|
911
|
-
|
|
912
|
-
["fast", d.fast],
|
|
913
|
-
["normal", d.normal],
|
|
914
|
-
["slow", d.slow],
|
|
915
|
-
["dramatic", d.dramatic]
|
|
916
|
-
];
|
|
917
|
-
for (const [k, v] of pairs) {
|
|
966
|
+
for (const k of MOTION_DURATION_KEYS) {
|
|
967
|
+
const v = d[k];
|
|
918
968
|
if (v !== void 0) vars[`--duration-${k}`] = v;
|
|
919
969
|
}
|
|
920
970
|
}
|
|
921
971
|
if (m.easings) {
|
|
922
972
|
const e = m.easings;
|
|
923
|
-
const
|
|
924
|
-
|
|
925
|
-
["standard", e.standard],
|
|
926
|
-
["emphasized", e.emphasized],
|
|
927
|
-
["spring", e.spring]
|
|
928
|
-
];
|
|
929
|
-
for (const [k, v] of pairs) {
|
|
973
|
+
for (const k of MOTION_EASING_KEYS) {
|
|
974
|
+
const v = e[k];
|
|
930
975
|
if (v !== void 0) vars[`--easing-${k}`] = v;
|
|
931
976
|
}
|
|
932
977
|
}
|
|
933
978
|
if (m.intents) {
|
|
934
979
|
const i = m.intents;
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
if (i.expand) emitMotionIntent("expand", i.expand, vars);
|
|
940
|
-
if (i.transition) emitMotionIntent("transition", i.transition, vars);
|
|
980
|
+
for (const { key, cssName } of MOTION_INTENT_VARS) {
|
|
981
|
+
const intent = i[key];
|
|
982
|
+
if (intent) emitMotionIntent(cssName, intent, vars);
|
|
983
|
+
}
|
|
941
984
|
}
|
|
942
985
|
}
|
|
943
986
|
function emitIconography(i, vars) {
|
|
944
|
-
|
|
945
|
-
if (i.family !== void 0) vars["--icon-family"] = i.family;
|
|
946
|
-
if (i.strokeWidth !== void 0) vars["--icon-stroke-width"] = i.strokeWidth;
|
|
947
|
-
if (i.defaultSize !== void 0) vars["--icon-default-size"] = i.defaultSize;
|
|
987
|
+
applyFlat(i, ICONOGRAPHY_VARS, vars);
|
|
948
988
|
}
|
|
949
989
|
function emitElevation(e, vars) {
|
|
950
|
-
|
|
951
|
-
if (e.cardElevation !== void 0) vars["--elevation-card"] = e.cardElevation;
|
|
952
|
-
if (e.popoverElevation !== void 0) vars["--elevation-popover"] = e.popoverElevation;
|
|
953
|
-
if (e.dialogElevation !== void 0) vars["--elevation-dialog"] = e.dialogElevation;
|
|
954
|
-
if (e.toastElevation !== void 0) vars["--elevation-toast"] = e.toastElevation;
|
|
990
|
+
applyFlat(e, ELEVATION_VARS, vars);
|
|
955
991
|
}
|
|
956
992
|
function emitGeometry(g, vars) {
|
|
957
|
-
|
|
958
|
-
if (g.radiusContainer !== void 0) vars["--radius-container"] = g.radiusContainer;
|
|
959
|
-
if (g.radiusInteractive !== void 0) vars["--radius-interactive"] = g.radiusInteractive;
|
|
960
|
-
if (g.radiusPill !== void 0) vars["--radius-pill"] = g.radiusPill;
|
|
961
|
-
if (g.borderHairline !== void 0) vars["--border-hairline"] = g.borderHairline;
|
|
962
|
-
if (g.borderStandard !== void 0) vars["--border-standard"] = g.borderStandard;
|
|
963
|
-
if (g.borderHeavy !== void 0) vars["--border-heavy"] = g.borderHeavy;
|
|
993
|
+
applyFlat(g, GEOMETRY_VARS, vars);
|
|
964
994
|
}
|
|
965
995
|
function resolveThemeForRuntime(theme) {
|
|
966
996
|
if (theme === void 0) return void 0;
|