Merge pull request #107 from openinfradev/bugfix-dark-mode

Trivial. Dark mode Tuning
openinfradev · Jul 5, 2024 · 2114023 · 2114023
2 parents 392fcdc + 5d2adf7
commit 2114023
Show file tree

Hide file tree

Showing 27 changed files with 89 additions and 221 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "tksui-components",
-    "version": "0.7.12",
+    "version": "0.7.14",
     "private": false,
     "type": "module",
     "module": "lib/esm/index.js",

diff --git a/src/components/icon/TIconOriginal.tsx b/src/components/icon/TIconOriginal.tsx
@@ -1,3 +1,5 @@
+import themeToken from '~style/designToken/ThemeToken.module.scss';
+
 
 /* eslint-disable max-len */
 const TOriginalImage = {
@@ -14,31 +16,29 @@ const TOriginalImage = {
     ),
     t_checkbox_read_only_on: (
         <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-            <g>
-                <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC'/>
-                <path d='M6.58327 11.25L3.7666 8.41667L4.59993 7.58333L6.58327 9.55L11.3999 4.75L12.2333 5.6L6.58327 11.25Z' fill='#71747A'
-                      stroke='none'/>
-            </g>
+            <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill={themeToken.tGrayColor1} stroke={themeToken.tGrayColor3} />
+            <path d='M6.58327 11.25L3.7666 8.41667L4.59993 7.58333L6.58327 9.55L11.3999 4.75L12.2333 5.6L6.58327 11.25Z' fill={themeToken.tGrayColor5}
+                  stroke='none'/>
         </svg>
     ),
     t_checkbox_read_only_off: (
         <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <g>
-                <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC'/>
+                <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill={themeToken.tGrayColor1} stroke={themeToken.tGrayColor3} />
             </g>
         </svg>
     ),
     t_checkbox_disabled_on: (
         <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-            <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC' />
-            <path d='M6.58327 11.25L3.7666 8.41667L4.59993 7.58333L6.58327 9.55L11.3999 4.75L12.2333 5.6L6.58327 11.25Z' fill='#B8BABC'
+            <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill={themeToken.tGrayColor1} stroke={themeToken.tGrayColor3} />
+            <path d='M6.58327 11.25L3.7666 8.41667L4.59993 7.58333L6.58327 9.55L11.3999 4.75L12.2333 5.6L6.58327 11.25Z' fill={themeToken.tGrayColor3}
                   stroke='none'/>
         </svg>
     ),
     t_checkbox_disabled_off: (
         <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <g>
-                <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC'/>
+                <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill={themeToken.tGrayColor1} stroke={themeToken.tGrayColor3} />
             </g>
         </svg>
     ),
@@ -68,7 +68,7 @@ const TOriginalImage = {
 
     ),
     t_radio_disabled_off: (
-        <svg width='16' height='16' viewBox='0 0 16 16' fill='#F4F4F4' stroke='#B8BABC' xmlns='http://www.w3.org/2000/svg'>
+        <svg width='16' height='16' viewBox='0 0 16 16' fill={themeToken.tGrayColor1} stroke={themeToken.tGrayColor3} xmlns='http://www.w3.org/2000/svg'>
             <g>
                 <circle id='Ellipse 3258' cx='8' cy='8' r='7.5' />
             </g>

diff --git a/src/styles/component/data-container/data-grid/TDataGrid.scss b/src/styles/component/data-container/data-grid/TDataGrid.scss
@@ -44,14 +44,14 @@
 
         --ag-checkbox-checked-color: #{$t-primary-color};
         --ag-checkbox-indeterminate-color: #{$t-primary-color};
-        --ag-checkbox-unchecked-color: #{$t-border-color--default};
+        --ag-checkbox-unchecked-color: #{$t-gray-color-3};
         --ag-checkbox-border-radius: 50%;
         --ag-checkbox-background-color: transparent;
 
         --ag-input-focus-box-shadow: none;
 
         --ag-cell-horizontal-padding: 32px;
-        --ag-row-border-color: #{$t-grid-border-color--02};
+        --ag-row-border-color: #{$t-blue-gray-color-2};
 
         --ag-header-cell-hover-background-color: #{$t-blue-gray-color-3};
         --ag-header-background-color: #{$t-white-color};
@@ -115,7 +115,7 @@
         }
 
         .ag-overlay-no-rows-wrapper {
-            border-bottom: 1px solid $t-grid-border-color--01;
+            border-bottom: 1px solid $t-blue-gray-color-2;
         }
 
         .ag-layout-print .ag-center-cols-clipper,

diff --git a/src/styles/component/data-container/drop-holder/TDropHolder.scss b/src/styles/component/data-container/drop-holder/TDropHolder.scss
@@ -48,11 +48,6 @@
             &.t-drop-holder__items__item--divider {
                 border-top: 1px solid $t-blue-gray-color-3;
             }
-            &.t-drop-holder__items__item--selected {
-                background: $t-background-color--hover;
-                color: $t-font-color--selected;
-                font-weight: $t-font-weight--selected;
-            }
             &.t-drop-holder__items__item--disabled {
                 pointer-events: none;
                 cursor: default;
@@ -61,8 +56,8 @@
 
             .t-drop-holder__items__item__checkbox .t-checkbox__container:focus .t-checkbox__icon { outline: none; }
 
-            &.t-drop-holder__items__item--focused { background: $t-background-color--hover; }
-            &:hover { background: $t-background-color--hover; }
+            &.t-drop-holder__items__item--focused { background: $t-blue-gray-color-2; }
+            &:hover { background: $t-blue-gray-color-2; }
         }
 
     }

diff --git a/src/styles/component/data-container/highlight-text/THighlightText.scss b/src/styles/component/data-container/highlight-text/THighlightText.scss
@@ -1,7 +1,7 @@
 
 
 mark {
-    background: $t-primary-color--tint-7;
+    background: $t-secondary-color-blue;
 }
 
 
diff --git a/src/styles/component/data-container/pagination/TPagination.scss b/src/styles/component/data-container/pagination/TPagination.scss
@@ -17,7 +17,6 @@
             @include icon-color($t-gray-color-4);
 
             &:hover { cursor: pointer; @include icon-color($t-primary-color);}
-            &:active { @include icon-color($t-primary-color--shade-2)}
 
             &.t-pagination__nav-button-container__button--disabled {
                 @include icon-color($t-gray-color-2);
@@ -82,7 +81,7 @@
 
             &.t-number-field--failure {
                 .t-number-field__container {
-                    border-color: $t-status-color--error;
+                    border-color: $t-status-color-error;
                 }
             }
 

diff --git a/src/styles/component/guide/badge/TBadge.scss b/src/styles/component/guide/badge/TBadge.scss
@@ -3,7 +3,7 @@
     display: inline-flex;
 
     .t-badge-content {
-        background: $t-status-color--error;
+        background: $t-status-color-error;
 
         position: absolute;
         border-radius: 50px;
@@ -35,4 +35,4 @@
         }
 
     }
-}
+}
diff --git a/src/styles/component/guide/input-validation-hint/TInputValidationHint.scss b/src/styles/component/guide/input-validation-hint/TInputValidationHint.scss
@@ -18,11 +18,11 @@
             }
 
             &.t-input-validation-hint__rules__item--valid {
-                color: $t-status-color--success;
+                color: $t-status-color-success;
             }
             &.t-input-validation-hint__rules__item--invalid {
-                color: $t-status-color--error;
+                color: $t-status-color-error;
             }
         }
     }
-}
+}
diff --git a/src/styles/component/guide/toast/TToast.scss b/src/styles/component/guide/toast/TToast.scss
@@ -1,11 +1,7 @@
 .tks-toast {
 
     --toastify-color-light: #{$t-white-color};
-
-    --toastify-text-color-info: #{$t-black-color};
-    --toastify-text-color-success: #{$t-black-color};
-    --toastify-text-color-warning: #{$t-black-color};
-    --toastify-text-color-error: #{$t-black-color};
+    --toastify-text-color-light: #{$t-gray-color-4};
 
     --toastify-color-progress-light: #{$t-primary-color};
     --toastify-color-progress-info: #{$t-primary-color};
@@ -54,9 +50,13 @@
         }
     }
 
-    .Toastify__close-button > svg {
-        width: 20px;
-        height: 20px;
+    .Toastify__close-button {
+        color: $t-black-color;
+
+        & > svg {
+            width: 20px;
+            height: 20px;
+        }
     }
 
     .Toastify__progress-bar {

diff --git a/src/styles/component/guide/tooltip/TTooltip.scss b/src/styles/component/guide/tooltip/TTooltip.scss
@@ -20,7 +20,6 @@
     &.react-tooltip {
         border: 1px solid $t-gray-color-5;
         padding: $t-spacing-16 $t-spacing-16;
-        line-height: $t-line-height-body;
 
         .t-tooltip__title{
             color: $t-gray-color-1;

diff --git a/src/styles/component/input/checkbox-group/TCheckboxGroup.scss b/src/styles/component/input/checkbox-group/TCheckboxGroup.scss
@@ -21,10 +21,10 @@
 
     &.t-checkbox-group--failure {
         @include animation-shake();
-        .t-checkbox-group__message {color: $t-status-color--error;}
+        .t-checkbox-group__message {color: $t-status-color-error;}
     }
     &.t-checkbox-group--success {
-        .t-checkbox-group__message {color: $t-status-color--success;}
+        .t-checkbox-group__message {color: $t-status-color-success;}
     }
 }
 
diff --git a/src/styles/component/input/checkbox/TCheckbox.scss b/src/styles/component/input/checkbox/TCheckbox.scss
@@ -52,11 +52,11 @@
 
         @include animation-shake();
 
-        .t-text-field__container {border-color: $t-status-color--error;}
-        .t-checkbox__message {color: $t-status-color--error;}
+        .t-text-field__container {border-color: $t-status-color-error;}
+        .t-checkbox__message {color: $t-status-color-error;}
     }
     &.t-checkbox--success {
-        .t-text-field__container {border-color: $t-status-color--success;}
-        .t-checkbox__message {color: $t-status-color--success;}
+        .t-text-field__container {border-color: $t-status-color-success;}
+        .t-checkbox__message {color: $t-status-color-success;}
     }
 }
diff --git a/src/styles/component/input/dropdown/TDropdown.scss b/src/styles/component/input/dropdown/TDropdown.scss
@@ -142,7 +142,7 @@
             &.t-dropdown__items__item--selected {
                 background: $t-blue-gray-color-1;
                 color: $t-font-color--selected;
-                font-weight: $t-font-weight--selected;
+                @include typo-body-2;
             }
 
             .t-dropdown__items__item__checkbox .t-checkbox__container:focus .t-checkbox__icon { outline: none; }
@@ -157,7 +157,7 @@
                 }
             }
 
-            &.t-dropdown__items__item--focused { background: $t-background-color--hover; }
+            &.t-dropdown__items__item--focused { background: $t-blue-gray-color-2; }
             &:focus-within { background: $t-blue-gray-color-1; }
             &:hover {
                 background: $t-blue-gray-color-1;
@@ -184,13 +184,13 @@
 
     &.t-dropdown--failure {
         @include animation-shake();
-        .t-dropdown__control {border-color: $t-status-color--error;color: $t-status-color--error;}
-        .t-dropdown__details {color: $t-status-color--error;}
+        .t-dropdown__control {border-color: $t-status-color-error;color: $t-status-color-error;}
+        .t-dropdown__details {color: $t-status-color-error;}
     }
 
     &.t-dropdown--success {
-        .t-dropdown__control {border-color: $t-status-color--success; color: $t-status-color--success;}
-        .t-dropdown__details {color: $t-status-color--success;}
+        .t-dropdown__control {border-color: $t-status-color-success; color: $t-status-color-success;}
+        .t-dropdown__details {color: $t-status-color-success;}
     }
 
     &.t-dropdown--underline .t-dropdown__control {

diff --git a/src/styles/component/input/number-field/TNumberField.scss b/src/styles/component/input/number-field/TNumberField.scss
@@ -140,12 +140,12 @@
 
         @include animation-shake();
 
-        .t-number-field__container {border-color: $t-status-color--error;}
-        .t-number-field__details {color: $t-status-color--error;}
+        .t-number-field__container {border-color: $t-status-color-error;}
+        .t-number-field__details {color: $t-status-color-error;}
     }
     &.t-number-field--success {
-        .t-number-field__container {border-color: $t-status-color--success;}
-        .t-number-field__details {color: $t-status-color--success;}
+        .t-number-field__container {border-color: $t-status-color-success;}
+        .t-number-field__details {color: $t-status-color-success;}
     }
 
 }
