@uni-design-system/uni-core 3.0.1 → 4.0.0

package/dist/cjs/index.cjs

@@ -286,6 +286,17 @@ var ShadowCssMap = {
 	modal: GetBoxShadows(ShadowMap["modal"])
 };
 //#endregion
+//#region src/concepts/style/inputs.constants.ts
+var removeInputPlatformStyling = {
+	appearance: "none",
+	background: "none",
+	border: "none",
+	outline: "none",
+	boxShadow: "none",
+	padding: 0,
+	width: "100%"
+};
+//#endregion
 //#region src/concepts/theme/palettes/theme.palette.ts
 var genericLightTheme = {
 	primary: "#0066B2",
@@ -304,6 +315,38 @@ var genericLightTheme = {
 	onDisabled: "rgba(24, 24, 27, 0.4)"
 };
 //#endregion
+//#region src/concepts/typography/typography.records.ts
+var FontWeightMap = {
+	thin: 100,
+	"extra-light": 200,
+	light: 200,
+	normal: 400,
+	medium: 500,
+	"semi-bold": 600,
+	bold: 700,
+	"extra-bold": 800,
+	black: 900,
+	"extra-black": 950
+};
+//#endregion
+//#region src/concepts/typography/typeface.helpers.ts
+var px = (value) => `${value}px`;
+/**
+* Converts a TextStyle (numeric, design-token oriented) into a
+* TypeFaceDefinition (CSS-ready) so a theme's `typefaces` map can be
+* derived from its `typography` block instead of being duplicated.
+*/
+var toTypeface = (style) => ({
+	fontFamily: style.fontFamily,
+	fontSize: px(style.fontSize),
+	lineHeight: px(style.lineHeight),
+	...style.letterSpacing !== void 0 && { letterSpacing: px(style.letterSpacing) },
+	...style.textTransform === "uppercase" && { textTransform: "uppercase" },
+	...style.fontWeight !== void 0 && { fontWeight: style.fontWeight },
+	...style.fontStyle && { fontStyle: style.fontStyle }
+});
+var toTypefaces = (typography) => Object.fromEntries(Object.entries(typography).map(([role, style]) => [role, toTypeface(style)]));
+//#endregion
 //#region src/concepts/theme/themes/base.theme.ts
 var BaseButton = {
 	borderRadius: 100,
@@ -359,6 +402,139 @@ var BaseContainer = {
 		xxl: 28
 	}
 };
+var BaseTypography = {
+	"display-large": {
+		fontFamily: "Red Hat Display",
+		fontSize: 57,
+		lineHeight: 64,
+		fontWeight: "normal",
+		letterSpacing: -.25
+	},
+	"display-medium": {
+		fontFamily: "Red Hat Display",
+		fontSize: 45,
+		lineHeight: 52,
+		fontWeight: "normal"
+	},
+	"display-small": {
+		fontFamily: "Red Hat Display",
+		fontSize: 36,
+		lineHeight: 44,
+		fontWeight: "normal"
+	},
+	"headline-large": {
+		fontFamily: "Red Hat Display",
+		fontSize: 32,
+		lineHeight: 40,
+		fontWeight: "normal"
+	},
+	"headline-medium": {
+		fontFamily: "Red Hat Display",
+		fontSize: 28,
+		lineHeight: 36,
+		fontWeight: "normal"
+	},
+	"headline-small": {
+		fontFamily: "Red Hat Display",
+		fontSize: 24,
+		lineHeight: 32,
+		fontWeight: "normal"
+	},
+	"title-large": {
+		fontFamily: "Red Hat Display",
+		fontSize: 22,
+		lineHeight: 28,
+		fontWeight: "normal"
+	},
+	"title-medium": {
+		fontFamily: "Red Hat Display",
+		fontSize: 16,
+		lineHeight: 24,
+		fontWeight: "medium",
+		letterSpacing: .15
+	},
+	"title-small": {
+		fontFamily: "Red Hat Display",
+		fontWeight: "medium",
+		fontSize: 14,
+		lineHeight: 20,
+		letterSpacing: .1
+	},
+	"body-1-long": {
+		fontFamily: "Roboto",
+		fontSize: 16,
+		lineHeight: 22
+	},
+	"body-1-short": {
+		fontFamily: "Roboto",
+		fontSize: 16,
+		lineHeight: 24
+	},
+	"body-2-long": {
+		fontFamily: "Roboto",
+		fontSize: 14,
+		lineHeight: 18
+	},
+	"body-2-short": {
+		fontFamily: "Roboto",
+		fontSize: 14,
+		lineHeight: 20
+	},
+	"subtitle-1": {
+		fontFamily: "Red Hat Display",
+		fontSize: 16,
+		lineHeight: 24,
+		letterSpacing: .15
+	},
+	"subtitle-2": {
+		fontFamily: "Red Hat Display",
+		fontSize: 14,
+		lineHeight: 20,
+		fontWeight: "medium",
+		letterSpacing: .1
+	},
+	label: {
+		fontFamily: "Roboto",
+		fontSize: 14,
+		lineHeight: 20
+	},
+	button: {
+		fontFamily: "Red Hat Display",
+		fontSize: 14,
+		lineHeight: 20,
+		fontWeight: "medium",
+		textTransform: "capitalize"
+	},
+	caption: {
+		fontFamily: "Roboto",
+		fontSize: 12,
+		lineHeight: 18,
+		letterSpacing: .4
+	},
+	overline: {
+		fontFamily: "Red Hat Display",
+		fontSize: 10,
+		lineHeight: 18,
+		letterSpacing: 1.5,
+		textTransform: "uppercase"
+	},
+	paragraph: {
+		fontFamily: "Roboto",
+		fontSize: 16,
+		lineHeight: 24
+	},
+	quote: {
+		fontFamily: "Roboto",
+		fontSize: 16,
+		lineHeight: 24
+	},
+	note: {
+		fontFamily: "Roboto",
+		fontSize: 14,
+		lineHeight: 22,
+		fontStyle: "italic"
+	}
+};
 var BaseTheme = {
 	id: "BaseTheme",
 	name: "Base Theme",
@@ -393,143 +569,52 @@ var BaseTheme = {
 		"on-inverse-surface-primary": "#D0BCFF",
 		scrim: "#000000",
 		transparent: "rgba(0,0,0,0)",
+		ghost: "rgba(0,0,0,0)",
+		quaternary: "#79747E",
+		"on-quaternary": "#FFFFFF",
+		warn: "#B3261E",
+		"on-warn": "#FFFFFF",
+		success: "#2E7D32",
+		"on-success": "#FFFFFF",
+		disabled: "rgba(0,0,0,0.12)",
+		"on-disabled": "rgba(0,0,0,0.38)",
+		"on-primary-container-variant": "rgba(0,0,0,0.4)",
+		"on-primary-container-border": "#6750A4",
+		"on-secondary-container-variant": "rgba(0,0,0,0.4)",
+		"on-secondary-container-border": "#625B71",
+		"on-tertiary-container-variant": "rgba(0,0,0,0.4)",
+		"on-tertiary-container-border": "#7D5260",
+		"warn-container": "#F9DEDC",
+		"on-warn-container": "#8C1D18",
+		"on-warn-container-variant": "rgba(0,0,0,0.4)",
+		"on-warn-container-border": "#8C1D18",
+		"success-container": "#C6F0CD",
+		"on-success-container": "#1E5128",
+		"on-success-container-variant": "rgba(0,0,0,0.4)",
+		"on-success-container-border": "#1E5128",
+		"disabled-container": "#F2F2F2",
+		"on-disabled-container": "rgba(0,0,0,0.38)",
+		"inverse-container": "#313033",
+		"on-inverse-container": "#F4EFF4",
 		"primary-surface": genericLightTheme.background,
 		"on-primary-surface": genericLightTheme.onLight,
-		"on-primary-surface-variant": genericLightTheme.primary
-	},
-	typography: {
-		"display-large": {
-			fontFamily: "Red Hat Display",
-			fontSize: 57,
-			lineHeight: 64,
-			fontWeight: "normal",
-			letterSpacing: -.25
-		},
-		"display-medium": {
-			fontFamily: "Red Hat Display",
-			fontSize: 45,
-			lineHeight: 52,
-			fontWeight: "normal"
-		},
-		"display-small": {
-			fontFamily: "Red Hat Display",
-			fontSize: 36,
-			lineHeight: 44,
-			fontWeight: "normal"
-		},
-		"headline-large": {
-			fontFamily: "Red Hat Display",
-			fontSize: 32,
-			lineHeight: 40,
-			fontWeight: "normal"
-		},
-		"headline-medium": {
-			fontFamily: "Red Hat Display",
-			fontSize: 28,
-			lineHeight: 36,
-			fontWeight: "normal"
-		},
-		"headline-small": {
-			fontFamily: "Red Hat Display",
-			fontSize: 24,
-			lineHeight: 32,
-			fontWeight: "normal"
-		},
-		"title-large": {
-			fontFamily: "Red Hat Display",
-			fontSize: 22,
-			lineHeight: 28,
-			fontWeight: "normal"
-		},
-		"title-medium": {
-			fontFamily: "Red Hat Display",
-			fontSize: 16,
-			lineHeight: 24,
-			fontWeight: "medium",
-			letterSpacing: .15
-		},
-		"title-small": {
-			fontFamily: "Red Hat Display",
-			fontWeight: "medium",
-			fontSize: 14,
-			lineHeight: 20,
-			letterSpacing: .1
-		},
-		"body-1-long": {
-			fontFamily: "Roboto",
-			fontSize: 16,
-			lineHeight: 22
-		},
-		"body-1-short": {
-			fontFamily: "Roboto",
-			fontSize: 16,
-			lineHeight: 24
-		},
-		"body-2-long": {
-			fontFamily: "Roboto",
-			fontSize: 14,
-			lineHeight: 18
-		},
-		"body-2-short": {
-			fontFamily: "Roboto",
-			fontSize: 14,
-			lineHeight: 20
-		},
-		"subtitle-1": {
-			fontFamily: "Red Hat Display",
-			fontSize: 16,
-			lineHeight: 24,
-			letterSpacing: .15
-		},
-		"subtitle-2": {
-			fontFamily: "Red Hat Display",
-			fontSize: 14,
-			lineHeight: 20,
-			fontWeight: "medium",
-			letterSpacing: .1
-		},
-		label: {
-			fontFamily: "Roboto",
-			fontSize: 14,
-			lineHeight: 20
-		},
-		button: {
-			fontFamily: "Red Hat Display",
-			fontSize: 14,
-			lineHeight: 20,
-			fontWeight: "medium",
-			textTransform: "capitalize"
-		},
-		caption: {
-			fontFamily: "Roboto",
-			fontSize: 12,
-			lineHeight: 18,
-			letterSpacing: .4
-		},
-		overline: {
-			fontFamily: "Red Hat Display",
-			fontSize: 10,
-			lineHeight: 18,
-			letterSpacing: 1.5,
-			textTransform: "uppercase"
-		},
-		paragraph: {
-			fontFamily: "Roboto",
-			fontSize: 16,
-			lineHeight: 24
-		},
-		quote: {
-			fontFamily: "Roboto",
-			fontSize: 16,
-			lineHeight: 24
-		},
-		note: {
-			fontFamily: "Roboto",
-			fontSize: 14,
-			lineHeight: 22,
-			fontStyle: "italic"
-		}
+		"on-primary-surface-variant": genericLightTheme.primary,
+		"secondary-surface": "#F3EDF7",
+		"on-secondary-surface": "#1C1B1F",
+		"on-secondary-surface-variant": "#6750A4",
+		"tertiary-surface": "#F2F2F2",
+		"on-tertiary-surface": "#1C1B1F",
+		"on-tertiary-surface-variant": "#6750A4",
+		"quaternary-surface": "#E8DEF8",
+		"on-quaternary-surface": "#1C1B1F",
+		"on-quaternary-surface-variant": "#6750A4",
+		"disabled-surface": "rgba(0,0,0,0.12)",
+		"on-disabled-surface": "rgba(0,0,0,0.5)",
+		"on-disabled-surface-variant": "rgba(0,0,0,0.4)",
+		"on-inverse-surface-variant": "#D0BCFF",
+		"on-background-variant": "#959595"
 	},
+	typography: BaseTypography,
 	borders: {
 		primary: `1px solid ${genericLightTheme.primary}`,
 		secondary: `1px solid ${genericLightTheme.secondary}`,
@@ -668,7 +753,25 @@ var BaseTheme = {
 			maxWidth: 560
 		}
 	},
-	typefaces: {},
+	typefaces: {
+		...toTypefaces(BaseTypography),
+		badge: {
+			fontFamily: "Red Hat Display",
+			fontSize: "16px",
+			lineHeight: "24px"
+		},
+		tag: {
+			fontFamily: "Red Hat Display",
+			fontSize: "15px",
+			lineHeight: "20px",
+			fontWeight: 600
+		},
+		input: {
+			fontFamily: "Red Hat Display",
+			fontSize: "14px",
+			lineHeight: "24px"
+		}
+	},
 	icons: {},
 	components: {
 		alert: { options: {
@@ -1000,6 +1103,12 @@ var BaseTheme = {
 			transitionDelay: "0.35s",
 			autoCloseDelay: 35e3
 		} },
+		symbol: { options: {
+			fill: 0,
+			weight: 400,
+			grade: 0,
+			opticalSize: 24
+		} },
 		toggle: { options: { size: 20 } },
 		tooltip: { options: {
 			border: void 0,
@@ -1045,7 +1154,54 @@ var DarkTheme = {
 		"inverse-surface": "#E6E1E5",
 		"inverse-on-surface": "#313033",
 		"inverse-on-surface-primary": "#6750A4",
-		transparent: "rgba(0,0,0,0)"
+		"on-inverse-surface": "#313033",
+		"on-inverse-surface-primary": "#6750A4",
+		scrim: "#000000",
+		transparent: "rgba(0,0,0,0)",
+		ghost: "rgba(0,0,0,0)",
+		quaternary: "#938F99",
+		"on-quaternary": "#1C1B1F",
+		warn: "#F2B8B5",
+		"on-warn": "#601410",
+		success: "#7FD98F",
+		"on-success": "#00390F",
+		disabled: "rgba(255,255,255,0.12)",
+		"on-disabled": "rgba(255,255,255,0.38)",
+		"on-primary-container-variant": "rgba(255,255,255,0.4)",
+		"on-primary-container-border": "#EADDFF",
+		"on-secondary-container-variant": "rgba(255,255,255,0.4)",
+		"on-secondary-container-border": "#E8DEF8",
+		"on-tertiary-container-variant": "rgba(255,255,255,0.4)",
+		"on-tertiary-container-border": "#FFD8E4",
+		"warn-container": "#8C1D18",
+		"on-warn-container": "#F9DEDC",
+		"on-warn-container-variant": "rgba(255,255,255,0.4)",
+		"on-warn-container-border": "#F9DEDC",
+		"success-container": "#1E5128",
+		"on-success-container": "#C6F0CD",
+		"on-success-container-variant": "rgba(255,255,255,0.4)",
+		"on-success-container-border": "#C6F0CD",
+		"disabled-container": "#2B2930",
+		"on-disabled-container": "rgba(255,255,255,0.38)",
+		"inverse-container": "#E6E1E5",
+		"on-inverse-container": "#313033",
+		"primary-surface": "#1C1B1F",
+		"on-primary-surface": "#E6E1E5",
+		"on-primary-surface-variant": "#D0BCFF",
+		"secondary-surface": "#211F26",
+		"on-secondary-surface": "#E6E1E5",
+		"on-secondary-surface-variant": "#D0BCFF",
+		"tertiary-surface": "#2B2930",
+		"on-tertiary-surface": "#E6E1E5",
+		"on-tertiary-surface-variant": "#D0BCFF",
+		"quaternary-surface": "#36343B",
+		"on-quaternary-surface": "#E6E1E5",
+		"on-quaternary-surface-variant": "#D0BCFF",
+		"disabled-surface": "rgba(255,255,255,0.12)",
+		"on-disabled-surface": "rgba(255,255,255,0.5)",
+		"on-disabled-surface-variant": "rgba(255,255,255,0.4)",
+		"on-inverse-surface-variant": "#6750A4",
+		"on-background-variant": "#8F8C93"
 	}
 };
 //#endregion
@@ -1063,20 +1219,6 @@ var UniThemes = {
 };
 var DefaultThemeId = Object.keys(UniThemes)[0];
 //#endregion
-//#region src/concepts/typography/typography.records.ts
-var FontWeightMap = {
-	thin: 100,
-	"extra-light": 200,
-	light: 200,
-	normal: 400,
-	medium: 500,
-	"semi-bold": 600,
-	bold: 700,
-	"extra-bold": 800,
-	black: 900,
-	"extra-black": 950
-};
-//#endregion
 //#region src/utils/getValue.ts
 function getValue(data, path, defaultValue) {
 	const value = path.split(/[.[\]]/).filter(Boolean).reduce((value, key) => value?.[key], data);
@@ -1124,6 +1266,9 @@ exports.getTriadicHues = getTriadicHues;
 exports.getValue = getValue;
 exports.gradient = gradient;
 exports.randomRangeValue = randomRangeValue;
+exports.removeInputPlatformStyling = removeInputPlatformStyling;
+exports.toTypeface = toTypeface;
+exports.toTypefaces = toTypefaces;
 exports.uniColor = uniColor;
 
 //# sourceMappingURL=index.cjs.map