mirror of
https://github.com/picocss/pico.git
synced 2025-04-30 12:59:12 -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
7
scss/themes/_default.scss
Normal file
7
scss/themes/_default.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* Theme: default
|
||||
*/
|
||||
|
||||
@import "default/colors";
|
||||
@import "default/light";
|
||||
@import "default/dark";
|
||||
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;
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
/**
|
||||
* Dark theme (Auto)
|
||||
* Automatically enabled if user has Dark mode enabled
|
||||
*/
|
||||
|
||||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
|
||||
|
|
@ -24,21 +21,18 @@
|
|||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
@if $enable-classes {
|
||||
// // Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// 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%)};
|
||||
}
|
||||
// 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%)};
|
||||
|
|
@ -75,11 +69,8 @@
|
|||
|
||||
|
||||
|
||||
/**
|
||||
* Dark theme (Forced)
|
||||
* Enabled if forced with data-theme="dark"
|
||||
*/
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
|
||||
// Document
|
||||
|
|
@ -100,21 +91,18 @@
|
|||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
@if $enable-classes {
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// 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%)};
|
||||
}
|
||||
// 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%)};
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
/**
|
||||
* Light theme (Default)
|
||||
* Can be forced with data-theme="light"
|
||||
*/
|
||||
|
||||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
||||
|
|
@ -24,20 +21,18 @@
|
|||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-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};
|
||||
// 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};
|
||||
}
|
||||
// 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};
|
||||
|
|
@ -60,8 +55,9 @@
|
|||
// Code
|
||||
--code-background: #{lighten($grey-50, 2%)};
|
||||
--code-inlined: #{$grey-50};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 40%)};
|
||||
--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)};
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue