Moon liveview storybook Moon Liveview Storybook

Migration to V3

If you haven't used Moon DS before, you can skip this migration guide, and follow the installation guide.

The main reason for the migration to v3 is to make the token system more flexible and easier to maintain. In the new system we introduce a few layers of tokens: primitive, semantic, utility, component, and composite tokens.

Migration guide

Adjust Tailwind configuration

Add new moonBasePreset to tailwind.config.js file to extend the default Tailwind configuration: 

  const moonLivePreset = require("../deps/moon_live/assets/ds-moon-preset");
  + const moonBasePreset = require("../deps/moon_live/assets/js/moon-base-preset");

  module.exports = {
  -   presets: [moonLivePreset],
  +   presets: [moonLivePreset, moonBasePreset],
  };

Adjust theme CSS file

Add an import of a new CSS theme to the app.css file to include all new CSS variables into your app. You may use moon-base.css as a starting point. Include also font imports to cover primary, secondary, and tertiary font families. To check exact names of the fonts, please refer to --text-font-family-primary , --text-font-family-secondary , and --text-font-family-tertiary variable values in the moon-base.css file. If you've got a Figma design with a variables file prepared by your designer, you would benefit of customization guide. 

  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

  @import "../../deps/moon_live/assets/themes/moon.css";
  + @import "../../deps/moon_live/assets/css/moon-base.css";

  + @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
  + @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
  + @import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");

Adjust root HTML file

Update BODY tag in root.html.heex file. In case your app has dynamic theme switching feature, add new classes there also. Add a main theme class to the BODY tag to enable new theme support in your app: 

  - <body class="theme-moon-light">
  + <body class="theme-moon-light light-theme">

Migration cheat sheet

If you are not planning to migrate all previously developed features in your codebase, you don't need to migrate all already existing classes. You can keep both themes in your app. New token system is much more extensive and flexible, please follow new tokens guide to get more details.

Color

You might follow this comparison list of old and new color tokens that have been updated in the new token system.

Old token New token
*-piccolo *-brand
*-roshi *-positive
*-krillin *-caution
*-chichi *-negative
border-beerus border-primary
bg-goku bg-primary
bg-gohan bg-tertiary
text-bulma text-primary
text-trunks text-secondary
text-goten text-force-light
text-popo text-force-dark
bg-jiren bg-hover
bg-heles bg-hover
bg-zeno bg-backdrop

Border radius

You might follow this list of old and new border radius tokens that have been updated in the new token system.

Old token New token
rounded-moon-i-xs rounded-4
rounded-moon-s-xs rounded-4
rounded-moon-i-sm rounded-8
rounded-moon-s-sm rounded-8
rounded-moon-i-md rounded-12
rounded-moon-s-md rounded-12
rounded-moon-s-lg rounded-16

Box shadow

You might follow this list of old and new box shadow tokens that have been updated in the new token system.

Old token New token
shadow-moon-xs shadow-100
shadow-moon-sm shadow-200
shadow-moon-md shadow-300
shadow-moon-lg shadow-400
shadow-moon-xl shadow-500

Font sizes

You might follow this list of old and new text size tokens that have been updated in the new token system.

Old token New token
text-moon-10 text-body-100
text-moon-12 text-body-200
text-moon-14 text-body-300
text-moon-16 text-body-400
text-moon-18 text-body-500
text-moon-18 font-medium text-heading-100
text-moon-24 font-medium text-heading-200
text-moon-40 font-medium text-heading-300
text-moon-56 font-medium text-heading-400
text-moon-72 font-medium text-heading-500