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

Improvements

Browse source 
- Edit code colors and add a color for comments
- Add ::selection
- Small edits for cards: last-child and overflow
- Add card-sectioning (header, footer, pre)
- Change global hue for Primary color
- Remove border for pre
- Add querySelectorAll() for theme-switcher.js
- Update docs
This commit is contained in:
Lucas 2019-12-01 16:35:38 +07:00
parent c3f9d8d8c8
commit 85e21d35de
23 changed files with 937 additions and 422 deletions
Download patch file Download diff file Expand all files Collapse all files

22
scss/themes/_dark.scss
View file

@ -55,18 +55,21 @@
// 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-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%)};
--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,.033)};
--table-stripping: #{rgba($grey-50,.02)};
}
}
@ -128,16 +131,19 @@
// 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-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%)};
--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,.033)};
--table-stripping: #{rgba($grey-50,.02)};
}

11
scss/themes/_light.scss
View file

@ -25,7 +25,6 @@
--primary-inverse: #{$white};
@if $enable-classes {
// Secondary Call-to-Action and links
--secondary: #{$grey-500};
--secondary-hover: #{$grey-700};
@ -55,16 +54,18 @@
// 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-border: #{$grey-100};
--code-inlined: #{$grey-50};
--code-color-1: #{desaturate($red-700, 20%)};
--code-color-2: #{desaturate($primary-600, 30%)};
--code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 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,.033)};
--table-stripping: #{rgba($grey-900,.02)};
}