@trackunit/css-tailwind 0.0.14 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/css-tailwind",
-  "version": "0.0.14",
+  "version": "0.0.18",
   "main": "./index.cjs",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",

package/tailwind-base.generated.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -20,6 +22,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -32,8 +37,75 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// node_modules/tailwindcss/lib/util/createPlugin.js
+var require_createPlugin = __commonJS({
+  "node_modules/tailwindcss/lib/util/createPlugin.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports, "default", {
+      enumerable: true,
+      get: () => _default
+    });
+    function createPlugin(plugin3, config) {
+      return {
+        handler: plugin3,
+        config
+      };
+    }
+    createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    var _default = createPlugin;
+  }
+});
+
+// node_modules/tailwindcss/lib/public/create-plugin.js
+var require_create_plugin = __commonJS({
+  "node_modules/tailwindcss/lib/public/create-plugin.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports, "default", {
+      enumerable: true,
+      get: () => _default
+    });
+    var _createPlugin = /* @__PURE__ */ _interopRequireDefault(require_createPlugin());
+    function _interopRequireDefault(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    var _default = _createPlugin.default;
+  }
+});
+
+// node_modules/tailwindcss/plugin.js
+var require_plugin = __commonJS({
+  "node_modules/tailwindcss/plugin.js"(exports, module2) {
+    var createPlugin = require_create_plugin();
+    module2.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+  }
+});
+
 // libs/css/tailwind/src/lib/tailwind-base.ts
 var tailwind_base_exports = {};
 __export(tailwind_base_exports, {
@@ -41,6 +113,201 @@ __export(tailwind_base_exports, {
 });
 module.exports = __toCommonJS(tailwind_base_exports);
 
+// libs/css/tailwind-custom-properties-plugin/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// libs/css/tailwind-custom-properties-plugin/src/variablesToCSSRules.ts
+var keysToCssVariableName = (keys) => `--${keys.join("-")}`.replace(/[^a-zA-Z0-9]/g, "-");
+var flattenVariablesDeclerationValues = (values, output = {}, keys = []) => {
+  for (const [key, value] of Object.entries(values)) {
+    let flattend = {};
+    if (typeof value === "object") {
+      flattend = flattenVariablesDeclerationValues(value, output, [...keys, key]);
+    } else {
+      flattend[keysToCssVariableName([...keys, key])] = value;
+    }
+    output = __spreadValues(__spreadValues({}, flattend), output);
+  }
+  return output;
+};
+var variablesToCSSRules = (variablesDecleration) => {
+  if (!variablesDecleration) {
+    return [];
+  }
+  const cssRules = Object.entries(variablesDecleration).map(([key, value]) => ({
+    [key === "DEFAULT" ? ":root" : `.${key}`]: flattenVariablesDeclerationValues(value)
+  }));
+  return cssRules;
+};
+
+// libs/css/tailwind-custom-properties-plugin/src/plugin.ts
+var CssTailwindCustomPropertiesPlugin = (0, import_plugin.default)(({ addBase, theme }) => {
+  const variablesDeclerationFromThemeConfig = theme("variables", {});
+  const cssRules = variablesToCSSRules(variablesDeclerationFromThemeConfig);
+  addBase(cssRules);
+});
+
+// libs/css/component-tokens/src/plugin.ts
+var import_plugin2 = __toESM(require_plugin());
+
+// libs/css/component-tokens/src/component-tokens/ComponentTokenDefinition.ts
+var AsComponentTokenDefinition = (designTokens) => designTokens;
+
+// libs/css/component-tokens/src/component-tokens/components/Card.tokens.ts
+var CardTokenDefinition = AsComponentTokenDefinition({
+  DEFAULT: {
+    border: { borderColor: "rgb(var(--color-slate-200))", borderRadius: "var(--border-radius-DEFAULT)" },
+    shadow: { boxShadow: "var(--box-shadow-DEFAULT)" }
+  },
+  "theme-marketing": {
+    border: { borderColor: "rgba(0, 0, 0, 0)", borderRadius: "2rem" },
+    shadow: { boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)" }
+  }
+});
+
+// libs/css/component-tokens/src/component-tokens/components/Search.tokens.ts
+var SearchTokenDefinition = AsComponentTokenDefinition({
+  DEFAULT: {
+    width: { width: "9rem" },
+    background: { backgroundColor: "" },
+    borderless: { borderStyle: "hidden" },
+    "focus-hover": {
+      borderWidth: "1px",
+      borderBottomWidth: "1px",
+      borderColor: "rgb(var(--color-gray-400))",
+      borderBottomColor: "rgb(var(--color-gray-400))",
+      backgroundColor: "rgb(var(--color-slate-50))"
+    },
+    border: {
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderBottomWidth: "1px",
+      borderColor: "rgb(var(--color-gray-200))",
+      borderBottomColor: "rgb(var(--color-gray-200))",
+      borderRadius: "0.5rem"
+    },
+    "focus-within": {
+      borderColor: "rgb(var(--color-slate-400))",
+      boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)"
+    },
+    widen: { borderBottomColor: "rgb(var(--color-white-DEFAULT))" },
+    "widen-focus": { borderBottomColor: "rgb(var(--color-black-DEFAULT))" },
+    prefix: {
+      color: "rgb(var(--color-slate-400))",
+      cursor: "default"
+    }
+  },
+  "theme-marketing": {
+    width: { width: "0px" },
+    background: { backgroundColor: "transparent" },
+    borderless: {
+      borderStyle: "hidden"
+    },
+    "focus-hover": {
+      borderWidth: "0px",
+      borderBottomWidth: "2px",
+      borderColor: "rgb(var(--color-black-DEFAULT))",
+      borderBottomColor: "rgb(var(--color-black-DEFAULT))",
+      backgroundColor: "transparent"
+    },
+    border: {
+      borderStyle: "solid",
+      borderWidth: "0px",
+      borderBottomWidth: "2px",
+      borderColor: "rgb(var(--color-white-DEFAULT))",
+      borderBottomColor: "rgb(var(--color-black-DEFAULT))",
+      borderRadius: "0px"
+    },
+    "focus-within": {
+      borderColor: "none",
+      boxShadow: "none"
+    },
+    widen: {
+      borderBottomColor: "rgb(var(--color-white-DEFAULT))"
+    },
+    "widen-focus": {
+      borderBottomColor: "rgb(var(--color-black-DEFAULT))"
+    },
+    prefix: {
+      color: "rgb(var(--color-slate-600))",
+      cursor: "pointer"
+    }
+  }
+});
+
+// libs/css/component-tokens/src/component-tokens/components/Button.tokens.ts
+var ButtonTokenDefinition = AsComponentTokenDefinition({
+  DEFAULT: {
+    border: { borderRadius: "var(--border-radius-lg)" },
+    height: { height: "min-content", maxHeight: "32px" },
+    width: { width: "min-content", minWidth: "min-content" }
+  },
+  "theme-marketing": {
+    border: { borderRadius: "50px" },
+    height: { height: "55px", maxHeight: "" },
+    width: { width: "min-content", minWidth: "158px" }
+  }
+});
+
+// libs/css/component-tokens/src/component-tokens/ComponentTokens.ts
+var componentTokenDefinitions = {
+  card: CardTokenDefinition,
+  button: ButtonTokenDefinition,
+  search: SearchTokenDefinition
+};
+
+// libs/css/component-tokens/src/component-tokens/ComponentTokenVariablesByThemeName.ts
+var getComponentTokenVariablesByThemeName = (theme, componentTokenDefinitions2) => {
+  const themeTokenObject = Object.fromEntries(
+    Object.entries(componentTokenDefinitions2).map(([componentName, componentThemes]) => [
+      componentName,
+      componentThemes[theme]
+    ])
+  );
+  return themeTokenObject;
+};
+
+// libs/css/component-tokens/src/component-tokens/pluginUtilityFunctions.ts
+var PREFIX = "component";
+var componentTokenAsCssVariableString = (component, token, cssProperty) => `var(--${PREFIX}-${component}-${token}-${cssProperty})`;
+var componentTokenToCSSProperties = (component, token, tokenObject) => {
+  return Object.fromEntries(
+    Object.keys(tokenObject).map((key) => [
+      key,
+      componentTokenAsCssVariableString(component, token, key)
+    ])
+  );
+};
+var getAllComponentTokenRules = (componentDefinitions) => {
+  const components = {};
+  Object.entries(componentDefinitions).forEach(
+    ([componentName, themes]) => Object.entries(themes.DEFAULT).forEach(([tokenName, value]) => {
+      const typedComponentName = componentName;
+      const typedTokenName = tokenName;
+      const selector = `.${PREFIX}-${typedComponentName}-${typedTokenName}`;
+      components[selector] = componentTokenToCSSProperties(typedComponentName, typedTokenName, value);
+    })
+  );
+  return components;
+};
+
+// libs/css/component-tokens/src/plugin.ts
+var cssVariablesDefinition = variablesToCSSRules({
+  DEFAULT: {
+    component: getComponentTokenVariablesByThemeName("DEFAULT", componentTokenDefinitions)
+  },
+  "theme-marketing": {
+    component: getComponentTokenVariablesByThemeName("theme-marketing", componentTokenDefinitions)
+  }
+});
+var ComponentTokensPlugin = (0, import_plugin2.default)(function({ addComponents }) {
+  addComponents(cssVariablesDefinition);
+  addComponents(getAllComponentTokenRules(componentTokenDefinitions));
+});
+
+// libs/css/component-tokens/src/index.ts
+var src_default = ComponentTokensPlugin;
+
 // libs/ui/design-tokens/src/tokens/colors/tailwindPalette.ts
 var tailwindPalette = {
   slate: {
@@ -628,9 +895,51 @@ var tailwindBaseConfig = {
         popover: withCustomPropertyValueAsComment("--z-popover"),
         toast: withCustomPropertyValueAsComment("--z-toast")
       }
-    })
+    }),
+    variables: {
+      "theme-marketing": {
+        color: {
+          primary: {
+            50: "254 236 235",
+            100: "254 236 235",
+            200: "254 217 215",
+            300: "253 180 176",
+            400: "251 142 136",
+            500: "250 104 97",
+            600: "249 66 58",
+            700: "238 19 7",
+            800: "178 14 5",
+            900: "119 9 4"
+          },
+          secondary: {
+            50: "238 243 246",
+            100: "238 243 246",
+            200: "222 231 237",
+            300: "189 208 219",
+            400: "155 184 202",
+            500: "122 160 184",
+            600: "89 137 166",
+            700: "71 109 133",
+            800: "53 82 100",
+            900: "36 55 66"
+          },
+          accent: {
+            50: "255 246 240",
+            100: "255 246 240",
+            200: "255 238 224",
+            300: "255 223 199",
+            400: "255 206 168",
+            500: "255 191 143",
+            600: "255 173 112",
+            700: "255 134 41",
+            800: "219 95 0",
+            900: "148 64 0"
+          }
+        }
+      }
+    }
   },
-  plugins: []
+  plugins: [CssTailwindCustomPropertiesPlugin, src_default]
 };
 var tailwind_base_default = tailwindBaseConfig;
 // Annotate the CommonJS export names for ESM import in node: