@leodamours/ds-components

Vue 3 component library with built-in design tokens and theming support via CSS custom properties.

Install

npm install @leodamours/ds-components

Peer dependency: vue ^3.5.0

Setup

// main.ts
import '@leodamours/ds-components/style.css'

That's it. The stylesheet includes both the default theme (CSS custom properties) and the component styles.

Usage

<script setup>
import { DsButton, DsInput } from '@leodamours/ds-components'
</script>

<template>
  <DsInput label="Email" placeholder="[email protected]" />
  <DsButton variant="primary" label="Submit" />
</template>

Components

| Component | Description | |---|---| | DsAvatar | User avatar with initials fallback | | DsBadge | Status badge / label | | DsButton | Button with variants: primary, secondary, outline, ghost, danger, success | | DsCheckbox | Checkbox input | | DsDropdownSelect | Dropdown select with floating UI positioning | | DsInput | Text input with label, help text, error state | | DsLoadingSpinner | Animated loading spinner | | DsModal | Modal dialog with backdrop | | DsRadio | Radio input | | DsSelect | Native select wrapper | | DsTable | Data table with sorting and pagination | | DsTabs | Tab navigation | | DsTextarea | Multiline text input | | DsToast / DsToastContainer | Toast notifications | | DsTooltip | Tooltip on hover |

All components export their prop types (e.g., DsButtonProps, DsInputProps).

Theming

Every color in the library flows through CSS custom properties prefixed with --ds-. The default theme is included in style.css. To customize, override the variables you need:

/* my-theme.css */
:root {
  --ds-brand: #8B5CF6;
  --ds-brand-hover: #7C3AED;
  --ds-brand-active: #6D28D9;
  --ds-brand-on-solid: #FFFFFF;
  --ds-bg: #FAFAFA;
  --ds-error: #DC2626;
  /* Only override what differs — everything else inherits defaults */
}

import '@leodamours/ds-components/style.css' // defaults
import './my-theme.css'                       // overrides

Token naming convention

Tokens follow a role + tone pattern: {role}[-{tone}][-{state}]

| Role | Purpose | Example tokens | |---|---|---| | Core | Page-level UI | bg, fg, border, icon, surface-hover | | brand | Primary actions | brand, brand-hover, brand-soft, brand-on-solid | | neutral | Secondary actions | neutral-soft, neutral-on-soft, neutral-border | | error | Error / destructive | error, error-soft, error-on-solid, error-border | | success | Success feedback | success, success-soft, success-on-solid | | warning | Warning feedback | warning, warning-soft, warning-on-soft | | info | Informational | info, info-soft, info-on-soft |

Tones:

• {role} — the solid color (e.g., --ds-error = #EF4444)
• {role}-soft — light background variant (e.g., --ds-error-soft = #FEF2F2)
• {role}-on-solid — text/icon color on the solid bg (e.g., --ds-error-on-solid = #FFFFFF)
• {role}-on-soft — text/icon color on the soft bg (e.g., --ds-error-on-soft = #EF4444)
• {role}-border — border color for that role

Runtime theme switching

[data-theme="dark"] {
  --ds-bg: #0F172A;
  --ds-fg: #F8FAFC;
  --ds-border: #334155;
  --ds-brand: #38BDF8;
}

document.documentElement.dataset.theme = 'dark'

Programmatic theme generation

import { generateThemeCss } from '@leodamours/ds-components'

const css = generateThemeCss(
  { brand: '#8B5CF6', 'brand-hover': '#7C3AED' },
  '[data-theme="purple"]'
)
// Returns a CSS string you can inject into a <style> tag

Exports

// Components
import { DsButton, DsInput, /* ... */ } from '@leodamours/ds-components'

// Prop types
import type { DsButtonProps, DsInputProps } from '@leodamours/ds-components'

// Token utilities
import { colorTokens, generateThemeCss, tokenToCssVar } from '@leodamours/ds-components'
import type { ColorToken, ThemeOverride } from '@leodamours/ds-components'

// Composables
import { useToast, useId } from '@leodamours/ds-components'