@react-pakistan/util-functions 1.17.0 → 1.18.3

package/hooks/index.d.ts

@@ -1,5 +1,7 @@
 export * from './use-change';
 export * from './use-force-render';
+export * from './use-ip-geo-location';
+export * from './use-is-mobile';
 export * from './use-selector';
 export * from './use-sticky';
 export * from './use-toggle-state';

package/hooks/index.js

@@ -16,6 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./use-change"), exports);
 __exportStar(require("./use-force-render"), exports);
+__exportStar(require("./use-ip-geo-location"), exports);
+__exportStar(require("./use-is-mobile"), exports);
 __exportStar(require("./use-selector"), exports);
 __exportStar(require("./use-sticky"), exports);
 __exportStar(require("./use-toggle-state"), exports);

package/hooks/use-ip-geo-location.d.ts

@@ -0,0 +1,5 @@
+export declare const useIPGeoLocation: () => {
+    country: string | null;
+    error: Error | null;
+    isLoading: boolean;
+};

package/hooks/use-ip-geo-location.js

@@ -0,0 +1,44 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIPGeoLocation = void 0;
+const react_1 = require("react");
+const useIPGeoLocation = () => {
+    const [country, setCountry] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const apiEndpoint = 'https://api.country.is';
+    (0, react_1.useEffect)(() => {
+        if (country)
+            return;
+        function fetchAPI() {
+            return __awaiter(this, void 0, void 0, function* () {
+                setIsLoading(true);
+                yield fetch(apiEndpoint)
+                    .then((res) => {
+                    if (!res.ok) {
+                        throw Error(res.statusText);
+                    }
+                    return res.json();
+                })
+                    .then((res) => {
+                    if (res && res.country)
+                        setCountry(res.country);
+                })
+                    .catch((err) => setError(err))
+                    .finally(() => setIsLoading(false));
+            });
+        }
+        fetchAPI();
+    }, [country]);
+    return { country, error, isLoading };
+};
+exports.useIPGeoLocation = useIPGeoLocation;

package/hooks/use-is-mobile.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobile: () => boolean;

