feat(css variables): add and expose them

rapid-build-ui · Nov 16, 2018 · 0b827c3 · 0b827c3
1 parent 813c36f
commit 0b827c3
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 36 deletions.
diff --git a/src/client/styles/main/kinds.scss b/src/client/styles/main/kinds.scss
@@ -18,86 +18,86 @@
 
 &.default {
 	rb-button {
-		color: #9faab5;
+		color: var(--default-trigger-color);
 	}
 	.popover {
-		color: #5f6e7e;
+		color: var(--default-color);
 		.caption {
-			background-color: $popoverDefault;
+			background-color: var(--default-bg-color);
 		}
 		.pointer {
-			border-color: transparent transparent $popoverDefault transparent;
+			border-color: transparent transparent var(--default-bg-color) transparent;
 		}
 	}
 	&.with-caption.bottom .pointer {
-		border-bottom-color: $popoverDefault;
+		border-bottom-color: var(--default-bg-color);
 	}
 }
 &.success {
 	rb-button {
-		color: darken($popoverSuccess, 30%);
+		color: var(--success-trigger-color);
 	}
 	.popover {
-		color: #155724;
+		color: var(--success-color);
 		.caption {
-			background-color: $popoverSuccess;
+			background-color: var(--success-bg-color);
 		}
 		.pointer {
-			border-color: transparent transparent $popoverSuccess transparent;
+			border-color: transparent transparent var(--success-bg-color) transparent;
 		}
 	}
 	&.with-caption.bottom .pointer {
-		border-bottom-color: $popoverSuccess;
+		border-bottom-color: var(--success-bg-color);
 	}
 }
 &.danger {
 	rb-button {
-		color: darken($popoverDanger, 30%);
+		color: var(--danger-trigger-color);
 	}
 	.popover {
-		color: #721c24;
+		color: var(--danger-color);
 		.caption {
-			background-color: $popoverDanger;
+			background-color: var(--danger-bg-color);
 		}
 		.pointer {
-			border-color: transparent transparent $popoverDanger transparent;
+			border-color: transparent transparent var(--danger-bg-color) transparent;
 		}
 	}
 	&.with-caption.bottom .pointer {
-		border-bottom-color: $popoverDanger;
+		border-bottom-color: var(--danger-bg-color);
 	}
 }
 &.warning {
 	rb-button {
-		color: darken($popoverWarning, 45%);
+		color: var(--warning-trigger-color);
 	}
 	.popover {
-		color: #856404;
+		color: var(--warning-color);
 		.caption {
-			background-color: $popoverWarning;
+			background-color: var(--warning-bg-color);
 		}
 		.pointer {
-			border-color: transparent transparent $popoverWarning transparent;
+			border-color: transparent transparent var(--warning-bg-color) transparent;
 		}
 	}
 	&.with-caption.bottom .pointer {
-		border-bottom-color: $popoverWarning;
+		border-bottom-color: var(--warning-bg-color);
 	}
 }
 &.info {
 	rb-button {
-		color: darken($popoverInfo, 30%);
+		color: var(--info-trigger-color);
 	}
 	.popover {
-		color: #0c5460;
+		color: var(--info-color);
 		.caption {
-			background-color: $popoverInfo;
+			background-color: var(--info-bg-color);
 		}
 		.pointer {
-			border-color: transparent transparent $popoverInfo transparent;
+			border-color: transparent transparent var(--info-bg-color) transparent;
 		}
 	}
 	&.with-caption.bottom .pointer {
-		border-bottom-color: $popoverInfo;
+		border-bottom-color: var(--info-bg-color);
 	}
-}
+}
diff --git a/src/client/styles/main/popover.scss b/src/client/styles/main/popover.scss
@@ -9,7 +9,7 @@
 	width: max-content;
 	cursor: auto;
 	border: 1px solid #ddd;
-	border-radius: .3rem;
+	border-radius: var(--border-radius);
 	background-color: white;
 	background-clip: padding-box;
 	box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
@@ -35,8 +35,8 @@
 		text-transform: uppercase;
 		text-shadow: 1px 1px 4px white;
 		border-bottom: 1px solid #ddd;
-		border-top-left-radius: calc(.3rem - 1px);
-		border-top-right-radius: calc(.3rem - 1px);
+		border-top-left-radius: calc(var(--border-radius) - 1px);
+		border-top-right-radius: calc(var(--border-radius) - 1px);
 	}
 
 	.body {
@@ -90,4 +90,3 @@
 		}
 	}
 }
-
diff --git a/src/client/styles/rb-popover.scss b/src/client/styles/rb-popover.scss
@@ -4,6 +4,7 @@
 // Sassy Goodness
 @import 'sass/functions.scss';
 @import 'sass/variables.scss';
+@import 'theme.scss';
 
 // The Component
 .rb-popover {
@@ -12,4 +13,4 @@
 	@import 'main/trigger.scss';
 	@import 'main/pointer.scss';
 	@import 'main/popover.scss';
-}
+}
diff --git a/src/client/styles/sass/variables.scss b/src/client/styles/sass/variables.scss
@@ -1,8 +1,3 @@
 /*****************
  * SASS VARIABLES
  *****************/
-$popoverDefault: #f7f7f7;
-$popoverInfo:    #d1ecf1;
-$popoverSuccess: #d4edda;
-$popoverWarning: #fff3cd;
-$popoverDanger:  #f8d7da;
diff --git a/src/client/styles/theme.scss b/src/client/styles/theme.scss
@@ -0,0 +1,28 @@
+/*******************
+ * RB-POPOVER THEME
+ *******************/
+:host {
+	// popover bg-color
+	--default-bg-color: var(--rb-popover-default-bg-color, #f7f7f7);
+	--success-bg-color: var(--rb-popover-success-bg-color, #d4edda);
+	--danger-bg-color: var(--rb-popover-danger-bg-color, #f8d7da);
+	--warning-bg-color: var(--rb-popover-warning-bg-color, #fff3cd);
+	--info-bg-color: var(--rb-popover-info-bg-color, #d1ecf1);
+
+	// popover color
+	--default-color: var(--rb-popover-default-color, #5f6e7e);
+	--success-color: var(--rb-popover-success-color, #155724);
+	--danger-color: var(--rb-popover-danger-color, #721c24);
+	--warning-color: var(--rb-popover-warning-color, #856404);
+	--info-color: var(--rb-popover-info-color, #0c5460);
+
+	// trigger color
+	--default-trigger-color: var(--rb-popover-default-trigger-color, #9faab5);
+	--success-trigger-color: var(--rb-popover-success-trigger-color, #68c07d);
+	--danger-trigger-color: var(--rb-popover-danger-trigger-color, #e15562);
+	--info-trigger-color: var(--rb-popover-info-trigger-color, #5cbccd);
+	--warning-trigger-color: var(--rb-popover-warning-trigger-color, #e7af00);
+
+	// border-radius
+	--border-radius: var(--rb-popover-border-radius, .3rem);
+}