itsigo/tallytome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ to the git

Browse Source
This commit is contained in:
itsig0
2024-03-20 22:56:17 +01:00
commit cc4bd9febc
86 changed files with 11153 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
.air.toml Normal file
View File

@@ -0,0 +1,45 @@
root = "."
tmp_dir = "tmp"
[build]
args_bin = []
bin = "./tmp/main"
cmd = "go build -o ./tmp/main ."
delay = 1000
exclude_dir = ["assets", "tmp", "vendor"]
exclude_file = []
exclude_regex = ["_test.go"]
exclude_unchanged = false
follow_symlink = false
full_bin = ""
include_dir = []
include_ext = ["go", "tpl", "tmpl", "templ", "html", "css"]
include_file = []
kill_delay = "0s"
log = "build-errors.log"
poll = false
poll_interval = 0
post_cmd = []
pre_cmd = []
rerun = false
rerun_delay = 500
send_interrupt = false
stop_on_error = false
[color]
app = ""
build = "yellow"
main = "magenta"
runner = "green"
watcher = "cyan"
[log]
main_only = false
time = false
[misc]
clean_on_exit = false
[screen]
clear_on_rebuild = false
keep_scroll = true

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
tmp
# we do not want these
*_templ.txt

9
Makefile Normal file
View File

@@ -0,0 +1,9 @@
run:
@templ generate
@go run main.go
templ:
@templ generate -watch -proxy=http://localhost:3000
sass:
@sass --no-source-map --watch public/stylesheets/tallytome.scss public/stylesheets/tallytome.css

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
## Should have put it to Git sooner
when will I learn

22
go.mod Normal file
View File

@@ -0,0 +1,22 @@
module github.com/itsig0/tallytome
go 1.22.1
require (
github.com/a-h/templ v0.2.598
github.com/gofiber/fiber/v2 v2.52.2
)
require (
github.com/andybalholm/brotli v1.0.5 // indirect
github.com/google/uuid v1.5.0 // indirect
github.com/klauspost/compress v1.17.0 // indirect
github.com/mattn/go-colorable v0.1.13 // indirect
github.com/mattn/go-isatty v0.0.20 // indirect
github.com/mattn/go-runewidth v0.0.15 // indirect
github.com/rivo/uniseg v0.2.0 // indirect
github.com/valyala/bytebufferpool v1.0.0 // indirect
github.com/valyala/fasthttp v1.51.0 // indirect
github.com/valyala/tcplisten v1.0.0 // indirect
golang.org/x/sys v0.15.0 // indirect
)

31
go.sum Normal file
View File

@@ -0,0 +1,31 @@
github.com/a-h/templ v0.2.598 h1:6jMIHv6wQZvdPxTuv87erW4RqN/FPU0wk7ZHN5wVuuo=
github.com/a-h/templ v0.2.598/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
github.com/gofiber/fiber/v2 v2.52.2 h1:b0rYH6b06Df+4NyrbdptQL8ifuxw/Tf2DgfkZkDaxEo=
github.com/gofiber/fiber/v2 v2.52.2/go.mod h1:KEOE+cXMhXG0zHc9d8+E38hoX+ZN7bhOtgeF2oT6jrQ=
github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
github.com/google/uuid v1.5.0 h1:1p67kYwdtXjb0gL0BPiP1Av9wiZPo5A8z2cWkTZ+eyU=
github.com/google/uuid v1.5.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
github.com/klauspost/compress v1.17.0 h1:Rnbp4K9EjcDuVuHtd0dgA4qNuv9yKDYKK1ulpJwgrqM=
github.com/klauspost/compress v1.17.0/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
github.com/mattn/go-runewidth v0.0.15 h1:UNAjwbU9l54TA3KzvqLGxwWjHmMgBUVhBiTjelZgg3U=
github.com/mattn/go-runewidth v0.0.15/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
github.com/rivo/uniseg v0.2.0 h1:S1pD9weZBuJdFmowNwbpi7BJ8TNftyUImj/0WQi72jY=
github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
github.com/valyala/fasthttp v1.51.0 h1:8b30A5JlZ6C7AS81RsWjYMQmrZG6feChmgAolCl1SqA=
github.com/valyala/fasthttp v1.51.0/go.mod h1:oI2XroL+lI7vdXyYoQk03bXBThfFl2cVdIA3Xl7cH8g=
github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=

11
handler/index.go Normal file
View File

@@ -0,0 +1,11 @@
package handler
import (
"github.com/gofiber/fiber/v2"
"github.com/itsig0/tallytome/view/home"
)
func Index(c *fiber.Ctx) error {
hx := len(c.GetReqHeaders()["Hx-Request"]) > 0
return render(c, home.Show(hx))
}

96
handler/tracker.go Normal file
View File

@@ -0,0 +1,96 @@
package handler
import (
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/log"
"github.com/itsig0/tallytome/view/hptracker"
)
func Tracker(c *fiber.Ctx) error {
hx := len(c.GetReqHeaders()["Hx-Request"]) > 0
data := hptracker.TrackerData{
HP: "0",
HPBase: "0",
HPStartPercentage: "0",
HPPercentage: "0",
Mana: "0",
ManaBase: "0",
ManaRegen: "0",
ManaStartPercentage: "0",
ManaPercentage: "0",
}
return render(c, hptracker.Show(hx, data))
}
func TrackerUpdate(c *fiber.Ctx) error {
_, err := store.Get(c)
if err != nil {
return err
}
// Parse the form data
formdata := c.Context().PostArgs()
// Create an instance of TrackerData
data := hptracker.TrackerData{
HP: string(formdata.Peek("hp")),
HPBase: string(formdata.Peek("hp")),
HPStartPercentage: "0",
HPPercentage: "100",
Mana: string(formdata.Peek("mana")),
ManaBase: string(formdata.Peek("mana")),
ManaRegen: string(formdata.Peek("manaregen")),
ManaStartPercentage: "0",
ManaPercentage: "100",
}
// why no work?
// values := reflect.ValueOf(data)
// types := values.Type()
// prefix := "tracker_"
// for i := 0; i < values.NumField(); i++ {
// sess.Set(prefix+types.Field(i).Name, values.Field(i))
// log.Info("test")
// }
// pre := "tracker_"
// sess.Set(pre+"HP", data.HP)
// sess.Set(pre+"HPBase", data.HPBase)
// sess.Set(pre+"HPStartPercentage", data.HPStartPercentage)
// sess.Set(pre+"HPStartPercentage", data.HPStartPercentage)
// sess.Set(pre+"Mana", data.Mana)
// sess.Set(pre+"ManaBase", data.ManaBase)
// sess.Set(pre+"ManaRegen", data.ManaRegen)
// sess.Set(pre+"ManaStartPercentage", data.ManaStartPercentage)
// sess.Set(pre+"ManaPercentage", data.ManaPercentage)
// sess.Save()
return render(c, hptracker.TrackerColumn(data))
}
func TrackerDamage(c *fiber.Ctx) error {
// formdata := c.Context().PostArgs()
data := hptracker.TrackerData{
HPStartPercentage: "100",
HPPercentage: "66",
}
// log.Info(data)
return render(c, hptracker.HPTracker(data))
}
func CheckStore(c *fiber.Ctx) error {
sess, err := store.Get(c)
if err != nil {
return err
}
log.Info(sess.Keys())
return nil
}

15
handler/util.go Normal file
View File

@@ -0,0 +1,15 @@
package handler
import (
"github.com/a-h/templ"
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/session"
)
var store = session.New()
func render(c *fiber.Ctx, component templ.Component) error {
// or templ wil bork...
c.Set("Content-type", "text/html")
return component.Render(c.Context(), c.Response().BodyWriter())
}

32
main.go Normal file
View File

@@ -0,0 +1,32 @@
package main
import (
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/compress"
"github.com/itsig0/tallytome/handler"
)
func main() {
app := fiber.New(fiber.Config{
ServerHeader: "TallyTome",
})
// compression baby
app.Use(compress.New())
app.Static("/", "./public")
app.Get("/", handler.Index)
tracker := app.Group("/hp-mana-tracker")
tracker.Get("/", handler.Tracker)
tracker.Post("/update", handler.TrackerUpdate)
tracker.Post("/damage", handler.TrackerDamage)
tracker.Get("/check", handler.CheckStore)
// app.Get("/*", func(c *fiber.Ctx) error {
// return c.SendString("Hello, World!")
// })
app.Listen(":3000")
}

BIN
public/gopher.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

5
public/scripts/alpine.js Normal file
View File

File diff suppressed because one or more lines are too long

1
public/scripts/htmx.js Normal file
View File

File diff suppressed because one or more lines are too long

248
public/stylesheets/custom/_dark.scss Normal file
View File

@@ -0,0 +1,248 @@
@use "sass:map";
@use "../pico/colors" as *;
@use "../pico/settings" as *;
@use "../pico/helpers/functions";
@use "theme-colors";
// Default: Dark theme
@mixin theme {
#{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
// Text color
#{$css-var-prefix}color: #{$zinc-200};
// Text selection color
#{$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: 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: 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: 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};
#{$css-var-prefix}secondary-background: #{$slate-600};
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
#{$css-var-prefix}secondary-hover: #{$zinc-250};
#{$css-var-prefix}secondary-hover-background: #{$slate-550};
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
#{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors
#{$css-var-prefix}contrast: #{$slate-100};
#{$css-var-prefix}contrast-background: #{$slate-50};
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
#{$css-var-prefix}contrast-hover: #{$white};
#{$css-var-prefix}contrast-hover-background: #{$white};
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
#{$css-var-prefix}contrast-inverse: #{$black};
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
// Typography
@if map.get($modules, "content/typography") {
// Headings colors
#{$css-var-prefix}h1-color: #{$zinc-50};
#{$css-var-prefix}h2-color: #{$zinc-100};
#{$css-var-prefix}h3-color: #{$zinc-200};
#{$css-var-prefix}h4-color: #{$zinc-250};
#{$css-var-prefix}h5-color: #{$zinc-300};
#{$css-var-prefix}h6-color: #{$zinc-400};
// Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{$azure-750};
#{$css-var-prefix}mark-color: #{$white};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
}
// Button
@if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
// Table
@if map.get($modules, "content/table") {
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
}
// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}code-color: #{$zinc-400};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
}
// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
#{$css-var-prefix}form-element-border-color: #{$slate-800};
#{$css-var-prefix}form-element-color: #{$zinc-100};
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
#{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-750};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
}
// Range (input[type="range"])
@if map.get($modules, "forms/input-range") {
#{$css-var-prefix}range-border-color: #{$slate-850};
#{$css-var-prefix}range-active-border-color: #{$slate-800};
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
}
// Accordion (<details>)
@if map.get($modules, "components/accordion") {
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
}
// Card (<article>)
@if map.get($modules, "components/card") {
#{$css-var-prefix}card-background-color: #{$slate-900};
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
#{$css-var-prefix}dropdown-background-color: #{$slate-900};
#{$css-var-prefix}dropdown-border-color: #{$slate-850};
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
}
// Loading ([aria-busy=true])
@if map.get($modules, "components/loading") {
#{$css-var-prefix}loading-spinner-opacity: 0.5;
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
}
// Progress
@if map.get($modules, "components/progress") {
#{$css-var-prefix}progress-background-color: #{$slate-850};
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
}
// Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") {
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
}
// Chevron icons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
// Change the icon color to black for accordion and dropdown .contrast buttons
@if $enable-classes {
#{$parent-selector} details {
summary {
&[role="button"].contrast:not(.outline) {
&::after {
filter: brightness(0);
}
}
}
}
}
}
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}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='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}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='#{functions.display-rgb(mix($red-500, $slate-600))}' 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");
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to black for .contrast buttons
@if $enable-classes {
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
&.contrast:is(
button,
[type="submit"],
[type="button"],
[type="reset"],
[role="button"]
):not(.outline) {
&::before {
filter: brightness(0);
}
}
}
}
}
// Document
color-scheme: dark;
}

212
public/stylesheets/custom/_light.scss Normal file
View File

@@ -0,0 +1,212 @@
@use "sass:map";
@use "../pico/colors" as *;
@use "../pico/settings" as *;
@use "../pico/helpers/functions";
@use "theme-colors";
// Default: Light theme
@mixin theme {
#{$css-var-prefix}background-color: #{$white};
// Text color
#{$css-var-prefix}color: #{$zinc-750};
// Text selection color
#{$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: 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: 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: 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};
#{$css-var-prefix}secondary-background: #{$slate-600};
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
#{$css-var-prefix}secondary-hover: #{$slate-650};
#{$css-var-prefix}secondary-hover-background: #{$slate-650};
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
#{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors
#{$css-var-prefix}contrast: #{$slate-900};
#{$css-var-prefix}contrast-background: #{$slate-900};
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
#{$css-var-prefix}contrast-hover: #{$black};
#{$css-var-prefix}contrast-hover-background: #{$black};
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
#{$css-var-prefix}contrast-inverse: #{$white};
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow($slate-400);
// Typography
@if map.get($modules, "content/typography") {
// Headings colors
#{$css-var-prefix}h1-color: #{$zinc-800};
#{$css-var-prefix}h2-color: #{$zinc-750};
#{$css-var-prefix}h3-color: #{$zinc-700};
#{$css-var-prefix}h4-color: #{$zinc-650};
#{$css-var-prefix}h5-color: #{$zinc-600};
#{$css-var-prefix}h6-color: #{$zinc-550};
// Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
#{$css-var-prefix}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
}
// Button
@if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
// Table
@if map.get($modules, "content/table") {
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
}
// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
#{$css-var-prefix}code-color: #{$zinc-550};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
}
// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
#{$css-var-prefix}form-element-border-color: #{$slate-150};
#{$css-var-prefix}form-element-color: #{$zinc-850};
#{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
#{$css-var-prefix}form-element-active-background-color: #{$white};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-200};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light");
}
// Range (input[type="range"])
@if map.get($modules, "forms/input-range") {
#{$css-var-prefix}range-border-color: #{$slate-100};
#{$css-var-prefix}range-active-border-color: #{$slate-200};
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
}
// Accordion (<details>)
@if map.get($modules, "components/accordion") {
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
}
// Card (<article>)
@if map.get($modules, "components/card") {
#{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
#{$css-var-prefix}dropdown-background-color: #{$white};
#{$css-var-prefix}dropdown-border-color: #{$slate-50};
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
}
// Loading ([aria-busy=true])
@if map.get($modules, "components/loading") {
#{$css-var-prefix}loading-spinner-opacity: 0.5;
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
}
// Progress
@if map.get($modules, "components/progress") {
#{$css-var-prefix}progress-background-color: #{$slate-100};
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
}
// Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") {
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
}
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}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='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}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='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' 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");
}
// Document
color-scheme: light;
}

38
public/stylesheets/custom/_schemes.scss Normal file
View File

@@ -0,0 +1,38 @@
@use "sass:map";
@use "../pico/settings" as *;
@use "light";
@use "dark";
/**
* Color schemes
*/
// Light color scheme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
@include light.theme;
}
// Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
@include dark.theme;
}
}
// Dark color scheme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark.theme;
}
#{$parent-selector} progress,
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"],
#{$parent-selector} [type="range"] {
accent-color: var(#{$css-var-prefix}primary);
}

475
public/stylesheets/custom/_styles.scss Normal file
View File

