sass-apca 1.1.1 → 1.2.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 (3) hide show
  1. package/README.md +18 -0
  2. package/apca.scss +32 -12
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -50,6 +50,24 @@ body {
50
50
  }
51
51
  ```
52
52
 
53
+ ### Warning levels configuration
54
+
55
+ Control the verbosity of the warnings when loading the module, default is `90`.
56
+
57
+ To *only warn for critical issues* (e.g., lower than 45):
58
+ ```scss
59
+ @use "sass-apca/apca" with (
60
+ $warning-threshold: 45
61
+ );
62
+ ```
63
+
64
+ To *disable all warnings*:
65
+ ```scss
66
+ @use "sass-apca/apca" with (
67
+ $warning-threshold: 0
68
+ );
69
+ ```
70
+
53
71
  ## About contrast levels
54
72
  These general levels are appropriate for use by themselves, without the need to reference a lookup table. APCA reports contrast as an L<sup>c</sup> value (lightness contrast) from L<sup>c</sup> 0 to L<sup>c</sup> 105+. For accessibility, consider L<sup>c</sup> 15 the point of invisibility for many users, and L<sup>c</sup> 90 is preferred for body text. [^2]
55
73
 
package/apca.scss CHANGED
@@ -10,6 +10,24 @@
10
10
  //
11
11
  // -------------------
12
12
 
13
+ /**
14
+ * Configuration: Warning Threshold
15
+ *
16
+ * Defines the APCA contrast level below which the library will output warnings.
17
+ * The default is 90, which is the preferred level for fluent body text.
18
+ *
19
+ * To disable all warnings, set this value to 0.
20
+ * To only receive warnings for critical contrast issues, set this to a lower value (e.g., 30 or 45).
21
+ *
22
+ * @example
23
+ * ```
24
+ * @use "sass-apca" with (
25
+ * $warning-threshold: 0
26
+ * );
27
+ * ```
28
+ */
29
+ $warning-threshold: 90 !default;
30
+
13
31
  // Powercurve exponents
14
32
  $_Strc: 2.4;
15
33
  $_Ntx: 0.57;
@@ -127,18 +145,20 @@ $_blueMultiplier: 0.072175;
127
145
  $bestContrast: $lightContrast
128
146
  }
129
147
 
130
- @if ($bestContrast < 15) {
131
- @warn "Your best contrast is #{$bestContrast}. This is lower than 15, the absolute minimum for any non-text that needs to be discernible and differentiable, and is no less than 6px in its smallest dimension. This may include disabled large buttons. Designers should treat anything below this level as invisible, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.";
132
- } @else if ($bestContrast < 30) {
133
- @warn "Your best contrast is #{$bestContrast}. This is lower than 30, the absolute minimum for any text not listed above. This includes placeholder text and disabled element text. This is also the minimum for large/solid semantic & understandable non-text elements.";
134
- } @else if ($bestContrast < 45) {
135
- @warn "Your best contrast is #{$bestContrast}. This is lower than 45, the minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines. This is also the minimum for pictograms with fine details.";
136
- } @else if ($bestContrast < 60) {
137
- @warn "Your best contrast is #{$bestContrast}. This is lower than 60, the minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: 24px normal weight (400) or 16px/700 (bold). These values based on the reference font Helvetica.";
138
- } @else if ($bestContrast < 75) {
139
- @warn "Your best contrast is #{$bestContrast}. This is lower than 75, the minimum level for columns of body text with a font no smaller than 18px/400. Lc 75 should be considered a minimum for text where readability is important.";
140
- } @else if ($bestContrast < 90) {
141
- @warn "Your best contrast is #{$bestContrast}. This is lower than 90, the preferred level for fluent text and columns of body text with a font no smaller than 14px/weight 400 (normal).";
148
+ @if ($bestContrast < $warning-threshold) {
149
+ @if ($bestContrast < 15) {
150
+ @warn "Your best contrast is #{$bestContrast}. This is lower than 15, the absolute minimum for any non-text that needs to be discernible and differentiable, and is no less than 6px in its smallest dimension. This may include disabled large buttons. Designers should treat anything below this level as invisible, as it will not be visible for many users. This minimum level should be avoided for any items important to the use, understanding, or interaction of the site.";
151
+ } @else if ($bestContrast < 30) {
152
+ @warn "Your best contrast is #{$bestContrast}. This is lower than 30, the absolute minimum for any text not listed above. This includes placeholder text and disabled element text. This is also the minimum for large/solid semantic & understandable non-text elements.";
153
+ } @else if ($bestContrast < 45) {
154
+ @warn "Your best contrast is #{$bestContrast}. This is lower than 45, the minimum for larger, heavier text (36px normal weight or 24px bold) such as headlines. This is also the minimum for pictograms with fine details.";
155
+ } @else if ($bestContrast < 60) {
156
+ @warn "Your best contrast is #{$bestContrast}. This is lower than 60, the minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read. The minimums: 24px normal weight (400) or 16px/700 (bold). These values based on the reference font Helvetica.";
157
+ } @else if ($bestContrast < 75) {
158
+ @warn "Your best contrast is #{$bestContrast}. This is lower than 75, the minimum level for columns of body text with a font no smaller than 18px/400. Lc 75 should be considered a minimum for text where readability is important.";
159
+ } @else if ($bestContrast < 90) {
160
+ @warn "Your best contrast is #{$bestContrast}. This is lower than 90, the preferred level for fluent text and columns of body text with a font no smaller than 14px/weight 400 (normal).";
161
+ }
142
162
  }
143
163
 
144
164
  @return $contrastColor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-apca",
3
- "version": "1.1.1",
3
+ "version": "1.2.0",
4
4
  "description": "Sass implementation of the [Accessible Perceptual Contrast Algorithm (APCA)](https://git.apcacontrast.com/) for the WCAG 3.0 specification.",
5
5
  "keywords": [
6
6
  "sass",
@@ -29,7 +29,7 @@
29
29
  "devDependencies": {
30
30
  "@semantic-release/changelog": "6.0.3",
31
31
  "@semantic-release/git": "10.0.1",
32
- "sass": "1.81.0",
33
- "semantic-release": "24.2.0"
32
+ "sass": "1.98.0",
33
+ "semantic-release": "25.0.1"
34
34
  }
35
35
  }