feat(new api kind neutral): create it and make the default kind blue

rapid-build-ui · Mar 20, 2019 · 9fa3c4a · 9fa3c4a
1 parent 0fc8c09
commit 9fa3c4a
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 67 deletions.
diff --git a/src/client/scripts/rb-popover.js b/src/client/scripts/rb-popover.js
@@ -52,16 +52,18 @@
 			caption: props.string,
 			fitContent: props.boolean,
 			hover: props.boolean,
-			kind: props.string,
 			pin: props.boolean, // popover only closes by clicking trigger
-			unstyled: props.boolean,
 			iconFlip: props.string,
 			iconKind: props.string,
 			iconSize: props.number,
 			iconSpeed: props.number,
 			iconRotate: props.number,
 			iconSource: props.string,
 			iconValign: props.string,
+			inheritColor: props.boolean,
+			kind: Object.assign({}, props.string, {
+				default: 'default'
+			}),
 			position: Object.assign({}, props.string, {
 				default: 'right'
 			}),

diff --git a/src/client/styles/layout/pointer.scss b/src/client/styles/layout/pointer.scss
@@ -18,13 +18,13 @@
 	&::before {
 		top: 7px;
 		left: -5px;
-		border-bottom: 1px solid mapGet($palette, greyLight);
+		border-bottom: 1px solid mapGet($palette, xGreyLight);
 		transform: rotate(63deg);
 	}
 	&::after {
 		top: 6px;
 		left: -13px;
-		border-top: 1px solid mapGet($palette, greyLight);
+		border-top: 1px solid mapGet($palette, xGreyLight);
 		transform: rotate(-63deg);
 	}
 }

diff --git a/src/client/styles/layout/popover.scss b/src/client/styles/layout/popover.scss
@@ -8,7 +8,7 @@
 	width: -moz-max-content; // firefox
 	width: max-content;
 	cursor: auto;
-	border: 1px solid mapGet($palette, greyLight);
+	border: 1px solid mapGet($palette, xGreyLight);
 	background-color: mapGet($palette, white);
 	background-clip: padding-box;
 	box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
@@ -34,7 +34,7 @@
 		letter-spacing: .1px;
 		text-transform: uppercase;
 		text-shadow: 1px 1px 4px mapGet($palette, white);
-		border-bottom: 1px solid mapGet($palette, greyLight);
+		border-bottom: 1px solid mapGet($palette, xGreyLight);
 	}
 
 	.body {
@@ -43,8 +43,10 @@
 }
 
 .rb-popover {
-	/* With Content
-	 ***************/
+	&.no-content .caption {
+		padding-top: 8px;
+		padding-bottom: 9px;
+	}
 	&.with-content .body {
 		padding: 11px 12px 12px 13px;
 	}

diff --git a/src/client/styles/layout/trigger.scss b/src/client/styles/layout/trigger.scss
diff --git a/src/client/styles/rb-popover.scss b/src/client/styles/rb-popover.scss
@@ -8,7 +8,6 @@
  *********/
 @import 'layout/host.scss';
 @import 'layout/root.scss';
-@import 'layout/trigger.scss';
 @import 'layout/pointer.scss';
 @import 'layout/popover.scss';
 

diff --git a/src/client/styles/sass/palette.scss b/src/client/styles/sass/palette.scss
@@ -5,31 +5,42 @@ $palette: (
 	// Transparent
 	trans: transparent,
 
+	// Blues
+	blueDark:       #004085,
+	blue:           #4682b4,
+	blueLight:      #58a0e8, // 89afcf | 58a0e8
+	xBlueLight:     #cce5ff,
+
 	// Greens
 	greenDark:      #155724,
-	green:          #68c07d,
-	greenLight:     #d4edda,
+	green:          #28A745,
+	greenLight:     #89cf99,
+	xGreenLight:    #d4edda,
 
 	// Greys
 	greyDark:       #5f6e7e,
-	grey:           #9faab5,
-	greyLight:      #ddd,
-	xGreyLight:     #f7f7f7,
+	grey:           #919ba5,
+	greyLight:      #c1c8cf,
+	xGreyLight:     #ddd,
+	xxGreyLight:    #f7f7f7,
 
 	// Reds
 	redDark:        #721c24,
-	red:            #e15562,
-	redLight:       #f8d7da,
+	red:            #df4755,
+	redLight:       #ea8992,
+	xRedLight:      #f8d7da,
 
 	// Turquoise
 	turquoisDark:   #0c5460,
-	turquois:       #5cbccd,
-	turquoisLight:  #d1ecf1,
+	turquois:       #17a2b8,
+	turquoisLight:  #80ccd8,
+	xTurquoisLight: #d1ecf1,
 
 	// Yellows
 	yellowDark:     #856404,
-	yellow:         #e7af00,
-	yellowLight:    #fff3cd,
+	yellow:         #c69500,
+	yellowLight:    #dfc573,
+	xYellowLight:   #fff3cd,
 
 	// White
 	white:          white

diff --git a/src/client/styles/style/common.scss b/src/client/styles/style/common.scss
@@ -16,29 +16,36 @@
 			border-top-left-radius: $cRadius;
 			border-top-right-radius: $cRadius;
 		}
+		rb-button {
+			--rb-button-text-button-opacity: #{mapGet($vars, common, trigger-opacity)};
+			--rb-button-text-button-opacity-hover: #{mapGet($vars, common, trigger-opacity-hover)};
+			--rb-button-text-button-transition: #{mapGet($vars, common, trigger-transition)};
+		}
 	}
 
 	// Kinds
