Feat(css): SASS integration (PR #2007)

Co-authored-by: Pierre Leroux <panacpp@gmail.com> Arthur Le Meur <arthur.lemeur@hotmail.fr>
edrlab · Nov 16, 2023 · 924fb53 · 924fb53
1 parent df2872c
commit 924fb53
Show file tree

Hide file tree

Showing 24 changed files with 1,218 additions and 180 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "i18n-scan": "node ./scripts/translate-scan.js \"src/resources/locales/temp.json\" && sync-i18n --files 'src/resources/locales/*.json' --primary temp --languages en bg ca de el es eu fi fr gl hr it ja ka ko lt nl pt-br pt-pt ru sv zh-cn zh-tw --space \"    \" --finalnewline --newkeysempty && rimraf \"src/resources/locales/temp.json\"",
     "i18n-check": "sync-i18n --files 'src/resources/locales/*.json' --primary en --languages bg ca de el es eu fi fr gl hr it ja ka ko lt nl pt-br pt-pt ru sv zh-cn zh-tw --space \"    \" --finalnewline --newkeysempty",
     "i18n-typed": "node ./scripts/locale-wrap.js \"src/resources/locales/en.json\" \"en.json\" && typed_i18n -i \"en.json\" -o src/typings -l typescript && rimraf \"en.json\"",
-    "style-typed": "tcm \"src/renderer/assets/styles\"",
+    "style-typed": "tcm -p \"src/renderer/assets/styles\" && typed-scss-modules \"src/renderer/assets/styles\" --nameFormat none",
     "ts-unused-exports_": "tcm --namedExports \"src/renderer/assets/styles\" && ts-unused-exports ./tsconfig.json $(find ./src/renderer/assets/styles -name '*.d.ts') || npm run style-typed",
     "ts-unused-exports": "ts-unused-exports ./tsconfig.json --ignoreFiles=\"test/.*\"",
     "ts-prune": "ts-prune --project ./tsconfig.json --ignore \"(/main|/common|/test|/typings|/utils|preprocessor-directives)/.*\"",
@@ -375,6 +375,7 @@
     "mini-css-extract-plugin": "^2.7.6",
     "ncp": "^2.0.0",
     "node-loader": "^2.0.0",
+    "node-sass": "^9.0.0",
     "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
@@ -384,6 +385,7 @@
     "react-svg-loader": "^3.0.3",
     "remote-redux-devtools": "^0.5.16",
     "rimraf": "^5.0.5",
+    "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",

diff --git a/src/renderer/assets/styles/bookDetailsDialog.css b/src/renderer/assets/styles/bookDetailsDialog.css
@@ -251,7 +251,7 @@
   border: none;
   height: 35px;
   background-color: transparent;
-  color: black;
+  color: var(--color-primary);
   font-size: 0.9rem;
   border-bottom: 1px solid #c1c1c1;
 }

diff --git a/src/renderer/assets/styles/components/breadcrumb.css b/src/renderer/assets/styles/components/breadcrumb.css
@@ -15,7 +15,9 @@
   font-size: 16px;
   display: flex;
   align-items: center;
-  color: rgb(59, 59, 59);
+
+  /* color: rgb(59, 59, 59); */
+  color: var(--color-accent);
   position: fixed;
   top: 123px;
   width: calc(100% - 120px);

