Skip to content

DESIGN_MIGRATION.md

Latest commit

 

History

History
101 lines (80 loc) · 3.24 KB

DESIGN_MIGRATION.md

File metadata and controls

101 lines (80 loc) · 3.24 KB

Design Migration from OBP-Portal to API-Manager-II

Overview

Successfully copied the design system from OBP-Portal to API-Manager-II on November 22, 2024.

Files Copied

1. Theme CSS

  • Source: ~/Documents/workspace_2024/OBP-Portal/obp-theme.css
  • Destination: API-Manager-II/obp-theme.css
  • Description: Complete Skeleton Labs theme configuration for OBP including:
    • Color palette (primary, secondary, tertiary, success, warning, error, surface)
    • Typography settings
    • Spacing and radius configurations
    • Dark mode support

2. Static Assets

Copied from ~/Documents/workspace_2024/OBP-Portal/static/ to API-Manager-II/static/:

  • favicon.png - OBP favicon
  • github-mark.svg - GitHub logo
  • github-mark-white.svg - GitHub logo (white variant)
  • logo2x-1.png - OBP logo (2x resolution)
  • obp_logo.png - OBP logo (PNG)
  • obp_logo.svg - OBP logo (SVG, scalable)
  • opey_avatar.png - Opey character avatar
  • opey-icon-white.png - Opey icon (white)
  • opey-logo-inv.png - Opey logo (inverted)

3. Configuration Updates

src/app.css

  • Added import for obp-theme.css
  • Maintained existing Tailwind configuration
  • Preserved custom API Manager component styles

src/app.html

  • Updated data-theme from "skeleton" to "obptheme"
  • Added data-mode="dark" for dark mode by default
  • Added canonical URL support
  • Added analytics script placeholder
  • Updated meta tags for better SEO

tailwind.config.ts

  • Added Skeleton Labs plugin with @skeletonlabs/tw-plugin
  • Added Skeleton package paths to content array
  • Maintained existing custom color schemes and utilities

Theme Features

The OBP theme includes:

Color Palette

  • Primary: Dark blues/blacks (for main UI elements)
  • Secondary: Teal/cyan tones
  • Tertiary: Light blues
  • Success: Green tones
  • Warning: Orange/yellow tones
  • Error: Red tones
  • Surface: Grayscale from white to black

Typography

  • Base font family: "Plus Jakarta Sans", Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif
  • Text scaling: 1.067
  • Support for light and dark modes

Design Tokens

  • Spacing: 0.25rem base unit
  • Border radius: 0.375rem (base), 0.75rem (containers)
  • Dark mode as default
  • OKLCH color space for better color handling

Compatibility Notes

  • API-Manager-II uses Svelte 4 and Skeleton v2
  • OBP-Portal has been upgraded to Svelte 5 and Skeleton v4
  • The theme CSS (obp-theme.css) is compatible with both versions
  • Skeleton v2 generates styles through Tailwind plugin rather than direct CSS imports

Build Status

✅ Build successful ✅ CSS compiles correctly ✅ Theme applied successfully

Usage

The obptheme is automatically applied via the data-theme="obptheme" attribute in app.html. All components will automatically inherit the theme's color palette, typography, and design tokens.

To use theme colors in your components:

<div class="bg-primary-500 text-primary-contrast-500">
  Themed content
</div>

Next Steps

Consider:

  1. Updating existing components to use OBP theme colors
  2. Creating a component library that matches OBP-Portal's design
  3. Implementing consistent dark/light mode toggle if needed
  4. Reviewing and potentially updating custom component styles to align with the new theme