From 31d89e3a7454c7ec577eb9ac25c1137de9e34968 Mon Sep 17 00:00:00 2001 From: Oluwaseun Longe Date: Thu, 15 Aug 2024 12:39:12 -0400 Subject: [PATCH 1/2] (#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 --- .stylelintrc.json | 15 ++++++++++++++- css/accessible-text-svg.css | 6 +++--- css/chart.css | 4 ++-- css/combobox.css | 6 +++--- css/combobox__improved.css | 6 +++--- css/enable-listbox.css | 4 ++-- css/grid.css | 2 +- css/heading.css | 16 ++++++++-------- css/menubar.css | 2 +- css/radiogroup.css | 4 ++-- css/select-css.css | 2 +- css/shared/a11y.css | 2 +- css/shared/all.css | 12 ++++++------ css/shared/defaults.css | 2 +- css/shared/landmarks.css | 12 ++++++------ css/shared/reset.css | 2 +- css/site.css | 4 ++-- css/spinbutton.css | 4 ++-- css/spinner.css | 4 ++-- css/timer.css | 2 +- less/accessible-text-svg.less | 6 +++--- less/chart.less | 4 ++-- less/combobox.less | 6 +++--- less/enable-listbox.less | 5 ++--- less/grid.less | 2 +- less/heading.less | 28 ++++++++++++++++++---------- less/menubar.less | 2 +- less/radiogroup.less | 4 ++-- less/select-css.less | 2 +- less/shared/a11y.less | 2 +- less/shared/defaults.less | 2 +- less/shared/landmarks.less | 6 +++--- less/shared/reset.less | 2 +- less/site.less | 4 ++-- less/spinbutton.less | 2 +- less/timer.less | 2 +- package.json | 10 ++++++---- 37 files changed, 111 insertions(+), 89 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 6746de09..17c20128 100644 --- 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 index c537d6f7..92138a89 100644 --- 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 index ccd58951..ed450397 100644 --- 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 index c7bf10a1..33e79888 100644 --- 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 index 5d183452..b8dbd431 100644 --- 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 index 5b901cf4..21948669 100644 --- 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 index 13142960..b4c3ef66 100644 --- 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 index 98ad5ece..9e99e66f 100644 --- 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,12 +59,12 @@ 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; + font-size: 1.375rem; line-height: 54.54545455px; } div.heading-example h3, @@ -81,12 +81,12 @@ div.heading-example [role="heading"][aria-level="6"] { } div.heading-example h3, div.heading-example [role="heading"][aria-level="3"] { - font-size: 30px; + font-size: 1.875rem; line-height: 29.33333333px; } div.heading-example h6, div.heading-example [role="heading"][aria-level="6"] { - font-size: 18px; + font-size: 1.125rem; line-height: 48.88888889px; } div.heading-example h4, @@ -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; + font-size: 1.5625rem; line-height: 14.4px; } div.heading-example [role="heading"][aria-level="7"] { - font-size: 18px; + font-size: 1.125rem; line-height: 20px; } diff --git a/css/menubar.css b/css/menubar.css index 98298d42..aebd21a1 100644 --- 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 index c300b3e0..85a930e4 100644 --- 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 index c43b6f7e..fb1106b3 100644 --- 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 index 8a312188..f114221c 100644 --- 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 index 4253043f..c4efa376 100644 --- 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: 2.5rem; font-weight: bold; } footer, diff --git a/css/shared/defaults.css b/css/shared/defaults.css index 2def9c9d..f8ac7445 100644 --- 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 index 4253043f..c4efa376 100644 --- 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 index 7c60e420..3735091d 100644 --- 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; } diff --git a/css/site.css b/css/site.css index 1acb5040..30e860f8 100644 --- a/css/site.css +++ b/css/site.css @@ -10,7 +10,7 @@ } .enable-flyout__level .enable-flyout__menu-item { display: inline-block; - font-size: 14px; + font-size: 0.875rem; margin-right: 0; } .enable-flyout__link { @@ -187,7 +187,7 @@ } .enable-logo__sub-text { display: block; - font-size: 17px; + font-size: 1.0625rem; font-style: italic; padding: 0 10px; margin-top: -8px; diff --git a/css/spinbutton.css b/css/spinbutton.css index ef4abc27..5bb91a8f 100644 --- a/css/spinbutton.css +++ b/css/spinbutton.css @@ -5,7 +5,7 @@ input[type="number"] { border: 1px solid black; } input[type="number"] { - font-size: 16px; + font-size: 1rem; text-align: right; } .enable-spinner { @@ -16,7 +16,7 @@ input[type="number"] { .enable-spinner__button { display: block; text-align: right; - font-size: 16px; + font-size: 1rem; position: absolute; right: 0; height: 0.625rem; diff --git a/css/spinner.css b/css/spinner.css index 1e535663..ce31accf 100644 --- a/css/spinner.css +++ b/css/spinner.css @@ -12,7 +12,7 @@ input[type="number"] { border: 1px solid black; } input[type="number"] { - font-size: 16px; + font-size: 1rem; text-align: right; } .enable-spinner { @@ -23,7 +23,7 @@ input[type="number"] { .enable-spinner__button { display: block; text-align: right; - font-size: 16px; + font-size: 1rem; position: absolute; right: 0; height: 0.625rem; diff --git a/css/timer.css b/css/timer.css index aca984e0..0df729f3 100644 --- a/css/timer.css +++ b/css/timer.css @@ -42,7 +42,7 @@ display: flex; align-items: center; justify-content: center; - font-size: 48px; + font-size: 3rem; } .base-timer__start-timer { padding: 0 0.625rem; diff --git a/less/accessible-text-svg.less b/less/accessible-text-svg.less index 3a91e6e5..d5a4d7bc 100644 --- a/less/accessible-text-svg.less +++ b/less/accessible-text-svg.less @@ -11,7 +11,7 @@ body { &__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; @@ -30,7 +30,7 @@ body { } &__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; @@ -51,7 +51,7 @@ body { } &__roller-coaster-image { - left: 0px; + left: 0; position: absolute; top: 0; z-index: 1; diff --git a/less/chart.less b/less/chart.less index 73056b32..986e242b 100644 --- a/less/chart.less +++ b/less/chart.less @@ -26,11 +26,11 @@ body { } svg { - font-size: 16px; + font-size: (16/@px); } .tick text { - font-size: calc(10px * var(--text-zoom-factor)); + font-size: calc(0.625rem * var(--text-zoom-factor)); } } diff --git a/less/combobox.less b/less/combobox.less index ba3c66ca..076695a3 100755 --- a/less/combobox.less +++ b/less/combobox.less @@ -7,7 +7,7 @@ position: relative; width: 30em; max-width: 100%; - font-size: 100%; + font-size: (16/@px); font-family: sans-serif; @media @desktop { @@ -46,7 +46,7 @@ input[role="combobox"] { position: relative; - font-size: 12px; + font-size: (12/@px); height: 1.5em; width: 100%; /* of pc */ border: solid 1px #000; @@ -84,7 +84,7 @@ margin: 0; padding: 0.3em 0.5em; list-style: none; - font-size: 12px; + font-size: (12/@px); cursor: pointer; } [role="option"]:hover { diff --git a/less/enable-listbox.less b/less/enable-listbox.less index 5206596a..ccf8caf0 100755 --- a/less/enable-listbox.less +++ b/less/enable-listbox.less @@ -19,7 +19,7 @@ &__right-area { box-sizing: border-box; display: inline-block; - font-size: 14px; + font-size: (14/@px); vertical-align: top; width: 50%; } @@ -68,9 +68,8 @@ } button { - font-size: 16px; border-radius: 0; - font-size: 16px; + font-size: (16/@px); text-align: left; padding: 5px 10px; width: (150 / @px); diff --git a/less/grid.less b/less/grid.less index e8e2cf64..e545ef68 100755 --- a/less/grid.less +++ b/less/grid.less @@ -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 index 9b8e7761..a80c5f81 100755 --- a/less/heading.less +++ b/less/heading.less @@ -12,7 +12,7 @@ div.heading-example { } div.heading-example p { - font-size: 16px; + font-size: (16/@px); line-height: 1.4; text-align: justify; } @@ -44,13 +44,21 @@ div.heading-example p:nth-of-type(4) { } /* 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: (36/@px); +@h2-size: (33/@px); +@h3-size: (30/@px); +@h4-size: (25/@px); +@h5-size: (22/@px); +@h6-size: (18/@px); +@h7-size: (18/@px); + +@line-height1: 36px; +@line-height2: 33px; +@line-height3: 30px; +@line-height4: 25px; +@line-height5: 22px; +@line-height6: 18px; +@line-height7: 18px; div.heading-example { h1, @@ -60,7 +68,7 @@ div.heading-example { font-weight: normal; font-family: "Ultra", sans-serif; font-size: @h1-size; - line-height: 42 * (36 / @h1-size); + line-height: 42 * (36 / @line-height1); text-transform: uppercase; text-shadow: 0 2px white, @@ -80,7 +88,7 @@ div.heading-example { h2, [role="heading"][aria-level="2"] { font-size: @h2-size; - line-height: 40 * (30 / @h2-size); + line-height: 40 * (30 / @line-height2); } h5, diff --git a/less/menubar.less b/less/menubar.less index 00f96d4d..c0e58dfc 100755 --- a/less/menubar.less +++ b/less/menubar.less @@ -3,7 +3,7 @@ ul[role="menubar"] { margin: 10px; padding: 10px; - font-size: 110%; + font-size: 1.1rem; list-style: none; background-color: #eeeeee; } diff --git a/less/radiogroup.less b/less/radiogroup.less index 6dd93f25..32e655b0 100755 --- a/less/radiogroup.less +++ b/less/radiogroup.less @@ -55,7 +55,7 @@ } .aria-radio-label { - font-size: (@radio-label-font-size * 1px); + font-size: (@radio-label-font-size * (1/@px)); line-height: ((@radio-size + @radio-border) / @radio-label-font-size); } @@ -94,7 +94,7 @@ cursor: pointer; display: inline-block; color: #666; - font-size: (@enable-radio-label-font-size * 1px); + font-size: (@enable-radio-label-font-size * (1/@px)); line-height: ( (@enable-radio-size + 2 * @enable-radio-border) / @enable-radio-label-font-size diff --git a/less/select-css.less b/less/select-css.less index c3e461eb..f8f6f6c9 100644 --- a/less/select-css.less +++ b/less/select-css.less @@ -3,7 +3,7 @@ /* class applies to select element itself, not a wrapper element */ .select-css { display: block; - font-size: 16px; + font-size: (16/@px); font-family: sans-serif; font-weight: 700; color: #444; diff --git a/less/shared/a11y.less b/less/shared/a11y.less index 9c1bbbc8..7bbac433 100755 --- a/less/shared/a11y.less +++ b/less/shared/a11y.less @@ -114,7 +114,7 @@ body { * the size set in the iOS Accessibility settings. */ font: -apple-system-body; - font-size: 16px; + font-size: (16/@px); /* * Put whatever font you want to use here or in the body diff --git a/less/shared/defaults.less b/less/shared/defaults.less index a0abe60b..13f36325 100755 --- a/less/shared/defaults.less +++ b/less/shared/defaults.less @@ -379,7 +379,7 @@ code { tr { @first-col-width: 125px; td { - width: calc(~"(100% - @{first-col-width}) / 5"); + width: calc(~"(100% - @{first-col-width}) / 5"); } td:first-child { diff --git a/less/shared/landmarks.less b/less/shared/landmarks.less index 62ca4d58..eff0ab43 100755 --- a/less/shared/landmarks.less +++ b/less/shared/landmarks.less @@ -92,12 +92,12 @@ header, } .acme { - font-size: 70px; + font-size: (70/@px); font-weight: 900; } .zoltipedia { - font-size: 60px; + font-size: (60/@px); } .corp { @@ -207,7 +207,7 @@ aside, 0 -1px 0 #000, 3px 3px #000; - font-size: 40px; + font-size: (40/@px); font-weight: bold; } } diff --git a/less/shared/reset.less b/less/shared/reset.less index fe4254c6..bb727240 100755 --- a/less/shared/reset.less +++ b/less/shared/reset.less @@ -87,7 +87,7 @@ video { margin: 0; padding: 0; border: 0; - font-size: 100%; + font-size: 1rem; font: inherit; vertical-align: baseline; } diff --git a/less/site.less b/less/site.less index 78bdbbc1..b126842f 100644 --- a/less/site.less +++ b/less/site.less @@ -16,7 +16,7 @@ &__level &__menu-item { display: inline-block; - font-size: 14px; + font-size: (14/@px); margin-right: 0; } @@ -235,7 +235,7 @@ &__sub-text { display: block; - font-size: 17px; + font-size: (17/@px); font-style: italic; padding: 0 10px; margin-top: -8px; diff --git a/less/spinbutton.less b/less/spinbutton.less index 931771f7..66f96bb3 100755 --- a/less/spinbutton.less +++ b/less/spinbutton.less @@ -4,7 +4,7 @@ @inputHeight: (@inputHeightPx / @px); @inputWidth: (70 / @px); @spinButtonHeight: (@inputHeight / 2); -@fontSize: (@inputHeightPx - 4) * 1px; +@fontSize: (@inputHeightPx - 4) * (1/@px); .enable-spinner, input[type="number"] { diff --git a/less/timer.less b/less/timer.less index 9ac1c432..67d6ac92 100755 --- a/less/timer.less +++ b/less/timer.less @@ -51,7 +51,7 @@ display: flex; align-items: center; justify-content: center; - font-size: 48px; + font-size: (48/@px); } &__start-timer { diff --git a/package.json b/package.json index 10114d99..295ca635 100644 --- a/package.json +++ b/package.json @@ -51,8 +51,8 @@ "eslint": "eslint .", "server": "npm run validate:version && node bin/promote-node-modules-to-server.js && concurrently --kill-others \"less-watch-compiler\" \"npm-watch\" \"node bin/server.js\" ", "start": "npm run server", - "stylelint": "npx stylelint \"**/*.less\"", - "stylelint:fix": "npx stylelint \"**/*.less\" --fix", + "stylelint": "npx stylelint \"**/*.{css,less}\"", + "stylelint:fix": "npx stylelint \"**/*.{css,less}\" --fix", "watch": "npm-watch", "convert-modules-to-libs": "bash bin/convert-modules-to-libs.sh", "prepare": "node .husky/install.mjs", @@ -150,8 +150,10 @@ "wicg-inert": "^3.1.2" }, "lint-staged": { - "*.{js,jsx,ts,tsx,css,less}": [ - "eslint", + "*.{js,jsx,ts,tsx}": [ + "npm run eslint" + ], + "*.{css,less}": [ "npm run stylelint" ], "*.{js,jsx,ts,tsx,json}": [ From 930cb6e2dea1c70a26fc01c0d9d9895eea831e33 Mon Sep 17 00:00:00 2001 From: Zoltan Hawryluk Date: Wed, 9 Oct 2024 13:20:04 -0400 Subject: [PATCH 2/2] Adding px font-size check. --- bin/enforceRemFontSize.sh | 21 +++++ css/checkbox copy.css | 116 ------------------------ css/heading.css | 10 +-- css/input-mask-example copy.css | 19 ---- css/pause-animations-demo copy.css | 140 ----------------------------- package.json | 2 +- 6 files changed, 27 insertions(+), 281 deletions(-) create mode 100755 bin/enforceRemFontSize.sh delete mode 100644 css/checkbox copy.css delete mode 100644 css/input-mask-example copy.css delete mode 100644 css/pause-animations-demo copy.css diff --git a/bin/enforceRemFontSize.sh b/bin/enforceRemFontSize.sh new file mode 100755 index 00000000..46ba43aa --- /dev/null +++ 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 \ No newline at end of file diff --git a/css/checkbox copy.css b/css/checkbox copy.css deleted file mode 100644 index 269659d1..00000000 --- a/css/checkbox copy.css +++ /dev/null @@ -1,116 +0,0 @@ -/* From the old stuff */ -/* These are the styles for the ARIA example */ -[role="checkbox"] { - display: inline-block; - position: relative; - width: 1.5rem; - height: 1.5rem; - margin: 0.25rem 0.5rem 0.25rem 0.25rem; - border: 0.0625rem solid #444; - background: #e0e0e0; - background-image: linear-gradient(0deg, #ffffff, #e0e0e0); - vertical-align: bottom; -} -[role="checkbox"][aria-checked="true"]:after { - content: "✓"; - display: block; - position: absolute; - top: 0.375rem; - left: 0.3125rem; - width: 1em; - color: #060; - font-size: 0.875em; - line-height: 1em; - text-align: center; - text-shadow: 0 0 0.0714em #73994d; - font-weight: bold; - transform: scale(2.5) translateY(-2px); -} -/* This is the CSS to style the custom HTML5 checkbox */ -.enable-checkbox input[type="checkbox"]:focus + label::before { - outline: #3b99fc auto 5px; -} -.enable-checkbox input[type="checkbox"]:focus:not(:focus-visible) + label::before { - outline: none; -} -.enable-checkbox input[type="checkbox"]:focus-visible + label::before { - outline: #3b99fc auto 5px; -} -.enable-checkbox input[type="checkbox"], -.enable-checkbox input[type="checkbox"] + label::before { - -webkit-appearance: none; - -khtml-appearance: none; - -ms-appearance: none; - -moz-appearance: none; - appearance: none; - box-sizing: border-box; - width: 1rem; - height: 1rem; - margin: 0; - padding: 0; - display: inline-block; - border: solid 1px #333; -} -.enable-checkbox input[type="checkbox"] + label::after { - content: none; -} -.enable-checkbox input[type="checkbox"]:checked + label::after { - content: ""; - height: 0.31rem; - width: 0.87rem; - border-left: 0.125rem solid #600; - border-bottom: 0.125rem solid #600; - transform: rotate(-45deg) scale(2); - left: 0.43rem; - top: -0.31rem; -} -.enable-checkbox input[type="checkbox"] + label { - position: absolute; - display: inline-block; - /* 16px width of fake checkbox + 6px distance between fake checkbox and text */ - margin-left: -1rem; -} -.enable-checkbox input[type="checkbox"] + label::before, -.enable-checkbox input[type="checkbox"] + label::after { - position: absolute; - content: ""; - /* Needed for the line-height to take effect */ - display: inline-block; - pointer-events: none; -} -/* These are styles just for the global error */ -.error { - text-align: left; - color: #e60000; -} -.error::before { - content: ''; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' overflow='visible' xml:space='preserve'%3E%3Cpath opacity='.2' d='M4 64c0 33.636 27.364 61 61 61s61-27.364 61-61S98.636 3 65 3 4 30.364 4 64z'/%3E%3Cpath opacity='.2' d='M3 64c0 34.188 27.813 62 62 62 34.188 0 62-27.813 62-62S99.187 2 65 2 3 29.813 3 64z'/%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='60.49' y1='1.742' x2='69.656' y2='126.241'%3E%3Cstop offset='0' style='stop-color:%23a70000'/%3E%3Cstop offset='1' style='stop-color:%23a70000'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23a)' d='M4 63c0 33.636 27.364 61 61 61s61-27.364 61-61S98.636 2 65 2 4 29.364 4 63z'/%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='57.765' y1='1.689' x2='72.515' y2='126.69'%3E%3Cstop offset='0' style='stop-color:%23bd0000'/%3E%3Cstop offset='.352' style='stop-color:%23c40000'/%3E%3Cstop offset='.869' style='stop-color:%23d80000'/%3E%3Cstop offset='1' style='stop-color:%23de0000'/%3E%3C/linearGradient%3E%3Ccircle fill='url(%23b)' cx='65' cy='63' r='60'/%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='23.375' y1='14.566' x2='71.625' y2='67.816'%3E%3Cstop offset='0' style='stop-color:%23e05e5e'/%3E%3Cstop offset='1' style='stop-color:%23d81818'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23c)' d='M57.75 56.5c24.934-8.476 65.898-6.226 65.898-6.226C117.811 23.25 93.771 3 65 3 31.863 3 5 29.863 5 63a59.81 59.81 0 0 0 4.715 23.354S32.817 64.976 57.75 56.5z'/%3E%3ClinearGradient id='d' gradientUnits='userSpaceOnUse' x1='63.818' y1='54.581' x2='72.118' y2='124.92'%3E%3Cstop offset='0' style='stop-color:%23bd0000'/%3E%3Cstop offset='.043' style='stop-color:%23c10606'/%3E%3Cstop offset='.294' style='stop-color:%23d62424'/%3E%3Cstop offset='.541' style='stop-color:%23e63a3a'/%3E%3Cstop offset='.78' style='stop-color:%23ef4747'/%3E%3Cstop offset='1' style='stop-color:%23f24b4b'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23d)' d='M65 122C32.03 122 5.283 95.406 5.013 62.5c-.002.167-.013.333-.013.5 0 33.137 26.863 60 60 60s60-26.863 60-60c0-.167-.012-.333-.013-.5C124.717 95.406 97.97 122 65 122z'/%3E%3ClinearGradient id='e' gradientUnits='userSpaceOnUse' x1='-68.751' y1='-319.85' x2='-194.001' y2='-319.85' gradientTransform='rotate(180 -33 -143.25)'%3E%3Cstop offset='0' style='stop-color:%23e57373'/%3E%3Cstop offset='.118' style='stop-color:%23ec9393'/%3E%3Cstop offset='.266' style='stop-color:%23f4b4b4'/%3E%3Cstop offset='.39' style='stop-color:%23f9c9c9'/%3E%3Cstop offset='.472' style='stop-color:%23fbd0d0'/%3E%3Cstop offset='.548' style='stop-color:%23f9c8c8'/%3E%3Cstop offset='.67' style='stop-color:%23f5b1b1'/%3E%3Cstop offset='.821' style='stop-color:%23ed8b8b'/%3E%3Cstop offset='.994' style='stop-color:%23e35858'/%3E%3Cstop offset='1' style='stop-color:%23e35656'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23e)' d='M65 4.101c32.97 0 59.717 26.594 59.987 59.5.001-.167.013-.333.013-.5 0-33.137-26.863-60-60-60s-60 26.863-60 60c0 .167.011.333.013.5.27-32.906 27.017-59.5 59.987-59.5z'/%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='61.692' y1='46.315' x2='69.442' y2='83.065'%3E%3Cstop offset='0' style='stop-color:%23bd0000'/%3E%3Cstop offset='.167' style='stop-color:%23c10907'/%3E%3Cstop offset='.445' style='stop-color:%23cd2319'/%3E%3Cstop offset='.796' style='stop-color:%23e04c36'/%3E%3Cstop offset='1' style='stop-color:%23ed6749'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23f)' d='M26 49a1 1 0 0 0-1 1v24a1 1 0 0 0 1 1h78a1 1 0 0 0 1-1V50a1 1 0 0 0-1-1H26z'/%3E%3Cpath fill='%23FFF' d='M26 50h78v24H26z'/%3E%3Cpath fill='%23CCC' d='M27 51h77v-1H26v24h1z'/%3E%3C/svg%3E"); - background-size: 0.7rem 0.7rem; - display: inline-block; - width: 0.7rem; - height: 0.7rem; - margin-right: 0.5em; -} -#html5-example .checkbox-container { - display: block; - width: fit-content; - margin: 0 auto; - position: relative; -} -#html5-example .checkbox-container input { - position: absolute; - top: 0; - left: 0; -} -#html5-example .checkbox-container label { - width: 190px; - display: inline-block; - text-align: left; - margin-bottom: 5px; - padding-left: 1.875rem; -} -#html5-example .error { - width: fit-content; - margin: 0 auto 1em auto; -} diff --git a/css/heading.css b/css/heading.css index 9e99e66f..d687ecb3 100644 --- a/css/heading.css +++ b/css/heading.css @@ -65,7 +65,7 @@ div.heading-example [role="heading"][aria-level="2"] { div.heading-example h5, div.heading-example [role="heading"][aria-level="5"] { font-size: 1.375rem; - line-height: 54.54545455px; + line-height: 872.72727273rem; } div.heading-example h3, div.heading-example h6, @@ -82,12 +82,12 @@ div.heading-example [role="heading"][aria-level="6"] { div.heading-example h3, div.heading-example [role="heading"][aria-level="3"] { font-size: 1.875rem; - line-height: 29.33333333px; + line-height: 469.33333333rem; } div.heading-example h6, div.heading-example [role="heading"][aria-level="6"] { font-size: 1.125rem; - line-height: 48.88888889px; + line-height: 782.22222222rem; } div.heading-example h4, div.heading-example [role="heading"][aria-level="7"] { @@ -99,9 +99,9 @@ div.heading-example [role="heading"][aria-level="7"] { div.heading-example h4, div.heading-example [role="heading"][aria-level="4"] { font-size: 1.5625rem; - line-height: 14.4px; + line-height: 230.4rem; } div.heading-example [role="heading"][aria-level="7"] { font-size: 1.125rem; - line-height: 20px; + line-height: 320rem; } diff --git a/css/input-mask-example copy.css b/css/input-mask-example copy.css deleted file mode 100644 index a3289ec1..00000000 --- a/css/input-mask-example copy.css +++ /dev/null @@ -1,19 +0,0 @@ -.font-heading-3 { - font-family: "OpenSans", "Helvetica", "Arial", sans-serif; - font-weight: bold; - padding-top: 20px; - font-size: 1.25rem; - border-bottom: double 3px #000; -} -.enable-input-mask__container { - position: relative; -} -.enable-input-mask__mask { - pointer-events: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #ffcccc; -} diff --git a/css/pause-animations-demo copy.css b/css/pause-animations-demo copy.css deleted file mode 100644 index e8af632c..00000000 --- a/css/pause-animations-demo copy.css +++ /dev/null @@ -1,140 +0,0 @@ -.font-heading-3 { - font-family: "OpenSans", "Helvetica", "Arial", sans-serif; - font-weight: bold; - padding-top: 20px; - font-size: 1.25rem; - border-bottom: double 3px #000; -} -.showcode_ui { - top: 2.5rem; -} -@media only screen and (min-width: 720px) { - .showcode_ui { - top: 0; - } -} -.play-pause-anim { - /* - * For the page - */ -} -.play-pause-anim__checkbox-container { - position: relative; - width: 100vw; - top: 0; - left: 0; - color: white; - padding: 0; - background-color: #000; - white-space: nowrap; - text-align: center; - height: 2.4; -} -.offscreen-observer__is-header-offscreen .play-pause-anim__checkbox-container { - position: fixed; - top: 0rem; -} -main:not(.with-full-bleed-hero) .play-pause-anim__checkbox-container { - margin: -1rem -1rem 0.625rem -1rem; -} -@media only screen and (min-width: 960px) { - .play-pause-anim__checkbox-container { - position: fixed; - top: 0.3125rem; - left: initial; - right: 20px; - border-radius: 50px; - border: solid 2px white; - width: min-content; - line-height: 2.4; - } - .offscreen-observer__is-header-offscreen .play-pause-anim__checkbox-container { - top: 0.625rem; - } - main:not(.with-full-bleed-hero) .play-pause-anim__checkbox-container { - margin: 0; - } -} -.play-pause-anim__checkbox-container label { - padding: 10px 20px; - display: inline-block; - cursor: pointer; -} -@media only screen and (min-width: 960px) { - .play-pause-anim__checkbox-container label { - padding: 0 20px; - } -} -.play-pause-anim__full-bleed-image-demo { - position: relative; -} -.play-pause-anim__full-bleed-image-demo--image { - background-image: url(https://www.useragentman.com/tests/html5ImageConverter/examples/saturn-alpha/space.jpg); - background-size: 100vw auto; - background-position: 0px 0px; - background-repeat: repeat-x; - background-size: auto; - animation: animatedBackground 60s linear infinite; - width: 100vw; -} -main { - min-height: 54vw; -} -@keyframes animatedBackground { - from { - background-position: 0 0; - } - to { - background-position: -1920px 0; - } -} -.pause-anim-control__gif--animated, -.pause-anim-control__gif--still { - max-width: 100%; -} -.pause-anim-control__gif--animated { - display: initial; -} -.pause-anim-control__gif--still { - display: none; -} -/* - * From Bruce Lawson's awesome blog post - * https://brucelawson.co.uk/2021/prefers-reduced-motion-and-browser-defaults/ - */ -@media (prefers-reduced-motion: reduce) { - body:not(.pause-anim-control__prefers-motion) *, - body:not(.pause-anim-control__prefers-motion) ::before, - body:not(.pause-anim-control__prefers-motion) ::after { - animation-delay: -1ms !important; - animation-duration: 1ms !important; - animation-iteration-count: 1 !important; - background-attachment: initial !important; - scroll-behavior: auto !important; - transition-duration: 0s !important; - transition-delay: 0s !important; - } - body:not(.pause-anim-control__prefers-motion) .pause-anim-control__gif--animated { - display: none; - } - body:not(.pause-anim-control__prefers-motion) .pause-anim-control__gif--still { - display: initial; - } -} -body.pause-anim-control__prefers-reduced-motion *, -body.pause-anim-control__prefers-reduced-motion ::before, -body.pause-anim-control__prefers-reduced-motion ::after { - animation-delay: -1ms !important; - animation-duration: 1ms !important; - animation-iteration-count: 1 !important; - background-attachment: initial !important; - scroll-behavior: auto !important; - transition-duration: 0s !important; - transition-delay: 0s !important; -} -body.pause-anim-control__prefers-reduced-motion .pause-anim-control__gif--animated { - display: none; -} -body.pause-anim-control__prefers-reduced-motion .pause-anim-control__gif--still { - display: initial; -} diff --git a/package.json b/package.json index 295ca635..e2152935 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ ], "scripts": { "jest": "jest --runInBand", - "test": "bin/checkHTML.sh && jest --runInBand", + "test": "bin/enforceRemFontSize.sh && bin/checkHTML.sh && jest --runInBand", "jest-local": "jest --maxWorkers=75%", "test-local": "bin/checkHTML.sh && jest --maxWorkers=75%", "jest-debug-memory-leak": "node --expose-gc ./node_modules/.bin/jest --runInBand --logHeapUsage",