Update to v0.41.0

fesm2022/circletone.mjs

@@ -52,11 +52,11 @@ class ButtonComponent {
         this.variant = 'default';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ButtonComponent, isStandalone: true, selector: "ct-button", inputs: { text: "text", type: "type", size: "size", variant: "variant" }, ngImport: i0, template: "<button\n  [ngClass]=\"{\n    'bg-primary': type === 'default' && variant === 'default',\n    'bg-on-primary': type === 'alternate' && variant === 'default',\n    'bg-yellow-400': type === 'warning' && variant === 'default',\n    'bg-red-400': type === 'error' && variant === 'default',\n    'bg-lime-600': type === 'success' && variant === 'default'\n  }\"\n  class=\"flex rounded-md px-4 py-2 text-center text-{{ size }}\">\n  {{ text }}\n</button>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ButtonComponent, isStandalone: true, selector: "ct-button", inputs: { text: "text", type: "type", size: "size", variant: "variant" }, ngImport: i0, template: "<button\n  [ngClass]=\"{\n    'bg-primary': type === 'default' && variant === 'default',\n    'bg-on-primary': type === 'alternate' && variant === 'default',\n    'bg-yellow-400': type === 'warning' && variant === 'default',\n    'bg-red-400': type === 'error' && variant === 'default',\n    'bg-lime-600': type === 'success' && variant === 'default'\n  }\"\n  class=\"flex rounded-md px-4 py-2 text-{{ size }}\">\n  {{ text }}\n</button>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ct-button', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [ngClass]=\"{\n    'bg-primary': type === 'default' && variant === 'default',\n    'bg-on-primary': type === 'alternate' && variant === 'default',\n    'bg-yellow-400': type === 'warning' && variant === 'default',\n    'bg-red-400': type === 'error' && variant === 'default',\n    'bg-lime-600': type === 'success' && variant === 'default'\n  }\"\n  class=\"flex rounded-md px-4 py-2 text-center text-{{ size }}\">\n  {{ text }}\n</button>\n" }]
