@aleodoni-common/tailwind-components - npm Package Compare versions

Comparing version 1.0.75 to 1.0.76

build/index.js

@@ -9,6 +9,25 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var defaultTheme = {
+  defaultBGColor: 'bg-gray-800',
+  input: {
+    ringColor: 'blue-500',
+    placeholderColor: 'gray-300',
+    textColor: 'gray-900',
+    borderColor: 'gray-300'
+  },
+  button: {
+    "default": {
+      ringColor: 'blue-500',
+      bgColor: 'gray-600',
+      textColor: 'gray-100',
+      borderColor: 'gray-300'
+    }
+  },
+  focusWithin: 'gray-500'
+};
+
 var Screen = function Screen(props) {
   var children = props.children,
       _props$bgColor = props.bgColor,
-      bgColor = _props$bgColor === void 0 ? 'bg-gray-800' : _props$bgColor;
+      bgColor = _props$bgColor === void 0 ? defaultTheme.defaultBGColor : _props$bgColor;
   var className = "Screen h-screen w-full flex flex-col items-center " + bgColor;
@@ -23,3 +42,3 @@ return React__default.createElement("section", Object.assign({
       _props$bgColor = props.bgColor,
-      bgColor = _props$bgColor === void 0 ? 'bg-gray-800' : _props$bgColor;
+      bgColor = _props$bgColor === void 0 ? defaultTheme.defaultBGColor : _props$bgColor;
   var className = "Container flex xl:w-5/6 w-full h-full " + bgColor;
@@ -32,3 +51,3 @@ return React__default.createElement("section", Object.assign({
 var inputDefaults = {
-  ringcolor: 'blue-500',
+  ringcolor: defaultTheme.input.ringColor,
   outlineicon: 'false'
@@ -49,3 +68,3 @@ };
 var getInputClassName = function getInputClassName(paddingHorizontal, ringColor) {
-  return "\n    w-full\n    " + paddingHorizontal + "\n    py-2\n    border\n    rounded-md\n    border-gray-300\n    placeholder-gray-300\n    text-gray-900\n    focus:outline-none\n    focus:ring-4\n    focus:ring-" + ringColor + "\n  ";
+  return "\n    w-full\n    " + paddingHorizontal + "\n    py-2\n    border\n    rounded-md\n    border-" + defaultTheme.input.borderColor + "\n    placeholder-" + defaultTheme.input.placeholderColor + "\n    text-" + defaultTheme.input.textColor + "\n    focus:outline-none\n    focus:ring-4\n    focus:ring-" + ringColor + "\n  ";
 };
@@ -56,3 +75,3 @@ var getIconClassName = function getIconClassName() {
 var getDivInputClassName = function getDivInputClassName() {
-  return "\n    flex\n    items-center\n    text-gray-300\n    focus-within:text-gray-500\n  ";
+  return "\n    flex\n    items-center\n    text-" + defaultTheme.input.borderColor + "\n    focus-within:text-" + defaultTheme.focusWithin + "\n  ";
 };
@@ -87,9 +106,9 @@
       _props$aleodoni_ringc = props.aleodoni_ringcolor,
-      aleodoni_ringcolor = _props$aleodoni_ringc === void 0 ? 'blue-500' : _props$aleodoni_ringc,
+      aleodoni_ringcolor = _props$aleodoni_ringc === void 0 ? defaultTheme.button["default"].ringColor : _props$aleodoni_ringc,
       _props$aleodoni_outli = props.aleodoni_outlineicon,
       aleodoni_outlineicon = _props$aleodoni_outli === void 0 ? false : _props$aleodoni_outli,
       _props$aleodoni_bgcol = props.aleodoni_bgcolor,
-      aleodoni_bgcolor = _props$aleodoni_bgcol === void 0 ? 'gray-600' : _props$aleodoni_bgcol,
+      aleodoni_bgcolor = _props$aleodoni_bgcol === void 0 ? defaultTheme.button["default"].bgColor : _props$aleodoni_bgcol,
       _props$aleodoni_textc = props.aleodoni_textcolor,
-      aleodoni_textcolor = _props$aleodoni_textc === void 0 ? 'gray-100' : _props$aleodoni_textc;
+      aleodoni_textcolor = _props$aleodoni_textc === void 0 ? defaultTheme.button["default"].textColor : _props$aleodoni_textc;
   var pH = 'px-3';
@@ -103,3 +122,3 @@ var TheIcon;
 
-  var className = "\n    inline-flex\n    items-center\n    justify-between\n    " + pH + "\n    py-2\n    border\n    rounded-md\n    border-gray-300\n    focus:outline-none\n    focus:ring-4\n    focus:ring-" + aleodoni_ringcolor + "\n    bg-" + aleodoni_bgcolor + "\n    text-" + aleodoni_textcolor + "\n    opacity-50\n    transition-opacity\n    duration-200\n    hover:opacity-100\n  ";
+  var className = "\n    inline-flex\n    items-center\n    justify-between\n    " + pH + "\n    py-2\n    border\n    rounded-md\n    border-" + defaultTheme.button["default"].borderColor + "\n    focus:outline-none\n    focus:ring-4\n    focus:ring-" + aleodoni_ringcolor + "\n    bg-" + aleodoni_bgcolor + "\n    text-" + aleodoni_textcolor + "\n    opacity-50\n    transition-opacity\n    duration-200\n    hover:opacity-100\n  ";
   var classNameIcon = "\n    pointer-events-none\n    w-5\n    h-5\n  ";
@@ -106,0 +125,0 @@ return React__default.createElement("button", Object.assign({

build/index.modern.js

@@ -6,6 +6,25 @@ import React, { useState } from 'react';
 
+var defaultTheme = {
+  defaultBGColor: 'bg-gray-800',
+  input: {
+    ringColor: 'blue-500',
+    placeholderColor: 'gray-300',
+    textColor: 'gray-900',
+    borderColor: 'gray-300'
+  },
+  button: {
+    "default": {
+      ringColor: 'blue-500',
+      bgColor: 'gray-600',
+      textColor: 'gray-100',
+      borderColor: 'gray-300'
+    }
+  },
+  focusWithin: 'gray-500'
+};
+
 var Screen = function Screen(props) {
   var children = props.children,
       _props$bgColor = props.bgColor,
-      bgColor = _props$bgColor === void 0 ? 'bg-gray-800' : _props$bgColor;
+      bgColor = _props$bgColor === void 0 ? defaultTheme.defaultBGColor : _props$bgColor;
   var className = "Screen h-screen w-full flex flex-col items-center " + bgColor;
@@ -20,3 +39,3 @@ return React.createElement("section", Object.assign({
       _props$bgColor = props.bgColor,
-      bgColor = _props$bgColor === void 0 ? 'bg-gray-800' : _props$bgColor;
+      bgColor = _props$bgColor === void 0 ? defaultTheme.defaultBGColor : _props$bgColor;
   var className = "Container flex xl:w-5/6 w-full h-full " + bgColor;
@@ -29,3 +48,3 @@ return React.createElement("section", Object.assign({
 var inputDefaults = {
-  ringcolor: 'blue-500',
+  ringcolor: defaultTheme.input.ringColor,
   outlineicon: 'false'
@@ -46,3 +65,3 @@ };
 var getInputClassName = function getInputClassName(paddingHorizontal, ringColor) {
-  return "\n    w-full\n    " + paddingHorizontal + "\n    py-2\n    border\n    rounded-md\n    border-gray-300\n    placeholder-gray-300\n    text-gray-900\n    focus:outline-none\n    focus:ring-4\n    focus:ring-" + ringColor + "\n  ";
+  return "\n    w-full\n    " + paddingHorizontal + "\n    py-2\n    border\n    rounded-md\n    border-" + defaultTheme.input.borderColor + "\n    placeholder-" + defaultTheme.input.placeholderColor + "\n    text-" + defaultTheme.input.textColor + "\n    focus:outline-none\n    focus:ring-4\n    focus:ring-" + ringColor + "\n  ";
 };
@@ -53,3 +72,3 @@ var getIconClassName = function getIconClassName() {
 var getDivInputClassName = function getDivInputClassName() {
-  return "\n    flex\n    items-center\n    text-gray-300\n    focus-within:text-gray-500\n  ";
+  return "\n    flex\n    items-center\n    text-" + defaultTheme.input.borderColor + "\n    focus-within:text-" + defaultTheme.focusWithin + "\n  ";
 };
@@ -84,9 +103,9 @@
       _props$aleodoni_ringc = props.aleodoni_ringcolor,
-      aleodoni_ringcolor = _props$aleodoni_ringc === void 0 ? 'blue-500' : _props$aleodoni_ringc,
+      aleodoni_ringcolor = _props$aleodoni_ringc === void 0 ? defaultTheme.button["default"].ringColor : _props$aleodoni_ringc,
       _props$aleodoni_outli = props.aleodoni_outlineicon,
       aleodoni_outlineicon = _props$aleodoni_outli === void 0 ? false : _props$aleodoni_outli,
       _props$aleodoni_bgcol = props.aleodoni_bgcolor,
-      aleodoni_bgcolor = _props$aleodoni_bgcol === void 0 ? 'gray-600' : _props$aleodoni_bgcol,
+      aleodoni_bgcolor = _props$aleodoni_bgcol === void 0 ? defaultTheme.button["default"].bgColor : _props$aleodoni_bgcol,
       _props$aleodoni_textc = props.aleodoni_textcolor,
-      aleodoni_textcolor = _props$aleodoni_textc === void 0 ? 'gray-100' : _props$aleodoni_textc;
+      aleodoni_textcolor = _props$aleodoni_textc === void 0 ? defaultTheme.button["default"].textColor : _props$aleodoni_textc;
   var pH = 'px-3';
@@ -100,3 +119,3 @@ var TheIcon;
 
-  var className = "\n    inline-flex\n    items-center\n    justify-between\n    " + pH + "\n    py-2\n    border\n    rounded-md\n    border-gray-300\n    focus:outline-none\n    focus:ring-4\n    focus:ring-" + aleodoni_ringcolor + "\n    bg-" + aleodoni_bgcolor + "\n    text-" + aleodoni_textcolor + "\n    opacity-50\n    transition-opacity\n    duration-200\n    hover:opacity-100\n  ";
+  var className = "\n    inline-flex\n    items-center\n    justify-between\n    " + pH + "\n    py-2\n    border\n    rounded-md\n    border-" + defaultTheme.button["default"].borderColor + "\n    focus:outline-none\n    focus:ring-4\n    focus:ring-" + aleodoni_ringcolor + "\n    bg-" + aleodoni_bgcolor + "\n    text-" + aleodoni_textcolor + "\n    opacity-50\n    transition-opacity\n    duration-200\n    hover:opacity-100\n  ";
   var classNameIcon = "\n    pointer-events-none\n    w-5\n    h-5\n  ";
@@ -103,0 +122,0 @@ return React.createElement("button", Object.assign({

package.json

 {
   "name": "@aleodoni-common/tailwind-components",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "main": "./build/index.js",
@@ -5,0 +5,0 @@ "module": "build/index.modern.js",

No alert changes

Improved metrics

Total package byte prevSize

80422

increased by5.62%

Number of package files

19

increased by5.56%

Lines of code

1249

increased by2.04%

No dependency changes