@uj-vilag/dap-styles
v1.0.5
Published
CSS Tokens and Tailwind classes based on DAP Figma UI Kit 1.2
Maintainers
uj-vilagReadme
@uj-vilag/dap-styles
CSS design tokens and Tailwind utility classes based on the DAP Figma UI Kit 1.2.
Installation
npm install @uj-vilag/dap-stylesUsage
Import the package in your main tailwind css file.
Full bundle (tokens + utilities + font)
@import "@uj-vilag/dap-styles";Tokens only
@import "@uj-vilag/dap-styles/tokens";To make the css take effect add the color theme, accent color (optional) and the typography size tag to the outer most html.
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:
- light:
dap-light - dark:
dap-dark - high-contrast:
dap-high-contrast
Accent color:
- indigo: default
- azure:
dap-azure - teal:
dap-teal - violet:
dap-violet
Typography theme:
- desktop:
dap-desktop - tablet:
dap-tablet - mobile:
dap-mobile
Preconfigured font import
@import "@uj-vilag/dap-styles/font";Direct font file
@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;
}What's included
Design Tokens
- Colors — foundations, themes (indigo, azure, teal, violet), semantic colors
- Typography — font sizes, weights, line heights, responsive variants
- Spacing — consistent spacing scale
- Sizing — borders, radius, breakpoints, containers, icons
Tailwind Utilities
The tailwind utilities were designed to extend the default Tailwind setup, not to replace it. You can still use the default Tailwind utility classes alongside the DAP ones.
- Font weights:
font-dap-[medium, bold] - Text sizes:
text-dapT-[2xs, xs, sm, base, lg, xl, 2xl, ... 12xl] - Text sizes (headings):
text-dapT-heading-[1, ... 6] - Text sizes (body):
text-dapT-body-[small, medium, large] - Spacing:
(spacing)-dap-[100, ... 6000] - Spacing (icon):
(spacing)-dap-icon-[xsmall, ... large] - Spacing (container):
(spacing)-dap-cont-[xsmall, ... 2xlarge] - Shadows (not complete):
shadow-dap-elevation-[200, 300, 400] - Radius:
rounded-dap-[small, base, large, xlarge, rounded] - Breakpoints:
dap-[xsmall, small, medium, large, xlarge, 2xlarge] - Border widths:
border-dapB-[base, large, xlarge, 2xlarge] - Semantic colors:
- Background:
(color)-dap-bg-[neutral, brand, positive, negative, informative, warning, overlay] - Border:
(color)-dap-border-[neutral, brand, positive, negative, informative, warning] - Text:
(color)-dap-text-[neutral, brand, positive, negative, informative, warning] - Icon:
(color)-dap-icon-[neutral, brand, positive, negative, informative, warning] - Focus:
(color)-dap-focus-[outer-ring, inner-ring] - Transparent:
(color)-dap-alpha-[black, white] - Logo:
(color)-dap-logo,(color)-dap-logo-inverted
- Background: