reset merging with ankita/docs

Signed-off-by: huongg <[email protected]>
kedro-org · Apr 29, 2024 · 43603e3 · 43603e3
2 parents 90650de + 4ddbba2
commit 43603e3
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 81 deletions.
diff --git a/.readthedocs.yml b/.readthedocs.yml
@@ -9,6 +9,13 @@ build:
   tools:
     python: "3.9"
     nodejs: "19"
+  jobs:
+    post_checkout:
+      - git fetch --unshallow || true
+    pre_build:
+      - pip freeze
+      - python -m sphinx -WETan -j auto -D language=en -b linkcheck -d _build/doctrees docs/source _build/linkcheck
+
 
 sphinx:
   builder: html

diff --git a/docs/Makefile b/docs/Makefile
diff --git a/docs/build-docs.sh b/docs/build-docs.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+set -e
+
+# Exit script if you try to use an uninitialized variable.
+set -o nounset
+
+action=$1
+
+if [ "$action" == "linkcheck" ]; then
+  sphinx-build -WETan -j auto -D language=en -b linkcheck -d docs/build/doctrees docs/source docs/build/linkcheck
+elif [ "$action" == "docs" ]; then
+  sphinx-build -WETa --keep-going -j auto -D language=en -b html -d docs/build/doctrees docs/source docs/build/html
+fi
diff --git a/docs/make.bat b/docs/make.bat
diff --git a/src/components/settings-modal/settings-modal.js b/src/components/settings-modal/settings-modal.js
@@ -104,13 +104,6 @@ const SettingsModal = ({
       >
         <div className="pipeline-settings-modal__content">
           <div className="pipeline-settings-modal__group">
-            <div className="pipeline-settings-modal__header">
-              <div className="pipeline-settings-modal__name">Name</div>
-              <div className="pipeline-settings-modal__state">State</div>
-              <div className="pipeline-settings-modal__description">
-                Description
-              </div>
-            </div>
             <SettingsModalRow
               id="isPrettyName"
               name={settingsConfig['isPrettyName'].name}

diff --git a/src/components/settings-modal/settings-modal.scss b/src/components/settings-modal/settings-modal.scss
@@ -2,13 +2,17 @@
 @use '../../styles/mixins' as mixins;
 
 .kui-theme--light {
-  --color-modal-header-text: #{colors.$black-700};
+  --color-modal-header-text: #{colors.$black-0};
   --color-upgrade-reminder-text: #{colors.$blue-300};
+  --color-modal-table-text: #{colors.$black-600};
+  --color-modal-table-description: #{colors.$black-900-70};
 }
 
 .kui-theme--dark {
-  --color-modal-header-text: #{colors.$black-0};
+  --color-modal-header-text: #{colors.$black-300};
   --color-upgrade-reminder-text: #{colors.$yellow-300};
+  --color-modal-table-text: #{colors.$white-900-85};
+  --color-modal-table-description: #{colors.$white-900-70};
 }
 
 .pipeline-settings-modal {
@@ -45,32 +49,29 @@
 
 .pipeline-settings-modal__column {
   margin: 1.145em 0;
-}
-
-.pipeline-settings-modal__column,
-.pipeline-settings-modal__header {
   align-items: baseline;
   display: flex;
   flex-wrap: wrap;
   font-size: 1.4em;
 }
 
-.pipeline-settings-modal__header {
-  margin-bottom: 10px;
-  color: var(--color-modal-header-text);
-}
-
 .pipeline-settings-modal__subtitle {
   margin-bottom: 24px;
   font-size: 1.8em;
 }
 
 .pipeline-settings-modal__name {
   @include mixins.flexColumn(3);
+
+  color: var(--color-modal-table-text);
+  font-weight: 500;
 }
 
 .pipeline-settings-modal__description {
   @include mixins.flexColumn(6);
+
+  color: var(--color-modal-table-description);
+  font-weight: 500;
 }
 
 .pipeline-settings-modal__state {

diff --git a/src/components/ui/button/button.scss b/src/components/ui/button/button.scss
@@ -10,15 +10,15 @@ $secondary-underline-offset-hover: 4px;
 
 .kui-theme--light {
   --color-button--border: #{colors.$black-900};
-  --color-button--border--disabled: #{colors.$grey-400};
+  --color-button--border--disabled: #{colors.$black-900};
   --color-button__text--hover: #{colors.$white-600};
   --color-button__text: #{colors.$black-800};
   --color-secondary-active: #{colors.$white-100};
 }
 
 .kui-theme--dark {
   --color-button--border: #{colors.$white-0};
-  --color-button--border--disabled: #{colors.$grey-900};
+  --color-button--border--disabled: #{colors.$white-900-30};
   --color-button__text--hover: #{colors.$black-800};
   --color-button__text: #{colors.$white-600};
   --color-secondary-active: #{colors.$slate-0};

diff --git a/src/components/ui/modal/modal.scss b/src/components/ui/modal/modal.scss
@@ -10,14 +10,14 @@ $duration-visibility: 0.4s;
 .kui-theme--light {
   --color-modal-bg: #{colors.$black-700};
   --color-modal-content: #{colors.$white-0};
-  --color-modal-title: #{colors.$black-800};
+  --color-modal-title: #{colors.$black-900};
   --color-modal-description: #{colors.$black-700};
 }
 
 .kui-theme--dark {
   --color-modal-bg: #{colors.$slate-900};
   --color-modal-content: #{colors.$slate-0};
-  --color-modal-title: #{colors.$white-600};
+  --color-modal-title: #{colors.$white-0};
   --color-modal-description: #{colors.$black-0};
 }
 
@@ -85,6 +85,7 @@ $duration-visibility: 0.4s;
   width: 100%;
   color: var(--color-modal-title);
   margin-bottom: $size-spacing;
+  font-weight: 500;
 }
 
 .modal__description {

diff --git a/src/components/ui/toggle/toggle.scss b/src/components/ui/toggle/toggle.scss
@@ -2,16 +2,20 @@
 
 .kui-theme--light {
   --color-toggle-on: #{colors.$blue-600};
-  --color-toggle-on-bar: #{colors.$ocean-0};
-  --color-toggle-off: #{colors.$slate-0};
-  --color-toggle-off-bar: #{colors.$grey-400};
+  --color-toggle-on-bar: #{colors.$blue-600};
+  --color-toggle-off: #{colors.$black-900};
+  --color-toggle-off-bar: #{colors.$black-900-30};
+  --color-toggle-on-label: #{colors.$blue-600};
+  --color-toggle-off-label: #{colors.$black-800};
 }
 
 .kui-theme--dark {
   --color-toggle-on: #{colors.$blue-0};
   --color-toggle-on-bar: #{colors.$blue-0};
   --color-toggle-off: #{colors.$white-0};
-  --color-toggle-off-bar: #{colors.$black-400};
+  --color-toggle-off-bar: #{colors.$white-900-30};
+  --color-toggle-on-label: #{colors.$blue-0};
+  --color-toggle-off-label: #{colors.$white-600};
 }
 
 .pipeline-toggle {
@@ -40,6 +44,11 @@
   padding: 0 0 0 2.8em;
   cursor: pointer;
   user-select: none;
+  color: var(--color-toggle-off-label);
+}
+
+.pipeline-toggle-input:checked + .pipeline-toggle-label {
+  color: var(--color-toggle-on-label);
 }
 
 .pipeline-toggle-label::before,
@@ -67,6 +76,7 @@
   background-color: var(--color-toggle-off);
   border-radius: 50%;
   transition: opacity 0.15s ease, transform 0.15s ease;
+  color: var(--color-toggle-on-label);
 }
 
 [data-whatinput='keyboard'] input:focus + .pipeline-toggle-label::before {

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -66,6 +66,13 @@ $white-700: #d3d6d9;
 $white-800: #ccd0d3;
 $white-900: #c6cace;
 
+// -- Primary Transparency --//
+$black-900-30: #0000004d; // black-900 with 30% opacity
+$black-900-70: #000000b3; // black-900 with 70% opacity
+$white-900-30: #ffffff4d; // white-900 with 30% opacity
+$white-900-70: #ffffffb3; // white-900 with 70% opacity
+$white-900-85: #ffffffd9; // white-900 with 85% opacity
+
 // -- Secondary -- //
 $grey-0: #fdfdfd;
 $grey-100: #eaebed;