mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 18:56:15 -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

3
scss/_settings.scss
View file

@ -3,6 +3,9 @@
// Settings
// ––––––––––––––––––––
// Theme color
$theme-color: "azure" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
// Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--"

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

@ -3,6 +3,7 @@
@use "../../settings" as *;
@use "../../utils/box-shadow";
@use "../../utils/functions";
@use "theme-colors";
// Default: Dark theme
@mixin theme {
@ -12,23 +13,23 @@
#{$css-var-prefix}color: #{$zinc-200};
// Text selection color
#{$css-var-prefix}text-selection-color: #{rgba($azure-350, 0.1875)};
#{$css-var-prefix}text-selection-color: theme-colors.get("text-selection-color", "dark");
// Muted colors
#{$css-var-prefix}muted-color: #{$zinc-450};
#{$css-var-prefix}muted-border-color: #{$slate-850};
// Primary colors
#{$css-var-prefix}primary: #{$azure-350};
#{$css-var-prefix}primary-background: #{$azure-550};
#{$css-var-prefix}primary: theme-colors.get("primary", "dark");
#{$css-var-prefix}primary-background: theme-colors.get("primary-background", "dark");
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}primary-underline: #{rgba($azure-350, 0.5)};
#{$css-var-prefix}primary-hover: #{$azure-250};
#{$css-var-prefix}primary-hover-background: #{$azure-500};
#{$css-var-prefix}primary-underline: theme-colors.get("primary-underline", "dark");
#{$css-var-prefix}primary-hover: theme-colors.get("primary-hover", "dark");
#{$css-var-prefix}primary-hover-background: theme-colors.get("primary-hover-background", "dark");
#{$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-350, 0.375)};
#{$css-var-prefix}primary-inverse: #{$white};
#{$css-var-prefix}primary-focus: theme-colors.get("primary-focus", "dark");
#{$css-var-prefix}primary-inverse: theme-colors.get("primary-inverse", "dark");
// Secondary colors
#{$css-var-prefix}secondary: #{$zinc-350};

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};

450
scss/themes/default/_theme-colors.scss Normal file
View file

