Minor fixes for consistency with design system

Author: diegochine

BESPOKE-TEMPLATE.md

@@ -21,7 +21,7 @@ Every application should include these files in the following order:
    - components/tags/tags.css
 3. bespoke-template.css (template-specific layout, utilities, temporary
    components)
-4. help-modal.js (help system)
+4. components/modal/modal.css and modal.js (design system; used for help modal)
 5. app.js (application logic)
 6. server.js (server)
 
@@ -79,10 +79,8 @@ Every application should include these files in the following order:
 
 1. HELP MODAL SETUP:
    a) Create help content using help-content-template.html as reference
-   b) Initialize HelpModal with:
-      - triggerSelector: `'#btn-help'`
-      - content: your help content (string or loaded from file)
-      - theme: `'auto'`
+   b) Use the design system Modal: `Modal.createHelpModal({ title: 'Help', content, triggerSelector: '#btn-help' })`
+   c) Include `modal.css` and import `Modal` from `design-system/components/modal/modal.js`
 
 ## Error Handling Requirements
 
@@ -204,13 +202,7 @@ when the design system adds them.
 ```html
 <!-- Vertical label -->
 <label>Field Name
-  <input type="text" />
-</label>
-
-<!-- Horizontal label -->
-<label class="row">
-  <input type="checkbox" />
-  Checkbox Label
+  <input type="text" class="input" />
 </label>
 ```
 
@@ -220,49 +212,41 @@ when the design system adds them.
 <!-- Text input -->
 <input type="text" class="input" placeholder="Enter text" />
 
-<!-- Select dropdown -->
+<!-- Select dropdown - native select styling is custom; design system has a Dropdown JS component for richer dropdowns -->
 <select class="input">
   <option>Option 1</option>
   <option>Option 2</option>
 </select>
 
-<!-- Checkbox -->
-<input type="checkbox" />
-
-<!-- Radio buttons -->
-<div class="radio-group">
-  <label class="row">
-    <input type="radio" name="option" value="a" />
-    Option A
-  </label>
-  <label class="row">
-    <input type="radio" name="option" value="b" />
-    Option B
-  </label>
-</div>
+<!-- Checkbox (design system component) -->
+<label class="input-checkbox">
+  <input type="checkbox" />
+  <span class="input-checkbox-box"><span class="input-checkbox-checkmark"></span></span>
+  <span class="input-checkbox-label">Checkbox Label</span>
+</label>
 
-<!-- Horizontal radio group -->
-<div class="radio-group horizontal">
-  <label class="row">
-    <input type="radio" name="size" value="small" />
-    Small
-  </label>
-  <label class="row">
-    <input type="radio" name="size" value="large" />
-    Large
-  </label>
-</div>
+<!-- Radio buttons (design system component) -->
+<label class="input-radio">
+  <input type="radio" name="option" value="a" />
+  <span class="input-radio-circle"><span class="input-radio-dot"></span></span>
+  <span class="input-radio-label">Option A</span>
+</label>
+<label class="input-radio">
+  <input type="radio" name="option" value="b" />
+  <span class="input-radio-circle"><span class="input-radio-dot"></span></span>
+  <span class="input-radio-label">Option B</span>
+</label>
 
 <!-- Textarea -->
-<textarea placeholder="Enter your message here..."></textarea>
+<textarea class="input" placeholder="Enter your message here..."></textarea>
 
-<!-- Toggle switch -->
+<!-- Toggle switch - custom component; no design system equivalent yet. Add body-xsmall for typography -->
 <label class="row">
   <div class="toggle">
     <input type="checkbox" class="toggle-input" />
     <span class="toggle-slider"></span>
   </div>
-  <span class="toggle-label">Enable notifications</span>
+  <span class="toggle-label body-xsmall">Enable notifications</span>
 </label>
 ```
 
@@ -281,83 +265,26 @@ when the design system adds them.
 <a href="#" class="button button-text">Link Button</a>
 ```
 
-### Modal Components
+### Modal (Help)
 
-#### Basic Modal
+Use the design system Modal component for help/documentation:
 
-```html
-<div class="modal">
-  <div class="modal-backdrop"></div>
-  <div class="modal-content">
-    <div class="modal-header">
-      <h2>Modal Title</h2>
-      <button class="modal-close">&times;</button>
-    </div>
-    <div class="modal-body">
-      <p>Modal content goes here</p>
-    </div>
-  </div>
-</div>
-```
-
-## Customization
-
-### CSS Custom Properties
-
-You can override any CSS custom property to customize the appearance:
-
-```css
-.bespoke {
-  /* Override colors */
-  --bespoke-bg: #f0f0f0;
-  --bespoke-fg: #333333;
-  --bespoke-accent: #ff6b6b;
-
-  /* Override spacing */
-  --bespoke-space-lg: 1.5rem;
+```javascript
+import Modal from './design-system/components/modal/modal.js';
 
-  /* Override border radius */
-  --bespoke-radius-lg: 12px;
-}
+const helpModal = Modal.createHelpModal({
+  title: 'Help',
+  content: document.querySelector('#help-content').content.cloneNode(true),
+  triggerSelector: '#btn-help'
+});
+helpModal.open();
 ```
 
-### Available Custom Properties
+Include `modal.css` and `modal.js` in your app. See `client/design-system/components/modal/README.md` for full API.
 
-#### Colors
-
-- `--bespoke-bg`: Background color
-- `--bespoke-fg`: Text color
-- `--bespoke-muted`: Muted text color
-- `--bespoke-box`: Container/surface background
-- `--bespoke-stroke`: Border color
-- `--bespoke-danger`: Error/danger color
-- `--bespoke-accent`: Accent/primary color
-- `--bespoke-control-bg`: Input/button background
-- `--bespoke-control-border`: Input/button border
-- `--bespoke-control-focus`: Focus ring color
-
-#### Spacing
-
-- `--bespoke-space-xs`: 0.25rem
-- `--bespoke-space-sm`: 0.5rem
-- `--bespoke-space-md`: 0.75rem
-- `--bespoke-space-lg`: 1rem
-- `--bespoke-space-xl`: 1.5rem
-- `--bespoke-space-2xl`: 2rem
-
-#### Border Radius
-
-- `--bespoke-radius-sm`: 4px
-- `--bespoke-radius-md`: 6px
-- `--bespoke-radius-lg`: 8px
-- `--bespoke-radius-xl`: 12px
-
-#### Shadows
+## Customization
 
-- `--bespoke-shadow-sm`: Small shadow
-- `--bespoke-shadow-md`: Medium shadow
-- `--bespoke-shadow-lg`: Large shadow
-- `--bespoke-shadow-xl`: Extra large shadow
+Customize via design system CSS variables (`--Colors-*`, `--UI-Spacing-*`, `--Fonts-*`, `--UI-Radius-*`). See design system files for available tokens.
 
 ## Theme Support
 

client/bespoke-template.css

@@ -30,10 +30,7 @@
 }
 
 .bespoke .header h1 {
-  font-size: var(--Fonts-Body-Default-lg);
   margin: 0;
-  font-weight: 600;
-  font-family: var(--heading-family);
   color: var(--Colors-Text-Body-Strongest);
 }
 
@@ -85,22 +82,22 @@
 
 /* ===== TEMPORARY COMPONENTS (TODO: Replace when design system adds these) ===== */
 
-/* Form Elements - TODO: Remove when design system adds form components */
-.bespoke label {
+/* Form Elements - Generic labels only; exclude .input-checkbox and .input-radio (design system components) */
+.bespoke label:not(.input-checkbox):not(.input-radio) {
   display: flex;
   flex-direction: column;
   gap: var(--UI-Spacing-spacing-xxs);
   margin: var(--UI-Spacing-spacing-ms) 0 var(--UI-Spacing-spacing-s) 0;
 }
 
-.bespoke label.row {
+.bespoke label.row:not(.input-checkbox):not(.input-radio) {
   flex-direction: row;
   align-items: center;
   gap: var(--UI-Spacing-spacing-s);
   margin: var(--UI-Spacing-spacing-s) 0;
 }
 
-/* Select styling - TODO: Remove when design system adds select component */
+/* Select styling - TODO: Replace when design system adds select component */
 .bespoke select {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -174,7 +171,6 @@
 
 .bespoke .toggle-label {
   margin-left: var(--UI-Spacing-spacing-s);
-  font-size: var(--Fonts-Body-Default-xs);
   color: var(--Colors-Text-Body-Default);
   cursor: pointer;
 }

client/example-app/example-app.css

@@ -12,8 +12,6 @@
 }
 
 .bespoke .sidebar-section h2 {
-  font-size: var(--Fonts-Headlines-sm);
-  font-weight: 600;
   color: var(--Colors-Text-Body-Strongest);
   margin: 0 0 var(--UI-Spacing-spacing-ml) 0;
 }
@@ -25,8 +23,6 @@
 }
 
 .bespoke .control-group label {
-  font-size: var(--Fonts-Body-Default-sm);
-  font-weight: 500;
   color: var(--Colors-Text-Body-Strong);
 }
 
@@ -60,21 +56,19 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--UI-Spacing-spacing-2xl);
+  padding: var(--UI-Spacing-spacing-xxxl);
   text-align: center;
 }
 
 .bespoke .counter-display h2 {
-  font-size: var(--Fonts-Headlines-sm);
-  font-weight: 600;
   color: var(--Colors-Text-Body-Strong);
   margin: 0 0 var(--UI-Spacing-spacing-ml) 0;
   text-align: center;
 }
 
 .bespoke .counter-value {
-  font-size: 4rem;
-  font-weight: 700;
+  font-size: var(--Fonts-Headlines-xxl);
+  font-weight: 500;
   font-family: var(--heading-family);
   color: var(--Colors-Text-Body-Strongest);
   line-height: 1;
@@ -96,15 +90,12 @@
 }
 
 .bespoke .settings-display h3 {
-  font-size: var(--Fonts-Headlines-xs);
-  font-weight: 600;
   color: var(--Colors-Text-Body-Strong);
   margin: 0 0 var(--UI-Spacing-spacing-ml) 0;
   width: 100%;
 }
 
 .bespoke .setting-item {
-  font-size: var(--Fonts-Body-Default-sm);
   color: var(--Colors-Text-Body-Default);
   margin-bottom: var(--UI-Spacing-spacing-s);
   width: 100%;

client/example-app/index.html

@@ -29,7 +29,7 @@
 <body class="bespoke">
   <!-- Navigation Header -->
   <header class="header">
-    <h1>Component Showcase</h1>
+    <h1 class="heading-small">Component Showcase</h1>
     <div class="spacer"></div>
     <button id="btn-help" class="button button-text">Help</button>
   </header>
@@ -39,15 +39,15 @@ <h1>Component Showcase</h1>
     <!-- Sidebar with Input Controls -->
     <aside class="sidebar">
       <div class="sidebar-section">
-        <h2>Controls</h2>
+        <h2 class="heading-small">Controls</h2>
 
         <div class="control-group">
-          <label for="counter-label">Counter Label</label>
+          <label for="counter-label" class="body-small">Counter Label</label>
           <input type="text" id="counter-label" class="input" placeholder="Enter label..." value="Counter">
         </div>
 
         <div class="control-group">
-          <label>Increment Amount</label>
+          <label class="body-small">Increment Amount</label>
           <div id="increment-dropdown" style="width: 100%;"></div>
         </div>
 
@@ -67,7 +67,7 @@ <h2>Controls</h2>
       <div class="display-container">
         <!-- Counter Display Box -->
         <div class="box card counter-display">
-          <h2 id="display-label">Counter</h2>
+          <h2 id="display-label" class="heading-small">Counter</h2>
           <div class="counter-value" id="counter-value">0</div>
         </div>
 
@@ -80,11 +80,11 @@ <h2 id="display-label">Counter</h2>
 
         <!-- Settings Display -->
         <div class="box card settings-display">
-          <h3>Current Settings</h3>
-          <div class="setting-item">
+          <h3 class="heading-xxxsmall">Current Settings</h3>
+          <div class="setting-item body-small">
             <strong>Label:</strong> <span id="display-label-value">Counter</span>
           </div>
-          <div class="setting-item">
+          <div class="setting-item body-small">
             <strong>Increment:</strong> <span id="display-increment-value">1</span>
           </div>
         </div>

client/index.html

@@ -29,7 +29,7 @@
 <body class="bespoke">
   <!-- Navigation Header -->
   <header class="header">
-    <h1>APP NAME</h1>
+    <h1 class="heading-small">APP NAME</h1>
     <!-- APP_SPECIFIC_HEADER_CONTENT -->
     <div class="spacer"></div>
     <button id="btn-help" class="button button-text">Help</button>