@worldresources/wri-design-systems 2.119.0 → 2.121.0

package/README.md

@@ -88,6 +88,18 @@ function App() {
 }
 ```
 
+### getThemedColor
+
+Use **getThemedColor** to access your theme colors and variants.
+
+```tsx
+import { getThemedColor } from '@worldresources/wri-design-systems'
+```
+
+```
+border: 1px solid ${getThemedColor('neutral', 400)};
+```
+
 ## Components
 
 ## Forms

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"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`
+"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:"#B0B0B0"},600:{value:"#A1A1A1"},700:{value:"#5C5959"},800:{value:"#3D3B3B"},900:{value:"#1A1919"}},primary:{100:{value:"#FFFBF2"},200:{value:"#FCEFD3"},500:{value:"#F0AB00"},600:{value:"#DE9E00"},700:{value:"#855B00"},800:{value:"#5F4205"},900:{value:"#332300"}},secondary:{300:{value:"#B2C3F0"},400:{value:"#4F6CBA"},500:{value:"#3855A3"},600:{value:"#0A4298"},700:{value:"#123369"}},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"}}},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`
   width: auto;
   height: ${"small"===e?"28px":"40px"};
   font-size: ${"small"===e?"12px":"16px"};
@@ -542,7 +542,7 @@
   }
 
   ${l?`\n    --ty: -6px !important;\n\n    .chakra-slider__markerIndicator {\n      height: 16px;\n      width: 4px;\n      background-color: ${c("primary",700)} !important;\n    }\n\n    &[data-disabled] {\n      .chakra-slider__markerIndicator {\n        background-color: ${c("neutral",400)} !important;\n      }\n    }\n  `:""};
-`,ve=r=>{const{value:t}=r;return l.jsx(e.For,{each:t,children:(r,t)=>l.jsxs(e.Slider.Thumb,{css:ge,index:t,children:[l.jsx("div",{css:be,className:"slider-value-preview",children:r}),l.jsx(e.Slider.HiddenInput,{})]},t)})},$e=i.forwardRef(((r,t)=>{const{marks:i,isCentred:n}=r;return i?.length?l.jsx(e.Slider.MarkerGroup,{ref:t,children:i.map(((r,t)=>{const i="number"==typeof r?r:r.value,a="number"==typeof r?void 0:r.label,o=n&&1===t;return l.jsxs(e.Slider.Marker,{css:je(n,o),value:i,children:[l.jsx(e.Slider.MarkerIndicator,{}),l.jsx("p",{children:a})]},i)}))}):null})),we=i.forwardRef(((r,t)=>{const{marks:n,onValueChange:a,isCentred:o,...s}=r,[c,d]=i.useState(s.value||[0]);i.useEffect((()=>{d(s.value||[0])}),[s.value]);let x=n?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(o){const e=s.min||0,l=s.max||100;x=[e,(e+l)/2,l].map((e=>({value:e,label:void 0})))}const p=!!x?.some((e=>e.label));return l.jsx(e.Slider.Root,{css:Ce,ref:t,thumbAlignment:"center",onValueChange:e=>{d(e.value),a&&a(e)},origin:o?"center":"start",...s,children:l.jsxs(e.Slider.Control,{"data-has-mark-label":p||void 0,children:[l.jsx(e.Slider.Track,{css:me,children:l.jsx(e.Slider.Range,{css:fe})}),l.jsx(ve,{value:c}),l.jsx($e,{marks:x,isCentred:o})]})})})),ke=r.css`
+`,ve=r=>{const{value:t}=r;return l.jsx(e.For,{each:t,children:(r,t)=>l.jsxs(e.Slider.Thumb,{css:ge,index:t,children:[l.jsx("div",{css:be,className:"slider-value-preview",children:r}),l.jsx(e.Slider.HiddenInput,{})]},t)})},$e=i.forwardRef(((r,t)=>{const{marks:i,isCentred:n}=r;return i?.length?l.jsx(e.Slider.MarkerGroup,{ref:t,children:i.map(((r,t)=>{const i="number"==typeof r?r:r.value,a="number"==typeof r?void 0:r.label,o=n&&1===t;return l.jsxs(e.Slider.Marker,{css:je(n,o),value:i,children:[l.jsx(e.Slider.MarkerIndicator,{}),l.jsx("p",{children:a})]},i)}))}):null})),we=i.forwardRef(((r,t)=>{const{marks:n,onValueChange:a,isCentred:o,value:s,...c}=r,[d,x]=i.useState(s||[0]);i.useEffect((()=>{x(s||[0])}),[s]);let p=n?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(o){const e=c.min||0,l=c.max||100;p=[e,(e+l)/2,l].map((e=>({value:e,label:void 0})))}const h=!!p?.some((e=>e.label));return l.jsx(e.Slider.Root,{css:Ce,ref:t,thumbAlignment:"center",onValueChange:e=>{x(e.value),a&&a(e)},origin:o?"center":"start",value:d,...c,children:l.jsxs(e.Slider.Control,{"data-has-mark-label":h||void 0,children:[l.jsx(e.Slider.Track,{css:me,children:l.jsx(e.Slider.Range,{css:fe})}),l.jsx(ve,{value:d}),l.jsx($e,{marks:p,isCentred:o})]})})})),ke=r.css`
   .chakra-switch__control-container {
     width: 42px;
     height: 26px;

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-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';
+import * as _chakra_ui_react from '@chakra-ui/react';
+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';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const designSystemStyles: SystemContext;
-declare const getThemedColor: (variant: "neutral" | "primary" | "secondary" | "success" | "warning" | "error", index: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, stylesSystem?: SystemContext) => string;
+declare const designSystemStyles: _chakra_ui_react.SystemContext;
+declare const getThemedColor: (variant: "neutral" | "primary" | "secondary" | "success" | "warning" | "error", index: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900) => string;
 
 type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     label?: string;