cacao-css 6.3.0 → 6.4.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.
Files changed (14) hide show
  1. package/dist/display/2xl/display.css +12 -6
  2. package/dist/display/2xs/display.css +12 -6
  3. package/dist/display/3xl/display.css +12 -6
  4. package/dist/display/3xs/display.css +12 -6
  5. package/dist/display/4xl/display.css +12 -6
  6. package/dist/display/5xl/display.css +12 -6
  7. package/dist/display/display.css +12 -6
  8. package/dist/display/lg/display.css +12 -6
  9. package/dist/display/md/display.css +12 -6
  10. package/dist/display/sm/display.css +12 -6
  11. package/dist/display/xl/display.css +12 -6
  12. package/dist/display/xs/display.css +12 -6
  13. package/dist/media.css +4 -1
  14. package/package.json +1 -1
package/dist/display/2xl/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-2xl) {
6
12
  .flex-2xl {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-2xl {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-2xl {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-2xl {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-2xl {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-2xl {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-2xl {
package/dist/display/2xs/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-2xs) {
6
12
  .flex-2xs {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-2xs {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-2xs {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-2xs {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-2xs {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-2xs {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-2xs {
package/dist/display/3xl/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-3xl) {
6
12
  .flex-3xl {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-3xl {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-3xl {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-3xl {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-3xl {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-3xl {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-3xl {
package/dist/display/3xs/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-3xs) {
6
12
  .flex-3xs {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-3xs {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-3xs {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-3xs {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-3xs {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-3xs {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-3xs {
package/dist/display/4xl/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-4xl) {
6
12
  .flex-4xl {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-4xl {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-4xl {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-4xl {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-4xl {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-4xl {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-4xl {
package/dist/display/5xl/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-5xl) {
6
12
  .flex-5xl {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-5xl {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-5xl {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-5xl {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-5xl {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-5xl {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-5xl {
package/dist/display/display.css CHANGED
@@ -1,29 +1,35 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  .flex {
6
- display: flex;
12
+ display: flex !important;
7
13
  }
8
14
 
9
15
  .inline-flex {
10
- display: inline-flex;
16
+ display: inline-flex !important;
11
17
  }
12
18
 
13
19
  .block {
14
- display: block;
20
+ display: block !important;
15
21
  }
16
22
 
17
23
  .inline {
18
- display: inline;
24
+ display: inline !important;
19
25
  }
20
26
 
21
27
  .inline-block {
22
- display: inline-block;
28
+ display: inline-block !important;
23
29
  }
24
30
 
25
31
  .hidden {
26
- display: none;
32
+ display: none !important;
27
33
  }
28
34
 
29
35
  .visually-hidden {
package/dist/display/lg/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-lg) {
6
12
  .flex-lg {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-lg {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-lg {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-lg {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-lg {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-lg {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-lg {
package/dist/display/md/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-md) {
6
12
  .flex-md {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-md {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-md {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-md {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-md {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-md {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-md {
package/dist/display/sm/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-sm) {
6
12
  .flex-sm {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-sm {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-sm {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-sm {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-sm {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-sm {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-sm {
package/dist/display/xl/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-xl) {
6
12
  .flex-xl {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-xl {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-xl {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-xl {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-xl {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-xl {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-xl {
package/dist/display/xs/display.css CHANGED
@@ -1,30 +1,36 @@
1
1
  /* =========================================================================== *\
2
2
  Display utilities
3
+
4
+ !important is used to ensure that the utility classes take precedence over
5
+ any other styles that might be applied to the elements. This is one of the
6
+ rare cases where we use !important. Use the media query
7
+ versions if you only need things to be displayed a certain way at a certain
8
+ breakpoints.
3
9
  \* =========================================================================== */
4
10
 
5
11
  @media (--m-xs) {
6
12
  .flex-xs {
7
- display: flex;
13
+ display: flex !important;
8
14
  }
9
15
 
10
16
  .inline-flex-xs {
11
- display: inline-flex;
17
+ display: inline-flex !important;
12
18
  }
13
19
 
14
20
  .block-xs {
15
- display: block;
21
+ display: block !important;
16
22
  }
17
23
 
18
24
  .inline-xs {
19
- display: inline;
25
+ display: inline !important;
20
26
  }
21
27
 
22
28
  .inline-block-xs {
23
- display: inline-block;
29
+ display: inline-block !important;
24
30
  }
25
31
 
26
32
  .hidden-xs {
27
- display: none;
33
+ display: none !important;
28
34
  }
29
35
 
30
36
  .visually-hidden-xs {
package/dist/media.css CHANGED
@@ -51,11 +51,14 @@
51
51
  * - And our own usage in building websites
52
52
  *
53
53
  * Cacao is a mobile-first system.
54
- * We don't use min-width or max-width because we follow Stylelint's media-feature-rante-notation rule.
54
+ * We don't use min-width or max-width because we follow Stylelint's media-feature-range-notation rule.
55
55
  * https://stylelint.io/user-guide/rules/media-feature-range-notation/
56
56
  *
57
57
  * We use pixels instead of ems because that is the convention and it helps prevent a Safari bug with how they calculate ems (i.e. they use font-size + zoom level)
58
58
  * https://cgamesplay.com/post/2023/05/19/stop-using-em-in-media-queries/
59
+ *
60
+ * https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ is another viewpoint on this and considers users increacing the default
61
+ * font size in their browser settings. Need to explore this more. 10/26/2024
59
62
  */
60
63
 
61
64
  /* 3xs */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "cacao-css",
3
3
  "description": "A set of composable CSS utilities that provide a solid foundation for website projects.",
4
- "version": "6.3.0",
4
+ "version": "6.4.0",
5
5
  "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
6
6
  "license": "MIT",
7
7
  "repository": {