💄 Improve block component capabilities
This commit is contained in:
parent
36a89ac571
commit
f467aaa330
10 changed files with 290 additions and 147 deletions
|
|
@ -105,10 +105,10 @@ impl ThemeTrait for Bootsier {
|
|||
ClassesOp::Replace(b.style().to_string()),
|
||||
match b.style() {
|
||||
StyleBase::Default => "btn-primary",
|
||||
StyleBase::Success => "btn-success",
|
||||
StyleBase::Danger => "btn-danger",
|
||||
StyleBase::Warning => "btn-warning",
|
||||
StyleBase::Info => "btn-info",
|
||||
StyleBase::Success => "btn-success",
|
||||
StyleBase::Warning => "btn-warning",
|
||||
StyleBase::Danger => "btn-danger",
|
||||
StyleBase::Light => "btn-light",
|
||||
StyleBase::Dark => "btn-dark",
|
||||
StyleBase::Link => "btn-link",
|
||||
|
|
|
|||
|
|
@ -57,10 +57,10 @@ impl ThemeTrait for Bulmix {
|
|||
ClassesOp::Replace(b.style().to_string()),
|
||||
match b.style() {
|
||||
StyleBase::Default => "is-primary",
|
||||
StyleBase::Success => "is-success",
|
||||
StyleBase::Danger => "is-danger",
|
||||
StyleBase::Warning => "is-warning",
|
||||
StyleBase::Info => "is-info",
|
||||
StyleBase::Success => "is-success",
|
||||
StyleBase::Warning => "is-warning",
|
||||
StyleBase::Danger => "is-danger",
|
||||
StyleBase::Light => "is-light",
|
||||
StyleBase::Dark => "is-dark",
|
||||
StyleBase::Link => "is-text",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,17 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
|
|||
StyleSheet::at("/base/css/root.css")
|
||||
.with_version("0.0.1")
|
||||
.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) {
|
||||
cx.alter(ContextOp::AddStyleSheet(
|
||||
StyleSheet::at("/base/css/icons.min.css")
|
||||
|
|
@ -23,6 +33,7 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
|
|||
.with_weight(weight),
|
||||
));
|
||||
}
|
||||
|
||||
if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_FLEX_ASSETS) {
|
||||
cx.alter(ContextOp::AddStyleSheet(
|
||||
StyleSheet::at("/base/css/flex.css")
|
||||
|
|
@ -30,6 +41,7 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
|
|||
.with_weight(weight),
|
||||
));
|
||||
}
|
||||
|
||||
if let Some(true) = cx.get_param::<bool>(PARAM_BASE_INCLUDE_MENU_ASSETS) {
|
||||
cx.alter(ContextOp::AddStyleSheet(
|
||||
StyleSheet::at("/base/css/menu.css")
|
||||
|
|
@ -42,16 +54,6 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
|
|||
.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 {
|
||||
#[default]
|
||||
Default,
|
||||
Success,
|
||||
Danger,
|
||||
Warning,
|
||||
Info,
|
||||
Success,
|
||||
Warning,
|
||||
Danger,
|
||||
Light,
|
||||
Dark,
|
||||
Link,
|
||||
|
|
@ -106,10 +108,10 @@ impl ToString for StyleBase {
|
|||
fn to_string(&self) -> String {
|
||||
String::from(match self {
|
||||
StyleBase::Default => "style__default",
|
||||
StyleBase::Success => "style__success",
|
||||
StyleBase::Danger => "style__danger",
|
||||
StyleBase::Warning => "style__warning",
|
||||
StyleBase::Info => "style__info",
|
||||
StyleBase::Success => "style__success",
|
||||
StyleBase::Warning => "style__warning",
|
||||
StyleBase::Danger => "style__danger",
|
||||
StyleBase::Light => "style__light",
|
||||
StyleBase::Dark => "style__dark",
|
||||
StyleBase::Link => "style__link",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ pub struct Block {
|
|||
weight : Weight,
|
||||
renderable: Renderable,
|
||||
classes : OptionClasses,
|
||||
style : StyleBase,
|
||||
title : OptionTranslated,
|
||||
mixed : MixedComponents,
|
||||
}
|
||||
|
|
@ -29,23 +30,29 @@ impl ComponentTrait for Block {
|
|||
}
|
||||
|
||||
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 {
|
||||
let block_body = self.components().render(cx);
|
||||
if !block_body.is_empty() {
|
||||
let id = cx.required_id::<Block>(self.id());
|
||||
return 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__body" { (block_body) }
|
||||
}
|
||||
});
|
||||
|
||||
if block_body.is_empty() {
|
||||
return PrepareMarkup::None;
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_style(&mut self, style: StyleBase) -> &mut Self {
|
||||
self.style = style;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_title(&mut self, title: L10n) -> &mut Self {
|
||||
self.title.alter_value(title);
|
||||
|
|
@ -90,6 +103,10 @@ impl Block {
|
|||
|
||||
// Block GETTERS.
|
||||
|
||||
pub fn style(&self) -> &StyleBase {
|
||||
&self.style
|
||||
}
|
||||
|
||||
pub fn title(&self) -> &OptionTranslated {
|
||||
&self.title
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ impl ComponentTrait for Button {
|
|||
self.alter_classes(
|
||||
ClassesOp::Prepend,
|
||||
[
|
||||
"button__tap".to_string(),
|
||||
String::from("button__tap"),
|
||||
self.style().to_string(),
|
||||
self.font_size().to_string(),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ impl ComponentTrait for ActionButton {
|
|||
self.alter_classes(
|
||||
ClassesOp::Prepend,
|
||||
[
|
||||
"button__tap".to_string(),
|
||||
String::from("button__tap"),
|
||||
self.style().to_string(),
|
||||
self.font_size().to_string(),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: var(--val-color--white);
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--val-border-radius);
|
||||
|
|
@ -17,60 +15,19 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
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:disabled {
|
||||
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 {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--info-dark);
|
||||
|
|
@ -81,10 +38,36 @@
|
|||
background-color: var(--val-color--info-light);
|
||||
}
|
||||
|
||||
.button__tap.style__light {
|
||||
color: var(--val-color--text);
|
||||
background-color: var(--val-color--light);
|
||||
.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__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 {
|
||||
color: var(--val-color--text);
|
||||
background-color: var(--val-color--light-dark);
|
||||
|
|
@ -95,9 +78,6 @@
|
|||
background-color: var(--val-color--light-light);
|
||||
}
|
||||
|
||||
.button__tap.style__dark {
|
||||
background-color: var(--val-color--dark);
|
||||
}
|
||||
.button__tap.style__dark:hover {
|
||||
color: var(--val-color--white);
|
||||
background-color: var(--val-color--dark-dark);
|
||||
|
|
@ -108,10 +88,6 @@
|
|||
background-color: var(--val-color--dark-light);
|
||||
}
|
||||
|
||||
.button__tap.style__link {
|
||||
color: var(--val-color--default);
|
||||
}
|
||||
|
||||
/*
|
||||
.button strong {
|
||||
color: inherit
|
||||
|
|
|
|||
|
|
@ -57,19 +57,18 @@ h6 {
|
|||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--val-gap-0-75);
|
||||
margin: var(--val-gap-0-75) 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--val-color--default);
|
||||
color: var(--val-color--primary-link);
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--val-color--default-dark);
|
||||
color: var(--val-color--primary-link-hover);
|
||||
}
|
||||
a:active {
|
||||
color: var(--val-color--default-light);
|
||||
color: var(--val-color--primary-link-active);
|
||||
}
|
||||
|
||||
/* LAYOUT */
|
||||
|
|
|
|||
|
|
@ -23,6 +23,93 @@
|
|||
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 */
|
||||
|
||||
.fs__x3l {
|
||||
|
|
@ -124,6 +211,50 @@
|
|||
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__inner {
|
||||
|
|
|
|||
|
|
@ -92,63 +92,81 @@
|
|||
--val-gap-1-5: calc(1.5 * var(--val-gap));
|
||||
--val-gap-2: calc(2 * var(--val-gap));
|
||||
|
||||
--val-color--default-hue: 216;
|
||||
--val-color--default-sat: 60%;
|
||||
--val-color--default-light: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 60%);
|
||||
--val-color--default-dark: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 40%);
|
||||
--val-color--default: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 50%);
|
||||
--primary-hue: 216;
|
||||
--primary-sat: 60%;
|
||||
--val-color--primary: hsl(var(--primary-hue), var(--primary-sat), 50%);
|
||||
--val-color--primary-light: hsl(var(--primary-hue), var(--primary-sat), 60%);
|
||||
--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;
|
||||
--val-color--info-sat: 90%;
|
||||
--val-color--info-light: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 60%);
|
||||
--val-color--info-dark: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 40%);
|
||||
--val-color--info: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 50%);
|
||||
--info-hue: 190;
|
||||
--info-sat: 90%;
|
||||
--val-color--info: hsl(var(--info-hue), var(--info-sat), 54%);
|
||||
--val-color--info-light: hsl(var(--info-hue), var(--info-sat), 70%);
|
||||
--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;
|
||||
--val-color--success-sat: 50%;
|
||||
--val-color--success-light: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 60%);
|
||||
--val-color--success-dark: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 40%);
|
||||
--val-color--success: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 50%);
|
||||
--success-hue: 150;
|
||||
--success-sat: 50%;
|
||||
--val-color--success: hsl(var(--success-hue), var(--success-sat), 50%);
|
||||
--val-color--success-light: hsl(var(--success-hue), var(--success-sat), 68%);
|
||||
--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;
|
||||
--val-color--warning-sat: 100%;
|
||||
--val-color--warning-light: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 60%);
|
||||
--val-color--warning-dark: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 48%);
|
||||
--val-color--warning: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 50%);
|
||||
--warning-hue: 44;
|
||||
--warning-sat: 100%;
|
||||
--val-color--warning: hsl(var(--warning-hue), var(--warning-sat), 50%);
|
||||
--val-color--warning-light: hsl(var(--warning-hue), var(--warning-sat), 60%);
|
||||
--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;
|
||||
--val-color--danger-sat: 86%;
|
||||
--val-color--danger-light: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 60%);
|
||||
--val-color--danger-dark: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 40%);
|
||||
--val-color--danger: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 50%);
|
||||
--danger-hue: 348;
|
||||
--danger-sat: 86%;
|
||||
--val-color--danger: hsl(var(--danger-hue), var(--danger-sat), 50%);
|
||||
--val-color--danger-light: hsl(var(--danger-hue), var(--danger-sat), 60%);
|
||||
--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;
|
||||
--val-color--light-sat: 0%;
|
||||
--val-color--light-light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 98%);
|
||||
--val-color--light-dark: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 92%);
|
||||
--val-color--light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 96%);
|
||||
--light-hue: 0;
|
||||
--light-sat: 0%;
|
||||
--val-color--light: hsl(var(--light-hue), var(--light-sat), 96%);
|
||||
--val-color--light-light: hsl(var(--light-hue), var(--light-sat), 98%);
|
||||
--val-color--light-dark: hsl(var(--light-hue), var(--light-sat), 92%);
|
||||
|
||||
--val-color--dark-hue: 0;
|
||||
--val-color--dark-sat: 0%;
|
||||
--val-color--dark-light: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 40%);
|
||||
--val-color--dark-dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 8%);
|
||||
--val-color--dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 25%);
|
||||
--dark-hue: 0;
|
||||
--dark-sat: 0%;
|
||||
--val-color--dark: hsl(var(--dark-hue), var(--dark-sat), 25%);
|
||||
--val-color--dark-light: hsl(var(--dark-hue), var(--dark-sat), 40%);
|
||||
--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;
|
||||
--val-color--gray-sat: 15%;
|
||||
--val-color--gray-5: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 5%);
|
||||
--val-color--gray-10: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat) ,11%);
|
||||
--val-color--gray-20: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat),20%);
|
||||
--val-color--gray-45: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 44%);
|
||||
--val-color--gray-60: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 57%);
|
||||
--val-color--gray-65: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 63%);
|
||||
--val-color--gray-70: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 72%);
|
||||
--val-color--gray-90: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 88%);
|
||||
--val-color--gray-95: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 93%);
|
||||
--val-color--gray-100: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 97%);
|
||||
--gray-hue: 201;
|
||||
--gray-sat: 15%;
|
||||
--val-color--gray-5: hsl(var(--gray-hue), var(--gray-sat), 5%);
|
||||
--val-color--gray-10: hsl(var(--gray-hue), var(--gray-sat) ,11%);
|
||||
--val-color--gray-20: hsl(var(--gray-hue), var(--gray-sat),20%);
|
||||
--val-color--gray-45: hsl(var(--gray-hue), var(--gray-sat), 44%);
|
||||
--val-color--gray-60: hsl(var(--gray-hue), var(--gray-sat), 57%);
|
||||
--val-color--gray-65: hsl(var(--gray-hue), var(--gray-sat), 63%);
|
||||
--val-color--gray-70: hsl(var(--gray-hue), var(--gray-sat), 72%);
|
||||
--val-color--gray-90: hsl(var(--gray-hue), var(--gray-sat), 88%);
|
||||
--val-color--gray-95: hsl(var(--gray-hue), var(--gray-sat), 93%);
|
||||
--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-medium: var(--color--gray-20);
|
||||
--color-text-neutral-loud: var(--color--gray-5);
|
||||
--color-text-primary-medium: var(--val-color--default-40);
|
||||
--color-text-primary-loud: var(--val-color--default-30);
|
||||
--color-text-primary-medium: var(--val-color--primary-40);
|
||||
--color-text-primary-loud: var(--val-color--primary-30);
|
||||
--color--black: #000;
|
||||
*/
|
||||
/*
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue