fixed global styles redundancy

frontend/src/components/Constructor/ElementEditorPanel.tsx

@@ -461,10 +461,6 @@ export function ElementEditorPanel({
                         descriptionTextColor={
                           selectedElement.descriptionTextColor || '#4B5563'
                         }
-                        descriptionBackgroundColor={
-                          selectedElement.descriptionBackgroundColor ||
-                          'transparent'
-                        }
                         iconAssetOptions={iconAssetOptions}
                         onChange={(prop, value) =>
                           onUpdateElement({ [prop]: value })
@@ -611,8 +607,6 @@ export function ElementEditorPanel({
                     zIndex: selectedElement.zIndex || '',
                     backgroundColor: selectedElement.backgroundColor || '',
                     color: selectedElement.color || '',
-                    fontFamily: selectedElement.fontFamily || '',
-                    fontStretch: selectedElement.fontStretch || '',
                   }}
                   onChange={(prop, value) =>
                     handleCssPropertyChange(prop, value, onUpdateElement)

frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx

@@ -19,7 +19,6 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
   descriptionTextFontFamily,
   descriptionTitleColor,
   descriptionTextColor,
-  descriptionBackgroundColor,
   onChange,
   context,
   iconAssetOptions = [],
@@ -135,15 +134,6 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
             className='h-10 w-full'
           />
         </FormField>
-        <FormField label='Background color'>
-          <input
-            value={descriptionBackgroundColor}
-            onChange={(event) =>
-              onChange('descriptionBackgroundColor', event.target.value)
-            }
-            placeholder='e.g. transparent, #ffffff'
-          />
-        </FormField>
       </div>
     </div>
   );

frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx

@@ -20,7 +20,6 @@ interface DescriptionSettingsSectionCompactProps {
   descriptionTextFontFamily: string;
   descriptionTitleColor: string;
   descriptionTextColor: string;
-  descriptionBackgroundColor: string;
   iconAssetOptions: AssetOption[];
   onChange: (prop: string, value: string) => void;
 }
@@ -37,7 +36,6 @@ const DescriptionSettingsSectionCompact: React.FC<
   descriptionTextFontFamily,
   descriptionTitleColor,
   descriptionTextColor,
-  descriptionBackgroundColor,
   iconAssetOptions,
   onChange,
 }) => {
@@ -183,20 +181,6 @@ const DescriptionSettingsSectionCompact: React.FC<
           }
         />
       </div>
-
-      <div>
-        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-          Background color
-        </label>
-        <input
-          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-          value={descriptionBackgroundColor}
-          onChange={(event) =>
-            onChange('descriptionBackgroundColor', event.target.value)
-          }
-          placeholder='e.g. transparent, #ffffff, rgba(0,0,0,0.5)'
-        />
-      </div>
     </div>
   );
 };

frontend/src/components/ElementSettings/StyleSettingsSection.tsx

@@ -8,7 +8,6 @@
 import React from 'react';
 import FormField from '../FormField';
 import type { StyleSettingsSectionProps } from './types';
-import { FONT_OPTIONS, getFontByKey, getFontKeyFromValues } from '../../lib/fonts';
 
 const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
   values,
@@ -241,31 +240,6 @@ const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
             placeholder='e.g. #131C22 / inherit'
           />
         </FormField>
-        <FormField label='Font family'>
-          <select
-            value={getFontKeyFromValues(values.fontFamily, values.fontStretch)}
-            onChange={(event) => {
-              const fontKey = event.target.value;
-              if (!fontKey) {
-                onChange('fontFamily', '');
-                onChange('fontStretch', '');
-              } else {
-                const font = getFontByKey(fontKey);
-                if (font) {
-                  onChange('fontFamily', font.fontFamily);
-                  onChange('fontStretch', font.fontStretch || '');
-                }
-              }
-            }}
-          >
-            <option value=''>Not set</option>
-            {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.key}>
-                {font.label}
-              </option>
-            ))}
-          </select>
-        </FormField>
       </div>
     </div>
   );

frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import type { StyleSettingsSectionProps } from './types';
-import { FONT_OPTIONS, getFontByKey, getFontKeyFromValues } from '../../lib/fonts';
 
 const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
   values,
