manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

💄 Improve block component capabilities

Browse source
This commit is contained in:
Manuel Cillero 2024-03-09 20:08:42 +01:00
parent 36a89ac571
commit f467aaa330
10 changed files with 290 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/pagetop-bootsier/src/lib.rs
View file

@ -105,10 +105,10 @@ impl ThemeTrait for Bootsier {
ClassesOp::Replace(b.style().to_string()), ClassesOp::Replace(b.style().to_string()),
match b.style() { match b.style() {
StyleBase::Default => "btn-primary", StyleBase::Default => "btn-primary",
StyleBase::Success => "btn-success",
StyleBase::Danger => "btn-danger",
StyleBase::Warning => "btn-warning",
StyleBase::Info => "btn-info", StyleBase::Info => "btn-info",
StyleBase::Success => "btn-success",
StyleBase::Warning => "btn-warning",
StyleBase::Danger => "btn-danger",
StyleBase::Light => "btn-light", StyleBase::Light => "btn-light",
StyleBase::Dark => "btn-dark", StyleBase::Dark => "btn-dark",
StyleBase::Link => "btn-link", StyleBase::Link => "btn-link",

6
packages/pagetop-bulmix/src/lib.rs
View file

@ -57,10 +57,10 @@ impl ThemeTrait for Bulmix {
ClassesOp::Replace(b.style().to_string()), ClassesOp::Replace(b.style().to_string()),
match b.style() { match b.style() {
StyleBase::Default => "is-primary", StyleBase::Default => "is-primary",
StyleBase::Success => "is-success",
StyleBase::Danger => "is-danger",
StyleBase::Warning => "is-warning",
StyleBase::Info => "is-info", StyleBase::Info => "is-info",
StyleBase::Success => "is-success",
StyleBase::Warning => "is-warning",
StyleBase::Danger => "is-danger",
StyleBase::Light => "is-light", StyleBase::Light => "is-light",
StyleBase::Dark => "is-dark", StyleBase::Dark => "is-dark",
StyleBase::Link => "is-text", StyleBase::Link => "is-text",

34
src/base/component.rs
View file

@ -15,7 +15,17 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
StyleSheet::at("/base/css/root.css") StyleSheet::at("/base/css/root.css")
.with_version("0.0.1") .with_version("0.0.1")
.with_weight(weight), .with_weight(weight),
)).alter(ContextOp::AddStyleSheet(
StyleSheet::at("/base/css/looks.css")
.with_version("0.0.1")
.with_weight(weight),
))
.alter(ContextOp::AddStyleSheet(
StyleSheet::at("/base/css/buttons.css")
.with_version("0.0.2")
.with_weight(weight),
)); ));
if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_ICONS) { if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_ICONS) {
cx.alter(ContextOp::AddStyleSheet( cx.alter(ContextOp::AddStyleSheet(
StyleSheet::at("/base/css/icons.min.css") StyleSheet::at("/base/css/icons.min.css")
@ -23,6 +33,7 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
.with_weight(weight), .with_weight(weight),
)); ));
} }
if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_FLEX_ASSETS) { if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_FLEX_ASSETS) {
cx.alter(ContextOp::AddStyleSheet( cx.alter(ContextOp::AddStyleSheet(
StyleSheet::at("/base/css/flex.css") StyleSheet::at("/base/css/flex.css")
@ -30,6 +41,7 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
.with_weight(weight), .with_weight(weight),
)); ));
} }
if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_MENU_ASSETS) { if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_MENU_ASSETS) {
cx.alter(ContextOp::AddStyleSheet( cx.alter(ContextOp::AddStyleSheet(
StyleSheet::at("/base/css/menu.css") StyleSheet::at("/base/css/menu.css")
@ -42,16 +54,6 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
.with_weight(weight), .with_weight(weight),
)); ));
} }
cx.alter(ContextOp::AddStyleSheet(
StyleSheet::at("/base/css/looks.css")
.with_version("0.0.1")
.with_weight(weight),
))
.alter(ContextOp::AddStyleSheet(
StyleSheet::at("/base/css/buttons.css")
.with_version("0.0.2")
.with_weight(weight),
));
} }
// ************************************************************************************************* // *************************************************************************************************
@ -92,10 +94,10 @@ impl ToString for BreakPoint {
pub enum StyleBase { pub enum StyleBase {
#[default] #[default]
Default, Default,
Success,
Danger,
Warning,
Info, Info,
Success,
Warning,
Danger,
Light, Light,
Dark, Dark,
Link, Link,
@ -106,10 +108,10 @@ impl ToString for StyleBase {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
StyleBase::Default => "style__default", StyleBase::Default => "style__default",
StyleBase::Success => "style__success",
StyleBase::Danger => "style__danger",
StyleBase::Warning => "style__warning",
StyleBase::Info => "style__info", StyleBase::Info => "style__info",
StyleBase::Success => "style__success",
StyleBase::Warning => "style__warning",
StyleBase::Danger => "style__danger",
StyleBase::Light => "style__light", StyleBase::Light => "style__light",
StyleBase::Dark => "style__dark", StyleBase::Dark => "style__dark",
StyleBase::Link => "style__link", StyleBase::Link => "style__link",

41
src/base/component/block.rs
View file

@ -7,6 +7,7 @@ pub struct Block {
weight : Weight, weight : Weight,
renderable: Renderable, renderable: Renderable,
classes : OptionClasses, classes : OptionClasses,
style : StyleBase,
title : OptionTranslated, title : OptionTranslated,
mixed : MixedComponents, mixed : MixedComponents,
} }
@ -29,23 +30,29 @@ impl ComponentTrait for Block {
} }
fn setup_before_prepare(&mut self, _cx: &mut Context) { fn setup_before_prepare(&mut self, _cx: &mut Context) {
self.alter_classes(ClassesOp::Prepend, "block__container"); self.alter_classes(
ClassesOp::Prepend,
[String::from("block__container"), self.style().to_string()].join(" "),
);
} }
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let block_body = self.components().render(cx); let block_body = self.components().render(cx);
if !block_body.is_empty() {
let id = cx.required_id::<Block>(self.id()); if block_body.is_empty() {
return PrepareMarkup::With(html! { return PrepareMarkup::None;
div id=(id) class=[self.classes().get()] {
@if let Some(title) = self.title().using(cx.langid()) {
h2 class="block__title" { (title) }
}
div class="block__body" { (block_body) }
}
});
} }
PrepareMarkup::None
let id = cx.required_id::<Block>(self.id());
PrepareMarkup::With(html! {
div id=(id) class=[self.classes().get()] {
@if let Some(title) = self.title().using(cx.langid()) {
h2 class="block__title" { (title) }
}
div class="block__content" { (block_body) }
}
})
} }
} }
@ -70,6 +77,12 @@ impl Block {
self self
} }
#[fn_builder]
pub fn alter_style(&mut self, style: StyleBase) -> &mut Self {
self.style = style;
self
}
#[fn_builder] #[fn_builder]
pub fn alter_title(&mut self, title: L10n) -> &mut Self { pub fn alter_title(&mut self, title: L10n) -> &mut Self {
self.title.alter_value(title); self.title.alter_value(title);
@ -90,6 +103,10 @@ impl Block {
// Block GETTERS. // Block GETTERS.
pub fn style(&self) -> &StyleBase {
&self.style
}
pub fn title(&self) -> &OptionTranslated { pub fn title(&self) -> &OptionTranslated {
&self.title &self.title
} }

2
src/base/component/button.rs
View file

@ -47,7 +47,7 @@ impl ComponentTrait for Button {
self.alter_classes( self.alter_classes(
ClassesOp::Prepend, ClassesOp::Prepend,
[ [
"button__tap".to_string(), String::from("button__tap"),
self.style().to_string(), self.style().to_string(),
self.font_size().to_string(), self.font_size().to_string(),
] ]

2
src/base/component/form/action_button.rs
View file

@ -51,7 +51,7 @@ impl ComponentTrait for ActionButton {
self.alter_classes( self.alter_classes(
ClassesOp::Prepend, ClassesOp::Prepend,
[ [
"button__tap".to_string(), String::from("button__tap"),
self.style().to_string(), self.style().to_string(),
self.font_size().to_string(), self.font_size().to_string(),
] ]

90
static/base/css/buttons.css
View file

@ -2,8 +2,6 @@
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
color: var(--val-color--white);
background-color: transparent;
text-decoration: none; text-decoration: none;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--val-border-radius); border-radius: var(--val-border-radius);
@ -17,60 +15,19 @@
} }
.button__tap.style__default { .button__tap.style__default {
background-color: var(--val-color--default); color: var(--val-color--white);
background-color: var(--val-color--primary);
} }
.button__tap.style__default:hover { .button__tap.style__default:hover {
color: var(--val-color--white); color: var(--val-color--white);
background-color: var(--val-color--default-dark); background-color: var(--val-color--primary-dark);
} }
.button__tap.style__default:active, .button__tap.style__default:active,
.button__tap.style__default:disabled { .button__tap.style__default:disabled {
color: var(--val-color--white); color: var(--val-color--white);
background-color: var(--val-color--default-light); background-color: var(--val-color--primary-light);
} }
.button__tap.style__success {
background-color: var(--val-color--success);
}
.button__tap.style__success:hover {
color: var(--val-color--white);
background-color: var(--val-color--success-dark);
}
.button__tap.style__success:active,
.button__tap.style__success:disabled {
color: var(--val-color--white);
background-color: var(--val-color--success-light);
}
.button__tap.style__danger {
background-color: var(--val-color--danger);
}
.button__tap.style__danger:hover {
color: var(--val-color--white);
background-color: var(--val-color--danger-dark);
}
.button__tap.style__danger:active,
.button__tap.style__danger:disabled {
color: var(--val-color--white);
background-color: var(--val-color--danger-light);
}
.button__tap.style__warning {
background-color: var(--val-color--warning);
}
.button__tap.style__warning:hover {
color: var(--val-color--white);
background-color: var(--val-color--warning-dark);
}
.button__tap.style__warning:active,
.button__tap.style__warning:disabled {
color: var(--val-color--white);
background-color: var(--val-color--warning-light);
}
.button__tap.style__info {
background-color: var(--val-color--info);
}
.button__tap.style__info:hover { .button__tap.style__info:hover {
color: var(--val-color--white); color: var(--val-color--white);
background-color: var(--val-color--info-dark); background-color: var(--val-color--info-dark);
@ -81,10 +38,36 @@
background-color: var(--val-color--info-light); background-color: var(--val-color--info-light);
} }
.button__tap.style__light { .button__tap.style__success:hover {
color: var(--val-color--text); color: var(--val-color--white);
background-color: var(--val-color--light); background-color: var(--val-color--success-dark);
} }
.button__tap.style__success:active,
.button__tap.style__success:disabled {
color: var(--val-color--white);
background-color: var(--val-color--success-light);
}
.button__tap.style__warning:hover {
color: var(--val-color--white);
background-color: var(--val-color--warning-dark);
}
.button__tap.style__warning:active,
.button__tap.style__warning:disabled {
color: var(--val-color--white);
background-color: var(--val-color--warning-light);
}
.button__tap.style__danger:hover {
color: var(--val-color--white);
background-color: var(--val-color--danger-dark);
}
.button__tap.style__danger:active,
.button__tap.style__danger:disabled {
color: var(--val-color--white);
background-color: var(--val-color--danger-light);
}
.button__tap.style__light:hover { .button__tap.style__light:hover {
color: var(--val-color--text); color: var(--val-color--text);
background-color: var(--val-color--light-dark); background-color: var(--val-color--light-dark);
@ -95,9 +78,6 @@
background-color: var(--val-color--light-light); background-color: var(--val-color--light-light);
} }
.button__tap.style__dark {
background-color: var(--val-color--dark);
}
.button__tap.style__dark:hover { .button__tap.style__dark:hover {
color: var(--val-color--white); color: var(--val-color--white);
background-color: var(--val-color--dark-dark); background-color: var(--val-color--dark-dark);
@ -108,10 +88,6 @@
background-color: var(--val-color--dark-light); background-color: var(--val-color--dark-light);
} }
.button__tap.style__link {
color: var(--val-color--default);
}
/* /*
.button strong { .button strong {
color: inherit color: inherit

9
static/base/css/inception.css
View file

@ -57,19 +57,18 @@ h6 {
} }
p { p {
margin-top: 0; margin: var(--val-gap-0-75) 0;
margin-bottom: var(--val-gap-0-75);
} }
a { a {
color: var(--val-color--default); color: var(--val-color--primary-link);
transition: color .15s ease-in-out; transition: color .15s ease-in-out;
} }
a:hover { a:hover {
color: var(--val-color--default-dark); color: var(--val-color--primary-link-hover);
} }
a:active { a:active {
color: var(--val-color--default-light); color: var(--val-color--primary-link-active);
} }
/* LAYOUT */ /* LAYOUT */

131
static/base/css/looks.css
View file

@ -23,6 +23,93 @@
transform: translateY(0%); transform: translateY(0%);
} }
/* STYLES BASE */
.style__info {
color: var(--val-color--white);
background-color: var(--val-color--info);
}
.style__info a {
color: var(--val-color--info-link);
font-weight: 700;
}
.style__info a:hover {
color: var(--val-color--info-link-hover);
}
.style__info a:active {
color: var(--val-color--info-link-active);
}
.style__success {
color: var(--val-color--white);
background-color: var(--val-color--success);
}
.style__success a {
color: var(--val-color--success-link);
font-weight: 700;
}
.style__success a:hover {
color: var(--val-color--success-link-hover);
}
.style__success a:active {
color: var(--val-color--success-link-active);
}
.style__warning {
color: var(--val-color--white);
background-color: var(--val-color--warning);
}
.style__warning a {
color: var(--val-color--warning-link);
font-weight: 700;
}
.style__warning a:hover {
color: var(--val-color--warning-link-hover);
}
.style__warning a:active {
color: var(--val-color--warning-link-active);
}
.style__danger {
color: var(--val-color--white);
background-color: var(--val-color--danger);
}
.style__danger a {
color: var(--val-color--danger-link);
font-weight: 700;
}
.style__danger a:hover {
color: var(--val-color--danger-link-hover);
}
.style__danger a:active {
color: var(--val-color--danger-link-active);
}
.style__light {
color: var(--val-color--text);
background-color: var(--val-color--light);
}
.style__dark {
color: var(--val-color--white);
background-color: var(--val-color--dark);
}
.style__dark a {
color: var(--val-color--dark-link);
font-weight: 700;
}
.style__dark a:hover {
color: var(--val-color--dark-link-hover);
}
.style__dark a:active {
color: var(--val-color--dark-link-active);
}
.style__link {
color: var(--val-color--primary);
background-color: transparent;
}
/* TYPOGRAPHY */ /* TYPOGRAPHY */
.fs__x3l { .fs__x3l {
@ -124,6 +211,50 @@
height: auto; height: auto;
} }
/* Block component */
.block__title {
font-size: var(--val-fs--m);
background-color: var(--val-color--gray-90);
padding: var(--val-gap-0-35) var(--val-gap);
margin: 0
}
.block__container.style__info .block__title {
background-color: var(--val-color--info-dark);
}
.block__container.style__success .block__title {
background-color: var(--val-color--success-dark);
}
.block__container.style__warning .block__title {
background-color: var(--val-color--warning-dark);
}
.block__container.style__danger .block__title {
background-color: var(--val-color--danger-dark);
}
.block__container.style__dark .block__title {
color: var(--val-color--dark-dark);
}
.block__content {
padding: var(--val-gap-0-35) var(--val-gap);
}
.block__container.style__info .block__content {
border-left: var(--val-gap-0-5) solid var(--val-color--info-dark);
}
.block__container.style__success .block__content {
border-left: var(--val-gap-0-5) solid var(--val-color--success-dark);
}
.block__container.style__warning .block__content {
border-left: var(--val-gap-0-5) solid var(--val-color--warning-dark);
}
.block__container.style__danger .block__content {
border-left: var(--val-gap-0-5) solid var(--val-color--danger-dark);
}
.block__container > .block__title + .block__content {
border-left: 0;
}
/* Branding component */ /* Branding component */
.branding__inner { .branding__inner {

116
static/base/css/root.css
View file

@ -92,63 +92,81 @@
--val-gap-1-5: calc(1.5 * var(--val-gap)); --val-gap-1-5: calc(1.5 * var(--val-gap));
--val-gap-2: calc(2 * var(--val-gap)); --val-gap-2: calc(2 * var(--val-gap));
--val-color--default-hue: 216; --primary-hue: 216;
--val-color--default-sat: 60%; --primary-sat: 60%;
--val-color--default-light: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 60%); --val-color--primary: hsl(var(--primary-hue), var(--primary-sat), 50%);
--val-color--default-dark: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 40%); --val-color--primary-light: hsl(var(--primary-hue), var(--primary-sat), 60%);
--val-color--default: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 50%); --val-color--primary-dark: hsl(var(--primary-hue), var(--primary-sat), 40%);
--val-color--primary-link: hsl(var(--primary-hue), var(--primary-sat), 55%);
--val-color--primary-link-hover: hsl(var(--primary-hue), var(--primary-sat), 30%);
--val-color--primary-link-active: hsl(var(--primary-hue), var(--primary-sat), 70%);
--val-color--info-hue: 190; --info-hue: 190;
--val-color--info-sat: 90%; --info-sat: 90%;
--val-color--info-light: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 60%); --val-color--info: hsl(var(--info-hue), var(--info-sat), 54%);
--val-color--info-dark: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 40%); --val-color--info-light: hsl(var(--info-hue), var(--info-sat), 70%);
--val-color--info: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 50%); --val-color--info-dark: hsl(var(--info-hue), var(--info-sat), 45%);
--val-color--info-link: hsl(var(--info-hue), var(--info-sat), 30%);
--val-color--info-link-hover: hsl(var(--info-hue), var(--info-sat), 20%);
--val-color--info-link-active: hsl(var(--info-hue), var(--info-sat), 40%);
--val-color--success-hue: 150; --success-hue: 150;
--val-color--success-sat: 50%; --success-sat: 50%;
--val-color--success-light: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 60%); --val-color--success: hsl(var(--success-hue), var(--success-sat), 50%);
--val-color--success-dark: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 40%); --val-color--success-light: hsl(var(--success-hue), var(--success-sat), 68%);
--val-color--success: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 50%); --val-color--success-dark: hsl(var(--success-hue), var(--success-sat), 38%);
--val-color--success-link: hsl(var(--success-hue), var(--success-sat), 26%);
--val-color--success-link-hover: hsl(var(--success-hue), var(--success-sat), 18%);
--val-color--success-link-active: hsl(var(--success-hue), var(--success-sat), 36%);
--val-color--warning-hue: 44; --warning-hue: 44;
--val-color--warning-sat: 100%; --warning-sat: 100%;
--val-color--warning-light: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 60%); --val-color--warning: hsl(var(--warning-hue), var(--warning-sat), 50%);
--val-color--warning-dark: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 48%); --val-color--warning-light: hsl(var(--warning-hue), var(--warning-sat), 60%);
--val-color--warning: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 50%); --val-color--warning-dark: hsl(var(--warning-hue), var(--warning-sat), 40%);
--val-color--warning-link: hsl(var(--warning-hue), var(--warning-sat), 30%);
--val-color--warning-link-hover: hsl(var(--warning-hue), var(--warning-sat), 20%);
--val-color--warning-link-active: hsl(var(--warning-hue), var(--warning-sat), 38%);
--val-color--danger-hue: 348; --danger-hue: 348;
--val-color--danger-sat: 86%; --danger-sat: 86%;
--val-color--danger-light: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 60%); --val-color--danger: hsl(var(--danger-hue), var(--danger-sat), 50%);
--val-color--danger-dark: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 40%); --val-color--danger-light: hsl(var(--danger-hue), var(--danger-sat), 60%);
--val-color--danger: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 50%); --val-color--danger-dark: hsl(var(--danger-hue), var(--danger-sat), 35%);
--val-color--danger-link: hsl(var(--danger-hue), var(--danger-sat), 25%);
--val-color--danger-link-hover: hsl(var(--danger-hue), var(--danger-sat), 10%);
--val-color--danger-link-active: hsl(var(--danger-hue), var(--danger-sat), 30%);
--val-color--light-hue: 0; --light-hue: 0;
--val-color--light-sat: 0%; --light-sat: 0%;
--val-color--light-light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 98%); --val-color--light: hsl(var(--light-hue), var(--light-sat), 96%);
--val-color--light-dark: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 92%); --val-color--light-light: hsl(var(--light-hue), var(--light-sat), 98%);
--val-color--light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 96%); --val-color--light-dark: hsl(var(--light-hue), var(--light-sat), 92%);
--val-color--dark-hue: 0; --dark-hue: 0;
--val-color--dark-sat: 0%; --dark-sat: 0%;
--val-color--dark-light: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 40%); --val-color--dark: hsl(var(--dark-hue), var(--dark-sat), 25%);
--val-color--dark-dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 8%); --val-color--dark-light: hsl(var(--dark-hue), var(--dark-sat), 40%);
--val-color--dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 25%); --val-color--dark-dark: hsl(var(--dark-hue), var(--dark-sat), 8%);
--val-color--dark-link: hsl(var(--dark-hue), var(--dark-sat), 90%);
--val-color--dark-link-hover: hsl(var(--dark-hue), var(--dark-sat), 100%);
--val-color--dark-link-active: hsl(var(--dark-hue), var(--dark-sat), 70%);
--val-color--gray-hue: 201; --gray-hue: 201;
--val-color--gray-sat: 15%; --gray-sat: 15%;
--val-color--gray-5: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 5%); --val-color--gray-5: hsl(var(--gray-hue), var(--gray-sat), 5%);
--val-color--gray-10: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat) ,11%); --val-color--gray-10: hsl(var(--gray-hue), var(--gray-sat) ,11%);
--val-color--gray-20: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat),20%); --val-color--gray-20: hsl(var(--gray-hue), var(--gray-sat),20%);
--val-color--gray-45: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 44%); --val-color--gray-45: hsl(var(--gray-hue), var(--gray-sat), 44%);
--val-color--gray-60: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 57%); --val-color--gray-60: hsl(var(--gray-hue), var(--gray-sat), 57%);
--val-color--gray-65: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 63%); --val-color--gray-65: hsl(var(--gray-hue), var(--gray-sat), 63%);
--val-color--gray-70: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 72%); --val-color--gray-70: hsl(var(--gray-hue), var(--gray-sat), 72%);
--val-color--gray-90: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 88%); --val-color--gray-90: hsl(var(--gray-hue), var(--gray-sat), 88%);
--val-color--gray-95: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 93%); --val-color--gray-95: hsl(var(--gray-hue), var(--gray-sat), 93%);
--val-color--gray-100: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 97%); --val-color--gray-100: hsl(var(--gray-hue), var(--gray-sat), 97%);
@ -163,8 +181,8 @@
--color-text-neutral-soft: var(--color--gray-45); --color-text-neutral-soft: var(--color--gray-45);
--color-text-neutral-medium: var(--color--gray-20); --color-text-neutral-medium: var(--color--gray-20);
--color-text-neutral-loud: var(--color--gray-5); --color-text-neutral-loud: var(--color--gray-5);
--color-text-primary-medium: var(--val-color--default-40); --color-text-primary-medium: var(--val-color--primary-40);
--color-text-primary-loud: var(--val-color--default-30); --color-text-primary-loud: var(--val-color--primary-30);
--color--black: #000; --color--black: #000;
*/ */
/* /*