Merge pull request #204 from PublicisSapient/ticket/153-enforce-rem-e…

…m-use (#153) Enforce using rems/ems in stylesheets
PublicisSapient · Oct 9, 2024 · 3313377 · 3313377
2 parents d0a9384 + 930cb6e
commit 3313377
Show file tree

Hide file tree

Showing 41 changed files with 138 additions and 370 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/bin/enforceRemFontSize.sh b/bin/enforceRemFontSize.sh
@@ -0,0 +1,21 @@
+#!/bin/bash
+
+i=`find css -name '*.css' -print`
+
+# echo $i
+OUTPUT=`grep -n 'font-size:[^\s\S]*[^@]px;' $i`
+# grep -b 'line-height:[^\s\S]*[^0-9];' $i
+RET="$?"
+
+if [ "$RET" = "0" ]
+then
+    echo "The following CSS files must be changed so they don't use px units."
+    echo "Please ensure you change the corresponding LESS files to use the @px mixin."
+    echo "(e.g. instead of using 'font-size: 12px;', use 'font-size: 12 / @px;')."
+    echo
+    echo "$OUTPUT"
+    echo
+    exit 1;
+fi
+
+exit 0
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/checkbox copy.css b/css/checkbox copy.css
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/input-mask-example copy.css b/css/input-mask-example copy.css
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;
 }