moda-themes 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a7967d6f67a53eabd8b4d773ffd8a567c1e29d63905802d2e78221b9c8176e02
4
- data.tar.gz: 10d07b43b35c7681fca2d8c617c6061a8f69f702cbb4466a6f7e9af60ce98d27
3
+ metadata.gz: b5fd9dcd48a4f9963ba744985b6b095036c28521a03e9ab6f43440bfc336e52c
4
+ data.tar.gz: 284771f09e7fbd2ea15cfc3fe489b1225c7b7f4ea8944d575e7d9ea556291f00
5
5
  SHA512:
6
- metadata.gz: 638a8b0fa98daa13f6eeea584943c728540b1ef869848898b34ea9bd99fdf0a0aa0551e637405451b2f424a2515eedbd70e51240f639c89a304aff85525eddd2
7
- data.tar.gz: af5b064ce190d1a89a78695e911bdddf3c3a4571730e7dd622252628e48090907e3046fec18feb75a981fcd0fc5084a511452af499a59e9aeffd13b2b9accdbe
6
+ metadata.gz: fb9a3510eb876fb3fab17b3507ae7515fe80738a3b714a7cca1850a1e50ff2947cfd54ff4e643059a2856acc2290320b31214b3c7a924ee2c55a6581cfefc20b
7
+ data.tar.gz: addb5e21406458b0d75716ea4c5a646bde46ac224af7ae28e966126d3b1d845e8f23cf2fe741d2779f7afd3022940ada341c9a30a8392b555fb8ce48ac3eef97
data/README.md CHANGED
@@ -105,6 +105,14 @@ Use the functions + mixins in your SASS/SCSS files:
105
105
  // ...
106
106
  ```
107
107
 
108
+ ## Usage
109
+
110
+ See [USAGE](USAGE.md).
111
+
112
+ ## Transitioning
113
+
114
+ See [REBRAND](REBRAND.md).
115
+
108
116
  ## API
109
117
 
110
118
  ### Functions
@@ -1 +1 @@
1
- @import 'moda-themes/all';
1
+ @import "moda-themes/all";
@@ -1,2 +1,2 @@
1
- @import 'themes';
2
- @import 'themer';
1
+ @import "themes";
2
+ @import "themer";
@@ -11,7 +11,7 @@
11
11
  }
12
12
 
13
13
  @mixin data-themes() {
14
- @each $theme-name in map-keys($map: $themes) {
14
+ @each $theme-name in map-keys($themes) {
15
15
  [data-theme="#{$theme-name}"] {
16
16
  @include theme-variables-for($theme-name);
17
17
  }
@@ -1,56 +1,59 @@
1
- $font-stack-gotham: "Gotham", "Helvetica Neue", Helvetica, Arial, sans-serif;
2
- $font-stack-miller-headline: "Miller Headline", Georgia, "Times New Roman",
3
- Times, serif;
4
- $font-stack-moda-sans: "Moda Operandi Sans", Arial, sans-serif;
5
- $font-stack-moda-serif: "Moda Operandi Serif", "Times New Roman", Times, serif;
6
- $font-stack-caslon: "Caslon", "Times New Roman", Times, serif;
7
-
8
- $themes: (
9
- legacy: (
10
- font-families: (
11
- title: $font-stack-miller-headline,
12
- sans: $font-stack-gotham,
13
- serif: $font-stack-miller-headline,
14
- body: $font-stack-miller-headline
15
- )
16
- ),
17
- global: (
18
- font-families: (
19
- title: $font-stack-moda-serif,
20
- sans: $font-stack-moda-sans,
21
- serif: $font-stack-moda-serif,
22
- body: $font-stack-caslon
23
- )
24
- )
25
- );
1
+ @import "variables";
26
2
 
27
3
  @function __var__($var) {
28
4
  @return var(--#{$var});
29
5
  }
30
6
 
31
- @function __deep-map-get__($map, $keys...) {
7
+ @function __get__($map, $keys...) {
32
8
  @each $key in $keys {
33
9
  $map: map-get($map, $key);
34
10
  }
35
11
  @return $map;
36
12
  }
37
13
 
14
+ @function __fetch__($map, $name) {
15
+ @if map-has-key($map, $name) {
16
+ @return map-get($map, $name);
17
+ } @else {
18
+ @error "ERROR: '#{$name}' is not defined";
19
+ }
20
+ }
21
+
38
22
  @function get-from-theme($theme-name, $keys...) {
39
- @return __deep-map-get__($themes, $theme-name, $keys...);
23
+ @return __get__($themes, $theme-name, $keys...);
40
24
  }
41
25
 
42
- @function themed-value-exists($category, $key) {
43
- @each $theme-name in map-keys($map: $themes) {
26
+ @function themed-value-exists($category, $key, $raise: true) {
27
+ @each $theme-name in map-keys($themes) {
44
28
  @if null == get-from-theme($theme-name, $category, $key) {
45
- @error "ERROR: '#{$key}' is missing in #{$category} of the #{$theme-name} theme";
29
+ @if $raise {
30
+ @error "ERROR: '#{$key}' is missing in #{$category} of the #{$theme-name} theme";
31
+ } @else {
32
+ @return false;
33
+ }
46
34
  }
47
35
  }
48
36
 
49
37
  @return true;
50
38
  }
51
39
 
52
- @function font-family($name) {
53
- @if themed-value-exists("font-families", $name) {
54
- @return __var__("theme-font-families-#{$name}");
40
+ @function themed-value($category, $key) {
41
+ @if themed-value-exists($category, $key) {
42
+ @return __var__("theme-#{$category}-#{$key}");
43
+ }
44
+ }
45
+
46
+ @function font-family($key) {
47
+ @return themed-value("font-families", $key);
48
+ }
49
+
50
+ @function color($key) {
51
+ @if themed-value-exists("colors", $key, $raise: false) {
52
+ @return themed-value("colors", $key);
55
53
  }
54
+ @return __fetch__($colors-flat, $key);
55
+ }
56
+
57
+ @function letter-spacing($key) {
58
+ @return __fetch__($letter-spacing, $key);
56
59
  }
@@ -0,0 +1,69 @@
1
+ @import "variables/typography";
2
+ @import "variables/colors";
3
+
4
+ $themes: (
5
+ legacy: (
6
+ font-families: map-get($fonts, legacy),
7
+ colors: (
8
+ transition-gold-to-black: map-get($colors-legacy, "legacy-gold"),
9
+ transition-gold-to-burnt-orange: map-get($colors-legacy, "legacy-gold"),
10
+ transition-burgundy-nav-to-black:
11
+ map-get($colors-legacy, "legacy-burgundy-nav"),
12
+ transition-burgundy-red-to-black:
13
+ map-get($colors-legacy, "legacy-burgundy-red"),
14
+ transition-burgundy-red-to-burnt-orange:
15
+ map-get($colors-legacy, "legacy-burgundy-red"),
16
+ transition-red-to-black: map-get($colors-legacy, "legacy-red"),
17
+ transition-blue-to-burnt-orange: map-get($colors-legacy, "legacy-blue"),
18
+ transition-error-red-to-fuchsia:
19
+ map-get($colors-legacy, "legacy-error-red")
20
+ )
21
+ ),
22
+ global: (
23
+ font-families: map-get($fonts, global),
24
+ colors: (
25
+ transition-gold-to-black: map-get($colors-global, "black"),
26
+ transition-gold-to-burnt-orange: map-get($colors-global, "burnt-orange"),
27
+ transition-burgundy-nav-to-black: map-get($colors-global, "black"),
28
+ transition-burgundy-red-to-black: map-get($colors-global, "black"),
29
+ transition-burgundy-red-to-burnt-orange:
30
+ map-get($colors-global, "burnt-orange"),
31
+ transition-red-to-black: map-get($colors-global, "black"),
32
+ transition-blue-to-burnt-orange: map-get($colors-global, "burnt-orange"),
33
+ transition-error-red-to-fuchsia: map-get($colors-global, "fuchsia")
34
+ )
35
+ ),
36
+ // global: (
37
+ // font-families: map-get($fonts, global),
38
+ // colors: (
39
+ // primary: map-get($colors-global, "klein-blue"),
40
+ // primary-alt: map-get($colors-global, "brick"),
41
+ // secondary: map-get($colors-global, "goldenrod"),
42
+ // background: map-get($colors-global, "seafoam"),
43
+ // background-alt: map-get($colors-global, "cream"),
44
+ // accent: map-get($colors-global, "coral")
45
+ // )
46
+ // ),
47
+ // mens: (
48
+ // font-families: map-get($fonts, global),
49
+ // colors: (
50
+ // primary: map-get($colors-global, "cornflower-blue"),
51
+ // primary-alt: map-get($colors-global, "moss-green"),
52
+ // secondary: map-get($colors-global, "blush"),
53
+ // background: map-get($colors-global, "light-grey"),
54
+ // background-alt: map-get($colors-global, "light-grey"),
55
+ // accent: map-get($colors-global, "canary")
56
+ // )
57
+ // ),
58
+ // womens: (
59
+ // font-families: map-get($fonts, global),
60
+ // colors: (
61
+ // primary: map-get($colors-global, "burnt-orange"),
62
+ // primary-alt: map-get($colors-global, "lilac"),
63
+ // secondary: map-get($colors-global, "forest-green"),
64
+ // background: map-get($colors-global, "cream"),
65
+ // background-alt: map-get($colors-global, "cream"),
66
+ // accent: map-get($colors-global, "fuchsia")
67
+ // )
68
+ // )
69
+ );
@@ -0,0 +1,72 @@
1
+ $colors-ui: (
2
+ "strawberry": #fadedd,
3
+ "code-red": #ee0700,
4
+ "lime": #e3fbe2,
5
+ "money-good": #046c00
6
+ );
7
+
8
+ $colors-universal: (
9
+ "white": #ffffff,
10
+ "black": #000000
11
+ );
12
+
13
+ $colors-greyscale: map-merge(
14
+ $colors-universal,
15
+ (
16
+ "cement": #646464,
17
+ "nokia": #969696,
18
+ "sidewalk": #afafaf,
19
+ "elephant": #bebebe,
20
+ "cashmere": #dedede,
21
+ "noise": #f5f5f5
22
+ )
23
+ );
24
+
25
+ $colors-legacy: map-merge(
26
+ $colors-universal,
27
+ (
28
+ "legacy-burgundy-nav": #734f59,
29
+ "legacy-burgundy-red": #3c1315,
30
+ "legacy-red": #5b1a28,
31
+ "legacy-pink": #f4e6e6,
32
+ "legacy-gold": #9b885f,
33
+ "legacy-error-red": #f62b0f,
34
+ "legacy-blue": #599ad3
35
+ )
36
+ );
37
+
38
+ $colors-global: map-merge(
39
+ $colors-universal,
40
+ map-merge(
41
+ $colors-ui,
42
+ (
43
+ "brick": #933a20,
44
+ "burnt-orange": #d56b27,
45
+ "coral": #ff9279,
46
+ "goldenrod": #ba912e,
47
+ "canary": #f0f659,
48
+ "lilac": #d7b3d0,
49
+ "fuchsia": #c44cb0,
50
+ "forest-green": #003728,
51
+ "moss-green": #68683b,
52
+ "seafoam": #b1bfaa,
53
+ "klein-blue": #263078,
54
+ "cornflower-blue": #7f9acf,
55
+ "blush": #f3ded9,
56
+ "cream": #f8f5ee,
57
+ "light-grey": #f2f3f5,
58
+ "white": white
59
+ )
60
+ )
61
+ );
62
+
63
+ $colors-flat: map-merge(
64
+ map-merge($colors-legacy, $colors-global),
65
+ $colors-greyscale
66
+ );
67
+
68
+ $colors: (
69
+ legacy: $colors-legacy,
70
+ global: $colors-global,
71
+ greyscale: $colors-greyscale
72
+ );
@@ -0,0 +1,27 @@
1
+ $font-stack-gotham: "Gotham", "Helvetica Neue", Helvetica, Arial, sans-serif;
2
+ $font-stack-miller-headline: "Miller Headline", Georgia, "Times New Roman",
3
+ Times, serif;
4
+ $font-stack-moda-sans: "Moda Operandi Sans", Arial, sans-serif;
5
+ $font-stack-moda-serif: "Moda Operandi Serif", "Times New Roman", Times, serif;
6
+ $font-stack-caslon: "Caslon", "Times New Roman", Times, serif;
7
+
8
+ $fonts: (
9
+ legacy: (
10
+ title: $font-stack-miller-headline,
11
+ sans: $font-stack-gotham,
12
+ serif: $font-stack-miller-headline,
13
+ body: $font-stack-miller-headline
14
+ ),
15
+ global: (
16
+ title: $font-stack-moda-serif,
17
+ sans: $font-stack-moda-sans,
18
+ serif: $font-stack-moda-serif,
19
+ body: $font-stack-caslon
20
+ )
21
+ );
22
+
23
+ $letter-spacing: (
24
+ base: 0,
25
+ wide: 0.04em,
26
+ wider: 0.1em
27
+ );
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ModaThemes
4
- VERSION = '0.0.3'
4
+ VERSION = '0.0.4'
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: moda-themes
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.3
4
+ version: 0.0.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - dzucconi
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-07-15 00:00:00.000000000 Z
11
+ date: 2019-07-23 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -93,6 +93,9 @@ files:
93
93
  - lib/assets/stylesheets/moda-themes/_all.scss
94
94
  - lib/assets/stylesheets/moda-themes/_themer.scss
95
95
  - lib/assets/stylesheets/moda-themes/_themes.scss
96
+ - lib/assets/stylesheets/moda-themes/_variables.scss
97
+ - lib/assets/stylesheets/moda-themes/variables/_colors.scss
98
+ - lib/assets/stylesheets/moda-themes/variables/_typography.scss
96
99
  - lib/moda-themes.rb
97
100
  - lib/moda-themes/version.rb
98
101
  homepage: https://github.com/ModaOperandi/themes