✨ Add popular styles to buttons

pagetop-bootsier/src/lib.rs

@@ -106,6 +106,32 @@ impl ThemeTrait for Bootsier {
             }
             h if Button::matches_handle(h) => {
                 if let Some(b) = component_as_mut::<Button>(component) {
+                    match b.style() {
+                        ButtonStyle::Default => {
+                            b.replace_classes(b.style().to_string(), "btn btn-primary");
+                        }
+                        ButtonStyle::Info => {
+                            b.replace_classes(b.style().to_string(), "btn btn-info");
+                        }
+                        ButtonStyle::Success => {
+                            b.replace_classes(b.style().to_string(), "btn btn-success");
+                        }
+                        ButtonStyle::Warning => {
+                            b.replace_classes(b.style().to_string(), "btn btn-warning");
+                        }
+                        ButtonStyle::Danger => {
+                            b.replace_classes(b.style().to_string(), "btn btn-danger");
+                        }
+                        ButtonStyle::Light => {
+                            b.replace_classes(b.style().to_string(), "btn btn-light");
+                        }
+                        ButtonStyle::Dark => {
+                            b.replace_classes(b.style().to_string(), "btn btn-dark");
+                        }
+                        ButtonStyle::Link => {
+                            b.replace_classes(b.style().to_string(), "btn btn-link");
+                        }
+                    };
                     match b.font_size() {
                         FontSize::ExtraLarge => {
                             b.replace_classes(b.font_size().to_string(), "fs-1");
@@ -124,14 +150,6 @@ impl ThemeTrait for Bootsier {
                         }
                         _ => {}
                     };
-                    match b.button_type() {
-                        ButtonType::Link => {
-                            b.replace_classes(b.button_type().to_string(), "btn btn-link");
-                        }
-                        ButtonType::Primary => {
-                            b.replace_classes(b.button_type().to_string(), "btn btn-primary");
-                        }
-                    };
                 }
             }
             h if Heading::matches_handle(h) => {

pagetop-bulmix/src/lib.rs

@@ -55,6 +55,32 @@ impl ThemeTrait for Bulmix {
             }
             h if Button::matches_handle(h) => {
                 if let Some(b) = component_as_mut::<Button>(component) {
+                    match b.style() {
+                        ButtonStyle::Default => {
+                            b.replace_classes(b.style().to_string(), "button is-primary");
+                        }
+                        ButtonStyle::Info => {
+                            b.replace_classes(b.style().to_string(), "button is-info");
+                        }
+                        ButtonStyle::Success => {
+                            b.replace_classes(b.style().to_string(), "button is-success");
+                        }
+                        ButtonStyle::Warning => {
+                            b.replace_classes(b.style().to_string(), "button is-warning");
+                        }
+                        ButtonStyle::Danger => {
+                            b.replace_classes(b.style().to_string(), "button is-danger");
+                        }
+                        ButtonStyle::Light => {
+                            b.replace_classes(b.style().to_string(), "button is-light");
+                        }
+                        ButtonStyle::Dark => {
+                            b.replace_classes(b.style().to_string(), "button is-dark");
+                        }
+                        ButtonStyle::Link => {
+                            b.replace_classes(b.style().to_string(), "button is-text");
+                        }
+                    };
                     match b.font_size() {
                         FontSize::ExtraLarge => {
                             b.replace_classes(b.font_size().to_string(), "is-size-1");
@@ -73,14 +99,6 @@ impl ThemeTrait for Bulmix {
                         }
                         _ => {}
                     };
-                    match b.button_type() {
-                        ButtonType::Link => {
-                            b.replace_classes(b.button_type().to_string(), "button is-text");
-                        }
-                        ButtonType::Primary => {
-                            b.replace_classes(b.button_type().to_string(), "button is-primary");
-                        }
-                    };
                 }
             }
             h if Heading::matches_handle(h) => {

pagetop-homedemo/src/lib.rs

@@ -69,7 +69,7 @@ fn hello_world() -> Wrapper {
                         ),
                     ))
                     .add_component(
-                        Button::primary(
+                        Button::anchor(
                             "https://github.com/manuelcillero/pagetop",
                             L10n::t("hello_code", &LOCALES_HOMEDEMO),
                         )
@@ -79,7 +79,8 @@ fn hello_world() -> Wrapper {
                         .with_font_size(FontSize::Medium),
                     )
                     .add_component(
-                        Button::link("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
+                        Button::anchor("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
+                            .with_style(ButtonStyle::Link)
                             .with_left_icon(Some(Icon::with("arrow-down-circle-fill")))
                             .with_classes(ClassesOp::Add, "welcome-link")
                             .with_font_size(FontSize::Medium),

pagetop/src/base/component.rs

@@ -88,6 +88,37 @@ impl ToString for BreakPoint {
 
 // *************************************************************************************************
 
+#[derive(SmartDefault)]
+pub enum ButtonStyle {
+    #[default]
+    Default,
+    Info,
+    Success,
+    Warning,
+    Danger,
+    Light,
+    Dark,
+    Link,
+}
+
+#[rustfmt::skip]
+impl ToString for ButtonStyle {
+    fn to_string(&self) -> String {
+        String::from(match self {
+            ButtonStyle::Default   => "pt-button__default",
+            ButtonStyle::Info      => "pt-button__info",
+            ButtonStyle::Success   => "pt-button__success",
+            ButtonStyle::Warning   => "pt-button__warning",
+            ButtonStyle::Danger    => "pt-button__danger",
+            ButtonStyle::Light     => "pt-button__light",
+            ButtonStyle::Dark      => "pt-button__dark",
+            ButtonStyle::Link      => "pt-button__link",
+        })
+    }
+}
+
+// *************************************************************************************************
+
 #[derive(SmartDefault)]
 pub enum FontSize {
     ExtraLarge,
@@ -144,7 +175,7 @@ mod paragraph;
 pub use paragraph::Paragraph;
 
 mod button;
-pub use button::{Button, ButtonTarget, ButtonType};
+pub use button::{Button, ButtonTarget};
 
 mod image;
 pub use image::{Image, ImageSize};

pagetop/src/base/component/button.rs

@@ -1,23 +1,6 @@
 use crate::prelude::*;
 use crate::BaseHandle;
 
-#[derive(SmartDefault)]
-pub enum ButtonType {
-    #[default]
-    Link,
-    Primary,
-}
-
-#[rustfmt::skip]
-impl ToString for ButtonType {
-    fn to_string(&self) -> String {
-        String::from(match self {
-            ButtonType::Link    => "link",
-            ButtonType::Primary => "primary",
-        })
-    }
-}
-
 #[derive(SmartDefault)]
 pub enum ButtonTarget {
     #[default]
@@ -35,7 +18,7 @@ pub struct Button {
     weight     : Weight,
     renderable : Renderable,
     classes    : OptionClasses,
-    button_type: ButtonType,
+    style      : ButtonStyle,
     font_size  : FontSize,
     left_icon  : OptionComponent<Icon>,
     right_icon : OptionComponent<Icon>,
@@ -62,13 +45,7 @@ impl ComponentTrait for Button {
     }
 
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.prepend_classes(
+        self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" "));
-            [
-                concat_string!("pt-button__", self.button_type().to_string()),
-                self.font_size().to_string(),
-            ]
-            .join(" "),
-        );
     }
 
     #[rustfmt::skip]
@@ -96,18 +73,8 @@ impl ComponentTrait for Button {
 }
 
 impl Button {
-    pub fn link(href: impl Into<String>, html: L10n) -> Self {
+    pub fn anchor(href: impl Into<String>, html: L10n) -> Self {
-        Button::default()
+        Button::default().with_href(href).with_html(html)
-            .with_type(ButtonType::Link)
-            .with_href(href)
-            .with_html(html)
-    }
-
-    pub fn primary(href: impl Into<String>, html: L10n) -> Self {
-        Button::default()
-            .with_type(ButtonType::Primary)
-            .with_href(href)
-            .with_html(html)
     }
 
     // Button BUILDER.
@@ -131,8 +98,8 @@ impl Button {
     }
 
     #[fn_builder]
-    pub fn alter_type(&mut self, button_type: ButtonType) -> &mut Self {
+    pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self {
-        self.button_type = button_type;
+        self.style = style;
         self
     }
 
@@ -174,8 +141,8 @@ impl Button {
 
     // Button GETTERS.
 
-    pub fn button_type(&self) -> &ButtonType {
+    pub fn style(&self) -> &ButtonStyle {
-        &self.button_type
+        &self.style
     }
 
     pub fn font_size(&self) -> &FontSize {

pagetop/src/base/component/form/action_button.rs

@@ -25,6 +25,7 @@ pub struct ActionButton {
     renderable : Renderable,
     classes    : OptionClasses,
     button_type: ActionButtonType,
+    style      : ButtonStyle,
     font_size  : FontSize,
     left_icon  : OptionComponent<Icon>,
     right_icon : OptionComponent<Icon>,
@@ -48,13 +49,7 @@ impl ComponentTrait for ActionButton {
     }
 
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.prepend_classes(
+        self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" "));
-            [
-                concat_string!("pt-button__", self.button_type().to_string()),
-                self.font_size().to_string(),
-            ]
-            .join(" "),
-        );
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@@ -81,6 +76,7 @@ impl ActionButton {
     pub fn submit() -> Self {
         ActionButton {
             button_type: ActionButtonType::Submit,
+            style: ButtonStyle::Default,
             value: OptionTranslated::new(L10n::l("button_submit")),
             ..Default::default()
         }
@@ -89,6 +85,7 @@ impl ActionButton {
     pub fn reset() -> Self {
         ActionButton {
             button_type: ActionButtonType::Reset,
+            style: ButtonStyle::Info,
             value: OptionTranslated::new(L10n::l("button_reset")),
             ..Default::default()
         }
@@ -108,6 +105,12 @@ impl ActionButton {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self {
+        self.style = style;
+        self
+    }
+
     #[fn_builder]
     pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
         self.font_size = font_size;
@@ -162,6 +165,10 @@ impl ActionButton {
         &self.button_type
     }
 
+    pub fn style(&self) -> &ButtonStyle {
+        &self.style
+    }
+
     pub fn font_size(&self) -> &FontSize {
         &self.font_size
     }

pagetop/static/base/css/inception.css

@@ -8,7 +8,7 @@ body {
 	font-size: var(--pt-fs--base);
 	font-weight: var(--pt-fw--base);
 	line-height: var(--pt-lh--base);
-	color: var(--pt-color);
+	color: var(--pt-color--text);
 	background-color: var(--pt-color--bg);
 	-webkit-text-size-adjust: 100%;
 	-webkit-tap-highlight-color: transparent;
@@ -62,14 +62,14 @@ p {
 }
 
 a {
-	color: var(--pt-color--primary);
+	color: var(--pt-color--default);
 	transition: color .15s ease-in-out;
 }
 a:hover {
-	color: var(--pt-color--primary-dark);
+	color: var(--pt-color--default-dark);
 }
 a:active {
-	color: var(--pt-color--primary-light);
+	color: var(--pt-color--default-light);
 }
 
 /* LAYOUT */
@@ -95,7 +95,7 @@ a:active {
 #footer__inner {
 	color: var(--pt-color--gray-65);
 	background: var(--pt-color--gray-20);
-	padding: var(--pt-gap-3) 0 var(--pt-gap-12);
+	padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap));
 }
 #footer__inner a {
 	color: var(--pt-color--white);

pagetop/static/base/css/menu.css

@@ -37,7 +37,7 @@
 .pt-menu__nav li > a {
 	position: relative;
 	font-weight: 500;
-	color: var(--pt-color);
+	color: var(--pt-color--text);
 	text-rendering: optimizeLegibility;
 }
 .pt-menu__nav li > a {
@@ -135,7 +135,7 @@
 		height: 2px;
 		margin: 12.675% 0;
 		border-radius: var(--pt-border-radius);
-		background: var(--pt-color);
+		background: var(--pt-color--text);
 	}
 
 	.pt-menu__nav {
@@ -234,7 +234,7 @@
 		min-width: var(--pt-menu--item-height);
 		height: var(--pt-menu--item-height);
 		line-height: var(--pt-menu--item-height);
-		color: var(--pt-color);
+		color: var(--pt-color--text);
 		cursor: pointer;
 		display: flex;
 		align-items: center;

pagetop/static/base/css/root.css

@@ -91,23 +91,51 @@
 	--pt-gap-0-75: calc(0.75 * var(--pt-gap));
 	--pt-gap-1-5: calc(1.5 * var(--pt-gap));
 	--pt-gap-2: calc(2 * var(--pt-gap));
-	--pt-gap-2-5: calc(2.5 * var(--pt-gap));
-	--pt-gap-3: calc(3 * var(--pt-gap));
-	--pt-gap-4: calc(4 * var(--pt-gap));
-	--pt-gap-5: calc(5 * var(--pt-gap));
-	--pt-gap-6: calc(6 * var(--pt-gap));
-	--pt-gap-7: calc(7 * var(--pt-gap));
-	--pt-gap-8: calc(8 * var(--pt-gap));
-	--pt-gap-9: calc(9 * var(--pt-gap));
-	--pt-gap-10: calc(10 * var(--pt-gap));
-	--pt-gap-11: calc(11 * var(--pt-gap));
-	--pt-gap-12: calc(12 * var(--pt-gap));
 
-	--pt-color--primary-hue: 216;
+	--pt-color--default-hue: 216;
-	--pt-color--primary-sat: 98%;
+	--pt-color--default-sat: 60%;
-	--pt-color--primary-light: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 60%);
+	--pt-color--default-light: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 60%);
-	--pt-color--primary-dark: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 40%);
+	--pt-color--default-dark: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 40%);
-	--pt-color--primary: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 50%);
+	--pt-color--default: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 50%);
+
+	--pt-color--info-hue: 190;
+	--pt-color--info-sat: 90%;
+	--pt-color--info-light: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 60%);
+	--pt-color--info-dark: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 40%);
+	--pt-color--info: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 50%);
+
+	--pt-color--success-hue: 150;
+	--pt-color--success-sat: 50%;
+	--pt-color--success-light: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 60%);
+	--pt-color--success-dark: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 40%);
+	--pt-color--success: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 50%);
+
+	--pt-color--warning-hue: 44;
+	--pt-color--warning-sat: 100%;
+	--pt-color--warning-light: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 60%);
+	--pt-color--warning-dark: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 48%);
+	--pt-color--warning: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 50%);
+
+	--pt-color--danger-hue: 348;
+	--pt-color--danger-sat: 86%;
+	--pt-color--danger-light: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 60%);
+	--pt-color--danger-dark: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 40%);
+	--pt-color--danger: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 50%);
+
+	--pt-color--light-hue: 0;
+	--pt-color--light-sat: 0%;
+	--pt-color--light-light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 98%);
+	--pt-color--light-dark: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 92%);
+	--pt-color--light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 96%);
+
+	--pt-color--dark-hue: 0;
+	--pt-color--dark-sat: 0%;
+	--pt-color--dark-light: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 40%);
+	--pt-color--dark-dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 8%);
+	--pt-color--dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 25%);
+
+
+
 
 	--pt-color--gray-hue: 201;
 	--pt-color--gray-sat: 15%;
@@ -122,9 +150,12 @@
 	--pt-color--gray-95: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 93%);
 	--pt-color--gray-100: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 97%);
 
-	--pt-color--white: #fff;
+
+
+
 	--pt-color--bg: #fafafa;
-	--pt-color: #212529;
+	--pt-color--text: #212529;
+	--pt-color--white: #fff;
 
 /*
 
@@ -132,8 +163,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(--pt-color--primary-40);
+	--color-text-primary-medium: var(--pt-color--default-40);
-	--color-text-primary-loud: var(--pt-color--primary-30);
+	--color-text-primary-loud: var(--pt-color--default-30);
 	--color--black: #000;
 */
 /*
@@ -146,7 +177,7 @@
 	--pt-border-radius: 0.375rem;
 
 	/* Menu component */
-	--pt-menu--color-bg: var(--pt-color--gray-100);
+	--pt-menu--color-bg: var(--pt-color--bg);
 	--pt-menu--color-highlight: #e91e63;
 	--pt-menu--color-border: rgba(0, 0, 0, 0.1);
 	--pt-menu--color-shadow: rgba(0, 0, 0, 0.06);