@a-type/ui 2.3.6 → 2.4.0

package/src/colors.stories.tsx

@@ -54,15 +54,26 @@ export const Default: Story = {
 	},
 };
 
-function Swatch({ className }: { className?: string }) {
+function Swatch({
+	className,
+	children,
+}: {
+	className?: string;
+	children?: React.ReactNode;
+}) {
 	return (
 		<div
 			className={className}
 			style={{
 				width: '100px',
 				height: '100px',
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
 			}}
-		/>
+		>
+			{children}
+		</div>
 	);
 }
 
@@ -77,3 +88,51 @@ function Range({ className, style }: { className?: string; style?: any }) {
 		</Box>
 	);
 }
+
+export const Modifiers: Story = {
+	render(args: any) {
+		const style: any = args.customHue
+			? {
+					'--dyn-primary-source': args.customHue,
+					'--dyn-primary-hue-rotate': args.customRotate,
+			  }
+			: {};
+		return (
+			<Box col>
+				<ModifierRange className="theme-salt" />
+				<ModifierRange className="theme-lemon" />
+				<ModifierRange className="theme-leek" />
+				<ModifierRange className="theme-tomato" />
+				<ModifierRange className="theme-eggplant" />
+				<ModifierRange className="theme-blueberry" />
+				<ModifierRange style={style} className="theme" />
+			</Box>
+		);
+	},
+};
+
+function ModifierRange({
+	className,
+	style,
+}: {
+	className?: string;
+	style?: any;
+}) {
+	return (
+		<Box className={className} style={style}>
+			<Swatch className="bg-primary-wash">W</Swatch>
+			<Swatch className="bg-primary-light bg-lighten-3">L+3</Swatch>
+			<Swatch className="bg-primary-light">L</Swatch>
+			{/* <Swatch className="bg-primary bg-lighten-5">P+5</Swatch> */}
+			<Swatch className="bg-primary bg-lighten-3">P+3</Swatch>
+			<Swatch className="bg-primary bg-lighten-1">P+1</Swatch>
+			<Swatch className="bg-primary">P</Swatch>
+			<Swatch className="bg-primary bg-darken-1">P-1</Swatch>
+			<Swatch className="bg-primary bg-darken-3">P-3</Swatch>
+			{/* <Swatch className="bg-primary bg-darken-5">P-5</Swatch> */}
+			<Swatch className="bg-primary-dark">D</Swatch>
+			<Swatch className="bg-primary-dark bg-darken-3">D-3</Swatch>
+			<Swatch className="bg-primary-ink">I</Swatch>
+		</Box>
+	);
+}

package/src/components/checkbox/Checkbox.tsx

