(#153) Enforce using rems/ems in stylesheets

Closes #153 * Added and enabled `stylelint-rem-over-px` * Fixed console errors * Removed `stylelint-rem-over-px` for `stylelint`'s `declaration-property-unit-allowed-list` rule which allows for greater flexibility * Cleaned up console errors * Separated `stylelint` into it's own task for `lint-staged` * Fxied up font-size calculations
PublicisSapient · Sep 12, 2024 · a54f653 · a54f653
1 parent d0a9384
commit a54f653
Show file tree

Hide file tree

Showing 37 changed files with 116 additions and 94 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,7 +1,12 @@
 {
     "customSyntax": "postcss-less",
     "extends": "stylelint-config-standard",
-    "ignoreFiles": ["**/*.js"],
+    "ignoreFiles": [
+        "**/*.js",
+        "enable-node-libs/**/*.css",
+        "js/out/**/*.css",
+        "js/enable-libs/**/*.css"
+    ],
     "rules": {
         "alpha-value-notation": null,
         "at-rule-empty-line-before": null,
@@ -16,18 +21,26 @@
         "declaration-block-no-duplicate-properties": null,
         "declaration-block-no-redundant-longhand-properties": null,
         "declaration-block-no-shorthand-property-overrides": null,
+        "declaration-block-single-line-max-declarations": null,
+        "declaration-property-unit-allowed-list": {
+            "font-size": ["em", "rem", "vmin", "vmax", "vw", "vh"]
+        },
         "font-family-name-quotes": null,
         "font-family-no-missing-generic-family-keyword": null,
+        "function-calc-no-unspaced-operator": null,
         "function-name-case": null,
         "function-no-unknown": null,
         "function-url-quotes": null,
+        "hue-degree-notation": null,
         "import-notation": null,
         "keyframes-name-pattern": null,
         "length-zero-no-unit": null,
         "media-feature-range-notation": null,
         "media-query-no-invalid": null,
+        "no-empty-source": null,
         "no-descending-specificity": null,
         "no-duplicate-selectors": null,
+        "number-max-precision": null,
         "property-no-unknown": null,
         "property-no-vendor-prefix": null,
         "rule-empty-line-before": null,

diff --git a/css/accessible-text-svg.css b/css/accessible-text-svg.css
@@ -7,7 +7,7 @@ body {
 #accessible-text-svg-demo__text {
   fill: black;
   stroke-width: 2px;
-  font-size: calc(54px * var(--text-zoom-factor));
+  font-size: calc(3.375rem * var(--text-zoom-factor));
   font-family: "Georgia", "Times New Roman", serif;
   panose-1: 0 0 0 0 0 0 0 0 0 0;
   font-style: italic;
@@ -23,7 +23,7 @@ body {
   transform: translateY(-4px);
 }
 #accessible-text-svg-demo__intro-text {
-  font-size: calc(54px * var(--text-zoom-factor));
+  font-size: calc(3.375rem * var(--text-zoom-factor));
   z-index: 2;
   color: black;
   font-family: "Georgia", "Times New Roman", serif;
@@ -41,7 +41,7 @@ body {
   width: 100%;
 }
 #accessible-text-svg-demo__roller-coaster-image {
-  left: 0px;
+  left: 0;
   position: absolute;
   top: 0;
   z-index: 1;

diff --git a/css/chart.css b/css/chart.css
@@ -19,10 +19,10 @@ body {
   width: initial;
 }
 .chart-example svg {
-  font-size: 16px;
+  font-size: 1rem;
 }
 .chart-example .tick text {
-  font-size: calc(10px * var(--text-zoom-factor));
+  font-size: calc(0.625rem * var(--text-zoom-factor));
 }
 #bar-chart {
   height: 400px;

diff --git a/css/combobox.css b/css/combobox.css
@@ -4,7 +4,7 @@
   position: relative;
   width: 30em;
   max-width: 100%;
-  font-size: 100%;
+  font-size: 1rem;
   font-family: sans-serif;
 }
 @media only screen and (min-width: 960px) {
@@ -42,7 +42,7 @@
 }
 .enable-combobox input[role="combobox"] {
   position: relative;
-  font-size: 12px;
+  font-size: 0.75rem;
   height: 1.5em;
   width: 100%;
   /* of pc */
@@ -80,7 +80,7 @@
   margin: 0;
   padding: 0.3em 0.5em;
   list-style: none;
-  font-size: 12px;
+  font-size: 0.75rem;
   cursor: pointer;
 }
 .enable-combobox [role="option"]:hover {

diff --git a/css/combobox__improved.css b/css/combobox__improved.css
@@ -3,7 +3,7 @@
   position: relative;
   width: 30em;
   max-width: 100%;
-  font-size: 100%;
+  font-size: 1rem;
   font-family: sans-serif;
 }
 @media only screen and (min-width: 960px) {
@@ -41,7 +41,7 @@
 }
 .enable-combobox input[role="combobox"] {
   position: relative;
-  font-size: 12px;
+  font-size: 0.75rem;
   height: 1.5em;
   width: 100%;
   /* of pc */
@@ -80,7 +80,7 @@
   margin: 0;
   padding: 0.3em 0.5em;
   list-style: none;
-  font-size: 12px;
+  font-size: 0.75rem;
   cursor: pointer;
 }
 .enable-combobox [role="option"]:hover {

diff --git a/css/enable-listbox.css b/css/enable-listbox.css
@@ -70,7 +70,7 @@ fieldset .legend,
 .enable-listbox__right-area {
   box-sizing: border-box;
   display: inline-block;
-  font-size: 14px;
+  font-size: 0.875rem;
   vertical-align: top;
   width: 50%;
 }
@@ -122,7 +122,7 @@ fieldset .legend,
 }
 .enable-listbox button {
   border-radius: 0;
-  font-size: 16px;
+  font-size: 1rem;
   text-align: left;
   padding: 5px 10px;
   width: 9.375rem;

diff --git a/css/grid.css b/css/grid.css
@@ -204,7 +204,7 @@ table.data img {
 /* Menu button */
 button {
   cursor: pointer;
-  font-size: 110%;
+  font-size: 1.1rem;
 }
 .menu-wrapper {
   position: relative;

diff --git a/css/heading.css b/css/heading.css
@@ -8,7 +8,7 @@ div.heading-example {
   text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
 }
 div.heading-example p {
-  font-size: 16px;
+  font-size: 1rem;
   line-height: 1.4;
   text-align: justify;
 }
@@ -43,7 +43,7 @@ div.heading-example [role="heading"][aria-level="1"] {
   color: #343434;
   font-weight: normal;
   font-family: "Ultra", sans-serif;
-  font-size: 36px;
+  font-size: 2.25rem;
   line-height: 42px;
   text-transform: uppercase;
   text-shadow: 0 2px white, 0 3px #777;
@@ -59,13 +59,13 @@ div.heading-example [role="heading"][aria-level="5"] {
 }
 div.heading-example h2,
 div.heading-example [role="heading"][aria-level="2"] {
-  font-size: 33px;
+  font-size: 2.0625rem;
   line-height: 36.36363636px;
 }
 div.heading-example h5,
 div.heading-example [role="heading"][aria-level="5"] {
-  font-size: 22px;
-  line-height: 54.54545455px;
+  font-size: 1.375rem;
+  line-height: 872.72727273rem;
 }
 div.heading-example h3,
 div.heading-example h6,
@@ -81,13 +81,13 @@ div.heading-example [role="heading"][aria-level="6"] {
 }
 div.heading-example h3,
 div.heading-example [role="heading"][aria-level="3"] {
-  font-size: 30px;
-  line-height: 29.33333333px;
+  font-size: 1.875rem;
+  line-height: 469.33333333rem;
 }
 div.heading-example h6,
 div.heading-example [role="heading"][aria-level="6"] {
-  font-size: 18px;
-  line-height: 48.88888889px;
+  font-size: 1.125rem;
+  line-height: 782.22222222rem;
 }
 div.heading-example h4,
 div.heading-example [role="heading"][aria-level="7"] {
@@ -98,10 +98,10 @@ div.heading-example [role="heading"][aria-level="7"] {
 }
 div.heading-example h4,
 div.heading-example [role="heading"][aria-level="4"] {
-  font-size: 25px;
-  line-height: 14.4px;
+  font-size: 1.5625rem;
+  line-height: 230.4rem;
 }
 div.heading-example [role="heading"][aria-level="7"] {
-  font-size: 18px;
-  line-height: 20px;
+  font-size: 1.125rem;
+  line-height: 320rem;
 }
diff --git a/css/menubar.css b/css/menubar.css
@@ -1,7 +1,7 @@
 ul[role="menubar"] {
   margin: 10px;
   padding: 10px;
-  font-size: 110%;
+  font-size: 1.1rem;
   list-style: none;
   background-color: #eeeeee;
 }

diff --git a/css/radiogroup.css b/css/radiogroup.css
@@ -40,7 +40,7 @@
   border-radius: 50%;
 }
 .aria-radio-label {
-  font-size: 18px;
+  font-size: 1.125rem;
   line-height: 1.38888889;
 }
 .enable-radio [type="radio"] {
@@ -71,7 +71,7 @@
   cursor: pointer;
   display: inline-block;
   color: #666;
-  font-size: 18px;
+  font-size: 1.125rem;
   line-height: 1.44444444;
 }
 .enable-radio [type="radio"] + label:before {

diff --git a/css/select-css.css b/css/select-css.css
@@ -1,7 +1,7 @@
 /* class applies to select element itself, not a wrapper element */
 .select-css {
   display: block;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: sans-serif;
   font-weight: 700;
   color: #444;

diff --git a/css/shared/a11y.css b/css/shared/a11y.css
@@ -113,7 +113,7 @@ body {
      * the size set in the iOS Accessibility settings.
      */
   font: -apple-system-body;
-  font-size: 16px;
+  font-size: 1rem;
   /*
      * Put whatever font you want to use here or in the body
 	 * selector of another stylesheet.  The font

diff --git a/css/shared/all.css b/css/shared/all.css
@@ -93,7 +93,7 @@ video {
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
+  font-size: 1rem;
   font: inherit;
   vertical-align: baseline;
 }
@@ -462,7 +462,7 @@ code {
   width: fit-content;
 }
 .screen-reader-table tr td {
-  width: calc((100% -  125px) / 5);
+  width: calc((100% - 125px) / 5);
 }
 .screen-reader-table tr td:first-child {
   width: 125px;
@@ -601,7 +601,7 @@ body {
      * the size set in the iOS Accessibility settings.
      */
   font: -apple-system-body;
-  font-size: 16px;
+  font-size: 1rem;
   /*
      * Put whatever font you want to use here or in the body
 	 * selector of another stylesheet.  The font
@@ -687,11 +687,11 @@ header .search-form,
   text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 3px 3px #000;
 }
 .logo .acme {
-  font-size: 70px;
+  font-size: 4.375rem;
   font-weight: 900;
 }
 .logo .zoltipedia {
-  font-size: 60px;
+  font-size: 3.75rem;
 }
 .logo .corp {
   position: absolute;
@@ -782,7 +782,7 @@ aside h3,
 [role="complementary"] h3 {
   color: #9999ff;
   text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 3px 3px #000;
-  font-size: 40px;
+  font-size: 40rem;
   font-weight: bold;
 }
 footer,

diff --git a/css/shared/defaults.css b/css/shared/defaults.css
@@ -307,7 +307,7 @@ code {
   width: fit-content;
 }
 .screen-reader-table tr td {
-  width: calc((100% -  125px) / 5);
+  width: calc((100% - 125px) / 5);
 }
 .screen-reader-table tr td:first-child {
   width: 125px;

diff --git a/css/shared/landmarks.css b/css/shared/landmarks.css
@@ -93,7 +93,7 @@ video {
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
+  font-size: 1rem;
   font: inherit;
   vertical-align: baseline;
 }
@@ -462,7 +462,7 @@ code {
   width: fit-content;
 }
 .screen-reader-table tr td {
-  width: calc((100% -  125px) / 5);
+  width: calc((100% - 125px) / 5);
 }
 .screen-reader-table tr td:first-child {
   width: 125px;
@@ -601,7 +601,7 @@ body {
      * the size set in the iOS Accessibility settings.
      */
   font: -apple-system-body;
-  font-size: 16px;
+  font-size: 1rem;
   /*
      * Put whatever font you want to use here or in the body
 	 * selector of another stylesheet.  The font
@@ -687,11 +687,11 @@ header .search-form,
   text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 3px 3px #000;
 }
 .logo .acme {
-  font-size: 70px;
+  font-size: 4.375rem;
   font-weight: 900;
 }
 .logo .zoltipedia {
-  font-size: 60px;
+  font-size: 3.75rem;
 }
 .logo .corp {
   position: absolute;
@@ -782,7 +782,7 @@ aside h3,
 [role="complementary"] h3 {
   color: #9999ff;
   text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 3px 3px #000;
-  font-size: 40px;
+  font-size: 2.5rem;
   font-weight: bold;
 }
 footer,

diff --git a/css/shared/reset.css b/css/shared/reset.css
@@ -86,7 +86,7 @@ video {
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
+  font-size: 1rem;
   font: inherit;
   vertical-align: baseline;
 }