@worldresources/wri-design-systems 2.119.0 → 2.120.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -88,6 +88,18 @@ function App() {
88
88
  }
89
89
  ```
90
90
 
91
+ ### getThemedColor
92
+
93
+ Use **getThemedColor** to access your theme colors and variants.
94
+
95
+ ```tsx
96
+ import { getThemedColor } from '@worldresources/wri-design-systems'
97
+ ```
98
+
99
+ ```
100
+ border: 1px solid ${getThemedColor('neutral', 400)};
101
+ ```
102
+
91
103
  ## Components
92
104
 
93
105
  ## Forms
package/dist/index.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var e=require("@chakra-ui/react"),l=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),t=require("react/jsx-runtime"),i=require("react");function n(e){var l=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(l,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),l.default=e,Object.freeze(l)}var a=n(i);const o={neutral:{100:{value:"#FFFFFF"},200:{value:"#F6F6F6"},300:{value:"#E7E6E6"},400:{value:"#C9C9C9"},500:{value:"#9B9B9B"},600:{value:"#686767"},700:{value:"#4F4E4E"},800:{value:"#1A1919"},900:{value:"#000000"}},primary:{100:{value:"#FFFBF2"},200:{value:"#FCEFD3"},500:{value:"#F0AB00"},600:{value:"#D49700"},700:{value:"#AD7500"},800:{value:"#5F4205"},900:{value:"#332300"}},secondary:{500:{value:"#3855A3"},600:{value:"#263A71"},700:{value:"#1F2F5C"}},success:{100:{value:"#F3FFF2"},200:{value:"#D3EED1"},300:{value:"#C7E9C0"},500:{value:"#086600"}},warning:{100:{value:"#FEF7E5"},200:{value:"#E3CC8F"},500:{value:"#804600"}},error:{100:{value:"#FFF3F4"},200:{value:"#EDA1A9"},500:{value:"#A80011"}}},s=e.createSystem(e.defaultConfig,{theme:{tokens:{colors:o}}}),c=(e,l,r=s)=>r.tokens.getVar(`colors.${e}.${l}`)||o?.[e]?.[l]?.value,d=e=>r.css`
1
+ "use strict";var e=require("@chakra-ui/react"),l=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),t=require("react/jsx-runtime"),i=require("react");function n(e){var l=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(l,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),l.default=e,Object.freeze(l)}var a=n(i);const o={neutral:{100:{value:"#FFFFFF"},200:{value:"#F6F6F6"},300:{value:"#E7E6E6"},400:{value:"#C9C9C9"},500:{value:"#9B9B9B"},600:{value:"#686767"},700:{value:"#4F4E4E"},800:{value:"#1A1919"},900:{value:"#000000"}},primary:{100:{value:"#FFFBF2"},200:{value:"#FCEFD3"},500:{value:"#F0AB00"},600:{value:"#D49700"},700:{value:"#AD7500"},800:{value:"#5F4205"},900:{value:"#332300"}},secondary:{500:{value:"#3855A3"},600:{value:"#263A71"},700:{value:"#1F2F5C"}},success:{100:{value:"#F3FFF2"},200:{value:"#D3EED1"},300:{value:"#C7E9C0"},500:{value:"#086600"}},warning:{100:{value:"#FEF7E5"},200:{value:"#E3CC8F"},500:{value:"#804600"}},error:{100:{value:"#FFF3F4"},200:{value:"#EDA1A9"},500:{value:"#A80011"}}},s=e.createSystem(e.defaultConfig,{theme:{tokens:{colors:o}}}),c=(e,l)=>s.tokens.getVar(`colors.${e}.${l}`)||o?.[e]?.[l]?.value,d=e=>r.css`
2
2
  width: auto;
3
3
  height: ${"small"===e?"28px":"40px"};
4
4
  font-size: ${"small"===e?"12px":"16px"};
package/dist/index.d.ts CHANGED
@@ -1,10 +1,11 @@
1
- import { SystemContext, ButtonProps as ButtonProps$1, Checkbox as Checkbox$1, RadioCardRootProps, RadioGroup as RadioGroup$1, Slider as Slider$1, Switch as Switch$1, SelectRootProps, SliderRootProps, TextareaProps as TextareaProps$1, InputProps, Tag as Tag$1, Accordion, Tabs, Table as Table$1 } from '@chakra-ui/react';
1
+ import * as _chakra_ui_react from '@chakra-ui/react';
2
+ import { ButtonProps as ButtonProps$1, Checkbox as Checkbox$1, RadioCardRootProps, RadioGroup as RadioGroup$1, Slider as Slider$1, Switch as Switch$1, SelectRootProps, SliderRootProps, TextareaProps as TextareaProps$1, InputProps, Tag as Tag$1, Accordion, Tabs, Table as Table$1 } from '@chakra-ui/react';
2
3
  import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
3
4
  import React$1 from 'react';
4
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
6
 
6
- declare const designSystemStyles: SystemContext;
7
- declare const getThemedColor: (variant: "neutral" | "primary" | "secondary" | "success" | "warning" | "error", index: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, stylesSystem?: SystemContext) => string;
7
+ declare const designSystemStyles: _chakra_ui_react.SystemContext;
8
+ declare const getThemedColor: (variant: "neutral" | "primary" | "secondary" | "success" | "warning" | "error", index: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900) => string;
8
9
 
9
10
  type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
10
11
  label?: string;
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import{createSystem as e,defaultConfig as l,Button as r,Box as i,Spinner as n,Icon as t,Group as a,Portal as o,Menu as d,Checkbox as c,RadioCard as s,HStack as p,RadioGroup as h,Slider as x,For as u,Switch as C,Field as g,Input as b,Select as m,Tag as f,createListCollection as v,Textarea as $,Accordion as w,Tabs as k,Popover as y,Pagination as L,ButtonGroup as V,Table as R,Breadcrumb as M,Collapsible as z,createToaster as H,Toaster as _,Toast as I,Stack as B}from"@chakra-ui/react";import{jsxs as Z,jsx as T,Fragment as E}from"@emotion/react/jsx-runtime";import{css as F}from"@emotion/react";import{jsx as S,jsxs as P,Fragment as D}from"react/jsx-runtime";import*as j from"react";import A,{useState as N,useEffect as q,Fragment as O,Children as U,cloneElement as W}from"react";const G={neutral:{100:{value:"#FFFFFF"},200:{value:"#F6F6F6"},300:{value:"#E7E6E6"},400:{value:"#C9C9C9"},500:{value:"#9B9B9B"},600:{value:"#686767"},700:{value:"#4F4E4E"},800:{value:"#1A1919"},900:{value:"#000000"}},primary:{100:{value:"#FFFBF2"},200:{value:"#FCEFD3"},500:{value:"#F0AB00"},600:{value:"#D49700"},700:{value:"#AD7500"},800:{value:"#5F4205"},900:{value:"#332300"}},secondary:{500:{value:"#3855A3"},600:{value:"#263A71"},700:{value:"#1F2F5C"}},success:{100:{value:"#F3FFF2"},200:{value:"#D3EED1"},300:{value:"#C7E9C0"},500:{value:"#086600"}},warning:{100:{value:"#FEF7E5"},200:{value:"#E3CC8F"},500:{value:"#804600"}},error:{100:{value:"#FFF3F4"},200:{value:"#EDA1A9"},500:{value:"#A80011"}}},Y=e(l,{theme:{tokens:{colors:G}}}),K=(e,l,r=Y)=>r.tokens.getVar(`colors.${e}.${l}`)||G?.[e]?.[l]?.value,Q=e=>F`
1
+ import{createSystem as e,defaultConfig as l,Button as r,Box as i,Spinner as n,Icon as t,Group as a,Portal as o,Menu as d,Checkbox as c,RadioCard as s,HStack as p,RadioGroup as h,Slider as x,For as u,Switch as C,Field as g,Input as b,Select as m,Tag as f,createListCollection as v,Textarea as $,Accordion as w,Tabs as k,Popover as y,Pagination as L,ButtonGroup as V,Table as R,Breadcrumb as M,Collapsible as z,createToaster as H,Toaster as _,Toast as I,Stack as B}from"@chakra-ui/react";import{jsxs as Z,jsx as T,Fragment as E}from"@emotion/react/jsx-runtime";import{css as F}from"@emotion/react";import{jsx as S,jsxs as P,Fragment as D}from"react/jsx-runtime";import*as j from"react";import A,{useState as N,useEffect as q,Fragment as O,Children as U,cloneElement as W}from"react";const G={neutral:{100:{value:"#FFFFFF"},200:{value:"#F6F6F6"},300:{value:"#E7E6E6"},400:{value:"#C9C9C9"},500:{value:"#9B9B9B"},600:{value:"#686767"},700:{value:"#4F4E4E"},800:{value:"#1A1919"},900:{value:"#000000"}},primary:{100:{value:"#FFFBF2"},200:{value:"#FCEFD3"},500:{value:"#F0AB00"},600:{value:"#D49700"},700:{value:"#AD7500"},800:{value:"#5F4205"},900:{value:"#332300"}},secondary:{500:{value:"#3855A3"},600:{value:"#263A71"},700:{value:"#1F2F5C"}},success:{100:{value:"#F3FFF2"},200:{value:"#D3EED1"},300:{value:"#C7E9C0"},500:{value:"#086600"}},warning:{100:{value:"#FEF7E5"},200:{value:"#E3CC8F"},500:{value:"#804600"}},error:{100:{value:"#FFF3F4"},200:{value:"#EDA1A9"},500:{value:"#A80011"}}},Y=e(l,{theme:{tokens:{colors:G}}}),K=(e,l)=>Y.tokens.getVar(`colors.${e}.${l}`)||G?.[e]?.[l]?.value,Q=e=>F`
2
2
  width: auto;
3
3
  height: ${"small"===e?"28px":"40px"};
4
4
  font-size: ${"small"===e?"12px":"16px"};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worldresources/wri-design-systems",
3
- "version": "2.119.0",
3
+ "version": "2.120.0",
4
4
  "description": "WRI UI Library",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",