@worldresources/wri-design-systems 2.191.11 → 2.191.15

package/README.md

@@ -141,6 +141,26 @@ export const system = createSystem(designSystemStyles._config, {
           'controls-on-neutral-darks': { value: '#F5BF4F' }, // primary 400
         },
       },
+      spacing: {
+        // Available steps: 0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1400, 1600, 2000, 2400, 2800
+        400: { value: '1rem' },
+      },
+      radii: {
+        // Available steps: 100, 200, 300, 400, 500, 600, 700, 800, 900
+        500: { value: '0.5rem' },
+      },
+      borderWidths: {
+        // Available steps: 100, 200, 300, 400
+        100: { value: '0.0625rem' },
+      },
+      fontSizes: {
+        // Available steps: 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100
+        500: { value: '1rem' },
+      },
+      lineHeights: {
+        // Available steps: 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200
+        600: { value: '1.5rem' },
+      },
     },
   },
 })
@@ -230,18 +250,101 @@ function App() {
 --color-accessible-controls-on-neutral-darks: var(
   --chakra-colors-accessible-controls-on-neutral-darks
 );
+
+/* Spacing */
+--spacing-0: var(--chakra-spacing-0);
+--spacing-50: var(--chakra-spacing-50);
+--spacing-100: var(--chakra-spacing-100);
+--spacing-200: var(--chakra-spacing-200);
+--spacing-300: var(--chakra-spacing-300);
+--spacing-400: var(--chakra-spacing-400);
+--spacing-500: var(--chakra-spacing-500);
+--spacing-600: var(--chakra-spacing-600);
+--spacing-700: var(--chakra-spacing-700);
+--spacing-800: var(--chakra-spacing-800);
+--spacing-900: var(--chakra-spacing-900);
+--spacing-1000: var(--chakra-spacing-1000);
+--spacing-1100: var(--chakra-spacing-1100);
+--spacing-1200: var(--chakra-spacing-1200);
+--spacing-1400: var(--chakra-spacing-1400);
+--spacing-1600: var(--chakra-spacing-1600);
+--spacing-2000: var(--chakra-spacing-2000);
+--spacing-2400: var(--chakra-spacing-2400);
+--spacing-2800: var(--chakra-spacing-2800);
+
+/* Radius */
+--radius-100: var(--chakra-radii-100);
+--radius-200: var(--chakra-radii-200);
+--radius-300: var(--chakra-radii-300);
+--radius-400: var(--chakra-radii-400);
+--radius-500: var(--chakra-radii-500);
+--radius-600: var(--chakra-radii-600);
+--radius-700: var(--chakra-radii-700);
+--radius-800: var(--chakra-radii-800);
+--radius-900: var(--chakra-radii-900);
+
+/* Border Widths */
+--border-width-100: var(--chakra-border-widths-100);
+--border-width-200: var(--chakra-border-widths-200);
+--border-width-300: var(--chakra-border-widths-300);
+--border-width-400: var(--chakra-border-widths-400);
+
+/* Font Sizes */
+--font-size-200: var(--chakra-font-sizes-200);
+--font-size-300: var(--chakra-font-sizes-300);
+--font-size-400: var(--chakra-font-sizes-400);
+--font-size-500: var(--chakra-font-sizes-500);
+--font-size-600: var(--chakra-font-sizes-600);
+--font-size-700: var(--chakra-font-sizes-700);
+--font-size-800: var(--chakra-font-sizes-800);
+--font-size-900: var(--chakra-font-sizes-900);
+--font-size-1000: var(--chakra-font-sizes-1000);
+--font-size-1100: var(--chakra-font-sizes-1100);
+
+/* Line Heights */
+--line-height-300: var(--chakra-line-heights-300);
+--line-height-400: var(--chakra-line-heights-400);
+--line-height-500: var(--chakra-line-heights-500);
+--line-height-600: var(--chakra-line-heights-600);
+--line-height-700: var(--chakra-line-heights-700);
+--line-height-800: var(--chakra-line-heights-800);
+--line-height-900: var(--chakra-line-heights-900);
+--line-height-1000: var(--chakra-line-heights-1000);
+--line-height-1100: var(--chakra-line-heights-1100);
+--line-height-1200: var(--chakra-line-heights-1200);
 ```
 
-### getThemedColor
+### Theme Token Functions
 
-Use **getThemedColor** to access your theme colors and variants.
+Use the **getThemed\*** functions to access your design system tokens.
 
 ```tsx
-import { getThemedColor } from '@worldresources/wri-design-systems'
+import {
+  getThemedColor,
+  getThemedSpacing,
+  getThemedRadius,
+  getThemedBorderWidth,
+  getThemedFontSize,
+  getThemedLineHeight,
+} from '@worldresources/wri-design-systems'
 ```
 
-```
-border: 1px solid ${getThemedColor('neutral', 400)};
+```css
+/* Colors */
+border-color: ${getThemedColor('neutral', 400)};
+
+/* Spacing */
+margin-bottom: ${getThemedSpacing(200)};
+
+/* Radius */
+border-radius: ${getThemedRadius(500)};
+
+/* Border Widths */
+border-width: ${getThemedBorderWidth(100)};
+
+/* Typography */
+font-size: ${getThemedFontSize(500)};
+line-height: ${getThemedLineHeight(600)};
 ```
 
 ## Components
@@ -262,6 +365,8 @@ border: 1px solid ${getThemedColor('neutral', 400)};
 
 ## Forms
 
+- [Form Container](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/FormContainer)
+
 ### Actions
 
 - [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Actions/Button)
@@ -284,6 +389,7 @@ border: 1px solid ${getThemedColor('neutral', 400)};
 ### Inputs
 
 - [Checkbox List](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/CheckboxList)
+- [Combobox](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/Combobox)
 - [Input With Units](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/InputWithUnits)
 - [Password](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/Password)
 - [Radio List](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/RadioList)
@@ -296,10 +402,14 @@ border: 1px solid ${getThemedColor('neutral', 400)};
 
 - [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Tag)
 
+### Form Container
+
+- [Form Container](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/FormContainer)
+
 ## Geospatial
 
 - [Base Map](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/BaseMap)
-- [Icon Marker](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/IconMarker)
+- [Map Marker](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/MapMarker)
 - [Map Pop Up](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/MapPopUp)
 
 ### Layers
@@ -313,6 +423,7 @@ border: 1px solid ${getThemedColor('neutral', 400)};
 - [Layer Parameters](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/Legends/LayerParameters)
 - [Legend Item](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/Legends/LegendItem)
 - [Legend Panel](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/Legends/LegendPanel)
+- [Opacity Control](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/Legends/OpacityControl)
 - [Qualitative Attribute](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/Legends/QualitativeAttribute)
 - [Scale Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/Geospatial/Legends/ScaleBar)
 
@@ -324,15 +435,17 @@ border: 1px solid ${getThemedColor('neutral', 400)};
 - [Navbar](https://github.com/wri/wri-design-systems/tree/main/src/components/Navigation/Navbar)
 - [Navigation Rail](https://github.com/wri/wri-design-systems/tree/main/src/components/Navigation/NavigationRail)
 - [Pagination](https://github.com/wri/wri-design-systems/tree/main/src/components/Navigation/Pagination)
+- [Search](https://github.com/wri/wri-design-systems/tree/main/src/components/Navigation/Search)
 - [Tab Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/Navigation/TabBar)
 
 ## Status
 
+- [Alert Banner](https://github.com/wri/wri-design-systems/tree/main/src/components/Status/AlertBanner)
 - [Avatar](https://github.com/wri/wri-design-systems/tree/main/src/components/Status/Avatar)
 - [Badge](https://github.com/wri/wri-design-systems/tree/main/src/components/Status/Badge)
 - [Inline Message](https://github.com/wri/wri-design-systems/tree/main/src/components/Status/InlineMessage)
 - [Progress Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/Status/ProgressBar)
-- [Step Progress Indicator](https://github.com/wri/wri-design-systems/tree/main/src/components/Navigation/StepProgressIndicator)
+- [Step Progress Indicator](https://github.com/wri/wri-design-systems/tree/main/src/components/Status/StepProgressIndicator)
 - [Toast](https://github.com/wri/wri-design-systems/tree/main/src/components/Status/Toast)
 
 ## Templates

package/agents/AGENTS.md

@@ -193,6 +193,39 @@ getThemedColor(
 - For overridden scales (`neutral`, `primary`, `secondary`), valid steps are listed in the table above.
 - For non-overridden scales (`success`, `warning`, `error`, `accessible`), query the Storybook MCP before using any step — do not assume which steps are defined.
 
+### Other Theme Tokens — Spacing, Radius, Borders, and Typography
+
+Just like colors, spacing, radius, border widths, and typography must use their respective `getThemed*` functions.
+
+- **Spacing:** `getThemedSpacing(token)` (Tokens: `0`, `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `1000`, `1100`, `1200`, `1400`, `1600`, `2000`, `2400`, `2800`)
+- **Radius:** `getThemedRadius(token)` (Tokens: `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`)
+- **Border Width:** `getThemedBorderWidth(token)` (Tokens: `100`, `200`, `300`, `400`)
+- **Font Size:** `getThemedFontSize(token)` (Tokens: `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `1000`, `1100`)
+- **Line Height:** `getThemedLineHeight(token)` (Tokens: `300`, `400`, `500`, `600`, `700`, `800`, `900`, `1000`, `1100`, `1200`)
+
+```tsx
+import {
+  getThemedSpacing,
+  getThemedRadius,
+  getThemedBorderWidth,
+  getThemedFontSize,
+  getThemedLineHeight,
+} from '@worldresources/wri-design-systems'
+
+// ✅ Correct
+;<Box
+  p={getThemedSpacing(400)}
+  borderRadius={getThemedRadius(500)}
+  border={`${getThemedBorderWidth(100)} solid ${getThemedColor('neutral', 300)}`}
+>
+  <Text fontSize={getThemedFontSize(500)} lineHeight={getThemedLineHeight(600)}>
+    Label
+  </Text>
+</Box>
+```
+
+For full references, check `agents/spacing.md`, `agents/radius.md`, `agents/border-width.md`, and `agents/typography.md`.
+
 ---
 
 ## What NOT to Do
@@ -204,10 +237,11 @@ import { Button } from "@chakra-ui/react"  // → use WRI DS Button
 // ❌ Do not override WRI DS styles
 <Button sx={{ backgroundColor: "red" }}>Delete</Button>
 
-// ❌ Do not hardcode design values
-<Text fontSize="14px" color="#333333">Label</Text>
+// ❌ Do not hardcode design values or use raw strings for spacing, radius, etc.
+<Text fontSize="14px" color="#333333">Label</Text> // → use getThemedFontSize, getThemedColor
+<Box p="1rem" borderRadius="8px" /> // → use getThemedSpacing, getThemedRadius
 
-// ❌ Do not use raw token strings as color props — always use getThemedColor
+// ❌ Do not use raw token strings as styling props — always use getThemed* functions
 <Box bg="primary.500" />  // → use getThemedColor('primary', 500)
 
 // ❌ Do not create custom components without the searchable marker
@@ -223,13 +257,14 @@ const MyButton = () => <button style={{ background: "blue" }}>Click</button>
 
 ## Quick Reference
 
-| Question                                      | Where to look                                                              |
-| --------------------------------------------- | -------------------------------------------------------------------------- |
-| Does a WRI DS component exist?                | [Storybook](https://wri.github.io/wri-design-systems/) or Storybook MCP    |
-| Detailed props / usage for a WRI DS component | Component README in GitHub: `src/components/<Category>/<Name>/README.md`   |
-| What props does a Chakra component accept?    | Chakra MCP → `get_component_props`                                         |
-| What design tokens are available?             | Chakra MCP → `get_theme` or [Zeroheight](https://zeroheight.com/4221801da) |
-| Which color scales/steps are overridden here? | Read `src/components/Providers/index.tsx` — that is the source of truth    |
-| Which steps exist for non-overridden scales?  | Query Storybook MCP — do not guess                                         |
-| How do I use a color in JSX?                  | `getThemedColor('scale', step)` from `@worldresources/wri-design-systems`  |
-| Where are all custom components in this repo? | "Find in Files" → `[CUSTOM COMPONENT]`                                     |
+| Question                                      | Where to look                                                             |
+| --------------------------------------------- | ------------------------------------------------------------------------- |
+| Does a WRI DS component exist?                | [Storybook](https://wri.github.io/wri-design-systems/) or Storybook MCP   |
+| Detailed props / usage for a WRI DS component | Component README in GitHub: `src/components/<Category>/<Name>/README.md`  |
+| What props does a Chakra component accept?    | Chakra MCP → `get_component_props`                                        |
+| What design tokens are available?             | `agents/*.md` files, Chakra MCP → `get_theme`, or Zeroheight              |
+| Which color scales/steps are overridden here? | Read `src/components/Providers/index.tsx` — that is the source of truth   |
+| Which steps exist for non-overridden scales?  | Query Storybook MCP — do not guess                                        |
+| How do I use a color in JSX?                  | `getThemedColor('scale', step)` from `@worldresources/wri-design-systems` |
+| How do I use spacing/radius/fonts in JSX?     | `getThemedSpacing`, `getThemedRadius`, `getThemedFontSize`, etc.          |
+| Where are all custom components in this repo? | "Find in Files" → `[CUSTOM COMPONENT]`                                    |

package/agents/border-width.md

@@ -0,0 +1,13 @@
+# Border width tokens
+
+This package defines border width primitives as Chakra `borderWidths` tokens.
+
+Use `getThemedBorderWidth(token)` where `token` is one of:
+
+- `100` `200` `300` `400`
+
+```ts
+import { getThemedBorderWidth } from '@worldresources/wri-design-systems'
+
+const thin = getThemedBorderWidth(100) // "0.0625rem"
+```

package/agents/radius.md

@@ -0,0 +1,14 @@
+# Radius tokens
+
+This package defines border radius primitives as Chakra `radii` tokens.
+
+Use `getThemedRadius(token)` where `token` is one of:
+
+- `100` `200` `300` `400` `500` `600` `700` `800` `900`
+
+```ts
+import { getThemedRadius } from '@worldresources/wri-design-systems'
+
+const cardRadius = getThemedRadius(500) // "0.5rem"
+const pillRadius = getThemedRadius(900) // "9999px"
+```

package/agents/spacing.md

@@ -0,0 +1,14 @@
+# Spacing tokens
+
+This package defines spacing primitives as Chakra `spacing` tokens (in `rem`).
+
+Use `getThemedSpacing(token)` where `token` is one of:
+
+- `0` `50` `100` `200` `300` `400` `500` `600` `700` `800` `900`
+- `1000` `1100` `1200` `1400` `1600` `2000` `2400` `2800`
+
+```ts
+import { getThemedSpacing } from '@worldresources/wri-design-systems'
+
+const pad = getThemedSpacing(400) // "1rem"
+```

package/agents/typography.md

@@ -0,0 +1,27 @@
+# Typography tokens
+
+This package defines typography primitives as Chakra system tokens (in `rem`).
+
+## Font sizes
+
+Use `getThemedFontSize(token)` where `token` is one of:
+
+- `200` `300` `400` `500` `600` `700` `800` `900` `1000` `1100`
+
+```ts
+import { getThemedFontSize } from '@worldresources/wri-design-systems'
+
+const titleSize = getThemedFontSize(700) // "1.5rem"
+```
+
+## Line heights
+
+Use `getThemedLineHeight(token)` where `token` is one of:
+
+- `300` `400` `500` `600` `700` `800` `900` `1000` `1100` `1200`
+
+```ts
+import { getThemedLineHeight } from '@worldresources/wri-design-systems'
+
+const tight = getThemedLineHeight(400) // "1rem"
+```