moda-themes 4.4.2 → 5.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +60 -31
  3. data/lib/assets/stylesheets/moda-themes/_variables.scss +28 -59
  4. data/lib/assets/stylesheets/moda-themes/variables/_colors.scss +30 -47
  5. data/lib/assets/stylesheets/moda-themes/variables/_typography.scss +9 -18
  6. data/lib/moda-themes/version.rb +1 -1
  7. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2db1fc5f618f59d58cd754b3ea77f63e559869d36019dc19854fa9c2b10a8bb5
4
- data.tar.gz: ea13386a873c66413e578354e91af3bf1296b6983454775b1a09d7bf5fffe08b
3
+ metadata.gz: 6a74b0ce8f55ad9b9011a7bc23376bb0aee48c6944e0b1c4458fb9679aa696e0
4
+ data.tar.gz: d4e85c5d41e88485e523ed7b0903ececcc3ebf993f8764de42c2b03752bacf57
5
5
  SHA512:
6
- metadata.gz: 1b18cdf548a540ce00186eda5e1f67c3bb9ef4f1af61941582fe9dbccfb595a8718a8e9bca654456e8474b8c3da3a2ccfbfb218a621c0d487103929b8b356f41
7
- data.tar.gz: 785acc48bc12fd6669caf2b5a9939429b59dcb725fb4ef5b2591a3a964c6ac55cacee569965e899dc56ad1e36a75ce9d9ee11885392257a2d81dbad39691ac87
6
+ metadata.gz: 6b41a0e58ee77fa23447c82cee76f93c38ca87b90276a1383d38ff63a27dea8f156a3e63ba8508725c2e8e76049b9bf6a91d08bd2f484662bfb8cec60cd09d18
7
+ data.tar.gz: 3f30d50c2817675fa296e736c36a3ffca3d171ce32f8997d10d3592d88821364292700c6b0a68ba17acad5ef64f823bbe262ffe4246c991dd8030a1eb113ae5b
data/README.md CHANGED
@@ -24,30 +24,63 @@ bundle install
24
24
  Use the functions + mixins in your SASS/SCSS files:
25
25
 
26
26
  ```scss
27
- @import "moda-themes";
27
+ @import 'moda-themes';
28
28
 
29
29
  // Include this once to generate the `data-theme` attr styling. This is not auto-included
30
30
  // to prevent duplicate imports.
31
31
  @include data-themes; /* Outputs =>
32
- [data-theme=legacy] {
33
- --theme-font-families-title: Miller Headline, Georgia, Times New Roman, Times, serif;
34
- --theme-font-families-sans: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;
35
- --theme-font-families-serif: Miller Headline, Georgia, Times New Roman, Times, serif;
36
- --theme-font-families-body: Miller Headline, Georgia, Times New Roman, Times, serif;
37
- // ...
38
- }
39
- [data-theme=global] {
32
+ [data-theme="global"] {
40
33
  --theme-font-families-title: Moda Operandi Serif, Times New Roman, Times, serif;
41
34
  --theme-font-families-sans: Moda Operandi Sans, Arial, sans-serif;
42
35
  --theme-font-families-serif: Moda Operandi Serif, Times New Roman, Times, serif;
43
36
  --theme-font-families-body: Caslon, Times New Roman, Times, serif;
44
- // ...
45
- }
37
+ --theme-colors-primary: #263078;
38
+ --theme-colors-primary-alt: #933a20;
39
+ --theme-colors-secondary: #ba912e;
40
+ --theme-colors-background: #b1bfaa;
41
+ --theme-colors-background-alt: #f8f5ee;
42
+ --theme-colors-accent: #ff9279; }
43
+
44
+ [data-theme="mens"] {
45
+ --theme-font-families-title: Moda Operandi Serif, Times New Roman, Times, serif;
46
+ --theme-font-families-sans: Moda Operandi Sans, Arial, sans-serif;
47
+ --theme-font-families-serif: Moda Operandi Serif, Times New Roman, Times, serif;
48
+ --theme-font-families-body: Caslon, Times New Roman, Times, serif;
49
+ --theme-colors-primary: #7f9acf;
50
+ --theme-colors-primary-alt: #68683b;
51
+ --theme-colors-secondary: #f3ded9;
52
+ --theme-colors-background: #f2f3f5;
53
+ --theme-colors-background-alt: #f2f3f5;
54
+ --theme-colors-accent: #f0f659; }
55
+
56
+ [data-theme="womens"] {
57
+ --theme-font-families-title: Moda Operandi Serif, Times New Roman, Times, serif;
58
+ --theme-font-families-sans: Moda Operandi Sans, Arial, sans-serif;
59
+ --theme-font-families-serif: Moda Operandi Serif, Times New Roman, Times, serif;
60
+ --theme-font-families-body: Caslon, Times New Roman, Times, serif;
61
+ --theme-colors-primary: #d56b27;
62
+ --theme-colors-primary-alt: #d7b3d0;
63
+ --theme-colors-secondary: #003728;
64
+ --theme-colors-background: #f8f5ee;
65
+ --theme-colors-background-alt: #f8f5ee;
66
+ --theme-colors-accent: #c44cb0; }
67
+
68
+ :root {
69
+ --theme-font-families-title: Moda Operandi Serif, Times New Roman, Times, serif;
70
+ --theme-font-families-sans: Moda Operandi Sans, Arial, sans-serif;
71
+ --theme-font-families-serif: Moda Operandi Serif, Times New Roman, Times, serif;
72
+ --theme-font-families-body: Caslon, Times New Roman, Times, serif;
73
+ --theme-colors-primary: #263078;
74
+ --theme-colors-primary-alt: #933a20;
75
+ --theme-colors-secondary: #ba912e;
76
+ --theme-colors-background: #b1bfaa;
77
+ --theme-colors-background-alt: #f8f5ee;
78
+ --theme-colors-accent: #ff9279; }
46
79
  */
47
80
 
48
81
  // Use the functions to access themed values:
49
82
  p {
50
- font-family: font-family("sans");
83
+ font-family: font-family('sans');
51
84
  // font-family: var(--theme-font-families-sans);
52
85
  }
53
86
  ```