package/hooks/use-is-mobile.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMobile = void 0;
+const react_1 = require("react");
+const useIsMobile = () => {
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    const handleResize = () => {
+        if (window.innerWidth < 767) {
+            setIsMobile(true);
+        }
+        else {
+            setIsMobile(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return isMobile;
+};
+exports.useIsMobile = useIsMobile;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pakistan/util-functions",
-  "version": "1.17.0",
+  "version": "1.18.3",
   "description": "A library of all util functions",
   "main": "index.js",
   "scripts": {
@@ -39,33 +39,33 @@
   },
   "homepage": "https://github.com/react-pakistan/util-functions#readme",
   "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/eslint-parser": "^7.22.11",
-    "@babel/preset-typescript": "^7.22.11",
+    "@babel/core": "^7.23.5",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@microsoft/tsdoc": "^0.14.2",
-    "@react-pakistan/eslint-config-shared": "^1.9.3",
-    "@types/jest": "^29.5.4",
-    "@types/lodash.curry": "^4.1.7",
-    "@types/node": "^20.5.6",
-    "@types/react-redux": "^7.1.26",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
+    "@react-pakistan/eslint-config-shared": "^1.10.1",
+    "@types/jest": "^29.5.10",
+    "@types/lodash.curry": "^4.1.9",
+    "@types/node": "^20.10.3",
+    "@types/react-redux": "^7.1.31",
+    "@types/styled-components": "^5.1.32",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
-    "eslint": "^8.48.0",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-import": "^2.29.0",
     "husky": "^8.0.3",
-    "jest": "^29.6.4",
-    "lint-staged": "^14.0.1",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.0",
     "lodash.curry": "^4.1.1",
     "lodash.isequal": "^4.5.0",
     "react": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "rimraf": "^5.0.1",
+    "react-redux": "^9.0.0",
+    "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
-    "ts-loader": "^9.4.4",
-    "typescript": "^5.2.2"
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "@types/react-redux": "^7.1.25",

package/storybook/react-emoji-story-template.js

@@ -25,8 +25,8 @@ import { EMOJI_LIST } from './${emojiListDirName}';
 const emojiStyle = { width: '7rem', height: '7rem' };
 
 const renderItem = (
-  item : { emoji : React.SFC<React.SVGProps<SVGSVGElement>> , name : string }
-) : ReactElement => {
+  item: { emoji: React.FC<React.SVGProps<SVGSVGElement>>, name: string }
+): ReactElement => {
   const Emoji = item.emoji;
   return (
     <EmojiItem
@@ -42,7 +42,7 @@ const renderItem = (
 
 const emojis = EMOJI_LIST.map(renderItem);
 
-export const ${subCategory} = () : ReactElement => (
+export const ${subCategory} = (): ReactElement => (
   <StyledStory>
     <EmojiWrapper>
       {emojis}

package/storybook/react-icon-story-template.js

@@ -24,8 +24,8 @@ import { ICON_LIST } from './${iconListDirName}';
 const iconStyle = { width: '7rem', height: '7rem' };
 
 const renderItem = (
-  item : { icon : React.SFC<React.SVGProps<SVGSVGElement>> , name : string }
-) : ReactElement => {
+  item: { icon: React.FC<React.SVGProps<SVGSVGElement>>, name: string }
+): ReactElement => {
   const Icon = item.icon;
   return (
     <IconItem
@@ -41,7 +41,7 @@ const renderItem = (
 
 const icons = ICON_LIST.map(renderItem);
 
-export const ${category} = () : ReactElement => (
+export const ${category} = (): ReactElement => (
   <StyledStory>
     <IconWrapper>
       {icons}

package/storybook/react-logo-story-template.js

@@ -24,8 +24,8 @@ import { LOGO_LIST } from './${logoListDirName}';
 const logoStyle = { width: '7rem', height: '7rem' };
 
 const renderItem = (
-  item : { logo : React.SFC<React.SVGProps<SVGSVGElement>> , name : string }
-) : ReactElement => {
+  item: { logo: React.FC<React.SVGProps<SVGSVGElement>>, name: string }
+): ReactElement => {
   const Logo = item.logo;
   return (
     <LogoItem
@@ -41,7 +41,7 @@ const renderItem = (
 
 const logos = LOGO_LIST.map(renderItem);
 
-export const ${category} = () : ReactElement => (
+export const ${category} = (): ReactElement => (
   <StyledStory>
     <LogoWrapper>
       {logos}

package/storybook/theme.d.ts

@@ -17,6 +17,12 @@ export interface IColors {
 export interface IMisc {
     [key: string]: string | number | boolean;
 }
+export interface ILight {
+    [key: string]: string;
+}
+export interface IDark {
+    [key: string]: string;
+}
 export interface IHeadingStyle {
     fontFamily: string;
     fontSize: string;
@@ -80,6 +86,8 @@ export interface ITheme {
     shadow: IShadow;
     spacing: ISpacing;
     typography: ITypography;
+    light: ILight;
+    dark: IDark;
     zIndex: IZindex;
 }
 export declare const theme: ITheme;

package/storybook/theme.js

@@ -129,6 +129,418 @@ exports.theme = {
         desktop: 'only screen and (min-width: 2560px)',
     },
     colors: {
+        absoluteWhite: '#FFFFFF',
+        absoluteBlack: '#000000',
+        ash50: '#FBFBFD',
+        ash100: '#EFF0F3',
+        ash200: '#DBDBDE',
+        ash300: '#BFC0C2',
+        ash400: '#A0A1A4',
+        ash500: '#828285',
+        ash600: '#656669',
+        ash700: '#434346',
+        ash800: '#2A2A2C',
+        ash900: '#1E1E21',
+        graphite50: '#FCFCFF',
+        graphite100: '#EEF1F6',
+        graphite200: '#DCDFE8',
+        graphite300: '#C0C3D0',
+        graphite400: '#9DA0B0',
+        graphite500: '#828593',
+        graphite600: '#636473',
+        graphite700: '#41414F',
+        graphite800: '#2D2D38',
+        graphite900: '#1D1E26',
+        slate50: '#F7F7F7',
+        slate100: '#EDEEF3',
+        slate200: '#E1E3EE',
+        slate300: '#CCD0DE',
+        slate400: '#A7ACC1',
+        slate500: '#6B6F8C',
+        slate600: '#4D5168',
+        slate700: '#4D5168',
+        slate800: '#2D2D38',
+        slate900: '#1E2028',
+        steel50: '#FAFBFF',
+        steel100: '#ECF1FC',
+        steel200: '#D5DEF2',
+        steel300: '#D5DEF2',
+        steel400: '#8696BF',
+        steel500: '#617098',
+        steel600: '#4A5879',
+        steel700: '#313C58',
+        steel800: '#202940',
+        steel900: '#12192E',
+        charcoal50: '#FBFBFE',
+        charcoal100: '#EEEFF9',
+        charcoal200: '#D0DBEB',
+        charcoal300: '#B6C3D9',
+        charcoal400: '#8E9FBA',
+        charcoal500: '#607390',
+        charcoal600: '#43546D',
+        charcoal700: '#314157',
+        charcoal800: '#314157',
+        charcoal900: '#181F29',
+        sage50: '#F9FCF7',
+        sage100: '#F9FCF7',
+        sage200: '#DAE5DC',
+        sage300: '#C1D0C7',
+        sage400: '#95A59C',
+        sage500: '#718279',
+        sage600: '#50645B',
+        sage700: '#50645B',
+        sage800: '#25392F',
+        sage900: '#16251C',
+        sand50: '#FFFCF9',
+        sand100: '#ECE5DE',
+        sand200: '#ECE5DE',
+        sand300: '#D7CEC5',
+        sand400: '#BDB5AB',
+        sand500: '#9E958B',
+        sand600: '#71685E',
+        sand700: '#4E4740',
+        sand800: '#3D362F',
+        sand900: '#24201B',
+        granite50: '#F9F8F9',
+        granite100: '#F1EDEF',
+        granite200: '#E9E1E4',
+        granite300: '#CEC2C7',
+        granite400: '#B2A4A9',
+        granite500: '#948489',
+        granite600: '#736267',
+        granite700: '#5A494F',
+        granite800: '#47383D',
+        granite900: '#47383D',
+        quartz50: '#FFF9FD',
+        quartz100: '#F1EDEF',
+        quartz200: '#E9E1E4',
+        quartz300: '#CEC2C7',
+        quartz400: '#B2A4A9',
+        quartz500: '#948489',
+        quartz600: '#736267',
+        quartz700: '#5A494F',
+        quartz800: '#5A494F',
+        quartz900: '#2B1F23',
+        obsidian50: '#FCF9FF',
+        obsidian100: '#F6F2FA',
+        obsidian200: '#E6E0ED',
+        obsidian300: '#D0C6DB',
+        obsidian400: '#B2A4C0',
+        obsidian500: '#8F809F',
+        obsidian600: '#746485',
+        obsidian700: '#584969',
+        obsidian800: '#3F334E',
+        obsidian900: '#1F1728',
+        coral50: '#FFF3F0',
+        coral100: '#FFE6E0',
+        coral200: '#F9D3CA',
+        coral300: '#F6BDAF',
+        coral400: '#F0AD9D',
+        coral500: '#E4907C',
+        coral600: '#C07462',
+        coral700: '#905749',
+        coral800: '#603A31',
+        coral900: '#301D18',
+        red50: '#FFF5F5',
+        red100: '#FFDEDE',
+        red200: '#FFC2C2',
+        red300: '#FFA3A3',
+        red400: '#FF6464',
+        red500: '#FF2828',
+        red600: '#D20909',
+        red700: '#940202',
+        red800: '#940202',
+        red900: '#3D0000',
+        scarlet50: '#FFF4F2',
+        scarlet100: '#FFDEDE',
+        scarlet200: '#FFC2C2',
+        scarlet300: '#FFA3A3',
+        scarlet400: '#FF725F',
+        scarlet500: '#FF371C',
+        scarlet600: '#D71A00',
+        scarlet700: '#BF1100',
+        scarlet800: '#600B00',
+        scarlet900: '#390700',
+        persimmon50: '#FFF5EF',
+        persimmon100: '#FFE1D0',
+        persimmon200: '#FFC8A9',
+        persimmon300: '#FFAD8A',
+        persimmon400: '#FF824D',
+        persimmon500: '#F8510A',
+        persimmon600: '#CD3E00',
+        persimmon700: '#872800',
+        persimmon800: '#872800',
+        persimmon900: '#872800',
+        orange50: '#FFF8F2',
+        orange100: '#FFEAD9',
+        orange200: '#FFD3AD',
+        orange300: '#FFBC84',
+        orange400: '#FF9F4F',
+        orange500: '#F97607',
+        orange600: '#D46100',
+        orange700: '#994000',
+        orange800: '#602200',
+        orange900: '#3E0F00',
+        carrot50: '#FFFBF5',
+        carrot100: '#FFEEDA',
+        carrot200: '#FFDAAF',
+        carrot300: '#FFC37D',
+        carrot400: '#FFAC4B',
+        carrot500: '#FFAC4B',
+        carrot600: '#D67300',
+        carrot700: '#985200',
+        carrot800: '#5E3200',
+        carrot900: '#3C2000',
+        honey50: '#FFFDEE',
+        honey100: '#FFF9CC',
+        honey200: '#FBEFA4',
+        honey300: '#FBEFA4',
+        honey400: '#F4C519',
+        honey500: '#EAAD00',
+        honey600: '#D1870A',
+        honey700: '#A15E00',
+        honey800: '#653A01',
+        honey900: '#271500',
+        gold50: '#FFFEF5',
+        gold100: '#FFF9D4',
+        gold200: '#FFF0A9',
+        gold300: '#FFE67E',
+        gold400: '#FFD950',
+        gold500: '#FFD950',
+        gold600: '#DBA91D',
+        gold700: '#AA7901',
+        gold800: '#6B4900',
+        gold900: '#352300',
+        lemon50: '#FFFEF4',
+        lemon100: '#FFFBD6',
+        lemon200: '#FFF0A9',
+        lemon300: '#FBED72',
+        lemon400: '#F5E232',
+        lemon500: '#EAD200',
+        lemon600: '#C5B100',
+        lemon700: '#928300',
+        lemon800: '#5B5200',
+        lemon900: '#322D00',
+        pear50: '#FFFFF4',
+        pear100: '#FEFFB9',
+        pear200: '#F4F67F',
+        pear300: '#ECEF52',
+        pear400: '#ECEF52',
+        pear500: '#CACE00',
+        pear600: '#A6A900',
+        pear700: '#777902',
+        pear800: '#4D4F00',
+        pear900: '#2A2C00',
+        avacado50: '#FCFFF3',
+        avacado100: '#F5FFCE',
+        avacado200: '#E6F9A1',
+        avacado300: '#D2EC6F',
+        avacado400: '#BEDB4A',
+        avacado500: '#A0C317',
+        avacado600: '#8CA710',
+        avacado700: '#657701',
+        avacado800: '#404E00',
+        avacado900: '#202F00',
+        grass50: '#FBFEF3',
+        grass100: '#ECFBCF',
+        grass200: '#D5F8A1',
+        grass300: '#B3EB70',
+        grass400: '#8FD84A',
+        grass500: '#60BF18',
+        grass600: '#48A411',
+        grass700: '#277A00',
+        grass800: '#154F00',
+        grass900: '#0B3300',
+        emerald50: '#F4FCF6',
+        emerald100: '#DDF2E1',
+        emerald200: '#B9E9C3',
+        emerald300: '#7ED890',
+        emerald400: '#41B057',
+        emerald500: '#0F860F',
+        emerald600: '#08711D',
+        emerald700: '#095A19',
+        emerald800: '#05320E',
+        emerald900: '#021105',
+        cucumber50: '#F4FFF5',
+        cucumber100: '#E0FFE1',
+        cucumber200: '#C1FFC4',
+        cucumber300: '#8EF492',
+        cucumber400: '#63E768',
+        cucumber500: '#2DC233',
+        cucumber600: '#16A825',
+        cucumber700: '#00760C',
+        cucumber800: '#005108',
+        cucumber900: '#003005',
+        mint50: '#F3FFF9',
+        mint100: '#DBFFED',
+        mint200: '#B1FFDA',
+        mint300: '#68FFB6',
+        mint400: '#37EB94',
+        mint500: '#03D670',
+        mint600: '#00AF5B',
+        mint700: '#007C40',
+        mint800: '#00512A',
+        mint900: '#002E17',
+        seafoam50: '#F3FFFB',
+        seafoam100: '#DAFFF1',
+        seafoam200: '#ADFFE2',
+        seafoam300: '#66FFC8',
+        seafoam400: '#46EDB1',
+        seafoam500: '#2FD79A',
+        seafoam600: '#1BB980',
+        seafoam700: '#007C40',
+        seafoam800: '#005738',
+        seafoam900: '#00301F',
+        aqua50: '#F2FFFD',
+        aqua100: '#CFFFFC',
+        aqua200: '#94FFF9',
+        aqua300: '#47F9EE',
+        aqua400: '#0DECDE',
+        aqua500: '#00CFC3',
+        aqua600: '#00AFAF',
+        aqua700: '#007A7A',
+        aqua800: '#004F4F',
+        aqua900: '#002929',
+        sky50: '#F2FEFF',
+        sky100: '#CCFBFE',
+        sky200: '#9FF4FF',
+        sky300: '#5CEBFF',
+        sky400: '#22DCFE',
+        sky500: '#00C3E7',
+        sky600: '#009AC8',
+        sky700: '#006998',
+        sky800: '#003E66',
+        sky900: '#00213D',
+        azure50: '#F2FDFF',
+        azure100: '#CCF5FE',
+        azure200: '#9AE6FE',
+        azure300: '#67D1FC',
+        azure400: '#41B9FA',
+        azure500: '#0494F7',
+        azure600: '#0272D4',
+        azure700: '#004DA3',
+        azure800: '#003176',
+        azure900: '#001944',
+        blue50: '#F8FBFF',
+        blue100: '#DAE9FF',
+        blue200: '#AFCFFF',
+        blue300: '#86B6FF',
+        blue400: '#5B9DFF',
+        blue500: '#1F78FF',
+        blue600: '#085FE3',
+        blue700: '#0045AB',
+        blue800: '#002E72',
+        blue900: '#001D47',
+        info50: '#F2F7FF',
+        info100: '#E2ECFE',
+        info200: '#B6CFFC',
+        info300: '#8AACF7',
+        info400: '#8488FF',
+        info500: '#365EED',
+        info600: '#1B3CCE',
+        info700: '#0D26AB',
+        info800: '#0A1B7A',
+        info900: '#071356',
+        indigo50: '#F4F4FF',
+        indigo100: '#D8D1FA',
+        indigo200: '#B19FFF',
+        indigo300: '#886FFF',
+        indigo400: '#6545FF',
+        indigo500: '#4F2BFF',
+        indigo600: '#3D1BDE',
+        indigo700: '#2806C8',
+        indigo800: '#19018C',
+        indigo900: '#0F0053',
+        purple50: '#F3ECFF',
+        purple100: '#DCC9FD',
+        purple200: '#B58CF7',
+        purple300: '#965CF4',
+        purple400: '#7B34F2',
+        purple500: '#610BEF',
+        purple600: '#5109C7',
+        purple700: '#5109C7',
+        purple800: '#5109C7',
+        purple900: '#1B0049',
+        lavender50: '#F9F2FE',
+        lavender100: '#F3E6FE',
+        lavender200: '#E8CFFC',
+        lavender300: '#D8AFFA',
+        lavender400: '#B179F4',
+        lavender500: '#803CF2',
+        lavender600: '#551BCD',
+        lavender700: '#360A9A',
+        lavender800: '#220863',
+        lavender900: '#170346',
+        grape50: '#F9F2FF',
+        grape100: '#E7CEFF',
+        grape200: '#CB97FF',
+        grape300: '#B163FF',
+        grape400: '#9B37FF',
+        grape500: '#7D0BEF',
+        grape600: '#6800D0',
+        grape700: '#4E009C',
+        grape800: '#3C0077',
+        grape900: '#27004E',
+        violet50: '#FAF0FF',
+        violet100: '#EFCCFF',
+        violet200: '#E1A1FF',
+        violet300: '#D377FF',
+        violet400: '#C548FF',
+        violet500: '#AD04FD',
+        violet600: '#8800CA',
+        violet700: '#5E009C',
+        violet800: '#3D0073',
+        violet900: '#22004A',
+        orchid50: '#FDF1FF',
+        orchid100: '#F8CFFF',
+        orchid200: '#F19FFF',
+        orchid300: '#EB72FF',
+        orchid400: '#EB72FF',
+        orchid500: '#CA08EA',
+        orchid600: '#9E00C6',
+        orchid700: '#9E00C6',
+        orchid800: '#500064',
+        orchid900: '#500064',
+        magenta50: '#FFF3FC',
+        magenta100: '#FECEEE',
+        magenta200: '#FD9DE2',
+        magenta300: '#F96BD1',
+        magenta400: '#F346C5',
+        magenta500: '#EC0DC5',
+        magenta600: '#CA09BB',
+        magenta700: '#8D018E',
+        magenta800: '#8D018E',
+        magenta900: '#2F003C',
+        fuchsia50: '#FFF6FA',
+        fuchsia100: '#FFDFEC',
+        fuchsia200: '#FF87D5',
+        fuchsia300: '#FF96C2',
+        fuchsia400: '#FF60A3',
+        fuchsia500: '#FF3087',
+        fuchsia600: '#DB1668',
+        fuchsia700: '#9E0546',
+        fuchsia800: '#66002B',
+        fuchsia900: '#340016',
+        crimson50: '#FFF6FA',
+        crimson100: '#FCE8F1',
+        crimson200: '#F7CDE0',
+        crimson300: '#F39CC6',
+        crimson400: '#F6649D',
+        crimson500: '#DB195A',
+        crimson600: '#AB0F3E',
+        crimson700: '#880B2D',
+        crimson800: '#58071E',
+        crimson900: '#3D0514',
+        ruby50: '#FFF6FA',
+        ruby100: '#FFE5EA',
+        ruby200: '#FFC2CD',
+        ruby300: '#FF98AA',
+        ruby400: '#FF6A85',
+        ruby500: '#FF3B5E',
+        ruby600: '#AB0F3E',
+        ruby700: '#960A23',
+        ruby800: '#630012',
+        ruby900: '#39000B',
         black: '#2E2E2E',
         cherryRed: '#F62F5E',
         darkGrey: '#EFEFEF',
@@ -142,6 +554,258 @@ exports.theme = {
         skyBlue: '#1E90FF',
         white: '#FFFFFF',
     },
+    light: {
+        neutral0: '',
+        get neutral0Val() { return this.colors.white; },
+        neutral50: '',
+        get neutral50Val() { return this.colors.slate900; },
+        neutral100: '',
+        get neutral100Val() { return this.colors.slate100; },
+        neutral200: '',
+        get neutral200Val() { return this.colors.slate200; },
+        neutral300: '',
+        get neutral300Val() { return this.colors.slate300; },
+        neutral400: '',
+        get neutral400Val() { return this.colors.slate400; },
+        neutral500: '',
+        get neutral500Val() { return this.colors.slate500; },
+        neutral600: '',
+        get neutral600Val() { return this.colors.slate600; },
+        neutral700: '',
+        get neutral700Val() { return this.colors.slate700; },
+        neutral800: '',
+        get neutral800Val() { return this.colors.slate800; },
+        neutral900: '',
+        get neutral900Val() { return this.colors.slate900; },
+        neutral1000: '',
+        get neutral1000Val() { return this.colors.black; },
+        brand50: '',
+        get brand50Val() { return this.colors.lavender50; },
+        brand100: '',
+        get brand100Val() { return this.colors.lavender100; },
+        brand200: '',
+        get brand200Val() { return this.colors.lavender200; },
+        brand300: '',
+        get brand300Val() { return this.colors.lavender300; },
+        brand400: '',
+        get brand400Val() { return this.colors.lavender400; },
+        brand500: '',
+        get brand500Val() { return this.colors.lavender500; },
+        brand600: '',
+        get brand600Val() { return this.colors.lavender600; },
+        brand700: '',
+        get brand700Val() { return this.colors.lavender700; },
+        brand800: '',
+        get brand800Val() { return this.colors.lavender800; },
+        brand900: '',
+        get brand900Val() { return this.colors.lavender900; },
+        info50: '',
+        get info50Val() { return this.colors.info50; },
+        info100: '',
+        get info100Val() { return this.colors.info100; },
+        info200: '',
+        get info200Val() { return this.colors.info200; },
+        info300: '',
+        get info300Val() { return this.colors.info300; },
+        info400: '',
+        get info400Val() { return this.colors.info400; },
+        info500: '',
+        get info500Val() { return this.colors.info500; },
+        info600: '',
+        get info600Val() { return this.colors.info600; },
+        info700: '',
+        get info700Val() { return this.colors.info700; },
+        info800: '',
+        get info800Val() { return this.colors.info800; },
+        info900: '',
+        get info900Val() { return this.colors.info900; },
+        success50: '',
+        get success50Val() { return this.colors.emerald50; },
+        success100: '',
+        get success100Val() { return this.colors.emerald100; },
+        success200: '',
+        get success200Val() { return this.colors.emerald200; },
+        success300: '',
+        get success300Val() { return this.colors.emerald300; },
+        success400: '',
+        get success400Val() { return this.colors.emerald400; },
+        success500: '',
+        get success500Val() { return this.colors.emerald500; },
+        success600: '',
+        get success600Val() { return this.colors.emerald600; },
+        success700: '',
+        get success700Val() { return this.colors.emerald700; },
+        success800: '',
+        get success800Val() { return this.colors.emerald800; },
+        success900: '',
+        get success900Val() { return this.colors.emerald900; },
+        warning50: '',
+        get warning50Val() { return this.colors.honey50; },
+        warning100: '',
+        get warning100Val() { return this.colors.honey100; },
+        warning200: '',
+        get warning200Val() { return this.colors.honey200; },
+        warning300: '',
+        get warning300Val() { return this.colors.honey300; },
+        warning400: '',
+        get warning400Val() { return this.colors.honey400; },
+        warning500: '',
+        get warning500Val() { return this.colors.honey500; },
+        warning600: '',
+        get warning600Val() { return this.colors.honey600; },
+        warning700: '',
+        get warning700Val() { return this.colors.honey700; },
+        warning800: '',
+        get warning800Val() { return this.colors.honey800; },
+        warning900: '',
+        get warning900Val() { return this.colors.honey900; },
+        critical50: '',
+        get critical50Val() { return this.colors.fuchsia50; },
+        critical100: '',
+        get critical100Val() { return this.colors.fuchsia100; },
+        critical200: '',
+        get critical200Val() { return this.colors.fuchsia200; },
+        critical300: '',
+        get critical300Val() { return this.colors.fuchsia300; },
+        critical400: '',
+        get critical400Val() { return this.colors.fuchsia400; },
+        critical500: '',
+        get critical500Val() { return this.colors.fuchsia500; },
+        critical600: '',
+        get critical600Val() { return this.colors.fuchsia600; },
+        critical700: '',
+        get critical700Val() { return this.colors.fuchsia700; },
+        critical800: '',
+        get critical800Val() { return this.colors.fuchsia800; },
+        critical900: '',
+        get critical900Val() { return this.colors.fuchsia900; },
+    },
+    dark: {
+        neutral0: '',
+        get neutral0Val() { return this.colors.black; },
+        neutral50: '',
+        get neutral50Val() { return this.colors.slate900; },
+        neutral100: '',
+        get neutral100Val() { return this.colors.slate800; },
+        neutral200: '',
+        get neutral200Val() { return this.colors.slate700; },
+        neutral300: '',
+        get neutral300Val() { return this.colors.slate600; },
+        neutral400: '',
+        get neutral400Val() { return this.colors.slate500; },
+        neutral500: '',
+        get neutral500Val() { return this.colors.slate400; },
+        neutral600: '',
+        get neutral600Val() { return this.colors.slate300; },
+        neutral700: '',
+        get neutral700Val() { return this.colors.slate200; },
+        neutral800: '',
+        get neutral800Val() { return this.colors.slate100; },
+        neutral900: '',
+        get neutral900Val() { return this.colors.slate50; },
+        neutral1000: '',
+        get neutral1000Val() { return this.colors.white; },
+        brand50: '',
+        get brand50Val() { return this.colors.lavender50; },
+        brand100: '',
+        get brand100Val() { return this.colors.lavender100; },
+        brand200: '',
+        get brand200Val() { return this.colors.lavender200; },
+        brand300: '',
+        get brand300Val() { return this.colors.lavender300; },
+        brand400: '',
+        get brand400Val() { return this.colors.lavender400; },
+        brand500: '',
+        get brand500Val() { return this.colors.lavender500; },
+        brand600: '',
+        get brand600Val() { return this.colors.lavender600; },
+        brand700: '',
+        get brand700Val() { return this.colors.lavender700; },
+        brand800: '',
+        get brand800Val() { return this.colors.lavender800; },
+        brand900: '',
+        get brand900Val() { return this.colors.lavender900; },
+        info50: '',
+        get info50Val() { return this.colors.info50; },
+        info100: '',
+        get info100Val() { return this.colors.info100; },
+        info200: '',
+        get info200Val() { return this.colors.info200; },
+        info300: '',
+        get info300Val() { return this.colors.info300; },
+        info400: '',
+        get info400Val() { return this.colors.info400; },
+        info500: '',
+        get info500Val() { return this.colors.info500; },
+        info600: '',
+        get info600Val() { return this.colors.info600; },
+        info700: '',
+        get info700Val() { return this.colors.info700; },
+        info800: '',
+        get info800Val() { return this.colors.info800; },
+        info900: '',
+        get info900Val() { return this.colors.info900; },
+        success50: '',
+        get success50Val() { return this.colors.emerald50; },
+        success100: '',
+        get success100Val() { return this.colors.emerald100; },
+        success200: '',
+        get success200Val() { return this.colors.emerald200; },
+        success300: '',
+        get success300Val() { return this.colors.emerald300; },
+        success400: '',
+        get success400Val() { return this.colors.emerald400; },
+        success500: '',
+        get success500Val() { return this.colors.emerald500; },
+        success600: '',
+        get success600Val() { return this.colors.emerald600; },
+        success700: '',
+        get success700Val() { return this.colors.emerald700; },
+        success800: '',
+        get success800Val() { return this.colors.emerald800; },
+        success900: '',
+        get success900Val() { return this.colors.emerald900; },
+        warning50: '',
+        get warning50Val() { return this.colors.honey50; },
+        warning100: '',
+        get warning100Val() { return this.colors.honey100; },
+        warning200: '',
+        get warning200Val() { return this.colors.honey200; },
+        warning300: '',
+        get warning300Val() { return this.colors.honey300; },
+        warning400: '',
+        get warning400Val() { return this.colors.honey400; },
+        warning500: '',
+        get warning500Val() { return this.colors.honey500; },
+        warning600: '',
+        get warning600Val() { return this.colors.honey600; },
+        warning700: '',
+        get warning700Val() { return this.colors.honey700; },
+        warning800: '',
+        get warning800Val() { return this.colors.honey800; },
+        warning900: '',
+        get warning900Val() { return this.colors.honey900; },
+        critical50: '',
+        get critical50Val() { return this.colors.fuchsia50; },
+        critical100: '',
+        get critical100Val() { return this.colors.fuchsia100; },
+        critical200: '',
+        get critical200Val() { return this.colors.fuchsia200; },
+        critical300: '',
+        get critical300Val() { return this.colors.fuchsia300; },
+        critical400: '',
+        get critical400Val() { return this.colors.fuchsia400; },
+        critical500: '',
+        get critical500Val() { return this.colors.fuchsia500; },
+        critical600: '',
+        get critical600Val() { return this.colors.fuchsia600; },
+        critical700: '',
+        get critical700Val() { return this.colors.fuchsia700; },
+        critical800: '',
+        get critical800Val() { return this.colors.fuchsia800; },
+        critical900: '',
+        get critical900Val() { return this.colors.fuchsia900; },
+    },
     misc: {
         darkMode: false,
         wrapperWidth: '90%',