@@ -0,0 +1,475 @@
@use "sass:map";
@use "../pico/colors" as *;
@use "../pico/settings" as *;
@use "../pico/helpers/functions";
@use "theme-colors";
/**
* Styles
*/
:root {
// Typography
#{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
#{$css-var-prefix}font-family-sans-serif: system-ui,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Helvetica,
Arial,
"Helvetica Neue",
sans-serif,
var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family-monospace: ui-monospace,
SFMono-Regular,
"SF Mono",
Menlo,
Consolas,
"Liberation Mono",
monospace,
var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
#{$css-var-prefix}line-height: 1.5;
#{$css-var-prefix}font-weight: 400;
#{$css-var-prefix}font-size: 1rem;
#{$css-var-prefix}text-underline-offset: 0.1rem;
// Responsive root font size
@if $enable-responsive-typography {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
#{$css-var-prefix}font-size: map.get($values, "root-font-size");
}
}
}
}
// Borders
#{$css-var-prefix}border-radius: 0.25rem;
#{$css-var-prefix}border-width: 0.0625rem;
#{$css-var-prefix}outline-width: 0.125rem;
// Transitions
#{$css-var-prefix}transition: 0.2s ease-in-out;
// Spacings
#{$css-var-prefix}spacing: 1rem;
// Spacings for typography elements
@if map.get($modules, "content/typography") {
#{$css-var-prefix}typography-spacing-vertical: 1rem;
}
// Spacings for body > header, body > main, body > footer, section, article
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") or map.get($modules, "components/card") or map.get($modules, "components/modal") {
#{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing);
#{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
}
@if map.get($modules, "layout/grid") and $enable-classes {
#{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
// #{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
}
// Spacings for form elements and button
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
#{$css-var-prefix}form-element-spacing-vertical: 0.5rem;
#{$css-var-prefix}form-element-spacing-horizontal: 1rem;
}
// Font weight for form labels & fieldsets legend
@if map.get($modules, "forms/basic") {
#{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
}
// Group (role="group")
@if map.get($modules, "components/group") {
#{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}group-box-shadow-focus-with-button: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
#{$css-var-prefix}group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(#{$css-var-prefix}form-element-border-color);
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
}
// Spacings for nav component
@if map.get($modules, "components/nav") {
#{$css-var-prefix}nav-element-spacing-vertical: 1rem;
#{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
#{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
#{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
#{$css-var-prefix}nav-breadcrumb-divider: ">";
nav {
.brand {
width: clamp(70px, 10%, 100px);
}
// ul:not(.brand) li{
// &:hover{
// background-color: $grey-50;
// border-radius: 5px;
// }
// }
}
}
// Checkboxes icons
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}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='#{functions.display-rgb($white)}' 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");
#{$css-var-prefix}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='#{functions.display-rgb($white)}' 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");
}
// Chevron icons
@if map.get($modules, "forms/basics") or map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' 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");
}
// Datetime icons
@if map.get($modules, "forms/input-date") {
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' 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");
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' 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");
}
// Search icon
@if map.get($modules, "forms/input-search") {
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' 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");
}
// Close icon
@if map.get($modules, "components/modal") {
#{$css-var-prefix}icon-close: 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='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Inspired by https://codepen.io/aleksander351/pen/KzgKPo
#{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
}
}
// Responsives spacings
@if $enable-responsive-spacings {
// Landmarks and section
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
#{$semantic-root-element}>header,
#{$semantic-root-element}>main,
#{$semantic-root-element}>footer,
section {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
@if $key =="sm" {
$multiplier: 1.25;
}
@else if $key =="md" {
$multiplier: 1.5;
}
@else if $key =="lg" {
$multiplier: 1.75;
}
@else if $key =="xl" {
$multiplier: 2;
}
@else if $key =="xxl" {
$multiplier: 2.25;
}
#{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * $multiplier );
}
}
}
}
}
// Card (<article>)
@if map.get($modules, "components/card") {
article {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
@if $key =="sm" {
$multiplier: 1.25;
}
@else if $key =="md" {
$multiplier: 1.5;
}
@else if $key =="lg" {
$multiplier: 1.75;
}
@else if $key =="xl" {
$multiplier: 2;
}
@else if $key =="xxl" {
$multiplier: 2.25;
}
#{$css-var-prefix}block-spacing-vertical: calc(var(#{$css-var-prefix}spacing) * $multiplier );
#{$css-var-prefix}block-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * $multiplier );
}
}
}
}
}
}
// Link
@if map.get($modules, "content/link") {
a {
#{$css-var-prefix}text-decoration: none;
// Secondary & Contrast
@if $enable-classes {
&.secondary,
&.contrast {
#{$css-var-prefix}text-decoration: none;
}
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}text-decoration: underline;
}
}
}
// Typography
@if map.get($modules, "content/typography") {
// Small
small {
#{$css-var-prefix}font-size: 0.875em;
}
:where(progress)+small {
display: block;
width: 100%;
margin-top: calc(var(--pico-spacing) * -.75);
margin-bottom: var(--pico-spacing);
color: var(--pico-muted-color);
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
#{$css-var-prefix}font-weight: 700;
}
h1 {
#{$css-var-prefix}font-size: 2rem;
#{$css-var-prefix}line-height: 1.125;
#{$css-var-prefix}typography-spacing-top: 3rem;
}
h2 {
#{$css-var-prefix}font-size: 1.75rem;
#{$css-var-prefix}line-height: 1.15;
#{$css-var-prefix}typography-spacing-top: 2.625rem;
}
h3 {
#{$css-var-prefix}font-size: 1.5rem;
#{$css-var-prefix}line-height: 1.175;
#{$css-var-prefix}typography-spacing-top: 2.25rem;
}
h4 {
#{$css-var-prefix}font-size: 1.25rem;
#{$css-var-prefix}line-height: 1.2;
#{$css-var-prefix}typography-spacing-top: 1.874rem;
}
h5 {
#{$css-var-prefix}font-size: 1.125rem;
#{$css-var-prefix}line-height: 1.225;
#{$css-var-prefix}typography-spacing-top: 1.6875rem;
}
h6 {
#{$css-var-prefix}font-size: 1rem;
#{$css-var-prefix}line-height: 1.25;
#{$css-var-prefix}typography-spacing-top: 1.5rem;
}
}
// Table
@if map.get($modules, "content/table") {
thead,
tfoot {
th,
td {
#{$css-var-prefix}font-weight: 600;
#{$css-var-prefix}border-width: 0.1875rem;
}
}
}
// Code
@if map.get($modules, "content/code") {
pre,
code,
kbd,
samp {
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
}
kbd {
#{$css-var-prefix}font-weight: bolder;
}
}
// Inputs and Selects
input:not([type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]),
:where(select, textarea) {
#{$css-var-prefix}outline-width: 0.0625rem;
}
[type="search"] {
#{$css-var-prefix}border-radius: 5rem;
}
// Checkboxes, Radios and Switches
@if map.get($modules, "forms/checkbox-radio-switch") {
[type="checkbox"],
[type="radio"] {
#{$css-var-prefix}border-width: 0.125rem;
}
[type="checkbox"][role="switch"] {
#{$css-var-prefix}border-width: 0.1875rem;
}
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
details.dropdown {
summary:not([role="button"]) {
#{$css-var-prefix}outline-width: 0.0625rem;
}
}
nav {
details.dropdown {
summary:focus-visible {
#{$css-var-prefix}outline-width: 0.125rem;
}
}
}
}
// Group (role="group")
@if map.get($modules, "components/group") {
[role="search"] {
#{$css-var-prefix}border-radius: 5rem;
}
[role="search"],
[role="group"] {
@if $enable-classes {
&:has(button.secondary:focus,
[type="submit"].secondary:focus,
[type="button"].secondary:focus,
[role="button"].secondary:focus) {
#{$css-var-prefix}group-box-shadow-focus-with-button: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
}
&:has(button.contrast:focus,
[type="submit"].contrast:focus,
[type="button"].contrast:focus,
[role="button"].contrast:focus) {
#{$css-var-prefix}group-box-shadow-focus-with-button: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
}
}
margin-top: calc(var(--pico-spacing) * .25);
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$css-var-prefix}form-element-spacing-horizontal: 2rem;
}
}
}
// Chevron icons
// Change the icon color to white for accordion and dropdown buttons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
#{$parent-selector} details {
summary {
$selector: '&[role="button"]';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::after {
filter: brightness(0) invert(1);
}
}
}
}
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to white for buttons
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::before {
@if theme-colors.get("primary-inverse", "dark")==$white {
filter: brightness(0) invert(1);
}
@else {
filter: brightness(0) invert(0);
}
}
}
}
}

514
public/stylesheets/custom/_theme-colors.scss Normal file
View File

