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

Move styles in SCSS vars to CSS vars

Browse source
This commit is contained in:
Lucas 2020-09-29 08:38:35 +07:00
parent f67044ecae
commit 9b1ef33577
49 changed files with 2921 additions and 1841 deletions
Download patch file Download diff file Expand all files Collapse all files

6
scss/themes/default/_colors.scss
View file

@ -35,9 +35,3 @@ $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;
// Icons color
// For <details>, [type="date"], <select>, etc.
// Must be neutral to work in light or dark mode
// HACK: .99 opacity is used to force rgba() vs #hex
$icon-color: #{rgba($grey-500, .999)};

198
scss/themes/default/_dark.scss
View file

@ -1,70 +1,83 @@
// 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%)};
--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};
--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};
--primary: #{$primary-600};
--primary-border: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-hover-border: #{$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};
--secondary: #{$grey-600};
--secondary-border: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-hover-border: #{$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)}; // Links underline for
--contrast-border-h: #{rgba($amber-200, .5)}; // Links hover underline
--contrast-inverse: #{darken($grey-900, 6%)};
--contrast: #{$grey-100};
--contrast-border: #{$grey-100};
--contrast-hover: #{$white};
--contrast-hover-border: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-inverse: #{darken($grey-900, 6%)};
// Form elements
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
--input-hover-background: #{darken($grey-900, 6%)};
--input-hover-border: #{$primary-600};
--input-focus: #{rgba($primary-600, .25)};
--input-inverse: #{$white};
// Button
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
// 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)};
--valid: #{$green-700};
--invalid: #{$red-900};
--mark: #{rgba($amber-200, .5)};
--mark-text: #{$white};
--muted-text: #{$grey-500};
--muted-background: #{mix($grey-800, $grey-900)};
--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.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// 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)};
--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: #{rgba($grey-500, .06)};
--table-stripping: #{rgba($grey-500, .02)};
--table-border: #{rgba($grey-500, .075)};
--table-stripping: #{rgba($grey-500, .05)};
}
}
@ -75,64 +88,77 @@
[data-theme="dark"] {
// Document
--background: #{darken($grey-900, 6%)};
--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};
--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};
--primary: #{$primary-600};
--primary-border: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-hover-border: #{$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};
// // Secondary Call-to-Action, links and kbd
--secondary: #{$grey-600};
--secondary-border: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-hover-border: #{$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: #{$grey-100};
--contrast-border: #{$grey-100};
--contrast-hover: #{$white};
--contrast-hover-border: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-inverse: #{darken($grey-900, 6%)};
// Form elements
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
--input-background: #{darken($grey-900, 6%)};
--input-border: #{mix($grey-800, $grey-700)};
--input-hover-background: #{darken($grey-900, 6%)};
--input-hover-border: #{$primary-600};
--input-focus: #{rgba($primary-600, .25)};
--input-inverse: #{$white};
// Button
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
// 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)};
--valid: #{$green-700};
--invalid: #{$red-900};
--mark: #{rgba($amber-200, .5)};
--mark-text: #{$white};
--muted-text: #{$grey-500};
--muted-background: #{mix($grey-800, $grey-900)};
--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.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
--card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// 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)};
--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: #{rgba($grey-500, .06)};
--table-stripping: #{rgba($grey-500, .02)};
--table-border: #{rgba($grey-500, .075)};
--table-stripping: #{rgba($grey-500, .05)};
}

13
scss/themes/default/_icons.scss Normal file
View file

@ -0,0 +1,13 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

99
scss/themes/default/_light.scss
View file

@ -1,68 +1,81 @@
// Light theme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
// Document
--background: #{$white};
--background: #{$white};
// Typography
--text: #{$grey-700};
--h1: #{$grey-900};
--h2: #{$grey-800};
--h3: #{$grey-700};
--h4: #{$grey-600};
--h5: #{$grey-500};
--h6: #{$grey-400};
--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};
--primary: #{$primary-600};
--primary-border: #{$primary-600};
--primary-hover: #{$primary-700};
--primary-hover-border: #{$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};
--secondary: #{$grey-500};
--secondary-border: #{$grey-500};
--secondary-hover: #{$grey-700};
--secondary-hover-border: #{$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)}; // Links underline
--contrast-border-h: #{rgba($amber-200, 1)}; // Links hover underline
--contrast-inverse: #{$white};
--contrast: #{$grey-800};
--contrast-border: #{$grey-800};
--contrast-hover: #{mix($grey-900, $black)};
--contrast-hover-border: #{mix($grey-900, $black)};
--contrast-focus: #{rgba($grey-500, .125)};
--contrast-inverse: #{$white};
// Form elements
--input-background: #{$white};
--input-border: #{mix($grey-100, $grey-200)};
--input-background: #{$white};
--input-border: #{mix($grey-100, $grey-200)};
--input-hover-background: #{$white};
--input-hover-border: #{$primary-600};
--input-focus: #{rgba($primary-600, .125)};
--input-inverse: #{$white};
// Button
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);;
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
// 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};
--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)};
--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)};
--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-500, .04)};
--table-border: #{rgba($grey-50, .75)};
--table-stripping: #{rgba($grey-500, .075)};
}

93
scss/themes/default/_styles.scss Normal file
View file

@ -0,0 +1,93 @@
// Commons Styles
:root {
// Typography
// ––––––––––––––––––––
// Fonts family
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--titles-font: var(--text-font);
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
// Typography styles
--line-height: 1.5;
--text-weight: 400;
--titles-weight: 700;
--form-element-weight: var(--text-weight);
--buttons-weight: var(--text-weight);
--code-weight: var(--text-weight);
// Base font sizes
// All the others sizes are relative to this font base sizes (rem)
--base-font-xs: 16px;
--base-font-sm: 17px;
--base-font-md: 18px;
--base-font-lg: 19px;
--base-font-xl: 20px;
// Font sizes
// All the others sizes are relative to this sizes
--h1-size: 2rem;
--h2-size: 1.75rem;
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
// Styles
// ––––––––––––––––––––
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
--block-round: .25rem ;
// Form elements
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
--switch-border-width: 3px;
--form-element-spacing-vertical: .75rem;
--form-element-spacing-horizontal: 1rem;
// Buttons
--button-round: var(--block-round);
--button-border-width: var(--form-element-border-width);
--button-outline-width: var(--form-element-outline-width);
--button-spacing-vertical: var(--form-element-spacing-vertical);
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
// Spacings
// ––––––––––––––––––––
// Gutters and horizontals margins
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre>
--spacing-gutter: 1rem;
// Vertical spacing for blocks
// For <header>, <main>, <footer>, <section>, <article>
--spacing-block: 2rem;
// Multiplication factor for --spacing-block
// '1' disable spacing factor on a breakpoint
--spacing-factor-xs: 1;
--spacing-factor-sm: 1.25;
--spacing-factor-md: 1.5;
--spacing-factor-lg: 1.75;
--spacing-factor-xl: 2;
// Vertical margins for typography elements
--spacing-typography: 1.5rem;
// Spacing between <form> elements
--spacing-form-element: .25rem;
// Transitions
// ––––––––––––––––––––
// Transitions: <a>, <form> elements and <button>
--transition: .2s ease-in-out;
}