mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 18:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Improve default theme

Browse source
This commit is contained in:
Lucas Larroche 2022-12-29 18:10:07 +07:00
parent e2f2eb2098
commit 5a1a3852e2
2 changed files with 29 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

28
scss/themes/default/_dark.scss
View file

@ -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 (<ins>) & Deleted (<ins>)
#{$✨}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

30
scss/themes/default/_light.scss
View file

@ -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 (<ins>) & Deleted (<ins>)
#{$✨}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