cacao-css 3.19.0 → 3.21.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.
package/CHANGELOG.md CHANGED
@@ -1,48 +1,56 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.21.0 (May 11, 2023)
4
+
5
+ - Updated b and strong to actually be bold.
6
+
7
+ ## 3.20.0 (April 28, 2023)
8
+
9
+ - Take 3.... Updated more hover states to only be applied if hover is supported by the device.
10
+
3
11
  ## 3.19.0 (April 28, 2023)
4
12
 
5
- - Updated more hover states to only be applied if hover is supported by the device.
13
+ - Take 2.... Updated more hover states to only be applied if hover is supported by the device.
6
14
 
7
15
  ## 3.18.0 (April 28, 2023)
8
16
 
9
- - Updated hover states to only be applied if hover is supported by the device.
10
-
17
+ - Updated hover states to only be applied if hover is supported by the device.
18
+
11
19
  ## 3.17.0 (July 28, 2022)
12
20
 
13
- - Added u-size1of1 as an alternate class to u-sizeFull.
21
+ - Added u-size1of1 as an alternate class to u-sizeFull.
14
22
 
15
23
  ## 3.16.0 (July 21, 2022)
16
24
 
17
- - Added `Image--fullWidth` class to make an image expand to full width.
25
+ - Added `Image--fullWidth` class to make an image expand to full width.
18
26
 
19
27
  ## 3.15.0 (May 12, 2022)
20
28
 
21
- - Added global box sizing style. Removed `box-sizing` from individual components.
22
- - Added ImageConstrain class to add size constraints to images.
23
- - Added portrait size options to the `Constrain` classes.
29
+ - Added global box sizing style. Removed `box-sizing` from individual components.
30
+ - Added ImageConstrain class to add size constraints to images.
31
+ - Added portrait size options to the `Constrain` classes.
24
32
 
25
33
  ## 3.14.0 (May 12, 2022)
26
34
 
27
- - Removed the small screen font styles that cause the font to be smaller on small screens. This is no longer necessary with high resolution mobile phones.
28
-
35
+ - Removed the small screen font styles that cause the font to be smaller on small screens. This is no longer necessary with high resolution mobile phones.
36
+
29
37
  ## 3.13.0 (December 17, 2021)
30
38
 
31
- - Added smooth scrolling on the `<html>` tag by default.
32
-
39
+ - Added smooth scrolling on the `<html>` tag by default.
40
+
33
41
  ## 3.12.0 (December 3, 2021)
34
42
 
35
- - Added vertical margin spacing utilities.
36
- - Added full width/height utilities.
43
+ - Added vertical margin spacing utilities.
44
+ - Added full width/height utilities.
37
45
 
38
46
  ## 3.11.0 (Sept 21, 2021)
39
47
 
40
- - Updated .Button class to use `display: inline-flexbox` instead of `display: inline`
41
- - Updated .TextInput to use `small`, `medium` and `large` class sizes
42
- - Added responsive flexbox classes
43
- - Added `margin-right` utility classes
44
- - Added `margin-left` utility classes
45
- - Fixed `u-textBreak` so that it uses `overflow-wrap` instead of `word-wrap`
48
+ - Updated .Button class to use `display: inline-flexbox` instead of `display: inline`
49
+ - Updated .TextInput to use `small`, `medium` and `large` class sizes
50
+ - Added responsive flexbox classes
51
+ - Added `margin-right` utility classes
52
+ - Added `margin-left` utility classes
53
+ - Fixed `u-textBreak` so that it uses `overflow-wrap` instead of `word-wrap`
46
54
 
47
55
  ## 3.10.0 (July 28, 2021)
48
56
 
@@ -50,7 +58,7 @@ Updated ColumnList--noStyle to also remove the left padding on the list.
50
58
 
51
59
  ## 3.9.0 (April 1, 2021)
52
60
 
53
- - Removed the inline block fallback styles for the Grid component since Flexbox is widely supported in browsers now.
61
+ - Removed the inline block fallback styles for the Grid component since Flexbox is widely supported in browsers now.
54
62
 
55
63
  ## 3.8.0 (April 1, 2021)
56
64
 
@@ -58,157 +66,157 @@ Skipped because this tag already accidentally existed.
58
66
 
59
67
  ## 3.7.0 (Aug 19, 2020)
60
68
 
61
- - Updated the Gulp configuration to use modern techniques.
62
- - Added fallback styles for the select menu text when the select menu is focused.
69
+ - Updated the Gulp configuration to use modern techniques.
70
+ - Added fallback styles for the select menu text when the select menu is focused.
63
71
 
64
72
  ## 3.6.1 (Nov 19, 2018)
65
73
 
66
- - Fixed font issue for select menus
74
+ - Fixed font issue for select menus
67
75
 
68
76
  ## 3.6.0 (Jan 19, 2018)
69
77
 
70
- - Added auto size utility
78
+ - Added auto size utility
71
79
 
72
80
  ## 3.5.0 (Jan 19, 2018)
73
81
 
74
- - Set the button active/focus state.
75
- - Set the default state for the image wrapper to be inline-block so that the caption is under the image.
82
+ - Set the button active/focus state.
83
+ - Set the default state for the image wrapper to be inline-block so that the caption is under the image.
76
84
 
77
85
  ## 3.4.0 (Nov 6, 2017)
78
86
 
79
- - Set a specific color for select input border.
80
- - Added default table border collapse styles.
81
- - Added basic print styles.
87
+ - Set a specific color for select input border.
88
+ - Added default table border collapse styles.
89
+ - Added basic print styles.
82
90
 
83
91
  ## 3.3.0 (Oct 16, 2017)
84
92
 
85
- - Adjusted some of the font sizes and margins to be based of of rem and ems instead of pixels.
86
- The goal is to improve accessibility and relative font sizing.
93
+ - Adjusted some of the font sizes and margins to be based of of rem and ems instead of pixels.
94
+ The goal is to improve accessibility and relative font sizing.
87
95
 
88
96
  ## 3.2.0 (Oct 13, 2017)
89
97
 
90
- - Added ImageWrapper and ImageCaption classes.
98
+ - Added ImageWrapper and ImageCaption classes.
91
99
 
92
100
  ## 3.1.0 (Oct 13, 2017)
93
101
 
94
- - Moved the text input and select menu styles to be under the "forms" component.
102
+ - Moved the text input and select menu styles to be under the "forms" component.
95
103
 
96
104
  ## 3.0.0 (Oct 13, 2017)
97
105
 
