Add button component SCSS

src/bp-templates/bp-nouveau/readylaunch/assets/css/sass/elements/_button.scss

@@ -0,0 +1,153 @@
+.bbrl-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1rem;
+	text-align: center;
+	cursor: pointer;
+	border-radius: var(--bbrl-radius-sm);
+	padding: var(--bbrl-space-100) var(--bbrl-space-200);
+	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+	text-decoration: none;
+
+	&.bbrl-button--small {
+		padding: 4px var(--bbrl-space-100);
+		font-size: 0.875rem;
+	}
+
+	&.bbrl-button--brandFill {
+		background-color: var(--bbrl-background-brand-primary-color);
+		color: var(--bbrl-text-white-color);
+		border: 1px solid var(--bbrl-background-brand-primary-color);
+
+		&:hover {
+			background-color: var(--bbrl-background-brand-primary-hover-color);
+		}
+
+		&:focus-within {
+			outline: 2px solid var(--bbrl-border-brand-primary-color);
+		}
+
+		&:disabled {
+			background-color: var(--bbrl-background-brand-disabled-color);
+			cursor: not-allowed;
+		}
+	}
+
+	&.bbrl-button--brandOutline {
+		background-color: transparent;
+		color: var(--bbrl-text-brand-primary-color);
+		border: 1px solid var(--bbrl-text-brand-primary-color);
+
+		&:hover {
+			border-color: var(--bbrl-background-brand-primary-color);
+		}
+
+		&:focus {
+			outline: 2px solid var(--bbrl-border-brand-primary-color);
+		}
+
+		&:disabled {
+			border-color: var(--bbrl-background-brand-disabled-color);
+			color: var(--bbrl-background-brand-disabled-color);
+			cursor: not-allowed;
+		}
+	}
+
+	&.bbrl-button--secondaryFill {
+		background-color: var(--bbrl-background-tertiary-color);
+		color: var(--bbrl-text-color);
+		border: 1px solid transparent;
+
+		&:hover {
+			background-color: var(--bbrl-background-tertiary-hover-color);
+		}
+
+		&:focus {
+			outline: 2px solid var(--bbrl-border-quinery-color);
+		}
+
+		&:disabled {
+			background-color: var(--bbrl-background-tertiary-color);
+			color: var(--bbrl-text-disabled-color);
+			cursor: not-allowed;
+		}
+	}
+
+	&.bbrl-button--secondaryOutline {
+		background-color: transparent;
+		color: var(--bbrl-text-color);
+		border: 1px solid var(--bbrl-border-tertiary-color);
+
+		&:hover {
+			background-color: var(--bbrl-background-secondary-color);
+		}
+
+		&:focus {
+			outline: 2px solid var(--bbrl-border-quinery-color);
+		}
+
+		&:disabled {
+			border-color: var(--bbrl-border-tertiary-color);
+			color: var(--bbrl-text-disabled-color);
+			cursor: not-allowed;
+		}
+	}
+
+	&.bbrl-button--dangerFill {
+		background-color: var(--bbrl-background-danger-primary-color);
+		color: var(--bbrl-text-white-color);
+		border: 1px solid transparent;
+
+		&:hover {
+			background-color: var(--bbrl-background-danger-primary-hover-color);
+		}
+
+		&:focus {
+			outline: 2px solid var(--bbrl-border-danger-primary-color);
+		}
+
+		&:disabled {
+			background-color: var(--bbrl-background-danger-secondary-hover-color);
+			cursor: not-allowed;
+		}
+	}
+
+	&.bbrl-button--tertiaryText {
+		background-color: transparent;
+		color: var(--bbrl-text-color);
+		border: none;
+
+		&:hover {
+			background-color: var(--bbrl-background-secondary-hover-color);
+		}
+
+		&:focus {
+			outline: 2px solid var(--bbrl-border-quinery-color);
+		}
+
+		&:disabled {
+			color: var(--bbrl-text-disabled-color);
+			cursor: not-allowed;
+		}
+	}
+
+	&.bbrl-button--tertiaryLink {
+		background-color: transparent;
+		color: var(--bbrl-text-brand-primary-color);
+		border: none;
+		border-radius: 0;
+		border-bottom: 1px solid transparent;
+
+		&:hover {
+			border-bottom-color: var(--bbrl-link-primary-hover-color);
+		}
+
+		&:disabled {
+			color: var(--bbrl-background-brand-disabled-color);
+			border-bottom-color: transparent;
+			cursor: not-allowed;
+		}
+	}
+}
+

src/bp-templates/bp-nouveau/readylaunch/assets/css/sass/elements/_elements.scss

@@ -2,3 +2,4 @@
 @import "./tooltip";
 @import "./notice";
 @import "./option_button";
+@import "./_button";