fix: lighter ghost colors

LexSwed · Dec 29, 2022 · 1dfca93 · 1dfca93
1 parent a00eeb5
commit 1dfca93
Show file tree

Hide file tree

Showing 17 changed files with 131 additions and 136 deletions.
diff --git a/src/lib/button/button.module.css b/src/lib/button/button.module.css
@@ -153,15 +153,15 @@
     color: theme('colors.on-surface');
 
     &:where(:hover, :focus, :active) {
-      background-color: theme('colors.on-surface/0.1');
+      background-color: theme('colors.on-surface/0.05');
 
       &:where(.intent--danger) {
         background-color: theme('colors.error/0.1');
       }
     }
 
     &:where(:active, [data-state='open']) {
-      background-color: theme('colors.on-surface/0.15');
+      background-color: theme('colors.on-surface/0.1');
     }
 
     &:where(:focus) {

diff --git a/src/lib/checkbox/checkbox.tsx b/src/lib/checkbox/checkbox.tsx
@@ -3,8 +3,8 @@ import { CheckIcon } from '@heroicons/react/24/outline';
 import { clsx } from 'clsx';
 import { classed as css, VariantProps } from '@tw-classed/core';
 
-import type { FlexVariants } from '../flex/flex';
-import { FormFieldWrapper, useFormField, Label } from '../form-field';
+import { Flex, FlexVariants } from '../flex/flex';
+import { useFormField, Label } from '../form-field';
 import { Icon } from '../icon';
 
 import styles from './checkbox.module.css';
@@ -29,16 +29,16 @@ export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
       onChange,
       style,
       className,
+      cross = 'center',
+      main,
       flow = 'row',
+      display = 'flex',
+      gap = 'sm',
       label,
       secondaryLabel,
-      display,
-      main,
-      cross = 'center',
       disabled,
       id,
       size = 'sm',
-      gap = 'sm',
       variant = 'single',
       inputRef,
       ...props
@@ -54,7 +54,7 @@ export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
     }, [onChange]);
 
     return (
-      <FormFieldWrapper
+      <Flex
         className={clsx(styles['field'], className)}
         style={style}
         display={display}
@@ -83,13 +83,13 @@ export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
         {label !== undefined && (
           <Label
             label={label}
-            size={mapLabelSize[size]}
             secondary={secondaryLabel}
             disabled={disabled}
             htmlFor={ariaProps.id}
+            size={mapLabelSize[size]}
           />
         )}
-      </FormFieldWrapper>
+      </Flex>
     );
   }
 );

diff --git a/src/lib/chip/chip.module.css b/src/lib/chip/chip.module.css
@@ -11,17 +11,17 @@
     background-color: transparent;
     color: theme('colors.on-surface');
     border-color: theme('colors.on-surface/0.5');