@@ -0,0 +1,514 @@
@use "sass:map";
@use "../pico/colors" as *;
@use "../pico/settings" as *;
$color-mappings: (
"crabnpaper": (
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
);
@function get($key, $mode: "light") {
@return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
}

49
public/stylesheets/pico/_index.scss Normal file
View File

@@ -0,0 +1,49 @@
@use "helpers/copyright";
// Config
@forward "settings";
// Theming
@use "themes/default";
// Layout
@use "layout/document"; // html
@use "layout/landmarks"; // body, header, main, footer
@use "layout/section"; // section
@use "layout/container"; // .container, .container-fluid
@use "layout/grid"; // .grid
@use "layout/overflow-auto"; // .overflow-auto
// Content
@use "content/typography"; // headings, p, ul, blockquote, ...
@use "content/link"; // a, role="link"
@use "content/button"; // button, role="button", type="button", type="submit" ...
@use "content/table"; // table, tr, td, ...
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/code"; // pre, code, ...
@use "content/figure"; // figure, figcaption
@use "content/miscs"; // hr, template, [hidden], dialog, canvas
// Forms
@use "forms/basics"; // input, select, textarea, label, fieldset, legend
@use "forms/checkbox-radio-switch"; // type="checkbox", type="radio", role="switch"
@use "forms/input-color"; // type="color"
@use "forms/input-date"; // type="date", type="datetime-local", type="month", type="time", type="week"
@use "forms/input-file"; // type="file"
@use "forms/input-range"; // type="range"
@use "forms/input-search"; // type="search"
// Components
@use "components/accordion"; // details, summary
@use "components/card"; // article
@use "components/dropdown"; // details.dropdown
@use "components/group"; // role="group"
@use "components/loading"; // aria-busy=true
@use "components/modal"; // dialog
@use "components/nav"; // nav
@use "components/progress"; // progress
@use "components/tooltip"; // data-tooltip
// Utilities
@use "utilities/accessibility"; // -ms-touch-action, aria-*
@use "utilities/reduce-motion"; // prefers-reduced-motion

148
public/stylesheets/pico/_settings.scss Normal file
View File

@@ -0,0 +1,148 @@
@use "sass:map";
// 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 "--"
// Define the root element used to target <header>, <main>, <footer>
// with $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default;
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: false !default;
// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
// Fluid layout if disabled
$enable-viewport: true !default;
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
// Fixed spacings by default
$enable-responsive-spacings: false !default;
// Enable responsive typography
// Fixed root element size (rem) if disabled
$enable-responsive-typography: true !default;
// Enable .classes
// .classless version if disabled
$enable-classes: true !default;
// Enable transitions
$enable-transitions: true !default;
// Enable overriding with !important
$enable-important: true !default;
// Optional parent selector
// If defined, all HTML tags are wrapped with this selector
// :root is not wrapped
$parent-selector: "" !default;
// Breakpoints, viewports and root font size
$breakpoints: () !default;
$breakpoints: map.deep-merge(
(
// Small (landscape phones)
// Font size: 17px
sm:
(
breakpoint: 576px,
viewport: 510px,
root-font-size: 106.25%,
),
// Medium (tablets)
// Font size: 18px
md:
(
breakpoint: 768px,
viewport: 700px,
root-font-size: 112.5%,
),
// Large
// Font size: 19px
lg:
(
breakpoint: 1024px,
viewport: 950px,
root-font-size: 118.75%,
),
// Extra large
// Font size: 20px
xl:
(
breakpoint: 1280px,
viewport: 1200px,
root-font-size: 125%,
),
// Extra extra large
// Font size: 21px
xxl:
(
breakpoint: 1536px,
viewport: 1450px,
root-font-size: 131.25%,
)
),
$breakpoints
);
// Modules to export
$modules: () !default;
$modules: map.merge(
(
// Theme
"themes/default": true,
// Layout
"layout/document": true,
"layout/landmarks": true,
"layout/container": true,
"layout/section": true,
"layout/grid": true,
"layout/overflow-auto": true,
// Content
"content/link": true,
"content/typography": true,
"content/embedded": true,
"content/button": true,
"content/table": true,
"content/code": true,
"content/figure": true,
"content/miscs": true,
// Forms
"forms/basics": true,
"forms/checkbox-radio-switch": true,
"forms/input-color": true,
"forms/input-date": true,
"forms/input-file": true,
"forms/input-range": true,
"forms/input-search": true,
// Components
"components/accordion": true,
"components/card": true,
"components/dropdown": true,
"components/group": true,
"components/loading": true,
"components/modal": true,
"components/nav": true,
"components/progress": true,
"components/tooltip": true,
// Utilities
"utilities/accessibility": true,
"utilities/reduce-motion": true
),
$modules
);

886
public/stylesheets/pico/colors/_index.scss Normal file
View File

@@ -0,0 +1,886 @@
// B&W
$black: #000;
$white: #fff;
// Red
$red-950: #1c0d06;
$red-900: #30130a;
$red-850: #45150c;
$red-800: #5c160d;
$red-750: #72170f;
$red-700: #861d13;
$red-650: #9b2318;
$red-600: #af291d;
$red-550: #c52f21;
$red-500: #d93526;
$red-450: #ee402e;
$red-400: #f06048;
$red-350: #f17961;
$red-300: #f38f79;
$red-250: #f5a390;
$red-200: #f5b7a8;
$red-150: #f6cabf;
$red-100: #f8dcd6;
$red-50: #faeeeb;
$red: $red-550;
// Pink
$pink-950: #25060c;
$pink-900: #380916;
$pink-850: #4b0c1f;
$pink-800: #5f0e28;
$pink-750: #740f31;
$pink-700: #88143b;
$pink-650: #9d1945;
$pink-600: #b21e4f;
$pink-550: #c72259;
$pink-500: #d92662;
$pink-450: #f42c6f;
$pink-400: #f6547e;
$pink-350: #f7708e;
$pink-300: #f8889e;
$pink-250: #f99eae;
$pink-200: #f9b4be;
$pink-150: #f9c8ce;
$pink-100: #f9dbdf;
$pink-50: #fbedef;
$pink: $pink-500;
// Fuchsia
$fuchsia-950: #230518;
$fuchsia-900: #360925;
$fuchsia-850: #480b33;
$fuchsia-800: #5c0d41;
$fuchsia-750: #700e4f;
$fuchsia-700: #84135e;
$fuchsia-650: #98176d;
$fuchsia-600: #ac1c7c;
$fuchsia-550: #c1208b;
$fuchsia-500: #d9269d;
$fuchsia-450: #ed2aac;
$fuchsia-400: #f748b7;
$fuchsia-350: #f869bf;
$fuchsia-300: #f983c7;
$fuchsia-250: #fa9acf;
$fuchsia-200: #f9b1d8;
$fuchsia-150: #f9c6e1;
$fuchsia-100: #f9daea;
$fuchsia-50: #fbedf4;
$fuchsia: $fuchsia-550;
// Purple
$purple-950: #1e0820;
$purple-900: #2d0f33;
$purple-850: #3d1545;
$purple-800: #4d1a57;
$purple-750: #5e206b;
$purple-700: #6f277d;
$purple-650: #802e90;
$purple-600: #9236a4;
$purple-550: #aa40bf;
$purple-500: #b645cd;
$purple-450: #c652dc;
$purple-400: #cd68e0;
$purple-350: #d47de4;
$purple-300: #db90e8;
$purple-250: #e2a3eb;
$purple-200: #e7b6ee;
$purple-150: #edc9f1;
$purple-100: #f2dcf4;
$purple-50: #f8eef9;
$purple: $purple-600;
// Violet
$violet-950: #190928;
$violet-900: #251140;
$violet-850: #321856;
$violet-800: #3f1e6d;
$violet-750: #4d2585;
$violet-700: #5b2d9c;
$violet-650: #6935b3;
$violet-600: #7540bf;
$violet-550: #8352c5;
$violet-500: #9062ca;
$violet-450: #9b71cf;
$violet-400: #a780d4;
$violet-350: #b290d9;
$violet-300: #bd9fdf;
$violet-250: #c9afe4;
$violet-200: #d3bfe8;
$violet-150: #decfed;
$violet-100: #e8dff2;
$violet-50: #f3eff7;
$violet: $violet-600;
// Indigo
$indigo-950: #110b31;
$indigo-900: #181546;
$indigo-850: #1f1e5e;
$indigo-800: #272678;
$indigo-750: #2f2f92;
$indigo-700: #3838ab;
$indigo-650: #4040bf;
$indigo-600: #524ed2;
$indigo-550: #655cd6;
$indigo-500: #7569da;
$indigo-450: #8577dd;
$indigo-400: #9486e1;
$indigo-350: #a294e5;
$indigo-300: #b0a3e8;
$indigo-250: #bdb2ec;
$indigo-200: #cac1ee;
$indigo-150: #d8d0f1;
$indigo-100: #e5e0f4;
$indigo-50: #f2f0f9;
$indigo: $indigo-600;
// Blue
$blue-950: #080f2d;
$blue-900: #0c1a41;
$blue-850: #0e2358;
$blue-800: #0f2d70;
$blue-750: #0f3888;
$blue-700: #1343a0;
$blue-650: #184eb8;
$blue-600: #1d59d0;
$blue-550: #2060df;
$blue-500: #3c71f7;
$blue-450: #5c7ef8;
$blue-400: #748bf8;
$blue-350: #8999f9;
$blue-300: #9ca7fa;
$blue-250: #aeb5fb;
$blue-200: #bfc3fa;
$blue-150: #d0d2fa;
$blue-100: #e0e1fa;
$blue-50: #f0f0fb;
$blue: $blue-550;
// Azure
$azure-950: #04121d;
$azure-900: #061e2f;
$azure-850: #052940;
$azure-800: #033452;
$azure-750: #014063;
$azure-700: #014c75;
$azure-650: #015887;
$azure-600: #02659a;
$azure-550: #0172ad;
$azure-500: #017fc0;
$azure-450: #018cd4;
$azure-400: #029ae8;
$azure-350: #01aaff;
$azure-300: #51b4ff;
$azure-250: #79c0ff;
$azure-200: #9bccfd;
$azure-150: #b7d9fc;
$azure-100: #d1e5fb;
$azure-50: #e9f2fc;
$azure: $azure-550;
// Cyan
$cyan-950: #041413;
$cyan-900: #051f1f;
$cyan-850: #052b2b;
$cyan-800: #043737;
$cyan-750: #014343;
$cyan-700: #015050;
$cyan-650: #025d5d;
$cyan-600: #046a6a;
$cyan-550: #047878;
$cyan-500: #058686;
$cyan-450: #059494;
$cyan-400: #05a2a2;
$cyan-350: #0ab1b1;
$cyan-300: #0ac2c2;
$cyan-250: #0ccece;
$cyan-200: #25dddd;
$cyan-150: #3deceb;
$cyan-100: #58faf9;
$cyan-50: #c3fcfa;
$cyan: $cyan-550;
// Jade
$jade-950: #04140c;
$jade-900: #052014;
$jade-850: #042c1b;
$jade-800: #033823;
$jade-750: #00452b;
$jade-700: #015234;
$jade-650: #005f3d;
$jade-600: #006d46;
$jade-550: #007a50;
$jade-500: #00895a;
$jade-450: #029764;
$jade-400: #00a66e;
$jade-350: #00b478;
$jade-300: #00c482;
$jade-250: #00cc88;
$jade-200: #21e299;
$jade-150: #39f1a6;
$jade-100: #70fcba;
$jade-50: #cbfce1;
$jade: $jade-550;
// Green
$green-950: #0b1305;
$green-900: #131f07;
$green-850: #152b07;
$green-800: #173806;
$green-750: #1a4405;
$green-700: #205107;
$green-650: #265e09;
$green-600: #2c6c0c;
$green-550: #33790f;
$green-500: #398712;
$green-450: #409614;
$green-400: #47a417;
$green-350: #4eb31b;
$green-300: #55c21e;
$green-250: #5dd121;
$green-200: #62d926;
$green-150: #77ef3d;
$green-100: #95fb62;
$green-50: #d7fbc1;
$green: $green-500;
// Lime
$lime-950: #101203;
$lime-900: #191d03;
$lime-850: #202902;
$lime-800: #273500;
$lime-750: #304100;
$lime-700: #394d00;
$lime-650: #435a00;
$lime-600: #4d6600;
$lime-550: #577400;
$lime-500: #628100;
$lime-450: #6c8f00;
$lime-400: #779c00;
$lime-350: #82ab00;
$lime-300: #8eb901;
$lime-250: #99c801;
$lime-200: #a5d601;
$lime-150: #b2e51a;
$lime-100: #c1f335;
$lime-50: #defc85;
$lime: $lime-200;
// Yellow
$yellow-950: #141103;
$yellow-900: #1f1c02;
$yellow-850: #2b2600;
$yellow-800: #363100;
$yellow-750: #423c00;
$yellow-700: #4e4700;
$yellow-650: #5b5300;
$yellow-600: #685f00;
$yellow-550: #756b00;
$yellow-500: #827800;
$yellow-450: #908501;
$yellow-400: #9e9200;
$yellow-350: #ad9f00;
$yellow-300: #bbac00;
$yellow-250: #caba01;
$yellow-200: #d9c800;
$yellow-150: #e8d600;
$yellow-100: #f2df0d;
$yellow-50: #fdf1b4;
$yellow: $yellow-100;
// Amber
$amber-950: #161003;
$amber-900: #231a03;
$amber-850: #312302;
$amber-800: #3f2d00;
$amber-750: #4d3700;
$amber-700: #5b4200;
$amber-650: #694d00;
$amber-600: #785800;
$amber-550: #876400;
$amber-500: #977000;
$amber-450: #a77c00;
$amber-400: #b78800;
$amber-350: #c79400;
$amber-300: #d8a100;
$amber-250: #e8ae01;
$amber-200: #ffbf00;
$amber-150: #fecc63;
$amber-100: #fddea6;
$amber-50: #fcefd9;
$amber: $amber-200;
// Pumpkin
$pumpkin-950: #180f04;
$pumpkin-900: #271805;
$pumpkin-850: #372004;
$pumpkin-800: #482802;
$pumpkin-750: #593100;
$pumpkin-700: #693a00;
$pumpkin-650: #7a4400;
$pumpkin-600: #8b4f00;
$pumpkin-550: #9c5900;
$pumpkin-500: #ad6400;
$pumpkin-450: #bf6e00;
$pumpkin-400: #d27a01;
$pumpkin-350: #e48500;
$pumpkin-300: #ff9500;
$pumpkin-250: #ffa23a;
$pumpkin-200: #feb670;
$pumpkin-150: #fcca9b;
$pumpkin-100: #fcdcc1;
$pumpkin-50: #fceee3;
$pumpkin: $pumpkin-300;
// Orange
$orange-950: #1b0d06;
$orange-900: #2d1509;
$orange-850: #411a0a;
$orange-800: #561e0a;
$orange-750: #6b220a;
$orange-700: #7f270b;
$orange-650: #942d0d;
$orange-600: #a83410;
$orange-550: #bd3c13;
$orange-500: #d24317;
$orange-450: #e74b1a;
$orange-400: #f45d2c;
$orange-350: #f56b3d;
$orange-300: #f68e68;
$orange-250: #f8a283;
$orange-200: #f8b79f;
$orange-150: #f8cab9;
$orange-100: #f9dcd2;
$orange-50: #faeeea;
$orange: $orange-500;
// Sand
$sand-950: #111110;
$sand-900: #1c1b19;
$sand-850: #272622;
$sand-800: #32302b;
$sand-750: #3d3b35;
$sand-700: #49463f;
$sand-650: #55524a;
$sand-600: #615e55;
$sand-550: #6e6a60;
$sand-500: #7b776b;
$sand-450: #888377;
$sand-400: #959082;
$sand-350: #a39e8f;
$sand-300: #b0ab9b;
$sand-250: #beb8a7;
$sand-200: #ccc6b4;
$sand-150: #dad4c2;
$sand-100: #e8e2d2;
$sand-50: #f2f0ec;
$sand: $sand-200;
// Grey
$grey-950: #111111;
$grey-900: #1b1b1b;
$grey-850: #262626;
$grey-800: #303030;
$grey-750: #3b3b3b;
$grey-700: #474747;
$grey-650: #525252;
$grey-600: #5e5e5e;
$grey-550: #6a6a6a;
$grey-500: #777777;
$grey-450: #808080;
$grey-400: #919191;
$grey-350: #9e9e9e;
$grey-300: #ababab;
$grey-250: #b9b9b9;
$grey-200: #c6c6c6;
$grey-150: #d4d4d4;
$grey-100: #e2e2e2;
$grey-50: #f1f1f1;
$grey: $grey-300;
// Zinc
$zinc-950: #0f1114;
$zinc-900: #191c20;
$zinc-850: #23262c;
$zinc-800: #2d3138;
$zinc-750: #373c44;
$zinc-700: #424751;
$zinc-650: #4d535e;
$zinc-600: #5c6370;
$zinc-550: #646b79;
$zinc-500: #6f7887;
$zinc-450: #7b8495;
$zinc-400: #8891a4;
$zinc-350: #969eaf;
$zinc-300: #a4acba;
$zinc-250: #b3b9c5;
$zinc-200: #c2c7d0;
$zinc-150: #d1d5db;
$zinc-100: #e0e3e7;
$zinc-50: #f0f1f3;
$zinc: $zinc-550;
// Slate
$slate-950: #0e1118;
$slate-900: #181c25;
$slate-850: #202632;
$slate-800: #2a3140;
$slate-750: #333c4e;
$slate-700: #3d475c;
$slate-650: #48536b;
$slate-600: #525f7a;
$slate-550: #5d6b89;
$slate-500: #687899;
$slate-450: #7385a9;
$slate-400: #8191b5;
$slate-350: #909ebe;
$slate-300: #a0acc7;
$slate-250: #b0b9d0;
$slate-200: #bfc7d9;
$slate-150: #cfd5e2;
$slate-100: #dfe3eb;
$slate-50: #eff1f4;
$slate: $slate-600;
$colors: (
red: (
950: $red-950,
900: $red-900,
850: $red-850,
800: $red-800,
750: $red-750,
700: $red-700,
650: $red-650,
600: $red-600,
550: $red-550,
500: $red-500,
450: $red-450,
400: $red-400,
350: $red-350,
300: $red-300,
250: $red-250,
200: $red-200,
150: $red-150,
100: $red-100,
50: $red-50,
main: $red,
),
pink: (
950: $pink-950,
900: $pink-900,
850: $pink-850,
800: $pink-800,
750: $pink-750,
700: $pink-700,
650: $pink-650,
600: $pink-600,
550: $pink-550,
500: $pink-500,
450: $pink-450,
400: $pink-400,
350: $pink-350,
300: $pink-300,
250: $pink-250,
200: $pink-200,
150: $pink-150,
100: $pink-100,
50: $pink-50,
main: $pink,
),
fuchsia: (
950: $fuchsia-950,
900: $fuchsia-900,
850: $fuchsia-850,
800: $fuchsia-800,
750: $fuchsia-750,
700: $fuchsia-700,
650: $fuchsia-650,
600: $fuchsia-600,
550: $fuchsia-550,
500: $fuchsia-500,
450: $fuchsia-450,
400: $fuchsia-400,
350: $fuchsia-350,
300: $fuchsia-300,
250: $fuchsia-250,
200: $fuchsia-200,
150: $fuchsia-150,
100: $fuchsia-100,
50: $fuchsia-50,
main: $fuchsia,
),
purple: (
950: $purple-950,
900: $purple-900,
850: $purple-850,
800: $purple-800,
750: $purple-750,
700: $purple-700,
650: $purple-650,
600: $purple-600,
550: $purple-550,
500: $purple-500,
450: $purple-450,
400: $purple-400,
350: $purple-350,
300: $purple-300,
250: $purple-250,
200: $purple-200,
150: $purple-150,
100: $purple-100,
50: $purple-50,
main: $purple,
),
violet: (
950: $violet-950,
900: $violet-900,
850: $violet-850,
800: $violet-800,
750: $violet-750,
700: $violet-700,
650: $violet-650,
600: $violet-600,
550: $violet-550,
500: $violet-500,
450: $violet-450,
400: $violet-400,
350: $violet-350,
300: $violet-300,
250: $violet-250,
200: $violet-200,
150: $violet-150,
100: $violet-100,
50: $violet-50,
main: $violet,
),
indigo: (
950: $indigo-950,
900: $indigo-900,
850: $indigo-850,
800: $indigo-800,
750: $indigo-750,
700: $indigo-700,
650: $indigo-650,
600: $indigo-600,
550: $indigo-550,
500: $indigo-500,
450: $indigo-450,
400: $indigo-400,
350: $indigo-350,
300: $indigo-300,
250: $indigo-250,
200: $indigo-200,
150: $indigo-150,
100: $indigo-100,
50: $indigo-50,
main: $indigo,
),
blue: (
950: $blue-950,
900: $blue-900,
850: $blue-850,
800: $blue-800,
750: $blue-750,
700: $blue-700,
650: $blue-650,
600: $blue-600,
550: $blue-550,
500: $blue-500,
450: $blue-450,
400: $blue-400,
350: $blue-350,
300: $blue-300,
250: $blue-250,
200: $blue-200,
150: $blue-150,
100: $blue-100,
50: $blue-50,
main: $blue,
),
azure: (
950: $azure-950,
900: $azure-900,
850: $azure-850,
800: $azure-800,
750: $azure-750,
700: $azure-700,
650: $azure-650,
600: $azure-600,
550: $azure-550,
500: $azure-500,
450: $azure-450,
400: $azure-400,
350: $azure-350,
300: $azure-300,
250: $azure-250,
200: $azure-200,
150: $azure-150,
100: $azure-100,
50: $azure-50,
main: $azure,
),
cyan: (
950: $cyan-950,
900: $cyan-900,
850: $cyan-850,
800: $cyan-800,
750: $cyan-750,
700: $cyan-700,
650: $cyan-650,
600: $cyan-600,
550: $cyan-550,
500: $cyan-500,
450: $cyan-450,
400: $cyan-400,
350: $cyan-350,
300: $cyan-300,
250: $cyan-250,
200: $cyan-200,
150: $cyan-150,
100: $cyan-100,
50: $cyan-50,
main: $cyan,
),
jade: (
950: $jade-950,
900: $jade-900,
850: $jade-850,
800: $jade-800,
750: $jade-750,
700: $jade-700,
650: $jade-650,
600: $jade-600,
550: $jade-550,
500: $jade-500,
450: $jade-450,
400: $jade-400,
350: $jade-350,
300: $jade-300,
250: $jade-250,
200: $jade-200,
150: $jade-150,
100: $jade-100,
50: $jade-50,
main: $jade,
),
green: (
950: $green-950,
900: $green-900,
850: $green-850,
800: $green-800,
750: $green-750,
700: $green-700,
650: $green-650,
600: $green-600,
550: $green-550,
500: $green-500,
450: $green-450,
400: $green-400,
350: $green-350,
300: $green-300,
250: $green-250,
200: $green-200,
150: $green-150,
100: $green-100,
50: $green-50,
main: $green,
),
lime: (
950: $lime-950,
900: $lime-900,
850: $lime-850,
800: $lime-800,
750: $lime-750,
700: $lime-700,
650: $lime-650,
600: $lime-600,
550: $lime-550,
500: $lime-500,
450: $lime-450,
400: $lime-400,
350: $lime-350,
300: $lime-300,
250: $lime-250,
200: $lime-200,
150: $lime-150,
100: $lime-100,
50: $lime-50,
main: $lime,
),
yellow: (
950: $yellow-950,
900: $yellow-900,
850: $yellow-850,
800: $yellow-800,
750: $yellow-750,
700: $yellow-700,
650: $yellow-650,
600: $yellow-600,
550: $yellow-550,
500: $yellow-500,
450: $yellow-450,
400: $yellow-400,
350: $yellow-350,
300: $yellow-300,
250: $yellow-250,
200: $yellow-200,
150: $yellow-150,
100: $yellow-100,
50: $yellow-50,
main: $yellow,
),
amber: (
950: $amber-950,
900: $amber-900,
850: $amber-850,
800: $amber-800,
750: $amber-750,
700: $amber-700,
650: $amber-650,
600: $amber-600,
550: $amber-550,
500: $amber-500,
450: $amber-450,
400: $amber-400,
350: $amber-350,
300: $amber-300,
250: $amber-250,
200: $amber-200,
150: $amber-150,
100: $amber-100,
50: $amber-50,
main: $amber,
),
pumpkin: (
950: $pumpkin-950,
900: $pumpkin-900,
850: $pumpkin-850,
800: $pumpkin-800,
750: $pumpkin-750,
700: $pumpkin-700,
650: $pumpkin-650,
600: $pumpkin-600,
550: $pumpkin-550,
500: $pumpkin-500,
450: $pumpkin-450,
400: $pumpkin-400,
350: $pumpkin-350,
300: $pumpkin-300,
250: $pumpkin-250,
200: $pumpkin-200,
150: $pumpkin-150,
100: $pumpkin-100,
50: $pumpkin-50,
main: $pumpkin,
),
orange: (
950: $orange-950,
900: $orange-900,
850: $orange-850,
800: $orange-800,
750: $orange-750,
700: $orange-700,
650: $orange-650,
600: $orange-600,
550: $orange-550,
500: $orange-500,
450: $orange-450,
400: $orange-400,
350: $orange-350,
300: $orange-300,
250: $orange-250,
200: $orange-200,
150: $orange-150,
100: $orange-100,
50: $orange-50,
main: $orange,
),
sand: (
950: $sand-950,
900: $sand-900,
850: $sand-850,
800: $sand-800,
750: $sand-750,
700: $sand-700,
650: $sand-650,
600: $sand-600,
550: $sand-550,
500: $sand-500,
450: $sand-450,
400: $sand-400,
350: $sand-350,
300: $sand-300,
250: $sand-250,
200: $sand-200,
150: $sand-150,
100: $sand-100,
50: $sand-50,
main: $sand,
),
grey: (
950: $grey-950,
900: $grey-900,
850: $grey-850,
800: $grey-800,
750: $grey-750,
700: $grey-700,
650: $grey-650,
600: $grey-600,
550: $grey-550,
500: $grey-500,
450: $grey-450,
400: $grey-400,
350: $grey-350,
300: $grey-300,
250: $grey-250,
200: $grey-200,
150: $grey-150,
100: $grey-100,
50: $grey-50,
main: $grey,
),
zinc: (
950: $zinc-950,
900: $zinc-900,
850: $zinc-850,
800: $zinc-800,
750: $zinc-750,
700: $zinc-700,
650: $zinc-650,
600: $zinc-600,
550: $zinc-550,
500: $zinc-500,
450: $zinc-450,
400: $zinc-400,
350: $zinc-350,
300: $zinc-300,
250: $zinc-250,
200: $zinc-200,
150: $zinc-150,
100: $zinc-100,
50: $zinc-50,
main: $zinc,
),
slate: (
950: $slate-950,
900: $slate-900,
850: $slate-850,
800: $slate-800,
750: $slate-750,
700: $slate-700,
650: $slate-650,
600: $slate-600,
550: $slate-550,
500: $slate-500,
450: $slate-450,
400: $slate-400,
350: $slate-350,
300: $slate-300,
250: $slate-250,
200: $slate-200,
150: $slate-150,
100: $slate-100,
50: $slate-50,
main: $slate,
),
);

73
public/stylesheets/pico/colors/utilities/_background-colors.scss Normal file
View File

@@ -0,0 +1,73 @@
@use "sass:map";
@use "../../colors";
@use "settings";
@use "utils";
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$background-color-property-name: map.get(settings.$properties, "background-color");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@mixin foreground-color($background-color) {
@if map.get(settings.$utilities, "color-for-background-colors") {
@if utils.foreground-brightness($background-color) == "light" {
@if $enable-css-vars {
color: var(#{$css-var-color-prefix}-light);
} @else {
color: utils.display-color(map.get(settings.$palette, "light-color"));
}
} @else {
@if $enable-css-vars {
color: var(#{$css-var-color-prefix}-dark);
} @else {
color: utils.display-color(map.get(settings.$palette, "dark-color"));
}
}
}
}
@mixin background-colors {
@if map.get(settings.$utilities, "background-colors") {
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$background-color-property-name}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
$value: $color-value;
@if $enable-css-vars {
$value: var(#{$css-var-family-name});
} @else {
$value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name} {
background-color: $value;
@include foreground-color($color-value);
}
}
// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
$value: $color-value;
@if $enable-css-vars {
$value: var(#{$css-var-family-name}-#{$shade});
} @else {
$value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
background-color: $value;
@include foreground-color($color-value);
}
}
}
}
}
}
}

50
public/stylesheets/pico/colors/utilities/_colors.scss Normal file
View File

@@ -0,0 +1,50 @@
@use "sass:map";
@use "../../colors";
@use "settings";
@use "utils";
@mixin colors {
@if map.get(settings.$utilities, "colors") {
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
$class-family-name: #{$color-property-name}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
@if $enable-css-vars {
$color-value: var(#{$css-var-family-name});
} @else {
$color-value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name} {
color: $color-value;
}
}
// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
@if $enable-css-vars {
$color-value: var(#{$css-var-family-name}-#{$shade});
} @else {
$color-value: utils.display-color($color-value);
}
.#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
color: $color-value;
}
}
}
}
}
}
}

53
public/stylesheets/pico/colors/utilities/_css-vars.scss Normal file
View File

@@ -0,0 +1,53 @@
@use "sass:map";
@use "../../colors";
@use "settings";
@use "utils";
@mixin css-vars {
$enable-css-vars: map.get(settings.$utilities, "css-vars");
$color-property-name: map.get(settings.$properties, "color");
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars {
:root {
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
$css-var-family-name: #{$css-var-color-prefix}-#{$family};
// Loop through colors
@each $shade, $color-value in $colors {
// Main color
@if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
#{$css-var-family-name}: #{utils.display-color($color-value)};
}
// Shades
@else if
index(map.get(settings.$palette, "shades"), $shade) and
map.get(settings.$palette, "enable-shades")
{
#{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};
}
}
}
}
// Black & white
@if map.get(settings.$palette, "enable-black-and-white") {
#{$css-var-color-prefix}-black: #{utils.display-color(colors.$black)};
#{$css-var-color-prefix}-white: #{utils.display-color(colors.$white)};
}
// Text color variables
@if map.get(settings.$utilities, "color-for-background-colors") {
#{$css-var-color-prefix}-light: #{utils.display-color(
map.get(settings.$palette, "light-color")
)};
#{$css-var-color-prefix}-dark: #{utils.display-color(
map.get(settings.$palette, "dark-color")
)};
}
}
}
}

8
public/stylesheets/pico/colors/utilities/_index.scss Normal file
View File

@@ -0,0 +1,8 @@
@forward "settings";
@use "css-vars" as *;
@use "colors" as *;
@use "background-colors" as *;
@include css-vars;
@include colors;
@include background-colors;

108
public/stylesheets/pico/colors/utilities/_settings.scss Normal file
View File

@@ -0,0 +1,108 @@
@use "sass:map";
@use "../../settings" as pico-settings;
// Prefix for CSS variables
$css-var-prefix: "--pico-" !default; // Must start with "--"
$css-class-prefix: "pico-" !default;
// Palette
$palette: () !default;
$palette: map.merge(
(
// Color families
"color-families":
(
red,
pink,
fuchsia,
purple,
violet,
indigo,
blue,
azure,
cyan,
jade,
green,
lime,
yellow,
amber,
pumpkin,
orange,
sand,
grey,
zinc,
slate
),
// Shades
"shades":
(
50,
100,
150,
200,
250,
300,
350,
400,
450,
500,
550,
600,
650,
700,
750,
800,
850,
900,
950
),
// Export main color for each family
"enable-main-color": true,
// Export shades for each family
"enable-shades": true,
// Export black and white
"enable-black-and-white": false,
// Light color used for dark backgrounds
"light-color": #fff,
// Dark color used for light backgrounds
"dark-color": #000,
// Export as HEX, RGB or HSL values
"export-as": "hex" // hex | rgb | hsl
),
$palette
);
// Properties names used for CSS variables and classes
// Useful if you want to shorten the names
$properties: () !default;
$properties: map.merge(
(
"color": "color",
"background-color": "background",
),
$properties
);
// Utilities to export
$utilities: () !default;
$utilities: map.merge(
(
// CSS Vars
"css-vars": true,
// Colors utility classes
"colors": true,
// Background color utility classes
"background-colors": true,
// Color value for background color utility classes
"color-for-background-colors": true
),
$utilities
);

56
public/stylesheets/pico/colors/utilities/_utils.scss Normal file
View File