98
- - Changed the focus of Cacao to be just on the CSS. A Yeoman generator called [cacao-branchcms](https://github.com/aptuitiv/generator-cacao-branchcms) has been setup to bootstrap a site with Cacao, theme files, images and Javascript.
106
+ - Changed the focus of Cacao to be just on the CSS. A Yeoman generator called [cacao-branchcms](https://github.com/aptuitiv/generator-cacao-branchcms) has been setup to bootstrap a site with Cacao, theme files, images and Javascript.
99
107
 
100
108
  ## 2.8.0 (July 25, 2017)
101
109
 
102
- - Added notes about setting up a new site
103
- - Removed the 'default' value for the Javascript tag since it's default one already.
104
- - Updated packages and stylelint
110
+ - Added notes about setting up a new site
111
+ - Removed the 'default' value for the Javascript tag since it's default one already.
112
+ - Updated packages and stylelint
105
113
 
106
114
  ## 2.7.0 (July 7, 2017)
107
115
 
108
- - Fixed the order of the javascript in the footer.
109
- - Added support for copying theme files as a gulp task.
110
- - Updated stylelint.
111
- - Form templates - moved the field description to be below the field and to be a smaller font size.
112
- - Changed the default Javascript placement to be in the footer.
113
- - Updated slick carousel to the latest version.
114
- - Added drift-zoom library for zooming images when hovering over them.
115
- - Added "xl" utility selector size.
116
- - Changed the gulp-changed-in-place plugin for gulp-newer. That plugin works better with gulp-remember to combine all source files even if one changed. gulp-changed-in-place would only process the one changed file.
116
+ - Fixed the order of the javascript in the footer.
117
+ - Added support for copying theme files as a gulp task.
118
+ - Updated stylelint.
119
+ - Form templates - moved the field description to be below the field and to be a smaller font size.
120
+ - Changed the default Javascript placement to be in the footer.
121
+ - Updated slick carousel to the latest version.
122
+ - Added drift-zoom library for zooming images when hovering over them.
123
+ - Added "xl" utility selector size.
124
+ - Changed the gulp-changed-in-place plugin for gulp-newer. That plugin works better with gulp-remember to combine all source files even if one changed. gulp-changed-in-place would only process the one changed file.
117
125
 
118
126
  ## 2.6.0 (May 27, 2017)
119
127
 
120
- - Removed dist folder.
121
- - Updated packages to latest versions.
122
- - Included SVG files in the type of images to be processed.
123
- - Changed build path to 'build' instead of 'dist'.
124
- - Added theme files and moved all layout files to be built to build/theme/custom.
125
- - Added Header/Footer as default style components.
126
- - Updated navigation templates.
127
- - Added Breadcrumb default style.
128
- - Added list arrow styles.
129
- - Updated default button styles.
130
- - Added pagination styles.
131
- - Added default footer navigation.
132
- - Added default Content container styles.
133
- - Added default background utility style.
134
- - Added arrange component styles.
135
- - Added form templates.
136
- - Updated gulp watch task to use glob-watcher instead of gulp-batch as sometimes gulp-batch would stop recognizing changed files.
137
- - Added new 5/3 constrain size.
138
- - Added sidebar navigation.
139
- - Updated the BEM linter utilitySelector to include “xs-“ as a utility size.
140
- - Updated Constrain and FlexEmbed ratios to be consistent.
141
- - Updated form styles.
142
- - Added blog theme templates.
143
- - Added store theme templates.
144
- - Added ColumnList styles to convert an ul/ol list into columns.
145
- - Added jQuery form plugin as part of the core forms javascript.
146
- - Removed ap_drilldown_plugin.
128
+ - Removed dist folder.
129
+ - Updated packages to latest versions.
130
+ - Included SVG files in the type of images to be processed.
131
+ - Changed build path to 'build' instead of 'dist'.
132
+ - Added theme files and moved all layout files to be built to build/theme/custom.
133
+ - Added Header/Footer as default style components.
134
+ - Updated navigation templates.
135
+ - Added Breadcrumb default style.
136
+ - Added list arrow styles.
137
+ - Updated default button styles.
138
+ - Added pagination styles.
139
+ - Added default footer navigation.
140
+ - Added default Content container styles.
141
+ - Added default background utility style.
142
+ - Added arrange component styles.
143
+ - Added form templates.
144
+ - Updated gulp watch task to use glob-watcher instead of gulp-batch as sometimes gulp-batch would stop recognizing changed files.
145
+ - Added new 5/3 constrain size.
146
+ - Added sidebar navigation.
147
+ - Updated the BEM linter utilitySelector to include “xs-“ as a utility size.
148
+ - Updated Constrain and FlexEmbed ratios to be consistent.
149
+ - Updated form styles.
150
+ - Added blog theme templates.
151
+ - Added store theme templates.
152
+ - Added ColumnList styles to convert an ul/ol list into columns.
153
+ - Added jQuery form plugin as part of the core forms javascript.
154
+ - Removed ap_drilldown_plugin.
147
155
 
148
156
  ## 2.5.0 (February 12, 2017)
149
157
 
150
- - Changed '0%' to 'auto' for the flex grow utility classes as '0%' was causing issues in some versions of Safari.
158
+ - Changed '0%' to 'auto' for the flex grow utility classes as '0%' was causing issues in some versions of Safari.
151
159
 
152
160
  ## 2.4.0 (November 25, 2016)
153
161
 
154
- - Added right margin to radio buttons and checkboxes.
155
- - Added default styles for disabled inputs.
162
+ - Added right margin to radio buttons and checkboxes.
163
+ - Added default styles for disabled inputs.
156
164
 
157
165
  ## 2.3.0 (November 16, 2016)
158
166
 
159
- - Fixed nunjucks support.
160
- - Added sample pages to the 'dist' directory to show different responsive navigation options.
161
- - Added two built-in responsive navigation options in the src/styles/lib/components/navigation folder.
167
+ - Fixed nunjucks support.
168
+ - Added sample pages to the 'dist' directory to show different responsive navigation options.
169
+ - Added two built-in responsive navigation options in the src/styles/lib/components/navigation folder.
162
170
 
163
171
  ## 2.2.0 (November 9, 2016)
164
172
 
165
- - Added responsive styles for the typography utility classes.
166
- - Consolidated the dropdown and mainnav navigation components into one "navigation" component.
167
- - Added margin gutter utility classes.
168
- - Added responsive styles for all the padding utility classes.
169
- - Formatted code to have consistent line indents.
170
- - Added "u-block" responsive styles.
171
- - Added size12of12 as an alternate full width size class.
173
+ - Added responsive styles for the typography utility classes.
174
+ - Consolidated the dropdown and mainnav navigation components into one "navigation" component.
175
+ - Added margin gutter utility classes.
176
+ - Added responsive styles for all the padding utility classes.
177
+ - Formatted code to have consistent line indents.
178
+ - Added "u-block" responsive styles.
179
+ - Added size12of12 as an alternate full width size class.
172
180
 
173
181
  ## 2.1.0 (October 10, 2016)
174
182
 
175
- - Added left/right padding utilities.
176
- - Change the u-linkClean class to keep the link "clean" on hover.
183
+ - Added left/right padding utilities.
184
+ - Change the u-linkClean class to keep the link "clean" on hover.
177
185
 
178
186
  ## 2.0.0 (September 26, 2016)
179
187
 
180
- - Combined Cacao and Cacao Cracker together to make it easier to get a project started
181
- - Added some additional documentation
188
+ - Combined Cacao and Cacao Cracker together to make it easier to get a project started
189
+ - Added some additional documentation
182
190
 
183
191
  ## 1.4.0 (September 18, 2016)
184
192
 
185
- - Added Form component for errors, labels and required elements
186
- - Added Message component for success and error messages
193
+ - Added Form component for errors, labels and required elements
194
+ - Added Message component for success and error messages
187
195
 
188
196
  ## 1.3.0 (September 9, 2016)
189
197
 
190
- - Added telephone link styles
191
- - Changed container width from 960px to 1200px
192
- - Added extra large gutter sizes
193
- - Added utility text size classes
194
- - Changed default table column and header styles to have padding and top vertical alignment
195
- - Added config file to hold common breakpoints
196
- - Added responsive margin utility classes
197
- - Added arrow to the "Back" link for the mobile nav menu
198
- - Added extra small size utility classes
198
+ - Added telephone link styles
199
+ - Changed container width from 960px to 1200px
200
+ - Added extra large gutter sizes
201
+ - Added utility text size classes
202
+ - Changed default table column and header styles to have padding and top vertical alignment
203
+ - Added config file to hold common breakpoints
204
+ - Added responsive margin utility classes
205
+ - Added arrow to the "Back" link for the mobile nav menu
206
+ - Added extra small size utility classes
199
207
 
200
208
  ## 1.2.1 (May 26, 2016)
201
209
 
202
- - Updated style lint to conform to version 4.5 where some rules were deprecated and renamed.
210
+ - Updated style lint to conform to version 4.5 where some rules were deprecated and renamed.
203
211
 
204
212
  ## 1.2.0 (March 8, 2016)
205
213
 
206
- - Updated style lint max lines rule
214
+ - Updated style lint max lines rule
207
215
 
208
216
  ## 1.1.0 (February 8, 2016)
209
217
 
210
- - Added: visual test styles and tests for components
218
+ - Added: visual test styles and tests for components
211
219
 
212
220
  ## 1.0.0 (February 2, 2016)
213
221
 
214
- - Initial 1.0 release
222
+ - Initial 1.0 release
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "cacao-css",
3
3
  "description": "A set of composable CSS modules that provide a solid foundation for starting a new project.",
4
- "version": "3.19.0",
4
+ "version": "3.21.0",
5
5
  "main": "gulfile.js",
6
6
  "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
7
7
  "license": "MIT",
@@ -87,6 +87,16 @@ body {
87
87
  line-height: var(--base-typography-lineHeight);
88
88
  }
89
89
 
90
+ /**
91
+ * The Normalize libray sets the font weight to "bolder". This works in most cases if the
92
+ * element's font weight is 400. But if it's 300 then "bolder" ends up being 400, which is
93
+ * usually not desired. This ensures that bold is always bold.
94
+ */
95
+ b,
96
+ strong {
97
+ font-weight: 700;
98
+ }
99
+
90
100
  /**
91
101
  * Consistent spacing on block elements
92
102
  */
@@ -108,8 +118,9 @@ ul {
108
118
 
109
119
  blockquote {
110
120
  border-left: 10px solid #ccc;
111
- margin: var(--base-typography-spacing) calc(var(--base-typography-spacing) * .7);
112
- padding: .5em 1em;
121
+ margin: var(--base-typography-spacing)
122
+ calc(var(--base-typography-spacing) * 0.7);
123
+ padding: 0.5em 1em;
113
124
  position: relative;
114
125
  }
115
126
 
@@ -130,22 +141,28 @@ a {
130
141
  text-decoration: var(--base-typography-link-decoration);
131
142
  }
132
143
 
133
- a:hover {
134
- color: var(--base-typography-link-colorHover);
135
- text-decoration: var(--base-typography-link-decorationHover);
144
+ @media (hover: hover) and (pointer: fine) {
145
+ a:hover {
146
+ color: var(--base-typography-link-colorHover);
147
+ text-decoration: var(--base-typography-link-decorationHover);
148
+ }
136
149
  }
137
150
 
138
151
  /**
139
152
  * Default styling for telephone links to not look like links
140
153
  */
141
- a[href^=tel],
142
- a[href^=tel]:active,
143
- a[href^=tel]:focus,
144
- a[href^=tel]:hover {
154
+ a[href^="tel"] {
145
155
  color: inherit;
146
156
  text-decoration: none;
147
157
  }
148
158
 
159
+ @media (hover: hover) and (pointer: fine) {
160
+ a[href^="tel"]:hover {
161
+ color: inherit;
162
+ text-decoration: none;
163
+ }
164
+ }
165
+
149
166
  /**
150
167
  * Lists
151
168
  */
@@ -209,7 +226,8 @@ h6 {
209
226
  font-family: var(--base-typography-heading-fontFamily);
210
227
  font-weight: var(--base-typography-heading-fontWeight);
211
228
  letter-spacing: var(--base-typography-heading-letterSpacing);
212
- margin: calc(var(--base-typography-spacing) * 1.2) 0 calc(var(--base-typography-spacing) / 3);
229
+ margin: calc(var(--base-typography-spacing) * 1.2) 0
230
+ calc(var(--base-typography-spacing) / 3);
213
231
  }
214
232
 
215
233
  h2:first-child,
@@ -51,7 +51,9 @@
51
51
  text-decoration: none;
52
52
  }
53
53
 
54
- .FooterNav-link:hover {
55
- color: var(--FooterNav-link-colorHover);
56
- text-decoration: underline;
54
+ @media (hover: hover) and (pointer: fine) {
55
+ .FooterNav-link:hover {
56
+ color: var(--FooterNav-link-colorHover);
57
+ text-decoration: underline;
58
+ }
57
59
  }
@@ -52,8 +52,10 @@
52
52
  text-decoration: none !important;
53
53
  }
54
54
 
55
- .u-linkSubtle:hover {
56
- text-decoration: underline !important;
55
+ @media (hover: hover) and (pointer: fine) {
56
+ .u-linkSubtle:hover {
57
+ text-decoration: underline !important;
58
+ }
57
59
  }
58
60
 
59
61
  /**