braid-design-system 31.2.3 → 31.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # braid-design-system
 
+## 31.3.0
+
+### Minor Changes
+
+- **vars:** Expose `contentWidth` theme tokens ([#1052](https://github.com/seek-oss/braid-design-system/pull/1052))
+
 ## 31.2.3
 
 ### Patch Changes

package/css/index.ts

@@ -10,6 +10,7 @@ const {
   grid,
   space,
   touchableSize,
+  contentWidth,
   // TODO: COLORMODE RELEASE
   // Release new backgrounds
   backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor },
@@ -24,6 +25,7 @@ const vars = {
   grid,
   space,
   touchableSize,
+  contentWidth,
   backgroundColor,
   foregroundColor,
   textWeight,

package/css/vars.docs.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { vars } from '.';
 import {
   Text,
@@ -13,7 +13,7 @@ import {
 } from '../lib/components';
 import { ReactNodeNoStrings } from '../lib/components/private/ReactNodeNoStrings';
 import Code from '../site/src/App/Code/Code';
-import { ThemedExample } from '../site/src/App/ThemeSetting';
+import { ThemedExample, useThemeSettings } from '../site/src/App/ThemeSetting';
 import { CssDoc } from '../site/src/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
@@ -43,6 +43,32 @@ const Row = ({
   </Columns>
 );
 
+const ContentWidthValue = ({ var: varName }: { var: string }) => {
+  const [size, setSize] = useState(0);
+  const { themeKey } = useThemeSettings();
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current && themeKey) {
+      setSize(ref.current.offsetWidth);
+    }
+  }, [themeKey]);
+
+  return (
+    <>
+      <Box
+        component="span"
+        position="absolute"
+        pointerEvents="none"
+        opacity={0}
+        ref={ref}
+        style={{ width: varName }}
+      />
+      {size > 0 ? `${size}px` : '&nbsp;'}
+    </>
+  );
+};
+
 const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
   grid: (
     <Row name="grid">
@@ -67,6 +93,17 @@ const varDocs: Record<keyof typeof vars, ReactNodeNoStrings> = {
       />
     </Row>
   ),
+  contentWidth: (
+    <Stack space="medium" dividers>
+      {Object.entries(vars.contentWidth).map(([widthName, widthVar]) => (
+        <Row key={widthName} group="contentWidth" name={widthName}>
+          <Text>
+            <ContentWidthValue var={widthVar} />
+          </Text>
+        </Row>
+      ))}
+    </Stack>
+  ),
   space: (
     <Stack space="medium" dividers>
       {Object.entries(vars.space).map(([spaceName, spaceVar]) => (

package/lib/components/Button/Button.docs.tsx

@@ -215,8 +215,8 @@ const docs: ComponentDocs = {
       description: (
         <>
           <Text>
-            For cases where actions need may need to be de-emphasized, you can
-            set the button’s <Strong>tone</Strong> to <Strong>neutral.</Strong>
+            For cases where actions need to be de-emphasized, the{' '}
+            <Strong>tone</Strong> can be set to <Strong>neutral.</Strong>
           </Text>
           <Text>
             This makes the button follow the default text colour, including{' '}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "31.2.3",
+  "version": "31.3.0",
   "description": "Themeable design system for the SEEK Group",
   "main": "lib/components/index.ts",
   "sideEffects": [