@forcecalendar/interface 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/components/ForceCalendar.js

@@ -6,7 +6,7 @@
 
 import { BaseComponent } from '../core/BaseComponent.js';
 import StateManager from '../core/StateManager.js';
-import { StyleUtils } from '../utils/StyleUtils.js';
+import { StyleUtils, THEME_PRESETS } from '../utils/StyleUtils.js';
 import { DateUtils } from '../utils/DateUtils.js';
 import { DOMUtils } from '../utils/DOMUtils.js';
 
@@ -26,7 +26,7 @@ export class ForceCalendar extends BaseComponent {
   };
 
   static get observedAttributes() {
-    return ['view', 'date', 'locale', 'timezone', 'week-starts-on', 'height'];
+    return ['view', 'date', 'locale', 'timezone', 'week-starts-on', 'height', 'theme'];
   }
 
   constructor() {
@@ -801,7 +801,25 @@ export class ForceCalendar extends BaseComponent {
     return '<div id="calendar-view-container"></div>';
   }
 
+  /**
+   * Apply a named theme preset (e.g. theme="slds") as host-level custom
+   * properties so it cascades into the shadow DOM and stays overridable
+   * by page-level --fc-* variables.
+   */
+  _applyTheme(name) {
+    const preset = THEME_PRESETS[name];
+    for (const token of Object.keys(THEME_PRESETS.slds)) {
+      if (preset && preset[token]) {
+        this.style.setProperty(token, preset[token]);
+      } else {
+        this.style.removeProperty(token);
+      }
+    }
+  }
+
   afterRender() {
+    this._applyTheme(this.getAttribute('theme'));
+
     // Manually instantiate and mount view renderer (bypasses Locker Service)
     const container = this.$('#calendar-view-container');
 

package/src/utils/StyleUtils.js

@@ -2,6 +2,34 @@
  * StyleUtils - Styling utilities and theme management
  */
 
+/**
+ * Named theme presets applied via the <forcecal-main theme="..."> attribute.
+ * Each maps design tokens to a platform's visual language.
+ */
+export const THEME_PRESETS = {
+  // Salesforce Lightning Design System: looks native on the platform
+  slds: {
+    '--fc-primary-color': '#0176d3',
+    '--fc-primary-hover': '#014486',
+    '--fc-primary-light': '#eef4ff',
+    '--fc-accent-color': '#0b5cab',
+    '--fc-text-color': '#181818',
+    '--fc-text-secondary': '#706e6b',
+    '--fc-text-light': '#939393',
+    '--fc-border-color': '#e5e5e5',
+    '--fc-border-color-hover': '#c9c9c9',
+    '--fc-background': '#ffffff',
+    '--fc-background-alt': '#f3f3f3',
+    '--fc-background-hover': '#f3f3f3',
+    '--fc-background-active': '#d8e6fe',
+    '--fc-danger-color': '#ea001e',
+    '--fc-success-color': '#2e844a',
+    '--fc-border-radius': '0.25rem',
+    '--fc-border-radius-sm': '0.125rem',
+    '--fc-font-family': "'Salesforce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  }
+};
+
 export class StyleUtils {
   /**
    * Default theme colors

package/types/components/ForceCalendar.d.ts

@@ -59,6 +59,12 @@ export declare class ForceCalendar extends BaseComponent {
     getStyles(): string;
     template(): string;
     renderView(): string;
+    /**
+     * Apply a named theme preset (e.g. theme="slds") as host-level custom
+     * properties so it cascades into the shadow DOM and stays overridable
+     * by page-level --fc-* variables.
+     */
+    _applyTheme(name: any): void;
     afterRender(): void;
     handleNavigation(event: any): void;
     handleViewChange(event: any): void;

package/types/utils/StyleUtils.d.ts

@@ -1,6 +1,32 @@
 /**
  * StyleUtils - Styling utilities and theme management
  */
+/**
+ * Named theme presets applied via the <forcecal-main theme="..."> attribute.
+ * Each maps design tokens to a platform's visual language.
+ */
+export declare const THEME_PRESETS: {
+    slds: {
+        '--fc-primary-color': string;
+        '--fc-primary-hover': string;
+        '--fc-primary-light': string;
+        '--fc-accent-color': string;
+        '--fc-text-color': string;
+        '--fc-text-secondary': string;
+        '--fc-text-light': string;
+        '--fc-border-color': string;
+        '--fc-border-color-hover': string;
+        '--fc-background': string;
+        '--fc-background-alt': string;
+        '--fc-background-hover': string;
+        '--fc-background-active': string;
+        '--fc-danger-color': string;
+        '--fc-success-color': string;
+        '--fc-border-radius': string;
+        '--fc-border-radius-sm': string;
+        '--fc-font-family': string;
+    };
+};
 export declare class StyleUtils {
     /**
      * Default theme colors