(#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
PublicisSapient · Aug 17, 2024 · ea9cb3a · ea9cb3a
1 parent 0192867
commit ea9cb3a
Show file tree

Hide file tree

Showing 16 changed files with 155 additions and 152 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -16,6 +16,9 @@
         "declaration-block-no-duplicate-properties": null,
         "declaration-block-no-redundant-longhand-properties": null,
         "declaration-block-no-shorthand-property-overrides": null,
+        "declaration-property-unit-allowed-list": {
+            "font-size": ["em", "rem"]
+        },
         "font-family-name-quotes": null,
         "font-family-no-missing-generic-family-keyword": null,
         "function-name-case": null,

diff --git a/less/accessible-text-svg.less b/less/accessible-text-svg.less
@@ -10,27 +10,27 @@ body {
 
     &__text {
         fill: black;
-        stroke-width: 2px;
-        font-size: calc(54px * var(--text-zoom-factor));
+        stroke-width: 0.125rem;
+        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;
         line-height: 1.5;
     }
 
     &__svgTextPath2 {
-        transform: translateY(-50px);
+        transform: translateY(-3.125rem);
     }
 
     &__svg {
         display: block;
         position: absolute;
         z-index: 2;
-        transform: translateY(-4px);
+        transform: translateY(-0.25rem);
     }
 
     &__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;
@@ -40,7 +40,7 @@ body {
 
     &__shape-container {
         position: relative;
-        width: 1024px;
+        width: 64rem;
         height: 62.7vw;
         overflow: hidden;
     }
@@ -60,10 +60,10 @@ body {
     &__control {
         position: absolute;
         display: block;
-        width: 200px;
-        margin: 20px auto;
+        width: 12.5rem;
+        margin: 1.25rem auto;
         cursor: pointer;
-        padding: 10px;
+        padding: 0.625rem;
         top: 2vw;
         right: 4vw;
         z-index: 2;

diff --git a/less/chart.less b/less/chart.less
@@ -20,30 +20,30 @@ body {
     }
 
     table {
-        margin: 20px auto 0 auto;
+        margin: 1.25rem auto 0 auto;
         border: solid 1px black;
         width: initial;
     }
 
     svg {
-        font-size: 16px;
+        font-size: 1rem;
     }
 
     .tick text {
-        font-size: calc(10px * var(--text-zoom-factor));
+        font-size: calc(0.625rem * var(--text-zoom-factor));
     }
 }
 
 #bar-chart {
-    height: 400px;
+    height: 25rem;
 
     .ct-horizontal.ct-label {
         display: block;
-        padding-right: 10px;
+        padding-right: 0.625rem;
         white-space: nowrap;
         transform-origin: center right;
-        transform: translateX(-170px) translateY(-10px) rotate(-35deg);
-        min-width: 200px;
+        transform: translateX(-10.625rem) translateY(-0.625rem) rotate(-35deg);
+        min-width: 12.5rem;
         text-align: right;
     }
 
@@ -53,11 +53,11 @@ body {
     }
 
     &.bar-chart--initialized {
-        margin-bottom: 55px;
+        margin-bottom: 3.4375rem;
 
         svg {
             overflow: visible;
-            padding-bottom: 200px;
+            padding-bottom: 12.5rem;
         }
     }
 }

diff --git a/less/combobox.less b/less/combobox.less
@@ -7,22 +7,22 @@
         position: relative;
         width: 30em;
         max-width: 100%;
-        font-size: 100%;
+        font-size: 1em;
         font-family: sans-serif;
 
         @media @desktop {
-            max-width: 400px;
+            max-width: 25rem;
         }
     }
 
     &__group {
-        padding: 10px;
+        padding: 0.625rem;
     }
 
     &__reset-button {
         position: absolute;
         z-index: 1;
-        right: 5px;
+        right: 0.3125rem;
         top: 0;
         bottom: 0;
         padding: 0;
@@ -46,7 +46,7 @@
 
     input[role="combobox"] {
         position: relative;
-        font-size: 12px;
+        font-size: 0.75rem;
         height: 1.5em;
         width: 100%; /* of pc */
         border: solid 1px #000;
@@ -76,15 +76,15 @@
         width: 100%;
         box-sizing: border-box;
         z-index: 2;
-        max-height: 200px;
+        max-height: 12.5rem;
         overflow: auto;
     }
     [role="option"] {
         display: block;
         margin: 0;
         padding: 0.3em 0.5em;
         list-style: none;
-        font-size: 12px;
+        font-size: 0.75rem;
         cursor: pointer;
     }
     [role="option"]:hover {

diff --git a/less/dialog-html5.less b/less/dialog-html5.less
@@ -27,8 +27,8 @@
 
     &__button--close {
         position: absolute;
-        top: -20px;
-        right: -20px;
+        top: -1.25rem;
+        right: -1.25rem;
         .vendor(appearance, none);
         background: none;
         border: none;
@@ -37,8 +37,8 @@
         & {
             img {
                 border: 0;
-                width: 38px;
-                height: 38px;
+                width: 2.375rem;
+                height: 2.375rem;
             }
         }
     }
@@ -70,5 +70,5 @@ dialog {
     position: absolute;
     left: calc(50% - 27vmin);
     top: 22vmin;
-    font-size: 2.5vmin;
+    font-size: 2.5rem;
 }
diff --git a/less/enable-listbox.less b/less/enable-listbox.less
@@ -11,25 +11,25 @@
 }
 
 .enable-listbox {
-    padding: 20px;
+    padding: 1.25rem;
     background: #eee;
     border: 1px solid #aaa;
 
     &__left-area,
     &__right-area {
         box-sizing: border-box;
         display: inline-block;
-        font-size: 14px;
+        font-size: 0.875rem;
         vertical-align: top;
         width: 50%;
     }
 
     &__left-area {
-        padding-right: 10px;
+        padding-right: 0.625rem;
     }
 
     &__right-area {
-        padding-left: 10px;
+        padding-left: 0.625rem;
     }
 
     [role="listbox"] {
@@ -68,11 +68,11 @@
     }
 
     button {
-        font-size: 16px;
+        font-size: 1rem;
         border-radius: 0;
-        font-size: 16px;
+        font-size: 1rem;
         text-align: left;
-        padding: 5px 10px;
+        padding: 0.3125rem 0.625rem;
         width: (150 / @px);
         position: relative;
 

diff --git a/less/grid.less b/less/grid.less
@@ -106,17 +106,17 @@ table.data thead,
 table.index thead,
 table.data tbody,
 table.index tbody {
-    border-bottom: 2px solid;
+    border-bottom: 0.125rem solid;
 }
 
 table.data colgroup,
 table.index colgroup {
-    border-left: 2px solid;
+    border-left: 0.125rem solid;
 }
 
 table.data tbody th:first-child,
 table.index tbody th:first-child {
-    border-right: 2px solid;
+    border-right: 0.125rem solid;
     border-top: 1px solid silver;
     padding-right: 1em;
 }
@@ -195,14 +195,14 @@ table.data img {
     background-image: data-uri("../imgs/pencil-icon.png");
     background-position: center;
     background-repeat: no-repeat;
-    background-size: 44px;
+    background-size: 2.75rem;
     content: " ";
-    height: 17px;
+    height: 1.0625rem;
     opacity: 0.6;
     position: absolute;
-    right: -24px;
+    right: -1.5rem;
     top: 0px;
-    width: 20px;
+    width: 1.25rem;
 }
 
 .edit-text-button:hover,
@@ -220,15 +220,15 @@ table.data img {
 [role="grid"] [tabindex="0"]:focus {
     outline: @focus-color;
     outline-style: dotted;
-    outline-width: 3px;
+    outline-width: 0.1875rem;
 }
 
 #arrow-keys-indicator {
-    bottom: 10px;
+    bottom: 0.625rem;
     left: 0;
     position: fixed;
-    height: 65px;
-    width: 85px;
+    height: 4.0625rem;
+    width: 5.3125rem;
     background: data-uri("../imgs/black_keys.png") no-repeat;
     background-size: contain;
 }
@@ -242,7 +242,7 @@ table.data img {
 /* Menu button */
 button {
     cursor: pointer;
-    font-size: 110%;
+    font-size: 1.1rem;
 }
 
 .menu-wrapper {

diff --git a/less/heading.less b/less/heading.less
@@ -6,51 +6,51 @@ body {
 
 div.heading-example {
     width: 100%;
-    max-width: 960px;
-    padding: 40px;
-    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
+    max-width: 60rem;
+    padding: 2.5rem;
+    text-shadow: 0 0.125rem 0 rgba(255, 255, 255, 0.7);
 }
 
 div.heading-example p {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.4;
     text-align: justify;
 }
 
 div.heading-example p:nth-of-type(2) {
     -moz-column-count: 2;
-    -moz-column-gap: 20px;
+    -moz-column-gap: 1.25rem;
     -webkit-column-count: 2;
-    -webkit-column-gap: 20px;
+    -webkit-column-gap: 1.25rem;
     -ms-column-count: 2;
-    -ms-column-gap: 20px;
+    -ms-column-gap: 1.25rem;
     -o-column-count: 2;
-    -o-column-gap: 20px;
+    -o-column-gap: 1.25rem;
     column-count: 2;
-    column-gap: 20px;
+    column-gap: 1.25rem;
 }
 
 div.heading-example p:nth-of-type(4) {
     -moz-column-count: 3;
-    -moz-column-gap: 15px;
+    -moz-column-gap: 0.9375rem;
     -o-column-count: 3;
-    -o-column-gap: 15px;
+    -o-column-gap: 0.9375rem;
     -ms-column-count: 3;
-    -ms-column-gap: 15px;
+    -ms-column-gap: 0.9375rem;
     -webkit-column-count: 3;
-    -webkit-column-gap: 15px;
+    -webkit-column-gap: 0.9375rem;
     column-count: 3;
-    column-gap: 15px;
+    column-gap: 0.9375rem;
 }
 
 /* DEMO 1 */
-@h1-size: 36px;
-@h2-size: 33px;
-@h3-size: 30px;
-@h4-size: 25px;
-@h5-size: 22px;
-@h6-size: 18px;
-@h7-size: 18px;
+@h1-size: 2.25rem;
+@h2-size: 2.0625rem;
+@h3-size: 1.875rem;
+@h4-size: 1.5625rem;
+@h5-size: 1.375rem;
+@h6-size: 1.125rem;
+@h7-size: 1.125rem;
 
 div.heading-example {
     h1,
@@ -63,8 +63,8 @@ div.heading-example {
         line-height: 42 * (36 / @h1-size);
         text-transform: uppercase;
         text-shadow:
-            0 2px white,
-            0 3px #777;
+            0 0.125rem white,
+            0 0.1875rem #777;
     }
 
     h2,