From 5a1a3852e22fc2aecdde3b22802ab15f36d94b7f Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Thu, 29 Dec 2022 18:10:07 +0700 Subject: [PATCH] style: Improve default theme --- scss/themes/default/_dark.scss | 28 ++++++++++++++-------------- scss/themes/default/_light.scss | 30 +++++++++++++++--------------- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/scss/themes/default/_dark.scss b/scss/themes/default/_dark.scss index efd284f5..d65e68d6 100644 --- a/scss/themes/default/_dark.scss +++ b/scss/themes/default/_dark.scss @@ -17,9 +17,9 @@ // Primary colors #{$✨}primary: #{$azure-350}; - #{$✨}primary-hover: #{$azure-300}; + #{$✨}primary-hover: #{$azure-250}; #{$✨}primary-underline: #{rgba($azure-350, 0.5)}; - #{$✨}primary-underline-hover: var(#{$✨}primary); + #{$✨}primary-underline-hover: var(#{$✨}primary-hover); #{$✨}primary-background: #{$azure-600}; #{$✨}primary-background-hover: #{$azure-550}; #{$✨}primary-border: var(#{$✨}primary-background); @@ -29,9 +29,9 @@ // Secondary colors #{$✨}secondary: #{$zinc-350}; - #{$✨}secondary-hover: #{$slate-300}; + #{$✨}secondary-hover: #{$zinc-250}; #{$✨}secondary-underline: #{rgba($zinc-350, 0.5)}; - #{$✨}secondary-underline-hover: var(#{$✨}secondary); + #{$✨}secondary-underline-hover: var(#{$✨}secondary-hover); #{$✨}secondary-background: #{$slate-650}; #{$✨}secondary-background-hover: #{$slate-600}; #{$✨}secondary-border: var(#{$✨}secondary-background); @@ -41,9 +41,9 @@ // Contrast colors #{$✨}contrast: #{$slate-100}; - #{$✨}contrast-hover: #{$slate-50}; + #{$✨}contrast-hover: #{$white}; #{$✨}contrast-underline: #{rgba($slate-100, 0.5)}; - #{$✨}contrast-underline-hover: var(#{$✨}contrast); + #{$✨}contrast-underline-hover: var(#{$✨}contrast-hover); #{$✨}contrast-background: #{$slate-50}; #{$✨}contrast-background-hover: #{$white}; #{$✨}contrast-border: var(#{$✨}contrast-background); @@ -69,8 +69,8 @@ #{$✨}mark-color: #{$white}; // Inserted () & Deleted () - #{$✨}ins-color: #{$jade-400}; - #{$✨}del-color: #{$red-400}; + #{$✨}ins-color: #{desaturate($jade-350, 25%)}; + #{$✨}del-color: #{desaturate($red-400, 25%)}; // Blockquote #{$✨}blockquote-border-color: var(#{$✨}muted-border-color); @@ -111,11 +111,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-700}; - #{$✨}form-element-invalid-active-border-color: #{$red-650}; + #{$✨}form-element-invalid-border-color: #{desaturate($red-400, 25%)}; + #{$✨}form-element-invalid-active-border-color: #{desaturate($red-500, 25%)}; #{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color); - #{$✨}form-element-valid-border-color: #{$jade-600}; - #{$✨}form-element-valid-active-border-color: #{$jade-550}; + #{$✨}form-element-valid-border-color: #{desaturate($jade-350, 25%)}; + #{$✨}form-element-valid-active-border-color: #{desaturate($jade-450, 25%)}; #{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color); // Focus for buttons, radio and select @@ -219,8 +219,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-600)}' 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-700)}' 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(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"); } // Search icon diff --git a/scss/themes/default/_light.scss b/scss/themes/default/_light.scss index 79fde951..7c2343a1 100644 --- a/scss/themes/default/_light.scss +++ b/scss/themes/default/_light.scss @@ -17,9 +17,9 @@ // Primary colors #{$✨}primary: #{$azure-550}; - #{$✨}primary-hover: #{$azure-600}; + #{$✨}primary-hover: #{$azure-650}; #{$✨}primary-underline: #{rgba($azure-550, 0.5)}; - #{$✨}primary-underline-hover: var(#{$✨}primary); + #{$✨}primary-underline-hover: var(#{$✨}primary-hover); #{$✨}primary-background: #{$azure-550}; #{$✨}primary-background-hover: #{$azure-600}; #{$✨}primary-border: var(#{$✨}primary-background); @@ -29,9 +29,9 @@ // Secondary colors #{$✨}secondary: #{$slate-550}; - #{$✨}secondary-hover: #{$slate-600}; + #{$✨}secondary-hover: #{$slate-650}; #{$✨}secondary-underline: #{rgba($slate-550, 0.5)}; - #{$✨}secondary-underline-hover: var(#{$✨}secondary); + #{$✨}secondary-underline-hover: var(#{$✨}secondary-hover); #{$✨}secondary-background: #{$slate-550}; #{$✨}secondary-background-hover: #{$slate-600}; #{$✨}secondary-border: var(#{$✨}secondary-background); @@ -41,9 +41,9 @@ // Contrast colors #{$✨}contrast: #{$slate-900}; - #{$✨}contrast-hover: #{$slate-950}; + #{$✨}contrast-hover: #{$black}; #{$✨}contrast-underline: #{rgba($slate-900, 0.5)}; - #{$✨}contrast-underline-hover: var(#{$✨}secondary); + #{$✨}contrast-underline-hover: var(#{$✨}secondary-hover); #{$✨}contrast-background: #{$slate-900}; #{$✨}contrast-background-hover: #{$black}; #{$✨}contrast-border: var(#{$✨}contrast-background); @@ -69,7 +69,7 @@ #{$✨}mark-color: #{$zinc-950}; // Inserted () & Deleted () - #{$✨}ins-color: #{$jade-600}; + #{$✨}ins-color: #{$jade-550}; #{$✨}del-color: #{$red-650}; // Blockquote @@ -93,7 +93,7 @@ // Code @if map.get($modules, "content/code") { - #{$✨}code-background-color: #{mix($slate-50, $white, 25%)}; + #{$✨}code-background-color: #{mix($slate-50, $white, 75%)}; #{$✨}code-color: var(#{$✨}muted-color); #{$✨}code-kbd-background-color: var(#{$✨}color); #{$✨}code-kbd-color: var(#{$✨}background-color); @@ -111,11 +111,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-600}; - #{$✨}form-element-invalid-active-border-color: #{$red-650}; + #{$✨}form-element-invalid-border-color: #{$red-650}; + #{$✨}form-element-invalid-active-border-color: #{$red-700}; #{$✨}form-element-invalid-focus-color: var(#{$✨}form-element-invalid-active-border-color); - #{$✨}form-element-valid-border-color: #{$jade-500}; - #{$✨}form-element-valid-active-border-color: #{$jade-550}; + #{$✨}form-element-valid-border-color: #{$jade-550}; + #{$✨}form-element-valid-active-border-color: #{$jade-600}; #{$✨}form-element-valid-focus-color: var(#{$✨}form-element-valid-active-border-color); // Focus for buttons, radio and select @@ -170,7 +170,7 @@ #{$✨}dropdown-border-color: #{$slate-50}; #{$✨}dropdown-box-shadow: var(#{$✨}box-shadow); #{$✨}dropdown-color: var(#{$✨}color); - #{$✨}dropdown-hover-background-color: #{mix($slate-50, $white)}; + #{$✨}dropdown-hover-background-color: #{$slate-50}; } // Loading ([aria-busy=true]) @@ -219,8 +219,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-500)}' 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-600)}' 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($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"); } // Search icon