@@ -65,17 +98,17 @@ Configure node-sass `includePaths`:
65
98
  For Parcel: Create a .sassrc.js:
66
99
 
67
100
  ```javascript
68
- const modaThemes = require("moda-themes");
101
+ const modaThemes = require('moda-themes');
69
102
 
70
103
  module.exports = {
71
- includePaths: [...modaThemes.includePaths]
104
+ includePaths: [...modaThemes.includePaths],
72
105
  };
73
106
  ```
74
107
 
75
108
  For Webpack: Configure sass-loader:
76
109
 
77
110
  ```javascript
78
- const modaThemes = require("moda-themes");
111
+ const modaThemes = require('moda-themes');
79
112
 
80
113
  const config = {
81
114
  // ...
@@ -84,16 +117,16 @@ const config = {
84
117
  {
85
118
  test: /\.scss$/,
86
119
  use: [
87
- "style-loader",
88
- "css-loader",
120
+ 'style-loader',
121
+ 'css-loader',
89
122
  {
90
- loader: "sass-loader",
91
- options: { includePaths: [...modaThemes.includePaths] }
92
- }
93
- ]
94
- }
95
- ]
96
- }
123
+ loader: 'sass-loader',
124
+ options: { includePaths: [...modaThemes.includePaths] },
125
+ },
126
+ ],
127
+ },
128
+ ],
129
+ },
97
130
  };
98
131
 
99
132
  module.exports = config;
@@ -102,7 +135,7 @@ module.exports = config;
102
135
  Use the functions + mixins in your SASS/SCSS files:
103
136
 
104
137
  ```scss
105
- @import "moda-themes/all";
138
+ @import 'moda-themes/all';
106
139
 
107
140
  // ...
