zcdziura/aisle17
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finally get a custom theme in place

Browse source
This commit is contained in:
Z. Charles Dziura 2025-07-16 16:36:57 -04:00
parent 16bac8e9cf
commit afc9862dbf
10 changed files with 148 additions and 518 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
api/Cargo.toml Normal file
View file

@ -0,0 +1,53 @@
[package]
name = "aisle17"
version = "0.1.0"
edition = "2024"
publish = false
[dependencies]
argon2 = "0.5"
axum = { version = "0.8", features = [
"macros",
"multipart",
"ws",
] }
base64 = "0.22"
blake3 = { version = "1.5", features = ["serde"] }
deadpool-redis = { version = "0.21", features = ["serde"] }
futures = "0.3"
http = "1.0"
humantime = "2.1"
humantime-serde = "1.1"
hyper = { version = "1.1", features = ["full"] }
lettre = { version = "0.11", default-features = false, features = [
"builder",
"hostname",
"pool",
"smtp-transport",
"tokio1",
"tokio1-rustls-tls",
] }
num_cpus = "1.16"
pasetors = "0.7"
rust_decimal = "1.36"
serde = { version = "1.0", features = ["derive", "rc", "std"] }
serde_json = "1.0"
serde_with = "3.9"
sqlx = { version = "0.8", features = [
"default",
"time",
"postgres",
"runtime-tokio",
"rust_decimal",
"uuid"
] }
syslog-tracing = "0.3.1"
time = { version = "0.3", features = ["formatting", "macros"] }
tokio = { version = "1.35", features = ["full"] }
toml = "0.8"
tower = "0.5"
tower-http = { version = "0.6", features = ["full"] }
tracing = "0.1.40"
tracing-subscriber = { version = "0.3", features = ["env-filter", "time"] }
url = { version = "2.5.2", features = ["expose_internals"] }
uuid = { version = "1.10", features = ["serde", "v7"] }

23
api/aisle17.config.example.toml Normal file
View file

@ -0,0 +1,23 @@
hostname = "127.0.0.1"
port = "42069"
assets_dir = ''
log = "info"
[secrets]
token_key = ''
[database]
host = ""
port = "5432"
user = "aisle17"
password = ""
schema = "aisle17"
[cache]
host = "192.168.122.76"
port = "6379"
user = "aisle17"
password = ""
[mail]
send_verification_email = true

23
api/aisle17.config.toml Normal file
View file

@ -0,0 +1,23 @@
hostname = "127.0.0.1"
port = "42069"
assets_dir = ''
log = "info"
[secrets]
token_key = ''
[database]
host = ""
port = "5432"
user = "aisle17"
password = ""
schema = "aisle17"
[cache]
host = "192.168.122.76"
port = "6379"
user = "aisle17"
password = ""
[mail]
send_verification_email = true

3
api/src/main.rs Normal file
View file

@ -0,0 +1,3 @@
fn main() {
println!("Hello, world!");
}

7
webapp/src/styles.scss
View file

