moda-themes 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6147662b68151081e07e1014b700b1bb0d2795d72d591f6185b58d6063941003
-  data.tar.gz: 524c3a21e53a3bc54262a255733362ff829e22c32cbf36e05391aa7f4f7fb777
+  metadata.gz: a7967d6f67a53eabd8b4d773ffd8a567c1e29d63905802d2e78221b9c8176e02
+  data.tar.gz: 10d07b43b35c7681fca2d8c617c6061a8f69f702cbb4466a6f7e9af60ce98d27
 SHA512:
-  metadata.gz: 075a38c1f71da67096a5889b95e43790f17b1fbb5b03bf242a4a0a78db76e169c30daff5965f1e8bd6bb321ae794c1f27b3c336edc1867586a532cbb9ea2300e
-  data.tar.gz: 8d1f2e8772f65bf1456b11bf7eb937c3c6a29e8ac542307cdcf06a039b81132c980cb44a1bb83482ee88a689e8f0e81cdeeca73596bc8270fbff5fc471c16588
+  metadata.gz: 638a8b0fa98daa13f6eeea584943c728540b1ef869848898b34ea9bd99fdf0a0aa0551e637405451b2f424a2515eedbd70e51240f639c89a304aff85525eddd2
+  data.tar.gz: af5b064ce190d1a89a78695e911bdddf3c3a4571730e7dd622252628e48090907e3046fec18feb75a981fcd0fc5084a511452af499a59e9aeffd13b2b9accdbe

data/README.md

@@ -2,8 +2,8 @@
 
 ## Meta
 
-* **State**: development
-* **Point people**: [@dzucconi](https://github.com/dzucconi)
+- **State**: production
+- **Point people**: [@dzucconi](https://github.com/dzucconi)
 
 ## Getting started
 
@@ -22,7 +22,7 @@ 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.
@@ -45,7 +45,7 @@ Use the functions + mixins in your SASS/SCSS files:
 
 // 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);
 }
 ```
@@ -63,13 +63,11 @@ 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:
@@ -104,9 +102,39 @@ Use the functions + mixins in your SASS/SCSS files:
 ```scss
 @import "moda-themes/all";
 
-// Usage: See above...
+// ...
 ```
 
+## API
+
+### Functions
+
+#### `font-family($name)`
+
+Returns a font-family variable.
+
+#### `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()`
+
+Inlcudes 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.
+
 ## Releasing
 
 [Increment the versions](https://semver.org/) in [package.json](package.json) and [lib/moda-themes/version.rb](lib/moda-themes/version.rb).

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

@@ -1,17 +1,27 @@
-@import 'themes';
+@import "themes";
 
-@mixin theme-variables-for($theme) {
-  @each $category-key, $category-values in map-deep-get($themes, $theme) {
-    @each $key, $value in $category-values {
-      --theme-#{$category-key}-#{$key}: #{$value};
+@mixin set-root-theme($theme-name) {
+  :root {
+    @if map-has-key($themes, $theme-name) {
+      @include theme-variables-for($theme-name);
+    } @else {
+      @error "ERROR: Specified theme: <#{$theme-name}> does not exist";
     }
   }
 }
 
 @mixin data-themes() {
-  @each $theme-name, $_theme-values in $themes {
+  @each $theme-name in map-keys($map: $themes) {
     [data-theme="#{$theme-name}"] {
       @include theme-variables-for($theme-name);
     }
   }
 }
+
+@mixin theme-variables-for($theme) {
+  @each $category-key, $category-values in map-get($themes, $theme) {
+    @each $key, $value in $category-values {
+      --theme-#{$category-key}-#{$key}: #{$value};
+    }
+  }
+}

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

@@ -1,9 +1,9 @@
-$font-stack-gotham: 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$font-stack-miller-headline: 'Miller Headline', Georgia, 'Times New Roman',
+$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;
 
 $themes: (
   legacy: (
@@ -24,21 +24,33 @@ $themes: (
   )
 );
 
-@function map-deep-get($map, $keys...) {
+@function __var__($var) {
+  @return var(--#{$var});
+}
+
+@function __deep-map-get__($map, $keys...) {
   @each $key in $keys {
     $map: map-get($map, $key);
   }
   @return $map;
 }
 
-@function theme($theme, $keys...) {
-  @return map-deep-get($themes, $theme, $keys...);
+@function get-from-theme($theme-name, $keys...) {
+  @return __deep-map-get__($themes, $theme-name, $keys...);
 }
 
-@function v($var) {
-  @return var(--#{$var});
+@function themed-value-exists($category, $key) {
+  @each $theme-name in map-keys($map: $themes) {
+    @if null == get-from-theme($theme-name, $category, $key) {
+      @error "ERROR: '#{$key}' is missing in #{$category} of the #{$theme-name} theme";
+    }
+  }
+
+  @return true;
 }
 
 @function font-family($name) {
-  @return v('theme-font-families-#{$name}');
+  @if themed-value-exists("font-families", $name) {
+    @return __var__("theme-font-families-#{$name}");
+  }
 }

data/lib/moda-themes/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ModaThemes
-  VERSION = '0.0.2'
+  VERSION = '0.0.3'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: moda-themes
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - dzucconi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-07-11 00:00:00.000000000 Z
+date: 2019-07-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass