@worldresources/wri-design-systems

WRI UI Library

Requirements

Node: 22.14.0

React: 18.3.1

Installation

yarn add @worldresources/wri-design-systems

or

npm i @worldresources/wri-design-systems

Other dependecies

yarn add @chakra-ui/react@^3.14.2 @emotion/react@^^11.14.0

or

npm i @chakra-ui/react@^3.14.2 @emotion/react@^^11.14.0

Usage

Create the Project Theme

With this custom theme you can change the color scheme according to your Project Theme

import { createSystem, defaultConfig } from '@chakra-ui/react'

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      colors: {
        neutral: {
          100: { value: '#FFFFFF' },
          200: { value: '#F6F6F6' },
          300: { value: '#E7E6E6' },
          400: { value: '#C9C9C9' },
          500: { value: '#B0B0B0' },
          600: { value: '#A1A1A1' },
          700: { value: '#5C5959' },
          800: { value: '#3D3B3B' },
          900: { value: '#1A1919' },
        },
        primary: {
          100: { value: '#FFFBF2' },
          200: { value: '#FCEFD3' },
          300: { value: '#FADFA7' },
          400: { value: '#F5BF4F' },
          500: { value: '#F0AB00' },
          600: { value: '#DE9E00' },
          700: { value: '#855B00' },
          800: { value: '#5F4205' },
          900: { value: '#332300' },
        },
        secondary: {
          100: { value: '#F2F6FF' },
          200: { value: '#D7E0F7' },
          300: { value: '#B2C3F0' },
          400: { value: '#4F6CBA' },
          500: { value: '#3855A3' },
          600: { value: '#0A4298' },
          700: { value: '#123369' },
          800: { value: '#162241' },
          900: { value: '#0B1121' },
        },
        success: {
          100: { value: '#EBF5F2' },
          200: { value: '#D3EED1' },
          300: { value: '#C2E5DC' },
          500: { value: '#009E77' },
          900: { value: '#00664D' },
        },
        warning: {
          100: { value: '#FBF7EA' },
          200: { value: '#E3CC8F' },
          300: { value: '#EEDDA5' },
          500: { value: '#A88100' },
          900: { value: '#715804' },
        },
        error: {
          100: { value: '#FFEFED' },
          200: { value: '#EDA1A9' },
          300: { value: '#F6C5C1' },
          500: { value: '#C11101' },
          900: { value: '#8D0D01' },
        },
        accessible: {
          'text-on-primary-mids': { value: '#332300' }, // primary 900
          'text-on-secondary-mids': { value: '#F2F6FF' }, // secondary 100
          'controls-on-neutral-lights': { value: '#855B00' }, // primary 700
          'controls-on-neutral-darks': { value: '#F5BF4F' }, // primary 400
        },
      },
    },
  },
})

Wrap ChakraProvider at the root of your app

import React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { designSystemStyles } from "@worldresources/wri-design-systems";
import { system } from './lib/theme'

function App() {
  return (
    {/* if you want to use the default WRI Theme colors */}
    {/* <ChakraProvider value={designSystemStyles}> */}

    {/* if you want to use your custom system Theme colors */}
    <ChakraProvider value={system}>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}

getThemedColor

Use getThemedColor to access your theme colors and variants.

import { getThemedColor } from '@worldresources/wri-design-systems'

border: 1px solid ${getThemedColor('neutral', 400)};

Components

Forms

Buttons

• Button
• Close Button
• Icon Button
• Map Control
• Multi Action Button

Controls

• Checkbox
• Checkbox Option Card
• Option Card
• Radio Button
• Slider
• Switch

Inputs

• Checkbox List
• Input With Units
• Password
• Radio List
• Select
• Slider Input
• Text Area
• Text Input

Tags

• Tag

Geospatial

• Icon Marker

Layers

• Layer Group
• Layer Item
• Layer Panel
• Layer Sidebar

Legends

• Layer Parameters
• Legend Item
• Legend Panel
• Qualitative Attribute
• Scale Bar

Information Display

• Item Count
• Pagination
• Table

Navigation

• Breadcrumb
• Footer
• Navigation Rail
• Tab Bar

Overlays

• Menu

Status

• Badge
• Inline Message
• Toast

Templates

• Next.js

Building the lib

yarn lint-fix

yarn build

Publish new version

npm login

npm publish