@@ -337,36 +336,6 @@ const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
           />
         </div>
       </div>
-
-      <div>
-        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-          Font family
-        </label>
-        <select
-          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-          value={getFontKeyFromValues(values.fontFamily, values.fontStretch)}
-          onChange={(e) => {
-            const fontKey = e.target.value;
-            if (!fontKey) {
-              onChange('fontFamily', '');
-              onChange('fontStretch', '');
-            } else {
-              const font = getFontByKey(fontKey);
-              if (font) {
-                onChange('fontFamily', font.fontFamily);
-                onChange('fontStretch', font.fontStretch || '');
-              }
-            }
-          }}
-        >
-          <option value=''>Not set</option>
-          {FONT_OPTIONS.map((font) => (
-            <option key={font.key} value={font.key}>
-              {font.label}
-            </option>
-          ))}
-        </select>
-      </div>
     </div>
   );
 };

frontend/src/components/ElementSettings/types.ts

@@ -125,7 +125,6 @@ export interface DescriptionSettingsSectionProps {
   descriptionTextFontFamily: string;
   descriptionTitleColor: string;
   descriptionTextColor: string;
-  descriptionBackgroundColor: string;
   onChange: (field: string, value: string) => void;
   context: ElementSettingsContext;
   iconAssetOptions?: AssetOption[];

frontend/src/components/ElementSettings/useElementSettingsForm.ts

@@ -68,7 +68,6 @@ interface FormState {
   zIndex: string;
   backgroundColor: string;
   color: string;
-  fontFamily: string;
 
   // Effect settings
   appearAnimation: string;
@@ -115,7 +114,6 @@ interface FormState {
   descriptionTextFontFamily: string;
   descriptionTitleColor: string;
   descriptionTextColor: string;
-  descriptionBackgroundColor: string;
 
   // Media settings
   mediaUrl: string;
@@ -167,7 +165,6 @@ const initialState: FormState = {
   zIndex: '',
   backgroundColor: '',
   color: '',
-  fontFamily: '',
   // Effect settings
   appearAnimation: '',
   appearAnimationDuration: '',
@@ -207,7 +204,6 @@ const initialState: FormState = {
   descriptionTextFontFamily: '',
   descriptionTitleColor: '',
   descriptionTextColor: '',
-  descriptionBackgroundColor: '',
   mediaUrl: '',
   mediaAutoplay: false,
   mediaLoop: false,
@@ -271,7 +267,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
         zIndex: String(settings.zIndex || ''),
         backgroundColor: String(settings.backgroundColor || ''),
         color: String(settings.color || ''),
-        fontFamily: String(settings.fontFamily || ''),
         // Effect settings
         appearAnimation: String(settings.appearAnimation || ''),
         appearAnimationDuration: String(settings.appearAnimationDuration || ''),
@@ -326,9 +321,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
         ),
         descriptionTitleColor: String(settings.descriptionTitleColor || ''),
         descriptionTextColor: String(settings.descriptionTextColor || ''),
-        descriptionBackgroundColor: String(
-          settings.descriptionBackgroundColor || '',
-        ),
         mediaUrl: String(settings.mediaUrl || ''),
         mediaAutoplay: Boolean(settings.mediaAutoplay),
         mediaLoop: Boolean(settings.mediaLoop),
@@ -408,7 +400,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
       zIndex: state.zIndex,
       backgroundColor: state.backgroundColor,
       color: state.color,
-      fontFamily: state.fontFamily,
     };
   }, [state]);
 
@@ -581,11 +572,9 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
     // Additional CSS properties
     const backgroundColorValue = toOptionalTrimmed(state.backgroundColor);
     const colorValue = toOptionalTrimmed(state.color);
-    const fontFamilyValue = toOptionalTrimmed(state.fontFamily);
 
     if (backgroundColorValue) settings.backgroundColor = backgroundColorValue;
     if (colorValue) settings.color = colorValue;
-    if (fontFamilyValue) settings.fontFamily = fontFamilyValue;
 
     // Effect properties
     const appearAnimationValue = toOptionalTrimmed(state.appearAnimation);
@@ -677,8 +666,6 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
         state.descriptionTitleColor.trim() || '#000000';
       settings.descriptionTextColor =
         state.descriptionTextColor.trim() || '#4B5563';
-      settings.descriptionBackgroundColor =
-        state.descriptionBackgroundColor.trim() || 'transparent';
     }
 
     // Gallery type settings

