@trackunit/css-component-tokens 0.0.20 → 0.0.21

package/index.js

@@ -0,0 +1,256 @@
+import { variablesToCSSRules } from '@trackunit/css-tailwind-custom-properties-plugin';
+import plugin from 'tailwindcss/plugin';
+
+/**
+ * Returns the designTokens passed, but ensures it satisfies DesignTokens type while keeping it literal
+ */
+const AsComponentTokenDefinition = (designTokens) => designTokens;
+
+/*
+ * This file holds the custom design tokens for this component.
+ * These will be added to the tailwind configuration.
+ */
+const BaseInputTokenDefinition = AsComponentTokenDefinition({
+    DEFAULT: {
+        border: { borderRadius: "var(--border-radius-lg)", borderWidth: "1px" },
+        shadow: { boxShadow: "var(--box-shadow-sm)" },
+        background: { backgroundColor: "white" },
+        prefix: { borderRightWidth: "1px" },
+    },
+    "theme-marketing": {
+        border: { borderRadius: "70px", borderWidth: "0px" },
+        shadow: { boxShadow: "none" },
+        background: { backgroundColor: "rgb(var(--color-stone-50))" },
+        prefix: { borderRightWidth: "0px" },
+    },
+});
+
+/*
+ * This file holds the custom design tokens for this component.
+ * These will be added to the tailwind configuration.
+ */
+const ButtonTokenDefinition = AsComponentTokenDefinition({
+    DEFAULT: {
+        "secondary-color": { backgroundColor: "rgb(var(--color-secondary-200))", color: "rgb(var(--color-secondary-600))" },
+        border: { borderRadius: "var(--border-radius-lg)" },
+        height: { height: "auto" },
+        padding: { paddingLeft: "var(--spacing-2-5)", paddingRight: "var(--spacing-2-5)" },
+    },
+    "theme-marketing": {
+        "secondary-color": { backgroundColor: "rgb(var(--color-secondary-600))", color: "rgb(var(--color-secondary-50))" },
+        border: { borderRadius: "50px" },
+        height: { height: "55px" },
+        padding: { paddingLeft: "var(--spacing-12)", paddingRight: "var(--spacing-12)" },
+    },
+});
+
+/*
+ * This file holds the custom design tokens for this component.
+ * These will be added to the tailwind configuration.
+ */
+const CardTokenDefinition = AsComponentTokenDefinition({
+    DEFAULT: {
+        border: { borderColor: "rgb(var(--color-slate-200))", borderRadius: "var(--border-radius-DEFAULT)" },
+        "popover-border": { borderRadius: "var(--border-radius-DEFAULT)" },
+        shadow: { boxShadow: "var(--box-shadow-DEFAULT)" },
+        spacing: { gap: "var(--spacing-3)", padding: "var(--spacing-3)" },
+        "spacing-sm": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
+        "spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-6)" },
+    },
+    "theme-marketing": {
+        border: { borderColor: "rgba(0, 0, 0, 0)", borderRadius: "2rem" },
+        "popover-border": { borderRadius: "1rem" },
+        shadow: { boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)" },
+        spacing: { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
+        "spacing-sm": { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
+        "spacing-md": { gap: "var(--spacing-1)", padding: "var(--spacing-1)" },
+    },
+});
+
+/*
+ * This file holds the custom design tokens for this component.
+ * These will be added to the tailwind configuration.
+ */
+const FormGroupTokenDefinition = AsComponentTokenDefinition({
+    DEFAULT: {
+        gap: { display: "auto", gap: "auto" },
+        font: { fontWeight: "normal" },
+    },
+    "theme-marketing": {
+        gap: { display: "grid", gap: "var(--spacing-4)" },
+        font: { fontWeight: "700" },
+    },
+});
+
+/*
+ * This file holds the custom design tokens for this component.
+ * These will be added to the tailwind configuration.
+ */
+const PopoverTokenDefinition = AsComponentTokenDefinition({
+    DEFAULT: {
+        border: { borderRadius: "var(--border-radius-DEFAULT)" },
+    },
+    "theme-marketing": {
+        border: { borderRadius: "1rem" },
+    },
+});
+
+/*
+ * This file holds the custom design tokens for this component.
+ * These will be added to the tailwind configuration.
+ */
+const PopoverListItemTokenDefinition = AsComponentTokenDefinition({
+    DEFAULT: {
+        border: { borderRadius: "var(--border-radius-DEFAULT)" },
+    },
+    "theme-marketing": {
+        border: { borderRadius: "1rem" },
+    },
+});
+
+/*
+ * This file holds the custom design tokens for this component.
+ * These will be added to the tailwind configuration.
+ */
+const 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-gray-400))" },
+        "widen-focus": { borderBottomColor: "rgb(var(--color-gray-400))" },
+        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",
+        },
+    },
+});
+
+const componentTokenDefinitions = {
+    card: CardTokenDefinition,
+    button: ButtonTokenDefinition,
+    search: SearchTokenDefinition,
+    popover: PopoverTokenDefinition,
+    popoverListItem: PopoverListItemTokenDefinition,
+    baseInput: BaseInputTokenDefinition,
+    formGroup: FormGroupTokenDefinition,
+};
+
+/** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
+const getComponentTokenVariablesByThemeName = (theme, componentTokenDefinitions) => {
+    const themeTokenObject = Object.fromEntries(Object.entries(componentTokenDefinitions).map(([componentName, componentThemes]) => [
+        componentName,
+        componentThemes[theme],
+    ]));
+    return themeTokenObject;
+};
+
+/** The prefix for css variables and tailwind component classes */
+const PREFIX = "component";
+/**
+ * Get the css variable value for the component tokens specific property.
+ *
+ * @param component The name of the component to get the variable for.
+ * @param token The component-level token name
+ * @param cssProperty The css property on the component-level Token
+ * @returns {string} `var(--${PREFIX}-${component}-${token}-${cssProperty})`
+ */
+const componentTokenAsCssVariableString = (component, token, cssProperty) => `var(--${PREFIX}-${component}-${token}-${cssProperty})`;
+/**
+ * Get the full CSSProperties for a component token.
+ * Replaces the css values from the ComponentTokenDefinition with the corresponding css variable.
+ *
+ * @param {ComponentNames} component The name of the component
+ * @param {ComponentTokenNames} token The name of the token
+ * @param {CSSProperties} tokenObject The CSSProperties for the component token
+ * @returns {*}  {CSSProperties} CSSProperties converted to use the css variable for the correstonding token
+ */
+const componentTokenToCSSProperties = (component, token, tokenObject) => {
+    return Object.fromEntries(Object.keys(tokenObject).map(key => [
+        key,
+        componentTokenAsCssVariableString(component, token, key),
+    ]));
+};
+/**
+ * Generate the full object og componentToken rules for the Tailwind plugin.
+ */
+const getAllComponentTokenRules = (componentDefinitions) => {
+    const components = {};
+    Object.entries(componentDefinitions).forEach(([componentName, themes]) => Object.entries(themes.DEFAULT).forEach(([tokenName, value]) => {
+        const typedComponentName = componentName; // TS does not do literals from Object keys so we do it manually
+        const typedTokenName = tokenName; // TS does not do literals from Object keys so we do it manually
+        const selector = `.${PREFIX}-${typedComponentName}-${typedTokenName}`;
+        components[selector] = componentTokenToCSSProperties(typedComponentName, typedTokenName, value);
+    }));
+    return components;
+};
+
+const cssVariablesDefinition = variablesToCSSRules({
+    DEFAULT: {
+        component: getComponentTokenVariablesByThemeName("DEFAULT", componentTokenDefinitions),
+    },
+    "theme-marketing": {
+        component: getComponentTokenVariablesByThemeName("theme-marketing", componentTokenDefinitions),
+    },
+});
+const ComponentTokensPlugin = plugin(function ({ addComponents }) {
+    addComponents(cssVariablesDefinition);
+    addComponents(getAllComponentTokenRules(componentTokenDefinitions));
+});
+
+export { ComponentTokensPlugin, ComponentTokensPlugin as default };

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@trackunit/css-component-tokens",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "main": "./index.cjs",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "type": "commonjs",
+  "module": "./index.js",
+  "type": "module",
   "types": "./src/index.d.ts",
   "dependencies": {
     "csstype": "3.1.1",
-    "@trackunit/css-tailwind-custom-properties-plugin": "0.0.12"
+    "@trackunit/css-tailwind-custom-properties-plugin": "0.0.13"
   },
   "peerDependencies": {}
 }