@@ -0,0 +1,56 @@
@use "sass:color";
@use "sass:math";
@use "sass:map";
@use "settings";
// Determines if the foreground needs to be light or dark
// depending on the background color passed.
// W3C reference: http://www.w3.org/TR/AERT#color-contrast
// Inspiration: https://codepen.io/davidhalford/pen/ALrbEP
@function foreground-brightness($background-color) {
$background-color-brightness: brightness($background-color);
$light-color-brightness: brightness(#ffffff);
@if math.abs($background-color-brightness) < $light-color-brightness * 0.5 {
@return "light";
} @else {
@return "dark";
}
}
// Calculates the color brightness
// Color brightness is determined by the following formula:
// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
@function brightness($color) {
$color-brightness: round(
math.div(
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
1000
)
);
@return $color-brightness;
}
// Returns the color as RGB, HSL or HEX
@function display-color($color) {
@if map.get(settings.$palette, "export-as") == "rgb" {
@return display-rgb($color);
}
@if map.get(settings.$palette, "export-as") == "hsl" {
@return display-hsl($color);
}
@return $color;
}
// Display color as HSL
@function display-hsl($color) {
@return unquote(
"hsl(#{math.round(hue($color))}, #{math.round(saturation($color))}, #{math.round(lightness($color))})"
);
}
// Display color as RGB
@function display-rgb($color) {
@return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
}

116
public/stylesheets/pico/components/_accordion.scss Normal file
View File

@@ -0,0 +1,116 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/accordion") {
/**
* Accordion (<details>)
*/
#{$parent-selector} details {
display: block;
margin-bottom: var(#{$css-var-prefix}spacing);
summary {
line-height: 1rem;
list-style-type: none;
cursor: pointer;
&:not([role]) {
color: var(#{$css-var-prefix}accordion-close-summary-color);
}
@if $enable-transitions {
transition: color var(#{$css-var-prefix}transition);
}
// Reset marker
&::-webkit-details-marker {
display: none;
}
&::marker {
display: none;
}
&::-moz-list-bullet {
list-style-type: none;
}
// Marker
&::after {
display: block;
width: 1rem;
height: 1rem;
margin-inline-start: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@if $enable-transitions {
transition: transform var(#{$css-var-prefix}transition);
}
}
&:focus {
outline: none;
&:not([role]) {
color: var(#{$css-var-prefix}accordion-active-summary-color);
}
}
&:focus-visible {
&:not([role]) {
outline: var(#{$css-var-prefix}outline-width) solid var(#{$css-var-prefix}primary-focus);
outline-offset: calc(var(#{$css-var-prefix}spacing, 1rem) * 0.5);
color: var(#{$css-var-prefix}primary);
}
}
// Type button
&[role="button"] {
width: 100%;
text-align: left;
// Marker
&::after {
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
}
}
}
// Open
&[open] {
> summary {
margin-bottom: var(#{$css-var-prefix}spacing);
&:not([role]) {
&:not(:focus) {
color: var(#{$css-var-prefix}accordion-open-summary-color);
}
}
&::after {
transform: rotate(0);
}
}
}
}
[dir="rtl"] {
#{$parent-selector} details {
summary {
text-align: right;
&::after {
float: left;
background-position: left center;
}
}
}
}
}

46
public/stylesheets/pico/components/_card.scss Normal file
View File

@@ -0,0 +1,46 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/card") {
/**
* Card (<article>)
*/
#{$parent-selector} article {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}card-background-color);
box-shadow: var(#{$css-var-prefix}card-box-shadow);
> header,
> footer {
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
var(#{$css-var-prefix}block-spacing-horizontal);
background-color: var(#{$css-var-prefix}card-sectioning-background-color);
}
> header {
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-top-right-radius: var(#{$css-var-prefix}border-radius);
border-top-left-radius: var(#{$css-var-prefix}border-radius);
}
> footer {
margin-top: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}card-border-color);
border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
}
}
}

280
public/stylesheets/pico/components/_dropdown.scss Normal file
View File

@@ -0,0 +1,280 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/dropdown") and $enable-classes {
/**
* Dropdown (details.dropdown)
*/
// Container
// ––––––––––––––––––––
#{$parent-selector} details.dropdown {
position: relative;
border-bottom: none;
// Marker
// ––––––––––––––––––––
summary,
> button,
> a {
&::after {
display: block;
width: 1rem;
height: calc(1rem * var(#{$css-var-prefix}line-height, 1.5));
margin-inline-start: 0.25rem;
float: right;
// TODO: find out why we need this magic number (0.2 rem)
// for the marker to be aligned with the regular select
transform: rotate(0deg) translateX(0.2rem);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
}
}
// Container type accordion
// inside a nav
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
// Override height
margin-bottom: 0;
}
// Bouton as a select
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown summary:not([role]) {
height: calc(
1rem *
var(#{$css-var-prefix}line-height) +
var(#{$css-var-prefix}form-element-spacing-vertical) *
2 +
var(#{$css-var-prefix}border-width) *
2
);
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}form-element-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
user-select: none;
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
&:active,
&:focus {
border-color: var(#{$css-var-prefix}form-element-active-border-color);
background-color: var(#{$css-var-prefix}form-element-active-background-color);
}
&:focus {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
}
// Reset focus visible from accordion component
&:focus-visible {
outline: none;
}
// Aria-invalid
&[aria-invalid="false"] {
#{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-valid-border-color
);
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-valid-focus-color
);
}
&[aria-invalid="true"] {
#{$css-var-prefix}form-element-border-color: var(
#{$css-var-prefix}form-element-invalid-border-color
);
#{$css-var-prefix}form-element-active-border-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
#{$css-var-prefix}form-element-focus-color: var(
#{$css-var-prefix}form-element-invalid-focus-color
);
}
}
// Dropdown inside a nav
// ––––––––––––––––––––
#{$parent-selector} nav details.dropdown {
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
summary {
&::after {
transform: rotate(0deg) translateX(0rem);
}
&:not([role]) {
// Override height
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}nav-link-spacing-vertical) * 2)
);
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
&:focus-visible {
box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus);
}
}
}
}
// Submenu
// ––––––––––––––––––––
#{$parent-selector} details.dropdown summary + ul {
display: flex;
z-index: 99;
position: absolute;
left: 0;
flex-direction: column;
width: 100%;
min-width: fit-content;
margin: 0;
margin-top: var(#{$css-var-prefix}outline-width);
padding: 0;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}dropdown-border-color);
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}dropdown-background-color);
box-shadow: var(#{$css-var-prefix}dropdown-box-shadow);
color: var(#{$css-var-prefix}dropdown-color);
white-space: nowrap;
opacity: 0;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 1s;
}
&[dir="rtl"] {
right: 0;
left: auto;
}
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * -0.5)
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
overflow: hidden;
border-radius: 0;
color: var(#{$css-var-prefix}dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover,
&:focus,
&:active,
&:focus-visible,
&[aria-current]:not([aria-current="false"]) {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
}
}
label {
width: 100%;
}
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
&:has(label):hover {
background-color: var(#{$css-var-prefix}dropdown-hover-background-color);
}
}
}
// Button opened
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary {
margin-bottom: 0;
}
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
#{$parent-selector} details.dropdown[open] summary {
+ ul {
transform: scaleY(1);
opacity: 1;
@if $enable-transitions {
transition:
opacity var(#{$css-var-prefix}transition),
transform 0s ease-in-out 0s;
}
}
}
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––
#{$parent-selector} details.dropdown[open] summary {
&::before {
display: block;
z-index: 1;
position: fixed;
width: 100vw;
height: 100vh;
inset: 0;
background: none;
content: "";
cursor: default;
}
}
// Label
// ––––––––––––––––––––
#{$parent-selector} label > details.dropdown {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}

120
public/stylesheets/pico/components/_group.scss Normal file
View File

@@ -0,0 +1,120 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/group") {
/**
* Group ([role="group"], [role="search"])
*/
#{$parent-selector} [role="search"],
#{$parent-selector} [role="group"] {
display: inline-flex;
position: relative;
width: 100%;
margin-bottom: var(#{$css-var-prefix}spacing);
border-radius: var(#{$css-var-prefix}border-radius);
box-shadow: var(#{$css-var-prefix}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
vertical-align: middle;
transition: box-shadow var(#{$css-var-prefix}transition);
> *,
input:not([type="checkbox"], [type="radio"]),
select {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
&:not(:first-child) {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:focus {
z-index: 2;
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"],
input:not([type="checkbox"], [type="radio"]),
select {
&:not(:first-child) {
margin-left: calc(var(#{$css-var-prefix}border-width) * -1);
}
}
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"] {
width: auto;
}
@supports selector(:has(*)) {
// Group box shadow when a button is focused
&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
#{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-button
);
input:not([type="checkbox"], [type="radio"]),
select {
border-color: transparent;
}
}
// Group box shadow when an input is focused
&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
#{$css-var-prefix}group-box-shadow: var(
#{$css-var-prefix}group-box-shadow-focus-with-input
);
// Adapt box shadow for buttons
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
var(#{$css-var-prefix}primary-hover-border);
}
}
// Remove button box shadow if we have a group box shadow
button,
[type="submit"],
[type="reset"],
[type="button"],
[role="button"] {
&:focus {
box-shadow: none;
}
}
}
}
#{$parent-selector} [role="search"] {
> * {
&:first-child {
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
}
&:last-child {
border-top-right-radius: 5rem;
border-bottom-right-radius: 5rem;
}
}
}
}

46
public/stylesheets/pico/components/_loading.scss Normal file
View File

@@ -0,0 +1,46 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/loading") {
/**
* Loading ([aria-busy=true])
*/
// Everything except form elements
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
white-space: nowrap;
&::before {
display: inline-block;
width: 1em;
height: 1em;
background-image: var(#{$css-var-prefix}icon-loading);
background-size: 1em auto;
background-repeat: no-repeat;
content: "";
vertical-align: -0.125em; // Visual alignment
}
&:not(:empty) {
&::before {
margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
}
&:empty {
text-align: center;
}
}
// Buttons and links
#{$parent-selector} button,
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="button"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [role="button"],
#{$parent-selector} a {
&[aria-busy="true"] {
pointer-events: none;
}
}
}

176
public/stylesheets/pico/components/_modal.scss Normal file
View File

@@ -0,0 +1,176 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/modal") {
/**
* Modal (<dialog>)
*/
:root {
#{$css-var-prefix}scrollbar-width: 0px;
}
#{$parent-selector} dialog {
display: flex;
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
padding: 0;
border: 0;
backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
background-color: var(#{$css-var-prefix}modal-overlay-background-color);
color: var(#{$css-var-prefix}color);
// Content
article {
$close-selector: if(
$enable-classes,
".close, :is(a, button)[rel=prev]",
":is(a, button)[rel=prev]"
);
width: 100%;
max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
margin: var(#{$css-var-prefix}spacing);
overflow: auto;
@if map.get($breakpoints, "sm") {
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "sm"), "viewport");
}
}
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
max-width: map.get(map.get($breakpoints, "md"), "viewport");
}
}
> header {
> * {
margin-bottom: 0;
}
#{$close-selector} {
margin: 0;
margin-left: var(#{$css-var-prefix}spacing);
padding: 0;
float: right;
}
}
> footer {
text-align: right;
button,
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
margin-left: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
}
}
// Close icon
#{$close-selector} {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
margin-bottom: var(#{$css-var-prefix}spacing);
margin-left: auto;
border: none;
background-image: var(#{$css-var-prefix}icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
background-color: transparent;
opacity: 0.5;
@if $enable-transitions {
transition: opacity var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
opacity: 1;
}
}
}
// Closed state
&:not([open]),
&[open="false"] {
display: none;
}
}
// Utilities
@if $enable-classes {
.modal-is-open {
padding-right: var(#{$css-var-prefix}scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
dialog {
pointer-events: auto;
touch-action: auto;
}
}
}
// Animations
@if $enable-classes and $enable-transitions {
$animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) {
dialog,
dialog > article {
animation-duration: $animation-duration;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
dialog {
animation-duration: ($animation-duration * 4);
animation-name: modal-overlay;
> article {
animation-delay: $animation-duration;
animation-name: modal;
}
}
}
.modal-is-closing {
dialog,
dialog > article {
animation-delay: 0s;
animation-direction: reverse;
}
}
@keyframes modal-overlay {
from {
backdrop-filter: none;
background-color: transparent;
}
}
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
}
}
}

160
public/stylesheets/pico/components/_nav.scss Normal file
View File

@@ -0,0 +1,160 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/nav") {
/**
* Nav
*/
// Reboot based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
:where(nav li)::before {
float: left;
content: "\200B";
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} nav,
#{$parent-selector} nav ul {
display: flex;
}
#{$parent-selector} nav {
justify-content: space-between;
overflow: visible;
ol,
ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
&:first-of-type {
margin-left: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
}
&:last-of-type {
margin-right: calc(var(#{$css-var-prefix}nav-element-spacing-horizontal) * -1);
}
}
li {
display: inline-block;
margin: 0;
padding: var(#{$css-var-prefix}nav-element-spacing-vertical)
var(#{$css-var-prefix}nav-element-spacing-horizontal);
:where(a, [role="link"]) {
display: inline-block;
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1)
calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
padding: var(#{$css-var-prefix}nav-link-spacing-vertical)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
border-radius: var(#{$css-var-prefix}border-radius);
&:not(:hover) {
text-decoration: none;
}
}
// Minimal support for buttons and forms elements
button,
[role="button"],
[type="button"],
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select {
height: auto;
margin-right: inherit;
margin-bottom: 0;
margin-left: inherit;
padding: calc(
var(#{$css-var-prefix}nav-link-spacing-vertical) -
(var(#{$css-var-prefix}border-width) * 2)
)
var(#{$css-var-prefix}nav-link-spacing-horizontal);
}
}
// Breadcrumb
&[aria-label="breadcrumb"] {
align-items: center;
justify-content: start;
& ul li {
&:not(:first-child) {
margin-inline-start: var(#{$css-var-prefix}nav-link-spacing-horizontal);
}
a {
margin: calc(var(#{$css-var-prefix}nav-link-spacing-vertical) * -1) 0;
margin-inline-start: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
}
&:not(:last-child) {
&::after {
display: inline-block;
position: absolute;
width: calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * 4);
margin: 0 calc(var(#{$css-var-prefix}nav-link-spacing-horizontal) * -1);
content: var(#{$css-var-prefix}nav-breadcrumb-divider);
color: var(#{$css-var-prefix}muted-color);
text-align: center;
text-decoration: none;
white-space: nowrap;
}
}
}
// Minimal support for aria-current
& a[aria-current]:not([aria-current="false"]) {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
}
}
// Vertical Nav
#{$parent-selector} aside {
nav,
ol,
ul,
li {
display: block;
}
li {
padding: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}nav-element-spacing-horizontal);
a {
display: block;
}
// Minimal support for links as buttons
[role="button"] {
margin: inherit;
}
}
}
// Breadcrumb RTL
[dir="rtl"] {
#{$parent-selector} nav {
&[aria-label="breadcrumb"] {
& ul li {
&:not(:last-child) {
::after {
content: "\\";
}
}
}
}
}
}
}

102
public/stylesheets/pico/components/_progress.scss Normal file
View File

@@ -0,0 +1,102 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/progress") {
/**
* Progress
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
#{$parent-selector} progress {
display: inline-block; // 1
vertical-align: baseline; // 2
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
// Styles
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
overflow: hidden;
// Remove Firefox and Opera border
border: 0;
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}progress-background-color);
// IE10 uses `color` to set the bar background-color
color: var(#{$css-var-prefix}progress-color);
&::-webkit-progress-bar {
border-radius: var(#{$css-var-prefix}border-radius);
background: none;
}
&[value]::-webkit-progress-value {
background-color: var(#{$css-var-prefix}progress-color);
@if $enable-transitions {
transition: inline-size var(#{$css-var-prefix}transition);
}
}
&::-moz-progress-bar {
background-color: var(#{$css-var-prefix}progress-color);
}
// Indeterminate state
@media (prefers-reduced-motion: no-preference) {
&:indeterminate {
background: var(#{$css-var-prefix}progress-background-color)
linear-gradient(
to right,
var(#{$css-var-prefix}progress-color) 30%,
var(#{$css-var-prefix}progress-background-color) 30%
)
top left / 150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite;
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
}
}
}
[dir="rtl"] {
@media (prefers-reduced-motion: no-preference) {
#{$parent-selector} progress:indeterminate {
animation-direction: reverse;
}
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
}

215
public/stylesheets/pico/components/_tooltip.scss Normal file
View File

@@ -0,0 +1,215 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "components/tooltip") {
/**
* Tooltip ([data-tooltip])
*/
#{$parent-selector} [data-tooltip] {
position: relative;
&:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
&[data-placement="top"]::before,
&[data-placement="top"]::after,
&::before,
&::after {
display: block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
padding: 0.25rem 0.5rem;
overflow: hidden;
transform: translate(-50%, -0.25rem);
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}tooltip-background-color);
content: attr(data-tooltip);
color: var(#{$css-var-prefix}tooltip-color);
font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight);
font-size: 0.875rem;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
pointer-events: none;
}
// Caret
&[data-placement="top"]::after,
&::after {
padding: 0;
transform: translate(-50%, 0rem);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
color: var(#{$css-var-prefix}tooltip-background-color);
}
&[data-placement="bottom"] {
&::before,
&::after {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
&:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
}
&[data-placement="left"] {
&::before,
&::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
&:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
}
&[data-placement="right"] {
&::before,
&::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
&:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
}
// Display
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
}
}
@if $enable-transitions {
// Animations, excluding touch devices
@media (hover: hover) and (pointer: fine) {
// Default (top)
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, -0.25rem);
transform: translate(-50%, 0.75rem);
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-name: tooltip-slide;
opacity: 0;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, 0rem);
transform: translate(-50%, -0.25rem);
animation-name: tooltip-caret-slide;
}
}
// Bottom
&[data-placement="bottom"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-50%, 0.25rem);
transform: translate(-50%, -0.75rem);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-50%, -0.3rem);
transform: translate(-50%, -0.5rem);
animation-name: tooltip-caret-slide;
}
}
}
// Left
&[data-placement="left"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(-0.25rem, -50%);
transform: translate(0.75rem, -50%);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(0.3rem, -50%);
transform: translate(0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
}
// Right
&[data-placement="right"] {
&:focus,
&:hover {
&::before,
&::after {
#{$css-var-prefix}tooltip-slide-to: translate(0.25rem, -50%);
transform: translate(-0.75rem, -50%);
animation-name: tooltip-slide;
}
&::after {
#{$css-var-prefix}tooltip-caret-slide-to: translate(-0.3rem, -50%);
transform: translate(-0.05rem, -50%);
animation-name: tooltip-caret-slide;
}
}
}
}
@keyframes tooltip-slide {
to {
transform: var(#{$css-var-prefix}tooltip-slide-to);
opacity: 1;
}
}
@keyframes tooltip-caret-slide {
50% {
opacity: 0;
}
to {
transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
opacity: 1;
}
}
}
}
}