diff --git a/src/styles/component/input/radio-group/TRadioGroup.scss b/src/styles/component/input/radio-group/TRadioGroup.scss
@@ -23,10 +23,10 @@
 
     &.t-radio-group--failure {
         @include animation-shake();
-        .t-radio-group__message {color: $t-status-color--error;}
+        .t-radio-group__message {color: $t-status-color-error;}
     }
     &.t-radio-group--success {
-        .t-radio-group__message {color: $t-status-color--success;}
+        .t-radio-group__message {color: $t-status-color-success;}
     }
 }
 
diff --git a/src/styles/component/input/radio/TRadio.scss b/src/styles/component/input/radio/TRadio.scss
@@ -1,5 +1,4 @@
 .t-radio {
-    line-height: $t-line-height-header;
 
     .t-radio__container {
         display: flex;
@@ -9,7 +8,7 @@
         outline: none;
 
         .t-radio__icon { border-radius: 2px; }
-        .t-radio__label { @include typo-body-3; }
+        .t-radio__label { @include typo-body-3; color: $t-black-color; }
 
         &:is(:focus-within, :hover) .t-radio__icon.t-radio__icon--deselected svg { fill: $t-white-color; stroke: $t-primary-color; }
     }

diff --git a/src/styles/component/input/switch/TSwitch.scss b/src/styles/component/input/switch/TSwitch.scss
@@ -1,5 +1,4 @@
 .t-switch {
-    line-height: $t-line-height-header;
     display: flex;
     align-items: center;
 

diff --git a/src/styles/component/input/text-area/TTextArea.scss b/src/styles/component/input/text-area/TTextArea.scss
@@ -2,7 +2,6 @@
     position: relative;
     display: inline-block;
     width: 100%;
-    line-height: $t-line-height-default;
 
 
     .t-text-area__label {
@@ -100,12 +99,12 @@
 
         @include animation-shake();
 
-        .t-text-area__container {border-color: $t-status-color--error;}
-        .t-text-area__details {color: $t-status-color--error;}
+        .t-text-area__container {border-color: $t-status-color-error;}
+        .t-text-area__details {color: $t-status-color-error;}
     }
     &.t-text-area--success {
-        .t-text-area__container {border-color: $t-status-color--success;}
-        .t-text-area__details {color: $t-status-color--success;}
+        .t-text-area__container {border-color: $t-status-color-success;}
+        .t-text-area__details {color: $t-status-color-success;}
     }
 
 }
diff --git a/src/styles/component/input/text-array-field/TTextArrayField.scss b/src/styles/component/input/text-array-field/TTextArrayField.scss
@@ -34,10 +34,10 @@
 
     &.t-text-array-field--failure {
         @include animation-shake();
-        border-color: $t-status-color--error;
+        border-color: $t-status-color-error;
 
         .t-text-array-field__message {
-            color: $t-status-color--error;
+            color: $t-status-color-error;
         }
     }
 

diff --git a/src/styles/component/input/text-field/TTextField.scss b/src/styles/component/input/text-field/TTextField.scss
@@ -158,17 +158,17 @@
 
         @include animation-shake();
         .t-text-field__container {
-            border-color: $t-status-color--error;
-            .t-text-field__container__counter__counted {color: $t-status-color--error;}
+            border-color: $t-status-color-error;
+            .t-text-field__container__counter__counted {color: $t-status-color-error;}
         }
-        .t-text-field__details {color: $t-status-color--error;}
+        .t-text-field__details {color: $t-status-color-error;}
     }
     &.t-text-field--success {
         .t-text-field__container {
-            border-color: $t-status-color--success !important;
-            .t-text-field__container__counter__counted {color: $t-status-color--success;}
+            border-color: $t-status-color-success !important;
+            .t-text-field__container__counter__counted {color: $t-status-color-success;}
         }
-        .t-text-field__details {color: $t-status-color--success;}
+        .t-text-field__details {color: $t-status-color-success;}
     }
 
 }