sass-apca 1.0.0 → 1.0.1
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/README.md +2 -2
- package/apca.scss +3 -12
- package/package.json +12 -5
- package/.github/dependabot.yml +0 -11
- package/.github/workflows/release.yml +0 -25
- package/.releaserc +0 -5
- package/test.scss +0 -35
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ npm install sass-apca
|
|
|
13
13
|
|
|
14
14
|
### Contrast
|
|
15
15
|
|
|
16
|
-
APCA reports lightness contrast as an L<sup>c</sup> value from L<sup>c</sup> 0 to L<sup>c</sup> 106 for dark text on a light background, and L<sup>c</sup> 0 to L<sup>c</sup> -108 for light text on a dark background (dark mode). The minus sign merely indicates negative contrast, which means light text on a dark background[^1]
|
|
16
|
+
APCA reports lightness contrast as an L<sup>c</sup> value from L<sup>c</sup> 0 to L<sup>c</sup> 106 for dark text on a light background, and L<sup>c</sup> 0 to L<sup>c</sup> -108 for light text on a dark background (dark mode). The minus sign merely indicates negative contrast, which means light text on a dark background. [^1]
|
|
17
17
|
|
|
18
18
|
| Parameter | Type | Description |
|
|
19
19
|
|:--- |:--- |:--- |
|
|
@@ -28,7 +28,7 @@ $contrast-white-on-black: apca.contrast(white, black); // -107.8847261151
|
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
## About
|
|
31
|
-
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]
|
|
31
|
+
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]
|
|
32
32
|
|
|
33
33
|
- **L<sup>c</sup> 90** • Preferred level for fluent text and columns of body text with a font no smaller than 14px/weight 400 (normal).
|
|
34
34
|
- **L<sup>c</sup> 75** • The minimum level for columns of body text with a font no smaller than 18px/400. L<sup>c</sup> 75 should be considered a minimum for text where readability is important.
|
package/apca.scss
CHANGED
|
@@ -30,22 +30,13 @@ $_greenMultiplier: 0.7151522;
|
|
|
30
30
|
$_blueMultiplier: 0.072175;
|
|
31
31
|
|
|
32
32
|
@function _luminance($color) {
|
|
33
|
-
// The floating point precision is poor so white would return 1.000001
|
|
34
|
-
@if ($color == white) {
|
|
35
|
-
@return 1;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@if ($color == black) {
|
|
39
|
-
@return 0;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
33
|
$red: color.red($color);
|
|
43
34
|
$green: color.green($color);
|
|
44
35
|
$blue: color.blue($color);
|
|
45
36
|
|
|
46
|
-
$redLuminance: math.pow($red
|
|
47
|
-
$greenLuminance: math.pow($green
|
|
48
|
-
$blueLuminance: math.pow($blue
|
|
37
|
+
$redLuminance: math.pow(math.div($red, 255), $_Strc) * $_redMultiplier;
|
|
38
|
+
$greenLuminance: math.pow(math.div($green, 255), $_Strc) * $_greenMultiplier;
|
|
39
|
+
$blueLuminance: math.pow(math.div($blue, 255), $_Strc) * $_blueMultiplier;
|
|
49
40
|
|
|
50
41
|
@return $redLuminance + $greenLuminance + $blueLuminance;
|
|
51
42
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sass-apca",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
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",
|
|
@@ -19,10 +19,17 @@
|
|
|
19
19
|
},
|
|
20
20
|
"bugs": "https://github.com/gfellerph/sass-apca/issues",
|
|
21
21
|
"sass": "./apca.scss",
|
|
22
|
-
"
|
|
23
|
-
"
|
|
22
|
+
"files": [
|
|
23
|
+
"./apca.scss"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"test": "sass test.scss",
|
|
27
|
+
"semantic-release": "semantic-release"
|
|
24
28
|
},
|
|
25
|
-
"
|
|
26
|
-
"
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@semantic-release/changelog": "6.0.3",
|
|
31
|
+
"@semantic-release/git": "10.0.1",
|
|
32
|
+
"sass": "1.60.0",
|
|
33
|
+
"semantic-release": "21.0.0"
|
|
27
34
|
}
|
|
28
35
|
}
|
package/.github/dependabot.yml
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
# To get started with Dependabot version updates, you'll need to specify which
|
|
2
|
-
# package ecosystems to update and where the package manifests are located.
|
|
3
|
-
# Please see the documentation for all configuration options:
|
|
4
|
-
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
|
5
|
-
|
|
6
|
-
version: 2
|
|
7
|
-
updates:
|
|
8
|
-
- package-ecosystem: "npm" # See documentation for possible values
|
|
9
|
-
directory: "/" # Location of package manifests
|
|
10
|
-
schedule:
|
|
11
|
-
interval: "weekly"
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
name: Release
|
|
2
|
-
on:
|
|
3
|
-
push:
|
|
4
|
-
branches:
|
|
5
|
-
- main
|
|
6
|
-
jobs:
|
|
7
|
-
release:
|
|
8
|
-
name: Release
|
|
9
|
-
runs-on: ubuntu-latest
|
|
10
|
-
steps:
|
|
11
|
-
- name: Checkout
|
|
12
|
-
uses: actions/checkout@v3
|
|
13
|
-
with:
|
|
14
|
-
fetch-depth: 0
|
|
15
|
-
- name: Setup Node.js
|
|
16
|
-
uses: actions/setup-node@v3
|
|
17
|
-
with:
|
|
18
|
-
node-version: "lts/*"
|
|
19
|
-
- name: Install dependencies
|
|
20
|
-
run: npm ci
|
|
21
|
-
- name: Release
|
|
22
|
-
env:
|
|
23
|
-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
24
|
-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
25
|
-
run: npx semantic-release
|
package/test.scss
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
@use './apca';
|
|
2
|
-
|
|
3
|
-
/* tests */
|
|
4
|
-
luminances {
|
|
5
|
-
--red-luminance: apca.luminance(red);
|
|
6
|
-
--green-luminance: apca.luminance(green);
|
|
7
|
-
--blue-luminance: apca.luminance(blue);
|
|
8
|
-
|
|
9
|
-
--yellow-luminance: apca.luminance(yellow);
|
|
10
|
-
--brown-luminance: apca.luminance(brown);
|
|
11
|
-
--violet-luminance: apca.luminance(violet);
|
|
12
|
-
|
|
13
|
-
--white-luminance: apca.luminance(white);
|
|
14
|
-
--black-luminance: apca.luminance(black);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
softClip {
|
|
18
|
-
--black: apca.softClip(apca.luminance(black));
|
|
19
|
-
--white: apca.softClip(apca.luminance(white));
|
|
20
|
-
--brown: apca.softClip(apca.luminance(brown));
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
polarity {
|
|
24
|
-
--black-on-white: apca.polarity(black, white);
|
|
25
|
-
--white-on-black: apca.polarity(white, black);
|
|
26
|
-
--red-on-green: apca.polarity(red, green);
|
|
27
|
-
--green-on-red: apca.polarity(green, red);
|
|
28
|
-
--yellow-on-white: apca.polarity(#fc0, white);
|
|
29
|
-
--white-on-yellow: apca.polarity(white, #fc0);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
contrast {
|
|
33
|
-
--black-on-white: apca.contrast(black, white);
|
|
34
|
-
--white-on-black: apca.contrast(white, black);
|
|
35
|
-
}
|