209
public/stylesheets/pico/content/_button.scss Normal file
View File

@@ -0,0 +1,209 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/button") {
/**
* Button
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Change the font styles in all browsers
// 2. Remove the margin on controls in Safari
// 3. Show the overflow in Edge
#{$parent-selector} button {
margin: 0; // 2
overflow: visible; // 3
font-family: inherit; // 1
text-transform: none; // 1
}
// Correct the inability to style buttons in iOS and Safari
#{$parent-selector} button,
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"] {
-webkit-appearance: button;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} button,
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"],
#{$parent-selector} [type="file"]::file-selector-button,
#{$parent-selector} [role="button"] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
#{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius);
outline: none;
background-color: var(#{$css-var-prefix}background-color);
box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: 1rem;
line-height: var(#{$css-var-prefix}line-height);
text-align: center;
text-decoration: none;
cursor: pointer;
user-select: none;
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"])),
&:is(:hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
#{$css-var-prefix}box-shadow: var(
#{$css-var-prefix}button-hover-box-shadow,
0 0 0 rgba(0, 0, 0, 0)
);
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
}
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
}
}
#{$parent-selector} [type="submit"],
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="button"] {
margin-bottom: var(#{$css-var-prefix}spacing);
}
// .secondary, .contrast & .outline
@if $enable-classes {
// Secondary
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="file"]::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
cursor: pointer;
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
}
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
}
}
// Contrast
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
}
&:focus,
&:is([aria-current]:not([aria-current="false"])):focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
}
}
// Outline (primary)
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
[type="reset"].outline {
#{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
}
}
// Outline (secondary)
#{$parent-selector}
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
[type="reset"].outline {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
}
}
// Outline (contrast)
#{$parent-selector}
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
}
}
} @else {
// Secondary button without .class
#{$parent-selector} [type="reset"],
#{$parent-selector} [type="file"]::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
cursor: pointer;
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
}
&:focus {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
}
}
}
// Button [disabled]
#{$parent-selector}
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
#{$parent-selector}
:where(fieldset[disabled])
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
opacity: 0.5;
pointer-events: none;
}
}

73
public/stylesheets/pico/content/_code.scss Normal file
View File

@@ -0,0 +1,73 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/code") {
/**
* Code
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Correct the inheritance and scaling of font size in all browsers
// 2. Correct the odd `em` font sizing in all browsers
#{$parent-selector} pre,
#{$parent-selector} code,
#{$parent-selector} kbd,
#{$parent-selector} samp {
font-size: 0.875em; // 2
font-family: var(#{$css-var-prefix}font-family); // 1
}
#{$parent-selector} pre code {
font-size: inherit;
font-family: inherit;
}
// Prevent overflow of the container in all browsers (opinionated)
#{$parent-selector} pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} pre,
#{$parent-selector} code,
#{$parent-selector} kbd {
border-radius: var(#{$css-var-prefix}border-radius);
background: var(#{$css-var-prefix}code-background-color);
color: var(#{$css-var-prefix}code-color);
font-weight: var(#{$css-var-prefix}font-weight);
line-height: initial;
}
#{$parent-selector} code,
#{$parent-selector} kbd {
display: inline-block;
padding: 0.375rem;
}
#{$parent-selector} pre {
display: block;
margin-bottom: var(#{$css-var-prefix}spacing);
overflow-x: auto;
> code {
display: block;
padding: var(#{$css-var-prefix}spacing);
background: none;
line-height: var(#{$css-var-prefix}line-height);
}
}
// kbd
#{$parent-selector} kbd {
background-color: var(#{$css-var-prefix}code-kbd-background-color);
color: var(#{$css-var-prefix}code-kbd-color);
vertical-align: baseline;
}
}

53
public/stylesheets/pico/content/_embedded.scss Normal file
View File

@@ -0,0 +1,53 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/embedded") {
/**
* Embedded content
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Change the alignment on media elements in all browsers (opinionated)
#{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
}
// Add the correct display in IE 9-
#{$parent-selector} audio,
#{$parent-selector} video {
display: inline-block;
}
// Add the correct display in iOS 4-7
#{$parent-selector} audio:not([controls]) {
display: none;
height: 0;
}
// Remove the border on iframes in all browsers (opinionated)
#{$parent-selector} :where(iframe) {
border-style: none;
}
// 1. Remove the border on images inside links in IE 10.
// 2. Responsive by default
#{$parent-selector} img {
max-width: 100%; // 2
height: auto; // 2
border-style: none; // 1
}
// Change the fill color to match the text color in all browsers (opinionated)
#{$parent-selector} :where(svg:not([fill])) {
fill: currentColor;
}
// Hide the overflow in IE
#{$parent-selector} svg:not(:root) {
overflow: hidden;
}
}

19
public/stylesheets/pico/content/_figure.scss Normal file
View File

@@ -0,0 +1,19 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/figure") {
/**
* Figure
*/
#{$parent-selector} figure {
display: block;
margin: 0;
padding: 0;
figcaption {
padding: calc(var(#{$css-var-prefix}spacing) * 0.5) 0;
color: var(#{$css-var-prefix}muted-color);
}
}
}

69
public/stylesheets/pico/content/_link.scss Normal file
View File

@@ -0,0 +1,69 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/link") {
/**
* Link
*/
#{$parent-selector} :where(a:not([role="button"])),
#{$parent-selector} [role="link"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
#{$css-var-prefix}background-color: transparent;
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
outline: none;
background-color: var(#{$css-var-prefix}background-color); // 1
color: var(#{$css-var-prefix}color);
text-decoration: var(#{$css-var-prefix}text-decoration);
text-decoration-color: var(#{$css-var-prefix}underline);
text-underline-offset: 0.125em;
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
text-decoration var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-hover-underline);
#{$css-var-prefix}text-decoration: underline;
}
&:focus-visible {
box-shadow: 0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
}
@if $enable-classes {
// Secondary
&.secondary {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-underline);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}secondary-hover-underline);
}
}
// Contrast
&.contrast {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-underline);
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}underline: var(#{$css-var-prefix}contrast-hover-underline);
}
}
}
}
#{$parent-selector} a {
&[role="button"] {
display: inline-block;
}
}
}

38
public/stylesheets/pico/content/_miscs.scss Normal file
View File

@@ -0,0 +1,38 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/miscs") {
/**
* Miscs
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Correct the inheritance of border color in Firefox
// 2. Add the correct box sizing in Firefox
#{$parent-selector} hr {
height: 0; // 2
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
border: 0;
border-top: 1px solid var(#{$css-var-prefix}muted-border-color);
color: inherit; // 1
}
// Add the correct display in IE 10+
#{$parent-selector} [hidden],
#{$parent-selector} template {
@if $enable-important {
display: none !important;
} @else {
display: none;
}
}
// Add the correct display in IE 9-
#{$parent-selector} canvas {
display: inline-block;
}
}

62
public/stylesheets/pico/content/_table.scss Normal file
View File

@@ -0,0 +1,62 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/table") {
/**
* Table
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Collapse border spacing in all browsers (opinionated)
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
#{$parent-selector} :where(table) {
width: 100%;
border-collapse: collapse; // 1
border-spacing: 0;
text-indent: 0; // 2
}
// Pico
// ––––––––––––––––––––
// Cells
#{$parent-selector} th,
#{$parent-selector} td {
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
border-bottom: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}table-border-color);
background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
text-align: left;
text-align: start;
}
// Footer
#{$parent-selector} tfoot {
th,
td {
border-top: var(#{$css-var-prefix}border-width)
solid
var(#{$css-var-prefix}table-border-color);
border-bottom: 0;
}
}
// Striped
@if enable-classes {
#{$parent-selector} table {
&.striped {
tbody tr:nth-child(odd) th,
tbody tr:nth-child(odd) td {
background-color: var(#{$css-var-prefix}table-row-stripped-background-color);
}
}
}
}
}

182
public/stylesheets/pico/content/_typography.scss Normal file
View File

@@ -0,0 +1,182 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "content/typography") {
/**
* Typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Add the correct font weight in Chrome, Edge, and Safari
#{$parent-selector} b,
#{$parent-selector} strong {
font-weight: bolder;
}
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
#{$parent-selector} sub,
#{$parent-selector} sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
#{$parent-selector} sub {
bottom: -0.25em;
}
#{$parent-selector} sup {
top: -0.5em;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} address,
#{$parent-selector} blockquote,
#{$parent-selector} dl,
#{$parent-selector} ol,
#{$parent-selector} p,
#{$parent-selector} pre,
#{$parent-selector} table,
#{$parent-selector} ul {
margin-top: 0;
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$css-var-prefix}color);
font-style: normal;
font-weight: var(#{$css-var-prefix}font-weight);
}
// Headings
#{$parent-selector} h1,
#{$parent-selector} h2,
#{$parent-selector} h3,
#{$parent-selector} h4,
#{$parent-selector} h5,
#{$parent-selector} h6 {
margin-top: 0;
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height);
font-family: var(#{$css-var-prefix}font-family);
}
#{$parent-selector} h1 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
}
#{$parent-selector} h2 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
}
#{$parent-selector} h3 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
}
#{$parent-selector} h4 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
}
#{$parent-selector} h5 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
}
#{$parent-selector} h6 {
#{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
}
// Margin-top for headings after a block
#{$parent-selector}
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(#{$css-var-prefix}typography-spacing-top);
}
}
// Paragraphs
#{$parent-selector} p {
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
}
// Heading group
#{$parent-selector} hgroup {
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
> * {
margin-top: 0;
margin-bottom: 0;
}
> *:not(:first-child):last-child {
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
#{$css-var-prefix}font-weight: unset;
font-size: 1rem;
}
}
// Lists
#{$parent-selector} :where(ol, ul) {
li {
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
}
}
// Margin-top for nested lists
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
#{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0; // 1
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
}
#{$parent-selector} ul li {
list-style: square;
}
// Highlighted text
#{$parent-selector} mark {
padding: 0.125rem 0.25rem;
background-color: var(#{$css-var-prefix}mark-background-color);
color: var(#{$css-var-prefix}mark-color);
vertical-align: baseline;
}
// Blockquote
#{$parent-selector} blockquote {
display: block;
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
padding: var(#{$css-var-prefix}spacing);
border-right: none;
border-left: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
border-inline-start: 0.25rem solid var(#{$css-var-prefix}blockquote-border-color);
border-inline-end: none;
footer {
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.5);
color: var(#{$css-var-prefix}blockquote-footer-color);
}
}
// Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
#{$parent-selector} abbr[title] {
border-bottom: 1px dotted;
text-decoration: none; // 1
cursor: help;
}
// Ins
#{$parent-selector} ins {
color: var(#{$css-var-prefix}ins-color);
text-decoration: none;
}
// del
#{$parent-selector} del {
color: var(#{$css-var-prefix}del-color);
}
// selection
#{$parent-selector} ::selection {
background-color: var(#{$css-var-prefix}text-selection-color);
}
}

471
public/stylesheets/pico/forms/_basics.scss Normal file
View File

@@ -0,0 +1,471 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/basics") {
// Helper
$helper-previous-tags: "input, select, textarea, fieldset";
/**
* Basics form elements
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Change the font styles in all browsers
// 2. Remove the margin in Firefox and Safari
#{$parent-selector} input,
#{$parent-selector} optgroup,
#{$parent-selector} select,
#{$parent-selector} textarea {
margin: 0; // 2
font-size: 1rem; // 1
line-height: var(#{$css-var-prefix}line-height); // 1
font-family: inherit; // 1
letter-spacing: inherit; // 2
}
// Show the overflow in IE.
#{$parent-selector} input {
overflow: visible;
}
// Remove the inheritance of text transform in Edge, Firefox, and IE
#{$parent-selector} select {
text-transform: none;
}
// 1. Correct the text wrapping in Edge and IE
// 2. Correct the color inheritance from `fieldset` elements in IE
// 3. Remove the padding so developers are not caught out when they zero out
// `fieldset` elements in all browsers
#{$parent-selector} legend {
max-width: 100%; // 1
padding: 0; // 3
color: inherit; // 2
white-space: normal; // 1
}
// 1. Remove the default vertical scrollbar in IE
#{$parent-selector} textarea {
overflow: auto; // 1
}
// Remove the padding in IE 10
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"] {
padding: 0;
}
// Correct the cursor style of increment and decrement buttons in Safari
#{$parent-selector} ::-webkit-inner-spin-button,
#{$parent-selector} ::-webkit-outer-spin-button {
height: auto;
}
// 1. Correct the odd appearance in Chrome and Safari
// 2. Correct the outline style in Safari
#{$parent-selector} [type="search"] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
// Remove the inner padding in Chrome and Safari on macOS
#{$parent-selector} [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// 1. Correct the inability to style clickable types in iOS and Safari
// 2. Change font properties to `inherit` in Safari
#{$parent-selector} ::-webkit-file-upload-button {
-webkit-appearance: button; // 1
font: inherit; // 2
}
// Remove the inner border and padding of focus outlines in Firefox
#{$parent-selector} ::-moz-focus-inner {
padding: 0;
border-style: none;
}
// Remove the focus outline in Firefox
#{$parent-selector} :-moz-focusring {
outline: none;
}
// Remove the additional :invalid styles in Firefox
#{$parent-selector} :-moz-ui-invalid {
box-shadow: none;
}
// Change the inconsistent appearance in IE (opinionated)
#{$parent-selector} ::-ms-expand {
display: none;
}
// Remove the border and padding in all browsers (opinionated)
#{$parent-selector} [type="file"],
#{$parent-selector} [type="range"] {
padding: 0;
border-width: 0;
}
// Pico
// ––––––––––––––––––––
// Force height for alternatives input types
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2)
);
}
// Fieldset
#{$parent-selector} fieldset {
width: 100%;
margin: 0;
margin-bottom: var(#{$css-var-prefix}spacing);
padding: 0;
border: 0;
}
// Label & legend
#{$parent-selector} label,
#{$parent-selector} fieldset legend {
display: block;
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
}
#{$parent-selector} fieldset legend {
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
}
// Blocks, 100%
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} button[type="submit"],
#{$parent-selector} select,
#{$parent-selector} textarea {
width: 100%;
}
// Reset appearance (Not Checkboxes, Radios, Range and File)
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
#{$parent-selector} select,
#{$parent-selector} textarea {
appearance: none;
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
var(#{$css-var-prefix}form-element-spacing-horizontal);
}
// Commons styles
#{$parent-selector} input,
#{$parent-selector} select,
#{$parent-selector} textarea {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
#{$css-var-prefix}box-shadow: none;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: var(#{$css-var-prefix}border-radius);
outline: none;
background-color: var(#{$css-var-prefix}background-color);
box-shadow: var(#{$css-var-prefix}box-shadow);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
border-color var(#{$css-var-prefix}transition),
color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
}
// Active & Focus
#{$parent-selector}
input:not(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[readonly]
),
#{$parent-selector} :where(select, textarea):not([readonly]) {
&:is(:active, :focus) {
#{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-active-background-color
);
}
}
// Active & Focus
#{$parent-selector}
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
#{$parent-selector} :where(select, textarea):not([readonly]) {
&:is(:active, :focus) {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
}
}
// Focus
#{$parent-selector}
input:not(
[type="submit"],
[type="button"],
[type="reset"],
[type="range"],
[type="file"],
[readonly]
),
#{$parent-selector} :where(select, textarea):not([readonly]) {
&:focus {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-focus-color);
}
}
// Disabled
#{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
#{$parent-selector} select[disabled],
#{$parent-selector} textarea[disabled],
#{$parent-selector} label[aria-disabled="true"],
#{$parent-selector}
:where(fieldset[disabled])
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
pointer-events: none;
}
#{$parent-selector} label[aria-disabled="true"] input[disabled] {
opacity: 1;
}
// Aria-invalid
#{$parent-selector} :where(input, select, textarea) {
&:not(
[type="checkbox"],
[type="radio"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"],
[type="range"]
) {
&[aria-invalid] {
@if $enable-important {
padding-right: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
padding-inline-end: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem
) !important;
} @else {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
}
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
&[aria-invalid="false"]:not(select) {
background-image: var(#{$css-var-prefix}icon-valid);
}
&[aria-invalid="true"]:not(select) {
background-image: var(#{$css-var-prefix}icon-invalid);
}
}
&[aria-invalid="false"] {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
&:is(:active, :focus) {
@if $enable-important {
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
) !important;
&:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-valid-focus-color) !important;
}
} @else {
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
&:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-valid-focus-color);
}
}
}
}
&[aria-invalid="true"] {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
&:is(:active, :focus) {
@if $enable-important {
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
) !important;
&:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-invalid-focus-color) !important;
}
} @else {
#{$css-var-prefix}border-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
&:not([type="checkbox"], [type="radio"]) {
#{$css-var-prefix}box-shadow: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}form-element-invalid-focus-color);
}
}
}
}
}
[dir="rtl"] {
#{$parent-selector} :where(input, select, textarea) {
&:not([type="checkbox"], [type="radio"]) {
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
background-position: center left 0.75rem;
}
}
}
}
// Placeholder
#{$parent-selector} input::placeholder,
#{$parent-selector} input::-webkit-input-placeholder,
#{$parent-selector} textarea::placeholder,
#{$parent-selector} textarea::-webkit-input-placeholder,
#{$parent-selector} select:invalid {
color: var(#{$css-var-prefix}form-element-placeholder-color);
opacity: 1;
}
// Margin bottom (Not Checkboxes and Radios)
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
#{$parent-selector} select,
#{$parent-selector} textarea {
margin-bottom: var(#{$css-var-prefix}spacing);
}
// Select
#{$parent-selector} select {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
}
&:not([multiple], [size]) {
padding-right: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
padding-left: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-start: var(#{$css-var-prefix}form-element-spacing-horizontal);
padding-inline-end: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.5rem);
background-image: var(#{$css-var-prefix}icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
&[multiple] {
option {
&:checked {
background: var(#{$css-var-prefix}form-element-selected-background-color);
color: var(#{$css-var-prefix}form-element-color);
}
}
}
}
[dir="rtl"] {
#{$parent-selector} select {
&:not([multiple], [size]) {
background-position: center left 0.75rem;
}
}
}
// Textarea
#{$parent-selector} textarea {
display: block;
resize: vertical;
&[aria-invalid] {
@if $enable-important {
#{$css-var-prefix}icon-height: calc(
(1rem * var(#{$css-var-prefix}line-height)) +
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
(var(#{$css-var-prefix}border-width) * 2)
);
background-position: top right 0.75rem !important;
background-size: 1rem var(#{$css-var-prefix}icon-height) !important;
}
}
}
@if map.get($modules, "layout/grid") and $enable-classes {
$helper-previous-tags: $helper-previous-tags + ", .grid";
}
#{$parent-selector} :where(#{$helper-previous-tags}) {
+ small {
display: block;
width: 100%;
margin-top: calc(var(#{$css-var-prefix}spacing) * -0.75);
margin-bottom: var(#{$css-var-prefix}spacing);
color: var(#{$css-var-prefix}muted-color);
}
&[aria-invalid="false"] {
+ small {
color: var(#{$css-var-prefix}ins-color);
}
}
&[aria-invalid="true"] {
+ small {
color: var(#{$css-var-prefix}del-color);
}
}
}
// Styles for Input inside a label
#{$parent-selector} label {
> :where(input, select, textarea) {
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
}
}
}

177
public/stylesheets/pico/forms/_checkbox-radio-switch.scss Normal file
View File

@@ -0,0 +1,177 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/checkbox-radio-switch") {
/**
* Checkboxes, Radios and Switches
*/
// Labels
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
#{$parent-selector} label {
&:has([type="checkbox"], [type="radio"]) {
width: fit-content;
cursor: pointer;
}
}
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.25em;
height: 1.25em;
margin-top: -0.125em;
margin-inline-end: 0.5em;
border-width: var(#{$css-var-prefix}border-width);
vertical-align: middle;
cursor: pointer;
&::-ms-check {
display: none; // unstyle IE checkboxes
}
&:checked,
&:checked:active,
&:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$css-var-prefix}icon-checkbox);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
& ~ label {
display: inline-block;
margin-bottom: 0;
cursor: pointer;
&:not(:last-of-type) {
margin-inline-end: 1em;
}
}
}
// Checkboxes
#{$parent-selector} [type="checkbox"] {
&:indeterminate {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
background-image: var(#{$css-var-prefix}icon-minus);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
}
// Radios
#{$parent-selector} [type="radio"] {
border-radius: 50%;
&:checked,
&:checked:active,
&:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
border-width: 0.35em;
background-image: none;
}
}
// Switchs
#{$parent-selector} [type="checkbox"][role="switch"] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
// Config
$switch-height: 1.25em;
$switch-width: 2.25em;
$switch-transition: 0.1s ease-in-out;
// Styles
width: $switch-width;
height: $switch-height;
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
border-radius: $switch-height;
background-color: var(#{$css-var-prefix}background-color);
line-height: $switch-height;
&:not([aria-invalid]) {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
}
&:before {
display: block;
aspect-ratio: 1;
height: 100%;
border-radius: 50%;
background-color: var(#{$css-var-prefix}color);
box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow);
content: "";
@if $enable-transitions {
transition: margin $switch-transition;
}
}
&:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
}
&:checked {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
background-image: none;
&::before {
margin-inline-start: calc(#{$switch-width} - #{$switch-height});
}
}
&[disabled] {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
}
}
// Aria-invalid
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="checkbox"][role="switch"] {
&[aria-invalid="false"] {
&:checked,
&:checked:active,
&:checked:focus {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
}
}
&:checked,
&:checked:active,
&:checked:focus {
&[aria-invalid="true"] {
#{$css-var-prefix}background-color: var(
#{$css-var-prefix}form-element-invalid-border-color
);
}
}
}
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"],
#{$parent-selector} [type="checkbox"][role="switch"] {
&[aria-invalid="false"] {
&:checked,
&:checked:active,
&:checked:focus {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
}
}
&:checked,
&:checked:active,
&:checked:focus {
&[aria-invalid="true"] {
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
}
}
}
}

37
public/stylesheets/pico/forms/_input-color.scss Normal file
View File

@@ -0,0 +1,37 @@
@use "sass:map";
@use "../settings" as *;
// Wrapper
@mixin color-wrapper {
padding: 0;
}
// Swatch
@mixin color-swatch {
border: 0;
border-radius: calc(var(#{$css-var-prefix}border-radius) * 0.5);
}
@if map.get($modules, "forms/input-color") {
/**
* Input type color
*/
#{$parent-selector} [type="color"] {
&::-webkit-color-swatch-wrapper {
@include color-wrapper;
}
&::-moz-focus-inner {
@include color-wrapper;
}
&::-webkit-color-swatch {
@include color-swatch;
}
&::-moz-color-swatch {
@include color-swatch;
}
}
}

60
public/stylesheets/pico/forms/_input-date.scss Normal file
View File

@@ -0,0 +1,60 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-date") {
/**
* Input type datetime
*/
// :not() are needed to add Specificity and avoid !important on padding
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
#{$css-var-prefix}icon-position: 0.75rem;
#{$css-var-prefix}icon-width: 1rem;
padding-right: calc(var(#{$css-var-prefix}icon-width) + var(#{$css-var-prefix}icon-position));
background-image: var(#{$css-var-prefix}icon-date);
background-position: center right var(#{$css-var-prefix}icon-position);
background-size: var(#{$css-var-prefix}icon-width) auto;
background-repeat: no-repeat;
}
// Time
&[type="time"] {
background-image: var(#{$css-var-prefix}icon-time);
}
}
// Calendar picker
#{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
&::-webkit-calendar-picker-indicator {
width: var(#{$css-var-prefix}icon-width);
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
margin-left: var(#{$css-var-prefix}icon-position);
opacity: 0;
}
}
// Calendar icons are hidden in Firefox
@if $enable-important {
@-moz-document url-prefix() {
#{$parent-selector} [type="date"],
#{$parent-selector} [type="datetime-local"],
#{$parent-selector} [type="month"],
#{$parent-selector} [type="time"],
#{$parent-selector} [type="week"] {
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
background-image: none !important;
}
}
}
[dir="rtl"]
#{$parent-selector}
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right;
}
}

41
public/stylesheets/pico/forms/_input-file.scss Normal file
View File

@@ -0,0 +1,41 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-file") {
/**
* Input type file
*/
// 1. Hack to display the outline on the focused file selector button
// with the forced overflow hidden on the input[type="file"] element.
#{$parent-selector} [type="file"] {
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
padding-left: var(#{$css-var-prefix}outline-width); // 1
border: 0;
border-radius: 0;
background: none;
&::file-selector-button {
margin-right: calc(var(#{$css-var-prefix}spacing) / 2);
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5)
var(#{$css-var-prefix}form-element-spacing-horizontal);
}
&:is(:hover, :active, :focus) {
&::file-selector-button {
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
}
}
&:focus {
&::file-selector-button {
#{$css-var-prefix}box-shadow:
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
}
}
}
}

100
public/stylesheets/pico/forms/_input-range.scss Normal file
View File

@@ -0,0 +1,100 @@
@use "sass:map";
@use "../settings" as *;
// Config
$height-track: 0.375rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
// Slider Track
@mixin slider-track {
width: 100%;
height: $height-track;
border-radius: var(#{$css-var-prefix}border-radius);
background-color: var(#{$css-var-prefix}range-border-color);
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
box-shadow var(#{$css-var-prefix}transition);
}
}
// Slider Thumb
@mixin slider-thumb {
-webkit-appearance: none;
width: $height-thumb;
height: $height-thumb;
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
border: $border-thumb solid var(#{$css-var-prefix}range-thumb-border-color);
border-radius: 50%;
background-color: var(#{$css-var-prefix}range-thumb-color);
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(#{$css-var-prefix}transition),
transform var(#{$css-var-prefix}transition);
}
}
@if map.get($modules, "forms/input-range") {
/**
* Input type range
*/
#{$parent-selector} [type="range"] {
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: $height-thumb;
background: none;
&::-webkit-slider-runnable-track {
@include slider-track;
}
&::-moz-range-track {
@include slider-track;
}
&::-ms-track {
@include slider-track;
}
&::-webkit-slider-thumb {
@include slider-thumb;
}
&::-moz-range-thumb {
@include slider-thumb;
}
&::-ms-thumb {
@include slider-thumb;
}
&:active,
&:focus-within {
#{$css-var-prefix}range-border-color: var(#{$css-var-prefix}range-active-border-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}range-thumb-active-color);
}
&:active {
// Slider Thumb
&::-webkit-slider-thumb {
transform: scale(1.25);
}
&::-moz-range-thumb {
transform: scale(1.25);
}
&::-ms-thumb {
transform: scale(1.25);
}
}
}
}

60
public/stylesheets/pico/forms/_input-search.scss Normal file
View File

@@ -0,0 +1,60 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "forms/input-search") {
/**
* Input type search
*/
// :not() are needed to add Specificity and avoid !important on padding
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
background-image: var(#{$css-var-prefix}icon-search);
background-position: center
left
calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 0.125rem);
background-size: 1rem auto;
background-repeat: no-repeat;
&[aria-invalid] {
@if $enable-important {
padding-inline-start: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
) !important;
} @else {
padding-inline-start: calc(
var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem
);
}
background-position:
center left 1.125rem,
center right 0.75rem;
}
&[aria-invalid="false"] {
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-valid);
}
&[aria-invalid="true"] {
background-image: var(#{$css-var-prefix}icon-search), var(#{$css-var-prefix}icon-invalid);
}
}
}
[dir="rtl"] {
#{$parent-selector} :where(input) {
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
&[type="search"] {
background-position: center right 1.125rem;
&[aria-invalid] {
background-position:
center right 1.125rem,
center left 0.75rem;
}
}
}
}
}
}

4
public/stylesheets/pico/helpers/_copyright.scss Normal file
View File

@@ -0,0 +1,4 @@
/*!
* Pico CSS ✨ v2.0.6 (https://picocss.com)
* Copyright 2019-2024 - Licensed under MIT
*/

49
public/stylesheets/pico/helpers/_functions.scss Normal file
View File

@@ -0,0 +1,49 @@
// Display color as RGB
@function display-rgb($color) {
@return unquote("rgb(" + red($color) + ", " + green($color) + ", " + blue($color) + ")");
}
// Generate a shadow layer
@function shadow-layer($elevation, $blur, $opacity, $color) {
@return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
}
// Generate a shadow with 7 layers
@function shadow($color) {
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
@return shadow-layer(
$box-shadow-elevation * 0.029,
$box-shadow-blur-strengh * 0.029,
$box-shadow-opacity * 0.283,
$color
),
shadow-layer(
$box-shadow-elevation * 0.067,
$box-shadow-blur-strengh * 0.067,
$box-shadow-opacity * 0.4,
$color
),
shadow-layer(
$box-shadow-elevation * 0.125,
$box-shadow-blur-strengh * 0.125,
$box-shadow-opacity * 0.5,
$color
),
shadow-layer(
$box-shadow-elevation * 0.225,
$box-shadow-blur-strengh * 0.225,
$box-shadow-opacity * 0.6,
$color
),
shadow-layer(
$box-shadow-elevation * 0.417,
$box-shadow-blur-strengh * 0.417,
$box-shadow-opacity * 0.717,
$color
),
shadow-layer($box-shadow-elevation, $box-shadow-blur-strengh, $box-shadow-opacity, $color),
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
}

33
public/stylesheets/pico/layout/_container.scss Normal file
View File

@@ -0,0 +1,33 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/container") and $enable-classes {
/**
* Container
*/
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(#{$css-var-prefix}spacing);
padding-left: var(#{$css-var-prefix}spacing);
}
.container {
$first-breakpoint: true;
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}

52
public/stylesheets/pico/layout/_document.scss Normal file
View File

@@ -0,0 +1,52 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/document") {
/**
* Document
* Content-box & Responsive typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Add border box sizing in all browsers (opinionated)
// 2. Backgrounds do not repeat by default (opinionated)
*,
*::before,
*::after {
box-sizing: border-box; // 1
background-repeat: no-repeat; // 2
}
// 1. Add text decoration inheritance in all browsers (opinionated)
// 2. Add vertical alignment inheritance in all browsers (opinionated)
::before,
::after {
text-decoration: inherit; // 1
vertical-align: inherit; // 2
}
// 1. Change the line height in all browsers (opinionated)
// 2. Breaks words to prevent overflow in all browsers (opinionated)
// 3. Use a 4-space tab width in all browsers (opinionated)
// 4. Remove the grey highlight on links in iOS (opinionated)
// 5. Prevent adjustments of font size after orientation changes in iOS
:where(:root) {
-webkit-tap-highlight-color: transparent; // 4
-webkit-text-size-adjust: 100%; // 5
text-size-adjust: 100%; // 5
background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height); // 1
font-family: var(#{$css-var-prefix}font-family);
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 2
tab-size: 4; // 3
}
}

26
public/stylesheets/pico/layout/_grid.scss Normal file
View File

@@ -0,0 +1,26 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/grid") and $enable-classes {
/**
* Grid
* Minimal grid system with auto-layout columns
*/
.grid {
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
display: grid;
grid-template-columns: 1fr;
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
& > * {
min-width: 0; // HACK for childs in overflow
}
}
}

62
public/stylesheets/pico/layout/_landmarks.scss Normal file
View File

@@ -0,0 +1,62 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/landmarks") {
/**
* Landmarks
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Remove the margin in all browsers (opinionated)
body {
width: 100%;
margin: 0; // 1
}
// Render the `main` element consistently in IE
main {
display: block;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} #{$semantic-root-element} {
> header,
> main,
> footer {
// <header>, <main>, <footer> as containers
@if $enable-semantic-container {
$first-breakpoint: true;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
@if $enable-viewport {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}
// Regular vertical spacings for <header>, <main>, <footer>
@else {
padding-block: var(#{$css-var-prefix}block-spacing-vertical);
}
}
}
}

12
public/stylesheets/pico/layout/_overflow-auto.scss Normal file
View File

@@ -0,0 +1,12 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/overflow-auto") and $enable-classes {
/**
* Overflow auto
*/
#{$parent-selector} .overflow-auto {
overflow: auto;
}
}

12
public/stylesheets/pico/layout/_section.scss Normal file
View File

@@ -0,0 +1,12 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/section") {
/**
* Section
*/
#{$parent-selector} section {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
}
}

5
public/stylesheets/pico/pico.classless.scss Normal file
View File

@@ -0,0 +1,5 @@
// Pico classless version
@use "index" with (
$enable-semantic-container: true,
$enable-classes: false
);

2
public/stylesheets/pico/pico.colors.scss Normal file
View File

@@ -0,0 +1,2 @@
@use "helpers/copyright";
@use "colors/utilities";

4
public/stylesheets/pico/pico.conditional.scss Normal file
View File

@@ -0,0 +1,4 @@
// Pico conditional version
@use "index" with (
$parent-selector: ".pico"
);

6
public/stylesheets/pico/pico.fluid.classless.scss Normal file
View File

@@ -0,0 +1,6 @@
// Pico classless version
@use "index" with (
$enable-semantic-container: true,
$enable-viewport: false,
$enable-classes: false
);

2
public/stylesheets/pico/pico.scss Normal file
View File

@@ -0,0 +1,2 @@
@forward "settings";
@use "index";

9
public/stylesheets/pico/postcss.config.js Normal file
View File

@@ -0,0 +1,9 @@
module.exports = {
syntax: "postcss-scss",
map: false,
plugins: {
"css-declaration-sorter": {
order: "smacss"
}
}
}

5
public/stylesheets/pico/themes/_default.scss Normal file
View File

@@ -0,0 +1,5 @@
// Styles
@use "default/styles";
// Colors schemes
@use "default/schemes";

248
public/stylesheets/pico/themes/default/_dark.scss Normal file
View File

@@ -0,0 +1,248 @@
@use "sass:map";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@use "theme-colors";
// Default: Dark theme
@mixin theme {
#{$css-var-prefix}background-color: #{mix($slate-950, $slate-900)};
// Text color
#{$css-var-prefix}color: #{$zinc-200};
// Text selection color
#{$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: 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: 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: 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};
#{$css-var-prefix}secondary-background: #{$slate-600};
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}secondary-underline: #{rgba($zinc-350, 0.5)};
#{$css-var-prefix}secondary-hover: #{$zinc-250};
#{$css-var-prefix}secondary-hover-background: #{$slate-550};
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}secondary-focus: #{rgba($slate-350, 0.25)};
#{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors
#{$css-var-prefix}contrast: #{$slate-100};
#{$css-var-prefix}contrast-background: #{$slate-50};
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}contrast-underline: #{rgba($slate-100, 0.5)};
#{$css-var-prefix}contrast-hover: #{$white};
#{$css-var-prefix}contrast-hover-background: #{$white};
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}contrast-hover);
#{$css-var-prefix}contrast-focus: #{rgba($slate-150, 0.25)};
#{$css-var-prefix}contrast-inverse: #{$black};
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow(mix($black, $slate-950));
// Typography
@if map.get($modules, "content/typography") {
// Headings colors
#{$css-var-prefix}h1-color: #{$zinc-50};
#{$css-var-prefix}h2-color: #{$zinc-100};
#{$css-var-prefix}h3-color: #{$zinc-200};
#{$css-var-prefix}h4-color: #{$zinc-250};
#{$css-var-prefix}h5-color: #{$zinc-300};
#{$css-var-prefix}h6-color: #{$zinc-400};
// Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{$azure-750};
#{$css-var-prefix}mark-color: #{$white};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-200)};
// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
}
// Button
@if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
// Table
@if map.get($modules, "content/table") {
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
}
// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}code-color: #{$zinc-400};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
}
// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-900, $slate-850)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-800};
#{$css-var-prefix}form-element-border-color: #{$slate-800};
#{$css-var-prefix}form-element-color: #{$zinc-100};
#{$css-var-prefix}form-element-placeholder-color: #{$zinc-400};
#{$css-var-prefix}form-element-active-background-color: #{mix($slate-900, $slate-850, 75%)};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $slate-600, 75%)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $slate-600, 75%)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-750};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "dark");
}
// Range (input[type="range"])
@if map.get($modules, "forms/input-range") {
#{$css-var-prefix}range-border-color: #{$slate-850};
#{$css-var-prefix}range-active-border-color: #{$slate-800};
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
}
// Accordion (<details>)
@if map.get($modules, "components/accordion") {
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
}
// Card (<article>)
@if map.get($modules, "components/card") {
#{$css-var-prefix}card-background-color: #{$slate-900};
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}card-background-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
#{$css-var-prefix}dropdown-background-color: #{$slate-900};
#{$css-var-prefix}dropdown-border-color: #{$slate-850};
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-850};
}
// Loading ([aria-busy=true])
@if map.get($modules, "components/loading") {
#{$css-var-prefix}loading-spinner-opacity: 0.5;
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
}
// Progress
@if map.get($modules, "components/progress") {
#{$css-var-prefix}progress-background-color: #{$slate-850};
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
}
// Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") {
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
}
// Chevron icons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
// Change the icon color to black for accordion and dropdown .contrast buttons
@if $enable-classes {
#{$parent-selector} details {
summary {
&[role="button"].contrast:not(.outline) {
&::after {
filter: brightness(0);
}
}
}
}
}
}
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}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='#{functions.display-rgb(mix($jade-450, $slate-600))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}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='#{functions.display-rgb(mix($red-500, $slate-600))}' 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");
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to black for .contrast buttons
@if $enable-classes {
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
&.contrast:is(
button,
[type="submit"],
[type="button"],
[type="reset"],
[role="button"]
):not(.outline) {
&::before {
filter: brightness(0);
}
}
}
}
}
// Document
color-scheme: dark;
}

212
public/stylesheets/pico/themes/default/_light.scss Normal file
View File

