@a-type/ui 2.6.0 → 2.6.2

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -15,7 +15,7 @@ const StyledContent = withClassName(
 			</BoxContext.Provider>
 		);
 	},
-	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-sm border border-gray-dark)',
+	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-gray-dark)',
 	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
 	'layer-components:[&[data-state=open]]:animate-popover-in',
 	'layer-components:[&[data-state=closed]]:animate-popover-out',
@@ -25,8 +25,9 @@ const StyledContent = withClassName(
 );
 const itemClassName = classNames(
 	'layer-components:(text-md leading-4 color-black flex items-center pr-4 pl-8 py-2 relative text-left select-none cursor-pointer)',
-	'layer-components:[&[data-disabled]]:(color-black pointer-events-none)',
-	'layer-components:focus-visible:(bg-gray-light bg-darken-0.5 color-black)',
+	'layer-components:[&[data-disabled]]:(color-gray-dark pointer-events-none)',
+	'layer-components:focus-visible:(bg-gray bg-lighten-3 color-black)',
+	'layer-components:hover:(bg-gray bg-lighten-3 color-black)',
 	'layer-components:focus:outline-none',
 );
 const StyledItemBase = withClassName(DropdownMenuPrimitive.Item, itemClassName);
@@ -46,7 +47,7 @@ const StyledItem = ({
 			{...props}
 			className={clsx(
 				color === 'destructive' &&
-					'layer-variants:(color-attention-dark hover:bg-attention-wash focus-visible:bg-attention-wash)',
+					'layer-variants:(color-attention-dark hover:bg-attention-light focus-visible:bg-attention-light)',
 				className,
 			)}
 			ref={forwardedRef}
@@ -111,14 +112,14 @@ export const DropdownMenuContent = ({
 	return (
 		<StyledPortal forceMount={forceMount}>
 			<StyledContent {...props}>
-				<div className="overflow-hidden rounded-lg">{children}</div>
+				<div className="overflow-hidden rounded-md">{children}</div>
 				<StyledArrow />
 			</StyledContent>
 		</StyledPortal>
 	);
 };
 
-export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto');
+export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto pl-md');
 
 export const DropdownMenu = Object.assign(DropdownMenuRoot, {
 	Content: DropdownMenuContent,

package/src/components/select/Select.tsx

@@ -45,10 +45,8 @@ export const SelectItem = ({
 
 export const SelectItemRoot = withClassName(
 	SelectPrimitive.Item,
-	'layer-components:(text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none)',
-	'layer-components:[&[data-disabled]]:(color-gray pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)',
-	'layer-components:[&:first-child]:(rounded-t-lg)',
-	'layer-components:[&:last-child]:(rounded-b-lg)',
+	'layer-components:(text-md leading-4 color-black flex items-center flex-row h-36px pr-4 pl-35px relative select-none)',
+	'layer-components:[&[data-disabled]]:(color-gray pointer-events-none) [&[data-highlighted]]:(outline-none bg-gray bg-lighten-3 color-black)',
 );
 export const SelectItemIndicatorRoot = withClassName(
 	SelectPrimitive.ItemIndicator,
@@ -133,7 +131,7 @@ export const SelectIcon = withNoNativeRender(
 	}) => {
 		return (
 			<SelectPrimitive.Icon
-				className={classNames('color-inherit', className)}
+				className={classNames('color-inherit ml-auto', className)}
 				{...props}
 				ref={forwardedRef}
 			>
@@ -143,7 +141,11 @@ export const SelectIcon = withNoNativeRender(
 	},
 );
 
-const zIndex = { zIndex: 1001 };
+const contentStyle = {
+	zIndex: 1001,
+	'--local-corner-scale': '1',
+} as React.CSSProperties;
+const viewportStyle = { '--local-corner-scale': '0.9' } as React.CSSProperties;
 export const SelectContent = withPassthroughNativeRender(
 	({ ref: forwardedRef, children, inDialog, className, ...props }) => {
 		return (
@@ -151,7 +153,7 @@ export const SelectContent = withPassthroughNativeRender(
 				<BoxContext.Provider value={{ spacingScale: 1 }}>
 					<SelectPrimitive.Content
 						className={classNames(
-							'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border border-black z-menu shadow-lg)',
+							'layer-components:(overflow-hidden bg-white rounded-md border border-solid border border-black z-menu shadow-lg)',
 							'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]',
 							'layer-components:[&[data-state=open]]:animate-popover-in',
 							'layer-components:[&[data-state=closed]]:animate-popover-out',
@@ -159,14 +161,14 @@ export const SelectContent = withPassthroughNativeRender(
 							inDialog && 'z-[calc(var(--z-dialog)+1)]',
 							className,
 						)}
-						style={zIndex}
+						style={contentStyle}
 						{...props}
 						ref={forwardedRef}
 					>
 						<SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
 							<ChevronUpIcon />
 						</SelectPrimitive.ScrollUpButton>
-						<SelectPrimitive.Viewport className="p-1">
+						<SelectPrimitive.Viewport style={viewportStyle}>
 							{children}
 						</SelectPrimitive.Viewport>
 						<SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">

package/src/themes.stories.tsx

@@ -180,6 +180,42 @@ function DemoUI({ className }: { className?: string }) {
 							<ContextMenu.Item>Item 3</ContextMenu.Item>
 						</ContextMenu.Content>
 					</ContextMenu>
+					<DropdownMenu>
+						<DropdownMenu.Trigger asChild className="m-auto">
+							<Button>Dropdown</Button>
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content>
+							<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 3</DropdownMenu.Item>
+							<DropdownMenu.Item disabled>Disabled Item</DropdownMenu.Item>
+							<DropdownMenu.Separator />
+							<DropdownMenu.Item>Item 4</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 5</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 6</DropdownMenu.Item>
+							<DropdownMenu.Item>
+								With icon
+								<DropdownMenu.ItemRightSlot>
+									<Icon name="flag" />
+								</DropdownMenu.ItemRightSlot>
+							</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</DropdownMenu>
+					<Select value="1">
+						<Select.Trigger />
+						<Select.Content>
+							<Select.Item value="1">Item 1</Select.Item>
+							<Select.Item value="2">Item 2</Select.Item>
+							<Select.Item value="3">Item 3</Select.Item>
+							<Select.Item value="4">Item 4</Select.Item>
+							<Select.Item value="5">Item 5</Select.Item>
+							<Select.Item value="6">Item 6</Select.Item>
+							<Select.Item value="7">Item 7</Select.Item>
+							<Select.Item value="8">Item 8</Select.Item>
+							<Select.Item value="9">Item 9</Select.Item>
+							<Select.Item value="10">Item 10</Select.Item>
+						</Select.Content>
+					</Select>
 					<Dialog>
 						<Dialog.Trigger asChild>
 							<Button>Click</Button>
@@ -256,16 +292,6 @@ function DemoUI({ className }: { className?: string }) {
 						</HorizontalList>
 					</Box>
 					<ImageUploader className="h-200px" value={null} onChange={() => {}} />
-					<DropdownMenu>
-						<DropdownMenu.Trigger asChild className="m-auto">
-							<Button>Dropdown</Button>
-						</DropdownMenu.Trigger>
-						<DropdownMenu.Content>
-							<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-							<DropdownMenu.Item>Item 2</DropdownMenu.Item>
-							<DropdownMenu.Item>Item 3</DropdownMenu.Item>
-						</DropdownMenu.Content>
-					</DropdownMenu>
 				</div>
 			</PageContent>
 			<PageNav>

package/src/uno/colors.ts

@@ -5,19 +5,34 @@ export const colorConstants = `
 	--dyn-saturation-x-ink: calc(pow(var(--global-saturation, 1), 0.2));
 `;
 
-export const dynamicThemeComputedColors = (name: string) => `
+const lightness = {
+	wash: `calc(1 + 0.45 * var(--dyn-mode-mult, 1))`,
+	light: `calc(1 + 0.25 * var(--dyn-mode-mult, 1))`,
+	dark: `calc(1 - 0.25 * var(--dyn-mode-mult, 1))`,
+	ink: `calc(1 - 0.45 * var(--dyn-mode-mult, 1))`,
+};
+
+export const dynamicThemeComputedColors = (name: string) => {
+	const hue = {
+		wash: `calc(h - 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1))`,
+		light: `calc(h - 0.5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1))`,
+		dark: `calc(h + 0.2 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1))`,
+		ink: `calc(h + 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1))`,
+	};
+	return `
 	--color-${name}: oklch(calc(90% - 35% * var(--dyn-source-mode-adjust, 0) - (var(--dyn-mode-sign, 1) * var(--dyn-${name}-base-dim, 0%))) calc(var(--dyn-${name}-sat-mult,1) * (35% - 2% * var(--dyn-source-mode-adjust, 0))) var(--dyn-${name}-source, 0));
-	--color-${name}-wash: oklch(from var(--color-${name}) calc(min(0.999,max(0.15, l + 0.15 * var(--dyn-mode-mult, 1)))) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.06)) calc(h - 5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
-	--color-${name}-light: oklch(from var(--color-${name}) calc(l + 0.25 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-light, 1) - 0.03)) calc(h - 0.5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
-	--color-${name}-dark: oklch(from var(--color-${name}) calc(l - 0.25 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-dark, 1) + 0.01)) calc(h + 0.2 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
-	--color-${name}-ink: oklch(from var(--color-${name}) calc(l - 0.45 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) calc(h + 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
+	--color-${name}-wash: oklch(from var(--color-${name}) calc(l * ${lightness.wash}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.06)) ${hue.wash});
+	--color-${name}-light: oklch(from var(--color-${name}) calc(l * ${lightness.light}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-light, 1) - 0.03)) ${hue.light});
+	--color-${name}-dark: oklch(from var(--color-${name}) calc(l * ${lightness.dark}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-dark, 1) + 0.01)) ${hue.dark});
+	--color-${name}-ink: oklch(from var(--color-${name}) calc(l * ${lightness.ink}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) ${hue.ink});
 
-	--color-${name}-gray: oklch(from var(--color-${name}) calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
-	--color-${name}-gray-wash: oklch(from var(--color-${name}-wash)  calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
-	--color-${name}-gray-light: oklch(from var(--color-${name}-light)  calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
-	--color-${name}-gray-dark: oklch(from var(--color-${name}-dark)  calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
-	--color-${name}-gray-ink: oklch(from var(--color-${name}-ink)  calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
+	--color-${name}-gray: oklch(from var(--color-${name}) l calc(c * 0.1 * var(--global-saturation, 1)) h);
+	--color-${name}-gray-wash: oklch(from var(--color-${name}-gray) calc(l * ${lightness.wash}) calc(c * 0.9) ${hue.wash});
+	--color-${name}-gray-light: oklch(from var(--color-${name}-gray) calc(l * ${lightness.light}) c ${hue.light});
+	--color-${name}-gray-dark: oklch(from var(--color-${name}-gray) calc(l * ${lightness.dark}) c ${hue.dark});
+	--color-${name}-gray-ink: oklch(from var(--color-${name}-gray) calc(l * ${lightness.ink}) c ${hue.ink});
 `;
+};
 
 export const dynamicComputedVars = `
 ${dynamicThemeComputedColors('primary')}
@@ -31,7 +46,7 @@ ${dynamicThemeComputedColors('accent')}
 
 --color-wash: var(--color-gray-wash);
 --palette-black: var(--color-gray-ink);
---palette-white: oklch(from var(--color-wash) calc(l + 1 / var(--dyn-mode-mult,1)) calc(c * var(--global-saturation, 1)/var(--dyn-mode-mult,1)) h);
+--palette-white: oklch(from var(--color-wash) calc(0.999 * var(--dyn-mode-mult,1)) calc(c * var(--global-saturation, 1)) h);
 /* A dark-mode only contrast color */
 --color-dark-mode-contrast: oklch(from var(--color-gray-ink) l c h / calc(100% * var(--dyn-source-mode-adjust, 0)));
 `;
@@ -131,7 +146,7 @@ function mod(base: string, level: string, sign: number) {
 	return (
 		`oklch(from ` +
 		base +
-		` calc(l * (1 + pow(${level}, 1) / 30 * ${sign} * var(--dyn-mode-mult, 1)))` +
+		` calc(l * (1 + ${level} / 60 * ${sign} * var(--dyn-mode-mult, 1)))` +
 		` calc(c * (1 - (${level} * 0.1 * ${sign} * (1 + (1 - var(--global-saturation, 0))))))` +
 		` h)`
 	);