@tempoxyz/ds 0.2.0 → 0.2.2

package/src/web/components/Pagination.tsx

@@ -216,7 +216,7 @@ namespace styles {
           '&:active:is(a)': { transform: 'scale(0.96) !custom' },
           '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
           '&:hover:is(a)': { backgroundColor: 'grayAlpha.100' },
-          '&[data-ellipsis]': { color: 'gray.700', cursor: 'default' },
+          '&[data-ellipsis]': { color: 'gray.900', cursor: 'default' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, color, outline-color',

package/src/web/components/Rows.tsx

@@ -344,8 +344,7 @@ namespace styles {
   export const label = variants(
     {
       base: {
-        // gray.800 in light mode, where gray.900 reads close to the value text, and gray.900 in dark.
-        color: 'light-dark(#7d7d7d, #bcbbbb) !custom',
+        color: 'gray.900',
         flexShrink: '0 !custom',
         marginInlineEnd: 'auto !custom',
       },

package/src/web/components/Select.tsx

@@ -321,7 +321,7 @@ namespace styles {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       selectors: {
-        '&[data-placeholder]': { color: 'gray.700' },
+        '&[data-placeholder]': { color: 'gray.900' },
         '[data-variant="card"] > &': {
           typography: 'heading.24',
         },

package/src/web/components/Snippet.tsx

@@ -70,7 +70,7 @@ export namespace Snippet {
 
 namespace styles {
   export const prompt = style(
-    { color: 'gray.700', flexShrink: '0 !custom', userSelect: 'none' },
+    { color: 'gray.900', flexShrink: '0 !custom', userSelect: 'none' },
     { id: 'tds/web/snippet/prompt' },
   )
 

package/src/web/components/Table.tsx

@@ -95,7 +95,10 @@ export namespace Table {
     export type Props = ComponentPropsWithRef<'thead'> & zyzz.Props.Variants<typeof styles.head>
   }
 
-  /** A column header with `scope="col"` by default. Pass `scope="row"` for a row header. */
+  /**
+   * A column header with `scope="col"` by default. Pass `scope="row"` for a row header. Its text
+   * renders in the `label.14.strong` set, heavier than the `copy.14` body cells.
+   */
   export function HeaderCell(props: HeaderCell.Props) {
     const { className, justify, vars, ...attributes } = props
 
@@ -224,10 +227,11 @@ namespace styles {
   export const headerCell = variants(
     {
       base: {
-        color: 'gray.700',
+        // Body cells share gray.900, the lightest gray step at 4.5:1, so weight separates the header.
+        color: 'gray.900',
         paddingBlock: '12',
         paddingInline: '16',
-        typography: 'copy.14',
+        typography: 'label.14.strong',
       },
       defaultVariants: { justify: 'start' },
       variants: {

package/src/web/components/Textarea.tsx

@@ -77,7 +77,7 @@ namespace styles {
           '&:focus-visible': { outlineColor: 'blue.700' },
           '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' },
           '&::placeholder': {
-            color: 'grayAlpha.700',
+            color: 'grayAlpha.900',
             transitionDuration: '160ms !custom',
             transitionProperty: 'opacity !custom',
             transitionTimingFunction: 'snappy',

package/src/web/components/Toast.tsx

@@ -1,7 +1,11 @@
 import * as BaseUi from '@base-ui/react/toast'
 import type { ComponentPropsWithRef, ReactNode } from 'react'
 import type * as zyzz from 'zyzz'
-import { AlertCircle, AlertTriangle, CheckCircle, Close, InfoCircle } from '../icons/index.js'
+import { AlertCircle } from '../icons/AlertCircle.js'
+import { AlertTriangle } from '../icons/AlertTriangle.js'
+import { CheckCircle } from '../icons/CheckCircle.js'
+import { Close } from '../icons/Close.js'
+import { InfoCircle } from '../icons/InfoCircle.js'
 import { style, variants } from '../zyzz.config.js'
 
 const icons = {

package/src/web/components/internal/Field.ts

@@ -198,7 +198,7 @@ export namespace styles {
       padding: '0',
       // A zero width drops the input's intrinsic size from the field's min-content width.
       width: '0',
-      selectors: { '&::placeholder': { color: 'gray.700' } },
+      selectors: { '&::placeholder': { color: 'gray.900' } },
     },
     { id: 'tds/web/select-field/input' },
   )

package/src/web/components/internal/InputGroup.ts

@@ -1,4 +1,4 @@
-import { type RefObject, createContext, useLayoutEffect, useRef } from 'react'
+import { createContext, type RefObject, useLayoutEffect, useRef } from 'react'
 import { keyframes } from 'zyzz/web'
 import { variants, vars } from '../../zyzz.config.js'
 

package/src/web/components/internal/Listbox.ts

@@ -3,7 +3,7 @@ import { style, variants } from '../../zyzz.config.js'
 export namespace styles {
   export const empty = style(
     {
-      color: 'gray.700',
+      color: 'gray.900',
       paddingBlock: '12',
       paddingInline: '16',
       typography: 'copy.14',
@@ -19,7 +19,7 @@ export namespace styles {
 
   export const groupLabel = style(
     {
-      color: 'gray.700',
+      color: 'gray.900',
       paddingBlock: '8',
       paddingInline: '16',
       typography: 'label.12',

package/src/web/icons/BadgeX.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useId, type ComponentPropsWithRef } from 'react'
+import { type ComponentPropsWithRef, useId } from 'react'
 
 export function BadgeX(props: BadgeX.Props) {
   const id = useId()

package/src/web/icons/InfinityIcon.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useId, type ComponentPropsWithRef } from 'react'
+import { type ComponentPropsWithRef, useId } from 'react'
 
 export function InfinityIcon(props: InfinityIcon.Props) {
   const id = useId()

package/src/web/icons/LightMode.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useId, type ComponentPropsWithRef } from 'react'
+import { type ComponentPropsWithRef, useId } from 'react'
 
 export function LightMode(props: LightMode.Props) {
   const id = useId()

package/src/web/icons/OctagonAlert.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useId, type ComponentPropsWithRef } from 'react'
+import { type ComponentPropsWithRef, useId } from 'react'
 
 export function OctagonAlert(props: OctagonAlert.Props) {
   const id = useId()

package/src/web/icons/Unlink.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useId, type ComponentPropsWithRef } from 'react'
+import { type ComponentPropsWithRef, useId } from 'react'
 
 export function Unlink(props: Unlink.Props) {
   const id = useId()