Updates.

homebound-team · Jun 3, 2024 · fef8674 · fef8674
1 parent 0ac9a11
commit fef8674
Show file tree

Hide file tree

Showing 62 changed files with 157 additions and 157 deletions.
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -80,7 +80,7 @@ export function Accordion<X extends Only<AccordionXss, X>>(props: AccordionProps
     <div
       {...testIds.container}
       css={{
-        ...Css.bGray300.if(topBorder).bt.if(bottomBorder).bb.$,
+        ...Css.bcGray300.if(topBorder).bt.if(bottomBorder).bb.$,
         ...(size ? Css.wPx(accordionSizes[size]).$ : {}),
       }}
     >
@@ -102,7 +102,7 @@ export function Accordion<X extends Only<AccordionXss, X>>(props: AccordionProps
           if (setExpandedIndex) setExpandedIndex(index);
         }}
       >
-        <span css={Css.fg1.tl.$}>{title}</span>
+        <span css={Css.fg1.tal.$}>{title}</span>
         <span
           css={{
             ...Css.fs0.$,
@@ -117,7 +117,7 @@ export function Accordion<X extends Only<AccordionXss, X>>(props: AccordionProps
         {...testIds.details}
         id={id}
         aria-hidden={!expanded}
-        css={Css.overflowHidden.h(contentHeight).add("transition", "height 250ms ease-in-out").$}
+        css={Css.oh.h(contentHeight).add("transition", "height 250ms ease-in-out").$}
       >
         {expanded && (
           <div css={Css.px2.pb2.pt1.if(omitPadding).p0.$} ref={contentRef} {...testIds.content}>

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -17,7 +17,7 @@ export function Avatar({ src, name, size = "md", showName = false, disableToolti
   const px = sizeToPixel[size];
   const [showFallback, setShowFallback] = useState(src === undefined);
   // Define min-width as well as width to prevent the image from shrinking when displayed within a flex-child that allows shrinking.
-  const styles = Css.br100.wPx(px).hPx(px).mwPx(px).overflowHidden.$;
+  const styles = Css.br100.wPx(px).hPx(px).mwPx(px).oh.$;
 
   const img = showFallback ? (
     <div css={{ ...styles, ...Css[sizeToFallbackTypeScale[size]].bgGray400.gray100.df.aic.jcc.$ }} {...tid}>

diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx
@@ -22,7 +22,7 @@ export function AvatarGroup(props: AvatarGroupProps) {
           <div
             key={avatar.src ?? idx}
             css={
-              Css.br100.ba.bWhite
+              Css.br100.ba.bcWhite
                 .add("borderWidth", "3px")
                 .if(idx > 0)
                 .mlPx(-1 * sizeToOverlap[size]).$

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -149,7 +149,7 @@ const variantStyles: (contrast: boolean) => Record<
   },
 
   secondary: {
-    baseStyles: Css.bgWhite.bGray300.bw1.ba.gray800.$,
+    baseStyles: Css.bgWhite.bcGray300.bw1.ba.gray800.$,
     hoverStyles: Css.bgGray100.if(contrast).bgGray300.$,
     pressedStyles: Css.bgGray200.if(contrast).bgGray100.$,
     disabledStyles: Css.bgWhite.gray400.$,

diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
@@ -67,7 +67,7 @@ function GroupButton(props: GroupButtonProps) {
             {...hoverProps}
             css={{
               ...Css.buttonBase.px2.br0.h100.$,
-              "&:disabled": Css.gray400.cursorNotAllowed.bGray300.$,
+              "&:disabled": Css.gray400.cursorNotAllowed.bcGray300.$,
               ...(isFocusVisible ? defaultFocusRingStyles : {}),
               ...(active ? activeStyles : {}),
               ...(isPressed ? pressedStyles : isHovered ? hoverStyles : {}),
@@ -93,7 +93,7 @@ const defaultFocusRingStyles = Css.relative.z2.bshFocus.$;
 
 function getButtonStyles() {
   return {
-    ...Css.z1.bgWhite.bGray300.bw1.ba.gray900.br0.overflowHidden.$,
+    ...Css.z1.bgWhite.bcGray300.bw1.ba.gray900.br0.oh.$,
     // Our first button should have a rounded left border
     "&:first-of-type": Css.add("borderRadius", "4px 0 0 4px").$,
     // Our last button should have a rounded right border

diff --git a/src/components/ButtonModal.stories.tsx b/src/components/ButtonModal.stories.tsx
@@ -83,7 +83,7 @@ export function ButtonModalWithChipAndTooltip() {
       content={
         <Chip
           text="Chip text content, hover me"
-          title={<p css={Css.tc.$}>Obiligation document must besigned and all templates set to active</p>}
+          title={<p css={Css.tac.$}>Obiligation document must besigned and all templates set to active</p>}
         />
       }
       trigger={{ label: "Button Modal trigger" }}

diff --git a/src/components/DnDGrid/DnDGrid.stories.tsx b/src/components/DnDGrid/DnDGrid.stories.tsx
@@ -28,11 +28,11 @@ export function Example() {
       onReorder={(items) => console.log("onReorder:", { items })}
       gridStyles={Css.gtc(`repeat(4, minmax(280px, 1fr))`).add("gridAutoRows", "120px").gap2.$}
     >
-      <div css={Css.br8.bgGray100.ba.bGray400.df.aic.jcc.baseSb.$}>Non-Sortable Grid Item</div>
+      <div css={Css.br8.bgGray100.ba.bcGray400.df.aic.jcc.baseSb.$}>Non-Sortable Grid Item</div>
       {gridItems.map((item) => (
         <DraggableItem key={item.id} item={item} />
       ))}
-      <div css={Css.br8.bgGray100.ba.bGray400.df.aic.jcc.baseSb.$}>Non-Sortable Grid Item</div>
+      <div css={Css.br8.bgGray100.ba.bcGray400.df.aic.jcc.baseSb.$}>Non-Sortable Grid Item</div>
     </DnDGrid>
   );
 }
@@ -44,7 +44,7 @@ function DraggableItem({ item }: { item: GridItem }) {
     <div
       ref={itemRef}
       {...dragItemProps}
-      css={Css.relative.br8.ba.bGray400.bgWhite.p1.gc(`span ${item.colSpan}`).gr(`span ${item.rowSpan}`).$}
+      css={Css.relative.br8.ba.bcGray400.bgWhite.p1.gc(`span ${item.colSpan}`).gr(`span ${item.rowSpan}`).$}
     >
       <div css={Css.absolute.top2.right2.$}>
         <DnDGridItemHandle dragHandleProps={dragHandleProps} />

diff --git a/src/components/DnDGrid/DnDGridItemHandle.tsx b/src/components/DnDGrid/DnDGridItemHandle.tsx
@@ -23,8 +23,8 @@ export function DnDGridItemHandle(props: DnDGridItemHandleProps) {
     <button
       css={{
         ...(compact ? iconButtonCompact : iconButtonNormal),
-        ...Css.cursor("grab").bTransparent.bsSolid.bgTransparent.outline0.dif.aic.jcc.transition.if(isFocusVisible)
-          .bBlue700.$,
+        ...Css.cursor("grab").bcTransparent.bss.bgTransparent.outline0.dif.aic.jcc.transition.if(isFocusVisible)
+          .bcBlue700.$,
         ...(isHovered && Css.bgGray200.$),
       }}
       {...mergeProps(dragHandleProps, focusProps, hoverProps)}

diff --git a/src/components/Filters/FilterModal.tsx b/src/components/Filters/FilterModal.tsx
@@ -66,7 +66,7 @@ export function FilterModal<F>(props: FilterModalProps<F>) {
 // Wraps a filter component to be displayed in the Filter Modal
 export function ModalFilterItem({ label, children }: { label?: string; children: ReactNode }) {
   return (
-    <div css={Css.mb4.if(!label).bt.bGray200.$}>
+    <div css={Css.mb4.if(!label).bt.bcGray200.$}>
       {label && <h2 css={Css.baseMd.mb2.$}>{label}</h2>}
       <div css={Css.if(!label).pt3.$}>{children}</div>
     </div>

diff --git a/src/components/Filters/Filters.stories.tsx b/src/components/Filters/Filters.stories.tsx
@@ -208,7 +208,7 @@ function TestFilterPage({ vertical = false, numberOfInlineFilters = 4 }) {
       }}
     >
       <div>
-        <div css={Css.df.fdc.gap2.if(!!vertical).wPx(360).p2.bgGray100.br.bGray600.$}>
+        <div css={Css.df.fdc.gap2.if(!!vertical).wPx(360).p2.bgGray100.br.bcGray600.$}>
           <h1 css={Css.lg.$}>Filters</h1>
           <Filters<ProjectFilter>
             filter={filter}

diff --git a/src/components/Grid/ResponsiveGrid.stories.tsx b/src/components/Grid/ResponsiveGrid.stories.tsx
@@ -39,7 +39,7 @@ export function Example() {
 
   return (
     <PresentationProvider fieldProps={{ labelStyle: "inline", compact: true }}>
-      <div css={Css.df.gap3.aic.jcfs.pb2.mb2.bb.bGray400.$}>
+      <div css={Css.df.gap3.aic.jcfs.pb2.mb2.bb.bcGray400.$}>
         <NumberField label="Columns" value={columns} onChange={(v) => v && setColumns(v)} />
         <NumberField label="Min Column Width" value={minColumnWidth} onChange={(v) => v && setMinColumnWidth(v)} />
         <NumberField label="Gap" value={gap} onChange={(v) => v && setGap(v)} />
@@ -54,7 +54,7 @@ export function Example() {
         />
       </div>
       <div css={Css.df.$}>
-        <div css={Css.add("resize", "horizontal").mwPx(120).hPx(150).bshBasic.ba.bGray400.p1.overflowAuto.mr2.$}>
+        <div css={Css.add("resize", "horizontal").mwPx(120).hPx(150).bshBasic.ba.bcGray400.p1.oa.mr2.$}>
           Resize Me
         </div>
         {sortable ? (
@@ -91,7 +91,7 @@ function ResizableGridItem({ item, sortable }: { item: GridItem; sortable: boole
     <div
       ref={ref}
       css={{
-        ...Css.br8.ba.bshBasic.bGray400.bgWhite.p2.df.aic.fdc.sm.gr(`span ${rowSpan}`).if(!stretch).asfs.$,
+        ...Css.br8.ba.bshBasic.bcGray400.bgWhite.p2.df.aic.fdc.sm.gr(`span ${rowSpan}`).if(!stretch).asfs.$,
         ...(pin ? Css.sticky.top0.$ : {}),
       }}
       {...gridItemProps}
@@ -198,7 +198,7 @@ const { dragItemProps, dragHandleProps } = useDnDGridItem({ id: item.id, itemRef
 
 return (
 <div
-  css={Css.br8.ba.bshBasic.bGray400.bgWhite.p1.sm.${sortable ? "relative." : ""}${
+  css={Css.br8.ba.bshBasic.bcGray400.bgWhite.p1.sm.${sortable ? "relative." : ""}${
     rowSpan !== 1 ? `gr("span ${rowSpan}").` : ""
   }${pin ? `sticky.top0.` : ""}${!stretch ? "asfs." : ""}$}
   {...gridItemProps} ${

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -99,10 +99,10 @@ export function IconButton(props: IconButtonProps) {
 
 const defaultIconColor = Palette.Gray900;
 const contrastIconColor = Palette.White;
-const iconButtonStylesReset = Css.bTransparent.bsSolid.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
+const iconButtonStylesReset = Css.bcTransparent.bss.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
 const iconButtonNormal = Css.hPx(28).wPx(28).br8.bw2.$;
 const iconButtonCompact = Css.hPx(18).wPx(18).br4.bw1.$;
 export const iconButtonStylesHover = Css.bgGray200.$;
 export const iconButtonContrastStylesHover = Css.bgGray700.$;
-const iconButtonStylesFocus = Css.bBlue700.$;
+const iconButtonStylesFocus = Css.bcBlue700.$;
 const iconButtonStylesDisabled = Css.cursorNotAllowed.$;
diff --git a/src/components/Layout/Layout.stories.tsx b/src/components/Layout/Layout.stories.tsx
@@ -281,7 +281,7 @@ function TestProjectLayout({ children }: ChildrenOnly) {
       <TestTopNav />
       {/* Required to use `overflowHidden` to prevent the `PreventBrowserScroll`'s scrollbar from kicking in,
           which would scroll both the side nav and the main content at the same time. */}
-      <div css={Css.df.overflowHidden.h100.$}>
+      <div css={Css.df.oh.h100.$}>
         <TestSideNav />
         <ScrollableParent xss={Css.px3.$}>{children}</ScrollableParent>
       </div>
@@ -296,15 +296,15 @@ function TestTopNav() {
 function TestSideNav() {
   const [showNav, setShowNav] = useState(true);
   return (
-    <ScrollableParent xss={Css.transition.br.bGray200.fg0.fs0.wPx(224).px2.if(!showNav).mlPx(-186).$}>
+    <ScrollableParent xss={Css.transition.br.bcGray200.fg0.fs0.wPx(224).px2.if(!showNav).mlPx(-186).$}>
       <div css={Css.relative.$}>
         <div css={Css.absolute.top1.rightPx(-12).bgGray50.df.aic.jcc.$}>
           <IconButton icon={showNav ? "menuClose" : "menuOpen"} onClick={() => setShowNav(!showNav)} />
         </div>
         {showNav && (
           <>
             <FullBleed>
-              <h2 css={Css.bb.bGray200.py3.$}>Scrollable Side Navigation</h2>
+              <h2 css={Css.bb.bcGray200.py3.$}>Scrollable Side Navigation</h2>
             </FullBleed>
             <ScrollableContent>
               <nav>
@@ -326,7 +326,7 @@ function TestSideNav() {
 function TestHeader({ title }: { title: ReactNode }) {
   return (
     <FullBleed>
-      <header css={{ ...Css.py2.bb.bGray200.$ }}>
+      <header css={{ ...Css.py2.bb.bcGray200.$ }}>
         <h1 css={Css.xlSb.$}>{title}</h1>
       </header>
     </FullBleed>

diff --git a/src/components/Layout/PreventBrowserScroll.tsx b/src/components/Layout/PreventBrowserScroll.tsx
@@ -7,9 +7,9 @@ export function PreventBrowserScroll({ children }: ChildrenOnly) {
     // Take over the full viewport and hide any overflown content.
     // Using `-webkit-fill-available`, otherwise `height: 100vh` includes the app bars in mobile Safari. See https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
     // Setting the multiple "(min|max-)height" properties is necessary, as Truss will turn this into an object and there can only be one `height` property.
-    <div css={Css.overflowHidden.vh100.mh("-webkit-fill-available").maxh("-webkit-fill-available").$}>
+    <div css={Css.oh.vh100.mh("-webkit-fill-available").maxh("-webkit-fill-available").$}>
       {/* Provides a fallback for scrolling the application if nested scrolling isn't needed, or forgotten */}
-      <div css={Css.h100.df.fdc.mh0.overflowAuto.$}>{children}</div>
+      <div css={Css.h100.df.fdc.mh0.oa.$}>{children}</div>
     </div>
   );
 }
diff --git a/src/components/Layout/RightPaneLayout/RightPaneLayout.stories.tsx b/src/components/Layout/RightPaneLayout/RightPaneLayout.stories.tsx
@@ -85,7 +85,7 @@ function ExamplePageComponent() {
   return (
     <>
       <FullBleed>
-        <header css={{ ...Css.py2.bb.bGray200.$ }}>
+        <header css={{ ...Css.py2.bb.bcGray200.$ }}>
           <h1 css={Css.xlSb.$}>Page content fixed to top</h1>
         </header>
       </FullBleed>
@@ -97,7 +97,7 @@ function ExamplePageComponent() {
 function TestProjectLayout({ children }: ChildrenOnly) {
   return (
     <PreventBrowserScroll>
-      <div css={Css.df.h100.overflowHidden.$}>
+      <div css={Css.df.h100.oh.$}>
         <ScrollableParent>{children}</ScrollableParent>
       </div>
     </PreventBrowserScroll>

diff --git a/src/components/Layout/RightPaneLayout/RightPaneLayout.tsx b/src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
@@ -16,11 +16,11 @@ export function RightPaneLayout(props: {
   useEffect(() => closePane, [closePane]);
 
   return (
-    <div css={Css.h100.df.overflowXHidden.$}>
+    <div css={Css.h100.df.oxh.$}>
       <>
         <div
           css={{
-            ...Css.w(`calc(100% - ${paneWidth + 24}px)`).add("transition", "width .2s linear").h100.mr3.overflowXAuto.$,
+            ...Css.w(`calc(100% - ${paneWidth + 24}px)`).add("transition", "width .2s linear").h100.mr3.oxa.$,
             ...Css.if(!isRightPaneOpen).w100.mr0.$,
             ...Css.if(!!defaultPaneContent).w(`calc(100% - ${paneWidth + 24}px)`).mr3.$,
           }}

diff --git a/src/components/Layout/ScrollableContent.tsx b/src/components/Layout/ScrollableContent.tsx
@@ -15,7 +15,7 @@ interface ScrollableContentProps {
  *
  * See the docs on `ScrollableParent.
  *
- * Note that you should not use this "just to get a scrollbar", instead just use `Css.overflowAuto.$`
+ * Note that you should not use this "just to get a scrollbar", instead just use `Css.oa.$`
  * or what not; this is only for implementing page-level patterns that need multiple stickied
  * components (page header, tab bar, table filter & actions).
  */

diff --git a/src/components/Layout/ScrollableParent.tsx b/src/components/Layout/ScrollableParent.tsx
@@ -88,13 +88,13 @@ export function ScrollableParent(props: PropsWithChildren<ScrollableParentContex
         <div
           css={{
             ...Css.pl(context.pl).pr(context.pr).$,
-            ...(!hasScrollableContent ? { ...Css.overflowAuto.h100.$, ...scrollContainerBottomPadding } : undefined),
+            ...(!hasScrollableContent ? { ...Css.oa.h100.$, ...scrollContainerBottomPadding } : undefined),
           }}
         >
           {children}
         </div>
         {/* Set fg1 to take up the remaining space in the viewport.*/}
-        <div css={Css.fg1.overflowAuto.$} ref={scrollableRef} />
+        <div css={Css.fg1.oa.$} ref={scrollableRef} />
       </Tag>
     </ScrollableParentContext.Provider>
   );

diff --git a/src/components/LoadingSkeleton.stories.tsx b/src/components/LoadingSkeleton.stories.tsx
@@ -7,28 +7,28 @@ export default {
 
 export const Examples = () => (
   <div>
-    <h1 css={Css.xl2Sb.mb1.bb.bGray400.$}>Sizes</h1>
+    <h1 css={Css.xl2Sb.mb1.bb.bcGray400.$}>Sizes</h1>
     <h2 css={Css.xl.$}>Small</h2>
     <LoadingSkeleton size="sm" />
     <h2 css={Css.xl.$}>Medium</h2>
     <LoadingSkeleton size="md" />
     <h2 css={Css.xl.$}>Large</h2>
     <LoadingSkeleton size="lg" />
 
-    <h1 css={Css.xl2Sb.mb1.mt4.bb.bGray400.$}>Multiple Rows</h1>
+    <h1 css={Css.xl2Sb.mb1.mt4.bb.bcGray400.$}>Multiple Rows</h1>
     <LoadingSkeleton rows={3} />
 
-    <h1 css={Css.xl2Sb.mb1.mt4.bb.bGray400.$}>Multiple Rows with Randomized Widths</h1>
+    <h1 css={Css.xl2Sb.mb1.mt4.bb.bcGray400.$}>Multiple Rows with Randomized Widths</h1>
     <LoadingSkeleton rows={6} randomizeWidths />
 
-    <h1 css={Css.xl2Sb.mb1.mt4.bb.bGray400.$}>Rows and Columns</h1>
+    <h1 css={Css.xl2Sb.mb1.mt4.bb.bcGray400.$}>Rows and Columns</h1>
     <LoadingSkeleton rows={3} columns={5} />
   </div>
 );
 
 const Template = (args: LoadingSkeletonProps) => (
   <div>
-    <h1 css={Css.xl2Sb.mb1.bb.bGray400.$}>Use Control Panel to Set Properties</h1>
+    <h1 css={Css.xl2Sb.mb1.bb.bcGray400.$}>Use Control Panel to Set Properties</h1>
     <LoadingSkeleton {...args} />
   </div>
 );
@@ -44,7 +44,7 @@ InteractiveExample.args = {
 
 export const Contrast = () => (
   <div>
-    <h1 css={Css.xl2Sb.mb1.bb.bGray400.gray400.$}>Contrast Background Example</h1>
+    <h1 css={Css.xl2Sb.mb1.bb.bcGray400.gray400.$}>Contrast Background Example</h1>
     <LoadingSkeleton rows={5} contrast />
   </div>
 );

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -113,7 +113,7 @@ export function Modal(props: ModalProps) {
             <FocusScope contain restoreFocus autoFocus>
               <div
                 css={
-                  Css.br24.bgWhite.bshModal.overflowHidden
+                  Css.br24.bgWhite.bshModal.oh
                     .maxh("90vh")
                     .df.fdc.wPx(width)
                     .mhPx(defaultMinHeight)
@@ -131,15 +131,15 @@ export function Modal(props: ModalProps) {
                 {...testId}
               >
                 {/* Setup three children (header, content, footer), and flex grow the content. */}
-                <header css={Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$}>
+                <header css={Css.df.p3.fs0.if(drawHeaderBorder).bb.bcGray200.$}>
                   <h1 css={Css.fg1.xl2Sb.gray900.$} ref={modalHeaderRef} {...titleProps} {...testId.title} />
                   <span css={Css.fs0.pl1.$}>
                     <IconButton icon="x" onClick={closeModal} {...testId.titleClose} />
                   </span>
                 </header>
                 <main
                   ref={modalBodyRef}
-                  css={Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$}
+                  css={Css.fg1.oya.if(hasScroll).bb.bcGray200.if(!!forceScrolling).oys.$}
                 >
                   {/* We'll include content here, but we expect ModalBody and ModalFooter to use their respective portals. */}
                   {content}
@@ -170,7 +170,7 @@ export function ModalBody({
   const testId = useTestIds({}, testIdPrefix);
   return createPortal(
     // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
-    <div css={Css.h100.if(virtualized).overflowHidden.pl3.else.px3.$} {...testId.content}>
+    <div css={Css.h100.if(virtualized).oh.pl3.else.px3.$} {...testId.content}>
       {children}
     </div>,
     modalBodyDiv,

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
@@ -46,7 +46,7 @@ export function Pagination(props: PaginationProps) {
 
   const tid = useTestIds(props, "pagination");
   return (
-    <div css={Css.df.bGray200.bt.xs.gray500.px2.pt2.$} {...tid}>
+    <div css={Css.df.bcGray200.bt.xs.gray500.px2.pt2.$} {...tid}>
       <div css={Css.df.mya.mr2.$} {...tid.pageSizeLabel}>
         Page size:
       </div>