@@ -0,0 +1,212 @@
@use "sass:map";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@use "theme-colors";
// Default: Light theme
@mixin theme {
#{$css-var-prefix}background-color: #{$white};
// Text color
#{$css-var-prefix}color: #{$zinc-750};
// Text selection color
#{$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: 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: 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: 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};
#{$css-var-prefix}secondary-background: #{$slate-600};
#{$css-var-prefix}secondary-border: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}secondary-underline: #{rgba($slate-550, 0.5)};
#{$css-var-prefix}secondary-hover: #{$slate-650};
#{$css-var-prefix}secondary-hover-background: #{$slate-650};
#{$css-var-prefix}secondary-hover-border: var(#{$css-var-prefix}secondary-hover-background);
#{$css-var-prefix}secondary-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}secondary-focus: #{rgba($slate-550, 0.25)};
#{$css-var-prefix}secondary-inverse: #{$white};
// Contrast colors
#{$css-var-prefix}contrast: #{$slate-900};
#{$css-var-prefix}contrast-background: #{$slate-900};
#{$css-var-prefix}contrast-border: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}contrast-underline: #{rgba($slate-900, 0.5)};
#{$css-var-prefix}contrast-hover: #{$black};
#{$css-var-prefix}contrast-hover-background: #{$black};
#{$css-var-prefix}contrast-hover-border: var(#{$css-var-prefix}contrast-hover-background);
#{$css-var-prefix}contrast-hover-underline: var(#{$css-var-prefix}secondary-hover);
#{$css-var-prefix}contrast-focus: #{rgba($slate-550, 0.25)};
#{$css-var-prefix}contrast-inverse: #{$white};
// Box shadow
#{$css-var-prefix}box-shadow: functions.shadow($slate-400);
// Typography
@if map.get($modules, "content/typography") {
// Headings colors
#{$css-var-prefix}h1-color: #{$zinc-800};
#{$css-var-prefix}h2-color: #{$zinc-750};
#{$css-var-prefix}h3-color: #{$zinc-700};
#{$css-var-prefix}h4-color: #{$zinc-650};
#{$css-var-prefix}h5-color: #{$zinc-600};
#{$css-var-prefix}h6-color: #{$zinc-550};
// Highlighted text (<mark>)
#{$css-var-prefix}mark-background-color: #{mix($amber-100, $amber-50)};
#{$css-var-prefix}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{mix($jade-450, $zinc-750)};
#{$css-var-prefix}del-color: #{mix($red-500, $zinc-750)};
// Blockquote
#{$css-var-prefix}blockquote-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}blockquote-footer-color: var(#{$css-var-prefix}muted-color);
}
// Button
@if map.get($modules, "content/button") {
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
// Don't use, 'none, 'false, 'null', '0', etc.
#{$css-var-prefix}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
// Table
@if map.get($modules, "content/table") {
#{$css-var-prefix}table-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}table-row-stripped-background-color: #{rgba($zinc-500, 0.0375)};
}
// Code
@if map.get($modules, "content/code") {
#{$css-var-prefix}code-background-color: #{mix($slate-50, $white, 75%)};
#{$css-var-prefix}code-color: #{$zinc-550};
#{$css-var-prefix}code-kbd-background-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}code-kbd-color: var(#{$css-var-prefix}background-color);
}
// Form elements
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}form-element-background-color: #{mix($slate-50, $white, 25%)};
#{$css-var-prefix}form-element-selected-background-color: #{$slate-100};
#{$css-var-prefix}form-element-border-color: #{$slate-150};
#{$css-var-prefix}form-element-color: #{$zinc-850};
#{$css-var-prefix}form-element-placeholder-color: var(#{$css-var-prefix}muted-color);
#{$css-var-prefix}form-element-active-background-color: #{$white};
#{$css-var-prefix}form-element-active-border-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-border);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{mix($red-500, $zinc-350)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{mix($red-500, $zinc-350, 75%)};
#{$css-var-prefix}form-element-invalid-focus-color: var(
#{$css-var-prefix}form-element-invalid-active-border-color
);
#{$css-var-prefix}form-element-valid-border-color: #{mix($jade-450, $zinc-350)};
#{$css-var-prefix}form-element-valid-active-border-color: #{mix($jade-450, $zinc-350, 75%)};
#{$css-var-prefix}form-element-valid-focus-color: var(
#{$css-var-prefix}form-element-valid-active-border-color
);
// Focus for buttons, radio and select
input:is(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
) {
#{$css-var-prefix}form-element-focus-color: var(#{$css-var-prefix}primary-focus);
}
}
// Switch (input[type="checkbox"][role="switch"])
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}switch-background-color: #{$slate-200};
#{$css-var-prefix}switch-checked-background-color: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}switch-color: #{$white};
#{$css-var-prefix}switch-thumb-box-shadow: theme-colors.get("switch-thumb-box-shadow", "light");
}
// Range (input[type="range"])
@if map.get($modules, "forms/input-range") {
#{$css-var-prefix}range-border-color: #{$slate-100};
#{$css-var-prefix}range-active-border-color: #{$slate-200};
#{$css-var-prefix}range-thumb-border-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}range-thumb-color: var(#{$css-var-prefix}secondary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-background);
}
// Accordion (<details>)
@if map.get($modules, "components/accordion") {
#{$css-var-prefix}accordion-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}accordion-active-summary-color: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}accordion-close-summary-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}accordion-open-summary-color: var(#{$css-var-prefix}muted-color);
}
// Card (<article>)
@if map.get($modules, "components/card") {
#{$css-var-prefix}card-background-color: var(#{$css-var-prefix}background-color);
#{$css-var-prefix}card-border-color: var(#{$css-var-prefix}muted-border-color);
#{$css-var-prefix}card-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
#{$css-var-prefix}dropdown-background-color: #{$white};
#{$css-var-prefix}dropdown-border-color: #{$slate-50};
#{$css-var-prefix}dropdown-box-shadow: var(#{$css-var-prefix}box-shadow);
#{$css-var-prefix}dropdown-color: var(#{$css-var-prefix}color);
#{$css-var-prefix}dropdown-hover-background-color: #{$slate-50};
}
// Loading ([aria-busy=true])
@if map.get($modules, "components/loading") {
#{$css-var-prefix}loading-spinner-opacity: 0.5;
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
}
// Progress
@if map.get($modules, "components/progress") {
#{$css-var-prefix}progress-background-color: #{$slate-100};
#{$css-var-prefix}progress-color: var(#{$css-var-prefix}primary-background);
}
// Tooltip ([data-tooltip])
@if map.get($modules, "components/tooltip") {
#{$css-var-prefix}tooltip-background-color: var(#{$css-var-prefix}contrast-background);
#{$css-var-prefix}tooltip-color: var(#{$css-var-prefix}contrast-inverse);
}
// Form validation icons
@if map.get($modules, "forms/basics") {
#{$css-var-prefix}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='#{functions.display-rgb(mix($jade-450, $zinc-350))}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
#{$css-var-prefix}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='#{functions.display-rgb(mix($red-500, $zinc-350, 75%))}' 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");
}
// Document
color-scheme: light;
}

39
public/stylesheets/pico/themes/default/_schemes.scss Normal file
View File

@@ -0,0 +1,39 @@
@use "sass:map";
@use "../../settings" as *;
@use "light";
@use "dark";
@if map.get($modules, "themes/default") {
/**
* Color schemes
*/
// Light color scheme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
@include light.theme;
}
// Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
@include dark.theme;
}
}
// Dark color scheme (Forced)
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark.theme;
}
#{$parent-selector} progress,
#{$parent-selector} [type="checkbox"],
#{$parent-selector} [type="radio"],
#{$parent-selector} [type="range"] {
accent-color: var(#{$css-var-prefix}primary);
}
}

433
public/stylesheets/pico/themes/default/_styles.scss Normal file
View File

@@ -0,0 +1,433 @@
@use "sass:map";
@use "../../colors" as *;
@use "../../settings" as *;
@use "../../helpers/functions";
@use "theme-colors";
@if map.get($modules, "themes/default") {
/**
* Styles
*/
:root {
// Typography
#{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
#{$css-var-prefix}font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu,
Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace, var(#{$css-var-prefix}font-family-emoji);
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-sans-serif);
#{$css-var-prefix}line-height: 1.5;
#{$css-var-prefix}font-weight: 400;
#{$css-var-prefix}font-size: 100%;
#{$css-var-prefix}text-underline-offset: 0.1rem;
// Responsive root font size
@if $enable-responsive-typography {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
#{$css-var-prefix}font-size: map.get($values, "root-font-size");
}
}
}
}
// Borders
#{$css-var-prefix}border-radius: 0.25rem;
#{$css-var-prefix}border-width: 0.0625rem;
#{$css-var-prefix}outline-width: 0.125rem;
// Transitions
#{$css-var-prefix}transition: 0.2s ease-in-out;
// Spacings
#{$css-var-prefix}spacing: 1rem;
// Spacings for typography elements
@if map.get($modules, "content/typography") {
#{$css-var-prefix}typography-spacing-vertical: 1rem;
}
// Spacings for body > header, body > main, body > footer, section, article
@if map.get($modules, "layout/landmarks") or
map.get($modules, "layout/section") or
map.get($modules, "components/card") or
map.get($modules, "components/modal")
{
#{$css-var-prefix}block-spacing-vertical: var(#{$css-var-prefix}spacing);
#{$css-var-prefix}block-spacing-horizontal: var(#{$css-var-prefix}spacing);
}
@if map.get($modules, "layout/grid") and $enable-classes {
#{$css-var-prefix}grid-column-gap: var(#{$css-var-prefix}spacing);
#{$css-var-prefix}grid-row-gap: var(#{$css-var-prefix}spacing);
}
// Spacings for form elements and button
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
#{$css-var-prefix}form-element-spacing-vertical: 0.75rem;
#{$css-var-prefix}form-element-spacing-horizontal: 1rem;
}
// Font weight for form labels & fieldsets legend
@if map.get($modules, "forms/basic") {
#{$css-var-prefix}form-label-font-weight: var(#{$css-var-prefix}font-weight);
}
// Group (role="group")
@if map.get($modules, "components/group") {
#{$css-var-prefix}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}primary-focus);
#{$css-var-prefix}group-box-shadow-focus-with-input: 0
0
0
0.0625rem
var(#{$css-var-prefix}form-element-border-color);
}
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$css-var-prefix}modal-overlay-backdrop-filter: blur(0.375rem);
}
// Spacings for nav component
@if map.get($modules, "components/nav") {
#{$css-var-prefix}nav-element-spacing-vertical: 1rem;
#{$css-var-prefix}nav-element-spacing-horizontal: 0.5rem;
#{$css-var-prefix}nav-link-spacing-vertical: 0.5rem;
#{$css-var-prefix}nav-link-spacing-horizontal: 0.5rem;
#{$css-var-prefix}nav-breadcrumb-divider: ">";
}
// Checkboxes icons
@if map.get($modules, "forms/checkbox-radio-switch") {
#{$css-var-prefix}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='#{functions.display-rgb($white)}' 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");
#{$css-var-prefix}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='#{functions.display-rgb($white)}' 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");
}
// Chevron icons
@if map.get($modules, "forms/basics") or
map.get($modules, "components/accordion") or
map.get($modules, "components/dropdown")
{
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' 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");
}
// Datetime icons
@if map.get($modules, "forms/input-date") {
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' 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");
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' 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");
}
// Search icon
@if map.get($modules, "forms/input-search") {
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' stroke-width='1.5' 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");
}
// Close icon
@if map.get($modules, "components/modal") {
#{$css-var-prefix}icon-close: 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='#{functions.display-rgb($zinc-400)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Inspired by https://codepen.io/aleksander351/pen/KzgKPo
#{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
}
}
// Responsives spacings
@if $enable-responsive-spacings {
// Landmarks and section
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
#{$semantic-root-element} > header,
#{$semantic-root-element} > main,
#{$semantic-root-element} > footer,
section {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
@if $key == "sm" {
$multiplier: 1.25;
} @else if $key == "md" {
$multiplier: 1.5;
} @else if $key == "lg" {
$multiplier: 1.75;
} @else if $key == "xl" {
$multiplier: 2;
} @else if $key == "xxl" {
$multiplier: 2.25;
}
#{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
}
}
}
}
}
// Card (<article>)
@if map.get($modules, "components/card") {
article {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
$multiplier: 1;
@if $key == "sm" {
$multiplier: 1.25;
} @else if $key == "md" {
$multiplier: 1.5;
} @else if $key == "lg" {
$multiplier: 1.75;
} @else if $key == "xl" {
$multiplier: 2;
} @else if $key == "xxl" {
$multiplier: 2.25;
}
#{$css-var-prefix}block-spacing-vertical: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
#{$css-var-prefix}block-spacing-horizontal: calc(
var(#{$css-var-prefix}spacing) * $multiplier
);
}
}
}
}
}
}
// Link
@if map.get($modules, "content/link") {
a {
#{$css-var-prefix}text-decoration: underline;
// Secondary & Contrast
@if $enable-classes {
&.secondary,
&.contrast {
#{$css-var-prefix}text-decoration: underline;
}
}
}
}
// Typography
@if map.get($modules, "content/typography") {
// Small
small {
#{$css-var-prefix}font-size: 0.875em;
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
#{$css-var-prefix}font-weight: 700;
}
h1 {
#{$css-var-prefix}font-size: 2rem;
#{$css-var-prefix}line-height: 1.125;
#{$css-var-prefix}typography-spacing-top: 3rem;
}
h2 {
#{$css-var-prefix}font-size: 1.75rem;
#{$css-var-prefix}line-height: 1.15;
#{$css-var-prefix}typography-spacing-top: 2.625rem;
}
h3 {
#{$css-var-prefix}font-size: 1.5rem;
#{$css-var-prefix}line-height: 1.175;
#{$css-var-prefix}typography-spacing-top: 2.25rem;
}
h4 {
#{$css-var-prefix}font-size: 1.25rem;
#{$css-var-prefix}line-height: 1.2;
#{$css-var-prefix}typography-spacing-top: 1.874rem;
}
h5 {
#{$css-var-prefix}font-size: 1.125rem;
#{$css-var-prefix}line-height: 1.225;
#{$css-var-prefix}typography-spacing-top: 1.6875rem;
}
h6 {
#{$css-var-prefix}font-size: 1rem;
#{$css-var-prefix}line-height: 1.25;
#{$css-var-prefix}typography-spacing-top: 1.5rem;
}
}
// Table
@if map.get($modules, "content/table") {
thead,
tfoot {
th,
td {
#{$css-var-prefix}font-weight: 600;
#{$css-var-prefix}border-width: 0.1875rem;
}
}
}
// Code
@if map.get($modules, "content/code") {
pre,
code,
kbd,
samp {
#{$css-var-prefix}font-family: var(#{$css-var-prefix}font-family-monospace);
}
kbd {
#{$css-var-prefix}font-weight: bolder;
}
}
// Inputs and Selects
input:not(
[type="submit"],
[type="button"],
[type="reset"],
[type="checkbox"],
[type="radio"],
[type="file"]
),
:where(select, textarea) {
#{$css-var-prefix}outline-width: 0.0625rem;
}
[type="search"] {
#{$css-var-prefix}border-radius: 5rem;
}
// Checkboxes, Radios and Switches
@if map.get($modules, "forms/checkbox-radio-switch") {
[type="checkbox"],
[type="radio"] {
#{$css-var-prefix}border-width: 0.125rem;
}
[type="checkbox"][role="switch"] {
#{$css-var-prefix}border-width: 0.1875rem;
}
}
// Dropdown (details.dropdown)
@if map.get($modules, "components/dropdown") and $enable-classes {
details.dropdown {
summary:not([role="button"]) {
#{$css-var-prefix}outline-width: 0.0625rem;
}
}
nav {
details.dropdown {
summary:focus-visible {
#{$css-var-prefix}outline-width: 0.125rem;
}
}
}
}
// Group (role="group")
@if map.get($modules, "components/group") {
[role="search"] {
#{$css-var-prefix}border-radius: 5rem;
}
[role="search"],
[role="group"] {
@if $enable-classes {
&:has(
button.secondary:focus,
[type="submit"].secondary:focus,
[type="button"].secondary:focus,
[role="button"].secondary:focus
) {
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}secondary-focus);
}
&:has(
button.contrast:focus,
[type="submit"].contrast:focus,
[type="button"].contrast:focus,
[role="button"].contrast:focus
) {
#{$css-var-prefix}group-box-shadow-focus-with-button: 0
0
0
var(#{$css-var-prefix}outline-width)
var(#{$css-var-prefix}contrast-focus);
}
}
button,
[type="submit"],
[type="button"],
[role="button"] {
#{$css-var-prefix}form-element-spacing-horizontal: 2rem;
}
}
}
// Chevron icons
// Change the icon color to white for accordion and dropdown buttons
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
#{$parent-selector} details {
summary {
$selector: '&[role="button"]';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::after {
filter: brightness(0) invert(1);
}
}
}
}
}
// Loading icon (animated)
@if map.get($modules, "components/loading") {
// Change the icon color to white for buttons
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
@if $enable-classes {
$selector: "#{$selector}:not(.outline)";
}
#{$selector} {
&::before {
@if theme-colors.get("primary-inverse", "dark") == $white {
filter: brightness(0) invert(1);
} @else {
filter: brightness(0) invert(0);
}
}
}
}
}
}

490
public/stylesheets/pico/themes/default/_theme-colors.scss Normal file
View File

@@ -0,0 +1,490 @@
@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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
"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,
"switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
"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,
"switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
),
),
);
@function get($key, $mode: "light") {
@return map.get(map.get(map.get($color-mappings, $theme-color), $mode), $key);
}

57
public/stylesheets/pico/utilities/_accessibility.scss Normal file
View File

@@ -0,0 +1,57 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "utilities/accessibility") {
/**
* Accessibility & User interaction
*/
// Based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Accessibility
// Change the cursor on control elements in all browsers (opinionated)
#{$parent-selector} [aria-controls] {
cursor: pointer;
}
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
#{$parent-selector} [aria-disabled="true"],
#{$parent-selector} [disabled] {
cursor: not-allowed;
}
// Change the display on visually hidden accessible elements in all browsers (opinionated)
#{$parent-selector} [aria-hidden="false"][hidden] {
display: initial;
}
#{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
// User interaction
// Remove the tapping delay in IE 10
#{$parent-selector} a,
#{$parent-selector} area,
#{$parent-selector} button,
#{$parent-selector} input,
#{$parent-selector} label,
#{$parent-selector} select,
#{$parent-selector} summary,
#{$parent-selector} textarea,
#{$parent-selector} [tabindex] {
-ms-touch-action: manipulation;
}
// Pico
// ––––––––––––––––––––
#{$parent-selector} [dir="rtl"] {
direction: rtl;
}
}

30
public/stylesheets/pico/utilities/_reduce-motion.scss Normal file
View File

@@ -0,0 +1,30 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important {
/**
* Reduce Motion Features
*/
// Based on :
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Remove animations when motion is reduced (opinionated)
// 2. Remove fixed background attachments when motion is reduced (opinionated)
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
// 4. Remove transitions when motion is reduced (opinionated)
@media (prefers-reduced-motion: reduce) {
#{$parent-selector} *:not([aria-busy="true"]),
#{$parent-selector} :not([aria-busy="true"])::before,
#{$parent-selector} :not([aria-busy="true"])::after {
background-attachment: initial !important; // 2
animation-duration: 1ms !important; // 1
animation-delay: -1ms !important; // 1
animation-iteration-count: 1 !important; // 1
scroll-behavior: auto !important; // 3
transition-delay: 0s !important; // 4
transition-duration: 0s !important; // 4
}
}
}

1998
public/stylesheets/tallytome.css Normal file
View File

File diff suppressed because it is too large Load Diff

455
public/stylesheets/tallytome.scss Normal file
View File

@@ -0,0 +1,455 @@
@use "pico/pico" with (
$theme-color: "cyan",
$modules: (
"themes/default": false,
// Layout
"layout/document": true,
"layout/landmarks": true,
"layout/container": true,
"layout/section": true,
"layout/grid": true,
"layout/overflow-auto": false,
// Content
"content/link": true,
"content/typography": true,
"content/embedded": true,
"content/button": true,
"content/table": false,
"content/code": false,
"content/figure": false,
"content/miscs": true,
// Forms
"forms/basics": true,
"forms/checkbox-radio-switch": true,
"forms/input-color": false,
"forms/input-date": false,
"forms/input-file": false,
"forms/input-range": false,
"forms/input-search": false,
// Components
"components/accordion": true,
"components/card": false,
"components/dropdown": false,
"components/group": true,
"components/loading": false,
"components/modal": false,
"components/nav": true,
"components/progress": true,
"components/tooltip": false,
// Utilities
"utilities/accessibility": true,
"utilities/reduce-motion": true
)
);
@use "pico/colors/index" as *;
@use "custom/styles";
@use "custom/schemes";
:root{
// // https://coolors.co/00072d-001c55-0a2472-0e6ba8-a6e1fa
// --font-size: 1.2rem;
// --border-radius: 5px;
// --focus-boxshadow: 0.2rem;
// --pico-primary: hsl(204, 85%, 36%);
// --focus: hsl(204, 85%, 50%);
// --grey0: hsl(0, 0%, 0%);
// --grey1: hsl(0, 0%, 10%);
// --grey2: hsl(0, 0%, 20%);
// --grey3: hsl(0, 0%, 30%);
// --grey4: hsl(0, 0%, 40%);
// --grey5: hsl(0, 0%, 50%);
// --grey6: hsl(0, 0%, 60%);
// --grey7: hsl(0, 0%, 70%);
// --grey8: hsl(0, 0%, 80%);
// --grey9: hsl(0, 0%, 90%);
// --grey10: hsl(0, 0%, 100%);
// --color-ok: #{$green-500};
// --color-warning: #{$pumpkin-300};
// --color-danger: #{$red-500};
--color-hp: #{$red-400};
--color-mana: #{$azure-350};
}
// *, ::after, ::before {
// box-sizing: border-box;
// background-repeat: no-repeat;
// }
// .ok-helper{
// color: --color-ok;
// &::-moz-progress-bar {
// background-color: var(--color-ok);
// }
// }
// .warning-helper{
// color: var(--color-warning);
// &::-moz-progress-bar {
// background-color: var(--color-warning);
// }
// }
// .danger-helper{
// color: var(--color-danger);
// &::-moz-progress-bar {
// background-color: var(--color-danger);
// }
// }
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
// body{
// margin: 0;
// font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
// font-size: var(--font-size);
// }
// basic container
// .container{
// width: 100%;
// padding-left: 1rem;
// padding-right: 1rem;
// margin-left: auto;
// margin-right: auto;
// }
// @media (min-width: 576px){
// .container{
// width: clamp(510px, 90%, 1920px);
// padding: 0;
// }
// }
a {
cursor: pointer;
}
// progress
progress{
height: 1.25rem;
}
// stat container
.stat-container{
display: flex;
margin-bottom: var(--pico-spacing);
.start{
justify-content: flex-start;
margin-right: auto;
}
.middle{
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.end{
justify-content: flex-end;
margin-left: auto;
}
}
.lbl-offset{
display: flex;
margin-bottom: calc(var(--pico-spacing) * 0.4);
button{
margin-top: auto;
}
}
.progress{
border-radius: var(--pico-border-radius);
color: var(--pico-contrast);
height: 1.25rem;
background-color: var(--pico-progress-background-color);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: calc(var(--pico-spacing) * .5);
.progress-label{
position: absolute;
top: 0;
z-index: 20;
font-size: 0.9rem;
}
div{
height: 100%;
border-radius: var(--pico-border-radius);
background: var(--pico-primary);
position: relative;
z-index: 10;
align-self: start;
margin-right: auto;
animation-duration: 1s;
animation-fill-mode: forwards;
&.mana{
background-color: var(--color-mana);
animation-name: manaAnimation;
@keyframes manaAnimation {
0% {width: var(--mana-from-width);}
100% {width: var(--mana-to-width);}
}
}
&.hp{
background-color: var(--color-hp);
animation-name: hpAnimation;
@keyframes hpAnimation {
0% {width: var(--hp-from-width);}
100% {width: var(--hp-to-width);}
}
}
}
}
// utility
// margins
.mb-0{
margin-bottom: 0 !important;
}
.mb-1{
margin-bottom: calc(var(--pico-spacing) * .25);
}
.mb-2{
margin-bottom: calc(var(--pico-spacing) * .50);
}
.mb-3{
margin-bottom: calc(var(--pico-spacing) * .75);
}
.mb-4{
margin-bottom: var(--pico-spacing);
}
// form elements
// form{
// button{
// width: 100%;
// }
// }
// input{
// border: 1px var(--grey8) solid;
// outline: 0;
// border-radius: var(--border-radius);
// box-shadow: none;
// font-size: var(--font-size);
// background-color: var(--grey10);
// &:not([type="checkbox"], [type="radio"], [type="range"]) {
// width: 100%;
// padding: 0.75rem;
// }
// &:not([type="checkbox"], [type="radio"]), select, textarea {
// margin-bottom: 1rem;
// }
// &:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus {
// border-color: var(--primary);
// }
// }
// button{
// font-family: inherit;
// font-size: var(--font-size);
// outline: 0;
// border: 0;
// border-radius: var(--border-radius);
// box-shadow: none;
// color: var(--grey10);
// background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
// background-color: var(--primary);
// padding: 0.75rem 1.25rem;
// cursor: pointer;
// background-blend-mode: lighten;
// &:hover{
// background-blend-mode: darken;
// }
// }
// label:has([type="checkbox"], [type="radio"]) {
// width: -moz-fit-content;
// width: fit-content;
// cursor: pointer;
// }
// label {
// display: block;
// margin-bottom: 1rem;
// }
// [type="checkbox"], [type="radio"] {
// -webkit-appearance: none;
// -moz-appearance: none;
// appearance: none;
// width: 1.25em;
// height: 1.25em;
// margin-top: -.125em;
// margin-inline-end: .5em;
// border-width: 1px;
// vertical-align: middle;
// cursor: pointer;
// }
// [type="checkbox"][role="switch"] {
// width: 2.25em;
// height: 1.25em;
// border: 2px solid var(--grey8);
// border-radius: 1.25em;
// background-color: var(--grey8);
// line-height: 1.25em;
// &::before {
// display: block;
// width: calc(1.25em - .1rem * 2);
// height: 100%;
// border-radius: 50%;
// background-color: var(--grey10);
// content: "";
// transition: margin .2s ease-in-out;
// }
// &:focus{
// border-color: var(--focus);
// }
// &:checked{
// border-color: var(--focus);
// background-color: var(--primary);
// background-image: none;
// &:before {
// margin-inline-start: calc(1.125em - .24rem);
// }
// }
// }
// progress bar
// progress{
// -moz-appearance: none;
// appearance: none;
// display: inline-block;
// width: 100%;
// color: var(--primary);
// background: var(--grey9);
// border: 0;
// border-radius: var(--border-radius);
// &::-webkit-progress-bar {
// border-radius: var(--border-radius);
// background: none;
// }
// &[value]::-webkit-progress-value {
// border-radius: var(--border-radius);
// }
// &::-moz-progress-bar {
// background-color: var(--primary);
// }
// &:indeterminate {
// background: var(--grey9)
// linear-gradient(
// to right,
// var(--primary) 30%,
// var(--grey9) 30%
// )
// top left/150% 150% no-repeat;
// animation: progress-indeterminate 1.5s linear infinite;
// &[value]::-webkit-progress-value {
// background-color: transparent;
// }
// &::-moz-progress-bar {
// background-color: transparent;
// }
// }
// @keyframes progress-indeterminate {
// 0% {
// background-position: 200% 0;
// }
// 100% {
// background-position: -200% 0;
// }
// }
// }
// groups
// [role="group"], [role="search"] {
// display: inline-flex;
// position: relative;
// width: 100%;
// margin-bottom: 1rem;
// border-radius: var(--border-radius);
// box-shadow: var(--focus,0 0 0 transparent);
// vertical-align: middle;
// // transition: box-shadow var(--pico-transition);
// }
// [role="group"] input:not([type="checkbox"], [type="radio"]), [role="group"] select, [role="group"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, [role="search"] > * {
// position: relative;
// flex: 1 1 auto;
// margin-bottom: 0;
// }
// [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"] select:not(:last-child), [role="group"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), [role="search"] > :not(:last-child) {
// border-top-right-radius: 0;
// border-bottom-right-radius: 0;
// border-right: 0;
// }
// [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child), [role="group"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="search"] > :not(:first-child) {
// margin-left: 0;
// border-top-left-radius: 0;
// border-bottom-left-radius: 0;
// }

BIN
public/tally-logo-no-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 KiB

11
view/home/home.templ Normal file
View File

@@ -0,0 +1,11 @@
package home
import "github.com/itsig0/tallytome/view/layout"
templ Show(hx bool) {
@layout.Base(hx){
<div class="container">
<h1>Schön hier aber waren sie schon mal in Mordor?</h1>
</div>
}
}

52
view/home/home_templ.go Normal file
View File

@@ -0,0 +1,52 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.598
package home
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import "bytes"
import "github.com/itsig0/tallytome/view/layout"
func Show(hx bool) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = layout.Base(hx).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}

170
view/hptracker/tracker.templ Normal file
View File

@@ -0,0 +1,170 @@
package hptracker
import "github.com/itsig0/tallytome/view/layout"
import "fmt"
type TrackerData struct {
HP string
HPBase string
HPStartPercentage string
HPPercentage string
Mana string
ManaBase string
ManaStartPercentage string
ManaPercentage string
ManaRegen string
}
templ Show(hx bool, td TrackerData){
@layout.Base(hx){
<div class="container">
<div class="grid mb-2">
<div class="start">
<h2>Kampfrunde: </h2>
</div>
<div id="trackerBars" class="middle">
@TrackerColumn(td)
</div>
<div class="text-right">
<button>Nächste Runde</button>
</div>
</div>
// base stats go here
@baseStats()
<div class="grid">
<div>
<h3>TP</h3>
@hp()
</div>
<div>
<h3>Mana</h3>
@mana()
</div>
</div>
</div>
}
}
// css loading(percent string) {
// width: { fmt.Sprintf("%s%%", percent) };
// }
templ TrackerColumn(td TrackerData){
<div id="hpBar" class="progress">
@HPTracker(td)
</div>
<div class="progress">
@ManaTracker(td)
</div>
}
templ HPTracker(td TrackerData){
<span class="progress-label">TP: {td.HP}/{td.HP} </span>
<div class={"hp", hpAnimation(td.HPStartPercentage, td.HPPercentage)} ></div>
}
templ ManaTracker(td TrackerData){
<span class="progress-label">Mana: {td.Mana}/{td.Mana} </span>
<div class={"mana", manaAnimation(td.ManaStartPercentage, td.ManaPercentage)}></div>
}
css hpAnimation(from, to string) {
--hp-from-width:{ fmt.Sprintf("%s%%", from) };
--hp-to-width:{ fmt.Sprintf("%s%%", to) };
}
css manaAnimation(from, to string) {
--mana-from-width:{ fmt.Sprintf("%s%%", from) };
--mana-to-width:{ fmt.Sprintf("%s%%", to) };
}
templ baseStats(){
<details open>
<summary>Standard Werte</summary>
<form class="grid" hx-post="/hp-mana-tracker/update" hx-target="#trackerBars">
<label>
Trefferpunkte
<input
type="number"
placeholder="Trefferpunkte"
name="hp"
required
/>
</label>
<label>
Mana <input type="number" name="mana" placeholder="Mana" required/>
</label>
<label>
Regenerations %
<input
type="number"
name="manaregen"
placeholder="Regenerations %"
required
/>
</label>
<div class="lbl-offset">
<button type="submit">
Go
</button>
</div>
</form>
</details>
}
templ hp(){
<form hx-post="/hp-mana-tracker/damage" hx-target="#hpBar">
<fieldset role="group">
<button class="secondary" name="damage" value="true">
-
</button>
<input name="damageInput" type="number"/>
<button class="secondary" name="heal" value="true">
+
</button>
</fieldset>
<fieldset>
<label for="savingthrow">
<input id="savingthrow" name="savingthrow" type="checkbox" role="switch"/>
Verteidigungswurf
</label>
</fieldset>
</form>
}
templ mana(){
<fieldset role="group">
<button class="secondary" name="use" hx-get="/hp-mana-tracker/check">
-
</button>
<input type="number" placeholder="" min="0" value="0"/>
<button class="secondary" name="add">
+
</button>
</fieldset>
}

369
view/hptracker/tracker_templ.go Normal file
View File

@@ -0,0 +1,369 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.598
package hptracker
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import "bytes"
import "strings"
import "github.com/itsig0/tallytome/view/layout"
import "fmt"
type TrackerData struct {
HP string
HPBase string
HPStartPercentage string
HPPercentage string
Mana string
ManaBase string
ManaStartPercentage string
ManaPercentage string
ManaRegen string
}
func Show(hx bool, td TrackerData) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Var2 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = TrackerColumn(td).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = baseStats().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = hp().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = mana().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 5)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = layout.Base(hx).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
// css loading(percent string) {
// width: { fmt.Sprintf("%s%%", percent) };
// }
func TrackerColumn(td TrackerData) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var3 := templ.GetChildren(ctx)
if templ_7745c5c3_Var3 == nil {
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 6)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = HPTracker(td).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 7)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = ManaTracker(td).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 8)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func HPTracker(td TrackerData) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var4 := templ.GetChildren(ctx)
if templ_7745c5c3_Var4 == nil {
templ_7745c5c3_Var4 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 9)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(td.HP)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/hptracker/tracker.templ`, Line: 72, Col: 43}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 10)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(td.HP)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/hptracker/tracker.templ`, Line: 72, Col: 51}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 11)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var7 = []any{"hp", hpAnimation(td.HPStartPercentage, td.HPPercentage)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var7...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 12)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var7).String()))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 13)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func ManaTracker(td TrackerData) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var8 := templ.GetChildren(ctx)
if templ_7745c5c3_Var8 == nil {
templ_7745c5c3_Var8 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 14)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(td.Mana)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/hptracker/tracker.templ`, Line: 77, Col: 47}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 15)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(td.Mana)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/hptracker/tracker.templ`, Line: 77, Col: 57}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 16)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var11 = []any{"mana", manaAnimation(td.ManaStartPercentage, td.ManaPercentage)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var11...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 17)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ.CSSClasses(templ_7745c5c3_Var11).String()))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 18)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func hpAnimation(from, to string) templ.CSSClass {
var templ_7745c5c3_CSSBuilder strings.Builder
templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`--hp-from-width`, fmt.Sprintf("%s%%", from))))
templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`--hp-to-width`, fmt.Sprintf("%s%%", to))))
templ_7745c5c3_CSSID := templ.CSSID(`hpAnimation`, templ_7745c5c3_CSSBuilder.String())
return templ.ComponentCSSClass{
ID: templ_7745c5c3_CSSID,
Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`),
}
}
func manaAnimation(from, to string) templ.CSSClass {
var templ_7745c5c3_CSSBuilder strings.Builder
templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`--mana-from-width`, fmt.Sprintf("%s%%", from))))
templ_7745c5c3_CSSBuilder.WriteString(string(templ.SanitizeCSS(`--mana-to-width`, fmt.Sprintf("%s%%", to))))
templ_7745c5c3_CSSID := templ.CSSID(`manaAnimation`, templ_7745c5c3_CSSBuilder.String())
return templ.ComponentCSSClass{
ID: templ_7745c5c3_CSSID,
Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`),
}
}
func baseStats() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var12 := templ.GetChildren(ctx)
if templ_7745c5c3_Var12 == nil {
templ_7745c5c3_Var12 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 19)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func hp() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var13 := templ.GetChildren(ctx)
if templ_7745c5c3_Var13 == nil {
templ_7745c5c3_Var13 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 20)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func mana() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var14 := templ.GetChildren(ctx)
if templ_7745c5c3_Var14 == nil {
templ_7745c5c3_Var14 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 21)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}

39
view/layout/base.templ Normal file
View File

@@ -0,0 +1,39 @@
package layout
templ Base(hx bool){
if hx == false {
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/stylesheets/tallytome.css" />
<script src="/scripts/htmx.js"></script>
<script src="/scripts/alpine.js" defer></script>
<title>Tallytome</title>
</head>
<body>
<header>
@header()
</header>
<main>
{ children... }
</main>
// <footer>
// @footer()
// </footer>
</body>
</html>
}else{
{ children... }
}
}

58
view/layout/base_templ.go Normal file
View File

@@ -0,0 +1,58 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.598
package layout
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import "bytes"
func Base(hx bool) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
if hx == false {
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = header().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} else {
templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}

7
view/layout/footer.templ Normal file
View File

@@ -0,0 +1,7 @@
package layout
templ footer(){
<p>Feet</p>
}

35
view/layout/footer_templ.go Normal file
View File

@@ -0,0 +1,35 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.598
package layout
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import "bytes"
func footer() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}

29
view/layout/header.templ Normal file
View File

@@ -0,0 +1,29 @@
package layout
templ header(){
<nav class="container">
<ul class="brand">
<li>
<a class="" href="https://itsigo.de">
<img href="/" src="/tally-logo-no-bg.png" height="50" />
</a>
</li>
</ul>
<ul hx-target="main">
<li>
<a class="contrast"
hx-get="/"
hx-push-url="true"
>Home</a>
</li>
<li>
<a class="contrast"
hx-get="/hp-mana-tracker"
hx-push-url="true"
>TM-Tracker</a>
</li>
</ul>
</nav>
}

35
view/layout/header_templ.go Normal file
View File

@@ -0,0 +1,35 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.598
package layout
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import "bytes"
func header() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}