+    line-height: 1;
 
     &:where([role='option']) {
       outline: none;
       cursor: default;
       user-select: none;
       &:where(:hover, :focus) {
-        background-color: theme('colors.on-surface/0.1');
+        background-color: theme('colors.on-surface/0.05');
       }
       &:where(:active) {
-        border-color: theme('colors.outline/0.15');
-        background-color: theme('colors.on-surface/0.15');
+        background-color: theme('colors.on-surface/0.1');
       }
       &:focus {
         @apply outline-none ring-4 ring-opacity-20;

diff --git a/src/lib/flex/flex.tsx b/src/lib/flex/flex.tsx
@@ -1,7 +1,7 @@
 import { classed as css, VariantProps } from '@tw-classed/core';
 import { clsx } from 'clsx';
-import { forwardRef, ElementType, ReactElement } from 'react';
-import type { PolyProps, PolyRef } from '../utils/polymorphic';
+import { forwardRef } from 'react';
+import type { ForwardRefComponent } from '../utils/polymorphic';
 
 import styles from './flex.module.css';
 
@@ -58,17 +58,8 @@ export const flexCss = css({
 
 export type FlexVariants = VariantProps<typeof flexCss>;
 
-type FlexProps<C extends ElementType> = PolyProps<C, FlexVariants>;
-
-type FlexComponent = <C extends ElementType = 'div'>(props: FlexProps<C>) => ReactElement | null;
-
-export const Flex: FlexComponent = forwardRef(
-  <C extends ElementType = 'div'>(
-    { as, display = 'flex', gap, main, cross, flow, wrap, flex, className, ...props }: FlexProps<C>,
-    ref: PolyRef<C>
-  ) => {
-    const Component = as || 'div';
-
+export const Flex = forwardRef(
+  ({ as: Component = 'div', display = 'flex', gap, main, cross, flow, wrap, flex, className, ...props }, ref) => {
     return (
       <Component
         className={clsx(flexCss({ display, gap, main, cross, flow, wrap, flex }), className)}
@@ -77,26 +68,15 @@ export const Flex: FlexComponent = forwardRef(
       />
     );
   }
-);
+) as ForwardRefComponent<'div', FlexVariants>;
 
-type RowProps<C extends ElementType> = PolyProps<
-  C,
-  FlexVariants & { flow?: Extract<FlexVariants['flow'], 'row' | 'row-reverse'> }
->;
-type RowComponent = <C extends ElementType = 'div'>(props: RowProps<C>) => ReactElement | null;
-
-export const Row: RowComponent = forwardRef(<C extends ElementType = 'div'>(props: RowProps<C>, ref: PolyRef<C>) => {
+export const Row = forwardRef((props, ref) => {
   return <Flex {...props} flow={props.flow || 'row'} ref={ref} />;
-});
+}) as ForwardRefComponent<'div', FlexVariants & { flow?: Extract<FlexVariants['flow'], 'row' | 'row-reverse'> }>;
 
-type ColumnProps<C extends ElementType> = PolyProps<C, FlexVariants & { flow?: 'column' | 'column-reverse' }>;
-type ColumnComponent = <C extends ElementType = 'div'>(props: ColumnProps<C>) => ReactElement | null;
-
-export const Column: ColumnComponent = forwardRef(
-  <C extends ElementType = 'div'>(props: ColumnProps<C>, ref: PolyRef<C>) => {
-    return <Flex {...props} flow={props.flow || 'column'} ref={ref} />;
-  }
-);
+export const Column = forwardRef((props, ref) => {
+  return <Flex {...props} flow={props.flow || 'column'} ref={ref} />;
+}) as ForwardRefComponent<'div', FlexVariants & { flow?: 'column' | 'column-reverse' }>;
 
 const grid = css({
   variants: {
@@ -147,28 +127,15 @@ const grid = css({
 
 interface GridProps extends VariantProps<typeof grid> {}
 
-export const Grid = forwardRef(function Grid<C extends ElementType = 'div'>(
-  {
-    as,
-    display,
-    placeItems,
-    flow,
-    rows,
-    columns,
-    columnGap,
-    rowGap,
-    gap,
-    className,
-    ...props
-  }: PolyProps<C, GridProps>,
-  ref: PolyRef<C>
+export const Grid = forwardRef(function Grid(
+  { as: Component = 'div', display, placeItems, flow, rows, columns, columnGap, rowGap, gap, className, ...props },
+  ref
 ) {
-  const Component = as || 'div';
   return (
     <Component
       className={clsx(grid({ display, placeItems, flow, rows, columns, columnGap, rowGap, gap }), className)}
       {...props}
       ref={ref}
     />
   );
-});
+}) as ForwardRefComponent<'div', GridProps>;
diff --git a/src/lib/form-field/form-field.module.css b/src/lib/form-field/form-field.module.css
@@ -6,7 +6,7 @@
 
     &:has(.size--sm) {
       & :where(.label, .hint) {
-        padding-inline-start: theme('spacing.1');
+        padding-inline-start: theme('spacing.2');
       }
     }
     &:has(.size--md) {
@@ -103,9 +103,10 @@
     background-color: transparent;
     padding-inline: theme('spacing.3');
     border-radius: theme('borderRadius.md');
+    border: none;
 
     &:where(:hover) {
-      background-color: theme('colors.on-surface/0.1');
+      background-color: theme('colors.on-surface/0.05');
     }
     &:where(:active, :focus, :active, [aria-expanded='true'], [data-state='open']) {
       background-color: theme('colors.background');
@@ -115,22 +116,21 @@
 
   /* Size */
   .size--sm {
-    padding-inline: theme('spacing.1');
-    height: theme('spacing.6');
+    padding-inline: theme('spacing.2');
+    line-height: theme('spacing.8');
     @apply text-xs;
   }
   .size--md {
-    height: theme('spacing.10');
     padding-inline: theme('spacing.2');
+    line-height: theme('spacing.10');
     @apply text-sm;
   }
   .size--lg {
-    height: theme('spacing.12');
     padding-inline: theme('spacing.3');
+    line-height: theme('spacing.12');
     @apply text-lg;
   }
   .size--xl {
-    height: auto;
     padding-block: theme('spacing.1');
     padding-inline: theme('spacing.3');
     font-weight: 800;

diff --git a/src/lib/form-field/form-field.tsx b/src/lib/form-field/form-field.tsx
@@ -1,44 +1,32 @@
-import { ComponentProps, ElementType, forwardRef, useMemo } from 'react';
+import { ComponentProps, forwardRef, useMemo } from 'react';
 import { useId } from '@radix-ui/react-id';
 import { clsx } from 'clsx';
 
 import { classed as css, VariantProps } from '@tw-classed/core';
 import { Text } from '../text';
-import type { PolyProps, PolyRef } from '../utils/polymorphic';
+import type { ForwardRefComponent } from '../utils/polymorphic';
 import { Flex, FlexVariants } from '../flex/flex';
 
 import styles from './form-field.module.css';
 
-type FormFieldWrapperProps<C extends ElementType> = PolyProps<C, FlexVariants>;
-type FormFieldWrapperComponent = <C extends ElementType = 'div'>(
-  props: FormFieldWrapperProps<C>
-) => React.ReactElement | null;
+interface FormFieldProps extends FlexVariants {}
 
-export const FormFieldWrapper: FormFieldWrapperComponent = forwardRef(
-  <C extends ElementType = 'div'>(
-    {
-      cross = 'stretch',
-      flow = 'column',
-      display = 'inline',
-      gap = 'xs',
-      className,
-      ...props
-    }: FormFieldWrapperProps<C>,
-    ref: PolyRef<C>
-  ) => {
+export const FormFieldWrapper = forwardRef(
+  ({ cross = 'stretch', flow = 'column', display = 'inline', gap = 'xs', as = 'div', className, ...props }, ref) => {
     return (
       <Flex
         cross={cross}
         flow={flow}
         display={display}
         gap={gap}
         className={clsx(styles['form-field'], className)}
+        as={as}
         {...props}
         ref={ref}
       />
     );
   }
-);
+) as ForwardRefComponent<'div', FormFieldProps>;
 
 export type FormFieldValidity = {
   validity?: keyof typeof tonesMap;

diff --git a/src/lib/form-field/label.tsx b/src/lib/form-field/label.tsx
@@ -1,27 +1,23 @@
-import { ElementType, forwardRef, ReactElement, ReactNode } from 'react';
+import * as React from 'react';
 import { classed as css } from '@tw-classed/core';
 import { clsx } from 'clsx';
 import { Text } from '../text';
-import type { PolyProps, PolyRef } from '../utils/polymorphic';
+import type { ForwardRefComponent } from '../utils/polymorphic';
 import { flexCss, FlexVariants } from '../flex/flex';
 
 import styles from './form-field.module.css';
 
-export type LabelProps<C extends ElementType> = PolyProps<
-  C,
-  FlexVariants & {
-    label: ReactNode;
-    secondary?: ReactNode;
-    disabled?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-  }
->;
-export type LabelComponent = <C extends ElementType = 'label'>(props: LabelProps<C>) => ReactElement | null;
+export interface LabelProps extends FlexVariants {
+  label: React.ReactNode;
+  secondary?: React.ReactNode;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
 
-export const Label: LabelComponent = forwardRef(
-  <C extends ElementType = 'label'>(
+export const Label = React.forwardRef(
+  (
     {
-      as,
+      as: Component = 'label',
       label,
       secondary,
       disabled,
@@ -33,10 +29,9 @@ export const Label: LabelComponent = forwardRef(
       flow,
       wrap,
       ...props
-    }: LabelProps<C>,
-    ref: PolyRef<C>
+    },
+    ref
   ) => {
-    const Component = as || 'label';
     const textStyle = `label-${size}` as `label-${typeof size}`;
     return (
       <Component
@@ -54,6 +49,6 @@ export const Label: LabelComponent = forwardRef(
       </Component>
     );
   }
-);
+) as ForwardRefComponent<'label', LabelProps>;
 
 const labelCss = css(styles.label, flexCss);
diff --git a/src/lib/switch/switch.tsx b/src/lib/switch/switch.tsx
@@ -1,9 +1,8 @@
 import { ChangeEvent, ComponentProps, useMemo } from 'react';
 import { clsx } from 'clsx';
 
-import { FormFieldWrapper } from '../form-field/form-field';
 import { Label } from '../form-field';
-import type { FlexVariants } from '../flex/flex';
+import { Flex, FlexVariants } from '../flex/flex';
 
 import styles from './switch.module.css';
 
@@ -38,7 +37,7 @@ export const Switch = ({
   }, [onChange]);
 
   return (
-    <FormFieldWrapper
+    <Flex
       display={display}
       className={clsx(styles.label, className)}
       style={style}
@@ -61,6 +60,6 @@ export const Switch = ({
         <div className={styles.toggle} />
       </div>
       {label && <Label label={label} secondary={secondaryLabel} disabled={disabled} size="sm" as="span" />}
-    </FormFieldWrapper>
+    </Flex>
   );
 };
diff --git a/src/lib/tabs/tabs.module.css b/src/lib/tabs/tabs.module.css
@@ -83,7 +83,7 @@
     &:where(:not([aria-selected='true'])) {
       &:hover {
         & > .trigger-inner {
-          background-color: theme('colors.on-surface/0.1');
+          background-color: theme('colors.on-surface/0.05');
         }
       }
     }