108
141
  ```
@@ -111,10 +144,6 @@ Use the functions + mixins in your SASS/SCSS files:
111
144
 
112
145
  See [USAGE](USAGE.md).
113
146
 
114
- ## Transitioning
115
-
116
- See [REBRAND](REBRAND.md).
117
-
118
147
  ## API
119
148
 
120
149
  ### Functions
@@ -163,7 +192,7 @@ Sets theme variables at the `:root` (include this once)
163
192
 
164
193
  #### `data-themes()`
165
194
 
166
- Inlcudes the full set of themes under `[data-theme="name"]` selectors. (include this once)
195
+ Includes the full set of themes under `[data-theme="name"]` selectors. (include this once)
167
196
 
168
197
  #### `theme-variables-for($theme)`
169
198
 
@@ -183,4 +212,4 @@ Run `yarn build` to rebuild the exported data.
183
212
 
184
213
  <strike>Run `yarn publish` to publish the NPM package.</strike>
185
214
 
186
- [Create a new release](https://github.com/ModaOperandi/moda-themes/releases/new). Github Actions should publish it to RubyGems & NPM.
215
+ [Create a new release](https://github.com/ModaOperandi/moda-themes/releases/new).
data/lib/assets/stylesheets/moda-themes/_variables.scss CHANGED
@@ -4,68 +4,37 @@
4
4
  @import 'variables/breakpoints';
5
5
 
6
6
  $themes: (
7
- legacy: (
8
- font-families: map-get($fonts, legacy),
7
+ global: (
8
+ font-families: map-get($fonts, global),
9
9
  colors: (
10
- transition-gold-to-black: map-get($colors-legacy, "legacy-gold"),
11
- transition-gold-to-burnt-orange: map-get($colors-legacy, "legacy-gold"),
12
- transition-burgundy-nav-to-black:
13
- map-get($colors-legacy, "legacy-burgundy-nav"),
14
- transition-burgundy-red-to-black:
15
- map-get($colors-legacy, "legacy-burgundy-red"),
16
- transition-burgundy-red-to-burnt-orange:
17
- map-get($colors-legacy, "legacy-burgundy-red"),
18
- transition-red-to-black: map-get($colors-legacy, "legacy-red"),
19
- transition-blue-to-burnt-orange: map-get($colors-legacy, "legacy-blue"),
20
- transition-error-red-to-fuchsia:
21
- map-get($colors-legacy, "legacy-error-red")
22
- )
10
+ primary: map-get($colors-global, 'klein-blue'),
11
+ primary-alt: map-get($colors-global, 'brick'),
12
+ secondary: map-get($colors-global, 'goldenrod'),
13
+ background: map-get($colors-global, 'seafoam'),
14
+ background-alt: map-get($colors-global, 'cream'),
15
+ accent: map-get($colors-global, 'coral'),
16
+ ),
23
17
  ),
24
- global: (
18
+ mens: (
19
+ font-families: map-get($fonts, global),
20
+ colors: (
21
+ primary: map-get($colors-global, 'cornflower-blue'),
22
+ primary-alt: map-get($colors-global, 'moss-green'),
23
+ secondary: map-get($colors-global, 'blush'),
24
+ background: map-get($colors-global, 'light-grey'),
25
+ background-alt: map-get($colors-global, 'light-grey'),
26
+ accent: map-get($colors-global, 'canary'),
27
+ ),
28
+ ),
29
+ womens: (
25
30
  font-families: map-get($fonts, global),
26
31
  colors: (
27
- transition-gold-to-black: map-get($colors-global, "black"),
28
- transition-gold-to-burnt-orange: map-get($colors-global, "burnt-orange"),
29
- transition-burgundy-nav-to-black: map-get($colors-global, "black"),
30
- transition-burgundy-red-to-black: map-get($colors-global, "black"),
31
- transition-burgundy-red-to-burnt-orange:
32
- map-get($colors-global, "burnt-orange"),
33
- transition-red-to-black: map-get($colors-global, "black"),
34
- transition-blue-to-burnt-orange: map-get($colors-global, "burnt-orange"),
35
- transition-error-red-to-fuchsia: map-get($colors-global, "fuchsia")
36
- )
32
+ primary: map-get($colors-global, 'burnt-orange'),
33
+ primary-alt: map-get($colors-global, 'lilac'),
34
+ secondary: map-get($colors-global, 'forest-green'),
35
+ background: map-get($colors-global, 'cream'),
36
+ background-alt: map-get($colors-global, 'cream'),
37
+ accent: map-get($colors-global, 'fuchsia'),
38
+ ),
37
39
  ),
38
- // global: (
39
- // font-families: map-get($fonts, global),
40
- // colors: (
41
- // primary: map-get($colors-global, "klein-blue"),
42
- // primary-alt: map-get($colors-global, "brick"),
43
- // secondary: map-get($colors-global, "goldenrod"),
44
- // background: map-get($colors-global, "seafoam"),
45
- // background-alt: map-get($colors-global, "cream"),
46
- // accent: map-get($colors-global, "coral")
47
- // )
48
- // ),
49
- // mens: (
50
- // font-families: map-get($fonts, global),
51
- // colors: (
52
- // primary: map-get($colors-global, "cornflower-blue"),
53
- // primary-alt: map-get($colors-global, "moss-green"),
54
- // secondary: map-get($colors-global, "blush"),
55
- // background: map-get($colors-global, "light-grey"),
56
- // background-alt: map-get($colors-global, "light-grey"),
57
- // accent: map-get($colors-global, "canary")
58
- // )
59
- // ),
60
- // womens: (
61
- // font-families: map-get($fonts, global),
62
- // colors: (
63
- // primary: map-get($colors-global, "burnt-orange"),
64
- // primary-alt: map-get($colors-global, "lilac"),
65
- // secondary: map-get($colors-global, "forest-green"),
66
- // background: map-get($colors-global, "cream"),
67
- // background-alt: map-get($colors-global, "cream"),
68
- // accent: map-get($colors-global, "fuchsia")
69
- // )
70
- // )
71
40
  );
data/lib/assets/stylesheets/moda-themes/variables/_colors.scss CHANGED
@@ -1,37 +1,24 @@
1
1
  $colors-ui: (
2
- "strawberry": #fadedd,
3
- "code-red": #ee0700,
4
- "lime": #e3fbe2,
5
- "money-good": #046c00
2
+ 'strawberry': #fadedd,
3
+ 'code-red': #ee0700,
4
+ 'lime': #e3fbe2,
5
+ 'money-good': #046c00,
6
6
  );
7
7
 
8
8
  $colors-universal: (
9
- "white": #ffffff,
10
- "black": #000000
9
+ 'white': #ffffff,
10
+ 'black': #000000,
11
11
  );
12
12
 
13
13
  $colors-greyscale: map-merge(
14
14
  $colors-universal,
15
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
16
+ 'cement': #646464,
17
+ 'nokia': #969696,
18
+ 'sidewalk': #afafaf,
19
+ 'elephant': #bebebe,
20
+ 'cashmere': #dedede,
21
+ 'noise': #f5f5f5,
35
22
  )
36
23
  );
37
24
 
@@ -40,33 +27,29 @@ $colors-global: map-merge(
40
27
  map-merge(
41
28
  $colors-ui,
42
29
  (
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
30
+ 'brick': #933a20,
31
+ 'burnt-orange': #d56b27,
32
+ 'coral': #ff9279,
33
+ 'goldenrod': #ba912e,
34
+ 'canary': #f0f659,
35
+ 'lilac': #d7b3d0,
36
+ 'fuchsia': #c44cb0,
37
+ 'forest-green': #003728,
38
+ 'moss-green': #68683b,
39
+ 'seafoam': #b1bfaa,
40
+ 'klein-blue': #263078,
41
+ 'cornflower-blue': #7f9acf,
42
+ 'blush': #f3ded9,
43
+ 'cream': #f8f5ee,
44
+ 'light-grey': #f2f3f5,
45
+ 'white': white,
59
46
  )
60
47
  )
61
48
  );
62
49
 
63
- $colors-flat: map-merge(
64
- map-merge($colors-legacy, $colors-global),
65
- $colors-greyscale
66
- );
50
+ $colors-flat: map-merge($colors-global, $colors-greyscale);
67
51
 
68
52
  $colors: (
69
- legacy: $colors-legacy,
70
53
  global: $colors-global,
71
- greyscale: $colors-greyscale
54
+ greyscale: $colors-greyscale,
72
55
  );
data/lib/assets/stylesheets/moda-themes/variables/_typography.scss CHANGED
@@ -1,29 +1,20 @@
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;
1
+ $font-stack-moda-sans: 'Moda Operandi Sans', Arial, sans-serif;
2
+ $font-stack-moda-serif: 'Moda Operandi Serif', 'Times New Roman', Times, serif;
3
+ $font-stack-caslon: 'Caslon', 'Times New Roman', Times, serif;
7
4
 
8
5
  $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
6
  global: (
16
7
  title: $font-stack-moda-serif,
17
8
  sans: $font-stack-moda-sans,
18
9
  serif: $font-stack-moda-serif,
19
- body: $font-stack-caslon
20
- )
10
+ body: $font-stack-caslon,
11
+ ),
21
12
  );
22
13
 
23
14
  $line-heights: (
24
15
  base: 1.25,
25
16
  sm: 1.33,
26
- md: 1.5
17
+ md: 1.5,
27
18
  );
28
19
 
29
20
  // TODO: Remove deprecated aliases: [wide, wider]
@@ -33,18 +24,18 @@ $letter-spacing: (
33
24
  md: 0.04em,
34
25
  lg: 0.1em,
35
26
  wide: 0.04em,
36
- wider: 0.1em
27
+ wider: 0.1em,
37
28
  );
38
29
 
39
30
  $font-sizes: (
40
31
  xs: 10px,
41
32
  sm: 12px,
42
- md: 13px
33
+ md: 13px,
43
34
  );
44
35
 
45
36
  $typography: (
46
37
  fonts: $fonts,
47
38
  line-heights: $line-heights,
48
39
  letter-spacing: $letter-spacing,
49
- font-sizes: $font-sizes
40
+ font-sizes: $font-sizes,
50
41
  );
data/lib/moda-themes/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ModaThemes
4
- VERSION = "4.4.2"
4
+ VERSION = "5.0.0"
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: 4.4.2
4
+ version: 5.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - dzucconi
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-09-27 00:00:00.000000000 Z
11
+ date: 2019-10-08 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -122,7 +122,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
122
122
  - !ruby/object:Gem::Version
123
123
  version: '0'
124
124
  requirements: []
125
- rubygems_version: 3.0.1
125
+ rubygems_version: 3.0.4
126
126
  signing_key:
127
127
  specification_version: 4
128
128
  summary: Constant themed values for modaoperandi.com