YDL-UI Component Library: Guide to Common Widgets

Customizing Themes in YDL-UI: Step-by-Step Tutorial

Overview

This tutorial shows a concise, practical workflow to customize themes in YDL-UI so your app matches brand colors, typography, spacing, and component variants.

1. Project setup

1. Install YDL-UI (assume npm):

   Code
   Copy CodeCopied
   npm install ydl-ui 

2. Import base styles once (e.g., in src/index.css or main entry):

   css
   Copy CodeCopied
   @import “ydl-ui/dist/ydl.css”;
   

2. Theme structure (recommended defaults)

• colors: primary, secondary, background, surface, error, text-primary, text-muted
• typography: font-family, sizes (xs→xl), weights
• spacing: base unit (e.g., 4px), scale (1–8)
• radius: border-radius values
• shadows: elevation levels
• components: per-component overrides (button, card, input)

3. Create a theme object

Create a JS/TS theme file (src/theme.js):

js
Copy CodeCopied
export const theme = {
colors: {
    primary: ”#0B74FF”,
    secondary: ”#FF6B6B”,
    background: ”#FFFFFF”,
    surface: ”#F7F9FC”,
    error: ”#E53935”,
    textPrimary: ”#0F1724”,
    textMuted: ”#64748B”
  },
  typography: {
    fontFamily: ”‘Inter’, system-ui, sans-serif”,
    sizes: { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 },
    weights: { regular: 400, medium: 600, bold: 700 }
  },
  spacing: { unit: 4 },
  radius: { sm: 4, md: 8, lg: 12 },
  shadows: { low: “0 1px 3px rgba(2,6,23,0.06)”, high: “0 8px 24px rgba(2,6,23,0.12)” },
  components: {
    Button: {
      borderRadius: 8,
      sizes: {
        sm: { padding: “6px 10px”, fontSize: 14 },
        md: { padding: “10px 16px”, fontSize: 16 }
      },
      variants: {
        solid: { background: “primary”, color: “white” },
        ghost: { background: “transparent”, color: “primary”, border: “1px solid rgba(11,116,255,0.12)” }
      }
    }
  }
};

4. Apply theme globally

Wrap your app with YDL-UI’s ThemeProvider (example React):

jsx
Copy CodeCopied
import { ThemeProvider } from “ydl-ui”;
import { theme } from ”./theme”;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <YourAppRoutes />
    </ThemeProvider>
  );
}

5. Overriding specific components

• Use component-level props or style overrides from the theme:
  • For Button: Primary
  • For Card: provide theme.components.Card settings or prop overrides.

6. Dynamic themes (light/dark)

1. Define two theme objects (lightTheme, darkTheme).
2. Store current mode in state (useContext or state management).
3. Swap theme passed to ThemeProvider:

jsx
Copy CodeCopied
const currentTheme = mode === “dark” ? darkTheme : lightTheme;
<ThemeProvider theme={currentTheme}>…</ThemeProvider>

7. Responsive tokens

• Use token functions or CSS variables for responsive fontSize/spacing:
  • Define breakpoints in theme and use helper utilities to map sizes per breakpoint.

8. Accessibility checks

• Ensure contrast ratios: primary text on background ≥ 4.5:1 for normal text.
• Provide focus outlines for interactive elements; use visible, high-contrast ring styles.

9. Theming tips & best practices

• Centralize brand tokens (colors, fonts) in one file.
• Prefer semantic tokens (e.g., surface, accent) over raw hexs across components.
• Keep component overrides minimal; use variants for predictable styling.
• Use CSS variables for runtime theme tweaks without full re-render.

10. Example: quick tweak via CSS variables

In root:

css
Copy CodeCopied
:root {
  –ydl-primary: #0B74FF;
  –ydl-bg: #FFFFFF;
}
[data-theme=“dark”] {
  –ydl-primary: #66A9FF;
  –ydl-bg: #0B1020;
}

Toggle by updating document.documentElement.dataset.theme.

11. Troubleshooting

• If styles not applying: confirm ThemeProvider is outermost wrapper and base CSS is imported.
• If font doesn’t show: ensure font is loaded (link or @font-face) and fontFamily matches.

If you want, I can generate a ready-to-use theme (light + dark) matching a specific brand palette — tell me brand colors and primary font.