Commit 853bf4e6 authored by Axel Wolters (SK-Hamburg)'s avatar Axel Wolters (SK-Hamburg) ⚓
Browse files

feat(PropertiesPanel): enhance styling for dark and light themes, improve layout consistency

parent 329bb40f

src/components/PropertiesPanel.tsx

+5 −5
Original line number Diff line number Diff line
@@ -33,8 +33,8 @@ export const PropertiesPanel: React.FC<{ model: ModelApi }> = ({ model }) => { 
            <div id="properties-panel-content" className="panel-content-wrapper is-expanded">

                <div className="panel-inner">

                    {!selected && <div>

                        <strong>Dialog Page:</strong>

                        <div>{model.project.pages[model.activePageIndex].name}</div>

                        <strong className="kern-body">Dialog Page:</strong>

                        <div className="kern-body">{model.project.pages[model.activePageIndex].name}</div>

                    </div>}

                    {selected && <ComponentEditor comp={selected} model={model} />}

                </div>
@@ -77,8 +77,8 @@ const ComponentEditor: React.FC<{ comp: ComponentNode; model: ModelApi }> = ({ c 
            </div>

            {tab === 'component' && (

                <div className="kern-fieldset">

                    <div><strong>ID:</strong> {comp.id}</div>

                    <div><strong>Type:</strong> {comp.type}</div>

                    <div className="kern-body"><strong>ID:</strong> {comp.id}</div>

                    <div className="kern-body"><strong>Type:</strong> {comp.type}</div>

                    <div className="kern-form-input">

                        <label className="kern-label" htmlFor={`name-${comp.id}`}>Name</label>

                        <input
@@ -260,7 +260,7 @@ const CustomMetadataEditor: React.FC<{ comp: ComponentNode; model: ModelApi; met 
                    <h4 className="kern-heading kern-heading--x-small">FIM Import Data</h4>

                    {fimMetadata.map(([k, v]) => (

                        <div key={k} className="meta-row flex-row-gap-sm fim-meta-row">

                            <div className="kern-form-input flex-basis-140">

                            <div className="kern-form-input flex-basis-320">

                                <label className="kern-label">{k === 'fimCardinality' ? 'Cardinality' : k.replace('fim', '')}</label>

                                <span className="fim-meta-value">{v}</span>

                            </div>

src/styles.css

+363 −6
Original line number Diff line number Diff line
@@ -40,6 +40,26 @@ html, 
  --page-active-fg: var(--kern-color-page-active-fg, #003366);

}



/* Dark theme CSS custom property overrides */

html[data-kern-theme='dark'] {

  --border-color: var(--kern-border-color, #444);

  --bg-subtle: var(--kern-bg-subtle, #253542);

  --bg-elevated: var(--kern-bg-elevated, #1d2a33);

  --text-muted: var(--kern-text-muted, #777);

  --page-active-bg: var(--kern-color-page-active-bg, #364d5b);

  --page-active-fg: var(--kern-color-page-active-fg, #f0f4f8);

}



/* Light theme CSS custom property overrides */

html[data-kern-theme='light'] {

  --border-color: var(--kern-border-color, #d0d7de);

  --bg-subtle: var(--kern-bg-subtle, #f5f7f9);

  --bg-elevated: var(--kern-bg-elevated, #ffffff);

  --text-muted: var(--kern-text-muted, #5a6977);

  --page-active-bg: var(--kern-color-page-active-bg, #e6f2ff);

  --page-active-fg: var(--kern-color-page-active-fg, #003366);

}



.app-shell {

  display: grid;

  grid-template-rows: auto 1fr auto;
@@ -157,6 +177,7 @@ html, 
  background: var(--primary-50, #f0f8ff);

  border-radius: var(--radius-xs);

  font-size: 0.85rem;

  width: 100%;

}

.page-structure {

  padding: var(--space-2); /* ensure visible area reserved */
@@ -726,7 +747,44 @@ footer { 
}

.kern-tabs {

  display: flex;

  gap: var(--space-1);

  gap: var(--space-2);

  margin-bottom: var(--space-3);

  border-bottom: 1px solid var(--kern-border, #eee);

  margin-top: var(--space-1);

  padding-top: 4px;

}



.kern-tabs .kern-btn {

  border: none;

  border-radius: 0;

  background: transparent;

  color: var(--kern-text-secondary, #666);

  padding: 8px 16px 12px 16px;

  position: relative;

  transition: all 0.2s ease;

  margin-bottom: 0;

}



.kern-tabs .kern-btn:hover {

  background: transparent;

  color: var(--kern-text, #333);

}



.kern-tabs .kern-btn.active {

  background: transparent;

  color: var(--kern-text, #333);

  font-weight: 500;

}



.kern-tabs .kern-btn.active::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 16px;

  right: 16px;

  height: 4px;

  background: var(--kern-color-primary, #005fcc);

  border-radius: 2px;

}

.kern-table {

  border-collapse: collapse;
@@ -865,6 +923,10 @@ body.resizing { 
  flex: 0 0 140px;

}



.flex-basis-320 {

  flex: 0 0 320px;

}



/* Focus styles (global) */

button:focus-visible,

a:focus-visible,
@@ -875,13 +937,159 @@ select:focus-visible { 
  outline-offset: 2px;

}



/* Dark theme adjustments (optional overrides) */

/* Dark theme adjustments (comprehensive overrides) */

html[data-kern-theme='dark'] .app-header {

  background: #0d2438;

}

html[data-kern-theme='dark'] .app-footer {

  background: #0d2438;

}



/* Properties Panel Dark Theme */

html[data-kern-theme='dark'] .properties-panel {

  background: var(--kern-bg-elevated, #1d2a33);

  color: var(--kern-text, #f0f4f8);

}

html[data-kern-theme='dark'] .properties-panel-inner {

  background: var(--kern-bg-elevated, #1d2a33);

}

html[data-kern-theme='dark'] .panel-inner {

  background: var(--kern-bg-elevated, #1d2a33);

}

html[data-kern-theme='dark'] .panel-title {

  color: var(--kern-text, #f0f4f8);

}

html[data-kern-theme='dark'] .right-panel-wrapper {

  background: var(--kern-bg-elevated, #1d2a33);

  border-color: var(--kern-border, #444);

}

html[data-kern-theme='dark'] .right-panel-upper {

  background: var(--kern-bg-elevated, #1d2a33);

}

html[data-kern-theme='dark'] .right-panel-lower {

  background: var(--kern-bg-elevated, #1d2a33);

  border-color: var(--kern-border, #444);

}



/* Form Elements Dark Theme */

html[data-kern-theme='dark'] .kern-form-input__input,

html[data-kern-theme='dark'] .kern-form-input__select {

  background: var(--kern-bg-subtle, #253542);

  color: var(--kern-text, #f0f4f8);

  border-color: var(--kern-border, #444);

}

html[data-kern-theme='dark'] .kern-form-input__input:focus,

html[data-kern-theme='dark'] .kern-form-input__select:focus {

  border-color: var(--kern-color-primary, #66b3ff);

  box-shadow: 0 0 0 2px rgba(102, 179, 255, 0.2);

}

html[data-kern-theme='dark'] .kern-form-check__checkbox {

  background: var(--kern-bg-subtle, #253542);

  border-color: var(--kern-border, #444);

}



/* Fieldset Dark Theme */

html[data-kern-theme='dark'] .kern-fieldset {

  background: var(--kern-bg-subtle, #253542);

  border-color: var(--kern-border, #444);

}

html[data-kern-theme='dark'] .kern-fieldset legend {

  color: var(--kern-text, #f0f4f8);

}



/* Headings Dark Theme */

html[data-kern-theme='dark'] .kern-heading {

  color: var(--kern-text, #f0f4f8);

}

html[data-kern-theme='dark'] .kern-body {

  color: var(--kern-text, #f0f4f8);

}







/* FIM Metadata Dark Theme */

html[data-kern-theme='dark'] .fim-meta-row {

  background: var(--kern-bg-subtle, #253542);

}

html[data-kern-theme='dark'] .fim-meta-value {

  background: var(--kern-bg-elevated, #1d2a33);

  color: var(--kern-color-primary, #66b3ff);

}



/* Event/Meta Rows Dark Theme */

html[data-kern-theme='dark'] .event-row,

html[data-kern-theme='dark'] .meta-row {

  background: var(--kern-bg-elevated, #1d2a33);

}



/* Plugin Props Wrapper Dark Theme */

html[data-kern-theme='dark'] .plugin-props-wrapper {

  background: var(--kern-bg-elevated, #1d2a33);

  color: var(--kern-text, #f0f4f8);

}



/* Nested List Dark Theme */

html[data-kern-theme='dark'] .nested-list {

  background: var(--kern-bg-elevated, #1d2a33);

}



/* Row/Field containers Dark Theme */

html[data-kern-theme='dark'] .row {

  background: var(--kern-bg-subtle, #253542);

}



/* Component Editor Dark Theme */

html[data-kern-theme='dark'] .component-editor {

  background: var(--kern-bg-elevated, #1d2a33);

}



/* Help Text Dark Theme */

html[data-kern-theme='dark'] .help-text,

html[data-kern-theme='dark'] .empty-meta {

  color: var(--kern-text-muted, #777);

}



/* Model Tree Dark Theme */

html[data-kern-theme='dark'] .model-tree {

  background: var(--kern-bg-elevated, #1d2a33);

  color: var(--kern-text, #f0f4f8);

}

html[data-kern-theme='dark'] .model-tree-body {

  background: var(--kern-bg-subtle, #253542);

  border-color: var(--kern-border, #444);

}

html[data-kern-theme='dark'] .model-tree-row {

  color: var(--kern-text, #f0f4f8);

}

html[data-kern-theme='dark'] .model-tree-row:hover {

  background: var(--kern-bg-elevated, #364d5b);

}

html[data-kern-theme='dark'] .model-tree-row.is-page {

  background: var(--kern-bg-elevated, #1d2a33);

  border-color: var(--kern-border, #444);

}



/* Tabs Dark Theme */

html[data-kern-theme='dark'] .kern-tabs {

  border-bottom-color: #444;

}

html[data-kern-theme='dark'] .kern-tabs .kern-btn {

  color: #aaa;

}

html[data-kern-theme='dark'] .kern-tabs .kern-btn:hover {

  color: #ddd;

}

html[data-kern-theme='dark'] .kern-tabs .kern-btn.active {

  color: #f0f4f8;

}

html[data-kern-theme='dark'] .kern-tabs .kern-btn.active::after {

  background: #fff;

}



/* Page Structure Dark Theme */

html[data-kern-theme='dark'] .page-structure {

  background: var(--kern-bg-elevated, #1d2a33);

}

html[data-kern-theme='dark'] .page-item {

  background: #1d2a33;

  color: #f0f4f8;
@@ -889,6 +1097,8 @@ html[data-kern-theme='dark'] .page-item { 
html[data-kern-theme='dark'] .page-item:hover {

  background: #253542;

}



/* Design Area Dark Theme */

html[data-kern-theme='dark'] .design-area {

  background: #10181f;

}
@@ -899,7 +1109,7 @@ html[data-kern-theme='dark'] .design-node:hover { 
  background: #253542;

}



/* Light theme adjustments (optional overrides) */

/* Light theme adjustments (comprehensive overrides) */

html[data-kern-theme='light'] .app-header {

  background: #eeeeee;

}
@@ -907,13 +1117,160 @@ html[data-kern-theme='light'] .app-footer { 
  background: #eeeeee;

  color: #333;

}



/* Properties Panel Light Theme */

html[data-kern-theme='light'] .properties-panel {

  background: var(--kern-bg-elevated, #ffffff);

  color: var(--kern-text, #333);

}

html[data-kern-theme='light'] .properties-panel-inner {

  background: var(--kern-bg-elevated, #ffffff);

}

html[data-kern-theme='light'] .panel-inner {

  background: var(--kern-bg-elevated, #ffffff);

}

html[data-kern-theme='light'] .panel-title {

  color: var(--kern-text, #333);

}

html[data-kern-theme='light'] .right-panel-wrapper {

  background: var(--kern-bg-elevated, #ffffff);

  border-color: var(--kern-border, #d0d7de);

}

html[data-kern-theme='light'] .right-panel-upper {

  background: var(--kern-bg-elevated, #ffffff);

}

html[data-kern-theme='light'] .right-panel-lower {

  background: var(--kern-bg-elevated, #ffffff);

  border-color: var(--kern-border, #d0d7de);

}



/* Form Elements Light Theme */

html[data-kern-theme='light'] .kern-form-input__input,

html[data-kern-theme='light'] .kern-form-input__select {

  background: var(--kern-bg-elevated, #ffffff);

  color: var(--kern-text, #333);

  border-color: var(--kern-border, #d0d7de);

}

html[data-kern-theme='light'] .kern-form-input__input:focus,

html[data-kern-theme='light'] .kern-form-input__select:focus {

  border-color: var(--kern-color-primary, #005fcc);

  box-shadow: 0 0 0 2px rgba(0, 95, 204, 0.2);

}

html[data-kern-theme='light'] .kern-form-check__checkbox {

  background: var(--kern-bg-elevated, #ffffff);

  border-color: var(--kern-border, #d0d7de);

}



/* Fieldset Light Theme */

html[data-kern-theme='light'] .kern-fieldset {

  background: var(--kern-bg-elevated, #ffffff);

  border-color: var(--kern-border, #d0d7de);

}

html[data-kern-theme='light'] .kern-fieldset legend {

  color: var(--kern-text, #333);

}



/* Headings Light Theme */

html[data-kern-theme='light'] .kern-heading {

  color: var(--kern-text, #333);

}

html[data-kern-theme='light'] .kern-body {

  color: var(--kern-text, #333);

}



/* FIM Metadata Light Theme */

html[data-kern-theme='light'] .fim-meta-row {

  background: var(--kern-bg-subtle, #f5f7f9);

}

html[data-kern-theme='light'] .fim-meta-value {

  background: var(--primary-50, #f0f8ff);

  color: var(--primary-600, #0066cc);

}



/* Event/Meta Rows Light Theme */

html[data-kern-theme='light'] .event-row,

html[data-kern-theme='light'] .meta-row {

  background: var(--kern-bg-elevated, #ffffff);

}



/* Plugin Props Wrapper Light Theme */

html[data-kern-theme='light'] .plugin-props-wrapper {

  background: var(--kern-bg-elevated, #ffffff);

  color: var(--kern-text, #333);

}



/* Nested List Light Theme */

html[data-kern-theme='light'] .nested-list {

  background: var(--kern-bg-elevated, #ffffff);

}



/* Row/Field containers Light Theme */

html[data-kern-theme='light'] .row {

  background: var(--kern-bg-subtle, #f5f7f9);

}



/* Component Editor Light Theme */

html[data-kern-theme='light'] .component-editor {

  background: var(--kern-bg-elevated, #ffffff);

}



/* Help Text Light Theme */

html[data-kern-theme='light'] .help-text,

html[data-kern-theme='light'] .empty-meta {

  color: var(--kern-text-muted, #5a6977);

}



/* Model Tree Light Theme */

html[data-kern-theme='light'] .model-tree {

  background: var(--kern-bg-elevated, #ffffff);

  color: var(--kern-text, #333);

}

html[data-kern-theme='light'] .model-tree-body {

  background: var(--kern-bg-subtle, #f5f7f9);

  border-color: var(--kern-border, #d0d7de);

}

html[data-kern-theme='light'] .model-tree-row {

  color: var(--kern-text, #333);

}

html[data-kern-theme='light'] .model-tree-row:hover {

  background: var(--kern-bg-elevated, #ffffff);

}

html[data-kern-theme='light'] .model-tree-row.is-page {

  background: var(--kern-bg-elevated, #ffffff);

  border-color: var(--kern-border, #d0d7de);

}



/* Tabs Light Theme */

html[data-kern-theme='light'] .kern-tabs {

  border-bottom-color: #eee;

}

html[data-kern-theme='light'] .kern-tabs .kern-btn {

  color: #666;

}

html[data-kern-theme='light'] .kern-tabs .kern-btn:hover {

  color: #333;

}

html[data-kern-theme='light'] .kern-tabs .kern-btn.active {

  color: #333;

}

html[data-kern-theme='light'] .kern-tabs .kern-btn.active::after {

  background: var(--kern-color-primary, #005fcc);

}



/* Page Structure Light Theme */

html[data-kern-theme='light'] .page-structure {

  background: var(--kern-bg-elevated, #ffffff);

}

html[data-kern-theme='light'] .page-item {

  background: #1d2a33;

  color: #f0f4f8;

  background: #ffffff;

  color: #333;

  border-color: var(--kern-border, #d0d7de);

}

html[data-kern-theme='light'] .page-item:hover {

  background: #253542;

  background: #f5f7f9;

}



/* Design Area Light Theme */

html[data-kern-theme='light'] .design-area {

  background: #ffffff;

}