DEPRECATED

moda-themes should no longer be used. However, it is currently still in production, used by both Mojo and https://github.com/ModaOperandi/website.

You are probably looking for @moda/tokens, which replaces this library.

History

This package existed largely to aid in the brand transition. It was set up in such a way that sets of tokens were stored in CSS variables and allowed you to swap out those variables at the root, in order to switch "themes." This was useful in consolidating a large swath of variables and toggling them out with a feature flag. It was also set up to publish both a Ruby gem and NPM package. @moda/tokens replaces this library, dropping the dynamic themeing functionality and simplifying the build: only publishing an NPM package.

moda-themes

Meta

• State: production
• Point people: @dzucconi

Getting started

Ruby

Include the Ruby gem:

gem 'moda-themes'

bundle install

Use the functions + mixins in your SASS/SCSS files:

@import 'moda-themes';

// Include this once to generate the `data-theme` attr styling. This is not auto-included
// to prevent duplicate imports.
@include data-themes; /* Outputs =>
[data-theme="global"] {
  --theme-font-families-title: Moda Operandi Serif, Times New Roman, Times, serif;
  --theme-font-families-sans: Moda Operandi Sans, Arial, sans-serif;
  --theme-font-families-serif: Moda Operandi Serif, Times New Roman, Times, serif;
  --theme-font-families-body: Caslon, Times New Roman, Times, serif;
  --theme-colors-primary: #263078;
  --theme-colors-primary-alt: #933a20;
  --theme-colors-secondary: #ba912e;
  --theme-colors-background: #b1bfaa;
  --theme-colors-background-alt: #f8f5ee;
  --theme-colors-accent: #ff9279; }

[data-theme="mens"] {
  --theme-font-families-title: Moda Operandi Serif, Times New Roman, Times, serif;
  --theme-font-families-sans: Moda Operandi Sans, Arial, sans-serif;
  --theme-font-families-serif: Moda Operandi Serif, Times New Roman, Times, serif;
  --theme-font-families-body: Caslon, Times New Roman, Times, serif;
  --theme-colors-primary: #7f9acf;
  --theme-colors-primary-alt: #68683b;
  --theme-colors-secondary: #f3ded9;
  --theme-colors-background: #f2f3f5;
  --theme-colors-background-alt: #f2f3f5;
  --theme-colors-accent: #f0f659; }

[data-theme="womens"] {
  --theme-font-families-title: Moda Operandi Serif, Times New Roman, Times, serif;
  --theme-font-families-sans: Moda Operandi Sans, Arial, sans-serif;
  --theme-font-families-serif: Moda Operandi Serif, Times New Roman, Times, serif;
  --theme-font-families-body: Caslon, Times New Roman, Times, serif;
  --theme-colors-primary: #d56b27;
  --theme-colors-primary-alt: #d7b3d0;
  --theme-colors-secondary: #003728;
  --theme-colors-background: #f8f5ee;
  --theme-colors-background-alt: #f8f5ee;
  --theme-colors-accent: #c44cb0; }

:root {
  --theme-font-families-title: Moda Operandi Serif, Times New Roman, Times, serif;
  --theme-font-families-sans: Moda Operandi Sans, Arial, sans-serif;
  --theme-font-families-serif: Moda Operandi Serif, Times New Roman, Times, serif;
  --theme-font-families-body: Caslon, Times New Roman, Times, serif;
  --theme-colors-primary: #263078;
  --theme-colors-primary-alt: #933a20;
  --theme-colors-secondary: #ba912e;
  --theme-colors-background: #b1bfaa;
  --theme-colors-background-alt: #f8f5ee;
  --theme-colors-accent: #ff9279; }
*/

// Use the functions to access themed values:
p {
  font-family: font-family('sans');
  // font-family: var(--theme-font-families-sans);
}

JavaScript

Install the package:

yarn add moda-themes

Configure node-sass includePaths:

For Parcel: Create a .sassrc.js:

const modaThemes = require('moda-themes');

module.exports = {
  includePaths: [...modaThemes.includePaths],
};

For Webpack: Configure sass-loader:

const modaThemes = require('moda-themes');

const config = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: { includePaths: [...modaThemes.includePaths] },
          },
        ],
      },
    ],
  },
};

module.exports = config;

Use the functions + mixins in your SASS/SCSS files:

@import 'moda-themes/all';

// ...

Usage

See USAGE.

API

Functions

color($name)

Returns a color variable.

font-family($name)

Returns a font-family variable.

font-size($name)

Returns a font-size variable.

line-height($name)

Returns a line-height variable.

letter-spacing($name)

Returns a letter-spacing variable.

space($index)

Returns a value from the spacing scale.

z-index($name)

Returns a z-index.

get-from-theme($theme-name, $keys...)

Undocumented.

themed-value-exists($category, $key)

Undocumented.

Mixins

set-root-theme($theme-name)

Sets theme variables at the :root (include this once)

data-themes()

Includes the full set of themes under [data-theme="name"] selectors. (include this once)

theme-variables-for($theme)

Allows you to pull in a set of themed variables manually.

global-styles()

Pulls in any global styles.

Releasing

Increment the versions in package.json and lib/moda-themes/version.rb.

Run yarn build to rebuild the exported data.

Run rake release to release the Ruby gem.

Run yarn publish to publish the NPM package.

Create a new release.