Skip to content

Commit 20be1ea

Browse files
bourgeoabourgeoa
committed
updates themes
1 parent bcf8381 commit 20be1ea

11 files changed

Lines changed: 295 additions & 33 deletions

File tree

‎docs/theme-integration-test.html‎

Lines changed: 181 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,96 @@ <h4>Messages</h4>
296296
</div>
297297
</div>
298298

299+
<div class="test-section">
300+
<h3>Heading Styles (H1-H4) - Theme Color Integration</h3>
301+
<p>All headings now use <code>var(--sui-primary)</code> for color - should change with each theme</p>
302+
<div style="padding: 1rem; background: var(--sui-bg, #f5f5f5); border-radius: var(--sui-border-radius-sm, 0.2em); margin-top: 1rem;">
303+
<h1 style="font-size: 180%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: var(--sui-space-sm, 0.5em); margin: 0.7em 0;">
304+
H1 Heading - 180% - Primary Theme Color
305+
</h1>
306+
<h2 style="font-size: 130%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: 0.4em; margin: 0.7em 0;">
307+
H2 Heading - 130% - Primary Theme Color
308+
</h2>
309+
<h3 style="font-size: 120%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: 0.3em; margin: 0.7em 0;">
310+
H3 Heading - 120% - Primary Theme Color
311+
</h3>
312+
<h4 style="font-size: 110%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: 0.2em; margin: 0.7em 0;">
313+
H4 Heading - 110% - Primary Theme Color
314+
</h4>
315+
<p style="font-size: 100%; margin: 0.5em 0; color: var(--sui-text, #333);">
316+
Regular paragraph text (100%) - uses --sui-text for contrast
317+
</p>
318+
</div>
319+
</div>
320+
321+
<div class="test-section">
322+
<h3>Section Borders and Spacing</h3>
323+
<p>Testing section styling similar to basicPreferences.ts and editProfile.view.ts</p>
324+
<div style="border: 0.3em solid var(--sui-primary, #7C4DFF); border-radius: var(--sui-border-radius, 0.5em); padding: var(--sui-space-md, 0.7em); margin-top: var(--sui-space-md, 0.7em); background: var(--sui-bg-panel, white);">
325+
<h3 style="font-size: 120%; font-weight: bold; color: var(--sui-primary, #7C4DFF); margin: 0 0 0.5em 0;">
326+
Section with Primary Border
327+
</h3>
328+
<p style="margin: 0; color: var(--sui-text, #333);">
329+
This section uses <code>--sui-primary</code> for border color, <code>--sui-border-radius</code> for rounded corners,
330+
and <code>--sui-space-md</code> for padding. All values change with the theme.
331+
</p>
332+
<div style="padding: var(--sui-space-md, 0.7em); margin-top: var(--sui-space-md, 0.7em); background: var(--sui-bg, #f5f5f5); border-radius: var(--sui-border-radius-sm, 0.2em);">
333+
<strong>Nested content area</strong> with theme-aware background and spacing
334+
</div>
335+
</div>
336+
</div>
337+
338+
<div class="test-section">
339+
<h3>Icon Sizes - Responsive Touch Targets</h3>
340+
<p>Testing new icon size variables with responsive accessibility</p>
341+
<div class="component-grid">
342+
<div class="component-demo">
343+
<h4>Standard Icons (--sui-icon-size)</h4>
344+
<div style="display: flex; gap: 0.5rem; align-items: center;">
345+
<div style="width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); background: var(--sui-primary, #805ad5); border-radius: var(--sui-border-radius-lg, 1em);"></div>
346+
<span>1.5em standard icon</span>
347+
</div>
348+
</div>
349+
350+
<div class="component-demo">
351+
<h4>Avatar Icons (--sui-avatar-size)</h4>
352+
<div style="display: flex; gap: 0.5rem; align-items: center;">
353+
<div style="width: var(--sui-avatar-size, 2.5em); height: var(--sui-avatar-size, 2.5em); background: var(--sui-primary, #805ad5); border-radius: 50%;"></div>
354+
<span>2.5em avatar</span>
355+
</div>
356+
</div>
357+
358+
<div class="component-demo">
359+
<h4>Class Icons (--sui-icon-class-size)</h4>
360+
<div style="display: flex; gap: 0.5rem; align-items: center;">
361+
<div style="width: var(--sui-icon-class-size, 3em); height: var(--sui-icon-class-size, 3em); background: var(--sui-primary, #805ad5); border-radius: var(--sui-border-radius-sm, 0.2em);"></div>
362+
<span>3em class icon</span>
363+
</div>
364+
</div>
365+
</div>
366+
<p style="margin-top: 1rem; padding: 0.75rem; background: #fff3cd; border-left: 3px solid #ffc107; border-radius: var(--sui-border-radius-sm, 0.2em);">
367+
<strong>Responsive Note:</strong> Touch targets are 44px on mobile (≤1024px) and 32px/auto on desktop (≥1025px) for better accessibility.
368+
</p>
369+
</div>
370+
371+
<div class="test-section">
372+
<h3>Responsive Typography and Spacing</h3>
373+
<p>Testing responsive font sizes and spacing adjustments</p>
374+
<div style="padding: 1rem; background: var(--sui-bg, #f5f5f5); border-radius: var(--sui-border-radius-sm, 0.2em);">
375+
<p><strong>Font sizes scale responsively:</strong></p>
376+
<ul style="list-style: none; padding-left: 0;">
377+
<li style="padding: 0.25em 0;">📱 <strong>Mobile (≤768px):</strong> base 0.9em, tighter spacing</li>
378+
<li style="padding: 0.25em 0;">📟 <strong>Tablet (769-1024px):</strong> base 0.95em, moderate spacing</li>
379+
<li style="padding: 0.25em 0;">💻 <strong>Desktop (≥1025px):</strong> base 1em, standard spacing</li>
380+
</ul>
381+
<p style="margin-top: 1em;">
382+
<code>--sui-space-md</code> = <strong style="color: var(--sui-primary, #805ad5);">
383+
<span id="space-md-value"></span>
384+
</strong>
385+
</p>
386+
</div>
387+
</div>
388+
299389
<div class="test-section">
300390
<h3>Pane Integration Tests</h3>
301391
<p><strong>Note:</strong> These sections verify that external panes inherit the theme system from solid-ui.</p>
@@ -379,23 +469,105 @@ <h3>Theme Propagation Checklist</h3>
379469
const rootStyles = getComputedStyle(document.documentElement);
380470

