@uni-design-system/uni-core 1.1.0 → 2.0.2

package/dist/cjs/index.cjs

@@ -1,19 +1,753 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./concepts"), exports);
-__exportStar(require("./utils"), exports);
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/concepts/theme/themes/base.theme.ts
+var palette = {
+	primary: "#0070b9",
+	secondary: "#00b034",
+	tertiary: "#ff9f00",
+	quaternary: "#4d4d4d",
+	warn: "#ff3300",
+	success: "#00b034",
+	light: "#b3b3b3",
+	onLight: "#4d4d4d",
+	onLightVariant: "rgba(0,0,0,0.4)",
+	dark: "#4d4d4d",
+	onDark: "rgba(255,255,255,0.8)",
+	background: "#fff",
+	disabled: "rgba(0,0,0,0.12)",
+	onDisabled: "rgba(0,0,0,0.5)"
+};
+var BaseButton = {
+	borderRadius: 100,
+	color: "primary-container",
+	contentColor: "on-primary-container",
+	verticalPadding: {
+		xxs: 2,
+		xs: 5,
+		sm: 8,
+		md: 12,
+		lg: 16,
+		xl: 20,
+		xxl: 24
+	},
+	horizontalPadding: {
+		xxs: 4,
+		xs: 8,
+		sm: 12,
+		md: 18,
+		lg: 24,
+		xl: 30,
+		xxl: 36
+	}
+};
+var BaseContainer = {
+	color: "primary-container",
+	contentColor: "on-primary-container",
+	borderRadii: {
+		xxs: 4,
+		xs: 8,
+		sm: 12,
+		md: 16,
+		lg: 20,
+		xl: 24,
+		xxl: 28
+	},
+	horizontalPadding: {
+		xxs: 6,
+		xs: 12,
+		sm: 18,
+		md: 24,
+		lg: 30,
+		xl: 36,
+		xxl: 42
+	},
+	contentSpacing: {
+		xxs: 4,
+		xs: 8,
+		sm: 12,
+		md: 16,
+		lg: 20,
+		xl: 24,
+		xxl: 28
+	}
+};
+var BaseTheme = {
+	id: "BaseTheme",
+	name: "Base Theme",
+	colors: {
+		primary: "#6750A4",
+		"on-primary": "#FFFFFF",
+		"primary-container": "#EADDFF",
+		"on-primary-container": "#21005E",
+		secondary: "#625B71",
+		"on-secondary": "#FFFFFF",
+		"secondary-container": "#E8DEF8",
+		"on-secondary-container": "#1E192B",
+		tertiary: "#7D5260",
+		"on-tertiary": "#FFFFFF",
+		"tertiary-container": "#FFD8E4",
+		"on-tertiary-container": "#370B1E",
+		error: "#B3261E",
+		"on-error": "#FFFFFF",
+		"error-container": "#F9DEDC",
+		"on-error-container": "#370B1E",
+		background: "#FFFBFE",
+		"on-background": "#1C1B1F",
+		surface: "#FFFBFE",
+		"on-surface": "#1C1B1F",
+		"surface-variant": "#E7E0EC",
+		"on-surface-variant": "#49454E",
+		outline: "#79747E",
+		shadow: "#000000",
+		"surface-tint": "#6750A4",
+		"inverse-surface": "#313033",
+		"on-inverse-surface": "#F4EFF4",
+		"on-inverse-surface-primary": "#D0BCFF",
+		scrim: "#000000",
+		transparent: "rgba(0,0,0,0)"
+	},
+	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"
+		}
+	},
+	borders: {
+		primary: `1px solid ${palette.primary}`,
+		secondary: `1px solid ${palette.secondary}`,
+		tertiary: `1px solid ${palette.tertiary}`,
+		quaternary: `1px solid ${palette.quaternary}`,
+		warn: `1px solid ${palette.warn}`,
+		success: `1px solid ${palette.secondary}`,
+		light: `1px solid ${palette.light}`,
+		dark: `1px solid ${palette.dark}`,
+		dotted: `1px dotted ${palette.dark}`
+	},
+	components: {},
+	shadows: {
+		raised: "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
+		menu: "rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;",
+		dialog: "rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px",
+		warn: "0 0 5px rgba(255, 0, 0, 0.5), inset 0 0 5px rgba(255, 0, 0, 0.3)"
+	},
+	spacing: {
+		none: "none",
+		xxs: "2px",
+		xs: "4px",
+		sm: "8px",
+		md: "16px",
+		lg: "32px",
+		xl: "64px"
+	},
+	thicknesses: {
+		thin: 1,
+		standard: 2,
+		thick: 4
+	},
+	radii: {
+		none: "none",
+		xxs: "4px",
+		xs: "8px",
+		sm: "16px",
+		md: "24px",
+		lg: "32px",
+		max: "999px"
+	},
+	buttons: {
+		elevated: {
+			...BaseButton,
+			color: "surface",
+			contentColor: "on-surface",
+			shadowElevation: "raised"
+		},
+		filled: {
+			...BaseButton,
+			color: "primary"
+		},
+		"filled-secondary": {
+			...BaseButton,
+			color: "secondary",
+			contentColor: "on-secondary"
+		},
+		outlined: {
+			...BaseButton,
+			color: "transparent",
+			borderColor: "primary",
+			contentColor: "on-primary",
+			borderWidth: 1
+		},
+		text: {
+			...BaseButton,
+			color: "transparent",
+			contentColor: "on-surface"
+		},
+		icon: {
+			...BaseButton,
+			color: "transparent",
+			contentColor: "on-surface",
+			horizontalPadding: BaseButton.verticalPadding
+		},
+		"floating-action": {
+			...BaseButton,
+			color: "secondary",
+			contentColor: "on-secondary",
+			borderRadii: {
+				xxs: 3,
+				xs: 5,
+				sm: 8,
+				md: 12,
+				lg: 16,
+				xl: 12,
+				xxl: 20
+			},
+			shadowElevation: "navigation",
+			verticalPadding: {
+				xxs: 4,
+				xs: 8,
+				sm: 12,
+				md: 18,
+				lg: 24,
+				xl: 30,
+				xxl: 36
+			},
+			horizontalPadding: {
+				xxs: 4,
+				xs: 8,
+				sm: 12,
+				md: 18,
+				lg: 24,
+				xl: 30,
+				xxl: 36
+			}
+		}
+	},
+	containers: {
+		card: {
+			...BaseContainer,
+			color: "surface",
+			contentColor: "on-surface",
+			shadowMode: "interactive"
+		},
+		screen: {
+			...BaseContainer,
+			color: "background",
+			contentColor: "on-background"
+		},
+		modal: {
+			...BaseContainer,
+			borderRadii: {
+				xxs: 8,
+				xs: 16,
+				sm: 22,
+				md: 28,
+				lg: 32,
+				xl: 38,
+				xxl: 44
+			},
+			color: "surface",
+			contentColor: "on-surface",
+			shadowMode: "static",
+			shadowElevation: "modal",
+			maxWidth: 560
+		}
+	},
+	typefaces: {},
+	icons: {}
+};
+//#endregion
+//#region src/concepts/theme/themes/dark.theme.ts
+var DarkTheme = {
+	...BaseTheme,
+	id: "DarkTheme",
+	name: "Dark Theme",
+	colors: {
+		primary: "#D0BCFF",
+		"on-primary": "#371E73",
+		"primary-container": "#4F378B",
+		"on-primary-container": "#EADDFF",
+		secondary: "#CCC2DC",
+		"on-secondary": "#332D41",
+		"secondary-container": "#4A4458",
+		"on-secondary-container": "#E8DEF8",
+		tertiary: "#EFB8C8",
+		"on-tertiary": "#492532",
+		"tertiary-container": "#633B48",
+		"on-tertiary-container": "#FFD8E4",
+		error: "#F2B8B5",
+		"on-error": "#601410",
+		"error-container": "#8C1D18",
+		"on-error-container": "#F9DEDC",
+		background: "#1C1B1F",
+		"on-background": "#E6E1E5",
+		surface: "#1C1B1F",
+		"on-surface": "#E6E1E5",
+		"surface-variant": "#49454F",
+		"on-surface-variant": "#CAC4D0",
+		outline: "#938F99",
+		shadow: "#000000",
+		"surface-tint": "#D0BCFF",
+		"inverse-surface": "#E6E1E5",
+		"inverse-on-surface": "#313033",
+		"inverse-on-surface-primary": "#6750A4",
+		transparent: "rgba(0,0,0,0)"
+	}
+};
+//#endregion
+//#region src/concepts/theme/themes/light.theme.ts
+var LightTheme = {
+	...BaseTheme,
+	id: "LightTheme",
+	name: "Light Theme"
+};
+//#endregion
+//#region src/concepts/theme/theme.records.ts
+var UniThemes = {
+	LightTheme,
+	DarkTheme
+};
+var DefaultThemeId = Object.keys(UniThemes)[0];
+//#endregion
+//#region src/concepts/color/color.records.ts
+var CategorySaturation = {
+	jewel: {
+		low: 73,
+		high: 83
+	},
+	pastel: {
+		low: 14,
+		high: 21
+	},
+	earth: {
+		low: 36,
+		high: 41
+	},
+	neutral: {
+		low: 1,
+		high: 10
+	},
+	florescent: {
+		low: 63,
+		high: 100
+	},
+	shades: {
+		low: 0,
+		high: 0
+	}
+};
+var CategoryLightness = {
+	jewel: {
+		low: 56,
+		high: 76
+	},
+	pastel: {
+		low: 89,
+		high: 96
+	},
+	earth: {
+		low: 36,
+		high: 77
+	},
+	neutral: {
+		low: 70,
+		high: 99
+	},
+	florescent: {
+		low: 82,
+		high: 100
+	},
+	shades: {
+		low: 0,
+		high: 100
+	}
+};
+var RoleHues = {
+	primary: {
+		low: 73,
+		high: 83,
+		default: 0
+	},
+	secondary: {
+		low: 14,
+		high: 21,
+		default: 0
+	},
+	tertiary: {
+		low: 36,
+		high: 41,
+		default: 0
+	},
+	inverse: {
+		low: 63,
+		high: 100,
+		default: 0
+	},
+	ghost: {
+		low: 0,
+		high: 0,
+		default: 0
+	},
+	warn: {
+		low: 320,
+		high: 20,
+		default: 0
+	},
+	alert: {
+		low: 40,
+		high: 70,
+		default: 60
+	},
+	success: {
+		low: 90,
+		high: 150,
+		default: 120
+	},
+	info: {
+		low: 200,
+		high: 260,
+		default: 240
+	}
+};
+//#endregion
+//#region src/concepts/color/color.utils.ts
+var randomRangeValue = ({ low, high }) => {
+	low = Math.ceil(low);
+	high = Math.floor(high);
+	return Math.floor(Math.random() * (high - low + 1)) + low;
+};
+var cycle = (angle) => {
+	if (angle > 360) return angle - 360;
+	if (angle < 0) return angle + 360;
+	return angle;
+};
+var getAnalogousHues = (hue) => [cycle(hue + 30), cycle(hue + 60)];
+var getComplimentaryHue = (hue) => cycle(hue + 180);
+var getTriadicHues = (hue) => [cycle(hue + 120), cycle(hue - 120)];
+var getSplitComplimentaryHues = (hue) => [cycle(hue + 150), cycle(hue - 150)];
+//#endregion
+//#region src/concepts/color/color.helper.ts
+function HSLAToString({ hue, saturation, lightness, alpha = 1 }) {
+	return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+}
+function RGBToString({ red, green, blue }) {
+	return `rgb(${red}, ${green}, ${blue})`;
+}
+function uniColor({ role, category, alpha = 1 }) {
+	return HSLAToString({
+		hue: randomRangeValue(RoleHues[role]),
+		saturation: randomRangeValue(CategorySaturation[category]),
+		lightness: randomRangeValue(CategoryLightness[category]),
+		alpha
+	});
+}
+var RGBToHSL = ({ red, green, blue }) => {
+	red /= 255;
+	green /= 255;
+	blue /= 255;
+	const l = Math.max(red, green, blue);
+	const s = l - Math.min(red, green, blue);
+	const h = s ? l === red ? (green - blue) / s : l === green ? 2 + (blue - red) / s : 4 + (red - green) / s : 0;
+	return {
+		hue: 60 * h < 0 ? 60 * h + 360 : 60 * h,
+		saturation: 100 * (s ? l <= .5 ? s / (2 * l - s) : s / (2 - (2 * l - s)) : 0),
+		lightness: 100 * (2 * l - s) / 2
+	};
+};
+//#endregion
+//#region src/concepts/elevation/zIndex.ts
+var Z_INDEX = {
+	dropdown: 1e3,
+	sticky: 1020,
+	fixed: 1030,
+	backdrop: 1040,
+	dialog: 1050,
+	popover: 1060,
+	tooltip: 1070,
+	overlay: 1080
+};
+//#endregion
+//#region src/concepts/gradient/gradient.helper.ts
+function gradient(config) {
+	return ``;
+}
+//#endregion
+//#region src/concepts/layout/layout.helper.ts
+function getDeviceSize(height, width) {
+	if (!height || !width) return "md";
+	const max = Math.max(height, width);
+	if (max <= 600) return "xs";
+	if (max <= 960) return "sm";
+	if (max <= 1264) return "md";
+	if (max <= 1904) return "lg";
+	return "xl";
+}
+function getDeviceOrientation(height, width) {
+	if (!height || !width) return "landscape";
+	return height > width ? "portrait" : "landscape";
+}
+//#endregion
+//#region src/concepts/shadow/shadow.utils.ts
+var GetBoxShadow = ({ offset, blur, opacity }) => {
+	return `0 ${offset}px ${blur}px rgba(0,0,0,0.${opacity})`;
+};
+var GetBoxShadows = ({ umbra, penumbra }) => {
+	return GetBoxShadow(umbra) + ", " + GetBoxShadow(penumbra);
+};
+//#endregion
+//#region src/concepts/shadow/shadow.records.ts
+var ShadowMap = {
+	pressed: {
+		umbra: {
+			offset: 1,
+			blur: 2,
+			opacity: 24
+		},
+		penumbra: {
+			offset: 1,
+			blur: 3,
+			opacity: 12
+		}
+	},
+	raised: {
+		umbra: {
+			offset: 3,
+			blur: 6,
+			opacity: 23
+		},
+		penumbra: {
+			offset: 3,
+			blur: 6,
+			opacity: 16
+		}
+	},
+	focussed: {
+		umbra: {
+			offset: 6,
+			blur: 6,
+			opacity: 23
+		},
+		penumbra: {
+			offset: 10,
+			blur: 20,
+			opacity: 19
+		}
+	},
+	navigation: {
+		umbra: {
+			offset: 10,
+			blur: 10,
+			opacity: 22
+		},
+		penumbra: {
+			offset: 14,
+			blur: 28,
+			opacity: 25
+		}
+	},
+	modal: {
+		umbra: {
+			offset: 15,
+			blur: 12,
+			opacity: 22
+		},
+		penumbra: {
+			offset: 19,
+			blur: 38,
+			opacity: 30
+		}
+	}
+};
+var ShadowCssMap = {
+	pressed: GetBoxShadows(ShadowMap["pressed"]),
+	raised: GetBoxShadows(ShadowMap["raised"]),
+	focussed: GetBoxShadows(ShadowMap["focussed"]),
+	navigation: GetBoxShadows(ShadowMap["navigation"]),
+	modal: GetBoxShadows(ShadowMap["modal"])
+};
+//#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);
+	return value !== void 0 ? value : defaultValue;
+}
+//#endregion
+//#region src/utils/debounce.ts
+var debounce = (callback, timeout) => {
+	let timer;
+	return (...args) => {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			callback(...args);
+		}, timeout);
+	};
+};
+//#endregion
+exports.BaseTheme = BaseTheme;
+exports.CategoryLightness = CategoryLightness;
+exports.CategorySaturation = CategorySaturation;
+exports.DarkTheme = DarkTheme;
+exports.DefaultThemeId = DefaultThemeId;
+exports.FontWeightMap = FontWeightMap;
+exports.HSLAToString = HSLAToString;
+exports.LightTheme = LightTheme;
+exports.RGBToHSL = RGBToHSL;
+exports.RGBToString = RGBToString;
+exports.RoleHues = RoleHues;
+exports.ShadowCssMap = ShadowCssMap;
+exports.ShadowMap = ShadowMap;
+exports.UniThemes = UniThemes;
+exports.Z_INDEX = Z_INDEX;
+exports.cycle = cycle;
+exports.debounce = debounce;
+exports.getAnalogousHues = getAnalogousHues;
+exports.getComplimentaryHue = getComplimentaryHue;
+exports.getDeviceOrientation = getDeviceOrientation;
+exports.getDeviceSize = getDeviceSize;
+exports.getSplitComplimentaryHues = getSplitComplimentaryHues;
+exports.getTriadicHues = getTriadicHues;
+exports.getValue = getValue;
+exports.gradient = gradient;
+exports.palette = palette;
+exports.randomRangeValue = randomRangeValue;
+exports.uniColor = uniColor;
+
+//# sourceMappingURL=index.cjs.map