DÁP design system components can be styled via design tokens.
The design tokens are all predefined and give a consistent look and feel. All design tokens are prefixed with the --dds- prefix to avoid collision with other frameworks. All tokens are defined in the :root block of the stylesheet.
CSS Parts in web components are a way to define specific sections or elements within a custom element that can be targeted and styled separately. They allow you to encapsulate and style different parts of a web component individually, providing more flexibility and reusability.
When using CSS Parts, you can define custom CSS properties within the shadow DOM of a web component. These properties are then exposed as parts that can be targeted using the ::part() pseudo-element selector in CSS.
In the DÁP design system, all components have predefined CSS parts that can be styled using CSS Part selectors. You can find the list of CSS parts for each component in the component documentation.
Let's see an example of how to style a button component using CSS Parts:
HTML
CSS
#custom::part(base) {
background-color: var(--dds-azure-700);
color: var(--dds-text-neutral-strong);
}
CSS custom properties are a way to define variables that can be used in CSS. They are defined in the :host block of the component.
Because it is defined in the :host, it is locally scoped for the component, so it can be overwrite for the current component.
Let's see an example of how to style a button component using CSS Custom Properties:
Note that this documentation does not use Tailwind CSS, so these examples are not working unfortunately, but you can see how to use Tailwind CSS with the DÁP design system components below. The DÁP design system components can also be styled using Tailwind CSS utility classes. You can combine CSS Custom Properties with Tailwind classes for maximum flexibility. More on Tailwind arbitrary values.
HTML
Apply CSS
/* Use @apply to style web components with Tailwind */
.custom-tailwind-button::part(base) {
@apply mt-4 shadow-lg hover:shadow-xl transition-shadow;
}
Arbitrary values
/* Css variables can be used with the [] syntax*/
<dap-ds-button class="bg-[var(--dds-indigo-1000)]">
Arbitrary css values
</dap-ds-button>
Note: When using Tailwind CSS with web components, you need to use the @apply directive and target the component's CSS parts. Make sure to configure your tailwind.config.js to include the DÁP design system components in your content:
If you want to use the DÁP design system components in a non-web component environment, you can use the pure CSS classes provided by the design system.
These classes are the same as the CSS parts of the web components and can be used to style the components in a pure CSS environment.
Unfortunately not all components could be used in this way because of the complexity of the component and the need for JavaScript.
Not all components have pure CSS classes, but we are working on it, please check the documentation of the component you want to use.
If a component has pure CSS classes, you can find them in the component documentation.
Because the ocumentation page is written in React, the examples contains className instead of class attribute. In a pure HTML environment you should use the class attribute.
Let's see an example of how to style a button component using pure CSS classes:
First you have to import the design system theme or variables file, and the native pure css file. Import the files somewhere in your HTML or root css file.
//In CSS
@import url('dap-design-system/dist/light.theme.css');
@import url('dap-design-system/dist/components.native.css');
//CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/light.theme.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/components.native.css" />
After you imported the files you can use the pure CSS classes to style the components.
