@tecsinapse/cortex-core 1.2.0-beta.9 → 1.2.1-beta.0

package/dist/cjs/components/manager/manager.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var tailwindVariants = require('tailwind-variants');
+
+const manager = tailwindVariants.tv({
+  base: "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal",
+  variants: {
+    open: {
+      true: "scale-100 visible",
+      false: "invisible"
+    }
+  }
+});
+
+exports.manager = manager;

package/dist/cjs/index.js

@@ -18,8 +18,10 @@ var table = require('./components/table/table.js');
 var tag = require('./components/tag/tag.js');
 var toggle = require('./components/toggle/toggle.js');
 var tooltip = require('./components/tooltip/tooltip.js');
+var manager = require('./components/manager/manager.js');
+var index = require('./preset/index.js');
 var definitions = require('./tokens/definitions.js');
-var index = require('./utils/index.js');
+var index$1 = require('./utils/index.js');
 
 
 
@@ -59,6 +61,8 @@ exports.styleLabelElement = toggle.styleLabelElement;
 exports.toggle = toggle.toggle;
 exports.tooltip = tooltip.tooltip;
 exports.tooltipContainer = tooltip.tooltipContainer;
+exports.manager = manager.manager;
+exports.preset = index;
 exports.borderColor = definitions.borderColor;
 exports.borderRadius = definitions.borderRadius;
 exports.borderWidth = definitions.borderWidth;
@@ -69,4 +73,4 @@ exports.fontSize = definitions.fontSize;
 exports.spacing = definitions.spacing;
 exports.textColor = definitions.textColor;
 exports.zIndex = definitions.zIndex;
-exports.updateThemeColors = index.updateThemeColors;
+exports.updateThemeColors = index$1.updateThemeColors;

package/dist/cjs/preset/index.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var definitions = require('../tokens/definitions.js');
+
+const preset = {
+  theme: {
+    fontFamily: definitions.fontFamily,
+    extend: {
+      colors: definitions.colors,
+      textColor: definitions.textColor,
+      spacing: definitions.spacing,
+      borderRadius: definitions.borderRadius,
+      borderWidth: definitions.borderWidth,
+      fontSize: definitions.fontSize,
+      boxShadow: definitions.boxShadow,
+      borderColor: definitions.borderColor,
+      zIndex: definitions.zIndex,
+      keyframes: {
+        opacity: {
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 }
+        },
+        progress: {
+          "0%": { transform: "translateX(0) scaleX(0)" },
+          "40%": { transform: "translateX(0) scaleX(0.4)" },
+          "100%": { transform: "translateX(100%) scaleX(0.5)" }
+        }
+      },
+      animation: {
+        opacity: "opacity 1s ease-in-out",
+        progress: "progress 1s infinite linear"
+      },
+      transformOrigin: {
+        "left-right": "0% 50%"
+      }
+    }
+  }
+};
+
+module.exports = preset;

package/dist/cjs/tokens/definitions.js

@@ -153,9 +153,9 @@ const fontFamily = {
   mono: "Consolas, monaco, monospace"
 };
 const textColor = {
-  light: "#fff",
-  medium: "#85807a",
-  dark: "#353231",
+  light: "var(--color-text-light, #fff)",
+  medium: "var(--color-text-medium, #85807a)",
+  dark: "var(--color-text-dark, #353231)",
   orange: "#f89907"
 };
 const zIndex = {

package/dist/cjs/utils/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var polished = require('polished');
+
 const updateThemeColors = (theme) => {
   const root = document.documentElement;
   Object.entries(theme).forEach(([colorName, colorShades]) => {
@@ -7,6 +9,15 @@ const updateThemeColors = (theme) => {
     Object.entries(colorShades).forEach(([shade, hexValue]) => {
       if (!hexValue) return;
       root.style.setProperty(`--color-${colorName}-${shade}`, hexValue);
+      if (shade !== "xlight" && shade !== "xdark" && polished.getContrast(
+        root.style.getPropertyValue(`--color-text-${shade}`),
+        hexValue
+      ) < 4.5) {
+        root.style.setProperty(
+          `--color-text-${shade}`,
+          polished.readableColor(hexValue)
+        );
+      }
     });
   });
 };

package/dist/esm/components/manager/manager.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+
+const manager = tv({
+  base: "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal",
+  variants: {
+    open: {
+      true: "scale-100 visible",
+      false: "invisible"
+    }
+  }
+});
+
+export { manager };

package/dist/esm/index.js

@@ -16,5 +16,7 @@ export { hr, tCell, tFoot, tHead, tHeadCell, tRoot, tRow } from './components/ta
 export { tag } from './components/tag/tag.js';
 export { styleInputElement, styleLabelElement, toggle } from './components/toggle/toggle.js';
 export { tooltip, tooltipContainer } from './components/tooltip/tooltip.js';
+export { manager } from './components/manager/manager.js';
+export { default as preset } from './preset/index.js';
 export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex } from './tokens/definitions.js';
 export { updateThemeColors } from './utils/index.js';

package/dist/esm/preset/index.js

@@ -0,0 +1,38 @@
+import { fontFamily, colors, textColor, spacing, borderRadius, borderWidth, fontSize, boxShadow, borderColor, zIndex } from '../tokens/definitions.js';
+
+const preset = {
+  theme: {
+    fontFamily,
+    extend: {
+      colors,
+      textColor,
+      spacing,
+      borderRadius,
+      borderWidth,
+      fontSize,
+      boxShadow,
+      borderColor,
+      zIndex,
+      keyframes: {
+        opacity: {
+          "0%": { opacity: 0 },
+          "100%": { opacity: 1 }
+        },
+        progress: {
+          "0%": { transform: "translateX(0) scaleX(0)" },
+          "40%": { transform: "translateX(0) scaleX(0.4)" },
+          "100%": { transform: "translateX(100%) scaleX(0.5)" }
+        }
+      },
+      animation: {
+        opacity: "opacity 1s ease-in-out",
+        progress: "progress 1s infinite linear"
+      },
+      transformOrigin: {
+        "left-right": "0% 50%"
+      }
+    }
+  }
+};
+
+export { preset as default };

package/dist/esm/tokens/definitions.js

@@ -151,9 +151,9 @@ const fontFamily = {
   mono: "Consolas, monaco, monospace"
 };
 const textColor = {
-  light: "#fff",
-  medium: "#85807a",
-  dark: "#353231",
+  light: "var(--color-text-light, #fff)",
+  medium: "var(--color-text-medium, #85807a)",
+  dark: "var(--color-text-dark, #353231)",
   orange: "#f89907"
 };
 const zIndex = {

package/dist/esm/utils/index.js

@@ -1,3 +1,5 @@
+import { getContrast, readableColor } from 'polished';
+
 const updateThemeColors = (theme) => {
   const root = document.documentElement;
   Object.entries(theme).forEach(([colorName, colorShades]) => {
@@ -5,6 +7,15 @@ const updateThemeColors = (theme) => {
     Object.entries(colorShades).forEach(([shade, hexValue]) => {
       if (!hexValue) return;
       root.style.setProperty(`--color-${colorName}-${shade}`, hexValue);
+      if (shade !== "xlight" && shade !== "xdark" && getContrast(
+        root.style.getPropertyValue(`--color-text-${shade}`),
+        hexValue
+      ) < 4.5) {
+        root.style.setProperty(
+          `--color-text-${shade}`,
+          readableColor(hexValue)
+        );
+      }
     });
   });
 };

package/dist/types/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './table/table';
 export * from './tag/tag';
 export * from './toggle/toggle';
 export * from './tooltip/tooltip';
+export * from './manager/manager';

package/dist/types/components/manager/manager.d.ts

@@ -0,0 +1,16 @@
+export declare const manager: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: string;
+        false: string;
+    };
+}, undefined, "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal", {
+    open: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: string;
+        false: string;
+    };
+}, undefined, "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal", unknown, unknown, undefined>>;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
+export { default as preset } from './preset';
 export * from './tokens/definitions';
 export * from './utils';