+            args: [{ selector: 'ct-button', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [ngClass]=\"{\n    'bg-primary': type === 'default' && variant === 'default',\n    'bg-on-primary': type === 'alternate' && variant === 'default',\n    'bg-yellow-400': type === 'warning' && variant === 'default',\n    'bg-red-400': type === 'error' && variant === 'default',\n    'bg-lime-600': type === 'success' && variant === 'default'\n  }\"\n  class=\"flex rounded-md px-4 py-2 text-{{ size }}\">\n  {{ text }}\n</button>\n" }]
         }], propDecorators: { text: [{
                 type: Input,
                 args: [{ required: true }]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "circletone",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0"

tailwind.preset.js

@@ -1,64 +1,85 @@
 var colors = require('tailwindcss/colors');
+var plugin = require('tailwindcss/plugin');
+var customThemePlugin = plugin.withOptions(
+  function (options) {
+    return function ({ addUtilities, theme }) {
+      const newColors = options.colors || theme('colors');
+      const newFontFamily = options.fontFamily || theme('fontFamily');
+
+      addUtilities({
+        '.custom-color': { color: newColors.primary.DEFAULT },
+        '.custom-font': { fontFamily: newFontFamily.primary },
+      });
+    };
+  },
+  function (options) {
+    return {
+      theme: {
+        colors: options.colors,
+        fontFamily: options.fontFamily,
+      },
+    };
+  }
+);
 
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
-  plugins: [require('tailwindcss/colors')],
-  theme: {
-    //extend: {
-    darkMode: 'class',
-    fontFamily: {
-      primary: 'var(--font-primary)',
-      title: 'var(--font-title)',
-      logo: 'var(--font-logo)',
-    },
-    colors: {
-      ...colors,
-      primary: {
-        DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
-        dark: 'rgb(var(--primary-dark) / <alpha-value>)',
-        variation: 'rgb(var(--primary-variation) / <alpha-value>)',
-        'variation-dark': 'rgb(var(--primary-variation-dark) / <alpha-value>)',
-      },
-      secondary: {
-        DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
-        dark: 'rgb(var(--secondary-dark) / <alpha-value>)',
+  plugins: [
+    require('tailwindcss/colors'),
+    customThemePlugin({
+      colors: {
+        ...colors,
+        primary: {
+          DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
+          dark: 'rgb(var(--primary-dark) / <alpha-value>)',
+          variation: 'rgb(var(--primary-variation) / <alpha-value>)',
+          'variation-dark': 'rgb(var(--primary-variation-dark) / <alpha-value>)',
+        },
+        secondary: {
+          DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
+          dark: 'rgb(var(--secondary-dark) / <alpha-value>)',
+        },
+        background: {
+          DEFAULT: 'rgb(var(--background) / <alpha-value>)',
+          dark: 'rgb(var(--background-dark) / <alpha-value>)',
+        },
+        surface: {
+          DEFAULT: 'rgb(var(--surface) / <alpha-value>)',
+          variation: 'rgb(var(--surface-variation) / <alpha-value>)',
+          dark: 'rgb(var(--surface-dark) / <alpha-value>)',
+          'variation-dark': 'rgb(var(--surface-variation-dark) / <alpha-value>)',
+        },
+        accent: {
+          DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
+          dark: 'rgb(var(--accent-dark) / <alpha-value>)',
+        },
+        on: {
+          primary: 'rgb(var(--on-primary) / <alpha-value>)',
+          'primary-variation': 'rgb(var(--on-primary-variation) / <alpha-value>)',
+          secondary: 'rgb(var(--on-secondary) / <alpha-value>)',
+          'secondary-variation': 'rgb(var(--on-secondary-variation) / <alpha-value>)',
+          accent: 'rgb(var(--on-accent) / <alpha-value>)',
+          background: 'rgb(var(--on-background) / <alpha-value>)',
+          'background-variation': 'rgb(var(--on-background-variation) / <alpha-value>)',
+          surface: 'rgb(var(--on-surface) / <alpha-value>)',
+          'surface-variation': 'rgb(var(--on-surface-variation) / <alpha-value>)',
+          'primary-dark': 'rgb(var(--on-primary-dark) / <alpha-value>)',
+          'primary-variation-dark': 'rgb(var(--on-primary-variation-dark) / <alpha-value>)',
+          'secondary-dark': 'rgb(var(--on-secondary-dark) / <alpha-value>)',
+          'secondary-variation-dark': 'rgb(var(--on-secondary-variation-dark) / <alpha-value>)',
+          'accent-dark': 'rgb(var(--on-accent-dark) / <alpha-value>)',
+          'background-dark': 'rgb(var(--on-background-dark) / <alpha-value>)',
+          'background-variation-dark': 'rgb(var(--on-background-variation-dark) / <alpha-value>)',
+          'surface-dark': 'rgb(var(--on-surface-dark) / <alpha-value>)',
+          'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
+        },
       },
-      background: {
-        DEFAULT: 'rgb(var(--background) / <alpha-value>)',
-        dark: 'rgb(var(--background-dark) / <alpha-value>)',
+      fontFamily: {
+        primary: 'var(--font-primary)',
+        title: 'var(--font-title)',
+        logo: 'var(--font-logo)',
       },
-      surface: {
-        DEFAULT: 'rgb(var(--surface) / <alpha-value>)',
-        variation: 'rgb(var(--surface-variation) / <alpha-value>)',
-        dark: 'rgb(var(--surface-dark) / <alpha-value>)',
-        'variation-dark': 'rgb(var(--surface-variation-dark) / <alpha-value>)',
-      },
-      accent: {
-        DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
-        dark: 'rgb(var(--accent-dark) / <alpha-value>)',
-      },
-      on: {
-        primary: 'rgb(var(--on-primary) / <alpha-value>)',
-        'primary-variation': 'rgb(var(--on-primary-variation) / <alpha-value>)',
-        secondary: 'rgb(var(--on-secondary) / <alpha-value>)',
-        'secondary-variation': 'rgb(var(--on-secondary-variation) / <alpha-value>)',
-        accent: 'rgb(var(--on-accent) / <alpha-value>)',
-        background: 'rgb(var(--on-background) / <alpha-value>)',
-        'background-variation': 'rgb(var(--on-background-variation) / <alpha-value>)',
-        surface: 'rgb(var(--on-surface) / <alpha-value>)',
-        'surface-variation': 'rgb(var(--on-surface-variation) / <alpha-value>)',
-        'primary-dark': 'rgb(var(--on-primary-dark) / <alpha-value>)',
-        'primary-variation-dark': 'rgb(var(--on-primary-variation-dark) / <alpha-value>)',
-        'secondary-dark': 'rgb(var(--on-secondary-dark) / <alpha-value>)',
-        'secondary-variation-dark': 'rgb(var(--on-secondary-variation-dark) / <alpha-value>)',
-        'accent-dark': 'rgb(var(--on-accent-dark) / <alpha-value>)',
-        'background-dark': 'rgb(var(--on-background-dark) / <alpha-value>)',
-        'background-variation-dark': 'rgb(var(--on-background-variation-dark) / <alpha-value>)',
-        'surface-dark': 'rgb(var(--on-surface-dark) / <alpha-value>)',
-        'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
-      },
-    },
-  },
-  //},
+    }),
+  ],
 };