From ea66c420ff5bb63d8facbeab8a3a6e49862abe3a Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Wed, 15 Mar 2023 22:16:03 +0700 Subject: [PATCH] style: Validation states --- scss/themes/default/_dark.scss | 18 +++++++++--------- scss/themes/default/_light.scss | 18 +++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/scss/themes/default/_dark.scss b/scss/themes/default/_dark.scss index 58f04ec9..2a8d71bf 100644 --- a/scss/themes/default/_dark.scss +++ b/scss/themes/default/_dark.scss @@ -71,9 +71,9 @@ #{$✨}mark-background-color: #{$azure-750}; #{$✨}mark-color: #{$white}; - // Inserted () & Deleted () - #{$✨}ins-color: #{desaturate($jade-350, 25%)}; - #{$✨}del-color: #{desaturate($red-400, 25%)}; + // Inserted () & Deleted () + #{$✨}ins-color: #{mix($jade-450, $zinc-200)}; + #{$✨}del-color: #{mix($red-500, $zinc-200)}; // Blockquote #{$✨}blockquote-border-color: var(#{$✨}muted-border-color); @@ -115,11 +115,11 @@ #{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color); #{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color); #{$✨}form-element-disabled-opacity: 0.5; - #{$✨}form-element-invalid-border-color: #{desaturate($red-400, 25%)}; - #{$✨}form-element-invalid-active-border-color: #{desaturate($red-500, 25%)}; + #{$✨}form-element-invalid-border-color: #{mix($red-500, $slate-600)}; + #{$✨}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)}; #{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color); - #{$✨}form-element-valid-border-color: #{desaturate($jade-350, 25%)}; - #{$✨}form-element-valid-active-border-color: #{desaturate($jade-450, 25%)}; + #{$✨}form-element-valid-border-color: #{mix($jade-450, $slate-600)}; + #{$✨}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)}; #{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color); // Focus for buttons, radio and select @@ -223,8 +223,8 @@ // Form validation icons @if map.get($modules, "forms/basics") { - #{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(desaturate($jade-350, 25%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - #{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(desaturate($red-400, 25%))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + #{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-200))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + #{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-200))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } // Search icon diff --git a/scss/themes/default/_light.scss b/scss/themes/default/_light.scss index 340a7aa3..fbf5f4e6 100644 --- a/scss/themes/default/_light.scss +++ b/scss/themes/default/_light.scss @@ -71,9 +71,9 @@ #{$✨}mark-background-color: #{mix($amber-100, $amber-50)}; #{$✨}mark-color: #{$zinc-950}; - // Inserted () & Deleted () - #{$✨}ins-color: #{$jade-550}; - #{$✨}del-color: #{$red-650}; + // Inserted () & Deleted () + #{$✨}ins-color: #{mix($jade-450, $zinc-750)}; + #{$✨}del-color: #{mix($red-500, $zinc-750)}; // Blockquote #{$✨}blockquote-border-color: var(#{$✨}muted-border-color); @@ -115,11 +115,11 @@ #{$✨}form-element-disabled-background-color: var(#{$✨}form-element-background-color); #{$✨}form-element-disabled-border-color: var(#{$✨}form-element-border-color); #{$✨}form-element-disabled-opacity: 0.5; - #{$✨}form-element-invalid-border-color: #{$red-650}; - #{$✨}form-element-invalid-active-border-color: #{$red-700}; + #{$✨}form-element-invalid-border-color: #{mix($red-500, $zinc-350)}; + #{$✨}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)}; #{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color); - #{$✨}form-element-valid-border-color: #{$jade-550}; - #{$✨}form-element-valid-active-border-color: #{$jade-600}; + #{$✨}form-element-valid-border-color: #{mix($jade-450, $zinc-350)}; + #{$✨}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)}; #{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color); // Focus for buttons, radio and select @@ -223,8 +223,8 @@ // Form validation icons @if map.get($modules, "forms/basics") { - #{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($jade-550)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - #{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($red-650)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + #{$✨}icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($jade-450, $zinc-750))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + #{$✨}icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb(mix($red-500, $zinc-750))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } // Search icon