frontend/src/components/UiElements/elements/DescriptionElement.tsx

@@ -63,11 +63,10 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
   }
 
   // Without icon: render styled text description
-  const bgColor = element.descriptionBackgroundColor || 'transparent';
+  // Background color is controlled via CSS Styles tab (backgroundColor property)
-
   return (
     <div className={className} style={style}>
-      <div className='p-4 rounded' style={{ backgroundColor: bgColor }}>
+      <div className='p-4'>
         <p
           className='font-bold'
           style={{

frontend/src/components/UiElements/shared/useElementWrapperStyle.ts

@@ -61,8 +61,8 @@ export function useElementWrapperStyle({
     const hasTransparentBackground =
       (isDescriptionElementType(element.type) &&
         !element.iconUrl &&
-        (!element.descriptionBackgroundColor ||
+        (!element.backgroundColor ||
-          element.descriptionBackgroundColor === 'transparent')) ||
+          element.backgroundColor === 'transparent')) ||
       (isNavigationElementType(element.type) && Boolean(element.iconUrl)) ||
       isTooltipElementType(element.type) ||
       isGalleryElementType(element.type) ||

frontend/src/lib/elementDefaults.ts

@@ -124,7 +124,6 @@ export const TYPE_SPECIFIC_DEFAULTS: Partial<
     descriptionTextFontFamily: 'inherit',
     descriptionTitleColor: '#ffffff',
     descriptionTextColor: '#ffffff',
-    descriptionBackgroundColor: 'transparent',
   },
   gallery: {
     galleryCards: [],
@@ -514,11 +513,6 @@ export const buildElementSettings = (
       'descriptionTextColor',
       element.descriptionTextColor,
     );
-    addIfNotEmpty(
-      settings,
-      'descriptionBackgroundColor',
-      element.descriptionBackgroundColor,
-    );
   }
 
   // Gallery type settings

frontend/src/lib/elementStyles.ts

@@ -36,8 +36,6 @@ export interface ElementStyleProperties {
   zIndex?: string;
   backgroundColor?: string;
   color?: string;
-  fontFamily?: string;
-  fontStretch?: string;
 }
 
 /**
@@ -68,8 +66,6 @@ export const ELEMENT_STYLE_PROPS = [
   'zIndex',
   'backgroundColor',
   'color',
-  'fontFamily',
-  'fontStretch',
 ] as const;
 
 /**

frontend/src/pages/element-type-defaults/[id].tsx

@@ -341,9 +341,6 @@ const ElementTypeDefaultDetailsPage = () => {
                       }
                       descriptionTitleColor={form.state.descriptionTitleColor}
                       descriptionTextColor={form.state.descriptionTextColor}
-                      descriptionBackgroundColor={
-                        form.state.descriptionBackgroundColor
-                      }
                       onChange={handleTypeChange}
                       context='global'
                     />

frontend/src/pages/project-element-defaults/[id].tsx

@@ -526,9 +526,6 @@ const ProjectElementDefaultDetailsPage = () => {
                     }
                     descriptionTitleColor={form.state.descriptionTitleColor}
                     descriptionTextColor={form.state.descriptionTextColor}
-                    descriptionBackgroundColor={
-                      form.state.descriptionBackgroundColor
-                    }
                     onChange={handleTypeChange}
                     context='project'
                   />

frontend/src/types/constructor.ts

@@ -115,7 +115,6 @@ export interface CanvasElement extends BaseCanvasElement {
   descriptionTextFontFamily?: string;
   descriptionTitleColor?: string;
   descriptionTextColor?: string;
-  descriptionBackgroundColor?: string;
   navLabel?: string;
   navLabelFontFamily?: string;
   navType?: NavigationButtonKind;