381471
const variables = [
472+
// Primary Colors
382473
'--sui-primary',
383-
'--sui-secondary',
474+
'--sui-primary-dark',
475+
'--sui-primary-light',
476+
'--sui-accent',
477+
478+
// Gradients
384479
'--sui-gradient-start',
385480
'--sui-gradient-end',
481+
'--sui-gradient',
482+
483+
// Backgrounds
386484
'--sui-bg',
387485
'--sui-bg-panel',
486+
'--sui-bg-header',
388487
'--sui-bg-input',
488+
'--sui-bg-hover',
489+
'--sui-bg-active',
389490
'--sui-bg-button',
491+
'--sui-bg-button-hover',
492+
493+
// Text Colors
390494
'--sui-text',
391495
'--sui-text-secondary',
392496
'--sui-text-muted',
497+
'--sui-text-link',
498+
'--sui-text-on-primary',
499+
500+
// Borders
501+
'--sui-border-color',
502+
'--sui-border-color-dark',
503+
'--sui-border-width',
393504
'--sui-border',
505+
506+
// Border Radius
394507
'--sui-border-radius',
508+
'--sui-border-radius-sm',
509+
'--sui-border-radius-lg',
510+
'--sui-border-radius-full',
511+
512+
// Shadows
513+
'--sui-shadow-sm',
395514
'--sui-shadow',
515+
'--sui-shadow-lg',
516+
'--sui-shadow-colored',
517+
518+
// Spacing
519+
'--sui-space-xs',
396520
'--sui-space-sm',
397521
'--sui-space-md',
398-
'--sui-font-family'
522+
'--sui-space-lg',
523+
'--sui-space-xl',
524+
'--sui-space-2xl',
525+
526+
// Typography
527+
'--sui-font-family',
528+
'--sui-font-family-mono',
529+
'--sui-font-size-xs',
530+
'--sui-font-size-sm',
531+
'--sui-font-size-base',
532+
'--sui-font-size-lg',
533+
'--sui-font-size-xl',
534+
'--sui-line-height',
535+
536+
// Forms
537+
'--sui-form-border-color',
538+
'--sui-input-padding',
539+
'--sui-input-margin',
540+
541+
// Buttons
542+
'--sui-button-padding',
543+
'--sui-button-padding-sm',
544+
'--sui-button-margin',
545+
546+
// Icon Sizes
547+
'--sui-icon-size',
548+
'--sui-avatar-size',
549+
'--sui-icon-class-size',
550+
551+
// Status Colors
552+
'--sui-success',
553+
'--sui-warning',
554+
'--sui-error',
555+
'--sui-info',
556+
557+
// Header
558+
'--sui-header-gradient',
559+
'--sui-header-height',
560+
'--sui-header-shadow',
561+
562+
// Transitions
563+
'--sui-transition-fast',
564+
'--sui-transition',
565+
'--sui-transition-slow',
566+
567+
// Accessibility
568+
'--sui-focus-color',
569+
'--sui-focus-width',
570+
'--sui-touch-target-min'
399571
];
400572

