@tempoxyz/ds 0.3.6 → 0.3.9

package/src/web/components/Spinner.tsx

@@ -8,8 +8,9 @@ import { style, variants } from '../zyzz.config.js'
  * An indeterminate loading indicator. Renders a Base UI `Progress.Root` with
  * `role="progressbar"`, no `aria-valuenow`, and the name `Loading`. The arc draws in
  * `currentColor` on a faint track, black in light mode and the text color in dark mode, and stops
- * rotating under `prefers-reduced-motion: reduce`. `elevated` places it on a 44px elevated tile
- * with a shadow.
+ * rotating under `prefers-reduced-motion: reduce`. `size` sets the ring to 16px or 40px, and the
+ * ring and its stroke scale together. `elevated` places a 16px ring on a 44px elevated tile with a
+ * shadow, whatever the `size`.
  *
  * - Pass `aria-label` to say what is loading, such as `Loading transactions`.
  * - Show it only after a short delay, so fast responses do not flash an indicator.
@@ -24,13 +25,13 @@ import { style, variants } from '../zyzz.config.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html | WCAG 2.2 Pause, Stop, Hide}
  */
 export function Spinner(props: Spinner.Props) {
-  const { className, elevated, vars, ...attributes } = props
+  const { className, elevated, size, vars, ...attributes } = props
 
   return (
     <BaseUi.Progress.Root
       aria-label="Loading"
       {...attributes}
-      {...styles.spinner({ className, elevated, style: props.style, vars })}
+      {...styles.spinner({ className, elevated, size, style: props.style, vars })}
       value={null}
     >
       <svg aria-hidden="true" {...styles.glyph()} fill="none" viewBox="0 0 16 16">
@@ -61,6 +62,8 @@ namespace styles {
       animation: `${rotation} 0.8s linear infinite !custom`,
       height: '100% !custom',
       width: '100% !custom',
+      // The stroke keeps its CSS width at every size, instead of scaling with the view box.
+      selectors: { '& > *': { vectorEffect: 'non-scaling-stroke !custom' } },
       '@media (prefers-reduced-motion: reduce)': { animation: 'none !custom' },
     },
     { id: 'tds/web/spinner/glyph' },
@@ -77,12 +80,12 @@ namespace styles {
         justifyContent: 'center',
         width: '16',
       },
-      defaultVariants: { elevated: false },
-      variants: {
-        // The tile is a 44px square around the 16px ring.
-        elevated: {
-          false: {},
-          true: {
+      // The designs draw the elevated tile only around the 16px ring, so the tile outranks `size`.
+      // The tile is a 44px square around the 16px ring.
+      compoundVariants: [
+        {
+          when: { elevated: true },
+          style: {
             backgroundColor: 'background.elevated',
             borderRadius: 'xs',
             // Web has no elevated shadow step, so this repeats the Mobile `shadow.elevated` layers, in
@@ -90,7 +93,27 @@ namespace styles {
             boxShadow: '0 12px 36px #0000000a, 0 8px 32px #0000000a, 0 4px 12px #0000000a !custom',
             height: '44',
             width: '44',
-            selectors: { '& > svg': { height: '16', width: '16' } },
+            selectors: {
+              '& > svg': { height: '16', width: '16' },
+              '& > svg > *': { strokeWidth: '1px !custom' },
+            },
+          },
+        },
+      ],
+      defaultVariants: { elevated: false, size: '16' },
+      variants: {
+        elevated: { false: {}, true: {} },
+        /**
+         * The width and height of the ring, in pixels. The 40px ring draws a 2.5px stroke.
+         *
+         * @default '16'
+         */
+        size: {
+          '16': {},
+          '40': {
+            height: '40',
+            width: '40',
+            selectors: { '& > svg > *': { strokeWidth: '2.5px !custom' } },
           },
         },
       },

package/src/web/components/SuccessHero.tsx

@@ -201,9 +201,8 @@ namespace styles {
     { id: 'tds/web/success-hero/body' },
   )
 
-  // Figma draws the caption at 50% white, which no variable holds.
   export const caption = style(
-    { color: '#ffffff80 !custom', margin: '0', typography: 'body.b3Strong' },
+    { color: 'overlay.content.tertiary', margin: '0', typography: 'body.b3Strong' },
     { id: 'tds/web/success-hero/caption' },
   )
 
@@ -219,9 +218,8 @@ namespace styles {
     { id: 'tds/web/success-hero/content' },
   )
 
-  // Figma draws the description at 60% white, which no variable holds.
   export const description = style(
-    { color: '#ffffff99 !custom', margin: '0', typography: 'body.b2' },
+    { color: 'overlay.content.secondary', margin: '0', typography: 'body.b2' },
     { id: 'tds/web/success-hero/description' },
   )
 

package/src/web/components/Surface.tsx

@@ -199,7 +199,7 @@ namespace styles {
     {
       base: {
         backgroundColor: 'background.elevated',
-        borderColor: 'line.secondary',
+        borderColor: 'line.card',
         borderStyle: 'solid',
         borderWidth: 'regular',
         boxSizing: 'border-box',

package/src/web/components/Switch.tsx

@@ -131,7 +131,7 @@ namespace styles {
           '&::after': { content: '"" !custom', inset: '-8', position: 'absolute' },
           '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
           '&:hover:not([data-disabled]):not([data-checked])': { backgroundColor: 'line.primary' },
-          '&[data-checked]': { backgroundColor: 'content.accent' },
+          '&[data-checked]': { backgroundColor: 'inverse.background.primary' },
           '&[data-checked]:hover:not([data-disabled])': { opacity: 'hover' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {

package/src/web/components/Tabs.tsx

@@ -212,8 +212,7 @@ namespace styles {
         position: 'relative',
       },
       // The pill sizes follow the Platform Tab: 48, 40 and 32px, padded by 32, 24 and 16px, with
-      // a label in Pilat at the size and weight of B2 Strong, or of B3 Strong for small. Each
-      // family follows its typography set, which sets the family of the body.
+      // an L2 label, or an L3 label for small.
       compoundVariants: [
         {
           when: { size: 'large', variant: 'pill' },
@@ -222,16 +221,13 @@ namespace styles {
               '& > [role="tab"]': {
                 height: '48',
                 paddingInline: '32',
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               '& > [role="tab"]:is([data-active], [data-active]:hover)': {
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               '& > [role="tab"] [data-reserve]': {
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
             },
           },
@@ -246,16 +242,13 @@ namespace styles {
             selectors: {
               '& > [role="tab"]': {
                 paddingInline: '16',
-                typography: 'body.b3Strong',
-                fontFamily: 'heading',
+                typography: 'label.l3',
               },
               '& > [role="tab"]:is([data-active], [data-active]:hover)': {
-                typography: 'body.b3Strong',
-                fontFamily: 'heading',
+                typography: 'label.l3',
               },
               '& > [role="tab"] [data-reserve]': {
-                typography: 'body.b3Strong',
-                fontFamily: 'heading',
+                typography: 'label.l3',
               },
             },
           },
@@ -366,16 +359,13 @@ namespace styles {
                 minWidth: '5rem !custom',
                 outlineOffset: '2',
                 transitionProperty: 'background-color, color, outline-color, scale',
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               '& > [role="tab"]:is([data-active], [data-active]:hover)': {
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               '& > [role="tab"] [data-reserve]': {
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               // The fill marks the active tab, so the list hides the underline indicator.
               '& > span:not([role="tab"])': { display: 'none' },

package/src/web/components/Toast.tsx

@@ -284,10 +284,9 @@ namespace styles {
     { id: 'tds/web/toast/content' },
   )
 
-  // The title and description set Pilat at the size of their typography set, so the family
-  // follows the set, which sets the family of the body.
+  // The title and description set their Pilat labels through the label typography sets.
   export const description = style(
-    { color: 'content.secondary', margin: '0', typography: 'body.b3Strong', fontFamily: 'heading' },
+    { color: 'content.secondary', margin: '0', typography: 'label.l3' },
     { id: 'tds/web/toast/description' },
   )
 
@@ -309,7 +308,7 @@ namespace styles {
 
   export const root = style(
     {
-      backgroundColor: 'background.elevated',
+      backgroundColor: 'background.menu',
       borderRadius: 'sm',
       boxShadow: 'large',
       boxSizing: 'border-box',
@@ -328,6 +327,19 @@ namespace styles {
       userSelect: 'none',
       zIndex: 'calc(1000 - var(--toast-index)) !custom',
       selectors: {
+        // The 1px card line is inset, so it adds nothing to the height that Base UI measures.
+        '&::before': {
+          borderColor: 'line.card',
+          borderRadius: 'inherit !custom',
+          borderStyle: 'solid !custom',
+          borderWidth: 'regular',
+          boxSizing: 'border-box',
+          content: '"" !custom',
+          cornerShape: 'inherit !custom',
+          inset: '0',
+          pointerEvents: 'none',
+          position: 'absolute',
+        },
         '&::after': {
           content: '"" !custom',
           height: '16',
@@ -367,7 +379,7 @@ namespace styles {
   )
 
   export const title = style(
-    { color: 'content.primary', margin: '0', typography: 'body.b2Strong', fontFamily: 'heading' },
+    { color: 'content.primary', margin: '0', typography: 'label.l2' },
     { id: 'tds/web/toast/title' },
   )
 

package/src/web/components/Token.tsx

@@ -82,11 +82,9 @@ namespace styles {
   export const token = style(
     {
       alignItems: 'center',
-      backgroundColor: 'background.elevated',
-      borderColor: 'line.primary',
+      backgroundColor: 'container.selected',
+      border: 'none !custom',
       borderRadius: 'full',
-      borderStyle: 'solid',
-      borderWidth: 'regular',
       boxSizing: 'border-box',
       color: 'content.primary',
       columnGap: '8',

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

@@ -1,5 +1,5 @@
 /**
- * Holds the `SidebarMenu.Item` entries that `AppShell` repeats in its bottom bar below 768px. The
+ * Holds the `SidebarMenu.Item` entries that `AppShell` repeats in its bottom bar. The
  * store lives outside React state, so an item that registers on every render updates the bar
  * without rendering the shell again.
  * @module

package/src/web/index.ts

@@ -10,6 +10,7 @@ export { AssetChip } from './components/AssetChip.js'
 export { Autocomplete } from './components/Autocomplete.js'
 export { Avatar } from './components/Avatar.js'
 export { Badge } from './components/Badge.js'
+export { BadgedLogo } from './components/BadgedLogo.js'
 export { Banner } from './components/Banner.js'
 export { BarChart } from './components/BarChart.js'
 export { Breadcrumbs } from './components/Breadcrumbs.js'

package/src/web/vars.ts

@@ -384,12 +384,16 @@ export const variables = Vars.define(
           },
         },
       },
+      // Dark mode lifts the page to 92% black, and the elevated and menu fills step lighter from
+      // it, at the Platform primitive solid steps 090 and 087, which TDS 1.0 Core has no step for.
       background: {
-        elevated: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
-        primary: { dark: vars.color.neutral['100'], light: vars.color.neutral['004'] },
+        elevated: { dark: '#1a1a1a', light: vars.color.neutral['000'] },
+        menu: { dark: '#222', light: vars.color.neutral['000'] },
+        primary: { dark: vars.color.neutral['092'], light: vars.color.neutral['004'] },
         secondary: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
-        // The layouts fill the sidebar and the page header a step lighter than the page.
-        sidebar: { dark: vars.color.neutral['096'], light: '#fafafa' },
+        // The layouts fill the sidebar a step lighter than the page in light mode, and with the page
+        // in dark mode.
+        sidebar: { dark: vars.color.neutral['092'], light: '#fafafa' },
       },
       border: {
         focus: { dark: vars.color.neutral.tint['052'], light: vars.color.neutral.shade['040'] },
@@ -457,6 +461,8 @@ export const variables = Vars.define(
       },
       container: {
         accent: vars.color.accent.alpha.regular.blue['100'],
+        // The quiet fill of inputs and other controls.
+        control: { dark: vars.color.neutral.tint['004'], light: vars.color.neutral.shade['004'] },
         negative: {
           dark: vars.color.accent.alpha.regular.red['200'],
           light: vars.color.accent.alpha.regular.red['100'],
@@ -468,6 +474,10 @@ export const variables = Vars.define(
         // Dark mode fills the regular container at 8% white, dimmer than Figma's 12%, so badges and
         // other soft fills recede on the dark page.
         regular: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['004'] },
+        // The fill of a selected option, such as a picker row.
+        selected: { dark: vars.color.neutral.tint['012'], light: vars.color.neutral['000'] },
+        // An opaque fill at the Platform primitive solid steps 079 and 010.
+        solid: { dark: '#353535', light: '#e6e6e6' },
         strong: { dark: vars.color.neutral.tint['016'], light: vars.color.neutral.shade['008'] },
         special: 'rgb(126 89 228 / 0.08)',
         subtle: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['003'] },
@@ -500,6 +510,8 @@ export const variables = Vars.define(
         },
       },
       line: {
+        // The border of a card, at 5% white in dark mode.
+        card: { dark: '#ffffff0d', light: vars.color.neutral.shade['008'] },
         primary: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['016'] },
         // Dark mode draws the secondary line at 8% white, dimmer than Figma's 16%, so the borders
         // and dividers recede on the dark fills.
@@ -508,6 +520,8 @@ export const variables = Vars.define(
       },
       material: {
         regular: { dark: vars.color.neutral.tint['048'], light: vars.color.neutral.shade['040'] },
+        // The grain over a material, at 7%.
+        texture: { dark: '#ffffff12', light: '#00000012' },
         thick: { dark: vars.color.neutral.tint['064'], light: vars.color.neutral.shade['060'] },
         thin: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['020'] },
         ultrathick: {
@@ -523,13 +537,19 @@ export const variables = Vars.define(
           tertiary: { fill: { hover: vars.color.neutral.tint['012'] } },
         },
         container: { regular: '#70707052' },
-        content: { primary: vars.color.neutral['000'] },
+        content: {
+          primary: vars.color.neutral['000'],
+          secondary: vars.color.neutral.tint['064'],
+          tertiary: vars.color.neutral.tint['052'],
+        },
       },
       scrim: {
         regular: vars.color.neutral.shade['016'],
         strong: vars.color.neutral.shade['032'],
       },
       shadow: {
+        // The shadow under elevated fills, such as menus and modals.
+        elevated: { dark: '#0000003d', light: vars.color.neutral.shade['012'] },
         primary: { dark: vars.color.neutral.shade['032'], light: vars.color.neutral.shade['008'] },
         secondary: {
           dark: vars.color.neutral.shade['016'],
@@ -663,6 +683,24 @@ export const variables = Vars.define(
           lineHeight: '20.7px',
         },
       },
+      // Labels set Pilat at the size and weight of B2 Strong and B3 Strong, tracked by 1% as the
+      // Platform Tab and Toast draw them.
+      label: {
+        l2: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '14px',
+          fontWeight: 500,
+          letterSpacing: '.14px',
+          lineHeight: '20px',
+        },
+        l3: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '12px',
+          fontWeight: 500,
+          letterSpacing: '.15px',
+          lineHeight: '16px',
+        },
+      },
       mono: {
         m1: {
           fontFamily: vars.fontFamily.mono,