@db-ux/core-foundations 1.0.0-test-13b991d

package/build/styles/density/classes/regular.css

@@ -0,0 +1,363 @@
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-density-regular,
+[data-density=regular] {
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
+}
+
+.db-density-regular,
+[data-density=regular] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  --db-base-line-height: var(--db-type-body-line-height-md);
+  --db-base-font-size: var(--db-type-body-font-size-md);
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
+}
+
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-density-regular,
+[data-density=regular] {
+  --db-sizing-3xs: var(--db-sizing-regular-3xs);
+  --db-sizing-2xs: var(--db-sizing-regular-2xs);
+  --db-sizing-xs: var(--db-sizing-regular-xs);
+  --db-sizing-sm: var(--db-sizing-regular-sm);
+  --db-sizing-md: var(--db-sizing-regular-md);
+  --db-sizing-lg: var(--db-sizing-regular-lg);
+  --db-sizing-xl: var(--db-sizing-regular-xl);
+  --db-sizing-2xl: var(--db-sizing-regular-2xl);
+  --db-sizing-3xl: var(--db-sizing-regular-3xl);
+  --db-spacing-fixed-3xs: var(--db-spacing-fixed-regular-3xs);
+  --db-spacing-fixed-2xs: var(--db-spacing-fixed-regular-2xs);
+  --db-spacing-fixed-xs: var(--db-spacing-fixed-regular-xs);
+  --db-spacing-fixed-sm: var(--db-spacing-fixed-regular-sm);
+  --db-spacing-fixed-md: var(--db-spacing-fixed-regular-md);
+  --db-spacing-fixed-lg: var(--db-spacing-fixed-regular-lg);
+  --db-spacing-fixed-xl: var(--db-spacing-fixed-regular-xl);
+  --db-spacing-fixed-2xl: var(--db-spacing-fixed-regular-2xl);
+  --db-spacing-fixed-3xl: var(--db-spacing-fixed-regular-3xl);
+  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
+  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
+  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
+  --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-mobile-sm);
+  --db-spacing-responsive-md: var(--db-spacing-responsive-regular-mobile-md);
+  --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-mobile-lg);
+  --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-mobile-xl);
+  --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-mobile-2xl);
+  --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (min-width: 45em) {
+  .db-density-regular:not([data-force-mobile]),
+  [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
+  [data-force-mobile=false][data-density=regular] {
+    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
+    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
+    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
+    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-tablet-sm);
+    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-tablet-md);
+    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-tablet-lg);
+    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-tablet-xl);
+    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-tablet-2xl);
+    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-tablet-3xl);
+  }
+}
+@media screen and (min-width: 64em) {
+  .db-density-regular:not([data-force-mobile]),
+  [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
+  [data-force-mobile=false][data-density=regular] {
+    --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
+    --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
+    --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
+    --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-desktop-sm);
+    --db-spacing-responsive-md: var(--db-spacing-responsive-regular-desktop-md);
+    --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-desktop-lg);
+    --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-desktop-xl);
+    --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-desktop-2xl);
+    --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-desktop-3xl);
+  }
+}
+
+.db-density-regular,
+[data-density=regular] {
+  --db-type-headline-font-size-3xs: var(--db-typography-regular-mobile-headline-3xs-font-size);
+  --db-type-headline-line-height-3xs: var(--db-typography-regular-mobile-headline-3xs-line-height);
+  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
+  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
+  --db-type-headline-font-size-2xs: var(--db-typography-regular-mobile-headline-2xs-font-size);
+  --db-type-headline-line-height-2xs: var(--db-typography-regular-mobile-headline-2xs-line-height);
+  --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-headline-2xs);
+  --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-headline-2xs);
+  --db-type-headline-font-size-xs: var(--db-typography-regular-mobile-headline-xs-font-size);
+  --db-type-headline-line-height-xs: var(--db-typography-regular-mobile-headline-xs-line-height);
+  --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-headline-xs);
+  --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-headline-xs);
+  --db-type-headline-font-size-sm: var(--db-typography-regular-mobile-headline-sm-font-size);
+  --db-type-headline-line-height-sm: var(--db-typography-regular-mobile-headline-sm-line-height);
+  --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-headline-sm);
+  --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-headline-sm);
+  --db-type-headline-font-size-md: var(--db-typography-regular-mobile-headline-md-font-size);
+  --db-type-headline-line-height-md: var(--db-typography-regular-mobile-headline-md-line-height);
+  --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-mobile-headline-md);
+  --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-headline-md);
+  --db-type-headline-font-size-lg: var(--db-typography-regular-mobile-headline-lg-font-size);
+  --db-type-headline-line-height-lg: var(--db-typography-regular-mobile-headline-lg-line-height);
+  --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-headline-lg);
+  --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-headline-lg);
+  --db-type-headline-font-size-xl: var(--db-typography-regular-mobile-headline-xl-font-size);
+  --db-type-headline-line-height-xl: var(--db-typography-regular-mobile-headline-xl-line-height);
+  --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-headline-xl);
+  --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-headline-xl);
+  --db-type-headline-font-size-2xl: var(--db-typography-regular-mobile-headline-2xl-font-size);
+  --db-type-headline-line-height-2xl: var(--db-typography-regular-mobile-headline-2xl-line-height);
+  --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-headline-2xl);
+  --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-headline-2xl);
+  --db-type-headline-font-size-3xl: var(--db-typography-regular-mobile-headline-3xl-font-size);
+  --db-type-headline-line-height-3xl: var(--db-typography-regular-mobile-headline-3xl-line-height);
+  --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-headline-3xl);
+  --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (min-width: 45em) {
+  .db-density-regular:not([data-force-mobile]),
+  [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
+  [data-force-mobile=false][data-density=regular] {
+    --db-type-headline-font-size-3xs: var(--db-typography-regular-tablet-headline-3xs-font-size);
+    --db-type-headline-line-height-3xs: var(--db-typography-regular-tablet-headline-3xs-line-height);
+    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
+    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
+    --db-type-headline-font-size-2xs: var(--db-typography-regular-tablet-headline-2xs-font-size);
+    --db-type-headline-line-height-2xs: var(--db-typography-regular-tablet-headline-2xs-line-height);
+    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-tablet-headline-2xs);
+    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-tablet-headline-2xs);
+    --db-type-headline-font-size-xs: var(--db-typography-regular-tablet-headline-xs-font-size);
+    --db-type-headline-line-height-xs: var(--db-typography-regular-tablet-headline-xs-line-height);
+    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-tablet-headline-xs);
+    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-tablet-headline-xs);
+    --db-type-headline-font-size-sm: var(--db-typography-regular-tablet-headline-sm-font-size);
+    --db-type-headline-line-height-sm: var(--db-typography-regular-tablet-headline-sm-line-height);
+    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-tablet-headline-sm);
+    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-tablet-headline-sm);
+    --db-type-headline-font-size-md: var(--db-typography-regular-tablet-headline-md-font-size);
+    --db-type-headline-line-height-md: var(--db-typography-regular-tablet-headline-md-line-height);
+    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-tablet-headline-md);
+    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-tablet-headline-md);
+    --db-type-headline-font-size-lg: var(--db-typography-regular-tablet-headline-lg-font-size);
+    --db-type-headline-line-height-lg: var(--db-typography-regular-tablet-headline-lg-line-height);
+    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-tablet-headline-lg);
+    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-tablet-headline-lg);
+    --db-type-headline-font-size-xl: var(--db-typography-regular-tablet-headline-xl-font-size);
+    --db-type-headline-line-height-xl: var(--db-typography-regular-tablet-headline-xl-line-height);
+    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-tablet-headline-xl);
+    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-tablet-headline-xl);
+    --db-type-headline-font-size-2xl: var(--db-typography-regular-tablet-headline-2xl-font-size);
+    --db-type-headline-line-height-2xl: var(--db-typography-regular-tablet-headline-2xl-line-height);
+    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-tablet-headline-2xl);
+    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-tablet-headline-2xl);
+    --db-type-headline-font-size-3xl: var(--db-typography-regular-tablet-headline-3xl-font-size);
+    --db-type-headline-line-height-3xl: var(--db-typography-regular-tablet-headline-3xl-line-height);
+    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-tablet-headline-3xl);
+    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-headline-3xl);
+  }
+}
+@media screen and (min-width: 64em) {
+  .db-density-regular:not([data-force-mobile]),
+  [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
+  [data-force-mobile=false][data-density=regular] {
+    --db-type-headline-font-size-3xs: var(--db-typography-regular-desktop-headline-3xs-font-size);
+    --db-type-headline-line-height-3xs: var(--db-typography-regular-desktop-headline-3xs-line-height);
+    --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
+    --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
+    --db-type-headline-font-size-2xs: var(--db-typography-regular-desktop-headline-2xs-font-size);
+    --db-type-headline-line-height-2xs: var(--db-typography-regular-desktop-headline-2xs-line-height);
+    --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-desktop-headline-2xs);
+    --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-desktop-headline-2xs);
+    --db-type-headline-font-size-xs: var(--db-typography-regular-desktop-headline-xs-font-size);
+    --db-type-headline-line-height-xs: var(--db-typography-regular-desktop-headline-xs-line-height);
+    --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-desktop-headline-xs);
+    --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-desktop-headline-xs);
+    --db-type-headline-font-size-sm: var(--db-typography-regular-desktop-headline-sm-font-size);
+    --db-type-headline-line-height-sm: var(--db-typography-regular-desktop-headline-sm-line-height);
+    --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-desktop-headline-sm);
+    --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-desktop-headline-sm);
+    --db-type-headline-font-size-md: var(--db-typography-regular-desktop-headline-md-font-size);
+    --db-type-headline-line-height-md: var(--db-typography-regular-desktop-headline-md-line-height);
+    --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-desktop-headline-md);
+    --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-desktop-headline-md);
+    --db-type-headline-font-size-lg: var(--db-typography-regular-desktop-headline-lg-font-size);
+    --db-type-headline-line-height-lg: var(--db-typography-regular-desktop-headline-lg-line-height);
+    --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-desktop-headline-lg);
+    --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-desktop-headline-lg);
+    --db-type-headline-font-size-xl: var(--db-typography-regular-desktop-headline-xl-font-size);
+    --db-type-headline-line-height-xl: var(--db-typography-regular-desktop-headline-xl-line-height);
+    --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-desktop-headline-xl);
+    --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-desktop-headline-xl);
+    --db-type-headline-font-size-2xl: var(--db-typography-regular-desktop-headline-2xl-font-size);
+    --db-type-headline-line-height-2xl: var(--db-typography-regular-desktop-headline-2xl-line-height);
+    --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-desktop-headline-2xl);
+    --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-desktop-headline-2xl);
+    --db-type-headline-font-size-3xl: var(--db-typography-regular-desktop-headline-3xl-font-size);
+    --db-type-headline-line-height-3xl: var(--db-typography-regular-desktop-headline-3xl-line-height);
+    --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-desktop-headline-3xl);
+    --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-desktop-headline-3xl);
+  }
+}
+
+.db-density-regular,
+[data-density=regular] {
+  --db-type-body-font-size-3xs: var(--db-typography-regular-mobile-body-3xs-font-size);
+  --db-type-body-line-height-3xs: var(--db-typography-regular-mobile-body-3xs-line-height);
+  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
+  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
+  --db-type-body-font-size-2xs: var(--db-typography-regular-mobile-body-2xs-font-size);
+  --db-type-body-line-height-2xs: var(--db-typography-regular-mobile-body-2xs-line-height);
+  --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
+  --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
+  --db-type-body-font-size-xs: var(--db-typography-regular-mobile-body-xs-font-size);
+  --db-type-body-line-height-xs: var(--db-typography-regular-mobile-body-xs-line-height);
+  --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
+  --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
+  --db-type-body-font-size-sm: var(--db-typography-regular-mobile-body-sm-font-size);
+  --db-type-body-line-height-sm: var(--db-typography-regular-mobile-body-sm-line-height);
+  --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
+  --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
+  --db-type-body-font-size-md: var(--db-typography-regular-mobile-body-md-font-size);
+  --db-type-body-line-height-md: var(--db-typography-regular-mobile-body-md-line-height);
+  --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
+  --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
+  --db-type-body-font-size-lg: var(--db-typography-regular-mobile-body-lg-font-size);
+  --db-type-body-line-height-lg: var(--db-typography-regular-mobile-body-lg-line-height);
+  --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
+  --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
+  --db-type-body-font-size-xl: var(--db-typography-regular-mobile-body-xl-font-size);
+  --db-type-body-line-height-xl: var(--db-typography-regular-mobile-body-xl-line-height);
+  --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
+  --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
+  --db-type-body-font-size-2xl: var(--db-typography-regular-mobile-body-2xl-font-size);
+  --db-type-body-line-height-2xl: var(--db-typography-regular-mobile-body-2xl-line-height);
+  --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
+  --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
+  --db-type-body-font-size-3xl: var(--db-typography-regular-mobile-body-3xl-font-size);
+  --db-type-body-line-height-3xl: var(--db-typography-regular-mobile-body-3xl-line-height);
+  --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
+  --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable at-rule-empty-line-before */
+  /* stylelint-enable at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media screen and (min-width: 45em) {
+  .db-density-regular:not([data-force-mobile]),
+  [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
+  [data-force-mobile=false][data-density=regular] {
+    --db-type-body-font-size-3xs: var(--db-typography-regular-tablet-body-3xs-font-size);
+    --db-type-body-line-height-3xs: var(--db-typography-regular-tablet-body-3xs-line-height);
+    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
+    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
+    --db-type-body-font-size-2xs: var(--db-typography-regular-tablet-body-2xs-font-size);
+    --db-type-body-line-height-2xs: var(--db-typography-regular-tablet-body-2xs-line-height);
+    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
+    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
+    --db-type-body-font-size-xs: var(--db-typography-regular-tablet-body-xs-font-size);
+    --db-type-body-line-height-xs: var(--db-typography-regular-tablet-body-xs-line-height);
+    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
+    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
+    --db-type-body-font-size-sm: var(--db-typography-regular-tablet-body-sm-font-size);
+    --db-type-body-line-height-sm: var(--db-typography-regular-tablet-body-sm-line-height);
+    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
+    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
+    --db-type-body-font-size-md: var(--db-typography-regular-tablet-body-md-font-size);
+    --db-type-body-line-height-md: var(--db-typography-regular-tablet-body-md-line-height);
+    --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
+    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
+    --db-type-body-font-size-lg: var(--db-typography-regular-tablet-body-lg-font-size);
+    --db-type-body-line-height-lg: var(--db-typography-regular-tablet-body-lg-line-height);
+    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
+    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
+    --db-type-body-font-size-xl: var(--db-typography-regular-tablet-body-xl-font-size);
+    --db-type-body-line-height-xl: var(--db-typography-regular-tablet-body-xl-line-height);
+    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
+    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
+    --db-type-body-font-size-2xl: var(--db-typography-regular-tablet-body-2xl-font-size);
+    --db-type-body-line-height-2xl: var(--db-typography-regular-tablet-body-2xl-line-height);
+    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
+    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
+    --db-type-body-font-size-3xl: var(--db-typography-regular-tablet-body-3xl-font-size);
+    --db-type-body-line-height-3xl: var(--db-typography-regular-tablet-body-3xl-line-height);
+    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
+    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
+  }
+}
+@media screen and (min-width: 64em) {
+  .db-density-regular:not([data-force-mobile]),
+  [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
+  [data-force-mobile=false][data-density=regular] {
+    --db-type-body-font-size-3xs: var(--db-typography-regular-desktop-body-3xs-font-size);
+    --db-type-body-line-height-3xs: var(--db-typography-regular-desktop-body-3xs-line-height);
+    --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
+    --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
+    --db-type-body-font-size-2xs: var(--db-typography-regular-desktop-body-2xs-font-size);
+    --db-type-body-line-height-2xs: var(--db-typography-regular-desktop-body-2xs-line-height);
+    --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
+    --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
+    --db-type-body-font-size-xs: var(--db-typography-regular-desktop-body-xs-font-size);
+    --db-type-body-line-height-xs: var(--db-typography-regular-desktop-body-xs-line-height);
+    --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
+    --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
+    --db-type-body-font-size-sm: var(--db-typography-regular-desktop-body-sm-font-size);
+    --db-type-body-line-height-sm: var(--db-typography-regular-desktop-body-sm-line-height);
+    --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
+    --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
+    --db-type-body-font-size-md: var(--db-typography-regular-desktop-body-md-font-size);
+    --db-type-body-line-height-md: var(--db-typography-regular-desktop-body-md-line-height);
+    --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
+    --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
+    --db-type-body-font-size-lg: var(--db-typography-regular-desktop-body-lg-font-size);
+    --db-type-body-line-height-lg: var(--db-typography-regular-desktop-body-lg-line-height);
+    --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
+    --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
+    --db-type-body-font-size-xl: var(--db-typography-regular-desktop-body-xl-font-size);
+    --db-type-body-line-height-xl: var(--db-typography-regular-desktop-body-xl-line-height);
+    --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
+    --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
+    --db-type-body-font-size-2xl: var(--db-typography-regular-desktop-body-2xl-font-size);
+    --db-type-body-line-height-2xl: var(--db-typography-regular-desktop-body-2xl-line-height);
+    --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
+    --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
+    --db-type-body-font-size-3xl: var(--db-typography-regular-desktop-body-3xl-font-size);
+    --db-type-body-line-height-3xl: var(--db-typography-regular-desktop-body-3xl-line-height);
+    --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
+    --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
+  }
+}

package/build/styles/density/classes/regular.scss

@@ -0,0 +1,6 @@
+@use "../index";
+@use "get-class";
+
+$density: "regular";
+
+@include get-class.init($density);

package/build/styles/fonts/_font-sizes.scss

@@ -0,0 +1,55 @@
+@mixin set-component-variables($size) {
+	/* Those variables are only for components to calculate heights and change icons */
+	--db-icon-font-weight: var(--db-base-body-icon-weight-#{$size});
+	--db-icon-font-size: var(--db-base-body-icon-font-size-#{$size});
+	--db-base-line-height: var(--db-type-body-line-height-#{$size});
+	--db-base-font-size: var(--db-type-body-font-size-#{$size});
+}
+
+@mixin set-font-size($size) {
+	line-height: var(--db-type-body-line-height-#{$size});
+	font-size: var(--db-type-body-font-size-#{$size});
+}
+
+@mixin set-headline-variables($size) {
+	/* Those variables are only for components to calculate heights and change icons */
+	--db-icon-font-weight: var(--db-base-headline-icon-weight-#{$size});
+	--db-icon-font-size: var(--db-base-headline-icon-font-size-#{$size});
+}
+
+@mixin set-headline-size($size) {
+	line-height: var(--db-type-headline-line-height-#{$size});
+	font-size: var(--db-type-headline-font-size-#{$size});
+}
+
+$font-sizes: "3xl", "2xl", "xl", "lg", "md", "sm", "xs", "2xs", "3xs";
+
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+@mixin generate-font-sizes() {
+	@each $font-size in $font-sizes {
+		%db-component-variables-#{$font-size} {
+			@include set-component-variables($font-size);
+		}
+
+		%db-font-size-#{$font-size} {
+			@include set-font-size($font-size);
+		}
+
+		%db-overwrite-font-size-#{$font-size} {
+			@include set-component-variables($font-size);
+			@include set-font-size($font-size);
+		}
+
+		%db-overwrite-headline-size-#{$font-size} {
+			@include set-headline-variables($font-size);
+			@include set-headline-size($font-size);
+		}
+	}
+}
+
+@include generate-font-sizes();

package/build/styles/fonts/_index.scss

@@ -0,0 +1 @@
+@forward "font-sizes";

package/build/styles/fonts/absolute.css

@@ -0,0 +1 @@
+@font-face{font-family:OpenSans;font-style:normal;font-weight:300;src:url(/assets/fonts/OpenSans-Light-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:400;src:url(/assets/fonts/OpenSans-Regular-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:500;src:url(/assets/fonts/OpenSans-Medium-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:600;src:url(/assets/fonts/OpenSans-SemiBold-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:700;src:url(/assets/fonts/OpenSans-Bold-EU.woff2) format("woff2")}@font-face{font-family:OpenSans Head;font-style:normal;font-weight:300;src:url(/assets/fonts/OpenSans-Light-EU.woff2) format("woff2")}@font-face{font-family:OpenSans Head;font-style:normal;font-weight:900;src:url(/assets/fonts/OpenSans-ExtraBold-EU.woff2) format("woff2")}

package/build/styles/fonts/absolute.scss

@@ -0,0 +1,3 @@
+@use "../absolute.assets-paths";
+
+@forward "./relative";

package/build/styles/fonts/classes/all.css

@@ -0,0 +1,185 @@
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-font-size-3xl,
+[data-font-size="3xl"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
+  --db-base-line-height: var(--db-type-body-line-height-3xl);
+  --db-base-font-size: var(--db-type-body-font-size-3xl);
+  line-height: var(--db-type-body-line-height-3xl);
+  font-size: var(--db-type-body-font-size-3xl);
+}
+
+.db-headline-size-3xl,
+[data-headline-size="3xl"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
+  line-height: var(--db-type-headline-line-height-3xl);
+  font-size: var(--db-type-headline-font-size-3xl);
+}
+
+.db-font-size-2xl,
+[data-font-size="2xl"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
+  --db-base-line-height: var(--db-type-body-line-height-2xl);
+  --db-base-font-size: var(--db-type-body-font-size-2xl);
+  line-height: var(--db-type-body-line-height-2xl);
+  font-size: var(--db-type-body-font-size-2xl);
+}
+
+.db-headline-size-2xl,
+[data-headline-size="2xl"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
+  line-height: var(--db-type-headline-line-height-2xl);
+  font-size: var(--db-type-headline-font-size-2xl);
+}
+
+.db-font-size-xl,
+[data-font-size=xl] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-xl);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-xl);
+  --db-base-line-height: var(--db-type-body-line-height-xl);
+  --db-base-font-size: var(--db-type-body-font-size-xl);
+  line-height: var(--db-type-body-line-height-xl);
+  font-size: var(--db-type-body-font-size-xl);
+}
+
+.db-headline-size-xl,
+[data-headline-size=xl] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
+  line-height: var(--db-type-headline-line-height-xl);
+  font-size: var(--db-type-headline-font-size-xl);
+}
+
+.db-font-size-lg,
+[data-font-size=lg] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
+  --db-base-line-height: var(--db-type-body-line-height-lg);
+  --db-base-font-size: var(--db-type-body-font-size-lg);
+  line-height: var(--db-type-body-line-height-lg);
+  font-size: var(--db-type-body-font-size-lg);
+}
+
+.db-headline-size-lg,
+[data-headline-size=lg] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
+  line-height: var(--db-type-headline-line-height-lg);
+  font-size: var(--db-type-headline-font-size-lg);
+}
+
+.db-font-size-md,
+[data-font-size=md] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  --db-base-line-height: var(--db-type-body-line-height-md);
+  --db-base-font-size: var(--db-type-body-font-size-md);
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
+}
+
+.db-headline-size-md,
+[data-headline-size=md] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
+  line-height: var(--db-type-headline-line-height-md);
+  font-size: var(--db-type-headline-font-size-md);
+}
+
+.db-font-size-sm,
+[data-font-size=sm] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
+  --db-base-line-height: var(--db-type-body-line-height-sm);
+  --db-base-font-size: var(--db-type-body-font-size-sm);
+  line-height: var(--db-type-body-line-height-sm);
+  font-size: var(--db-type-body-font-size-sm);
+}
+
+.db-headline-size-sm,
+[data-headline-size=sm] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
+  line-height: var(--db-type-headline-line-height-sm);
+  font-size: var(--db-type-headline-font-size-sm);
+}
+
+.db-font-size-xs,
+[data-font-size=xs] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
+  --db-base-line-height: var(--db-type-body-line-height-xs);
+  --db-base-font-size: var(--db-type-body-font-size-xs);
+  line-height: var(--db-type-body-line-height-xs);
+  font-size: var(--db-type-body-font-size-xs);
+}
+
+.db-headline-size-xs,
+[data-headline-size=xs] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
+  line-height: var(--db-type-headline-line-height-xs);
+  font-size: var(--db-type-headline-font-size-xs);
+}
+
+.db-font-size-2xs,
+[data-font-size="2xs"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
+  --db-base-line-height: var(--db-type-body-line-height-2xs);
+  --db-base-font-size: var(--db-type-body-font-size-2xs);
+  line-height: var(--db-type-body-line-height-2xs);
+  font-size: var(--db-type-body-font-size-2xs);
+}
+
+.db-headline-size-2xs,
+[data-headline-size="2xs"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
+  line-height: var(--db-type-headline-line-height-2xs);
+  font-size: var(--db-type-headline-font-size-2xs);
+}
+
+.db-font-size-3xs,
+[data-font-size="3xs"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
+  --db-base-line-height: var(--db-type-body-line-height-3xs);
+  --db-base-font-size: var(--db-type-body-font-size-3xs);
+  line-height: var(--db-type-body-line-height-3xs);
+  font-size: var(--db-type-body-font-size-3xs);
+}
+
+.db-headline-size-3xs,
+[data-headline-size="3xs"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
+  --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
+  line-height: var(--db-type-headline-line-height-3xs);
+  font-size: var(--db-type-headline-font-size-3xs);
+}

package/build/styles/fonts/classes/all.scss

@@ -0,0 +1,13 @@
+@use "../index";
+
+@each $font-size in index.$font-sizes {
+	.db-font-size-#{$font-size},
+	[data-font-size="#{$font-size}"] {
+		@extend %db-overwrite-font-size-#{$font-size};
+	}
+
+	.db-headline-size-#{$font-size},
+	[data-headline-size="#{$font-size}"] {
+		@extend %db-overwrite-headline-size-#{$font-size};
+	}
+}

package/build/styles/fonts/classes/body/2xl.css

@@ -0,0 +1,16 @@
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-font-size-2xl,
+[data-font-size="2xl"] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
+  --db-base-line-height: var(--db-type-body-line-height-2xl);
+  --db-base-font-size: var(--db-type-body-font-size-2xl);
+  line-height: var(--db-type-body-line-height-2xl);
+  font-size: var(--db-type-body-font-size-2xl);
+}