...

Author: mstijak

homedocs/src/examples/theme-editor/Preview.tsx

@@ -6,7 +6,7 @@ import {
   Prop,
 } from "cx/ui";
 import { Repeater } from "cx/widgets";
-import { ThemeVarsDiv } from "cx-theme-variables";
+import { ThemeVarsDiv, ThemeVarsRoot } from "cx-theme-variables";
 import { m } from "./model";
 import { examples, ExampleDef } from "./examples";
 import { categoriesToTheme, fontOptions } from "./data";
@@ -43,9 +43,14 @@ function getGoogleFontUrl(fontId: string | null): string | undefined {
 export const Preview = createFunctionalComponent(() => (
   <ThemeVarsDiv
     theme={computable(m.categories, categoriesToTheme)}
+    cssSelector=".theme-editor-preview"
     class="flex-1 p-6 overflow-y-auto border-r border-border"
     applyReset
   >
+    <ThemeVarsRoot
+      theme={computable(m.categories, categoriesToTheme)}
+      cssSelector=".theme-editor-preview"
+    />
     <link
       href={computable(m.font, getGoogleFontUrl)}
       rel="stylesheet"

homedocs/src/examples/theme-editor/data.ts

@@ -223,6 +223,12 @@ const variableMetadata: Array<{
     type: "size",
     category: "inputs",
   },
+  {
+    key: "inputBorderWidth",
+    label: "Border width",
+    type: "size",
+    category: "inputs",
+  },
   // Checks & Switches
   {
     key: "checkboxSize",
@@ -525,6 +531,14 @@ const variableMetadata: Array<{
     type: "size",
     category: "sections",
   },
+  // Dropdowns
+  {
+    key: "dropdownBorderWidth",
+    label: "Border width",
+    type: "size",
+    category: "dropdowns",
+  },
+
   // Toasts
   {
     key: "toastBackgroundColor",
@@ -564,6 +578,12 @@ const variableMetadata: Array<{
   },
 
   // Calendar
+  {
+    key: "calendarBorderWidth",
+    label: "Border width",
+    type: "size",
+    category: "calendar",
+  },
   {
     key: "calendarBackgroundColor",
     label: "Background",
@@ -625,6 +645,7 @@ const categoryMetadata = [
   { id: "calendar", name: "Calendar", icon: "calendar", group: "Components" },
   { id: "sections", name: "Sections", icon: "panel-top", group: "Components" },
   { id: "toasts", name: "Toasts", icon: "bell", group: "Components" },
+  { id: "dropdowns", name: "Dropdowns", icon: "drop-down", group: "Components" },
 ];
 
 export const categoryGroups = [

homedocs/src/examples/theme-editor/examples.ts

@@ -69,7 +69,7 @@ export const examples: ExampleDef[] = [
   {
     id: "lookup-field",
     name: "LookupField",
-    categories: ["colors", "inputs", "sizing", "effects"],
+    categories: ["colors", "inputs", "dropdowns", "sizing", "effects"],
     component: () => import("../forms/LookupFieldExample"),
   },
   {
@@ -154,6 +154,18 @@ export const examples: ExampleDef[] = [
     categories: ["colors", "toasts", "effects"],
     component: () => import("../layout/ToastDeclarativeExample"),
   },
+  {
+    id: "dropdown-basic",
+    name: "Dropdown",
+    categories: ["colors", "dropdowns", "effects"],
+    component: () => import("../layout/DropdownBasicExample"),
+  },
+  {
+    id: "dropdown-search",
+    name: "Dropdown Search",
+    categories: ["colors", "dropdowns", "effects"],
+    component: () => import("../layout/DropdownSearchExample"),
+  },
   {
     id: "tooltip",
     name: "Tooltip",
@@ -263,9 +275,15 @@ export const examples: ExampleDef[] = [
   {
     id: "menu",
     name: "Menu",
-    categories: ["colors", "sizing", "effects"],
+    categories: ["colors", "dropdowns", "sizing", "effects"],
     component: () => import("../layout/MenuVerticalExample"),
   },
+  {
+    id: "context-menu",
+    name: "Context Menu",
+    categories: ["colors", "dropdowns", "effects"],
+    component: () => import("../layout/ContextMenuExample"),
+  },
 
   // Icons
   {

packages/cx-theme-variables/src/ThemeVariables.ts

@@ -48,6 +48,7 @@ export interface ThemeVariables {
    inputLineHeight: string;
    inputPaddingX: string;
    inputPaddingY: string;
+   inputBorderWidth: string;
    checkboxSize: string;
 
    buttonBackgroundColor: string;
@@ -83,6 +84,8 @@ export interface ThemeVariables {
    gridDataBackgroundColor: string;
    gridDataBorderColor: string;
 
+   dropdownBorderWidth: string;
+
    toastBackgroundColor: string;
    toastBorderWidth: string;
    toastBorderColor: string;
@@ -102,6 +105,7 @@ export interface ThemeVariables {
    sectionFooterMargin: string;
    sectionFooterBorderWidth: string;
 
+   calendarBorderWidth: string;
    calendarBackgroundColor: string;
    calendarPadding: string;
    calendarHeaderFontWeight: string;
@@ -162,6 +166,7 @@ export const variableMap: Record<keyof ThemeVariables, string> = {
    inputLineHeight: "--cx-input-line-height",
    inputPaddingX: "--cx-input-padding-x",
    inputPaddingY: "--cx-input-padding-y",
+   inputBorderWidth: "--cx-input-border-width",
    checkboxSize: "--cx-checkbox-size",
 
    buttonBackgroundColor: "--cx-button-background-color",
@@ -197,6 +202,8 @@ export const variableMap: Record<keyof ThemeVariables, string> = {
    gridDataBackgroundColor: "--cx-grid-data-background-color",
    gridDataBorderColor: "--cx-grid-data-border-color",
 
+   dropdownBorderWidth: "--cx-dropdown-border-width",
+
    toastBackgroundColor: "--cx-toast-background-color",
    toastBorderWidth: "--cx-toast-border-width",
    toastBorderColor: "--cx-toast-border-color",
@@ -216,6 +223,7 @@ export const variableMap: Record<keyof ThemeVariables, string> = {
    sectionFooterMargin: "--cx-section-footer-margin",
    sectionFooterBorderWidth: "--cx-section-footer-border-width",
 
+   calendarBorderWidth: "--cx-calendar-border-width",
    calendarBackgroundColor: "--cx-calendar-background-color",
    calendarPadding: "--cx-calendar-padding",
    calendarHeaderFontWeight: "--cx-calendar-header-font-weight",

packages/cx-theme-variables/src/ThemeVarsDiv.tsx

@@ -20,6 +20,12 @@ export interface ThemeVarsDivConfig extends StyledContainerConfig {
 
   /** Apply reset styles (background, color, font) to the div */
   applyReset?: boolean;
+
+  /** CSS selector (e.g. ".my-theme") to use class-based scoping instead of inline styles.
+   * When provided, the class is applied to the div and a data-theme-container-class attribute
+   * is set so portaled overlays can inherit the scoped theme. A separate ThemeVarsRoot with
+   * the same cssSelector must define the actual CSS variables. */
+  cssSelector?: string;
 }
 
 /**
@@ -29,6 +35,7 @@ export interface ThemeVarsDivConfig extends StyledContainerConfig {
 export class ThemeVarsDiv extends StyledContainer {
   declare theme: Partial<ThemeVariables>;
   declare applyReset: boolean;
+  declare cssSelector: string;
 
   constructor(config: ThemeVarsDivConfig) {
     super(config);
@@ -43,18 +50,20 @@ export class ThemeVarsDiv extends StyledContainer {
   render(context: any, instance: any, key: string) {
     const { data } = instance;
     const { theme } = data;
-
     const themeStyle = themeVariablesToStyle(theme);
 
+    let themeCssClass = this.cssSelector?.startsWith(".") ? this.cssSelector.substring(1) : this.cssSelector;
+
     return (
       <div
         key={key}
-        className={data.classNames}
+        className={this.CSS.expand(data.classNames, themeCssClass)}
         style={{
           ...themeStyle,
           ...(this.applyReset ? resetStyle : null),
           ...data.style,
         }}
+        data-theme-container-class={themeCssClass}
       >
         {this.renderChildren(context, instance)}
       </div>

packages/cx-theme-variables/src/configureOverlayContainer.ts

@@ -0,0 +1,17 @@
+import { ConfigureOverlayContainerContext } from "cx/widgets";
+
+export function configureOverlayContainer(
+   containerEl: HTMLElement,
+   context: ConfigureOverlayContainerContext
+) {
+   let { relatedElement } = context;
+   if (!relatedElement) return;
+   let el: HTMLElement | null = relatedElement;
+   while (el) {
+      if (el.dataset?.themeContainerClass) {
+         containerEl.classList.add(el.dataset.themeContainerClass);
+         return;
+      }
+      el = el.parentElement;
+   }
+}

packages/cx-theme-variables/src/index.scss

@@ -32,6 +32,12 @@ $mod: map.get($cx-besm, mod);
    }
 }
 
+@if (cx-included("cx/widgets/Dropdown") and cx-included("cx/widgets/Calendar")) {
+   .#{$block}dropdown > .#{$block}calendar {
+      --cx-calendar-border-width: 0;
+   }
+}
+
 @if (cx-included("cx/widgets/Grid")) {
    .#{$element}grid-data:last-child {
       border-bottom-left-radius: var(--cx-grid-border-radius);

packages/cx-theme-variables/src/index.ts

@@ -1,11 +1,15 @@
 import { Localization } from "cx/ui";
+import { OverlayBase } from "cx/widgets";
+import { configureOverlayContainer } from "./configureOverlayContainer";
 
 export * from "./ThemeVariables";
 export * from "./ThemeVarsRoot";
 export * from "./ThemeVarsDiv";
 export * from "./presets";
 
 export function applyThemeOverrides() {
+   OverlayBase.configureOverlayContainer = configureOverlayContainer;
+
    Localization.override("cx/widgets/Window", {
       animate: true,
       destroyDelay: 200,
@@ -23,6 +27,11 @@ export function applyThemeOverrides() {
       footerDirection: "row-reverse",
       footerJustify: "start",
    });
+
+   Localization.override("cx/widgets/ContextMenu", {
+      arrow: true,
+      offset: 5,
+   });
 }
 
 applyThemeOverrides();

packages/cx-theme-variables/src/maps.scss

@@ -15,6 +15,7 @@
 @use "./widgets/form/Calendar.scss" as *;
 @use "./widgets/form/Label.scss" as *;
 @use "./widgets/Section.scss" as *;
+@use "./widgets/overlay/Dropdown.scss" as *;
 @use "./widgets/overlay/Toast.scss" as *;
 
 // =============================================================================
@@ -125,18 +126,7 @@ $cx-section-mods: cx-deep-map-merge(
    )
 );
 
-// MENU
-$cx-dropdown-styles: map-merge(
-   $cx-dropdown-styles,
-   (
-      font-size: $cx-default-box-font-size - 1px,
-      font-weight: var(--cx-theme-font-weight),
-      border-width: 1px,
-      border-style: solid,
-      border-color: var(--cx-theme-border-color),
-      box-shadow: var(--cx-theme-box-shadow-elevated),
-   )
-);
+// MENU / DROPDOWN - see widgets/overlay/Dropdown.scss
 
 $cx-menu-state-style-map: map-merge(
    $cx-menu-state-style-map,

packages/cx-theme-variables/src/presets/default.ts

@@ -13,7 +13,7 @@ const defaultPreset: ThemeVariables = {
    borderColor: "lightgray",
    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
    boxShadowElevated:
-      "0 4px 8px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3)",
+      "0 4px 8px rgba(0, 0, 0, 0.17), 0 4px 8px rgba(0, 0, 0, 0.23)",
    focusBoxShadow: "0 0 0 2px rgba(25, 118, 210, 0.4)",
    borderRadius: "4px",
    baseFontSize: "14px",
@@ -53,6 +53,7 @@ const defaultPreset: ThemeVariables = {
    inputLineHeight: "22px",
    inputPaddingX: "6px",
    inputPaddingY: "6px",
+   inputBorderWidth: "1px",
    checkboxSize: "16px",
 
    buttonBackgroundColor: "#f5f5f5",
@@ -88,6 +89,8 @@ const defaultPreset: ThemeVariables = {
    gridDataBackgroundColor: "none",
    gridDataBorderColor: "#e0e0e0",
 
+   dropdownBorderWidth: "1px",
+
    toastBackgroundColor: "var(--cx-theme-surface-color)",
    toastBorderWidth: "1px",
    toastBorderColor: "var(--cx-theme-border-color)",
@@ -110,6 +113,7 @@ const defaultPreset: ThemeVariables = {
    sectionFooterMargin: "0",
    sectionFooterBorderWidth: "0",
 
+   calendarBorderWidth: "var(--cx-input-border-width)",
    calendarBackgroundColor: "white",
    calendarPadding: "var(--cx-input-padding-y)",
    calendarHeaderFontWeight: "500",