feat: across the board color/tone/contrast improvements

maxholman · Dec 23, 2022 · 9d386d3 · 9d386d3
1 parent 26621d3
commit 9d386d3
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 153 deletions.
diff --git a/lib/badges.css.ts b/lib/badges.css.ts
@@ -2,6 +2,7 @@ import { createVar, style, styleVariants } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { genericVars } from './design-system.css.js';
 import { colorThemeVars } from './schemes/color.css.js';
+import { toneH, toneS } from './tone.css.js';
 import { hsl } from './utils.js';
 
 export type BadgeVariant =
@@ -32,21 +33,7 @@ const base = style({
   letterSpacing: 'initial',
 });
 
-const hue = createVar();
-
-export const badgeToneVariants = styleVariants(
-  colorThemeVars.tones,
-  (value) => ({
-    vars: {
-      [hue]: value.h,
-    },
-    // backgroundColor: hsl(value.h, 100, 80),
-    // borderColor: hsl(value.h, 60, 70),
-    // color: hsl(value.h, 20, 20),
-  }),
-);
-
-export const variants: Record<
+const variantRules: Record<
   BadgeVariant,
   {
     backgroundColor?: string;
@@ -55,23 +42,23 @@ export const variants: Record<
   }
 > = {
   standard: {
-    backgroundColor: hsl(hue, colorThemeVars.accent.s, colorThemeVars.accent.l),
-    color: hsl(hue, colorThemeVars.accent.s, 100),
-    borderColor: hsl(hue, colorThemeVars.accent.s, 50),
+    backgroundColor: hsl(toneH, toneS, colorThemeVars.tones.accent.l),
+    color: hsl(toneH, toneS, 100),
+    borderColor: hsl(toneH, toneS, 50),
   },
   neutral: {
-    backgroundColor: hsl(colorThemeVars.accent.h, 10, 50),
-    color: hsl(colorThemeVars.accent.h, 10, '90%'),
-    borderColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, '90%'),
+    backgroundColor: hsl(toneH, toneS, 50),
+    color: hsl(toneH, toneS, '90%'),
+    borderColor: hsl(toneH, toneS, '90%'),
   },
   ghost: {
-    color: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 50),
-    borderColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 50),
+    color: hsl(toneH, toneS, 50),
+    borderColor: hsl(toneH, toneS, 50),
   },
   subtle: {
-    backgroundColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 90),
-    color: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 40),
-    borderColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 90),
+    backgroundColor: hsl(toneH, toneS, 90),
+    color: hsl(toneH, toneS, 40),
+    borderColor: hsl(toneH, toneS, 90),
   },
   transparent: {
     backgroundColor: 'transparent',
@@ -80,18 +67,7 @@ export const variants: Record<
   },
 };
 