401573
let html = '';
@@ -424,6 +596,13 @@ <h3>Theme Propagation Checklist</h3>
424596
}
425597

426598
inspector.innerHTML = html;
599+
600+
// Update space-md display
601+
const spaceMdValue = rootStyles.getPropertyValue('--sui-space-md').trim();
602+
const spaceMdElement = document.getElementById('space-md-value');
603+
if (spaceMdElement) {
604+
spaceMdElement.textContent = spaceMdValue || '1em (default)';
605+
}
427606
}
428607

429608
// Run inspector on load

‎src/header/index.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -141,12 +141,16 @@ export function createHelpMenu (options: HeaderOptions, helpMenuItems: MenuItems
141141
try {
142142
await themeLoader.loadTheme(theme.name)
143143
console.log(`Theme switched to: ${theme.label}`)
144-
// Refresh menu to update checkmark
144+
// Update checkmarks in all theme buttons
145145
setTimeout(() => {
146-
const nav = document.getElementById('helperNav')
147-
if (nav) {
148-
nav.setAttribute('style', style.headerUserMenuNavigationMenuNotDisplayed)
149-
}
146+
const newCurrentTheme = themeLoader.getCurrentTheme()
147+
helpMenuList.querySelectorAll('button').forEach((btn, idx) => {
148+
// Theme buttons are first 5 buttons (after the label)
149+
if (idx < themes.length) {
150+
const themeInfo = themes[idx]
151+
btn.textContent = themeInfo.label + (themeInfo.name === newCurrentTheme ? ' ✓' : '')
152+
}
153+
})
150154
}, 100)
151155
} catch (error) {
152156
console.error('Failed to switch theme:', error)

‎src/style.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ export const style = { // styleModule
2424
buttonStyle:
2525
'background-color: var(--sui-bg-button, #fff); padding: var(--sui-button-padding, 0.7em); border: 0.01em solid var(--sui-border-color, white); border-radius: var(--sui-border-radius-sm, 0.2em); font-size: 100%; margin: var(--sui-button-margin, 0.3em);',
2626
commentStyle: 'padding: var(--sui-button-padding, 0.7em); border: none; font-size: 100%; white-space: pre-wrap;',
27-
iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em);',
27+
iconStyle: 'width: var(--sui-icon-size, 1.5em); height: var(--sui-icon-size, 1.5em); margin: 0.1em; border-radius: var(--sui-border-radius-lg, 1em);',
2828
smallButtonStyle: 'margin: 0.2em; width: 1em; height: 1em;',
29-
classIconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: var(--sui-border-radius-sm, 0.2em); border: 0.1em solid var(--sui-group-1, green); padding: 0.2em; background-color: #efe;',
29+
classIconStyle: 'width: var(--sui-icon-class-size, 3em); height: var(--sui-icon-class-size, 3em); margin: 0.1em; border-radius: var(--sui-border-radius-sm, 0.2em); border: 0.1em solid var(--sui-group-1, green); padding: 0.2em; background-color: #efe;',
3030
confirmPopupStyle: 'padding: var(--sui-button-padding, 0.7em); border-radius: var(--sui-border-radius-sm, 0.2em); border: 0.1em solid var(--sui-warning, orange); background-color: var(--sui-bg-panel, white); box-shadow: var(--sui-shadow, 0.5em 0.9em #888);',
3131
messageBodyStyle:
3232
'white-space: pre-wrap; width: 99%; font-size: 100%; border: 0.07em solid var(--sui-border-color, #eee); border-radius: var(--sui-border-radius-sm, 0.2em); padding: 0.3em 0.5em; margin: 0.1em;',
@@ -44,12 +44,12 @@ export const style = { // styleModule
4444
signInBackground: 'background-color: var(--sui-bg-active, #efe);',
4545

4646
// Forms
47-
heading1Style: 'font-size: 180%; font-weight: bold; color: var(--sui-text-muted, #888888); padding: var(--sui-space-sm, 0.5em); margin: 0.7em 0;',
48-
heading2Style: 'font-size: 130%; font-weight: bold; color: var(--sui-text-muted, #888888); padding: 0.4em; margin: 0.7em 0;',
49-
heading3Style: 'font-size: 120%; font-weight: bold; color: var(--sui-text-muted, #888888); padding: 0.3em; margin: 0.7em 0;',
50-
heading4Style: 'font-size: 110%; font-weight: bold; color: var(--sui-text-muted, #888888); padding: 0.2em; margin: 0.7em 0;',
47+
heading1Style: 'font-size: 180%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: var(--sui-space-sm, 0.5em); margin: 0.7em 0;',
48+
heading2Style: 'font-size: 130%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: 0.4em; margin: 0.7em 0;',
49+
heading3Style: 'font-size: 120%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: 0.3em; margin: 0.7em 0;',
50+
heading4Style: 'font-size: 110%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: 0.2em; margin: 0.7em 0;',
5151

52-
formHeadingStyle: 'font-size: 110%; font-weight: bold; color: var(--sui-text-muted, #888888); padding: 0.2em; margin: 0.7em 0;',
52+
formHeadingStyle: 'font-size: 110%; font-weight: bold; color: var(--sui-primary, #7C4DFF); padding: 0.2em; margin: 0.7em 0;',
5353
formTextInput: 'font-size: 100%; margin: 0.1em; padding: 0.1em;',
5454
formGroupStyle: [`padding-left: 0; border: 0 solid var(--sui-form-border-color, ${styleConstants.formBorderColor}); border-radius: var(--sui-border-radius-sm, 0.2em);`,
5555
`padding-left: 2em; border: var(--sui-border-width, 0.05em) solid var(--sui-form-border-color, ${styleConstants.formBorderColor}); border-radius: var(--sui-border-radius-sm, 0.2em);`,
@@ -61,10 +61,16 @@ export const style = { // styleModule
6161
formFieldNameBoxStyle: `padding: 0.3em; vertical-align: middle; width: ${styleConstants.formFieldNameBoxWidth};`,
6262
multilineTextInputStyle: 'font-size: 100%; white-space: pre-wrap; background-color: var(--sui-bg-input, #eef); border: 0.07em solid var(--sui-border-color-dark, gray); padding: 1em 0.5em; margin: 1em;',
6363

64+
// Panes
65+
folderPaneStyle: 'border-top: solid 1px var(--sui-border-color, #777); border-bottom: solid 1px var(--sui-border-color, #777); margin-top: var(--sui-space-md, 0.5em); margin-bottom: var(--sui-space-md, 0.5em); background-color: var(--sui-bg-panel, white); color: var(--sui-text, black); font-family: var(--sui-font-family, sans-serif);',
66+
sidebarComponentStyle: 'padding: var(--sui-space-md, 0.5em); width: 100%; background-color: var(--sui-bg-panel, white); color: var(--sui-text, black); font-family: var(--sui-font-family, sans-serif);',
67+
sidebarStyle: 'overflow-x: auto; overflow-y: auto; border-radius: var(--sui-border-radius, 0.5em); border: 0.1em solid var(--sui-border-color, white); background-color: var(--sui-bg-panel, white);',
68+
sourcePaneStyle: 'font-family: var(--sui-font-family-mono, monospace); font-size: 100%; width: 100%; max-width: 60em; margin: 1em 0.2em 1em 0.2em; padding: var(--sui-space-lg, 1em); border: 0.1em solid var(--sui-border-color, #888); border-radius: var(--sui-border-radius, 0.5em); background-color: var(--sui-bg-panel, white); color: var(--sui-text, black);',
69+
6470
// Buttons
65-
renderAsDivStyle: 'display: flex; align-items: center; justify-content: space-between; height: 2.5em; padding: 1em;',
66-
imageDivStyle: 'width:2.5em; padding:0.5em; height: 2.5em;',
67-
linkDivStyle: 'width:2em; padding:0.5em; height: 4em;',
71+
renderAsDivStyle: 'display: flex; align-items: center; justify-content: space-between; height: var(--sui-avatar-size, 2.5em); padding: 1em;',
72+
imageDivStyle: 'width: var(--sui-avatar-size, 2.5em); padding: 0.5em; height: var(--sui-avatar-size, 2.5em);',
73+
linkDivStyle: 'width: var(--sui-icon-size, 2em); padding: 0.5em; height: 4em;',
6874

6975
// ACL
7076
aclControlBoxContainer: 'margin: 1em;',
@@ -98,12 +104,13 @@ export const style = { // styleModule
98104
headerUserMenuTriggerImg: 'border-radius: var(--sui-border-radius-full, 50%); height: 56px; width: 28px !important;',
99105
headerUserMenuButton: 'background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%;',
100106
headerUserMenuButtonHover: 'background: none; border: 0; color: var(--sui-text, black); cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: var(--sui-space-md, 1em); width: 100%; background-image: var(--sui-header-gradient, linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%));',
107+
headerUserMenuList: 'list-style: none; margin: 0; padding: 0;',
101108
headerUserMenuListDisplay: 'list-style: none; margin: 0; padding: 0; display:true;',
102109
headerUserMenuNavigationMenu: 'background: var(--sui-bg-panel, white); border: solid 1px var(--sui-text, #000000); border-right: 0; position: absolute; right: 0; top: var(--sui-header-height, 60px); width: 200px; z-index: var(--sui-z-dropdown, 1); display: true;',
103110
headerUserMenuNavigationMenuNotDisplayed: 'background: var(--sui-bg-panel, white); border: solid 1px var(--sui-text, #000000); border-right: 0; position: absolute; right: 0; top: var(--sui-header-height, 60px); width: 200px; z-index: var(--sui-z-dropdown, 1); display: none;',
104111
headerUserMenuListItem: 'border-bottom: solid 1px var(--sui-text, #000000);',
105112
headerUserMenuPhoto: 'border-radius: var(--sui-border-radius-full, 50%); background-position: center; background-repeat: no-repeat; background-size: cover; height: 50px; width: 50px;',
106-
headerBanner: 'box-shadow: var(--sui-header-shadow, 0px 1px 4px #000000); display: flex; justify-content: space-between; padding: 0 var(--sui-space-lg, 1.5em);',
113+
headerBanner: 'background: var(--sui-bg-header, white); box-shadow: var(--sui-header-shadow, 0px 1px 4px #000000); display: flex; justify-content: space-between; padding: 0 var(--sui-space-lg, 1.5em);',
107114
headerBannerRightMenu: 'display: flex;',
108115
headerBannerLogin: 'margin-left: auto;',
109116
allChildrenVisible: 'display: true;',
@@ -133,7 +140,7 @@ export const style = { // styleModule
133140
restoreStyle: 'background-color: var(--sui-bg-panel, white);',
134141

135142
// errors
136-
errorCancelButton: 'width: 2em; height: 2em; align: right;',
143+
errorCancelButton: 'width: var(--sui-icon-size, 2em); height: var(--sui-icon-size, 2em); align: right;',
137144
errorMessageBlockStyle: 'margin: 0.1em; padding: var(--sui-space-sm, 0.5em); border: var(--sui-border-width, 0.05em) solid var(--sui-border-color-dark, gray); color: var(--sui-text, black);',
138145

139146
// pad

‎src/themes/foundation/accessibility.css‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,32 @@
9090
}
9191

9292
/* ========== Touch Targets ========== */
93-
button,
94-
a,
95-
input[type="checkbox"],
96-
input[type="radio"],
97-
select {
98-
min-height: var(--sui-touch-target-min, 44px);
99-
min-width: var(--sui-touch-target-min, 44px);
93+
/* Mobile/tablet: 44px minimum for touch targets */
94+
@media (max-width: 1024px) {
95+
button,
96+
a,
97+
input[type="checkbox"],
98+
input[type="radio"],
99+
select {
100+
min-height: var(--sui-touch-target-min, 44px);
101+
min-width: var(--sui-touch-target-min, 44px);
102+
}
103+
}
104+
105+
/* Desktop: smaller targets are acceptable with precise mouse control */
106+
@media (min-width: 1025px) {
107+
button,
108+
a,
109+
select {
110+
min-height: var(--sui-touch-target-min-desktop, 32px);
111+
min-width: var(--sui-touch-target-min-desktop, 32px);
112+
}
113+
114+
input[type="checkbox"],
115+
input[type="radio"] {
116+
min-height: auto;
117+
min-width: auto;
118+
}
100119
}
101120

102121
/* Allow smaller targets when explicitly sized */
@@ -105,6 +124,22 @@ select {
105124
min-width: auto;
106125
}
107126

127+
/* ========== Heading Styles ========== */
128+
/* Apply theme colors to headings */
129+
h1, h2, h3, h4, h5, h6 {
130+
color: var(--sui-primary, #7C4DFF);
131+
}
132+
133+
/* Override for specific contexts where headings should use text color */
134+
.use-text-color h1,
135+
.use-text-color h2,
136+
.use-text-color h3,
137+
.use-text-color h4,
138+
.use-text-color h5,
139+
.use-text-color h6 {
140+
color: var(--sui-text, #333);
141+
}
142+
108143
/* ========== Dark Mode Support ========== */
109144
@media (prefers-color-scheme: dark) {
110145
/* Dark mode variables can be defined here or in a dark theme preset */

0 commit comments

Comments
 (0)