moda-themes 4.4.2 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +60 -31
- data/lib/assets/stylesheets/moda-themes/_variables.scss +28 -59
- data/lib/assets/stylesheets/moda-themes/variables/_colors.scss +30 -47
- data/lib/assets/stylesheets/moda-themes/variables/_typography.scss +9 -18
- data/lib/moda-themes/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6a74b0ce8f55ad9b9011a7bc23376bb0aee48c6944e0b1c4458fb9679aa696e0
|
|
4
|
+
data.tar.gz: d4e85c5d41e88485e523ed7b0903ececcc3ebf993f8764de42c2b03752bacf57
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
|
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=
|
|
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(
|
|
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(
|
|
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(
|
|
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
|
-
|
|
88
|
-
|
|
120
|
+
'style-loader',
|
|
121
|
+
'css-loader',
|
|
89
122
|
{
|
|
90
|
-
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
|
|
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
|
-
|
|
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).
|
|
215
|
+
[Create a new release](https://github.com/ModaOperandi/moda-themes/releases/new).
|
|
@@ -4,68 +4,37 @@
|
|
|
4
4
|
@import 'variables/breakpoints';
|
|
5
5
|
|
|
6
6
|
$themes: (
|
|
7
|
-
|
|
8
|
-
font-families: map-get($fonts,
|
|
7
|
+
global: (
|
|
8
|
+
font-families: map-get($fonts, global),
|
|
9
9
|
colors: (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
|
|
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
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
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
|
);
|
|
@@ -1,37 +1,24 @@
|
|
|
1
1
|
$colors-ui: (
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
'strawberry': #fadedd,
|
|
3
|
+
'code-red': #ee0700,
|
|
4
|
+
'lime': #e3fbe2,
|
|
5
|
+
'money-good': #046c00,
|
|
6
6
|
);
|
|
7
7
|
|
|
8
8
|
$colors-universal: (
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
'white': #ffffff,
|
|
10
|
+
'black': #000000,
|
|
11
11
|
);
|
|
12
12
|
|
|
13
13
|
$colors-greyscale: map-merge(
|
|
14
14
|
$colors-universal,
|
|
15
15
|
(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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
|
);
|
|
@@ -1,29 +1,20 @@
|
|
|
1
|
-
$font-stack-
|
|
2
|
-
$font-stack-
|
|
3
|
-
|
|
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
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
|
+
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-
|
|
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.
|
|
125
|
+
rubygems_version: 3.0.4
|
|
126
126
|
signing_key:
|
|
127
127
|
specification_version: 4
|
|
128
128
|
summary: Constant themed values for modaoperandi.com
|