v0.7.11

Theme transitioning

Added CDN support for theme transitioning. --theme-transition is now a CSS variable that targets the following properties:

• background-color
• border-color
• box-shadow
• color
• fill
• opacity
• stroke

To customize the theme transition — i.e. smooth dark mode — you can set theme-duration and theme-timing respectively.

Example usage:

:root {
  --theme-duration: 600ms;
  --theme-timing: var(--ease-out);
}

*Note that 600ms and var(--ease-out) are the default --theme-transition values.

In other words, anywhere in your app you use transition: var(--theme-transition), all of these properties will be transitioned smoothly.

Sass theme transitioning

To make things even easier, there is now an exported Sass mixin to help with coordinating light and dark modes. Instead of doing the following:

:root {
  --ui-app-bg: var(--white);
}

[data-theme="dark"] {
  --ui-app-bg: var(--black);
}

.ui-app {
  background-color: var(--ui-app-bg);
  transition: var(--theme-transition);
}

You can now use the themes mixin instead:

@use "@zaydek/duomo" as * with ($headless: true);

$light: (
  ui-app-bg: color(white),
);

$dark: (
  ui-app-bg: color(black),
);

@at-root {
  @include themes($light, $dark);
}

This generates:

:root {
  --ui-app-bg: hsl(0deg, 0%, 100%);
}

[data-theme="dark"] {
  --ui-app-bg: hsl(0deg, 0%, 0%);
}

.ui-app {
  background-color: var(--ui-app-bg);
  transition: var(--theme-transition);
}

Getters

Duomo now exports the following getters for use with the Sass API:

weight(...)
font(...)
color(...)
decoration(...)
shadow(...)
timing(...)

weight-var(...)
font-var(...)
color-var(...)
decoration-var(...)
shadow-var(...)
timing-var(...)

These can be used to conveniently access design tokens provided by Duomo. The var counterparts populate as CSS variables, such as var(--font) instead of ui-sans-serif, ..., which may be desirable in some cases.

Finally, there are also plural versions of these getters that return Sass lists.

weights(...)
fonts(...)
colors(...)
decorations(...)
shadows(...)
timings(...)

weight-vars(...)
font-vars(...)
color-vars(...)
decoration-vars(...)
shadow-vars(...)
timing-vars(...)

Colors

To make the library internally consistent, colors are now named:

transparent
current
black
white
cool-gray // Was `gray`
red
amber // Was `green`
emerald // Was `green`
blue
indigo
violet // Was `purple`
pink

Furthermore, all of these colors are provided by Duomo as CSS variables:

transparent
current
black
white
rose
pink
fuchsia
purple
violet
indigo
blue
light-blue
cyan
teal
emerald
green
lime
yellow
amber
orange
red
warm-gray
true-gray
gray
cool-gray
blue-gray

That means you can now use hsl(var(--blue-gray-500)) or color(blue-gray-500) with the Sass API.

Note that all colors are provided as CSS variables with all CDN versions, including the skeleton CDN link.

---

Other notes:

• Deprecated [data-debug-space]
• Deprecated #duomo-root
• Added justify-self-* and justify-* utilities for use with ZStacks
• Added bg-placeholder; can be used in conjunction with bg-opacity-* classes

Known regressions:

• Negative classes (such as -mx-16) are currently missing