Styles

Introduction

The dap-styles library provides a comprehensive set of CSS design tokens and Tailwind CSS utility classes that are based on the DÁP Figma UI Kit 1.2.

Installation

npm install @uj-vilag/dap-styles

Setup

Default

Make sure you have Tailwind CSS v4 installed and configured in your project.

@import "tailwindcss";
@import "@uj-vilag/dap-styles";

This includes:

• CSS Tokens
• Tailwind Utilities
• Preconfigured font import

Tailwind only

@import "tailwindcss";
@import "@uj-vilag/dap-styles/tailwind";

This includes:

• CSS Tokens
• Tailwind Utilities

Tokens only

@import "@uj-vilag/dap-styles/tokens";

Font only

@import "@uj-vilag/dap-styles/font";

This will import the Inter variable font with the recommended settings:

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500 700;
  src: url("@uj-vilag/dap-styles/InterVariable.woff2") format("truetype");
  font-display: swap;
  font-feature-settings: "liga" 1, "calt" 1, "ss02" 1;
  font-variation-settings: "slnt" 0;
  font-optical-sizing: auto;
}

Use the @uj-vilag/dap-styles/InterVariable.woff2 path when implementing custom font loading methods.

Usage

To make the CSS take effect, add the appropriate class names to the root element of your application, for example:

import "@/styles/globals.css";

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html
      lang="en"
      className="dap-light dap-desktop h-screen w-screen overflow-hidden"
    >
      <body>{children}</body>
    </html>
  );
}

Color theme

Changes the overall color scheme.

• light: dap-light
• dark: dap-dark
• high contrast: dap-high-contrast

Accent color

Changes the accent color used throughout the UI.

• indigo: default
• azure: dap-azure
• teal: dap-teal
• violet: dap-violet

Typography theme

Changes the size of headings and body text.

• desktop: dap-desktop
• tablet: dap-tablet
• mobile: dap-mobile