@a-type/ui 2.8.13 → 3.0.0

package/src/uno/theme/animations.ts

@@ -0,0 +1,211 @@
+import { Theme } from '@unocss/preset-mini';
+
+export const easing: Theme['easing'] = {
+	springy: 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+	default: 'ease',
+	linear: 'linear',
+};
+
+export const animation: Theme['animation'] = {
+	keyframes: {
+		'progress-bar': `{0% { width: 0% } 100% { width: 100% }}`,
+		'pop-up': `{from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); }}`,
+		// TODO: move this out to app
+		'item-disappear': `{
+					0% {opacity:1;transform:translateY(0);height:var(--height);}
+					25% {opacity:1;transform:translateY(0);height:var(--height);}
+					100% {opacity:0;transform:translateY(30px);height:0;margin-top:0;}
+				}`,
+		'expand-scale-x': `{
+					from { transform: scaleX(0) }
+					to { transform: scaleX(1) }
+				}`,
+		pop: `{
+					0% {
+						transform: translate(-50%, -50%) scale(0);
+						opacity: 1;
+					}
+					25% {
+						transform: translate(-50%, -50%) scale(1);
+						opacity: 1;
+					}
+					100% {
+						transform: translate(-50%, -50%) scale(1);
+						opacity: 0;
+					}
+				}`,
+		'scan-line': `{
+					0% { top: 0% }
+					30% { top: 100% }
+					70% { top: 100% }
+					100% { top: 0% }
+				}`,
+		'pop-in-from-half': `{
+					0% { opacity: 0; transform: scale(0.5) }
+					100% { opacity: 1; transform: scale(1) }
+				}`,
+		'radix-collapsible-open-vertical': `{
+            from { height: 0 }
+            to { height: var(--radix-collapsible-content-height) }
+          }`,
+		'radix-collapsible-close-vertical': `{
+            from { height: var(--radix-collapsible-content-height) }
+            to { height: 0 }
+          }`,
+		'radix-collapsible-open-horizontal': `{
+            from { width: 0 }
+            to { width: var(--radix-collapsible-content-width) }
+          }`,
+		'radix-collapsible-close-horizontal': `{
+            from { width: var(--radix-collapsible-content-width) }
+            to { width: 0 }
+          }`,
+		'radix-collapsible-open-both': `{
+						from { width: 0; height: 0 }
+						to { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height) }
+					}`,
+		'radix-collapsible-close-both': `{
+						from { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height) }
+						to { width: 0; height: 0 }
+					}`,
+		'peek-close': `{
+						from { height: calc(var(--collapsible-height) + 80px); max-height: none; }
+						to { height: min(var(--peek-height, 120px), var(--collapsible-height)); max-height: var(--peek-height, 120px); }
+					}`,
+		'peek-open': `{
+						from { height: min(var(--peek-height, 120px), var(--collapsible-height)); }
+						to { height: calc(var(--collapsible-height) + 80px); }
+					}`,
+		skeleton: `{
+						from { background-position: 0% 50%; }
+						to { background-position: 100% 50%; }
+					}`,
+		'spinner-stroke': `{
+						0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
+						50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15; }
+						100% { stroke-dasharray: 100, 200; stroke-dashoffset: -125; }
+					}`,
+		'fade-and-pop': `{
+						0% { opacity: 0.2; transform: scale(0.6); }
+						40% { opacity: 0.5; transform: scale(0.7); }
+						50% { opacity: 1; transform: scale(1.1) rotate(2deg); }
+						55% { opacity: 1; transform: scale(1); }
+						70% { opacity: 1; transform: scale(1); }
+						100% { opacity: 0.2; transform: scale(0.6); }
+					}`,
+		'fade-in-down': `{
+						0% { opacity: 0; transform: translate3d(0, -100px, 0); }
+						100% { opacity: 1; transform: translate3d(0, 0, 0); }
+					}`,
+		'fade-in-left': `{
+						0% { opacity: 0; transform: translate3d(-100px, 0, 0); }
+						100% { opacity: 1; transform: translate3d(0, 0, 0); }
+					}`,
+		'fade-in-bottom': `{
+						0% { opacity: 0; transform: translate3d(0, 100px, 0); }
+						100% { opacity: 1; transform: translate3d(0, 0, 0); }
+					}`,
+		'fade-in-right': `{
+						0% { opacity: 0; transform: translate3d(100px, 0, 0); }
+						100% { opacity: 1; transform: translate3d(0, 0, 0); }
+					}`,
+		'fade-out-down': `{
+						0% { opacity: 1; transform: translate3d(0, 0, 0); }
+						100% { opacity: 0; transform: translate3d(0, 100px, 0); }
+					}`,
+		'fade-out-left': `{
+						0% { opacity: 1; transform: translate3d(0, 0, 0); }
+						100% { opacity: 0; transform: translate3d(-100px, 0, 0); }
+					}`,
+		'fade-out-bottom': `{
+						0% { opacity: 1; transform: translate3d(0, 0, 0); }
+						100% { opacity: 0; transform: translate3d(0, 100px, 0); }
+					}`,
+		'fade-out-right': `{
+						0% { opacity: 1; transform: translate3d(0, 0, 0); }
+						100% { opacity: 0; transform: translate3d(100px, 0, 0); }
+					}`,
+		'popover-in': `{
+						0% { opacity: 0; transform: scale(0.95); }
+						100% { opacity: 1; transform: scale(1); }
+					}`,
+		'popover-out': `{
+						0% { opacity: 1; transform: scale(1); }
+						100% { opacity: 0; transform: scale(0.95); }
+					}`,
+		'dialog-in': `{
+						0% { opacity: 0; transform: translateY(20px) translate(-50%, -50%); }
+						100% { opacity: 1; transform: translateY(0) translate(-50%, -50%); }
+					}`,
+		'dialog-out': `{
+						0% { opacity: 1; transform: translateY(0) translate(-50%, -50%); }
+						100% { opacity: 0; transform: translateY(20px) translate(-50%, -50%); }
+					}`,
+		'checkbox-fade': `{
+						from { background-color: var(--v-bg-altered,var(--v-bg)); opacity: 1; }
+						to { background-color: transparent; opacity: 0.9; border-color: transparent; box-shadow: none; }
+					}`,
+	},
+	timingFns: {
+		linear: 'linear',
+		springy: 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'pop-up': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'ease-out': 'ease-out',
+		'fade-in-up': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-in-down': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-in-left': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-in-right': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-out-up': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-out-down': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-out-left': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-out-right': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-in-up-big': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-in-down-big': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-in-left-big': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-in-right-big': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-in': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'fade-out': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'scan-line': 'linear',
+		'radix-collapsible-open-vertical': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'radix-collapsible-close-vertical': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'radix-collapsible-open-horizontal': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'radix-collapsible-close-horizontal': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'radix-collapsible-open-both': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'radix-collapsible-close-both': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'item-disappear': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'dialog-in': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'dialog-out': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+		'checkbox-fade': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+	},
+	durations: {
+		'fade-in-up': '200ms',
+		'fade-in-down': '200ms',
+		'fade-in-left': '200ms',
+		'fade-in-right': '200ms',
+		'fade-out-up': '200ms',
+		'fade-out-down': '200ms',
+		'fade-out-left': '200ms',
+		'fade-out-right': '200ms',
+		'fade-in-up-big': '300ms',
+		'fade-in-down-big': '300ms',
+		'fade-out-down-big': '300ms',
+		'fade-in-left-big': '300ms',
+		'fade-in-right-big': '300ms',
+		'fade-in': '200ms',
+		'fade-out': '200ms',
+		'scan-line': '1.5s',
+		'radix-collapsible-open-vertical': '200ms',
+		'radix-collapsible-close-vertical': '200ms',
+		'radix-collapsible-open-horizontal': '200ms',
+		'radix-collapsible-close-horizontal': '200ms',
+		'radix-collapsible-open-both': '200ms',
+		'radix-collapsible-close-both': '200ms',
+		'item-disappear': '300ms',
+		'popover-in': '100ms',
+		'popover-out': '100ms',
+		'dialog-in': '200ms',
+		'dialog-out': '200ms',
+		'checkbox-fade': '5000ms',
+		'pop-up': '200ms',
+	},
+};