package/dist/types/preset/index.d.ts

@@ -0,0 +1,152 @@
+declare const preset: {
+    theme: {
+        fontFamily: {
+            sans: string[];
+            mono: string;
+        };
+        extend: {
+            colors: {
+                primary: {
+                    xlight: string;
+                    light: string;
+                    medium: string;
+                    dark: string;
+                    xdark: string;
+                };
+                secondary: {
+                    xlight: string;
+                    light: string;
+                    medium: string;
+                    dark: string;
+                    xdark: string;
+                };
+                info: {
+                    xlight: string;
+                    light: string;
+                    medium: string;
+                    dark: string;
+                    xdark: string;
+                };
+                success: {
+                    xlight: string;
+                    light: string;
+                    medium: string;
+                    dark: string;
+                    xdark: string;
+                };
+                warning: {
+                    xlight: string;
+                    light: string;
+                    medium: string;
+                    dark: string;
+                    xdark: string;
+                };
+                error: {
+                    xlight: string;
+                    light: string;
+                    medium: string;
+                    dark: string;
+                    xdark: string;
+                };
+                miscellaneous: {
+                    body: string;
+                };
+            };
+            textColor: {
+                light: string;
+                medium: string;
+                dark: string;
+                orange: string;
+            };
+            spacing: {
+                nano: string;
+                micro: string;
+                mili: string;
+                centi: string;
+                deca: string;
+                kilo: string;
+                mega: string;
+                giga: string;
+                tera: string;
+                peta: string;
+                hexa: string;
+            };
+            borderRadius: {
+                nano: string;
+                micro: string;
+                mili: string;
+                centi: string;
+                deca: string;
+                pill: string;
+            };
+            borderWidth: {
+                pico: string;
+                nano: string;
+            };
+            fontSize: {
+                h5: string[];
+                h4: string[];
+                h3: string[];
+                h2: string[];
+                h1: string[];
+                base: string[];
+                sub: string[];
+                label: string[];
+                micro: string;
+                mili: string;
+                centi: string;
+                deca: string;
+                kilo: string;
+                mega: string;
+            };
+            boxShadow: {
+                default: string;
+            };
+            borderColor: {
+                'success-light': string;
+            };
+            zIndex: {
+                default: number;
+                absolute: number;
+                select: number;
+                input: number;
+                popover: number;
+                tooltip: number;
+                header: number;
+                backdrop: number;
+                drawer: number;
+                sidebar: number;
+                modal: number;
+            };
+            keyframes: {
+                opacity: {
+                    '0%': {
+                        opacity: number;
+                    };
+                    '100%': {
+                        opacity: number;
+                    };
+                };
+                progress: {
+                    '0%': {
+                        transform: string;
+                    };
+                    '40%': {
+                        transform: string;
+                    };
+                    '100%': {
+                        transform: string;
+                    };
+                };
+            };
+            animation: {
+                opacity: string;
+                progress: string;
+            };
+            transformOrigin: {
+                'left-right': string;
+            };
+        };
+    };
+};
+export default preset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-core",
-  "version": "1.2.0-beta.9",
+  "version": "1.2.1-beta.0",
   "license": "MIT",
   "description": "Core library for tailwindcss based design",
   "main": "dist/esm/index.js",
@@ -17,11 +17,9 @@
   },
   "dependencies": {
     "clsx": "2.1.1",
+    "polished": "^4.3.1",
     "tailwind-variants": "1.0.0"
   },
-  "devDependencies": {
-    "rollup-plugin-copy": "^3.4.0"
-  },
   "repository": {
     "type": "git",
     "directory": "packages/cortex-core",
@@ -34,5 +32,5 @@
   "peerDependencies": {
     "tailwindcss": ">=3.3.0"
   },
-  "gitHead": "b7e6698f18e533fa52aa672c4cad4ec9b140751b"
+  "gitHead": "5d1fe44b137a1f5f68fca9fc1fc5e6b842be1b23"
 }

package/dist/default.css

@@ -1,93 +0,0 @@
-@theme {
-    --color-primary-xlight: #fef9f0;
-    --color-primary-light: #fccb83;
-    --color-primary-medium: #f89907;
-    --color-primary-dark: #ae6b05;
-    --color-primary-xdark: #633d03;
-    --color-secondary-xlight: #f8f7f7;
-    --color-secondary-light: #c2bfbc;
-    --color-secondary-medium: #85807a;
-    --color-secondary-dark: #5d5955;
-    --color-secondary-xdark: #353231;
-    --color-info-xlight: #f0f8fe;
-    --color-info-light: #85c7fa;
-    --color-info-medium: #239bf6;
-    --color-info-dark: #0873c4;
-    --color-info-xdark: #043962;
-    --color-success-xlight: #f3fcf8;
-    --color-success-light: #99e6c9;
-    --color-success-medium: #2db783;
-    --color-success-dark: #238f67;
-    --color-success-xdark: #14523b;
-    --color-warning-xlight: #fffcf0;
-    --color-warning-light: #ffe380;
-    --color-warning-medium: #ffc700;
-    --color-warning-dark: #cc9f00;
-    --color-warning-xdark: #665000;
-    --color-error-xlight: #fdf3f2;
-    --color-error-light: #ee9891;
-    --color-error-medium: #e04638;
-    --color-error-dark: #9b2318;
-    --color-error-xdark: #58240e;
-    --color-miscellaneous-body: #f8f7f7;
-    --spacing-nano: 0.125rem;
-    --spacing-micro: 0.25rem;
-    --spacing-mili: 0.5rem;
-    --spacing-centi: 0.75rem;
-    --spacing-deca: 1rem;
-    --spacing-kilo: 1.5rem;
-    --spacing-mega: 2rem;
-    --spacing-giga: 2.5rem;
-    --spacing-tera: 3rem;
-    --spacing-peta: 3.5rem;
-    --spacing-hexa: 4rem;
-    --border-radius-nano: 0.125rem;
-    --border-radius-micro: 0.25rem;
-    --border-radius-mili: 0.5rem;
-    --border-radius-centi: 1rem;
-    --border-radius-deca: 1.5rem;
-    --border-radius-pill: 999999px;
-    --border-width-pico: 0.063rem;
-    --border-width-nano: 0.125rem;
-    --font-size-h5: 1rem;
-    --line-height-h5: 1.5rem;
-    --font-size-h4: 1.125rem;
-    --line-height-h4: 1.688rem;
-    --font-size-h3: 1.25rem;
-    --line-height-h3: 2rem;
-    --font-size-h2: 1.625rem;
-    --line-height-h2: 2.375rem;
-    --font-size-h1: 2rem;
-    --line-height-h1: 2.625rem;
-    --font-size-base: 0.875rem;
-    --line-height-base: 1.313rem;
-    --font-size-sub: 0.75rem;
-    --line-height-sub: 1.125rem;
-    --font-size-label: 0.625rem;
-    --line-height-label: 0.75rem;
-    --font-size-micro: 0.75rem;
-    --font-size-mili: 0.875rem;
-    --font-size-centi: 1rem;
-    --font-size-deca: 1.125rem;
-    --font-size-kilo: 1.5rem;
-    --font-size-mega: 2rem;
-    --box-shadow-default: 0 2px 8px rgba(0, 0, 0, 0.05);
-    --border-color-success-light: #99E6C9;
-    --font-family-sans: Lato, system-ui, -apple-system, BlinkMacSystemFont, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-    --font-family-mono: Consolas, monaco, monospace;
-    --text-color-light: #fff;
-    --text-color-medium: #85807a;
-    --text-color-dark: #353231;
-    --text-color-orange: #f89907;
-    --z-index-default: 0;
-    --z-index-absolute: 1;
-    --z-index-select: 20;
-    --z-index-input: 20;
-    --z-index-popover: 30;
-    --z-index-tooltip: 40;
-    --z-index-header: 600;
-    --z-index-backdrop: 700;
-    --z-index-drawer: 700;
-    --z-index-sidebar: 800;
-    --z-index-modal: 1000;
-}