mirror of
https://github.com/picocss/pico.git
synced 2025-04-30 04:49:13 -04:00
Scss files organization
+ Slim version example
This commit is contained in:
Lucas
parent
f8e51cb875
commit
434cbe02ac
28 changed files with 1329 additions and 300 deletions
37
scss/themes/default/_colors.scss
Normal file
37
scss/themes/default/_colors.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// Navy-Grey
|
||||
$grey-hue: 205 !default;
|
||||
$grey-50: hsl($grey-hue, 20%, 94%) !default;
|
||||
$grey-100: hsl($grey-hue, 18%, 86%) !default;
|
||||
$grey-200: hsl($grey-hue, 16%, 77%) !default;
|
||||
$grey-300: hsl($grey-hue, 14%, 68%) !default;
|
||||
$grey-400: hsl($grey-hue, 12%, 59%) !default;
|
||||
$grey-500: hsl($grey-hue, 10%, 50%) !default;
|
||||
$grey-600: hsl($grey-hue, 15%, 41%) !default;
|
||||
$grey-700: hsl($grey-hue, 20%, 32%) !default;
|
||||
$grey-800: hsl($grey-hue, 25%, 23%) !default;
|
||||
$grey-900: hsl($grey-hue, 30%, 15%) !default;
|
||||
|
||||
// Light Blue
|
||||
$primary-hue: 195;
|
||||
$primary-50: hsl($primary-hue, 90%, 94%) !default;
|
||||
$primary-100: hsl($primary-hue, 88%, 86%) !default;
|
||||
$primary-200: hsl($primary-hue, 86%, 77%) !default;
|
||||
$primary-300: hsl($primary-hue, 84%, 68%) !default;
|
||||
$primary-400: hsl($primary-hue, 82%, 59%) !default;
|
||||
$primary-500: hsl($primary-hue, 80%, 50%) !default;
|
||||
$primary-600: hsl($primary-hue, 85%, 41%) !default;
|
||||
$primary-700: hsl($primary-hue, 90%, 32%) !default;
|
||||
$primary-800: hsl($primary-hue, 95%, 23%) !default;
|
||||
$primary-900: hsl($primary-hue, 100%, 15%) !default;
|
||||
|
||||
// Black & White
|
||||
$black: #000 !default;
|
||||
$white: #FFF !default;
|
||||
|
||||
// Miscs
|
||||
$amber-200: hsl(45, 100%, 75%) !default;
|
||||
$green-500: hsl(160, 50%, 40%) !default;
|
||||
$green-600: hsl(160, 55%, 35%) !default;
|
||||
$green-700: hsl(160, 60%, 30%) !default;
|
||||
$red-700: hsl(0, 45%, 50%) !default;
|
||||
$red-900: hsl(0, 45%, 40%) !default;
|
||||
137
scss/themes/default/_dark.scss
Normal file
137
scss/themes/default/_dark.scss
Normal 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};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// // Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-border: #{rgba($amber-200, .33)}; // For links
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
|
||||
// Form elements
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$white};
|
||||
--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-sections: #{darken($grey-900, 4%)};
|
||||
--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-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{$grey-500)};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
|
||||
// Table
|
||||
--table-border: #{darken($grey-900, 6%)};
|
||||
--table-stripping: #{rgba($grey-50,.02)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 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};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-border: #{rgba($amber-200, .33)}; // For links
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
|
||||
// Form elements
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$white};
|
||||
--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-sections: #{darken($grey-900, 4%)};
|
||||
--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-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{$grey-500)};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
|
||||
// Table
|
||||
--table-border: #{darken($grey-900, 6%)};
|
||||
--table-stripping: #{rgba($grey-50,.02)};
|
||||
}
|
||||
67
scss/themes/default/_light.scss
Normal file
67
scss/themes/default/_light.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
// 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};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-500};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-500, .125)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-800};
|
||||
--contrast-hover: #{mix($grey-900, $black)};
|
||||
--contrast-focus: #{rgba($grey-500, .125)};
|
||||
--contrast-border: #{rgba($amber-200, .5)}; // For links
|
||||
--contrast-inverse: #{$white};
|
||||
|
||||
// Form elements
|
||||
--input-background: #{$white};
|
||||
--input-border: #{mix($grey-100, $grey-200)};
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-600};
|
||||
--invalid: #{$red-700};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$grey-800};
|
||||
--muted-text: #{mix($grey-400, $grey-500)};
|
||||
--muted-background: #{$grey-50};
|
||||
--muted-border: #{$grey-50};
|
||||
|
||||
// Card
|
||||
--card-background: #{$white};
|
||||
--card-sections: #{lighten($grey-50, 2%)};
|
||||
--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-inlined: #{$grey-50};
|
||||
--code-color-1: #{$grey-500)};
|
||||
--code-color-2: #{hsl(330, 40%, 50%)};
|
||||
--code-color-3: #{hsl(185, 40%, 40%)};
|
||||
--code-color-4: #{hsl(40, 20%, 50%)};
|
||||
--code-color-5: #{mix($grey-300, $grey-400)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-50, .75)};
|
||||
--table-stripping: #{rgba($grey-900,.02)};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue