mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-05-01 21:39:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit 🚀

Browse source
This commit is contained in:
Lucas 2019-11-27 15:31:49 +07:00
commit 16c7596319
30 changed files with 5996 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

137
scss/themes/_dark.scss Normal file
View file

@ -0,0 +1,137 @@
/**
* Dark theme (Auto)
* Automatically enabled if user has Dark mode enabled
*/
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
// Document
--background: #{darken($grey-900, 6%)};
// Typography
--text: #{$grey-300};
--h1: #{$grey-50};
--h2: #{$grey-100};
--h3: #{$grey-200};
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50};
--secondary-focus: #{rgba($grey-200, .25)};
--secondary-inverse: #{$grey-900};
// Form elements
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)};
// Card
--card-background: #{darken($grey-900, 2%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-border: #{mix($grey-800, $grey-900)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{desaturate($red-700, 10%)};
--code-color-2: #{desaturate($primary-500, 40%)};
// Badge
--badge-background: #{$grey-800};
--badge-text: #{$grey-300};
// Table
--table-background: #{darken($grey-900, 4%)};
--table-border: #{darken($grey-900, 6%)};
}
}
/**
* Dark theme (Forced)
* Enabled if forced with data-theme="dark"
*/
[data-theme="dark"] {
// Document
--background: #{darken($grey-900, 6%)};
// Typography
--text: #{$grey-300};
--h1: #{$grey-50};
--h2: #{$grey-100};
--h3: #{$grey-200};
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50};
--secondary-focus: #{rgba($grey-200, .25)};
--secondary-inverse: #{$grey-900};
// Form elements
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)};
// Card
--card-background: #{darken($grey-900, 2%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
// Code
--code-background: #{darken($grey-900, 4%)};
--code-border: #{mix($grey-800, $grey-900)};
--code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{desaturate($red-700, 10%)};
--code-color-2: #{desaturate($primary-500, 40%)};
// Badge
--badge-background: #{$grey-800};
--badge-text: #{$grey-300};
// Table
--table-background: #{darken($grey-900, 4%)};
--table-border: #{darken($grey-900, 6%)};
}

63
scss/themes/_light.scss Normal file
View file

@ -0,0 +1,63 @@
/**
* Light theme (Default)
* Can be forced with data-theme="light"
*/
[data-theme="light"],
:root:not([data-theme="dark"]) {
// Document
--background: #{$white};
// Typography
--text: #{$grey-700};
--h1: #{$grey-900};
--h2: #{$grey-800};
--h3: #{$grey-700};
--h4: #{$grey-600};
--h5: #{$grey-500};
--h6: #{$grey-400};
--mark: #{rgba($amber-200, .5)};
// Primary Call-to-Action
--primary: #{$primary-600};
--primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white};
// Secondary Call-to-Action
--secondary: #{mix($grey-700, $grey-800)};
--secondary-hover: #{mix($grey-800, $grey-900)};
--secondary-focus: #{rgba(mix($grey-700, $grey-800), .125)};
--secondary-inverse: #{$white};
// Form elements
--input-background: #{$white};
--input-border: #{mix($grey-100, $grey-200)};
// Utilities states
--valid: #{$green-600};
--invalid: #{$red-700};
--muted-text: #{mix($grey-400, $grey-500)};
--muted-background: #{$grey-50};
--muted-border: #{$grey-50};
// Card
--card-background: #{$white};
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
// Code
--code-background: #{lighten($grey-50, 2%)};
--code-border: #{$grey-100};
--code-inlined: #{$grey-50};
--code-color-1: #{desaturate($red-700, 20%)};
--code-color-2: #{desaturate($primary-600, 30%)};
// Badge
--badge-background: #{$grey-500};
--badge-text: #{$white};
// Table
--table-background: #{$white};
--table-border: #{rgba($grey-50, .75)};
}