@ -2,9 +2,6 @@
$enable-semantic-container: true,
$enable-classes: false,
$modules: (
// Theme
'themes/default': false,
// Layout
'layout/grid': false,
@ -17,9 +14,7 @@
)
);
// Custom Theme
@use 'styles/theme/styles';
@use 'styles/theme/schemes';
@use './styles/theme';
body {
margin: 0;

45
webapp/src/styles/_theme.scss Normal file
View file

@ -0,0 +1,45 @@
:root, :host {
--pico-font-family-sans-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
--pico-font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
// Light Theme
[data-theme=light],
:root:not([data-theme=dark]),
:host:not([data-theme=dark]) {
--pico-text-selection-color: rgba(244, 93, 44, 0.25);
--pico-primary: #bd3c13;
--pico-primary-background: #d24317;
--pico-primary-underline: rgba(189, 60, 19, 0.5);
--pico-primary-hover: #942d0d;
--pico-primary-hover-background: #bd3c13;
--pico-primary-focus: rgba(244, 93, 44, 0.5);
--pico-primary-inverse: #fff;
}
// Dark Theme
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]),
:host:not([data-theme]) {
--pico-text-selection-color: rgba(245, 107, 61, 0.1875);
--pico-primary: #f56b3d;
--pico-primary-background: #d24317;
--pico-primary-underline: rgba(245, 107, 61, 0.5);
--pico-primary-hover: #f8a283;
--pico-primary-hover-background: #e74b1a;
--pico-primary-focus: rgba(245, 107, 61, 0.375);
--pico-primary-inverse: #fff;
}
}
/* Orange color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme=dark] {
--pico-text-selection-color: rgba(245, 107, 61, 0.1875);
--pico-primary: #f56b3d;
--pico-primary-background: #d24317;
--pico-primary-underline: rgba(245, 107, 61, 0.5);
--pico-primary-hover: #f8a283;
--pico-primary-hover-background: #e74b1a;
--pico-primary-focus: rgba(245, 107, 61, 0.375);
--pico-primary-inverse: #fff;
}

144
webapp/src/styles/theme/_dark.scss
View file

@ -1,144 +0,0 @@
@use 'sass:color';
@use 'sass:map';
@use '@picocss/pico/scss/settings' as *;
@use '@picocss/pico/scss/colors' as *;
@use '@picocss/pico/scss/helpers/functions';
$theme-color: #0074d9;
// Default: Dark theme
@mixin theme {
#{$css-var-prefix}background-color: #{color.mix($slate-950, $slate-900)};
// Text color
#{$css-var-prefix}color: #{$zinc-100};
// Text selection color
#{$css-var-prefix}text-selection-color: #{rgba($theme-color, 0.1875)};
// Muted colors
#{$css-var-prefix}muted-color: #{$zinc-450};
#{$css-var-prefix}muted-border-color: #{$slate-850};
// Primary colors
#{$css-var-prefix}primary: #{$theme-color};
#{$css-var-prefix}primary-background: var(#{$css-var-prefix}primary);
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}primary-underline: #{rgba($theme-color, 0.5)};
#{$css-var-prefix}primary-hover: #{color.scale($theme-color, $lightness: 21%)};
#{$css-var-prefix}primary-hover-background: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}primary-focus: #{rgba($theme-color, 0.375)};
#{$css-var-prefix}primary-inverse: #{$black};
// 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($black);
// 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: #{color.mix($jade-450, $zinc-200)};
#{$css-var-prefix}del-color: #{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)};
}
// Form elements
@if map.get($modules, 'forms/basics') {
#{$css-var-prefix}form-element-background-color: #{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: #{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-focus);
#{$css-var-prefix}form-element-disabled-background-color: var(#{$css-var-prefix}form-element-background-color);
#{$css-var-prefix}form-element-disabled-border-color: var(#{$css-var-prefix}form-element-border-color);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $slate-600)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{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: #{color.mix($jade-450, $slate-600)};
#{$css-var-prefix}form-element-valid-active-border-color: #{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);
}
}
// 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}primary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-hover-background);
}
// 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(color.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(color.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");
}
// Document
color-scheme: dark;
}

144
webapp/src/styles/theme/_light.scss
View file

@ -1,144 +0,0 @@
@use 'sass:color';
@use 'sass:map';
@use '@picocss/pico/scss/settings' as *;
@use '@picocss/pico/scss/colors' as *;
@use '@picocss/pico/scss/helpers/functions';
$theme-color: #001f3f;
// Default: Light theme
@mixin theme {
#{$css-var-prefix}background-color: #{$white};
// Text color
#{$css-var-prefix}color: #{$zinc-900};
// Text selection color
#{$css-var-prefix}text-selection-color: #{rgba($theme-color, 0.25)};
// Muted colors
#{$css-var-prefix}muted-color: #{$zinc-550};
#{$css-var-prefix}muted-border-color: #{color.mix($slate-100, $slate-50)};
// Primary colors
#{$css-var-prefix}primary: #{$theme-color};
#{$css-var-prefix}primary-background: var(#{$css-var-prefix}primary);
#{$css-var-prefix}primary-border: var(#{$css-var-prefix}primary-background);
#{$css-var-prefix}primary-underline: #{rgba($theme-color, 0.5)};
#{$css-var-prefix}primary-hover: #{color.scale($theme-color, $lightness: -21%)};
#{$css-var-prefix}primary-hover-background: #{color.scale($theme-color, $lightness: 21%)};
#{$css-var-prefix}primary-hover-border: var(#{$css-var-prefix}primary-hover-background);
#{$css-var-prefix}primary-hover-underline: var(#{$css-var-prefix}primary-hover);
#{$css-var-prefix}primary-focus: #{rgba($theme-color, 0.375)};
#{$css-var-prefix}primary-inverse: #{$black};
// 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: #{color.mix($amber-100, $amber-50)};
#{$css-var-prefix}mark-color: #{$zinc-950};
// Inserted (<ins>) & Deleted (<del>)
#{$css-var-prefix}ins-color: #{color.mix($jade-450, $zinc-750)};
#{$css-var-prefix}del-color: #{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)};
}
// Form elements
@if map.get($modules, 'forms/basics') {
#{$css-var-prefix}form-element-background-color: #{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-focus);
#{$css-var-prefix}form-element-disabled-background-color: var(#{$css-var-prefix}form-element-background-color);
#{$css-var-prefix}form-element-disabled-border-color: var(#{$css-var-prefix}form-element-border-color);
#{$css-var-prefix}form-element-disabled-opacity: 0.5;
#{$css-var-prefix}form-element-invalid-border-color: #{color.mix($red-500, $zinc-350)};
#{$css-var-prefix}form-element-invalid-active-border-color: #{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: #{color.mix($jade-450, $zinc-350)};
#{$css-var-prefix}form-element-valid-active-border-color: #{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);
}
}
// 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}primary-background);
#{$css-var-prefix}range-thumb-active-color: var(#{$css-var-prefix}primary-hover-background);
}
// 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(color.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(color.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;
}

37
webapp/src/styles/theme/_schemes.scss
View file

@ -1,37 +0,0 @@
@use 'sass:map';
@use '@picocss/pico/scss/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;
}
progress,
[type='checkbox'],
[type='radio'],
[type='range'] {
accent-color: var(#{$css-var-prefix}primary);
}

187
webapp/src/styles/theme/_styles.scss
View file

@ -1,187 +0,0 @@
@use 'sass:map';
@use '@picocss/pico/scss/settings' as *;
@use '@picocss/pico/scss/colors' as *;
@use '@picocss/pico/scss/helpers/functions';
/**
* 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, Helvetica, Arial, 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;
// Borders
#{$css-var-prefix}border-radius: 0.375rem;
#{$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: calc(var(#{$css-var-prefix}spacing) * 1.5);
#{$css-var-prefix}block-spacing-horizontal: calc(var(#{$css-var-prefix}spacing) * 1.5);
}
}
// 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);
}
}
// 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");
}
}
// 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');
}
}
}
}
}
// 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;
}
}
// Buttons
button,
[type='submit'],
[type='reset'],
[type='button'],
[type='file']::file-selector-button,
[role='button'] {
#{$css-var-prefix}font-weight: 700;
}
// Table
@if map.get($modules, 'content/table') {
thead,
tfoot {
th,
td {
#{$css-var-prefix}font-weight: 600;
#{$css-var-prefix}border-width: 0.1875rem;
}
}
}