package/src/uno/theme/borders.ts

@@ -0,0 +1,17 @@
+import { Theme } from '@unocss/preset-mini';
+
+export const lineWidth: Theme['lineWidth'] = {
+	DEFAULT: `calc(1px * var(--global-border-scale,1))`,
+	thin: `calc(1px * var(--global-border-scale,1))`,
+	none: '0',
+	thick: `calc(2px * var(--global-border-scale,1))`,
+};
+
+export const borderRadius: Theme['borderRadius'] = {
+	xs: `calc(0.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+	sm: `calc(0.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+	md: `calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+	lg: `calc(1.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+	xl: `calc(1.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+	full: `calc(99999px * var(--global-corner-scale,1))`,
+};

package/src/uno/theme/colors.ts

@@ -0,0 +1,35 @@
+import {
+	createColorRange,
+	paletteHues,
+	whiteBlackRange,
+} from '../logic/color.js';
+
+const contrastClamp = 'clamp(0, (0.36 / y - 1) * infinity, 1)';
+
+export const colors = {
+	none: 'transparent',
+	transparent: 'transparent',
+	current: 'currentColor',
+
+	black: whiteBlackRange.ink,
+	white: whiteBlackRange.wash,
+	wash: createColorRange(paletteHues.primary, {
+		saturation: '3%',
+	}).wash,
+	contrast: `color(from var(--l-contrast-bg,var(--v-bg-altered,var(--v-bg,var(--mode-white)))) xyz-d65 ${contrastClamp} ${contrastClamp} ${contrastClamp})`,
+
+	// magic tokens
+	bg: 'var(--v-bg-altered, var(--v-bg, transparent))',
+	fg: 'var(--v-color-altered, var(--v-color, var(--color-black)))',
+	color: 'var(--v-color-altered, var(--v-color, var(--color-black)))',
+	border: 'var(--v-border-altered, var(--v-border, transparent))',
+
+	primary: createColorRange(paletteHues.primary),
+	accent: createColorRange(paletteHues.accent),
+	attention: createColorRange(paletteHues.attention),
+	success: createColorRange(paletteHues.success),
+
+	main: createColorRange(paletteHues.main),
+
+	gray: createColorRange(paletteHues.primary, { saturation: '5%' }),
+} as const;

package/src/uno/theme/index.ts

@@ -0,0 +1,33 @@
+import { Theme } from '@unocss/preset-mini';
+import { animation, easing } from './animations.js';
+import { borderRadius, lineWidth } from './borders.js';
+import { colors } from './colors.js';
+import { boxShadow } from './shadows.js';
+import { height, width } from './sizes.js';
+import { spacing } from './spacing.js';
+import { fontFamily, fontSize } from './typography.js';
+
+export const theme: Theme = {
+	colors,
+	fontSize,
+	fontFamily,
+	spacing,
+	borderRadius,
+	lineWidth,
+	width,
+	height,
+	minWidth: width,
+	minHeight: height,
+	boxShadow,
+	easing,
+	animation,
+	zIndex: {
+		nav: 'var(--z-nav)',
+		menu: 'var(--z-menu)',
+		dialog: 'var(--z-dialog)',
+		backdrop: 'var(--z-backdrop)',
+		tooltip: 'var(--z-tooltip)',
+		overdraw: 'var(--z-overdraw)',
+		'now-playing': 'var(--z-now-playing)',
+	},
+};

package/src/uno/theme/shadows.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@unocss/preset-mini';
+
+const opacity1 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0)))`;
+const opacity2 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * (1 + var(--dyn-source-mode-adjust, 0)))`;
+const opacity3 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) / 2 * (1 + var(--dyn-source-mode-adjust, 0)))`;
+export const boxShadow: Theme['boxShadow'] = {
+	sm: `var(--un-shadow-inset) 0 calc(0px * var(--v-shadow-y-mult,1)) calc(1px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / ${opacity1}),
+			var(--un-shadow-inset) 0 calc(1px * var(--v-shadow-y-mult,1)) calc(2px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / ${opacity1})`,
+	md: `var(--un-shadow-inset) 0 calc(4px * var(--v-shadow-y-mult,1)) calc(8px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / ${opacity2}),
+			var(--un-shadow-inset) 0 calc(2px * var(--v-shadow-y-mult,1)) calc(4px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / ${opacity1})`,
+	lg: `var(--un-shadow-inset) 0 calc(8px * var(--v-shadow-y-mult,1)) calc(16px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / ${opacity2}),
+			var(--un-shadow-inset) 0 calc(5px * var(--v-shadow-y-mult,1)) calc(10px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / ${opacity2})`,
+	xl: `var(--un-shadow-inset) 0 calc(20px * var(--v-shadow-y-mult,1)) calc(40px * (0.1 + var(--global-shadow-spread,1))) -0px rgb(from var(--un-shadow-color) r g b / ${opacity2}),
+			var(--un-shadow-inset) 0 calc(15px * var(--v-shadow-y-mult,1)) calc(30px * (0.05 + var(--global-shadow-spread,1))) -6px rgb(from var(--un-shadow-color) r g b / ${opacity3})`,
+};

package/src/uno/theme/sizes.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@unocss/preset-mini';
+
+export const width: Theme['width'] = {
+	content: '700px',
+	full: '100%',
+	'min-content': 'min-content',
+	'max-content': 'max-content',
+	touch: '40px',
+};
+
+export const height: Theme['height'] = {
+	'min-content': 'min-content',
+	'max-content': 'max-content',
+	touch: '40px',
+};

package/src/uno/theme/spacing.ts

@@ -0,0 +1,9 @@
+import { Theme } from '@unocss/preset-mini';
+
+export const spacing: Theme['spacing'] = {
+	xs: 'calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
+	sm: 'calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
+	md: 'calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
+	lg: 'calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
+	xl: 'calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
+};

package/src/uno/theme/typography.ts

@@ -0,0 +1,24 @@
+import { Theme } from '@unocss/preset-mini';
+
+export const fontFamily: Theme['fontFamily'] = {
+	default: 'var(--font-default, sans-serif)',
+	sans: 'var(--font-sans, sans-serif)',
+	serif: 'var(--font-serif, serif)',
+	title: 'var(--font-title, var(--font-default))',
+};
+export const fontSize: Theme['fontSize'] = {
+	xxs: ['0.625rem', '0.75rem'],
+	xs: ['0.75rem', '1rem'],
+	sm: ['1rem', '1.25rem'],
+	md: ['1.125rem', '1.5rem'],
+	lg: ['1.25rem', '1.75rem'],
+	xl: ['1.5rem', '2rem'],
+	'2xl': ['1.75rem', '2.25rem'],
+	'3xl': ['2rem', '2.5rem'],
+	'4xl': ['2.5rem', '3rem'],
+	'5xl': ['3rem', '3.5rem'],
+	'6xl': ['4rem', '4.5rem'],
+	'7xl': ['5rem', '5.5rem'],
+	'8xl': ['6rem', '6.5rem'],
+	'9xl': ['7rem', '7.5rem'],
+};