@tempoxyz/ds 0.2.2 → 0.2.4

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

@@ -93,13 +93,12 @@ export namespace styles {
         color: 'foreground',
         display: 'flex',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
-        transitionDuration: '160ms !custom',
-        transitionProperty:
-          'background-color, border-color, opacity, outline-color, transform !custom',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, border-color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
         selectors: {
           // The invalid ring fades in on an inset border, so focus changes only the outline color.
@@ -107,13 +106,13 @@ export namespace styles {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2px !custom',
+            borderWidth: '2',
             boxSizing: 'border-box',
             content: '"" !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
-            transitionDuration: '160ms !custom',
+            transitionDuration: '160',
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
@@ -124,15 +123,15 @@ export namespace styles {
             width: '100% !custom',
           },
           '&:is(button):active:not(:disabled, [data-disabled])': {
-            transform: 'scale(0.98) !custom',
-            transitionDuration: '100ms !custom',
+            scale: 'press',
+            transitionDuration: '100',
           },
           '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
             backgroundColor: 'grayAlpha.200',
           },
           '&:disabled, &[data-disabled], &:has(input:disabled)': {
             cursor: 'default',
-            opacity: '0.4 !custom',
+            opacity: 'disabled',
           },
           '&:focus-visible, &:has(input:focus-visible)': { outlineColor: 'blue.700' },
           // Success and invalid draw one ring: inset at rest, and the outline instead while focused.
@@ -185,7 +184,7 @@ export namespace styles {
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
           selectors: {
-            '&:active': { transform: 'none !custom' },
+            '&:active': { scale: 'none !custom' },
             '&[data-entered]': { animation: 'none !custom' },
           },
         },
@@ -209,7 +208,7 @@ export namespace styles {
           },
           small: {
             borderRadius: '8',
-            columnGap: '6px !custom',
+            columnGap: '6',
             height: '32',
             paddingInline: '12',
             typography: 'copy.13',
@@ -222,7 +221,7 @@ export namespace styles {
             borderColor: 'grayAlpha.200',
             borderRadius: '12',
             borderStyle: 'solid',
-            borderWidth: '1px !custom',
+            borderWidth: '1',
             height: 'auto !custom',
             minHeight: '56',
             paddingBlock: '16',

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

@@ -34,7 +34,7 @@ export namespace styles {
       flexShrink: '0 !custom',
       fontSize: '16',
       justifyContent: 'center',
-      transitionDuration: '160ms !custom',
+      transitionDuration: '160',
       transitionProperty: 'opacity, transform, visibility !custom',
       transitionTimingFunction: 'snappy',
       selectors: {
@@ -55,7 +55,7 @@ export namespace styles {
     {
       alignItems: 'center',
       // Concentric with the popup: its 16px radius minus its 6px padding.
-      borderRadius: '10px !custom',
+      borderRadius: '10',
       boxSizing: 'border-box',
       color: 'foreground',
       columnGap: '12',
@@ -65,13 +65,13 @@ export namespace styles {
       outline: 'none !custom',
       paddingBlock: '8',
       paddingInline: '16',
-      transitionDuration: '120ms !custom',
+      transitionDuration: '120',
       transitionProperty: 'background-color, opacity !custom',
       transitionTimingFunction: 'snappy',
       typography: 'label.14.strong',
       userSelect: 'none',
       selectors: {
-        '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom', pointerEvents: 'none' },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled', pointerEvents: 'none' },
         '&[data-highlighted]': { backgroundColor: 'grayAlpha.100' },
       },
     },
@@ -86,7 +86,7 @@ export namespace styles {
   export const popup = variants(
     {
       base: {
-        backgroundColor: 'light-dark(#fff, #1f1e1e) !custom',
+        backgroundColor: 'background.raised',
         borderRadius: '16',
         boxShadow: 'popover',
         boxSizing: 'border-box',
@@ -97,26 +97,29 @@ export namespace styles {
         outline: 'none !custom',
         overflowY: 'auto',
         overscrollBehavior: 'contain !custom',
-        padding: '6px !custom',
+        padding: '6',
         transformOrigin: 'var(--transform-origin) !custom',
-        transitionDuration: '240ms !custom',
-        transitionProperty: 'opacity, transform !custom',
+        transitionDuration: '240',
+        transitionProperty: 'opacity, scale !custom',
         transitionTimingFunction: 'spring',
         typography: 'copy.14',
         selectors: {
           '&[data-ending-style]': {
             opacity: '0 !custom',
-            transform: 'scale(0.96) !custom',
-            transitionDuration: '150ms !custom',
+            scale: 'enter',
+            transitionDuration: '150',
             transitionTimingFunction: 'snappy',
           },
-          '&[data-starting-style]': { opacity: '0 !custom', transform: 'scale(0.96) !custom' },
+          '&[data-starting-style]': {
+            opacity: '0 !custom',
+            scale: 'enter',
+          },
         },
         '@media (prefers-reduced-motion: reduce)': {
-          transitionDuration: '150ms !custom',
+          transitionDuration: '150',
           transitionProperty: 'opacity !custom',
           selectors: {
-            '&[data-ending-style], &[data-starting-style]': { transform: 'none !custom' },
+            '&[data-ending-style], &[data-starting-style]': { scale: 'none !custom' },
           },
         },
       },
@@ -143,7 +146,7 @@ export namespace styles {
     { id: 'tds/web/listbox/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/listbox/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/listbox/positioner' })
 
   export const prefix = style(
     { alignItems: 'center', display: 'inline-flex', flexShrink: '0 !custom' },

package/src/web/vars.ts

@@ -29,6 +29,10 @@ export const variables = Vars.define(
       '40': '40px',
       '64': '64px',
     },
+    borderWidth: {
+      '1': '1px',
+      '2': '2px',
+    },
     breakpoint: {
       '640': '40rem',
       '768': '48rem',
@@ -53,9 +57,19 @@ export const variables = Vars.define(
         '1000': { dark: '#fff1e8', light: '#4d2101' },
       },
       // Lifts surfaces off the near-black page in dark mode, so cards and popups stay distinct.
+      // `raised` fills popups and dialogs above surfaces. `indicator` fills the selected segment of a
+      // segmented control. The status fills tint callouts with step 300 in light mode and step 100 in
+      // dark mode.
       background: {
+        chip: { dark: '#ffffff21', light: '#0000000d' },
+        indicator: { dark: 'rgb(255 255 255 / 0.16)', light: '#fff' },
+        info: { dark: '#161b29', light: '#e6eefe' },
+        negative: { dark: '#2a1410', light: '#ffe6e0' },
+        positive: { dark: '#052315', light: '#d3f8df' },
         primary: { dark: '#100f0f', light: '#f5f5f5' },
+        raised: { dark: '#1f1e1e', light: '#fff' },
         surface: { dark: '#1a1919', light: '#fff' },
+        warning: { dark: '#2d1504', light: '#ffede2' },
       },
       black: '#000',
       blue: {
@@ -218,6 +232,20 @@ export const variables = Vars.define(
       '1': 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
       '4': 'inset 0 2px 4px rgb(0 0 0 / 0.05)',
     },
+    // `disabled` dims an unavailable control, and `hover` dims a filled control under the pointer.
+    opacity: {
+      disabled: 0.4,
+      hover: 0.86,
+    },
+    outlineOffset: {
+      '-2': '-2px',
+      '0': '0px',
+      '2': '2px',
+    },
+    outlineWidth: {
+      '1': '1px',
+      '2': '2px',
+    },
     perspective: {
       '100': '100px',
       '300': '300px',
@@ -227,16 +255,23 @@ export const variables = Vars.define(
     },
     // Corners top out at 16px. `full` rounds pills and circles.
     radius: {
+      '0': '0rem',
       '2': '0.125rem',
       '4': '0.25rem',
       '6': '0.375rem',
       '8': '0.5rem',
+      '10': '0.625rem',
       '12': '0.75rem',
       '16': '1rem',
       full: '9999px',
     },
-    // Shadow keys name the largest blur radius in px. `inner`, `popover`, and `raised` keep their role
-    // names.
+    // Shadow keys name the largest blur radius in px. `inner`, `modal`, `popover`, `raised`, and
+    // `thumb` keep their role names.
+    // `enter` is the start scale of a popup transition, and `press` shrinks a pressed control.
+    scale: {
+      enter: 0.96,
+      press: 0.98,
+    },
     shadow: {
       '0': '0 1px rgb(0 0 0 / 0.05)',
       '2': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
@@ -246,28 +281,50 @@ export const variables = Vars.define(
       '25': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
       '50': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
       inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+      modal: '0 32px 64px -16px rgb(0 0 0 / 0.28)',
       popover:
         '0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)), 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.16)',
       raised: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)',
+      thumb:
+        '0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12)',
     },
     // Keys are px at the default 16px root. Values stay in rem, so the scale follows the root size.
+    // Negative keys pull an element into its container's padding.
     spacing: {
+      '-24': '-1.5rem',
+      '-20': '-1.25rem',
+      '-16': '-1rem',
+      '-14': '-0.875rem',
+      '-12': '-0.75rem',
+      '-10': '-0.625rem',
+      '-8': '-0.5rem',
+      '-6': '-0.375rem',
+      '-4': '-0.25rem',
       '0': '0rem',
       '1': '1px',
+      '2': '0.125rem',
       '4': '0.25rem',
+      '6': '0.375rem',
       '8': '0.5rem',
+      '10': '0.625rem',
       '12': '0.75rem',
+      '14': '0.875rem',
       '16': '1rem',
+      '18': '1.125rem',
       '20': '1.25rem',
+      '22': '1.375rem',
       '24': '1.5rem',
       '28': '1.75rem',
+      '30': '1.875rem',
       '32': '2rem',
       '36': '2.25rem',
+      '38': '2.375rem',
       '40': '2.5rem',
       '44': '2.75rem',
       '48': '3rem',
       '56': '3.5rem',
       '64': '4rem',
+      '68': '4.25rem',
       '80': '5rem',
       '96': '6rem',
       '112': '7rem',
@@ -291,6 +348,21 @@ export const variables = Vars.define(
       '4': '0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)',
       '8': '0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)',
     },
+    // Keys are durations in ms.
+    transitionDuration: {
+      '0': '0ms',
+      '100': '100ms',
+      '120': '120ms',
+      '140': '140ms',
+      '150': '150ms',
+      '160': '160ms',
+      '180': '180ms',
+      '200': '200ms',
+      '220': '220ms',
+      '240': '240ms',
+      '280': '280ms',
+      '320': '320ms',
+    },
     typography: {
       button: {
         '12': {
@@ -653,6 +725,13 @@ export const variables = Vars.define(
         },
       },
     },
+    // Layers from the app shell overlay up to toasts.
+    zIndex: {
+      modal: 60,
+      overlay: 40,
+      popover: 50,
+      toast: 1000,
+    },
   },
   { id: 'tds/web/variables' },
 )