-	$kinds: default, danger, info, success, warning;
+	$kinds: default, danger, info, neutral, success, warning;
 	@each $kind in $kinds {
 		.#{$kind} {
 			&.with-caption {
-				&.bottom,
-				&.no-content {
-					.pointer {
-						$bgColor: mapGet($vars, common, #{$kind}-caption-bg);
-						border-bottom-color: $bgColor; // match caption bg
+				&.bottom, &.no-content {
+					.pointer { // match caption bg
+						border-bottom-color: mapGet($vars, common, #{$kind}-caption-bg);
 					}
 				}
 			}
 			.popover {
-				color: mapGet($vars, common, #{$kind}-text-color);
 				.caption {
+					color: mapGet($vars, common, #{$kind}-caption-color);
 					background-color: mapGet($vars, common, #{$kind}-caption-bg);
 				}
+				.body {
+					color: mapGet($vars, common, #{$kind}-content-color);
+				}
 			}
 			rb-button {
-				color: mapGet($vars, common, #{$kind}-trigger-color);
+				--rb-button-#{$kind}-text-button-color: #{mapGet($vars, common, #{$kind}-trigger-color)};
+				--rb-button-#{$kind}-text-button-color-hover: #{mapGet($vars, common, #{$kind}-trigger-color-hover)};
 			}
 		}
 	}

diff --git a/src/client/styles/variables/common.scss b/src/client/styles/variables/common.scss
@@ -5,25 +5,46 @@
 $commonCssVars: (
 	// Borders (common for all kinds)
 	border-radius: 5px,
+	trigger-opacity: 1,
+	trigger-opacity-hover: 1,
+	trigger-transition: all .15s ease-in-out,
 
 	// Caption Background Colors
-	default-caption-bg:   mapGet($palette, xGreyLight),
-	danger-caption-bg:    mapGet($palette, redLight),
-	info-caption-bg:      mapGet($palette, turquoisLight),
-	success-caption-bg:   mapGet($palette, greenLight),
-	warning-caption-bg:   mapGet($palette, yellowLight),
+	default-caption-bg: mapGet($palette, xBlueLight),
+	danger-caption-bg:  mapGet($palette, xRedLight),
+	info-caption-bg:    mapGet($palette, xTurquoisLight),
+	neutral-caption-bg: mapGet($palette, xxGreyLight),
+	success-caption-bg: mapGet($palette, xGreenLight),
+	warning-caption-bg: mapGet($palette, xYellowLight),
 
-	// Text Colors
-	default-text-color:   mapGet($palette, greyDark),
-	danger-text-color:    mapGet($palette, redDark),
-	info-text-color:      mapGet($palette, turquoisDark),
-	success-text-color:   mapGet($palette, greenDark),
-	warning-text-color:   mapGet($palette, yellowDark),
+	// Caption Colors
+	default-caption-color: mapGet($palette, blueDark),
+	danger-caption-color:  mapGet($palette, redDark),
+	info-caption-color:    mapGet($palette, turquoisDark),
+	neutral-caption-color: mapGet($palette, greyDark),
+	success-caption-color: mapGet($palette, greenDark),
+	warning-caption-color: mapGet($palette, yellowDark),
+
+	// Content Colors
+	default-content-color: mapGet($palette, greyDark),
+	danger-content-color:  mapGet($palette, greyDark),
+	info-content-color:    mapGet($palette, greyDark),
+	neutral-content-color: mapGet($palette, greyDark),
+	success-content-color: mapGet($palette, greyDark),
+	warning-content-color: mapGet($palette, greyDark),
 
 	// Trigger Colors
-	default-trigger-color:   mapGet($palette, grey),
-	danger-trigger-color:    mapGet($palette, red),
-	info-trigger-color:      mapGet($palette, turquois),
-	success-trigger-color:   mapGet($palette, green),
-	warning-trigger-color:   mapGet($palette, yellow)
+	default-trigger-color: mapGet($palette, blue),
+	danger-trigger-color:  mapGet($palette, red),
+	info-trigger-color:    mapGet($palette, turquois),
+	neutral-trigger-color: mapGet($palette, grey),
+	success-trigger-color: mapGet($palette, green),
+	warning-trigger-color: mapGet($palette, yellow),
+
+	default-trigger-color-hover: mapGet($palette, blueLight),
+	danger-trigger-color-hover:  mapGet($palette, redLight),
+	info-trigger-color-hover:    mapGet($palette, turquoisLight),
+	neutral-trigger-color-hover: mapGet($palette, greyLight),
+	success-trigger-color-hover: mapGet($palette, greenLight),
+	warning-trigger-color-hover: mapGet($palette, yellowLight)
 );
diff --git a/src/client/views/rb-popover.html b/src/client/views/rb-popover.html
@@ -1,13 +1,12 @@
 <div class="
 	rb-popover
-	${props.kind || 'default'}
-	${props.unstyled ? 'unstyled' : ''}
+	${props.kind}
 	${props.fitContent ? 'fit-content' : ''}
 	${props.caption ? 'with-caption' : 'no-caption'}
 	${state.hasContent ? 'with-content' : 'no-content'}
 	${state.position ? state.position : props.position}">
 	<rb-button
-		kind="text"
+		kind="${props.kind}"
 		?icon-burst="${props.iconBurst}"
 		?icon-pulse="${props.iconPulse}"
 		?icon-spin="${props.iconSpin}"
@@ -18,6 +17,7 @@
 		icon-rotate="${View.ifDefined(props.iconRotate || undefined)}"
 		icon-source="${!props.iconKind ? 'solid' : props.iconSource}"
 		icon-valign="${View.ifDefined(props.iconValign || undefined)}"
+		text='${props.inheritColor ? `{ "inherit": "color"}` : ""}'
 		@click="${this._clickToggle.bind(this)}"
 		@mouseover="${this._hoverToggle.bind(this)}">
 	</rb-button>