diff --git a/src/renderer/assets/styles/components/buttons.css b/src/renderer/assets/styles/components/buttons.css
@@ -49,7 +49,7 @@ button {
   background: none;
   border: 0;
   height: 30px;
-  fill: black;
+  fill: var(--color-primary);
   cursor: pointer;
 
   &:hover {
@@ -88,6 +88,7 @@ button {
     height: 14px;
     margin-right: 8px;
     transition: all 0.2s;
+    fill: var(--color-primary);
   }
 
   &.icon_end {
@@ -121,12 +122,14 @@ button {
     width: 14px;
     vertical-align: -2px;
     margin-left: 5px;
+    fill: var(--color-primary);
+
   }
 
   &.button_icon {
     height: 16px;
     padding: 8px 20px;
-    background: white;
+    background: var(--color-secondary);
     overflow: visible;
 
     & input {
@@ -212,7 +215,7 @@ button {
 .button_transparency,
 .button_transparency_icon {
   display: inline-block;
-  color: #000;
+  color: var(--color-primary);
   transition: all 0.2s;
   border-radius: 5px;
   background: rgba(0, 0, 0, 0);
@@ -221,6 +224,10 @@ button {
   font-weight: 600;
   cursor: pointer;
 
+  & svg {
+    fill: var(--color-primary);
+  }
+
   &:hover {
     background: rgba(0, 0, 0, 0.1);
   }

diff --git a/src/renderer/assets/styles/components/dropdown.css b/src/renderer/assets/styles/components/dropdown.css
@@ -101,7 +101,7 @@
   & a,
   & span label {
     text-decoration: none;
-    color: black;
+    color: var(--color-primary);
     padding: 0.7rem;
     text-align: center;
     cursor: pointer;

diff --git a/src/renderer/assets/styles/components/inputs.css b/src/renderer/assets/styles/components/inputs.css
@@ -66,7 +66,7 @@ input[type="search"] {
   border-radius: 0;
 
   /* outline: inherit; */
-  color: black;
+  color: var(--color-primary);
   font-size: 0.9rem;
 
   &::placeholder {
@@ -153,6 +153,7 @@ form[role="search"] {
     font-size: 16px;
     height: 1.2rem;
     width: 14rem;
+    color: black;
     background: var(--color-medium-grey);
     cursor: pointer;
 

diff --git a/src/renderer/assets/styles/components/modals.css b/src/renderer/assets/styles/components/modals.css
@@ -47,11 +47,11 @@
   z-index: 102;
   display: flex;
   flex-direction: column;
-  background-color: white;
+  background-color: var(--color-secondary);
   overflow-y: auto;
   overflow-x: hidden;
   align-content: flex-start;
-  color: #3b3b3b;
+  color: var(--color-primary);;
   position: relative;
   box-sizing: border-box;
 

diff --git a/src/renderer/assets/styles/components/publications.css b/src/renderer/assets/styles/components/publications.css
@@ -79,7 +79,8 @@
       overflow: hidden;
       text-align: center;
       margin: 10px 5%;
-      color: black;
+      color: var(--color-primary);
+      ;
 
       &:not(:first-child) {
         font-size: 90%;
@@ -373,7 +374,8 @@
   & a,
   & span label {
     text-decoration: none;
-    color: black;
+    color: var(--color-primary);
+    ;
     padding: 0.7rem;
     text-align: center;
     cursor: pointer;
@@ -432,7 +434,7 @@
     overflow: hidden;
     text-align: center;
     margin: 10px 5%;
-    color: black;
+    color: var(--color-primary);
   }
 
   & .box {

diff --git a/src/renderer/assets/styles/components/tags.css b/src/renderer/assets/styles/components/tags.css
@@ -57,7 +57,7 @@
   border: none;
   height: 35px;
   background-color: transparent;
-  color: black;
+  color: var(--color-primary);
   font-size: 0.9rem;
   border-bottom: 1px solid #c1c1c1;
 

diff --git a/src/renderer/assets/styles/global.css b/src/renderer/assets/styles/global.css
@@ -1,7 +1,7 @@
 /*
 =-=-= global.css => './partials/variables.css'
 */
-@import url('./partials/variables.css');
+@import url('./partials/variables.scss');
 
 /*
 =-=-= global.css => './partials/mixins.css'
@@ -125,6 +125,7 @@
 
 :root {
   user-select: none;
+  color: var(--color-primary);
 }
 
 *,
@@ -139,7 +140,7 @@ body {
   padding: 0;
   width: 100%;
   font: 1.1rem "Open Sans", sans-serif;
-  background: #fbfbfb;
+  background: var(--color-secondary);
 }
 
 section {
@@ -165,6 +166,15 @@ nav + nav + .breadcrumb + .main {
   top: 181px;
 }
 
+table > * {
+  background-color: var(--color-light-grey);
+  color: black !important;
+}
+
+table tr td {
+  border-bottom: 1px solid black;
+}
+
 /* ============== FAST CLASS ================= */
 
 .anchor_link {

diff --git a/src/renderer/assets/styles/header.css b/src/renderer/assets/styles/header.css
@@ -41,8 +41,8 @@
       margin-right: 60px;
 
       &.active {
-        color: black;
-        border-bottom: 3px solid black;
+        color: var(--color-primary);
+        border-bottom: 3px solid var(--color-primary);
         padding-bottom: 15px;
       }
     }
@@ -87,7 +87,7 @@
     border: none;
     height: 35px;
     background-color: transparent;
-    color: black;
+    color: var(--color-primary);
     font-size: 0.9rem;
   }
 

diff --git a/src/renderer/assets/styles/partials/_screenSizes.scss b/src/renderer/assets/styles/partials/_screenSizes.scss
@@ -0,0 +1,3 @@
+$laptop : 992px;
+$large : 1200px;
+$tablet : 768px;
diff --git a/src/renderer/assets/styles/partials/mixins.css b/src/renderer/assets/styles/partials/mixins.css
@@ -25,10 +25,10 @@
 @define-mixin button_primary {
   position: relative;
   display: inline;
-  border: 1px solid black;
+  border: 1px solid var(--color-primary);
   border-radius: 5px;
   text-align: center;
-  color: black;
+  color:  var(--color-primary);
   text-decoration: none;
   overflow: hidden;
   cursor: pointer;

diff --git a/src/renderer/assets/styles/partials/variables.css b/src/renderer/assets/styles/partials/variables.css
@@ -2,19 +2,36 @@
 =-=-= partials/variables.css
 */
 
-:root {
-  /* Colors */
-  --color-primary: #4d4d4d;
-  --color-secondary: #fff;
-  --color-tertiary: #67a3e0;
-  --color-disabled: #b7b7b7;
-  --color-light-grey: #f1f1f1;
-  --color-medium-grey: #e5e5e5;
-  --color-accent: rgb(0, 188, 212);
-  --color-accent-contrast: #fff;
-  --reader-fontColor: #000;
+@media (prefers-color-scheme: light) {
+  :root {
+    /* Colors */
+    --color-primary: #4d4d4d;
+    --color-secondary: #fff;
+    --color-tertiary: #67a3e0;
+    --color-disabled: #b7b7b7;
+    --color-light-grey: #f1f1f1;
+    --color-medium-grey: #e5e5e5;
+    --color-accent: rgb(0, 188, 212);
+    --color-accent-contrast: #fff;
+    --reader-fontColor: #000;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Colors */
+    --color-primary: #fff;
+    --color-secondary: #4d4d4d;
+    --color-tertiary: #67a3e0;
+    --color-disabled: #b7b7b7;
+    --color-light-grey: #f1f1f1;
+    --color-medium-grey: #e5e5e5;
+    --color-accent: rgb(0, 188, 212);
+    --color-accent-contrast: #fff;
+    --reader-fontColor: #fff;
+  }
 }
 
 .___DEBUG___PARTIALS_VARIABLES_CSS {
   display: none;
-}
+}
diff --git a/src/renderer/assets/styles/partials/variables.css.map b/src/renderer/assets/styles/partials/variables.css.map
diff --git a/src/renderer/assets/styles/partials/variables.scss b/src/renderer/assets/styles/partials/variables.scss
@@ -0,0 +1,42 @@
+/*
+=-=-= partials/variables.css
+*/
+@media (prefers-color-scheme: light) {
+  :root {
+    /* Colors */
+    --color-primary: #4d4d4d;
+    --color-secondary: #fff;
+    --color-tertiary: #67a3e0;
+    --color-disabled: #b7b7b7;
+    --color-light-grey: #f1f1f1;
+    --color-medium-grey: #e5e5e5;
+    --color-accent: rgb(0, 188, 212);
+    --color-accent-contrast: #fff;
+    --reader-fontColor: #000;
+    --color-button-primary: rgba(16, 83, 200, 1);
+    --color-button-secondary: rgba(16, 83, 200, 0.05);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Colors */
+    --color-primary: #fff;
+    --color-secondary: #4d4d4d;
+    --color-tertiary: #67a3e0;
+    --color-disabled: #b7b7b7;
+    --color-light-grey: #f1f1f1;
+    --color-medium-grey: #e5e5e5;
+    --color-accent: rgb(0, 188, 212);
+    --color-accent-contrast: #fff;
+    --reader-fontColor: #fff;
+    --color-button-primary: rgba(16, 83, 200, 1);
+    --color-button-secondary: rgba(16, 83, 200, 0.05);
+
+
+  }
+}
+
+.___DEBUG___PARTIALS_VARIABLES_CSS {
+  display: none;
+}
diff --git a/src/renderer/assets/styles/reader-app.css b/src/renderer/assets/styles/reader-app.css
@@ -464,7 +464,7 @@ button {
       }
 
       & > .active {
-        color: black;
+        color: var(--color-primary);
         border-bottom: 3px solid black;
         padding-bottom: 15px;
       }
@@ -1266,7 +1266,7 @@ input[type=radio] + label {
   left: 50%;
   background: white;
   font-size: 16px;
-  color: black;
+  color: var(--color-primary);
   text-align: center;
   box-shadow: 0 0 46px 0 rgba(0, 0, 0, 0.12);
   transform: translateX(-50%) translateY(0%);

diff --git a/src/renderer/library/components/settings/LanguageSettings.tsx b/src/renderer/library/components/settings/LanguageSettings.tsx
@@ -38,7 +38,7 @@ class LanguageSettings extends React.Component<IProps, undefined> {
         const { __ } = this.props;
         return (
             <>
-                <section>
+                <section className="settings_language-section">
                     <div className={stylesGlobal.heading}>
                         <h2>{__("settings.language.languageChoice")}</h2>
                     </div>

diff --git a/src/renderer/library/components/settings/SessionSettings.tsx b/src/renderer/library/components/settings/SessionSettings.tsx
@@ -43,7 +43,7 @@ class SessionSettings extends React.Component<IProps> {
         const { __ } = this.props;
         return (
             <>
-                <section>
+                <section className="settings_session-section">
                     <div className={stylesGlobal.heading}>
                         <h2>{__("settings.session.title")}</h2>
                     </div>