refactors, exposed vars.transition to styles

Author: SEEKilian

.changeset/red-drinks-float.md

@@ -0,0 +1,16 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - vars
+---
+
+**vars:** Exposed `vars.transition`. Transition CSS variables are available in stylesheets and runtime styles.
+
+**EXAMPLE USAGE:**
+```ts
+export const myStyle = style({
+  transition: vars.transition.fast,
+});

packages/braid-design-system/src/css.ts

@@ -24,6 +24,7 @@ const {
   borderRadius,
   borderWidth,
   shadow,
+  transition,
 } = internalVars;
 
 const vars = {
@@ -38,6 +39,7 @@ const vars = {
   borderRadius,
   borderWidth,
   shadow,
+  transition,
 };
 
 function atoms(props: Omit<Atoms, 'background'>) {

packages/braid-design-system/src/lib/css/vars.docs.tsx

@@ -32,7 +32,7 @@ const Row = ({
   hideCanvas?: boolean;
   darkCanvas?: boolean;
 }) => (
-  <Columns space="large" alignY="center">
+  <Columns space="large" alignY="center" collapseBelow="tablet">
     <Column>
       <Text>
         <Hidden below="tablet">vars{group ? `.${group}` : null}.</Hidden>
@@ -49,16 +49,22 @@ const Row = ({
   </Columns>
 );
 
-const ContentWidthValue = ({ var: varName }: { var: string }) => {
-  const [size, setSize] = useState(0);
+const CssVarValue = ({
+  var: varName,
+  property,
+}: {
+  var: string;
+  property: 'width' | 'transition';
+}) => {
+  const [value, setValue] = useState('');
   const { themeKey } = useThemeSettings();
   const ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (ref.current && themeKey) {
-      setSize(ref.current.offsetWidth);
+      setValue(getComputedStyle(ref.current)[property]);
     }
-  }, [themeKey]);
+  }, [themeKey, property]);
 
   return (
     <>
@@ -68,9 +74,9 @@ const ContentWidthValue = ({ var: varName }: { var: string }) => {
         pointerEvents="none"
         opacity={0}
         ref={ref}
-        style={{ width: varName }}
+        style={{ [property]: varName } as any}
       />
-      {size > 0 ? `${size}px` : '&nbsp;'}
+      {value || '\u00a0'}
     </>
   );
 };
@@ -106,7 +112,7 @@ const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
           {index > 0 ? <Divider /> : null}
           <Row key={widthName} group="contentWidth" name={widthName} hideCanvas>
             <Text>
-              <ContentWidthValue var={widthVar} />
+              <CssVarValue var={widthVar} property="width" />
             </Text>
           </Row>
         </Fragment>
@@ -283,6 +289,27 @@ const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
       ))}
     </Stack>
   ),
+  transition: (
+    <Stack space="large">
+      {Object.entries(vars.transition).map(
+        ([transitionName, transitionVar], index) => (
+          <Fragment key={transitionName}>
+            {index > 0 ? <Divider /> : null}
+            <Row
+              key={transitionName}
+              group="transition"
+              name={transitionName}
+              hideCanvas
+            >
+              <Text>
+                <CssVarValue var={transitionVar} property="transition" />
+              </Text>
+            </Row>
+          </Fragment>
+        ),
+      )}
+    </Stack>
+  ),
 } as const;
 
 const docs: CssDoc = {

packages/docs-ui/src/components/TitleLink/TitleLink.css.ts

@@ -15,10 +15,15 @@ export const titleLink = style([
   },
 ]);
 
-export const showOnHover = style({
+export const isCopying = style({});
+
+export const showIcon = style({
   selectors: {
-    [`${titleLink}:hover &, ${titleLink}:focus-visible &`]: {
+    [`${titleLink}:hover &, ${titleLink}:focus-visible &, ${isCopying}&`]: {
       opacity: 1,
     },
+    [`${titleLink}:hover &`]: {
+      transition: vars.transition.fast,
+    },
   },
 });

packages/docs-ui/src/components/TitleLink/TitleLink.tsx

@@ -43,15 +43,13 @@ const TitleLinkAnchor = ({
       href={`#${slug}`}
       className={styles.titleLink}
       onClick={onClick}
-      aria-label={triggerProps ? 'Copy link to clipboard' : undefined}
       {...triggerProps}
     >
       {children}
       <Box
         component="span"
-        transition="fast"
-        opacity={!copying ? 0 : undefined}
-        className={!copying && styles.showOnHover}
+        opacity={0}
+        className={[styles.showIcon, copying && styles.isCopying]}
       >
         {copying ? <IconPositive tone="positive" /> : <IconLink />}
       </Box>

site/src/App/DocNavigation/DocSection.tsx

@@ -1,5 +1,11 @@
 import { TitleLink } from '@braid-design-system/docs-ui';
-import { Stack, Badge, Heading, Bleed } from 'braid-src/lib/components';
+import {
+  Stack,
+  Badge,
+  Heading,
+  Bleed,
+  HiddenVisually,
+} from 'braid-src/lib/components';
 import type { ResponsiveSpace } from 'braid-src/lib/css/atoms/atoms';
 import { PlayroomStateProvider } from 'braid-src/lib/playroom/playroomState';
 
@@ -13,53 +19,42 @@ export const DocSection = ({
 }: {
   section: ComponentExample;
   headingSpacing?: ResponsiveSpace;
-}) => (
-  <Stack space="small">
-    {section.deprecated ? (
-      <Bleed left="xsmall">
-        <Badge
-          tone="caution"
-          id={section.label ? `deprecated-${section.label}` : undefined}
-          aria-hidden
-        >
-          Deprecated
-        </Badge>
-      </Bleed>
-    ) : undefined}
-    <Stack space={headingSpacing}>
-      {section.label ? (
-        <Heading
-          level="3"
-          aria-describedby={
-            section.deprecated ? `deprecated-${section.label}` : undefined
-          }
-        >
-          <TitleLink label={section.label} copyable>
-            <span
-              aria-describedby={
-                section.deprecated ? `deprecated-${section.label}` : undefined
-              }
-            >
+}) => {
+  const { deprecated } = section;
+  return (
+    <Stack space="small">
+      {deprecated ? (
+        <Bleed left="xsmall">
+          <Badge tone="caution">Deprecated</Badge>
+        </Bleed>
+      ) : undefined}
+      <Stack space={headingSpacing}>
+        {section.label ? (
+          <Heading level="3">
+            <TitleLink label={section.label} copyable>
               {section.label}
-            </span>
-          </TitleLink>
-        </Heading>
-      ) : null}
-      {section.description ?? null}
-      {section.code || section.Example ? (
-        <PlayroomStateProvider>
-          <DocExample
-            code={section.code}
-            Example={section.Example}
-            Container={section.Container}
-            background={section.background}
-            showCodeByDefault={
-              section.showCodeByDefault || section.Example === undefined
-            }
-            playroom={section.playroom}
-          />
-        </PlayroomStateProvider>
-      ) : null}
+              {deprecated ? (
+                <HiddenVisually>, deprecated</HiddenVisually>
+              ) : null}
+            </TitleLink>
+          </Heading>
+        ) : null}
+        {section.description ?? null}
+        {section.code || section.Example ? (
+          <PlayroomStateProvider>
+            <DocExample
+              code={section.code}
+              Example={section.Example}
+              Container={section.Container}
+              background={section.background}
+              showCodeByDefault={
+                section.showCodeByDefault || section.Example === undefined
+              }
+              playroom={section.playroom}
+            />
+          </PlayroomStateProvider>
+        ) : null}
+      </Stack>
     </Stack>
-  </Stack>
-);
+  );
+};