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

Improvements

Browse source 
- Add .contrast variant
- Separate _button-styles.scss
- Edit .secondary, mark, figcaption, hgroup, tooltips
- Docs: Add More about grids, External links icon, Second theme switcher
This commit is contained in:
Lucas 2019-11-30 12:43:20 +07:00
parent 066c0a04fd
commit 73237bdcd4
26 changed files with 516 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

50
scss/themes/_dark.scss
View file

@ -17,19 +17,28 @@
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action
// 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
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50};
--secondary-focus: #{rgba($grey-200, .25)};
--secondary-inverse: #{$grey-900};
@if $enable-classes {
// Secondary Call-to-Action and links
--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%)};
@ -38,6 +47,8 @@
// 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)};
@ -79,19 +90,28 @@
--h4: #{$grey-300};
--h5: #{$grey-400};
--h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action
// 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
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50};
--secondary-focus: #{rgba($grey-200, .25)};
--secondary-inverse: #{$grey-900};
@if $enable-classes {
// Secondary Call-to-Action and links
--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%)};
@ -100,6 +120,8 @@
// 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)};

25
scss/themes/_light.scss
View file

@ -17,19 +17,28 @@
--h4: #{$grey-600};
--h5: #{$grey-500};
--h6: #{$grey-400};
--mark: #{rgba($amber-200, .5)};
// Primary Call-to-Action
// 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
--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};
@if $enable-classes {
// Secondary Call-to-Action and links
--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};
@ -38,6 +47,8 @@
// 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};