@ -0,0 +1,450 @@
@use "sass:map";
@use "../../colors" as *;
@use "../../settings" as *;
$color-mappings: (
"amber": (
"dark": (
"text-selection-color": rgba($amber-350, 0.1875),
"primary": $amber-350,
"primary-background": $amber-200,
"primary-underline": rgba($amber-350, 0.5),
"primary-hover": $amber-250,
"primary-hover-background": $amber-150,
"primary-focus": rgba($amber-350, 0.375),
"primary-inverse": $black,
),
"light": (
"text-selection-color": rgba($amber-400, 0.25),
"primary": $amber-550,
"primary-background": $amber-200,
"primary-underline": rgba($amber-550, 0.5),
"primary-hover": $amber-650,
"primary-hover-background": $amber-250,
"primary-focus": rgba($amber-400, 0.5),
"primary-inverse": $black,
),
),
"azure": (
"dark": (
"text-selection-color": rgba($azure-350, 0.1875),
"primary": $azure-350,
"primary-background": $azure-550,
"primary-underline": rgba($azure-350, 0.5),
"primary-hover": $azure-250,
"primary-hover-background": $azure-500,
"primary-focus": rgba($azure-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($azure-400, 0.25),
"primary": $azure-550,
"primary-background": $azure-550,
"primary-underline": rgba($azure-550, 0.5),
"primary-hover": $azure-650,
"primary-hover-background": $azure-600,
"primary-focus": rgba($azure-400, 0.5),
"primary-inverse": $white,
),
),
"blue": (
"dark": (
"text-selection-color": rgba($blue-350, 0.1875),
"primary": $blue-350,
"primary-background": $blue-550,
"primary-underline": rgba($blue-350, 0.5),
"primary-hover": $blue-250,
"primary-hover-background": $blue-500,
"primary-focus": rgba($blue-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($blue-400, 0.25),
"primary": $blue-550,
"primary-background": $blue-550,
"primary-underline": rgba($blue-550, 0.5),
"primary-hover": $blue-650,
"primary-hover-background": $blue-600,
"primary-focus": rgba($blue-400, 0.5),
"primary-inverse": $white,
),
),
"cyan": (
"dark": (
"text-selection-color": rgba($cyan-350, 0.1875),
"primary": $cyan-350,
"primary-background": $cyan-550,
"primary-underline": rgba($cyan-350, 0.5),
"primary-hover": $cyan-250,
"primary-hover-background": $cyan-500,
"primary-focus": rgba($cyan-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($cyan-400, 0.25),
"primary": $cyan-550,
"primary-background": $cyan-550,
"primary-underline": rgba($cyan-550, 0.5),
"primary-hover": $cyan-650,
"primary-hover-background": $cyan-600,
"primary-focus": rgba($cyan-400, 0.5),
"primary-inverse": $white,
),
),
"fuchsia": (
"dark": (
"text-selection-color": rgba($fuchsia-350, 0.1875),
"primary": $fuchsia-350,
"primary-background": $fuchsia-550,
"primary-underline": rgba($fuchsia-350, 0.5),
"primary-hover": $fuchsia-250,
"primary-hover-background": $fuchsia-500,
"primary-focus": rgba($fuchsia-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($fuchsia-400, 0.25),
"primary": $fuchsia-550,
"primary-background": $fuchsia-550,
"primary-underline": rgba($fuchsia-550, 0.5),
"primary-hover": $fuchsia-650,
"primary-hover-background": $fuchsia-600,
"primary-focus": rgba($fuchsia-400, 0.5),
"primary-inverse": $white,
),
),
"green": (
"dark": (
"text-selection-color": rgba($green-350, 0.1875),
"primary": $green-350,
"primary-background": $green-500,
"primary-underline": rgba($green-350, 0.5),
"primary-hover": $green-250,
"primary-hover-background": $green-450,
"primary-focus": rgba($green-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($green-400, 0.25),
"primary": $green-550,
"primary-background": $green-500,
"primary-underline": rgba($green-550, 0.5),
"primary-hover": $green-650,
"primary-hover-background": $green-550,
"primary-focus": rgba($green-400, 0.5),
"primary-inverse": $white,
),
),
"grey": (
"dark": (
"text-selection-color": rgba($grey-350, 0.1875),
"primary": $grey-350,
"primary-background": $grey-300,
"primary-underline": rgba($grey-350, 0.5),
"primary-hover": $grey-250,
"primary-hover-background": $grey-250,
"primary-focus": rgba($grey-350, 0.375),
"primary-inverse": $black,
),
"light": (
"text-selection-color": rgba($grey-400, 0.25),
"primary": $grey-550,
"primary-background": $grey-300,
"primary-underline": rgba($grey-550, 0.5),
"primary-hover": $grey-650,
"primary-hover-background": $grey-350,
"primary-focus": rgba($grey-400, 0.5),
"primary-inverse": $black,
),
),
"indigo": (
"dark": (
"text-selection-color": rgba($indigo-350, 0.1875),
"primary": $indigo-350,
"primary-background": $indigo-600,
"primary-underline": rgba($indigo-350, 0.5),
"primary-hover": $indigo-250,
"primary-hover-background": $indigo-550,
"primary-focus": rgba($indigo-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($indigo-400, 0.25),
"primary": $indigo-550,
"primary-background": $indigo-600,
"primary-underline": rgba($indigo-550, 0.5),
"primary-hover": $indigo-650,
"primary-hover-background": $indigo-650,
"primary-focus": rgba($indigo-400, 0.5),
"primary-inverse": $white,
),
),
"jade": (
"dark": (
"text-selection-color": rgba($jade-350, 0.1875),
"primary": $jade-350,
"primary-background": $jade-550,
"primary-underline": rgba($jade-350, 0.5),
"primary-hover": $jade-250,
"primary-hover-background": $jade-500,
"primary-focus": rgba($jade-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($jade-400, 0.25),
"primary": $jade-550,
"primary-background": $jade-550,
"primary-underline": rgba($jade-550, 0.5),
"primary-hover": $jade-650,
"primary-hover-background": $jade-600,
"primary-focus": rgba($jade-400, 0.5),
"primary-inverse": $white,
),
),
"lime": (
"dark": (
"text-selection-color": rgba($lime-350, 0.1875),
"primary": $lime-350,
"primary-background": $lime-200,
"primary-underline": rgba($lime-350, 0.5),
"primary-hover": $lime-250,
"primary-hover-background": $lime-150,
"primary-focus": rgba($lime-350, 0.375),
"primary-inverse": $black,
),
"light": (
"text-selection-color": rgba($lime-400, 0.25),
"primary": $lime-550,
"primary-background": $lime-200,
"primary-underline": rgba($lime-550, 0.5),
"primary-hover": $lime-650,
"primary-hover-background": $lime-250,
"primary-focus": rgba($lime-400, 0.5),
"primary-inverse": $black,
),
),
"orange": (
"dark": (
"text-selection-color": rgba($orange-350, 0.1875),
"primary": $orange-350,
"primary-background": $orange-500,
"primary-underline": rgba($orange-350, 0.5),
"primary-hover": $orange-250,
"primary-hover-background": $orange-450,
"primary-focus": rgba($orange-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($orange-400, 0.25),
"primary": $orange-550,
"primary-background": $orange-500,
"primary-underline": rgba($orange-550, 0.5),
"primary-hover": $orange-650,
"primary-hover-background": $orange-550,
"primary-focus": rgba($orange-400, 0.5),
"primary-inverse": $white,
),
),
"pink": (
"dark": (
"text-selection-color": rgba($pink-350, 0.1875),
"primary": $pink-350,
"primary-background": $pink-500,
"primary-underline": rgba($pink-350, 0.5),
"primary-hover": $pink-250,
"primary-hover-background": $pink-450,
"primary-focus": rgba($pink-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($pink-400, 0.25),
"primary": $pink-550,
"primary-background": $pink-500,
"primary-underline": rgba($pink-550, 0.5),
"primary-hover": $pink-650,
"primary-hover-background": $pink-550,
"primary-focus": rgba($pink-400, 0.5),
"primary-inverse": $white,
),
),
"pumpkin": (
"dark": (
"text-selection-color": rgba($pumpkin-350, 0.1875),
"primary": $pumpkin-350,
"primary-background": $pumpkin-300,
"primary-underline": rgba($pumpkin-350, 0.5),
"primary-hover": $pumpkin-250,
"primary-hover-background": $pumpkin-250,
"primary-focus": rgba($pumpkin-350, 0.375),
"primary-inverse": $black,
),
"light": (
"text-selection-color": rgba($pumpkin-400, 0.25),
"primary": $pumpkin-550,
"primary-background": $pumpkin-300,
"primary-underline": rgba($pumpkin-550, 0.5),
"primary-hover": $pumpkin-650,
"primary-hover-background": $pumpkin-350,
"primary-focus": rgba($pumpkin-400, 0.5),
"primary-inverse": $black,
),
),
"purple": (
"dark": (
"text-selection-color": rgba($purple-350, 0.1875),
"primary": $purple-350,
"primary-background": $purple-600,
"primary-underline": rgba($purple-350, 0.5),
"primary-hover": $purple-250,
"primary-hover-background": $purple-550,
"primary-focus": rgba($purple-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($purple-400, 0.25),
"primary": $purple-550,
"primary-background": $purple-600,
"primary-underline": rgba($purple-550, 0.5),
"primary-hover": $purple-650,
"primary-hover-background": $purple-650,
"primary-focus": rgba($purple-400, 0.5),
"primary-inverse": $white,
),
),
"red": (
"dark": (
"text-selection-color": rgba($red-350, 0.1875),
"primary": $red-350,
"primary-background": $red-550,
"primary-underline": rgba($red-350, 0.5),
"primary-hover": $red-250,
"primary-hover-background": $red-500,
"primary-focus": rgba($red-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($red-400, 0.25),
"primary": $red-550,
"primary-background": $red-550,
"primary-underline": rgba($red-550, 0.5),
"primary-hover": $red-650,
"primary-hover-background": $red-600,
"primary-focus": rgba($red-400, 0.5),
"primary-inverse": $white,
),
),
"sand": (
"dark": (
"text-selection-color": rgba($sand-350, 0.1875),
"primary": $sand-350,
"primary-background": $sand-200,
"primary-underline": rgba($sand-350, 0.5),
"primary-hover": $sand-250,
"primary-hover-background": $sand-150,
"primary-focus": rgba($sand-350, 0.375),
"primary-inverse": $black,
),
"light": (
"text-selection-color": rgba($sand-400, 0.25),
"primary": $sand-550,
"primary-background": $sand-200,
"primary-underline": rgba($sand-550, 0.5),
"primary-hover": $sand-650,
"primary-hover-background": $sand-250,
"primary-focus": rgba($sand-400, 0.5),
"primary-inverse": $black,
),
),
"slate": (
"dark": (
"text-selection-color": rgba($slate-350, 0.1875),
"primary": $slate-350,
"primary-background": $slate-600,
"primary-underline": rgba($slate-350, 0.5),
"primary-hover": $slate-250,
"primary-hover-background": $slate-550,
"primary-focus": rgba($slate-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($slate-400, 0.25),
"primary": $slate-550,
"primary-background": $slate-600,
"primary-underline": rgba($slate-550, 0.5),
"primary-hover": $slate-650,
"primary-hover-background": $slate-650,
"primary-focus": rgba($slate-400, 0.5),
"primary-inverse": $white,
),
),
"violet": (
"dark": (
"text-selection-color": rgba($violet-350, 0.1875),
"primary": $violet-350,
"primary-background": $violet-600,
"primary-underline": rgba($violet-350, 0.5),
"primary-hover": $violet-250,
"primary-hover-background": $violet-550,
"primary-focus": rgba($violet-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($violet-400, 0.25),
"primary": $violet-550,
"primary-background": $violet-600,
"primary-underline": rgba($violet-550, 0.5),
"primary-hover": $violet-650,
"primary-hover-background": $violet-650,
"primary-focus": rgba($violet-400, 0.5),
"primary-inverse": $white,
),
),
"yellow": (
"dark": (
"text-selection-color": rgba($yellow-350, 0.1875),
"primary": $yellow-350,
"primary-background": $yellow-100,
"primary-underline": rgba($yellow-350, 0.5),
"primary-hover": $yellow-250,
"primary-hover-background": mix($yellow-100, $yellow-50),
"primary-focus": rgba($yellow-350, 0.375),
"primary-inverse": $black,
),
"light": (
"text-selection-color": rgba($yellow-400, 0.25),
"primary": $yellow-550,
"primary-background": $yellow-100,
"primary-underline": rgba($yellow-550, 0.5),
"primary-hover": $yellow-650,
"primary-hover-background": $yellow-150,
"primary-focus": rgba($yellow-400, 0.5),
"primary-inverse": $black,
),
),
"zinc": (
"dark": (
"text-selection-color": rgba($zinc-350, 0.1875),
"primary": $zinc-350,
"primary-background": $zinc-550,
"primary-underline": rgba($zinc-350, 0.5),
"primary-hover": $zinc-250,
"primary-hover-background": $zinc-500,
"primary-focus": rgba($zinc-350, 0.375),
"primary-inverse": $white,
),
"light": (
"text-selection-color": rgba($zinc-400, 0.25),
"primary": $zinc-550,
"primary-background": $zinc-550,
"primary-underline": rgba($zinc-550, 0.5),
"primary-hover": $zinc-650,
"primary-hover-background": $zinc-600,
"primary-focus": rgba($zinc-400, 0.5),
"primary-inverse": $white,
),
),
);
@function get($key, $mode: "light") {
@return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
}