Themes Importing

DÁP design system components can be styled via design tokens. The package provides a set of predefined themes that can be used to style the components. These themes are the default light theme, the dark and high-contrast theme. These are simple CSS files with all the CSS variables defined for the components. You can import these files in your project and use the variables to style the components.

The default theme is the light theme. These variables are exits in the root: block of the stylesheet.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/light.theme.css" />

Similarly, you can import the dark theme by using the following link:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/dark.theme.css" />

But it is important that the dark-theme and high-contrast themes are scoped to the .dark-theme and .high-contrast-theme classes respectively. This is to ensure that the themes are applied only to the components that are wrapped in the respective classes. So the easiest way to apply the dark or HC theme is to add the dark-theme or high-contrast-theme class to the body tag of your application.

<body class="dark-theme">

These files are minified and can be imported directly from the CDN. You can also download the files from the dist folder in the package and import them in your project.

@import '[path-to-dap-design-system-node_modules-folder]/dist/light.theme.css';

If you want to customize the themes, you can create your own CSS file and override the variables defined in the default themes. The unminified versions of the themes are available in the dist/variables folder in the package. You can use these files as a reference to create your own custom themes.

Style reset

Every design system uses a specific CSS reset to ensure that the components are rendered consistently across different browsers. The recommended CSS reset style can be imported from CDN from installed package or from the dist folder in the package.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/dds-reset.css" />

@import '[path-to-dap-design-system-node_modules-folder]/dist/dds-reset.css';
Conflict with other frameworks

It is not recommended to import the css file if you are using other styling systems beside the DÁP design system. The reset file is a global reset and it will affect the styling of other components in your application. If you are in this situation, you can use the CSS reset file as a reference to create your own reset file and import it in your project.

  • For example the margin and padding reset part is not needed if you are using Tailwind CSS.

Here is the whole content of the reset file:

*,
*::before,
*::after {
  box-sizing: border-box; /* Set the sizing of an element to include it's border */
  outline: none;
}

/* Not needed for Tailwind, it has it's own spacing reset */
* :not(dap-ds-table-cell, dap-ds-table-header) {
  margin: 0; /* Set the default margin to 0 */
  padding: 0; /* Set the default padding to 0 */
}

html:focus-within {
  scroll-behavior: smooth; /* Make the scrolling inside of any scrollable element smooth */
}

a:not([class]) {
  text-decoration-skip-ink: auto; /* Makes link undelines look better */
}


ul,
ol {
  list-style: none; /* Turn off numbered and unordered list decoration */
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%; /* Makes it responsive */
  height: auto; /* Makes it responsive */
  background-repeat: no-repeat;

  /* The background repeat and size are there if you want to load a picture first like a backroung image that is worse quality while the better quality image loads */
  background-size: cover;
  font-style: italic; /* If the images don't load it makes the alt decription look better */
  vertical-align: middle; /* Makes text next to inline images look better */
}

input,
button,
textarea,
select {
  font: inherit; /* Makes these elements inherit fonts */
}

[hidden] {
  display: none !important;
}

/* Turns off animation for people who don't want to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none;
    transition-duration: 0.01ms !important;
    transition-delay: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
  }
}

body,
html {
  height: 100%; /* Makes the body element full screen */
  scroll-behavior: smooth; /* Makes normal scrolling smooth */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* stylelint-disable */
/* number input arrows reset FF */
input[type='number'] {
  appearance: textfield;
}
/* stylelint-enable */

/* number input arrows reset FF */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
}