Skip to content

Commit

Permalink
Merge pull request #1497 from IBMa/dark-mode-help
Browse files Browse the repository at this point in the history 
feature(help): Add dark mode support to help
  • Loading branch information
@ErickRenteria
ErickRenteria authored Jun 28, 2023
2 parents 1b1c9fb + 7913656 commit c04c2ea
Show file tree
Hide file tree
Showing 83 changed files with 4,362 additions and 1,538 deletions.
101 changes: 71 additions & 30 deletions accessibility-checker-engine/help-v4/common/help.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@
See the License for the specific language governing permissions and
limitations under the License.
*****************************************************************************/
@import url("https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css");
@import url('https://unpkg.com/carbon-components/css/carbon-components.min.css');
@import url("https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/themes.css");

bx-list-item>code, p>code, td>code {
background-color: #e0e0e0;
background-color: var(--cds-layer);
border-radius: 4px;
bottom: 0.0625em;
color: #161616;
color: var(--cds-text-primary);
display: inline;
font-size: .75rem;
font-size: .875em;
Expand All @@ -27,39 +29,55 @@ bx-list-item>code, p>code, td>code {
position: relative;
}

.toolhelp a {
color: var(--cds-link-primary)
}

.toolHelp .toolMain p ~ p {
margin-top: .5rem;
}

.toolHelp .toolHead h3 {
font-size: 20px;
line-height: 28px;
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}

.toolHelp .toolHead .issueLevel {
font-weight: 600;
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}

/* body-long-02 */
.toolHelp .toolHead p {
.toolHelp .toolHead #ruleMessage {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin-top: .5rem;
margin-bottom: .5rem;
}

/* productive-heading-03 */
.toolHelp .toolMain h3 {
font-size: 20px;
line-height: 28px;
.toolHelp .toolHead #groupLabel {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}

/* body-long-02 */
.toolHelp .toolMain p {
/* productive-heading-03 */
.toolHelp .toolMain h3 {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
font-weight: 400;
}

.toolHelp .toolSide .bx--list__item {
Expand All @@ -70,29 +88,44 @@ bx-list-item>code, p>code, td>code {

/* productive-heading-03 */
.toolHelp .toolSide h3 {
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
.toolHelp .toolSide p {
font-size: 20px;
line-height: 28px;
font-weight: 400;
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}

html, body, .toolHelp .bx--row:nth-child(2) {
height: 100%;
@media (min-width: 42rem) {
html, body, .toolHelp .bx--row:nth-child(2) {
height: 100%;
}
}

body {
font-family: 'IBM Plex Sans', sans-serif;
color: var(--cds-text-primary);
background-color: var(--cds-ui-background);
}

.toolHelp {
padding: 0px;
margin: 0px;
max-width: 100%;
background-color: #be95ff;
background-color: #e8daff;
}

.toolHelp p {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
/* or 143% */

letter-spacing: 0.16px;
}

.dds-theme-zone-g90 .toolHelp {
background-color: #31135E;
}

.toolHelp .bx--row {
Expand All @@ -104,9 +137,10 @@ body {
padding-top: 1rem;
}
.toolHelp .toolMain {
background-color: #f4f4f4;
background-color: var(--cds-ui-background);
padding-top: 1rem;
padding-bottom: 1rem;
border-top: solid var(--cds-text-primary) 1px;
}
.toolHelp .toolMain h2 {
margin-top: 32px;
Expand All @@ -122,9 +156,16 @@ body {

.toolHelp .toolSide {
padding: 16px 16px 16px 32px;
background-color: #e8daff;
color: black;
background-color: var(--cds-ui-background);;
color: var(--cds-text-primary);
border-top: solid var(--cds-text-primary) 1px;
}
@media (min-width: 42rem) {
.toolHelp .toolSide {
border-left: solid var(--cds-text-primary) 1px;
}
}

.toolHelp .toolSide h2 {
margin-top: 32px;
margin-bottom: 0.5rem;
Expand Down
55 changes: 38 additions & 17 deletions accessibility-checker-engine/help-v4/common/help.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ class HTMLBaseElement extends HTMLElement {
}
}

function isDarkMode() {
return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
}

customElements.define(
"mark-down",
class extends HTMLBaseElement {
Expand Down Expand Up @@ -86,7 +90,6 @@ customElements.define(
const shadowRoot = this;
let snip = document.createElement("bx-code-snippet");
snip.setAttribute("type", "multi");
snip.setAttribute("color-scheme", "light");
snip.innerHTML = oldCode.replace(/</g, "&lt;")
shadowRoot.appendChild(snip);
}
Expand Down Expand Up @@ -134,29 +137,36 @@ function updateWithRuleInfo(ruleInfo) {
if (val === "Violation") icon = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" aria-hidden="true">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#A2191F;}
.st2{fill:#FFFFFF;fill-opacity:0;}
.st0{fill:none;}
.st1{fill:#da1e28;}
.st2{fill:#FFFFFF;fill-opacity:1;}
</style>
<rect class="st0" width="16" height="16"/>
<rect id="_Transparent_Rectangle_" class="st0" width="16" height="16"/>
<path class="st1" d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z"/>
<path class="st2" d="M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z"/>
<path id="inner-path" class="st2" d="M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z"/>
</svg>`;
if (val === "Needs review") icon = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" aria-hidden="true">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#F1C21B;}
.st0{fill:none;}
.st1{fill:#F1C21B;}
</style>
<rect class="st0" width="16" height="16"/>
<rect id="_Transparent_Rectangle_" class="st0" width="16" height="16"/>
<path class="st1" d="M14.9,13.3l-6.5-12C8.3,1,8,0.9,7.8,1.1c-0.1,0-0.2,0.1-0.2,0.2l-6.5,12c-0.1,0.1-0.1,0.3,0,0.5
C1.2,13.9,1.3,14,1.5,14h13c0.2,0,0.3-0.1,0.4-0.2C15,13.6,15,13.4,14.9,13.3z M7.4,4h1.1v5H7.4V4z M8,11.8c-0.4,0-0.8-0.4-0.8-0.8
s0.4-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,11.8,8,11.8z"/>
<g><g><g>
<rect x="7.45" y="4" width="1.1" height="5"/>
</g></g><g><g>
<circle cx="8" cy="11" r="0.8"/>
</g></g></g>
C1.2,13.9,1.3,14,1.5,14h13c0.2,0,0.3-0.1,0.4-0.2C15,13.6,15,13.4,14.9,13.3z M7.4,4h1.1v5H7.4V4z M8,11.8c-0.4,0-0.8-0.4-0.8-0.8
s0.4-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,11.8,8,11.8z"/>
<g>
<g>
<g>
<rect x="7.45" y="4" width="1.1" height="5"/>
</g>
</g>
<g>
<g>
<circle cx="8" cy="11" r="0.8"/>
</g>
</g>
</g>
</svg>`;
if (val === "Recommendation") icon = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" aria-hidden="true">
Expand All @@ -171,7 +181,11 @@ width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0
<path class="st1" d="M14,15H2c-0.6,0-1-0.4-1-1V2c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1v12C15,14.6,14.6,15,14,15z"/>
<text transform="matrix(1 0 0 1 5.9528 12.5044)" class="st2 st3 st4">i</text>
</svg>`;
document.querySelector("#locLevel").innerHTML = `<div class="issueLevel">${icon}&nbsp;${val}</div>`;
let level = document.querySelector("#locLevel");
let parent = level.parentElement;
level = parent.removeChild(level);
parent.insertBefore(level, parent.firstElementChild);
document.querySelector("#locLevel").innerHTML = `<div class="issueLevel">${val}</div>`;
}
if (RULE_ID) {
document.querySelector("#ruleInfo").innerHTML = `<p>Rule ID: ${RULE_ID}${ruleInfo.reasonId ? `<br />Reason ID: ${ruleInfo.reasonId}</p>` : ""}`;
Expand All @@ -198,5 +212,12 @@ window.addEventListener("DOMContentLoaded", (evt) => {
ruleInfo = JSON.parse(decodeURIComponent(window.location.hash.substring(1)));
}
updateWithRuleInfo(ruleInfo);

if (isDarkMode()) {
document.body.setAttribute("class", "dds-theme-zone-g90");
} else {
document.body.setAttribute("class", "dds-theme-zone-g10");
}

})

Loading

0 comments on commit c04c2ea

Please sign in to comment.