@@ -26,7 +26,7 @@ export function CheckboxRoot({
 			{...props}
 			className={classNames(
 				'layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border-default transition rounded-lg shadow-sm)',
-				'layer-components:focus-visible:(outline-off shadow-focus)',
+				'layer-components:focus-visible:(outline-off ring-4 ring-primary)',
 				checkedMode === 'faded'
 					? 'layer-components:[&[data-state=checked]]:(bg-primary animate-checkbox-fade animate-forwards)'
 					: 'layer-components:[&[data-state=checked]]:(bg-primary border-primary-dark)',

package/src/components/datePicker/DatePicker.tsx

@@ -216,7 +216,7 @@ const CalendarDay = withClassName(
 	'hover:(z-1 outline-accent)',
 	'active:(bg-accent-wash rounded)',
 	'[&[data-selected]]:(bg-accent-light z-2 rounded)',
-	'[&[data-in-range]]:(bg-accent-wash bg-darken-0.5 rounded-none z-1)',
+	'[&[data-in-range]]:(bg-accent-wash bg-darken-1 rounded-none z-1)',
 	'[&[data-range-start]]:(bg-accent-light rounded-l rounded-r-none z-1)',
 	'[&[data-range-end]]:(bg-accent-light rounded-r rounded-l-none z-1)',
 	'disabled:(opacity-50 cursor-default)',

package/src/components/input/Input.tsx

@@ -10,7 +10,7 @@ import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.j
 
 export const inputClassName = classNames(
 	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm-inset)',
-	'layer-components:focus:(outline-none bg-lighten-2 ring-4	ring-white)',
+	'layer-components:focus:(outline-none bg-lighten-3 ring-4	ring-white)',
 	'layer-components:focus-visible:(outline-none ring-gray)',
 	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',
 	'layer-components:md:(min-w-120px)',

package/src/components/navBar/NavBar.tsx

@@ -8,8 +8,8 @@ export const navBarItemClass = classNames(
 	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-sm border-none cursor-pointer text-sm transition-colors h-full gap-6px relative color-black select-none)',
 	'layer-components:active:bg-darken-2',
 	'layer-components:hover:bg-darken-1',
-	'layer-components:focus-visible:(outline-none bg-darken-3)',
-	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-2 text-black)',
+	'layer-components:focus-visible:(outline-none bg-darken-2)',
+	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-1 text-black)',
 	'layer-components:([--bg:var(--color-primary-wash)] [--fill:var(--color-primary)])',
 	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
 );

package/src/components/richEditor/index.tsx

@@ -5,8 +5,8 @@ export const tipTapClassName = clsx(
 	'layer-components:[&_.ProseMirror:focus]:(outline-none shadow-focus)',
 	'layer-components:[&_h1,h2,h3,p]:mt-0',
 	'layer-components:[&_h1]:(text-2xl font-semibold mb-md [&:not:first-child]:mt-xl)',
-	'layer-components:[&_h2]:(text-lg font-bold color-gray-dark color-darken-4 mb-md [&:not:first-child]:mt-lg)',
-	'layer-components:[&_h3]:(text-md font-500 color-gray-dark color-darken-3 mb-sm [&:not:first-child]:mt-md)',
+	'layer-components:[&_h2]:(text-lg font-bold color-gray-dark color-darken-3 mb-md [&:not:first-child]:mt-lg)',
+	'layer-components:[&_h3]:(text-md font-500 color-gray-dark color-darken-2 mb-sm [&:not:first-child]:mt-md)',
 	'layer-components:[&_h4]:(text-xs color-gray-dark color-darken-1 mb-sm [&:not:first-child]:mt-md uppercase)',
 	'layer-components:[&_p]:(mb-md mt-0)',
 	'layer-components:[&_a]:underline',
@@ -14,7 +14,7 @@ export const tipTapClassName = clsx(
 	'layer-components:[&_ul]:(list-disc pl-6 mb-md mt-md)',
 	'layer-components:[&_ol]:(list-decimal pl-6 mb-md mt-md)',
 	'layer-components:[&_li]:(mb-sm)',
-	'layer-components:[&_mark]:(bg-primary-wash bg-darken-3)',
+	'layer-components:[&_mark]:(bg-primary-wash bg-darken-2)',
 	'layer-components:[&_strong]:(font-semibold)',
 	'layer-components:[&_em]:(italic)',
 	'layer-components:[&_hr]:(my-lg border-gray)',

package/src/components/scrollArea/ScrollArea.tsx

@@ -28,15 +28,14 @@ export const ScrollAreaViewport = withClassName(
 
 export const ScrollAreaScrollbarRoot = withClassName(
 	Primitive.Scrollbar,
-	'layer-components:(flex select-none touch-none p-0.5 bg-inherit bg-lighten-4 transition-colors duration-160ms ease-out)',
-	// 'layer-components:hover:bg-lighten-4',
+	'layer-components:(flex select-none touch-none p-0.5 bg-inherit bg-lighten-2 transition-colors duration-160ms ease-out)',
 	'layer-components:[&[data-orientation=vertical]]:w-2.5',
 	'layer-components:[&[data-orientation=horizontal]]:(flex-col h-2.5)',
 );
 
 export const ScrollAreaThumb = withClassName(
 	Primitive.Thumb,
-	'layer-components:(flex-1 rounded-lg relative bg-inherit bg-darken-8)',
+	'layer-components:(flex-1 rounded-lg relative bg-inherit bg-darken-2)',
 	'before:(content-[""] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full min-w-44px min-h-44px)',
 );
 
@@ -61,7 +60,7 @@ export interface ScrollAreaProps extends Primitive.ScrollAreaProps {
 }
 
 /**
- * @deprecated - just use overflow-auto
+ * @deprecated - just use Box with overflow prop
  */
 export const ScrollArea = Object.assign(
 	function ScrollArea({

package/src/components/tabs/tabs.tsx

@@ -13,7 +13,7 @@ export const TabsTriggerBase = withClassName(
 	TabsPrimitive.Trigger,
 	'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold text-gray-dark-blend border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)',
 	'layer-components:hover:(bg-darken-1 ring-4 ring-color-bg)',
-	'layer-components:focus-visible:(bg-darken-3 ring-6 ring-color-bg outline-off)',
+	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-color-bg outline-off)',
 	'[&[data-state=active]]:(bg-[var(--bg)] font-semibold text-black cursor-default hover:bg-darken-1 relative z-1)',
 );
 
@@ -38,7 +38,10 @@ export const TabsTrigger = ({
 	/>
 );
 
-export const TabsContent = withClassName(TabsPrimitive.Content, '');
+export const TabsContent = withClassName(
+	TabsPrimitive.Content,
+	'layer-components:(focus:outline-none focus-visible:(outline-none ring-inset ring-2 ring-gray))',
+);
 
 export const Tabs = Object.assign(TabsRoot, {
 	List: TabsList,

package/src/components/toggleGroup/toggleGroup.tsx

@@ -3,13 +3,13 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 export const ToggleGroupRoot = withClassName(
 	ToggleGroupPrimitive.Root,
-	'inline-flex bg-gray-wash bg-darken-1 rounded-lg gap-sm',
+	'layer-components:(inline-flex bg-gray-wash bg-darken-1 rounded-lg gap-sm)',
 );
 export const ToggleGroupItem = withClassName(
 	ToggleGroupPrimitive.Item,
-	'rounded-full color-black bg-gray-light py-sm px-md flex items-center border-transparent border-1 border-solid justify-center cursor-pointer',
-	'hover:bg-darken-1 active:bg-darken-2 focus-visible:(shadow-focus outline-off)',
-	'[&[data-state=on]]:(bg-primary-light border-default)',
+	'layer-components:(rounded-full color-black bg-gray bg-lighten-3 py-sm px-md flex items-center border-transparent border-1 border-solid justify-center cursor-pointer)',
+	'layer-components:(hover:bg-lighten-2 active:bg-lighten-2 focus-visible:(ring-4 ring-primary outline-off))',
+	'layer-components:[&[data-state=on]]:(bg-primary-light border-default)',
 );
 
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {

package/src/themes.stories.tsx

@@ -89,7 +89,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Checkbox defaultChecked />
 							<span>Checkbox</span>
 						</Box>
-						<ToggleGroup type="single">
+						<ToggleGroup type="single" defaultValue="1">
 							<ToggleGroup.Item value="1">Toggle 1</ToggleGroup.Item>
 							<ToggleGroup.Item value="2">Toggle 2</ToggleGroup.Item>
 						</ToggleGroup>

package/src/uno/colors.ts

@@ -1,15 +1,15 @@
 export const colorConstants = `
 	--dyn-saturation-x-wash: calc(pow(var(--global-saturation, 1), 0.6));
 	--dyn-saturation-x-light: calc(pow(var(--global-saturation, 1), 0.05));
-	--dyn-saturation-x-dark: calc(pow(var(--global-saturation, 1), 0.1));
+	--dyn-saturation-x-dark: calc(pow(var(--global-saturation, 1), 0.01));
 	--dyn-saturation-x-ink: calc(pow(var(--global-saturation, 1), 0.2));
 `;
 
 export const dynamicThemeComputedColors = (name: string) => `
 	--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.08 * 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.26 * 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}-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}-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);
@@ -111,3 +111,21 @@ export const themeColors = {
 	'overlay-dark': 'var(--color-overlay-dark)',
 	'dark-mode-contrast': 'var(--color-dark-mode-contrast)',
 } as const;
+
+export function lighten(base: string, level: string) {
+	return mod(base, level, 1);
+}
+
+export function darken(base: string, level: string) {
+	return mod(base, level, -1);
+}
+
+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(c * (1 - (${level} * 0.1 * ${sign} * (1 + (1 - var(--global-saturation, 0))))))` +
+		` h)`
+	);
+}

package/src/uno.preset.ts

@@ -3,10 +3,12 @@ import { bgColors as bgColorsRules } from '@unocss/preset-mini/rules';
 import presetWind3 from '@unocss/preset-wind3';
 import { PreflightContext, Preset } from 'unocss';
 import {
+	darken,
 	dynamicComputedVars,
 	dynamicTheme,
 	DynamicThemeColor,
 	dynamicThemeComputedColors,
+	lighten,
 	themeColors,
 } from './uno/colors.js';
 
@@ -638,7 +640,7 @@ export default function presetAtype({
 						--wash-saturation-tweak: ${darkModeSaturationTweak};
 						--mode-mult: -1;
 						--dyn-mode-mult: -1.6;
-						--dyn-mode-lighten-mult: -0.5;
+						--dyn-mode-lighten-mult: -1;
 						--dyn-mode-sign: -1;
 						--dyn-source-mode-adjust: 1;
 						--color-dark-blend: var(--palette-light-blend);
@@ -836,7 +838,7 @@ export default function presetAtype({
 					* {
 						box-sizing: border-box;
 						-webkit-tap-highlight-color: transparent;
-						scrollbar-color: var(--v-bg-altered,var(--v-bg,var(--color-gray))) transparent;
+						scrollbar-color: var(--v-color-altered,var(--v-color,var(--color-gray))) transparent;
 					}
 				}
 
@@ -985,18 +987,3 @@ function resolveThemeColor(color: string, theme: any) {
 
 	return resolvedColor;
 }
-
-function lighten(base: string, level: string, saturate?: string) {
-	const levelNum = parseFloat(level) * 0.1;
-	const saturateNum = saturate ? parseFloat(saturate) : levelNum / 100;
-	return `oklch(from ${base} calc(l + (${
-		1 * levelNum
-	} * var(--dyn-mode-lighten-mult, 1))) calc(c + (${
-		1 * saturateNum
-	} * var(--dyn-mode-lighten-mult, 1))) h)`;
-}
-
-function darken(base: string, level: string) {
-	const levelNum = parseFloat(level);
-	return lighten(base, (-levelNum / 8).toString());
-}