@votercircle/clay-v2-theme-provider 1.0.0

package/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider } from './theme-provider';
+export { ThemeProviderProps } from './theme-provider';
+export { DefaultPalette, StatesType } from './theme.config';

package/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.DefaultPalette = exports.ThemeProvider = void 0;
+var theme_provider_1 = require("./theme-provider");
+__createBinding(exports, theme_provider_1, "ThemeProvider");
+var theme_config_1 = require("./theme.config");
+__createBinding(exports, theme_config_1, "DefaultPalette");

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@votercircle/clay-v2-theme-provider",
+  "version": "1.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "styled-components": ">=5"
+  }
+}

package/theme-provider.d.ts

@@ -0,0 +1,6 @@
+import { Palette } from './theme.config';
+export declare type ThemeProviderProps = {
+    palette?: Palette;
+    children?: any;
+};
+export declare function ThemeProvider({ palette, children }: ThemeProviderProps): JSX.Element;

package/theme-provider.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+exports.ThemeProvider = void 0;
+var react_1 = __importStar(require("react"));
+var theme_config_1 = require("./theme.config");
+function ThemeProvider(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
+    var palette = _a.palette, children = _a.children;
+    /**
+     * prop palette can override any particular color from DefaultPalette
+     */
+    var themeMapper = {
+        'pdi-clay-theme-primary-main': ((_b = palette === null || palette === void 0 ? void 0 : palette.primary) === null || _b === void 0 ? void 0 : _b.main) || ((_c = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.primary) === null || _c === void 0 ? void 0 : _c.main),
+        'pdi-clay-theme-primary-dark': ((_d = palette === null || palette === void 0 ? void 0 : palette.primary) === null || _d === void 0 ? void 0 : _d.dark) || ((_e = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.primary) === null || _e === void 0 ? void 0 : _e.dark),
+        'pdi-clay-theme-primary-light': ((_f = palette === null || palette === void 0 ? void 0 : palette.primary) === null || _f === void 0 ? void 0 : _f.light) || ((_g = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.primary) === null || _g === void 0 ? void 0 : _g.light),
+        'pdi-clay-theme-secondary-main': ((_h = palette === null || palette === void 0 ? void 0 : palette.secondary) === null || _h === void 0 ? void 0 : _h.main) || ((_j = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.secondary) === null || _j === void 0 ? void 0 : _j.main),
+        'pdi-clay-theme-secondary-dark': ((_k = palette === null || palette === void 0 ? void 0 : palette.secondary) === null || _k === void 0 ? void 0 : _k.dark) || ((_l = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.secondary) === null || _l === void 0 ? void 0 : _l.dark),
+        'pdi-clay-theme-secondary-light': ((_m = palette === null || palette === void 0 ? void 0 : palette.secondary) === null || _m === void 0 ? void 0 : _m.light) || ((_o = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.secondary) === null || _o === void 0 ? void 0 : _o.light),
+        'pdi-clay-theme-danger-main': ((_p = palette === null || palette === void 0 ? void 0 : palette.danger) === null || _p === void 0 ? void 0 : _p.main) || ((_q = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.danger) === null || _q === void 0 ? void 0 : _q.main),
+        'pdi-clay-theme-danger-dark': ((_r = palette === null || palette === void 0 ? void 0 : palette.danger) === null || _r === void 0 ? void 0 : _r.dark) || ((_s = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.danger) === null || _s === void 0 ? void 0 : _s.dark),
+        'pdi-clay-theme-danger-light': ((_t = palette === null || palette === void 0 ? void 0 : palette.danger) === null || _t === void 0 ? void 0 : _t.light) || ((_u = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.danger) === null || _u === void 0 ? void 0 : _u.light),
+        'pdi-clay-theme-success-main': ((_v = palette === null || palette === void 0 ? void 0 : palette.success) === null || _v === void 0 ? void 0 : _v.main) || ((_w = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.success) === null || _w === void 0 ? void 0 : _w.main),
+        'pdi-clay-theme-success-dark': ((_x = palette === null || palette === void 0 ? void 0 : palette.success) === null || _x === void 0 ? void 0 : _x.dark) || ((_y = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.success) === null || _y === void 0 ? void 0 : _y.dark),
+        'pdi-clay-theme-success-light': ((_z = palette === null || palette === void 0 ? void 0 : palette.success) === null || _z === void 0 ? void 0 : _z.light) || ((_0 = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.success) === null || _0 === void 0 ? void 0 : _0.light),
+        'pdi-clay-theme-grey-main': ((_1 = palette === null || palette === void 0 ? void 0 : palette.grey) === null || _1 === void 0 ? void 0 : _1.main) || ((_2 = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.grey) === null || _2 === void 0 ? void 0 : _2.main),
+        'pdi-clay-theme-grey-dark': ((_3 = palette === null || palette === void 0 ? void 0 : palette.grey) === null || _3 === void 0 ? void 0 : _3.dark) || ((_4 = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.grey) === null || _4 === void 0 ? void 0 : _4.dark),
+        'pdi-clay-theme-grey-light': ((_5 = palette === null || palette === void 0 ? void 0 : palette.grey) === null || _5 === void 0 ? void 0 : _5.light) || ((_6 = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.grey) === null || _6 === void 0 ? void 0 : _6.light),
+        'pdi-clay-theme-black-main': ((_7 = palette === null || palette === void 0 ? void 0 : palette.black) === null || _7 === void 0 ? void 0 : _7.main) || ((_8 = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.black) === null || _8 === void 0 ? void 0 : _8.main),
+        'pdi-clay-theme-black-dark': ((_9 = palette === null || palette === void 0 ? void 0 : palette.black) === null || _9 === void 0 ? void 0 : _9.dark) || ((_10 = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.black) === null || _10 === void 0 ? void 0 : _10.dark),
+        'pdi-clay-theme-black-light': ((_11 = palette === null || palette === void 0 ? void 0 : palette.black) === null || _11 === void 0 ? void 0 : _11.light) || ((_12 = theme_config_1.DefaultPalette === null || theme_config_1.DefaultPalette === void 0 ? void 0 : theme_config_1.DefaultPalette.black) === null || _12 === void 0 ? void 0 : _12.light)
+    };
+    var setCSSVariables = function (theme) {
+        for (var value in theme) {
+            document.documentElement.style.setProperty("--".concat(value), theme[value]);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        setCSSVariables(themeMapper);
+    });
+    return react_1["default"].createElement(react_1["default"].Fragment, null, children);
+}
+exports.ThemeProvider = ThemeProvider;

package/theme.config.d.ts

@@ -0,0 +1,20 @@
+declare enum PaletteSchema {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    SUCCESS = "success",
+    WARNING = "warning",
+    DANGER = "danger",
+    GREY = "grey",
+    BLACK = "black"
+}
+declare const STATES_LIST: readonly ["primary", "secondary", "success", "warning", "danger", "inactive", "default"];
+export declare type StatesType = typeof STATES_LIST[number];
+export declare type Palette = {
+    [key in PaletteSchema]?: {
+        main?: string;
+        light?: string;
+        dark?: string;
+    };
+};
+export declare const DefaultPalette: Palette;
+export {};

package/theme.config.js

@@ -0,0 +1,60 @@
+"use strict";
+var _a;
+exports.__esModule = true;
+exports.DefaultPalette = void 0;
+var PaletteSchema;
+(function (PaletteSchema) {
+    PaletteSchema["PRIMARY"] = "primary";
+    PaletteSchema["SECONDARY"] = "secondary";
+    PaletteSchema["SUCCESS"] = "success";
+    PaletteSchema["WARNING"] = "warning";
+    PaletteSchema["DANGER"] = "danger";
+    PaletteSchema["GREY"] = "grey";
+    PaletteSchema["BLACK"] = "black";
+})(PaletteSchema || (PaletteSchema = {}));
+var STATES_LIST = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'inactive',
+    'default',
+];
+exports.DefaultPalette = (_a = {},
+    _a[PaletteSchema.PRIMARY] = {
+        main: '#356AF4',
+        light: '#90D8FF',
+        dark: '#0040c0'
+    },
+    _a[PaletteSchema.SECONDARY] = {
+        main: '#356AF4',
+        light: '#90D8FF',
+        dark: '#0040c0'
+    },
+    _a[PaletteSchema.SUCCESS] = {
+        main: '#31A249',
+        light: '#CBEBCB',
+        dark: '#237E37'
+    },
+    _a[PaletteSchema.WARNING] = {
+        main: '#F49900',
+        light: '#FDF1DD',
+        dark: '#F49900'
+    },
+    _a[PaletteSchema.DANGER] = {
+        main: '#FF0000',
+        light: '#FFD9C6',
+        dark: '#FF0000'
+    },
+    _a[PaletteSchema.GREY] = {
+        main: '#B0B0B0',
+        light: '#F7F7F7',
+        dark: '#818181'
+    },
+    _a[PaletteSchema.BLACK] = {
+        main: '#2C2C2C',
+        light: '#555555',
+        dark: '#000000'
+    },
+    _a);