-export const badgeVariantClasses = styleVariants(variants, (variant) => [
+export const badgeVariants = styleVariants(variantRules, (variant) => [
   base,
-  {
-    ...(variant.backgroundColor && {
-      backgroundColor: variant.backgroundColor,
-    }),
-    color: variant.color,
-    borderColor: variant.borderColor,
-  },
+  variant,
 ]);
-
-// export const inlineBleedClass = style({
-//   marginTop: calc(genericVars.space.small).negate().toString(),
-//   marginBottom: calc(`${genericVars.space.small}`).negate().toString(),
-// });
diff --git a/lib/badges.tsx b/lib/badges.tsx
@@ -1,13 +1,9 @@
 import { ClassValue, clsx } from 'clsx';
 import type { FC } from 'react';
-import {
-  badgeToneVariants,
-  BadgeVariant,
-  badgeVariantClasses,
-} from './badges.css.js';
+import { BadgeVariant, badgeVariants } from './badges.css.js';
 import { Box, BoxBasedComponentProps } from './core.js';
 import type { Align } from './layout.css.js';
-import type { Tone } from './schemes/color.css.js';
+import { Tone, toneVariants } from './tone.css.js';
 import type { Merge } from './types.js';
 
 export type BadgeProps = {
@@ -30,11 +26,7 @@ export const Badge: FC<
 }) => (
   <Box
     component={component}
-    className={clsx(
-      className,
-      badgeToneVariants[tone],
-      badgeVariantClasses[variant],
-    )}
+    className={clsx(className, toneVariants[tone], badgeVariants[variant])}
     {...props}
   >
     {children}

diff --git a/lib/buttons.css.ts b/lib/buttons.css.ts
@@ -1,24 +1,25 @@
-import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import {
+  createVar,
+  style,
+  StyleRule,
+  styleVariants,
+} from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { genericVars } from './design-system.css.js';
 import { rotate } from './keyframes.css.js';
-import { colorThemeVars } from './schemes/color.css.js';
+import { colorThemeVars, contrastSchemeVars } from './schemes/color.css.js';
+import { toneH, toneS } from './tone.css.js';
 import { hsl } from './utils.js';
 
-export type ButtonVariant =
-  | 'standard'
-  | 'neutral'
-  | 'ghost'
-  | 'subtle'
-  | 'transparent';
+export type ButtonVariant = 'standard' | 'ghost' | 'subtle' | 'transparent';
 
 export const iconClass = style({
-  display: 'inline-flex',
+  display: 'flex',
+  flexDirection: 'row',
+  width: '1em',
   height: '1em',
-  aspectRatio: '1/1',
+  flexShrink: 0,
   alignItems: 'center',
-  justifySelf: 'center',
-  justifyContent: 'center',
 });
 
 const basePadding = createVar();
@@ -29,13 +30,15 @@ const base = style({
   },
   cursor: 'pointer',
   borderStyle: 'solid',
-  display: 'flex',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  flexWrap: 'nowrap',
+  whiteSpace: 'nowrap',
+  justifyContent: 'center',
   borderWidth: genericVars.border.weight.normal,
   borderRadius: genericVars.radius.medium,
-  flexDirection: 'row',
-  alignItems: 'center',
+  borderColor: 'transparent',
   padding: `${calc(basePadding).divide(2).toString()} ${basePadding}`,
-  justifyContent: 'center',
   fontSize: genericVars.text.size.normal,
   userSelect: 'none',
   textAlign: 'center',
@@ -56,76 +59,58 @@ export const compactButton = style({
   vars: {
     [basePadding]: genericVars.space.tiny,
   },
-  // padding: `${genericVars.space.tiny} ${genericVars.space.small}`,
   fontSize: genericVars.text.size.small,
 });
 
-const variants: Record<
-  ButtonVariant,
-  {
-    backgroundColor?: string;
-    color: string;
-    borderColor: string;
-    backgroundColorHover?: string;
-    borderColorHover?: string;
-  }
-> = {
+const hoverAlpha = createVar();
+
+const variants: Record<ButtonVariant, StyleRule> = {
   standard: {
-    backgroundColor: hsl(
-      colorThemeVars.accent.h,
-      colorThemeVars.accent.s,
-      colorThemeVars.accent.l,
+    backgroundColor: hsl(toneH, toneS, contrastSchemeVars.level4.l),
+    color: hsl(
+      toneH,
+      colorThemeVars.tones.accent.s,
+      contrastSchemeVars.level0.l,
     ),
-    color: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 100),
-    borderColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 50),
-  },
-  neutral: {
-    backgroundColor: hsl(colorThemeVars.accent.h, 10, 50),
-    color: hsl(colorThemeVars.accent.h, 10, '90%'),
-    borderColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, '90%'),
   },
   ghost: {
-    color: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 50),
-    borderColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 50),
+    color: hsl(toneH, toneS, contrastSchemeVars.level4.l),
+    borderColor: hsl(toneH, toneS, contrastSchemeVars.level4.l),
+    selectors: {
+      '&:hover': {
+        backgroundColor: hsl(toneH, toneS, contrastSchemeVars.level1.l, 0.75),
+      },
+    },
   },
   subtle: {
-    backgroundColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 90),
-    color: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 40),
-    borderColor: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 90),
-    borderColorHover: hsl(colorThemeVars.accent.h, colorThemeVars.accent.s, 80),
+    backgroundColor: hsl(toneH, toneS, contrastSchemeVars.level1.l),
+    color: hsl(toneH, toneS, contrastSchemeVars.level4.l),
+    borderColor: hsl(toneH, toneS, contrastSchemeVars.level1.l),
+    selectors: {
+      '&:hover': {
+        borderColor: hsl(
+          toneH,
+          calc(toneS).subtract('15%').toString(),
+          contrastSchemeVars.level2.l,
+        ),
+      },
+    },
   },
   transparent: {
-    backgroundColor: 'transparent',
-    color: 'inherit',
-    borderColor: 'transparent',
-    backgroundColorHover: hsl(
-      colorThemeVars.accent.h,
-      colorThemeVars.accent.s,
-      '90%',
-    ),
+    vars: { [hoverAlpha]: '0' },
+    color: hsl(toneH, toneS, contrastSchemeVars.level3.l),
+    backgroundColor: hsl(toneH, toneS, contrastSchemeVars.level1.l, hoverAlpha),
+    selectors: {
+      '&:hover': {
+        vars: { [hoverAlpha]: '0.5' },
+      },
+    },
   },
 };
 
 export const buttonVariantClasses = styleVariants(variants, (variant) => [
   base,
-  {
-    ...(variant.backgroundColor && {
-      backgroundColor: variant.backgroundColor,
-    }),
-    color: variant.color,
-    borderColor: variant.borderColor,
-    selectors: {
-      // :where to avoid specificity issues with busy/disabled etc
-      ...((variant.borderColorHover || variant.backgroundColorHover) && {
-        '&:where(:not([disabled]):hover)': {
-          borderColor: variant.borderColorHover || variant.borderColor,
-          ...(variant.backgroundColorHover && {
-            backgroundColor: variant.backgroundColorHover,
-          }),
-        },
-      }),
-    },
-  },
+  variant,
 ]);
 
 export const visiblyHiddenClass = style({

diff --git a/lib/buttons.tsx b/lib/buttons.tsx
@@ -12,9 +12,8 @@ import {
 import { Box, BoxBasedComponentProps } from './core.js';
 import type { Align } from './layout.css.js';
 import { Inline } from './layout.js';
+import { Tone, toneVariants } from './tone.css.js';
 import type { Merge } from './types.js';
-import type { Tone } from './schemes/color.css.js';
-import { toneVariants } from './typography.css.js';
 
 export type ButtonCommonProps = {
   className?: ClassValue;
@@ -23,7 +22,7 @@ export type ButtonCommonProps = {
   compact?: boolean;
   align?: Align;
   inline?: boolean;
-  tone?: ButtonTone;
+  tone?: Tone;
   icon?: ReactElement | FC | undefined;
 };
 
@@ -57,7 +56,7 @@ const ButtonInternal: FC<
 > = ({
   component = 'button',
   variant = 'standard',
-  tone,
+  tone = 'accent',
   compact,
   busy,
   align,
@@ -70,12 +69,12 @@ const ButtonInternal: FC<
   <Box
     component={component}
     className={clsx(
-      className,
       buttonVariantClasses[variant],
+      toneVariants[tone],
       busy && busyButtonClass,
-      tone && toneVariants[tone],
       compact && compactButton,
       inline && inlineBleedClass,
+      className,
     )}
     {...props}
   >

diff --git a/lib/links.css.ts b/lib/links.css.ts
@@ -1,6 +1,6 @@
 import { createVar, style, styleVariants } from '@vanilla-extract/css';
 import { genericVars } from './design-system.css.js';
-import { colorThemeVars } from './schemes/color.css.js';
+import { colorThemeVars, contrastSchemeVars } from './schemes/color.css.js';
 import { hsl } from './utils.js';
 
 export type LinkVariant = 'strong' | 'standard' | 'weak';
@@ -12,7 +12,7 @@ const linkStyle = style({
     [linkColorVar]: hsl(
       colorThemeVars.tones.accent.h,
       colorThemeVars.tones.accent.s,
-      colorThemeVars.accent.l,
+      contrastSchemeVars.level3.l,
     ),
   },
   cursor: 'pointer',

diff --git a/lib/panel.css.ts b/lib/panel.css.ts
@@ -38,21 +38,29 @@ const variantRules: Record<
       0,
       contrastSchemeVars.level1.l,
     ),
-    borderColor: hsl(colorThemeVars.accent.h, 0, contrastSchemeVars.level3.l),
+    borderColor: hsl(
+      colorThemeVars.tones.accent.h,
+      0,
+      contrastSchemeVars.level1.l,
+    ),
   },
   ghost: {
-    borderColor: hsl(colorThemeVars.accent.h, 0, contrastSchemeVars.level3.l),
+    borderColor: hsl(
+      colorThemeVars.tones.accent.h,
+      0,
+      contrastSchemeVars.level1.l,
+    ),
   },
   subtle: {
     backgroundColor: hsl(
       colorThemeVars.tones.accent.h,
       colorThemeVars.tones.accent.s,
-      contrastSchemeVars.level1.l,
+      contrastSchemeVars.level0point5.l,
     ),
     borderColor: hsl(
       colorThemeVars.tones.accent.h,
       colorThemeVars.tones.accent.s,
-      contrastSchemeVars.level3.l,
+      contrastSchemeVars.level1.l,
     ),
   },
   transparent: {