Merge pull request #90 from ScottLogic/sfd-117-dark-mode

SFD-117 Some text needs appropriate styling for dark mode
ScottLogic · Jun 24, 2024 · 698a866 · 698a866
2 parents a822e46 + ac11986
commit 698a866
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 23 deletions.
diff --git a/angular.json b/angular.json
@@ -41,8 +41,9 @@
               "baseHref": "/sl-tech-carbon-estimator/"
             },
             "npm-package": {
+              "index": {"input": "src/package-index.html", "output": "index.html"},
               "assets": [],
-              "styles": ["src/styles.css"]
+              "styles": ["src/styles.css", "src/package-styles.css"]
             },
             "development": {
               "optimization": false,

diff --git a/src/app/carbon-estimation/carbon-estimation.constants.ts b/src/app/carbon-estimation/carbon-estimation.constants.ts
@@ -24,7 +24,7 @@ const customTooltip = ({
   const initialSeries = w.globals.initialSeries[seriesIndex];
   const data = initialSeries.data[dataPointIndex];
 
-  return `<div class="tce-rounded tce-flex tce-max-w-40 md:tce-max-w-none">
+  return `<div class="tce-rounded tce-flex tce-max-w-40 md:tce-max-w-none tce-text-slate-600">
   <div class="tce-p-1 md:tce-p-2 tce-flex" style="background-color:${initialSeries.color}"><div class="${data.meta.svg} tce-m-auto tce-size-4 md:tce-size-8"></div></div>
     <div class="tce-p-1 md:tce-p-2">
     <div class="tce-text-wrap">${data.meta.parent}:</div>

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.html b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
@@ -4,9 +4,7 @@
 
     <div class="tce-flex tce-flex-col tce-gap-4">
       <div class="tce-flex tce-flex-col tce-gap-2">
-        <label class="tce-text-sm tce-text-slate-600" for="headCount"
-          >How many employees are in the organisation?
-        </label>
+        <label class="tce-text-sm" for="headCount">How many employees are in the organisation? </label>
         <input
           id="headCount"
           class="tce-border tce-border-slate-400 tce-rounded"
@@ -24,7 +22,7 @@
       </div>
 
       <div class="tce-flex tce-flex-col tce-gap-2">
-        <label for="desktopPercentage" class="tce-text-sm tce-text-slate-600">
+        <label for="desktopPercentage" class="tce-text-sm">
           What percentage of those employee devices are desktops or laptops?
         </label>
         <input
@@ -37,7 +35,7 @@
           max="100"
           step="5"
           [attr.aria-valuetext]="'Desktops ' + desktopPercentage + '%, Laptops ' + laptopPercentage + '%'" />
-        <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
+        <div class="tce-flex tce-justify-between tce-text-sm">
           <span>Desktops {{ desktopPercentage }}%</span><span>Laptops {{ laptopPercentage }}%</span>
         </div>
       </div>
@@ -73,7 +71,7 @@
       }
 
       <div class="tce-flex tce-flex-col tce-gap-2">
-        <label class="tce-text-sm tce-text-slate-600" for="numberOfServers">Number of Servers:</label>
+        <label class="tce-text-sm" for="numberOfServers">Number of Servers:</label>
         <input
           id="numberOfServers"
           class="tce-border tce-border-slate-400 tce-rounded disabled:tce-bg-gray-200 disabled:tce-text-slate-400 disabled:tce-cursor-not-allowed"
@@ -102,7 +100,7 @@
 
       @if (!noCloudServices) {
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <label for="cloudPercentage" class="tce-text-sm tce-text-slate-600"
+          <label for="cloudPercentage" class="tce-text-sm"
             >What percentage of your servers are cloud services vs on-premise?</label
           >
           <input
@@ -115,7 +113,7 @@
             max="100"
             step="5"
             [attr.aria-valuetext]="'Cloud ' + cloudPercentage + '%, On-premise' + onPremisePercentage + '%'" />
-          <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
+          <div class="tce-flex tce-justify-between tce-text-sm">
             <span>Cloud {{ cloudPercentage }}%</span>
             <span>On-premise {{ onPremisePercentage }}%</span>
           </div>
@@ -130,7 +128,7 @@
         </div>
 
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <label for="monthlyCloudBill" class="tce-text-sm tce-text-slate-600">What is your monthly cloud bill?</label>
+          <label for="monthlyCloudBill" class="tce-text-sm">What is your monthly cloud bill?</label>
           <select
             id="monthlyCloudBill"
             class="tce-border tce-border-slate-400 tce-rounded disabled:tce-bg-gray-200 disabled:tce-text-slate-400 disabled:tce-cursor-not-allowed tce-px-3 tce-py-2"
@@ -165,13 +163,13 @@
           <expansion-panel [configOverride]="questionPanelConfig">
             <div header>
               <div class="tce-flex">
-                <label for="purposeOfSite" class="tce-text-sm tce-text-slate-600"
+                <label for="purposeOfSite" class="tce-text-sm"
                   >What's the primary purpose of your digital services?</label
                 >
               </div>
             </div>
             <div content>
-              <p class="tce-text-sm tce-text-slate-600">
+              <p class="tce-text-sm">
                 The purpose of your digital services is used to determine the typical amount of time a user might spend
                 on them and the amount of data that may be transferred. This can affect the amount of energy used by end
                 user devices and how much energy from network traffic is attributable to your organisation
@@ -193,7 +191,7 @@
         <ng-container *ngTemplateOutlet="locationInput; context: formContext.downstream"></ng-container>
 
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <label for="monthlyActiveUsers" class="tce-text-sm tce-text-slate-600">
+          <label for="monthlyActiveUsers" class="tce-text-sm">
             How many monthly active users do your digital services have?
           </label>
           <input
@@ -219,13 +217,13 @@
           <expansion-panel [configOverride]="questionPanelConfig">
             <div header>
               <div class="tce-flex">
-                <label for="mobilePercentage" class="tce-text-sm tce-text-slate-600">
+                <label for="mobilePercentage" class="tce-text-sm">
                   What percentage of your end-users are mobile or personal computer users?
                 </label>
               </div>
             </div>
             <div content>
-              <p class="tce-text-sm tce-text-slate-600">
+              <p class="tce-text-sm">
                 The percentage of mobile users will affect the energy used by end user devices and network
                 infrastructure. While the power demand of mobile devices is often much lower, the use of mobile networks
                 can increase the power used when transferring data.
@@ -241,7 +239,7 @@
             max="100"
             step="5"
             [attr.aria-valuetext]="'Mobile ' + mobilePercentage + '%, Computer' + computerPercentage + '%'" />
-          <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
+          <div class="tce-flex tce-justify-between tce-text-sm">
             <span>Mobile {{ mobilePercentage }}%</span>
             <span>Computer {{ computerPercentage }}%</span>
           </div>
@@ -272,11 +270,11 @@
       <expansion-panel [configOverride]="questionPanelConfig">
         <div header>
           <div class="tce-flex">
-            <label for="{{ formControlName }}" class="tce-text-sm tce-text-slate-600">{{ label }} </label>
+            <label for="{{ formControlName }}" class="tce-text-sm">{{ label }} </label>
           </div>
         </div>
         <div content>
-          <p class="tce-text-sm tce-text-slate-600">
+          <p class="tce-text-sm">
             This will affect the average
             <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
               >Carbon Intensity</a

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts b/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts
@@ -94,6 +94,6 @@ export const formContext = {
 
 export const questionPanelConfig: ExpansionPanelConfig = {
   startsExpanded: false,
-  buttonStyles: 'material-icons-outlined tce-text-base tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded',
+  buttonStyles: 'material-icons-outlined tce-text-base hover:tce-bg-slate-200 hover:tce-rounded',
   contentContainerStyles: 'tce-px-3 tce-py-2 tce-bg-slate-100 tce-border tce-border-slate-400 tce-rounded tce-text-sm',
 };
diff --git a/src/app/expansion-panel/expansion-panel.constants.ts b/src/app/expansion-panel/expansion-panel.constants.ts
@@ -6,6 +6,6 @@ export type ExpansionPanelConfig = {
 
 export const defaultConfig: ExpansionPanelConfig = {
   startsExpanded: true,
-  buttonStyles: 'material-icons-outlined tce-text tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded',
+  buttonStyles: 'material-icons-outlined tce-text hover:tce-bg-slate-200 hover:tce-rounded',
   contentContainerStyles: '',
 };
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>tech-carbon-estimator</title>
+    <title>Technology Carbon Estimator</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />

diff --git a/src/package-index.html b/src/package-index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Technology Carbon Estimator</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
+  </head>
+  <body class="dark:tce-bg-slate-800 dark:tce-text-slate-50">
+    <noscript
+      >Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript
+    >
+    <tech-carbon-estimator></tech-carbon-estimator>
+  </body>
+</html>
diff --git a/src/package-styles.css b/src/package-styles.css
@@ -0,0 +1,9 @@
+input, select {
+  @apply dark:tce-text-slate-600
+}
+
+@media (prefers-color-scheme: dark) {
+  .apexcharts-legend-text {
+    @apply !tce-text-slate-50
+  }
+}
diff --git a/src/styles.css b/src/styles.css
@@ -12,4 +12,4 @@
 
 .tce-button-reset, .tce-button-assumptions {
   @apply tce-bg-slate-200 tce-text-slate-800 hover:tce-bg-slate-300 tce-rounded
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,4 +12,4 @@ @@
     .tce-button-reset, .tce-button-assumptions {
       @apply tce-bg-slate-200 tce-text-slate-800 hover:tce-bg-slate-300 tce-rounded
-    }
+    }