@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 +12 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.esm.js +1 -1
- package/package.json +1 -1
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
|
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
|
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
|
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
|
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"};
|