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

feat: add themes

Browse source
This commit is contained in:
Lucas Larroche 2024-01-06 21:09:13 +07:00
parent 97f20244e6
commit d291480c7d
7 changed files with 474 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,7 @@
@use "../../settings" as *;
@use "../../utils/box-shadow";
@use "../../utils/functions";
@use "theme-colors";
// Default: Light theme
@mixin theme {
@ -12,23 +13,23 @@
#{$css-var-prefix}color: #{$zinc-750};
// Text selection color
#{$css-var-prefix}text-selection-color: #{rgba($azure-400, 0.25)};
#{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "light");
// Muted colors
#{$css-var-prefix}muted-color: #{$zinc-550};
#{$css-var-prefix}muted-border-color: #{mix($slate-100, $slate-50)};
// Primary colors
#{$css-var-prefix}primary: #{$azure-550};
#{$css-var-prefix}primary-background: #{$azure-550};
#{$css-var-prefix}primary: theme-colors.get("primary", "light");
#{$css-var-prefix}primary-background: theme-colors.get("primary-background", "light");
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}primary-underline: #{rgba($azure-550, 0.5)};
#{$css-var-prefix}primary-hover: #{$azure-650};
#{$css-var-prefix}primary-hover-background: #{$azure-600};
#{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "light");
#{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "light");
#{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "light");
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}primary-focus: #{rgba($azure-400, 0.5)};
#{$css-var-prefix}primary-inverse: #{$white};
#{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "light");
#{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "light");
// Secondary colors
#{$css-var-prefix}secondary: #{$slate-550};