@guptasiddhant/theme-manager-js - npm Package Compare versions

Comparing version 1.0.0-ALPHA.1 to 1.0.0-ALPHA.2

dist/index.es.js

@@ -1,2 +0,389 @@
-import e from"webfontloader";var n={hide:-1,menu:0,base:50,docked:100,sticky:1100,banner:1200,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,contextMenu:1800,tooltip:2e3},t={default:"0 0 var(--spacing-md) 0 var(--colors-outline-shadow)",large:"0 0 var(--spacing-xl) 0 var(--colors-outline-shadow)",hover:"0 0 var(--spacing-md) 0 var(--colors-outline-shadowHover)",active:"0 0 var(--spacing-sm) 0 var(--colors-outline-shadowActive)",outline:"0 0 1px 0 var(--colors-outline-border)",inner:"inset 0 0 var(--spacing-xs) 0 var(--colors-outline-shadow)"},o=function(){return(o=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)},r=function(e){var n=o({},e.fontConfig);return n.google?n.google.families.join(", "):n.typekit?n.typekit.id||"":n.fontdeck?n.fontdeck.id||"":n.monotype?n.monotype.projectId||"":n.custom&&n.custom.families?n.custom.families.join(", ")||"":"Muil"},i=function(e,n,t){var r="";r+="--"+e+": "+n.toString()+"px;";for(var i=0,a=Object.entries(o({},t));i<a.length;i++){var l=a[i];r+="--"+e+"-"+l[0]+": "+(n*l[1]).toString()+"px;"}return r+="--"+e+"-none: "+(0*n).toString()+"px;"},a=function(e,n){var t=":root {";localStorage.setItem("darkMode",n.toString()),t+="--darkmode: "+n.toString()+";",t+=function(e,n){function t(e,n){return e=e.replace("#",""),"rgba("+parseInt(e.substring(0,2),16)+","+parseInt(e.substring(2,4),16)+","+parseInt(e.substring(4,6),16)+","+n/100+")"}for(var r=n&&e.darkColors?e.darkColors:e.lightColors,i="",a=0,l=Object.entries(o({},r));a<l.length;a++)for(var s=l[a],c=s[0],d=s[1],g=0,f=Object.entries(o({},d));g<f.length;g++){var u=f[g],p=u[0],b=u[1];if("tint"===c)for(var h=100;h>=0;h-=10)i+="--colors-"+c+"-"+p+"-"+h.toString()+": "+t(b,h)+";";else i+="--colors-"+c+"-"+p+": "+b+";"}return i}(e,n),t+=i("radius",e.baseRadius,e.sizeMultiplier),t+=i("spacing",e.baseSpacing,e.sizeMultiplier),t+="} ",t+=function(e){function n(e,n){return"{ \n      display: inline;\n      font-family: "+e+";\n      font-style: normal;\n      font-size: "+n.fontSize+"; \n      font-weight: "+n.fontWeight+"; \n      line-height: "+n.lineHeight+"; \n      letter-spacing: "+n.letterSpacing+"; \n      text-transform: "+n.textTransform+"; \n      margin: 0;\n      vertical-align: bottom;\n      white-space: wrap;\n    }"}var t="";return Object.entries(e.text).forEach((function(o){var i=o[0],a=o[1];void 0!==a.fontSize&&(t+=i+", ."+i+" "+n(r(e.text),a))})),t+="code, .code "+n(r(e.code),e.code.style)}(e);var a=document.createElement("style");a.innerHTML=t,document.head.insertAdjacentElement("beforeend",a)},l={lightColors:{text:{primary:"#000000",secondary:"#4d4d4d",disabled:"#8E8E93",inverse:"#f2f2f2"},background:{elevated:"#FFFFFF",base:"#FAFAFF",disabled:"#F2F2F7",overlay:"rgba(0,0,0,0.25)",selected:"rgba(0,0,0,0.1)",hover:"rgba(0,0,0,0.05)",rowAlt:"rgba(0,0,0,0.025)",inverse:"#000000"},outline:{shadow:"#E1E1E6",shadowHover:"rgba(0,0,0,0.5)",shadowActive:"rgba(351,100,68,0.2)",border:"#CECED9",borderHover:"#CECED9",borderActive:"#CECED9"},tint:{accent:"#AE001A",red:"#FF3B30",orange:"#FF9500",yellow:"#FFCC00",green:"#2EB24F",blue:"#007AFF",purple:"#AF52DE",black:"#000000",white:"#FFFFFF"}},darkColors:{text:{primary:"#FFFFFF",secondary:"#C6C6C8",disabled:"#8E8E93",inverse:"#202020"},background:{base:"#1C1C1E",elevated:"#333333",overlay:"rgba(0,0,0,0.5)",selected:"rgba(255,255,255,0.2)",disabled:"#111111",hover:"rgba(255,255,255,0.1)",rowAlt:"rgba(255,255,255,0.05)",inverse:"#FFFFFF"},outline:{shadow:"#18181A",shadowHover:"rgba(255,255,255,0.5)",shadowActive:"rgba(351,100,68,0.2)",border:"#4D4D4D",borderHover:"#4D4D4D",borderActive:"#4D4D4D"},tint:{accent:"#AE001A",red:"#FF453A",orange:"#FF9F0A",yellow:"#FFD60A",green:"#32D74B",blue:"#0A84FF",purple:"#BF5AF2",black:"#000000",white:"#FFFFFF"}},baseRadius:8,baseSpacing:8,sizeMultiplier:{xs:.25,sm:.5,md:1,lg:1.5,xl:2},code:{fontConfig:{google:{families:["Fira Code"]}},style:{fontSize:"14px",fontWeight:"normal",lineHeight:"20px",letterSpacing:0,textTransform:"none"}},text:{fontConfig:{google:{families:["Muli"]}},h1:{fontSize:"26px",fontWeight:800,lineHeight:"36px",letterSpacing:0,textTransform:"capitalize"},h2:{fontSize:"22px",fontWeight:700,lineHeight:"32px",letterSpacing:0,textTransform:"none"},h3:{fontSize:"18px",fontWeight:700,lineHeight:"24px",letterSpacing:0,textTransform:"none"},h4:{fontSize:"16px",fontWeight:400,lineHeight:"22px",letterSpacing:0,textTransform:"none"},h5:{fontSize:"14px",fontWeight:700,lineHeight:"20px",letterSpacing:"0.5px",textTransform:"none"},h6:{fontSize:"12px",fontWeight:700,lineHeight:"16px",letterSpacing:"0.25px",textTransform:"none"},strong:{fontSize:"12px",fontWeight:900,lineHeight:"16px",letterSpacing:"1px",textTransform:"uppercase"},p:{fontSize:"14px",fontWeight:400,lineHeight:"20px",letterSpacing:0,textTransform:"none"},small:{fontSize:"12px",fontWeight:400,lineHeight:"16px",letterSpacing:0,textTransform:"none"}}},s={radius:function(e){return void 0===e&&(e="md"),"var(--radius-"+e+")"},spacing:function(e){return void 0===e&&(e="md"),"var(--spacing-"+e+")"},zIndex:function(e){return void 0===e&&(e="base"),n[e]},shadow:function(e){return void 0===e&&(e="default"),t[e]},colorText:function(e){return void 0===e&&(e="primary"),"var(--colors-text-"+e+")"},colorBackground:function(e){return void 0===e&&(e="base"),"var(--colors-background-"+e+")"},colorOutline:function(e){return void 0===e&&(e="border"),"var(--colors-outline-"+e+")"},colorTint:function(e,n){void 0===e&&(e="accent"),void 0===n&&(n=100),"danger"===e&&(e="red"),"warning"===e&&(e="orange"),"success"===e&&(e="green"),"info"===e&&(e="blue");var t="var(--colors-tint-"+e;return(n=10*Math.round(Math.abs(n)/10))>100&&(n=100),n<0&&(n=0),(t+="-"+n.toString())+")"}};function c(n,t,o){void 0===n&&(n=l),void 0===t&&(t=!1),void 0===o&&(o=""),e.load(n.text.fontConfig),e.load(n.code.fontConfig),a(n,t),function(e,n){var t=document.createElement("style");t.innerHTML="\n    :root {\n      background: white;\n    }\n\n    html {\n      box-sizing: border-box;\n    }\n\n    * {\n      /* width */\n      ::-webkit-scrollbar,\n      ::-webkit-scrollbar:horizontal,\n      ::-webkit-scrollbar:vertical {\n        width: "+e.spacing()+";\n        height: "+e.spacing()+";\n      }\n\n      /* Track & corner */\n      ::-webkit-scrollbar-track,\n      ::-webkit-scrollbar-corner {\n        /* box-shadow: inset 0 0 5px grey; */\n        background: "+e.colorBackground("hover")+";\n      }\n\n      /* Handle */\n      ::-webkit-scrollbar-thumb {\n        background: "+e.colorText("disabled")+";\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      ::-webkit-scrollbar-thumb:hover {\n        background: "+e.colorOutline("shadowHover")+";\n      }\n    }\n\n    *,\n    *:before,\n    *:after {\n      box-sizing: inherit;\n      scrollbar-color: var(--themeMode);\n    }\n\n    *:focus {\n      outline: none !important;\n    }\n\n    html,\n    body {\n      margin: 0;\n      padding: 0;\n      width: 100vw;\n      height: 100vh;\n      font-family: "+e.fontName()+", Muli, sans-serif;\n      font-size: 14px;\n      color: "+e.colorText()+";\n    }\n\n    .noselect {s\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    "+n+"\n  ",document.head.insertAdjacentElement("beforeend",t)}(s,o)}export default s;export{s as Theme,c as setTheme};
+import WebFont from 'webfontloader';
+
+// List of zIndex
+var zIndices = {
+    hide: -1,
+    menu: 0,
+    base: 50,
+    docked: 100,
+    sticky: 1100,
+    banner: 1200,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    contextMenu: 1800,
+    tooltip: 2000,
+};
+// List of Shadows
+var shadows = {
+    default: '0 0 var(--spacing-md) 0 var(--colors-outline-shadow)',
+    large: '0 0 var(--spacing-xl) 0 var(--colors-outline-shadow)',
+    hover: '0 0 var(--spacing-md) 0 var(--colors-outline-shadowHover)',
+    active: '0 0 var(--spacing-sm) 0 var(--colors-outline-shadowActive)',
+    outline: "0 0 1px 0 var(--colors-outline-border)",
+    inner: "inset 0 0 var(--spacing-xs) 0 var(--colors-outline-shadow)",
+};
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var isThemeTextStyle = function (obj) { return obj.fontSize !== undefined; };
+
+var getFontName = function (text) {
+    var config = __assign({}, text.fontConfig);
+    if (config.google)
+        return config.google.families.join(", ");
+    else if (config.typekit)
+        return config.typekit.id || "";
+    else if (config.fontdeck)
+        return config.fontdeck.id || "";
+    else if (config.monotype)
+        return config.monotype.projectId || "";
+    else if (config.custom && config.custom.families)
+        return config.custom.families.join(", ") || "";
+    return "Muil";
+};
+var getColorTint = function (type, opacity) {
+    if (type === void 0) { type = "accent"; }
+    if (opacity === void 0) { opacity = 100; }
+    // Semantic colors
+    if (type === "danger")
+        type = "red";
+    if (type === "warning")
+        type = "orange";
+    if (type === "success")
+        type = "green";
+    if (type === "info")
+        type = "blue";
+    var str = "var(--colors-tint-" + type;
+    opacity = Math.round(Math.abs(opacity) / 10) * 10;
+    if (opacity > 100)
+        opacity = 100;
+    if (opacity < 0)
+        opacity = 0;
+    str += "-" + opacity.toString();
+    return str + ")";
+};
+var generateColorsCSS = function (theme, enableDarkMode) {
+    function convertHex(hex, opacity) {
+        hex = hex.replace("#", "");
+        var r = parseInt(hex.substring(0, 2), 16);
+        var g = parseInt(hex.substring(2, 4), 16);
+        var b = parseInt(hex.substring(4, 6), 16);
+        return "rgba(" + r + "," + g + "," + b + "," + opacity / 100 + ")";
+    }
+    var colors = enableDarkMode && theme.darkColors ? theme.darkColors : theme.lightColors;
+    var cssString = "";
+    for (var _i = 0, _a = Object.entries(__assign({}, colors)); _i < _a.length; _i++) {
+        var _b = _a[_i], key1 = _b[0], value1 = _b[1];
+        for (var _c = 0, _d = Object.entries(__assign({}, value1)); _c < _d.length; _c++) {
+            var _e = _d[_c], key2 = _e[0], value2 = _e[1];
+            if (key1 === "tint")
+                for (var opacity = 100; opacity >= 0; opacity -= 10)
+                    cssString += "--colors-" + key1 + "-" + key2 + "-" + opacity.toString() + ": " + convertHex(value2, opacity) + ";";
+            else
+                cssString += "--colors-" + key1 + "-" + key2 + ": " + value2 + ";";
+        }
+    }
+    return cssString;
+};
+var generateSMLCSS = function (type, base, size) {
+    var cssString = "";
+    cssString += "--" + type + ": " + base.toString() + "px;";
+    for (var _i = 0, _a = Object.entries(__assign({}, size)); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        cssString += "--" + type + "-" + key + ": " + (base * value).toString() + "px;";
+    }
+    cssString += "--" + type + "-none: " + (base * 0).toString() + "px;";
+    return cssString;
+};
+var generateFontCSS = function (theme) {
+    function fontCSSString(name, style) {
+        return "{ \n      display: inline;\n      font-family: " + name + ";\n      font-style: normal;\n      font-size: " + style.fontSize + "; \n      font-weight: " + style.fontWeight + "; \n      line-height: " + style.lineHeight + "; \n      letter-spacing: " + style.letterSpacing + "; \n      text-transform: " + style.textTransform + "; \n      margin: 0;\n      vertical-align: bottom;\n      white-space: wrap;\n    }";
+    }
+    var cssString = "";
+    Object.entries(theme.text).forEach(function (_a) {
+        var key = _a[0], val = _a[1];
+        if (isThemeTextStyle(val))
+            cssString += key + ", ." + key + " " + fontCSSString(getFontName(theme.text), val);
+    });
+    cssString += "code, .code " + fontCSSString(getFontName(theme.code), theme.code.style);
+    return cssString;
+};
+var generateThemeCSS = function (theme, enableDarkMode) {
+    // CSSstring contains the variables-value pairs
+    var cssString = ":root {";
+    // Set DarkMode globally
+    localStorage.setItem("darkMode", enableDarkMode.toString());
+    cssString += "--darkmode: " + enableDarkMode.toString() + ";";
+    // Colors
+    cssString += generateColorsCSS(theme, enableDarkMode);
+    // Radius
+    cssString += generateSMLCSS("radius", theme.baseRadius, theme.sizeMultiplier);
+    // Spacing
+    cssString += generateSMLCSS("spacing", theme.baseSpacing, theme.sizeMultiplier);
+    // Close ROOT
+    cssString += "} ";
+    // Text
+    cssString += generateFontCSS(theme);
+    // Place it in CSS
+    var styleTag = document.createElement("style");
+    styleTag.innerHTML = cssString;
+    document.head.insertAdjacentElement("beforeend", styleTag);
+};
+var generateGlobalCSS = function (Theme, globalCss) {
+    var styleTag = document.createElement("style");
+    styleTag.innerHTML = "\n    :root {\n      background: white;\n    }\n\n    html {\n      box-sizing: border-box;\n    }\n\n    * {\n      /* width */\n      ::-webkit-scrollbar,\n      ::-webkit-scrollbar:horizontal,\n      ::-webkit-scrollbar:vertical {\n        width: " + Theme.spacing() + ";\n        height: " + Theme.spacing() + ";\n      }\n\n      /* Track & corner */\n      ::-webkit-scrollbar-track,\n      ::-webkit-scrollbar-corner {\n        /* box-shadow: inset 0 0 5px grey; */\n        background: " + Theme.colorBackground("hover") + ";\n      }\n\n      /* Handle */\n      ::-webkit-scrollbar-thumb {\n        background: " + Theme.colorText("disabled") + ";\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      ::-webkit-scrollbar-thumb:hover {\n        background: " + Theme.colorOutline("shadowHover") + ";\n      }\n    }\n\n    *,\n    *:before,\n    *:after {\n      box-sizing: inherit;\n      scrollbar-color: var(--themeMode);\n    }\n\n    *:focus {\n      outline: none !important;\n    }\n\n    html,\n    body {\n      margin: 0;\n      padding: 0;\n      width: 100vw;\n      height: 100vh;\n      font-family: Muli, sans-serif;\n      font-size: 14px;\n      color: " + Theme.colorText() + ";\n    }\n\n    .noselect {s\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    " + globalCss + "\n  ";
+    document.head.insertAdjacentElement("beforeend", styleTag);
+};
+
+var DefaultTheme = {
+    lightColors: {
+        text: {
+            primary: "#000000",
+            secondary: "#4d4d4d",
+            disabled: "#8E8E93",
+            inverse: "#f2f2f2"
+        },
+        background: {
+            elevated: "#FFFFFF",
+            base: "#FAFAFF",
+            disabled: "#F2F2F7",
+            overlay: "rgba(0,0,0,0.25)",
+            selected: "rgba(0,0,0,0.1)",
+            hover: "rgba(0,0,0,0.05)",
+            rowAlt: "rgba(0,0,0,0.025)",
+            inverse: "#000000"
+        },
+        outline: {
+            shadow: "#E1E1E6",
+            shadowHover: "rgba(0,0,0,0.5)",
+            shadowActive: "rgba(351,100,68,0.2)",
+            border: "#CECED9",
+            borderHover: "#CECED9",
+            borderActive: "#CECED9"
+        },
+        tint: {
+            accent: "#AE001A",
+            red: "#FF3B30",
+            orange: "#FF9500",
+            yellow: "#FFCC00",
+            green: "#2EB24F",
+            blue: "#007AFF",
+            purple: "#AF52DE",
+            black: "#000000",
+            white: "#FFFFFF"
+        }
+    },
+    darkColors: {
+        text: {
+            primary: "#FFFFFF",
+            secondary: "#C6C6C8",
+            disabled: "#8E8E93",
+            inverse: "#202020"
+        },
+        background: {
+            base: "#1C1C1E",
+            elevated: "#333333",
+            overlay: "rgba(0,0,0,0.5)",
+            selected: "rgba(255,255,255,0.2)",
+            disabled: "#111111",
+            hover: "rgba(255,255,255,0.1)",
+            rowAlt: "rgba(255,255,255,0.05)",
+            inverse: "#FFFFFF"
+        },
+        outline: {
+            shadow: "#18181A",
+            shadowHover: "rgba(255,255,255,0.5)",
+            shadowActive: "rgba(351,100,68,0.2)",
+            border: "#4D4D4D",
+            borderHover: "#4D4D4D",
+            borderActive: "#4D4D4D"
+        },
+        tint: {
+            accent: "#AE001A",
+            red: "#FF453A",
+            orange: "#FF9F0A",
+            yellow: "#FFD60A",
+            green: "#32D74B",
+            blue: "#0A84FF",
+            purple: "#BF5AF2",
+            black: "#000000",
+            white: "#FFFFFF"
+        }
+    },
+    baseRadius: 8,
+    baseSpacing: 8,
+    sizeMultiplier: {
+        xs: 0.25,
+        sm: 0.5,
+        md: 1,
+        lg: 1.5,
+        xl: 2
+    },
+    code: {
+        fontConfig: {
+            google: {
+                families: ["Fira Code"]
+            }
+        },
+        style: {
+            fontSize: "14px",
+            fontWeight: "normal",
+            lineHeight: "20px",
+            letterSpacing: 0,
+            textTransform: "none"
+        }
+    },
+    text: {
+        fontConfig: {
+            google: {
+                families: ["Muli"]
+            }
+        },
+        h1: {
+            fontSize: "26px",
+            fontWeight: 800,
+            lineHeight: "36px",
+            letterSpacing: 0,
+            textTransform: "capitalize"
+        },
+        h2: {
+            fontSize: "22px",
+            fontWeight: 700,
+            lineHeight: "32px",
+            letterSpacing: 0,
+            textTransform: "none"
+        },
+        h3: {
+            fontSize: "18px",
+            fontWeight: 700,
+            lineHeight: "24px",
+            letterSpacing: 0,
+            textTransform: "none"
+        },
+        h4: {
+            fontSize: "16px",
+            fontWeight: 400,
+            lineHeight: "22px",
+            letterSpacing: 0,
+            textTransform: "none"
+        },
+        h5: {
+            fontSize: "14px",
+            fontWeight: 700,
+            lineHeight: "20px",
+            letterSpacing: "0.5px",
+            textTransform: "none"
+        },
+        h6: {
+            fontSize: "12px",
+            fontWeight: 700,
+            lineHeight: "16px",
+            letterSpacing: "0.25px",
+            textTransform: "none"
+        },
+        strong: {
+            fontSize: "12px",
+            fontWeight: 900,
+            lineHeight: "16px",
+            letterSpacing: "1px",
+            textTransform: "uppercase"
+        },
+        p: {
+            fontSize: "14px",
+            fontWeight: 400,
+            lineHeight: "20px",
+            letterSpacing: 0,
+            textTransform: "none"
+        },
+        small: {
+            fontSize: "12px",
+            fontWeight: 400,
+            lineHeight: "16px",
+            letterSpacing: 0,
+            textTransform: "none"
+        }
+    }
+};
+
+// Theme Object
+var Theme = {
+    // Radius
+    radius: function (type) {
+        if (type === void 0) { type = "md"; }
+        return "var(--radius-" + type + ")";
+    },
+    // Scacing
+    spacing: function (type) {
+        if (type === void 0) { type = "md"; }
+        return "var(--spacing-" + type + ")";
+    },
+    // zIndex
+    zIndex: function (type) {
+        if (type === void 0) { type = "base"; }
+        return zIndices[type];
+    },
+    // Shadows
+    shadow: function (type) {
+        if (type === void 0) { type = "default"; }
+        return shadows[type];
+    },
+    // Colors
+    colorText: function (type) {
+        if (type === void 0) { type = "primary"; }
+        return "var(--colors-text-" + type + ")";
+    },
+    colorBackground: function (type) {
+        if (type === void 0) { type = "base"; }
+        return "var(--colors-background-" + type + ")";
+    },
+    colorOutline: function (type) {
+        if (type === void 0) { type = "border"; }
+        return "var(--colors-outline-" + type + ")";
+    },
+    colorTint: getColorTint
+};
+/**
+ * Function to set or update theme.
+ * The function wirtes global/root CSS which then can be accessed by any component.
+ */
+function setTheme(theme, enableDarkMode, globalCSS) {
+    if (theme === void 0) { theme = DefaultTheme; }
+    if (enableDarkMode === void 0) { enableDarkMode = false; }
+    if (globalCSS === void 0) { globalCSS = ""; }
+    // Load fonts
+    WebFont.load(theme.text.fontConfig);
+    WebFont.load(theme.code.fontConfig);
+    generateThemeCSS(theme, enableDarkMode);
+    generateGlobalCSS(Theme, globalCSS);
+}
+
+export default Theme;
+export { Theme, setTheme };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -1,2 +0,396 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=(e=require("webfontloader"))&&"object"==typeof e&&"default"in e?e.default:e,t={hide:-1,menu:0,base:50,docked:100,sticky:1100,banner:1200,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,contextMenu:1800,tooltip:2e3},o={default:"0 0 var(--spacing-md) 0 var(--colors-outline-shadow)",large:"0 0 var(--spacing-xl) 0 var(--colors-outline-shadow)",hover:"0 0 var(--spacing-md) 0 var(--colors-outline-shadowHover)",active:"0 0 var(--spacing-sm) 0 var(--colors-outline-shadowActive)",outline:"0 0 1px 0 var(--colors-outline-border)",inner:"inset 0 0 var(--spacing-xs) 0 var(--colors-outline-shadow)"},r=function(){return(r=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)},i=function(e){var n=r({},e.fontConfig);return n.google?n.google.families.join(", "):n.typekit?n.typekit.id||"":n.fontdeck?n.fontdeck.id||"":n.monotype?n.monotype.projectId||"":n.custom&&n.custom.families?n.custom.families.join(", ")||"":"Muil"},a=function(e,n,t){var o="";o+="--"+e+": "+n.toString()+"px;";for(var i=0,a=Object.entries(r({},t));i<a.length;i++){var l=a[i];o+="--"+e+"-"+l[0]+": "+(n*l[1]).toString()+"px;"}return o+="--"+e+"-none: "+(0*n).toString()+"px;"},l=function(e,n){var t=":root {";localStorage.setItem("darkMode",n.toString()),t+="--darkmode: "+n.toString()+";",t+=function(e,n){function t(e,n){return e=e.replace("#",""),"rgba("+parseInt(e.substring(0,2),16)+","+parseInt(e.substring(2,4),16)+","+parseInt(e.substring(4,6),16)+","+n/100+")"}for(var o=n&&e.darkColors?e.darkColors:e.lightColors,i="",a=0,l=Object.entries(r({},o));a<l.length;a++)for(var s=l[a],c=s[0],d=s[1],g=0,u=Object.entries(r({},d));g<u.length;g++){var f=u[g],p=f[0],b=f[1];if("tint"===c)for(var h=100;h>=0;h-=10)i+="--colors-"+c+"-"+p+"-"+h.toString()+": "+t(b,h)+";";else i+="--colors-"+c+"-"+p+": "+b+";"}return i}(e,n),t+=a("radius",e.baseRadius,e.sizeMultiplier),t+=a("spacing",e.baseSpacing,e.sizeMultiplier),t+="} ",t+=function(e){function n(e,n){return"{ \n      display: inline;\n      font-family: "+e+";\n      font-style: normal;\n      font-size: "+n.fontSize+"; \n      font-weight: "+n.fontWeight+"; \n      line-height: "+n.lineHeight+"; \n      letter-spacing: "+n.letterSpacing+"; \n      text-transform: "+n.textTransform+"; \n      margin: 0;\n      vertical-align: bottom;\n      white-space: wrap;\n    }"}var t="";return Object.entries(e.text).forEach((function(o){var r=o[0],a=o[1];void 0!==a.fontSize&&(t+=r+", ."+r+" "+n(i(e.text),a))})),t+="code, .code "+n(i(e.code),e.code.style)}(e);var o=document.createElement("style");o.innerHTML=t,document.head.insertAdjacentElement("beforeend",o)},s={lightColors:{text:{primary:"#000000",secondary:"#4d4d4d",disabled:"#8E8E93",inverse:"#f2f2f2"},background:{elevated:"#FFFFFF",base:"#FAFAFF",disabled:"#F2F2F7",overlay:"rgba(0,0,0,0.25)",selected:"rgba(0,0,0,0.1)",hover:"rgba(0,0,0,0.05)",rowAlt:"rgba(0,0,0,0.025)",inverse:"#000000"},outline:{shadow:"#E1E1E6",shadowHover:"rgba(0,0,0,0.5)",shadowActive:"rgba(351,100,68,0.2)",border:"#CECED9",borderHover:"#CECED9",borderActive:"#CECED9"},tint:{accent:"#AE001A",red:"#FF3B30",orange:"#FF9500",yellow:"#FFCC00",green:"#2EB24F",blue:"#007AFF",purple:"#AF52DE",black:"#000000",white:"#FFFFFF"}},darkColors:{text:{primary:"#FFFFFF",secondary:"#C6C6C8",disabled:"#8E8E93",inverse:"#202020"},background:{base:"#1C1C1E",elevated:"#333333",overlay:"rgba(0,0,0,0.5)",selected:"rgba(255,255,255,0.2)",disabled:"#111111",hover:"rgba(255,255,255,0.1)",rowAlt:"rgba(255,255,255,0.05)",inverse:"#FFFFFF"},outline:{shadow:"#18181A",shadowHover:"rgba(255,255,255,0.5)",shadowActive:"rgba(351,100,68,0.2)",border:"#4D4D4D",borderHover:"#4D4D4D",borderActive:"#4D4D4D"},tint:{accent:"#AE001A",red:"#FF453A",orange:"#FF9F0A",yellow:"#FFD60A",green:"#32D74B",blue:"#0A84FF",purple:"#BF5AF2",black:"#000000",white:"#FFFFFF"}},baseRadius:8,baseSpacing:8,sizeMultiplier:{xs:.25,sm:.5,md:1,lg:1.5,xl:2},code:{fontConfig:{google:{families:["Fira Code"]}},style:{fontSize:"14px",fontWeight:"normal",lineHeight:"20px",letterSpacing:0,textTransform:"none"}},text:{fontConfig:{google:{families:["Muli"]}},h1:{fontSize:"26px",fontWeight:800,lineHeight:"36px",letterSpacing:0,textTransform:"capitalize"},h2:{fontSize:"22px",fontWeight:700,lineHeight:"32px",letterSpacing:0,textTransform:"none"},h3:{fontSize:"18px",fontWeight:700,lineHeight:"24px",letterSpacing:0,textTransform:"none"},h4:{fontSize:"16px",fontWeight:400,lineHeight:"22px",letterSpacing:0,textTransform:"none"},h5:{fontSize:"14px",fontWeight:700,lineHeight:"20px",letterSpacing:"0.5px",textTransform:"none"},h6:{fontSize:"12px",fontWeight:700,lineHeight:"16px",letterSpacing:"0.25px",textTransform:"none"},strong:{fontSize:"12px",fontWeight:900,lineHeight:"16px",letterSpacing:"1px",textTransform:"uppercase"},p:{fontSize:"14px",fontWeight:400,lineHeight:"20px",letterSpacing:0,textTransform:"none"},small:{fontSize:"12px",fontWeight:400,lineHeight:"16px",letterSpacing:0,textTransform:"none"}}},c={radius:function(e){return void 0===e&&(e="md"),"var(--radius-"+e+")"},spacing:function(e){return void 0===e&&(e="md"),"var(--spacing-"+e+")"},zIndex:function(e){return void 0===e&&(e="base"),t[e]},shadow:function(e){return void 0===e&&(e="default"),o[e]},colorText:function(e){return void 0===e&&(e="primary"),"var(--colors-text-"+e+")"},colorBackground:function(e){return void 0===e&&(e="base"),"var(--colors-background-"+e+")"},colorOutline:function(e){return void 0===e&&(e="border"),"var(--colors-outline-"+e+")"},colorTint:function(e,n){void 0===e&&(e="accent"),void 0===n&&(n=100),"danger"===e&&(e="red"),"warning"===e&&(e="orange"),"success"===e&&(e="green"),"info"===e&&(e="blue");var t="var(--colors-tint-"+e;return(n=10*Math.round(Math.abs(n)/10))>100&&(n=100),n<0&&(n=0),(t+="-"+n.toString())+")"}};exports.Theme=c,exports.default=c,exports.setTheme=function(e,t,o){void 0===e&&(e=s),void 0===t&&(t=!1),void 0===o&&(o=""),n.load(e.text.fontConfig),n.load(e.code.fontConfig),l(e,t),function(e,n){var t=document.createElement("style");t.innerHTML="\n    :root {\n      background: white;\n    }\n\n    html {\n      box-sizing: border-box;\n    }\n\n    * {\n      /* width */\n      ::-webkit-scrollbar,\n      ::-webkit-scrollbar:horizontal,\n      ::-webkit-scrollbar:vertical {\n        width: "+e.spacing()+";\n        height: "+e.spacing()+";\n      }\n\n      /* Track & corner */\n      ::-webkit-scrollbar-track,\n      ::-webkit-scrollbar-corner {\n        /* box-shadow: inset 0 0 5px grey; */\n        background: "+e.colorBackground("hover")+";\n      }\n\n      /* Handle */\n      ::-webkit-scrollbar-thumb {\n        background: "+e.colorText("disabled")+";\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      ::-webkit-scrollbar-thumb:hover {\n        background: "+e.colorOutline("shadowHover")+";\n      }\n    }\n\n    *,\n    *:before,\n    *:after {\n      box-sizing: inherit;\n      scrollbar-color: var(--themeMode);\n    }\n\n    *:focus {\n      outline: none !important;\n    }\n\n    html,\n    body {\n      margin: 0;\n      padding: 0;\n      width: 100vw;\n      height: 100vh;\n      font-family: "+e.fontName()+", Muli, sans-serif;\n      font-size: 14px;\n      color: "+e.colorText()+";\n    }\n\n    .noselect {s\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    "+n+"\n  ",document.head.insertAdjacentElement("beforeend",t)}(c,o)};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var WebFont = _interopDefault(require('webfontloader'));
+
+// List of zIndex
+var zIndices = {
+    hide: -1,
+    menu: 0,
+    base: 50,
+    docked: 100,
+    sticky: 1100,
+    banner: 1200,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    contextMenu: 1800,
+    tooltip: 2000,
+};
+// List of Shadows
+var shadows = {
+    default: '0 0 var(--spacing-md) 0 var(--colors-outline-shadow)',
+    large: '0 0 var(--spacing-xl) 0 var(--colors-outline-shadow)',
+    hover: '0 0 var(--spacing-md) 0 var(--colors-outline-shadowHover)',
+    active: '0 0 var(--spacing-sm) 0 var(--colors-outline-shadowActive)',
+    outline: "0 0 1px 0 var(--colors-outline-border)",
+    inner: "inset 0 0 var(--spacing-xs) 0 var(--colors-outline-shadow)",
+};
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var isThemeTextStyle = function (obj) { return obj.fontSize !== undefined; };
+
+var getFontName = function (text) {
+    var config = __assign({}, text.fontConfig);
+    if (config.google)
+        return config.google.families.join(", ");
+    else if (config.typekit)
+        return config.typekit.id || "";
+    else if (config.fontdeck)
+        return config.fontdeck.id || "";
+    else if (config.monotype)
+        return config.monotype.projectId || "";
+    else if (config.custom && config.custom.families)
+        return config.custom.families.join(", ") || "";
+    return "Muil";
+};
+var getColorTint = function (type, opacity) {
+    if (type === void 0) { type = "accent"; }
+    if (opacity === void 0) { opacity = 100; }
+    // Semantic colors
+    if (type === "danger")
+        type = "red";
+    if (type === "warning")
+        type = "orange";
+    if (type === "success")
+        type = "green";
+    if (type === "info")
+        type = "blue";
+    var str = "var(--colors-tint-" + type;
+    opacity = Math.round(Math.abs(opacity) / 10) * 10;
+    if (opacity > 100)
+        opacity = 100;
+    if (opacity < 0)
+        opacity = 0;
+    str += "-" + opacity.toString();
+    return str + ")";
+};
+var generateColorsCSS = function (theme, enableDarkMode) {
+    function convertHex(hex, opacity) {
+        hex = hex.replace("#", "");
+        var r = parseInt(hex.substring(0, 2), 16);
+        var g = parseInt(hex.substring(2, 4), 16);
+        var b = parseInt(hex.substring(4, 6), 16);
+        return "rgba(" + r + "," + g + "," + b + "," + opacity / 100 + ")";
+    }
+    var colors = enableDarkMode && theme.darkColors ? theme.darkColors : theme.lightColors;
+    var cssString = "";
+    for (var _i = 0, _a = Object.entries(__assign({}, colors)); _i < _a.length; _i++) {
+        var _b = _a[_i], key1 = _b[0], value1 = _b[1];
+        for (var _c = 0, _d = Object.entries(__assign({}, value1)); _c < _d.length; _c++) {
+            var _e = _d[_c], key2 = _e[0], value2 = _e[1];
+            if (key1 === "tint")
+                for (var opacity = 100; opacity >= 0; opacity -= 10)
+                    cssString += "--colors-" + key1 + "-" + key2 + "-" + opacity.toString() + ": " + convertHex(value2, opacity) + ";";
+            else
+                cssString += "--colors-" + key1 + "-" + key2 + ": " + value2 + ";";
+        }
+    }
+    return cssString;
+};
+var generateSMLCSS = function (type, base, size) {
+    var cssString = "";
+    cssString += "--" + type + ": " + base.toString() + "px;";
+    for (var _i = 0, _a = Object.entries(__assign({}, size)); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        cssString += "--" + type + "-" + key + ": " + (base * value).toString() + "px;";
+    }
+    cssString += "--" + type + "-none: " + (base * 0).toString() + "px;";
+    return cssString;
+};
+var generateFontCSS = function (theme) {
+    function fontCSSString(name, style) {
+        return "{ \n      display: inline;\n      font-family: " + name + ";\n      font-style: normal;\n      font-size: " + style.fontSize + "; \n      font-weight: " + style.fontWeight + "; \n      line-height: " + style.lineHeight + "; \n      letter-spacing: " + style.letterSpacing + "; \n      text-transform: " + style.textTransform + "; \n      margin: 0;\n      vertical-align: bottom;\n      white-space: wrap;\n    }";
+    }
+    var cssString = "";
+    Object.entries(theme.text).forEach(function (_a) {
+        var key = _a[0], val = _a[1];
+        if (isThemeTextStyle(val))
+            cssString += key + ", ." + key + " " + fontCSSString(getFontName(theme.text), val);
+    });
+    cssString += "code, .code " + fontCSSString(getFontName(theme.code), theme.code.style);
+    return cssString;
+};
+var generateThemeCSS = function (theme, enableDarkMode) {
+    // CSSstring contains the variables-value pairs
+    var cssString = ":root {";
+    // Set DarkMode globally
+    localStorage.setItem("darkMode", enableDarkMode.toString());
+    cssString += "--darkmode: " + enableDarkMode.toString() + ";";
+    // Colors
+    cssString += generateColorsCSS(theme, enableDarkMode);
+    // Radius
+    cssString += generateSMLCSS("radius", theme.baseRadius, theme.sizeMultiplier);
+    // Spacing
+    cssString += generateSMLCSS("spacing", theme.baseSpacing, theme.sizeMultiplier);
+    // Close ROOT
+    cssString += "} ";
+    // Text
+    cssString += generateFontCSS(theme);
+    // Place it in CSS
+    var styleTag = document.createElement("style");
+    styleTag.innerHTML = cssString;
+    document.head.insertAdjacentElement("beforeend", styleTag);
+};
+var generateGlobalCSS = function (Theme, globalCss) {
+    var styleTag = document.createElement("style");
+    styleTag.innerHTML = "\n    :root {\n      background: white;\n    }\n\n    html {\n      box-sizing: border-box;\n    }\n\n    * {\n      /* width */\n      ::-webkit-scrollbar,\n      ::-webkit-scrollbar:horizontal,\n      ::-webkit-scrollbar:vertical {\n        width: " + Theme.spacing() + ";\n        height: " + Theme.spacing() + ";\n      }\n\n      /* Track & corner */\n      ::-webkit-scrollbar-track,\n      ::-webkit-scrollbar-corner {\n        /* box-shadow: inset 0 0 5px grey; */\n        background: " + Theme.colorBackground("hover") + ";\n      }\n\n      /* Handle */\n      ::-webkit-scrollbar-thumb {\n        background: " + Theme.colorText("disabled") + ";\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      ::-webkit-scrollbar-thumb:hover {\n        background: " + Theme.colorOutline("shadowHover") + ";\n      }\n    }\n\n    *,\n    *:before,\n    *:after {\n      box-sizing: inherit;\n      scrollbar-color: var(--themeMode);\n    }\n\n    *:focus {\n      outline: none !important;\n    }\n\n    html,\n    body {\n      margin: 0;\n      padding: 0;\n      width: 100vw;\n      height: 100vh;\n      font-family: Muli, sans-serif;\n      font-size: 14px;\n      color: " + Theme.colorText() + ";\n    }\n\n    .noselect {s\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    " + globalCss + "\n  ";
+    document.head.insertAdjacentElement("beforeend", styleTag);
+};
+
+var DefaultTheme = {
+    lightColors: {
+        text: {
+            primary: "#000000",
+            secondary: "#4d4d4d",
+            disabled: "#8E8E93",
+            inverse: "#f2f2f2"
+        },
+        background: {
+            elevated: "#FFFFFF",
+            base: "#FAFAFF",
+            disabled: "#F2F2F7",
+            overlay: "rgba(0,0,0,0.25)",
+            selected: "rgba(0,0,0,0.1)",
+            hover: "rgba(0,0,0,0.05)",
+            rowAlt: "rgba(0,0,0,0.025)",
+            inverse: "#000000"
+        },
+        outline: {
+            shadow: "#E1E1E6",
+            shadowHover: "rgba(0,0,0,0.5)",
+            shadowActive: "rgba(351,100,68,0.2)",
+            border: "#CECED9",
+            borderHover: "#CECED9",
+            borderActive: "#CECED9"
+        },
+        tint: {
+            accent: "#AE001A",
+            red: "#FF3B30",
+            orange: "#FF9500",
+            yellow: "#FFCC00",
+            green: "#2EB24F",
+            blue: "#007AFF",
+            purple: "#AF52DE",
+            black: "#000000",
+            white: "#FFFFFF"
+        }
+    },
+    darkColors: {
+        text: {
+            primary: "#FFFFFF",
+            secondary: "#C6C6C8",
+            disabled: "#8E8E93",
+            inverse: "#202020"
+        },
+        background: {
+            base: "#1C1C1E",
+            elevated: "#333333",
+            overlay: "rgba(0,0,0,0.5)",
+            selected: "rgba(255,255,255,0.2)",
+            disabled: "#111111",
+            hover: "rgba(255,255,255,0.1)",
+            rowAlt: "rgba(255,255,255,0.05)",
+            inverse: "#FFFFFF"
+        },
+        outline: {
+            shadow: "#18181A",
+            shadowHover: "rgba(255,255,255,0.5)",
+            shadowActive: "rgba(351,100,68,0.2)",
+            border: "#4D4D4D",
+            borderHover: "#4D4D4D",
+            borderActive: "#4D4D4D"
+        },
+        tint: {
+            accent: "#AE001A",
+            red: "#FF453A",
+            orange: "#FF9F0A",
+            yellow: "#FFD60A",
+            green: "#32D74B",
+            blue: "#0A84FF",
+            purple: "#BF5AF2",
+            black: "#000000",
+            white: "#FFFFFF"
+        }
+    },
+    baseRadius: 8,
+    baseSpacing: 8,
+    sizeMultiplier: {
+        xs: 0.25,
+        sm: 0.5,
+        md: 1,
+        lg: 1.5,
+        xl: 2
+    },
+    code: {
+        fontConfig: {
+            google: {
+                families: ["Fira Code"]
+            }
+        },
+        style: {
+            fontSize: "14px",
+            fontWeight: "normal",
+            lineHeight: "20px",
+            letterSpacing: 0,
+            textTransform: "none"
+        }
+    },
+    text: {
+        fontConfig: {
+            google: {
+                families: ["Muli"]
+            }
+        },
+        h1: {
+            fontSize: "26px",
+            fontWeight: 800,
+            lineHeight: "36px",
+            letterSpacing: 0,
+            textTransform: "capitalize"
+        },
+        h2: {
+            fontSize: "22px",
+            fontWeight: 700,
+            lineHeight: "32px",
+            letterSpacing: 0,
+            textTransform: "none"
+        },
+        h3: {
+            fontSize: "18px",
+            fontWeight: 700,
+            lineHeight: "24px",
+            letterSpacing: 0,
+            textTransform: "none"
+        },
+        h4: {
+            fontSize: "16px",
+            fontWeight: 400,
+            lineHeight: "22px",
+            letterSpacing: 0,
+            textTransform: "none"
+        },
+        h5: {
+            fontSize: "14px",
+            fontWeight: 700,
+            lineHeight: "20px",
+            letterSpacing: "0.5px",
+            textTransform: "none"
+        },
+        h6: {
+            fontSize: "12px",
+            fontWeight: 700,
+            lineHeight: "16px",
+            letterSpacing: "0.25px",
+            textTransform: "none"
+        },
+        strong: {
+            fontSize: "12px",
+            fontWeight: 900,
+            lineHeight: "16px",
+            letterSpacing: "1px",
+            textTransform: "uppercase"
+        },
+        p: {
+            fontSize: "14px",
+            fontWeight: 400,
+            lineHeight: "20px",
+            letterSpacing: 0,
+            textTransform: "none"
+        },
+        small: {
+            fontSize: "12px",
+            fontWeight: 400,
+            lineHeight: "16px",
+            letterSpacing: 0,
+            textTransform: "none"
+        }
+    }
+};
+
+// Theme Object
+var Theme = {
+    // Radius
+    radius: function (type) {
+        if (type === void 0) { type = "md"; }
+        return "var(--radius-" + type + ")";
+    },
+    // Scacing
+    spacing: function (type) {
+        if (type === void 0) { type = "md"; }
+        return "var(--spacing-" + type + ")";
+    },
+    // zIndex
+    zIndex: function (type) {
+        if (type === void 0) { type = "base"; }
+        return zIndices[type];
+    },
+    // Shadows
+    shadow: function (type) {
+        if (type === void 0) { type = "default"; }
+        return shadows[type];
+    },
+    // Colors
+    colorText: function (type) {
+        if (type === void 0) { type = "primary"; }
+        return "var(--colors-text-" + type + ")";
+    },
+    colorBackground: function (type) {
+        if (type === void 0) { type = "base"; }
+        return "var(--colors-background-" + type + ")";
+    },
+    colorOutline: function (type) {
+        if (type === void 0) { type = "border"; }
+        return "var(--colors-outline-" + type + ")";
+    },
+    colorTint: getColorTint
+};
+/**
+ * Function to set or update theme.
+ * The function wirtes global/root CSS which then can be accessed by any component.
+ */
+function setTheme(theme, enableDarkMode, globalCSS) {
+    if (theme === void 0) { theme = DefaultTheme; }
+    if (enableDarkMode === void 0) { enableDarkMode = false; }
+    if (globalCSS === void 0) { globalCSS = ""; }
+    // Load fonts
+    WebFont.load(theme.text.fontConfig);
+    WebFont.load(theme.code.fontConfig);
+    generateThemeCSS(theme, enableDarkMode);
+    generateGlobalCSS(Theme, globalCSS);
+}
+
+exports.Theme = Theme;
+exports.default = Theme;
+exports.setTheme = setTheme;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@guptasiddhant/theme-manager-js",
-  "version": "1.0.0-ALPHA.1",
+  "version": "1.0.0-ALPHA.2",
   "description": "",
@@ -28,3 +28,4 @@ "main": "dist/index.js",
     "theme",
-    "css", "darkMode"
+    "css",
+    "darkMode"
   ],
@@ -31,0 +32,0 @@ "author": "Siddhant Gupta <[e-mail]>",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89982

increased by28.66%

Lines of code

910

increased by364.29%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes