moda-themes 4.4.1 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA256:
-  metadata.gz: 93d472fb15287eebe7efa70ea06bbe5858274bd531081fdf17ab2e4f2c9d3db1
-  data.tar.gz: 2293af2a594f2a725e74a74f1e9a1bb7b0e97796ebe47ce1aea2b7b7476652e5
+SHA1:
+  metadata.gz: 373e56f0da21acac33d184e7969a16765623eaeb
+  data.tar.gz: e73d172da0b4e8e7673a4663463efd9674c6c87e
 SHA512:
-  metadata.gz: 0f88ca15cff534f462ee45933ca1a26429eae45ea7ca6729fb16660b4cf318205e5decd9e003900f86dafa197efc99c14ff86050779dfc62b9d3c31bf74f800d
-  data.tar.gz: b0f39efb312633934fd2a7c5f489c228f662500d9045bb1d9cda9e76373c3b784d6ed64efc4bf2d0e55eed639ee32244ae8d0d4956d9e6387a13eb961f4458f4
+  metadata.gz: feba0c162b73d5195b8de901bf006e2052ec25c161c530b0f6b82b1195a08a70667af4453702fa322b58a4d539ecfa80ccedd26f77c97e0452a779fbe78dea14
+  data.tar.gz: 2f85537a0cb7aa5b8c93e125e73811fd4f640264488d6ffe07121137f700d7e2a9c51cf113257a049331831fc81466fe76b95a15f36ef36271e42f473ae3cb6f

data/README.md

@@ -1,6 +1,17 @@
+# DEPRECATED
+
+**`moda-themes` should no longer be used. However, it is currently still in production, used by both [Mojo](https://github.com/ModaOperandi/mojo) and [https://github.com/ModaOperandi/website](website).**
+
+***You are probably looking for [@moda/tokens](https://github.com/ModaOperandi/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](https://github.com/ModaOperandi/tokens) replaces this library, dropping the dynamic themeing functionality and simplifying the build: only publishing an NPM package.
+
 # moda-themes
 
-[![CircleCI](https://img.shields.io/circleci/build/github/ModaOperandi/moda-themes?token=51b1595bd3dac6aa321b052adfc4595cc79910d6)](https://circleci.com/gh/ModaOperandi/moda-themes) [![npm](https://img.shields.io/npm/v/moda-themes)](https://www.npmjs.com/package/moda-themes) [![Gem](https://img.shields.io/gem/v/moda-themes)](https://rubygems.org/gems/moda-themes)
+[![CircleCI](https://img.shields.io/circleci/build/github/ModaOperandi/moda-themes?token=51b1595bd3dac6aa321b052adfc4595cc79910d6)](https://circleci.com/gh/ModaOperandi/moda-themes) [![npm](https://img.shields.io/npm/v/moda-themes)](https://www.npmjs.com/package/moda-themes) [![Gem](https://img.shields.io/gem/v/moda-themes)](https://rubygems.org/gems/moda-themes) [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)
+
 
 ## Meta
 
@@ -24,30 +35,63 @@ bundle install
 Use the functions + mixins in your SASS/SCSS files:
 
 ```scss
-@import "moda-themes";
+@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=legacy] {
-  --theme-font-families-title: Miller Headline, Georgia, Times New Roman, Times, serif;
-  --theme-font-families-sans: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;
-  --theme-font-families-serif: Miller Headline, Georgia, Times New Roman, Times, serif;
-  --theme-font-families-body: Miller Headline, Georgia, Times New Roman, Times, serif;
-  // ...
-}
-[data-theme=global] {
+[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: font-family('sans');
   // font-family: var(--theme-font-families-sans);
 }
 ```
@@ -65,17 +109,17 @@ Configure node-sass `includePaths`:
 For Parcel: Create a .sassrc.js:
 
 ```javascript
-const modaThemes = require("moda-themes");
+const modaThemes = require('moda-themes');
 
 module.exports = {
-  includePaths: [...modaThemes.includePaths]
+  includePaths: [...modaThemes.includePaths],
 };
 ```
 
 For Webpack: Configure sass-loader:
 
 ```javascript
-const modaThemes = require("moda-themes");
+const modaThemes = require('moda-themes');
 
 const config = {
   // ...
@@ -84,16 +128,16 @@ const config = {
       {
         test: /\.scss$/,
         use: [
-          "style-loader",
-          "css-loader",
+          'style-loader',
+          'css-loader',
           {
-            loader: "sass-loader",
-            options: { includePaths: [...modaThemes.includePaths] }
-          }
-        ]
-      }
-    ]
-  }
+            loader: 'sass-loader',
+            options: { includePaths: [...modaThemes.includePaths] },
+          },
+        ],
+      },
+    ],
+  },
 };
 
 module.exports = config;
@@ -102,7 +146,7 @@ module.exports = config;
 Use the functions + mixins in your SASS/SCSS files:
 
 ```scss
-@import "moda-themes/all";
+@import 'moda-themes/all';
 
 // ...
 ```
@@ -111,10 +155,6 @@ Use the functions + mixins in your SASS/SCSS files:
 
 See [USAGE](USAGE.md).
 
-## Transitioning
-
-See [REBRAND](REBRAND.md).
-
 ## API
 
 ### Functions
@@ -163,7 +203,7 @@ Sets theme variables at the `:root` (include this once)
 
 #### `data-themes()`
 
-Inlcudes the full set of themes under `[data-theme="name"]` selectors. (include this once)
+Includes the full set of themes under `[data-theme="name"]` selectors. (include this once)
 
 #### `theme-variables-for($theme)`
 
@@ -179,8 +219,8 @@ Pulls in any global styles.
 
 Run `yarn build` to rebuild the exported data.
 
-<strike>Run `rake release` to release the Ruby gem.</strike>
+Run `rake release` to release the Ruby gem.
 
-<strike>Run `yarn publish` to publish the NPM package.</strike>
+Run `yarn publish` to publish the NPM package.
 
-[Create a new release](https://github.com/ModaOperandi/moda-themes/releases/new). Github Actions should publish it to RubyGems & NPM.
+[Create a new release](https://github.com/ModaOperandi/moda-themes/releases/new).

data/lib/assets/stylesheets/moda-themes/_globals.scss

@@ -1,6 +1,7 @@
 @mixin global-styles() {
   html {
     box-sizing: border-box;
+    font-size: 16px;
   }
 
   *,
@@ -8,8 +9,4 @@
   *::after {
     box-sizing: inherit;
   }
-
-  :focus {
-    outline: none;
-  }
 }

data/lib/assets/stylesheets/moda-themes/_variables.scss

@@ -4,68 +4,37 @@
 @import 'variables/breakpoints';
 
 $themes: (
-  legacy: (
-    font-families: map-get($fonts, legacy),
+  global: (
+    font-families: map-get($fonts, global),
     colors: (
-      transition-gold-to-black: map-get($colors-legacy, "legacy-gold"),
-      transition-gold-to-burnt-orange: map-get($colors-legacy, "legacy-gold"),
-      transition-burgundy-nav-to-black:
-        map-get($colors-legacy, "legacy-burgundy-nav"),
-      transition-burgundy-red-to-black:
-        map-get($colors-legacy, "legacy-burgundy-red"),
-      transition-burgundy-red-to-burnt-orange:
-        map-get($colors-legacy, "legacy-burgundy-red"),
-      transition-red-to-black: map-get($colors-legacy, "legacy-red"),
-      transition-blue-to-burnt-orange: map-get($colors-legacy, "legacy-blue"),
-      transition-error-red-to-fuchsia:
-        map-get($colors-legacy, "legacy-error-red")
-    )
+      primary: map-get($colors-global, 'klein-blue'),
+      primary-alt: map-get($colors-global, 'brick'),
+      secondary: map-get($colors-global, 'goldenrod'),
+      background: map-get($colors-global, 'seafoam'),
+      background-alt: map-get($colors-global, 'cream'),
+      accent: map-get($colors-global, 'coral'),
+    ),
   ),
-  global: (
+  mens: (
+    font-families: map-get($fonts, global),
+    colors: (
+      primary: map-get($colors-global, 'cornflower-blue'),
+      primary-alt: map-get($colors-global, 'moss-green'),
+      secondary: map-get($colors-global, 'blush'),
+      background: map-get($colors-global, 'light-grey'),
+      background-alt: map-get($colors-global, 'light-grey'),
+      accent: map-get($colors-global, 'canary'),
+    ),
+  ),
+  womens: (
     font-families: map-get($fonts, global),
     colors: (
-      transition-gold-to-black: map-get($colors-global, "black"),
-      transition-gold-to-burnt-orange: map-get($colors-global, "burnt-orange"),
-      transition-burgundy-nav-to-black: map-get($colors-global, "black"),
-      transition-burgundy-red-to-black: map-get($colors-global, "black"),
-      transition-burgundy-red-to-burnt-orange:
-        map-get($colors-global, "burnt-orange"),
-      transition-red-to-black: map-get($colors-global, "black"),
-      transition-blue-to-burnt-orange: map-get($colors-global, "burnt-orange"),
-      transition-error-red-to-fuchsia: map-get($colors-global, "fuchsia")
-    )
+      primary: map-get($colors-global, 'burnt-orange'),
+      primary-alt: map-get($colors-global, 'lilac'),
+      secondary: map-get($colors-global, 'forest-green'),
+      background: map-get($colors-global, 'cream'),
+      background-alt: map-get($colors-global, 'cream'),
+      accent: map-get($colors-global, 'fuchsia'),
+    ),
   ),
-  // global: (
-  //   font-families: map-get($fonts, global),
-  //   colors: (
-  //     primary: map-get($colors-global, "klein-blue"),
-  //     primary-alt: map-get($colors-global, "brick"),
-  //     secondary: map-get($colors-global, "goldenrod"),
-  //     background: map-get($colors-global, "seafoam"),
-  //     background-alt: map-get($colors-global, "cream"),
-  //     accent: map-get($colors-global, "coral")
-  //   )
-  // ),
-  // mens: (
-  //   font-families: map-get($fonts, global),
-  //   colors: (
-  //     primary: map-get($colors-global, "cornflower-blue"),
-  //     primary-alt: map-get($colors-global, "moss-green"),
-  //     secondary: map-get($colors-global, "blush"),
-  //     background: map-get($colors-global, "light-grey"),
-  //     background-alt: map-get($colors-global, "light-grey"),
-  //     accent: map-get($colors-global, "canary")
-  //   )
-  // ),
-  // womens: (
-  //   font-families: map-get($fonts, global),
-  //   colors: (
-  //     primary: map-get($colors-global, "burnt-orange"),
-  //     primary-alt: map-get($colors-global, "lilac"),
-  //     secondary: map-get($colors-global, "forest-green"),
-  //     background: map-get($colors-global, "cream"),
-  //     background-alt: map-get($colors-global, "cream"),
-  //     accent: map-get($colors-global, "fuchsia")
-  //   )
-  // )
 );

data/lib/assets/stylesheets/moda-themes/variables/_colors.scss

@@ -1,37 +1,24 @@
 $colors-ui: (
-  "strawberry": #fadedd,
-  "code-red": #ee0700,
-  "lime": #e3fbe2,
-  "money-good": #046c00
+  'strawberry': #fadedd,
+  'code-red': #ee0700,
+  'lime': #e3fbe2,
+  'money-good': #046c00,
 );
 
 $colors-universal: (
-  "white": #ffffff,
-  "black": #000000
+  'white': #ffffff,
+  'black': #000000,
 );
 
 $colors-greyscale: map-merge(
   $colors-universal,
   (
-    "cement": #646464,
-    "nokia": #969696,
-    "sidewalk": #afafaf,
-    "elephant": #bebebe,
-    "cashmere": #dedede,
-    "noise": #f5f5f5
-  )
-);
-
-$colors-legacy: map-merge(
-  $colors-universal,
-  (
-    "legacy-burgundy-nav": #734f59,
-    "legacy-burgundy-red": #3c1315,
-    "legacy-red": #5b1a28,
-    "legacy-pink": #f4e6e6,
-    "legacy-gold": #9b885f,
-    "legacy-error-red": #f62b0f,
-    "legacy-blue": #599ad3
+    'cement': #646464,
+    'nokia': #969696,
+    'sidewalk': #afafaf,
+    'elephant': #bebebe,
+    'cashmere': #dedede,
+    'noise': #f5f5f5,
   )
 );
 
@@ -40,33 +27,30 @@ $colors-global: map-merge(
   map-merge(
     $colors-ui,
     (
-      "brick": #933a20,
-      "burnt-orange": #d56b27,
-      "coral": #ff9279,
-      "goldenrod": #ba912e,
-      "canary": #f0f659,
-      "lilac": #d7b3d0,
-      "fuchsia": #c44cb0,
-      "forest-green": #003728,
-      "moss-green": #68683b,
-      "seafoam": #b1bfaa,
-      "klein-blue": #263078,
-      "cornflower-blue": #7f9acf,
-      "blush": #f3ded9,
-      "cream": #f8f5ee,
-      "light-grey": #f2f3f5,
-      "white": white
+      'brick': #933a20,
+      'burnt-orange': #d56b27,
+      'coral': #ff9279,
+      'goldenrod': #ba912e,
+      'canary': #f0f659,
+      'lilac': #d7b3d0,
+      'fuchsia': #c44cb0,
+      'dark-fuchsia': #b43ca0,
+      'forest-green': #003728,
+      'moss-green': #68683b,
+      'seafoam': #b1bfaa,
+      'klein-blue': #263078,
+      'cornflower-blue': #7f9acf,
+      'blush': #f3ded9,
+      'cream': #f8f5ee,
+      'light-grey': #f2f3f5,
+      'white': white,
     )
   )
 );
 
-$colors-flat: map-merge(
-  map-merge($colors-legacy, $colors-global),
-  $colors-greyscale
-);
+$colors-flat: map-merge($colors-global, $colors-greyscale);
 
 $colors: (
-  legacy: $colors-legacy,
   global: $colors-global,
-  greyscale: $colors-greyscale
+  greyscale: $colors-greyscale,
 );

data/lib/assets/stylesheets/moda-themes/variables/_typography.scss

@@ -1,29 +1,20 @@
-$font-stack-gotham: "Gotham", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-stack-miller-headline: "Miller Headline", Georgia, "Times New Roman",
-  Times, serif;
-$font-stack-moda-sans: "Moda Operandi Sans", Arial, sans-serif;
-$font-stack-moda-serif: "Moda Operandi Serif", "Times New Roman", Times, serif;
-$font-stack-caslon: "Caslon", "Times New Roman", Times, serif;
+$font-stack-moda-sans: 'Moda Operandi Sans', Arial, sans-serif;
+$font-stack-moda-serif: 'Moda Operandi Serif', 'Times New Roman', Times, serif;
+$font-stack-caslon: 'Caslon', 'Times New Roman', Times, serif;
 
 $fonts: (
-  legacy: (
-    title: $font-stack-miller-headline,
-    sans: $font-stack-gotham,
-    serif: $font-stack-miller-headline,
-    body: $font-stack-miller-headline
-  ),
   global: (
     title: $font-stack-moda-serif,
     sans: $font-stack-moda-sans,
     serif: $font-stack-moda-serif,
-    body: $font-stack-caslon
-  )
+    body: $font-stack-caslon,
+  ),
 );
 
 $line-heights: (
   base: 1.25,
   sm: 1.33,
-  md: 1.5
+  md: 1.5,
 );
 
 // TODO: Remove deprecated aliases: [wide, wider]
@@ -33,18 +24,18 @@ $letter-spacing: (
   md: 0.04em,
   lg: 0.1em,
   wide: 0.04em,
-  wider: 0.1em
+  wider: 0.1em,
 );
 
 $font-sizes: (
   xs: 10px,
   sm: 12px,
-  md: 13px
+  md: 13px,
 );
 
 $typography: (
   fonts: $fonts,
   line-heights: $line-heights,
   letter-spacing: $letter-spacing,
-  font-sizes: $font-sizes
+  font-sizes: $font-sizes,
 );

data/lib/moda-themes/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ModaThemes
-  VERSION = "4.4.1"
+  VERSION = "5.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: moda-themes
 version: !ruby/object:Gem::Version
-  version: 4.4.1
+  version: 5.2.0
 platform: ruby
 authors:
 - dzucconi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-09-26 00:00:00.000000000 Z
+date: 2020-08-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -122,7 +122,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.1
+rubyforge_project: 
+rubygems_version: 2.5.2.3
 signing_key: 
 specification_version: 4
 summary: Constant themed values for modaoperandi.com