Merge pull request #33 from unify-ui-dev/preset-bg

add typo utilities and update base ui

packages/preset-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifydev/preset-ui",
-  "version": "0.0.3-beta.0",
+  "version": "0.0.3",
   "description": "UnoCSS Theming Toolkit, create modern and beautifull Web Ui",
   "publishConfig": {
     "access": "public"

packages/preset-ui/src/shortcuts/accordion/index.ts

@@ -16,10 +16,8 @@ const getAccordionShortcuts = (
 ) => {
 	const appearance = uiConfig?.appearance || "both";
 
-	const grayDivider =
-		accordion?.grayDivider || defaultAcValues.defaultDividerGray;
-	const itemWithBorder =
-		accordion?.itemWithBorder || defaultAcValues.itemWithBorderGray;
+	const grayDivider = Object.assign({}, defaultAcValues.defaultDividerGray, accordion?.grayDivider);
+	const itemWithBorder = Object.assign({}, defaultAcValues.itemWithBorderGray, accordion?.itemWithBorder);
 
 	const dynamicAccordions: Shortcut[] = [
 		[

packages/preset-ui/src/shortcuts/avatar/index.ts

@@ -5,14 +5,14 @@ import type { Avatar } from "./types";
 const getAvatarShortcuts = (
 	avatar?: Avatar
 ) => {
-	const { xs, sm, md, xl, lg } = avatar?.sizes || {
+	const { xs, sm, md, xl, lg } = Object.assign({}, {
 		xs: 6.5,
 		sm: 8,
 		md: 9.5,
 		lg: 10.5,
 		xl: 12,
-	};
-	
+	}, avatar?.sizes);
+
 	const avatars = {
 		"avatar-fit-none": "object-none",
 		"avatar-fit-fill": "object-fill",

packages/preset-ui/src/shortcuts/badge/index.ts

@@ -6,7 +6,7 @@ import type { Badge } from "./types";
 const getBadgeShortcuts = (
 	badge?: Badge,
 ) => {
-	const { xs, sm, md, xl, lg } = badge?.sizes || uiSizeVariants;
+	const { xs, sm, md, xl, lg } = Object.assign({}, uiSizeVariants, badge?.sizes);
 
 	const badges = {
 		"badge-xs": `${genUiSizes(xs as ElSizeBase)}`,

packages/preset-ui/src/shortcuts/button/types.ts

@@ -2,7 +2,7 @@ import type {
 	RingColorShades,
 	ColorShade,
 	formOutline,
-	TextSizes,
+	TextSize,
 	RingBase,
 	BaseVariant,
 } from "@/types";
@@ -29,7 +29,7 @@ export type BtnGhostOrSoft = GhostSoftBase & {
 export type BtnSizeBase = {
 	height?: number | string;
 	px?: number | string;
-	textSize?: TextSizes;
+	textSize?: TextSize;
 };
 
 export type BtnSizes = {
@@ -40,7 +40,7 @@ export type BtnSizes = {
 	xl?: BtnSizeBase;
 };
 
-export type BtnIconBase = { size?: number | string; textSize?: TextSizes };
+export type BtnIconBase = { size?: number | string; textSize?: TextSize };
 export type BtnIconSizes = {
 	xs?: BtnIconBase;
 	sm?: BtnIconBase;

packages/preset-ui/src/shortcuts/card/index.ts

@@ -8,7 +8,7 @@ const getCardShortcuts = (
 	uiConfig?: { appearance?: Appearance },
 ) => {
 	const appearance = uiConfig?.appearance || "both";
-	const body = globalElement?.body || helperDefaultValues.uiBodyColors
+	const body = Object.assign({},helperDefaultValues.uiBodyColors,globalElement?.body)
 
 	const cards = {
 		"card-body": `${genVariantWhiteBlack({

packages/preset-ui/src/shortcuts/divider/index.ts

@@ -10,8 +10,8 @@ const getDividerShortcuts = ({
 	appearance: appearance_,
 }: { divider?: Divider; appearance?: Appearance | undefined }) => {
 	const appearance = appearance_ || "both";
-	const shades = divider?.shades || dividerShade;
-	const grayShades = divider?.grayShades || divideGray;
+	const shades = Object.assign({}, dividerShade, divider?.shades);
+	const grayShades = Object.assign({}, divideGray, divider?.grayShades);
 	const dividers = {
 		"divider-hr-2": "border-2",
 		"divider-hr-3": "border-3",

packages/preset-ui/src/shortcuts/kbd/index.ts

@@ -3,12 +3,11 @@ import {
 	uiSizeVariants
 } from "../helpers";
 import type { Kbd } from "./types";
-import type { Shortcut } from "unocss";
 
 const getKdbShortcuts = ({
 	kdb: kbd,
-}: { kdb?: Kbd}) => {
-	const { xs, sm, md, xl, lg } = kbd?.sizes || uiSizeVariants;
+}: { kdb?: Kbd }) => {
+	const { xs, sm, md, xl, lg } = Object.assign({}, uiSizeVariants, kbd?.sizes);
 
 	const kbds = {
 		"kbd-xs": `py-${getConfigValue(xs?.py)} px-${getConfigValue(xs?.px)} text-${xs?.textSize}`,
@@ -18,10 +17,7 @@ const getKdbShortcuts = ({
 		"kbd-xl": `py-${getConfigValue(xl?.py)} px-${getConfigValue(xl?.px)} text-${xl?.textSize}`,
 	};
 
-	const dynamicKbd: Shortcut[] = [
-
-	];
-	return [kbds, ...dynamicKbd];
+	return [kbds];
 };
 
 export { getKdbShortcuts, type Kbd };

packages/preset-ui/src/shortcuts/utilities/index.ts

@@ -1,31 +1,20 @@
-import type { Appearance, BaseColor, BaseUI, BorderPrefix } from "@/types";
+import type { Appearance, BaseColor, BaseUI, BorderPrefix, TextVariantBase } from "@/types";
 import { genTextColor, genVariantWhiteBlack, genOutline, genUiBackground } from "../helpers";
 import { helperDefaultValues } from "../helpers";
 import { isValidColor } from "@/utils/colors-utils";
 import type { Shortcut } from "unocss";
 
 
-const getGeneralShortcuts = ({
-	uiConfig,
-	globalElement,
-}: {
-	globalElement?: BaseUI;
-	uiConfig: { appearance: Appearance };
-}) => {
+const getGeneralShortcuts = ({ uiConfig, globalElement, }: { globalElement?: BaseUI; uiConfig: { appearance: Appearance }; }) => {
 	const { appearance } = uiConfig;
+	const bg = Object.assign({}, helperDefaultValues.bgSoligUI, globalElement?.bg)
+	const border = Object.assign({}, helperDefaultValues.bdrUI, globalElement?.border)
+	const textTypo = Object.assign({}, helperDefaultValues.textTypo, globalElement?.textTypo)
+	const typoGray = Object.assign({}, helperDefaultValues.defaultTypoGray, globalElement?.textColor)
+	const typoGrayReverse = Object.assign({}, helperDefaultValues.textTypoColorReverse, globalElement?.textColorReverse);
 
-	const bg = globalElement?.bg || helperDefaultValues.bgSoligUI
-	const border = globalElement?.border || helperDefaultValues.bdrUI
-
-
-	const typoGray =
-		globalElement?.bodyColor || helperDefaultValues.defaultTypoGray;
-	const typoGrayReverse =
-		globalElement?.bodyColorReverse || helperDefaultValues.textTypoColorReverse;
-
-	const typoNeutral =
-		globalElement?.bodyNeutral || helperDefaultValues.defaultTypoNeutral;
-	const bodyBgUi = globalElement?.body || helperDefaultValues.uiBodyColors
+	const typoNeutral = Object.assign({}, helperDefaultValues.defaultTypoNeutral, globalElement?.textNeutral)
+	const bodyBgUi = Object.assign({}, helperDefaultValues.uiBodyColors, globalElement?.body)
 
 	const utils: Record<string, string> = {
 		// bg
@@ -98,6 +87,15 @@ const getGeneralShortcuts = ({
 			},
 			{ autocomplete: ["bg-(light_nm|light|nm_light|nm|high|higher)", "bg-(light_nm|light|nm_light|nm|high|higher)-$colors"] },
 		],
+		[
+			/^(txt|ui-text)-(xs-body|x-body|body|x-title|title|l-title)$/,
+			([, size]) => {
+				if (["xs-body", "x-body", "body", "x-title", "title", "l-title"].includes(size)) {
+					return `${textTypo[size as TextVariantBase]}`
+				}
+			},
+			{ autocomplete: ["(txt|ui-text)-(xs-body|x-body|body|x-title|title|l-title)"] },
+		],
 
 		[/^bdr-(light|nm|high|higher|highest)(-(\S+))?$/,
 			([, type, , color = "gray"], { theme }) => {

packages/preset-ui/src/types/base.ts

@@ -18,7 +18,9 @@ export type SemanticColorNames = 'primary' | 'secondary' | 'accent' | 'info' | '
 export type UiConfig = { appearance: Appearance };
 
 export type SizeVariantBase = "xs" | "sm" | "md" | "lg" | "xl"
-export type TextSizes = "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
+export type TextSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"
+export type TextVariantBase = "xs-body" | "x-body" | "body" | "x-title" | "title" | "l-title"
+export type FontWeightBase = "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "thin" | "light" | "normal" | "black"
 
 type BorderPosition = "b" | "t" | "l" | "r" | "x" | "y";
 export type BorderPrefix = "border" | `border-${BorderPosition}`;
@@ -45,8 +47,8 @@ export type SizeBaseVaraint<T extends object> = {
 	xl?: T;
 }
 
-export type ElSizeBase = { py: number | string; px: number | string; textSize: TextSizes }
-export type CardSizeBase = { padding: number | string; textSize: TextSizes }
+export type ElSizeBase = { py: number | string; px: number | string; textSize: TextSize }
+export type CardSizeBase = { padding: number | string; textSize: TextSize }
 
 export type ElSizeVariants = SizeBaseVaraint<ElSizeBase>
 export type CardSizeVariant = SizeBaseVaraint<CardSizeBase>
@@ -149,10 +151,26 @@ export type BgBodyUi = {
 	defaultReverse?: BaseBodyUi,
 	'light-high'?: BaseBodyUi
 }
+
+
+
+
+export type TextTypos = {
+	'xs-body'?: string,
+	'x-body'?: string,
+	body?: string,
+	'x-title'?: string,
+	title?: string,
+	'l-title'?: string,
+	'xl-title'?:string,
+	'2xl-title'?:string,
+}
+
 export type BaseUI = {
-	bodyColor?: TextTypoColor;
-	bodyColorReverse?: TextTypoColor;
-	bodyNeutral?: TextTypoColor;
+	textColor?: TextTypoColor;
+	textColorReverse?: TextTypoColor;
+	textNeutral?: TextTypoColor;
+	textTypo?: TextTypos,
 	body: BgBodyUi,
 	border?: BorderUI;
 	bg?: BgUI;

packages/preset-ui/src/ui-theme/index.ts

@@ -10,6 +10,26 @@ export const theme: Theme = {
 			swing: "{0% { left: 0%;} 50%{ left: 105%;} 100%{left: 0%;}}",
 			"background-shine":
 				"{ from{ background-position: 0 0} to{ background-position: -200% 0;}}",
+
+			// VueRadix animation
+			'vr-accordion-down':
+				"{from{ height: 0; } to{ height: var(--radix-accordion-content-height); }}",
+			'vr-accordion-up':
+				"{from{ height: var(--radix-accordion-content-height); } to { height: 0; }}",
+			'vr-collapsible-down':
+				"{from { height: 0; } to: { height: var(--radix-collapsible-content-height); }}",
+			'vr-collapsible-up':
+				"{from { height: var(--radix-collapsible-content-height); } to{ height: 0; }}",
+
+			// Flexilla
+			'fx-accordion-down':
+				"{from{ height: 0; } to{ height: var(--fx-accordion-content-height); }}",
+			'fx-accordion-up':
+				"{from{ height: var(--fx-accordion-content-height); } to { height: 0; }}",
+			'fx-collapsible-down':
+				"{from { height: 0; } to: { height: var(--fx-collapsible-content-height); }}",
+			'fx-collapsible-up':
+				"{from { height: var(--fx-collapsible-content-height); } to{ height: 0; }}"
 		},
 		durations: {
 			indeterminate: "5s",
@@ -18,9 +38,25 @@ export const theme: Theme = {
 			"carousel-inverse": "5s",
 			swing: "5s",
 			"background-shine": "2s",
+			"vr-accordion-down": "0.2s",
+			"vr-accordion-up": "0.2s",
+			"vr-collapsible-down": "0.2s",
+			"vr-collapsible-up": "0.2s",
+			"fx-accordion-down": "0.2s",
+			"fx-accordion-up": "0.2s",
+			"fx-collapsible-down": "0.2s",
+			"fx-collapsible-up": "0.2s"
 		},
 		timingFns: {
 			"background-shine": "linear",
+			"vr-accordion-down": "ease-in-out",
+			"vr-accordion-up": "ease-in-out",
+			"vr-collapsible-down": "ease-in-out",
+			"vr-collapsible-up": "ease-in-out",
+			"fx-accordion-down": "ease-in-out",
+			"fx-accordion-up": "ease-in-out",
+			"fx-collapsible-down": "ease-in-out",
+			"fx-collapsible-up": "ease-in-out"
 		},
 		counts: {
 			indeterminate: "infinite",

packages/preset-ui/src/variants/index.ts

@@ -7,7 +7,7 @@ export const getAllVariants = (prefixState?: string) => {
 		dataStateVariants({
 			prefix: prefixState,
 			variants:
-				"visible|hidden|active|inactive|open|close|resize|minimize|maximaze|opened|closed|maximazed|resized",
+				"visible|hidden|active|inactive|open|close|resize|minimize|maximaze|opened|closed|maximazed|resized|copied",
 			selector: "data-state",
 		}),
 		browserVariants({
@@ -16,18 +16,12 @@ export const getAllVariants = (prefixState?: string) => {
 				"meter-optimum-val": "::-webkit-meter-optimum-value",
 				"metter-bar": "::-webkit-meter-bar",
 				"moz-meter-bar": "::-moz-meter-bar",
-			},
-		}),
-		browserVariants({
-			variants: {
+
 				"range-slider-thumb": "::-webkit-slider-thumb",
 				"moz-range-thumb": "::-moz-range-thumb",
 				"slider-runnable-track": "::-webkit-slider-runnable-track",
 				"moz-range-track": "::-moz-range-track",
-			},
-		}),
-		browserVariants({
-			variants: {
+
 				"w-progress-bar": "::-webkit-progress-bar",
 				"w-progress-value": "::-webkit-progress-value",
 				"m-progress-bar": "::-moz-progress-bar",