genesys-react-components 0.2.4-no-jira-peer-deps.194 → 0.3.0

package/src/dxtoggle/DxToggle.scss

@@ -1,8 +1,10 @@
+@import '../theme/variables.scss';
+
 .dx-toggle-container {
 	display: inline-block;
 	.dx-toggle {
-		background: #f5f8fb;
-		border: 1px solid #c6cbd1;
+		border: 1px solid var($--theme-core-control-border-color);
+		background: var($--theme-core-control-background-color);
 		border-radius: 6px;
 		height: 26px;
 		// width: 72px;
@@ -16,7 +18,7 @@
 
 		&:hover {
 			.slider {
-				border-color: #aac9ff;
+				border-color: var($--theme-core-control-focus-color);
 			}
 		}
 
@@ -24,7 +26,7 @@
 			font-size: 10px;
 			line-height: 0;
 			margin: 0 5px;
-			color: #c4c4c4;
+			color: var($--theme-core-control-border-color);
 		}
 
 		.clear-placeholder {
@@ -38,8 +40,8 @@
 			height: 22px;
 			width: 22px;
 			border-radius: 22px;
-			background-color: #419bb2;
-			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+			background-color: var($--theme-core-control-punch-color);
+			box-shadow: 0px 1px 2px var($--theme-core-box-shadow-color);
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -48,7 +50,7 @@
 			.icon {
 				font-size: 10px;
 				line-height: 0;
-				color: #ffffff;
+				color: var($--theme-core-control-background-color);
 				padding: 0;
 				margin: 0;
 			}
@@ -57,9 +59,10 @@
 
 	&.disabled {
 		.dx-toggle {
-			border-color: #e8eaed;
-			color: #ffffff;
 			cursor: not-allowed;
+			opacity: 0.7;
+			border-color: var($--theme-core-control-border-color);
+			color: var($--theme-core-control-background-color);
 
 			&:hover {
 				.slider {
@@ -68,8 +71,9 @@
 			}
 
 			.slider {
-				color: #8a9a9e;
-				background-color: #e0e6e8;
+				opacity: 0.7;
+				color: var($--theme-core-control-background-color);
+				background-color: var($--theme-core-control-punch-color);
 			}
 		}
 	}

package/src/loadingplaceholder/LoadingPlaceholder.scss

@@ -1,4 +1,4 @@
-@import '../../utils/theme/variables.scss';
+@import '../theme/variables.scss';
 
 $size: 160px;
 
@@ -13,6 +13,7 @@ $size: 160px;
 		flex-flow: row nowrap;
 		align-items: center;
 		justify-content: center;
+		text-align: center;
 		width: 100%;
 		height: 100%;
 		font-style: normal;
@@ -55,4 +56,4 @@ $size: 160px;
 			opacity: 0;
 		}
 	}
-}
+}

package/src/loadingplaceholder/LoadingPlaceholder.tsx

@@ -2,6 +2,99 @@ import React from 'react';
 
 import './LoadingPlaceholder.scss';
 
+// SimCity loading messages! https://gist.github.com/erikcox/7e96d031d00d7ecb1a2f
+const MESSAGES = [
+	'Adding Hidden Agendas',
+	'Adjusting Bell Curves',
+	'Aesthesizing Industrial Areas',
+	'Aligning Covariance Matrices',
+	'Applying Feng Shui Shaders',
+	'Applying Theatre Soda Layer',
+	'Asserting Packed Exemplars',
+	'Attempting to Lock Back-Buffer',
+	'Binding Sapling Root System',
+	'Building Data Trees',
+	'Bureacritizing Bureaucracies',
+	'Calculating Inverse Probability Matrices',
+	'Calculating Llama Expectoration Trajectory',
+	'Calibrating Blue Skies',
+	'Charging Ozone Layer',
+	'Coalescing Cloud Formations',
+	'Cohorting Exemplars',
+	'Collecting Meteor Particles',
+	'Compounding Inert Tessellations',
+	'Compressing Fish Files',
+	'Computing Optimal Bin Packing',
+	'Concatenating Sub-Contractors',
+	'Containing Existential Buffer',
+	'Debunching Unionized Commercial Services',
+	'Deciding What Message to Display Next',
+	'Decomposing Singular Values',
+	'Decrementing Tectonic Plates',
+	'Deleting Ferry Routes',
+	'Depixelating Inner Mountain Surface Back Faces',
+	'Deunionizing Bulldozers',
+	'Dicing Models',
+	'Diluting Livestock Nutrition Variables',
+	'Downloading Satellite Terrain Data',
+	'Exposing Flash Variables to Streak System',
+	'Extracting Resources',
+	'Flushing Pipe Network',
+	'Gathering Particle Sources',
+	'Generating Jobs',
+	'Gesticulating Mimes',
+	'Graphing Whale Migration',
+	'Hiding Willio Webnet Mask',
+	'Increasing Accuracy of RCI Simulators',
+	'Increasing Magmafacation',
+	'Initializing My Sim Tracking Mechanism',
+	'Initializing Robotic Click-Path AI',
+	'Inserting Sublimated Messages',
+	'Integrating Curves',
+	'Integrating Illumination Form Factors',
+	'Integrating Population Graphs',
+	'Iterating Cellular Automata',
+	'Lecturing Errant Subsystems',
+	'Modeling Object Components',
+	'Mopping Occupant Leaks',
+	'Normalizing Power',
+	'Obfuscating Quigley Matrix',
+	'Partitioning Singularities',
+	'Perturbing Matrices',
+	'Polishing Water Highlights',
+	'Populating Lot Templates',
+	'Preparing Sprites for Random Walks',
+	'Prioritizing Landmarks',
+	'Projecting Law Enforcement Pastry Intake',
+	'Realigning Alternate Time Frames',
+	'Relaxing Splines',
+	'Removing Road Network Speed Bumps',
+	'Removing Texture Gradients',
+	'Removing Vehicle Avoidance Behavior',
+	'Reticulating Splines',
+	'Retracting Phong Shader',
+	'Retrieving from Back Store',
+	'Reverse Engineering Image Consultant',
+	'Routing Neural Network Infanstructure',
+	'Scattering Rhino Food Sources',
+	'Scrubbing Terrain',
+	'Searching for Llamas',
+	'Seeding Architecture Simulation Parameters',
+	'Sequencing Particles',
+	'Setting Advisor Moods',
+	'Setting Inner Deity Indicators',
+	'Setting Universal Physical Constants',
+	'Sonically Enhancing Occupant-Free Timber',
+	'Speculating Stock Market Indices',
+	'Splatting Transforms',
+	'Stratifying Ground Layers',
+	'Sub-Sampling Water Data',
+	'Synthesizing Gravity',
+	'Synthesizing Wavelets',
+	'Time-Compressing Simulator Clock',
+	'Unable to Reveal Current Activity',
+];
+
 interface IProps {
 	text?: string;
 }
@@ -9,7 +102,7 @@ interface IProps {
 export default function LoadingPlaceholder(props: IProps) {
 	return (
 		<div className="loading-placeholder">
-			<span className="text">{props.text || 'Loading'}</span>
+			<span className="text">{props.text || MESSAGES[Math.floor(Math.random() * (MESSAGES.length - 1))]}</span>
 			<div></div>
 			<div></div>
 		</div>

package/src/theme/roboto.scss

@@ -0,0 +1,65 @@
+/* roboto-300 - latin */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: local(''),
+         url('./fonts/roboto-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* roboto-300italic - latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: local(''),
+         url('./fonts/roboto-v29-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v29-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* roboto-regular - latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local(''),
+         url('./fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* roboto-italic - latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local(''),
+         url('./fonts/roboto-v29-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v29-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* roboto-700 - latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local(''),
+         url('./fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }
+  
+  /* roboto-700italic - latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local(''),
+         url('./fonts/roboto-v29-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+         url('./fonts/roboto-v29-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  }  

package/src/theme/scrollbars.scss

@@ -0,0 +1,49 @@
+@import './variables.scss';
+
+// Webkit scrollbars (Chrome, Opera, Safari, Edge... every browser but firefox
+// https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
+::-webkit-scrollbar {
+	-webkit-appearance: none;
+	width: 7px;
+	height: 7px;
+}
+::-webkit-scrollbar-thumb {
+	border-radius: 4px;
+	background-color: var($--theme-core-scrollbar-color);
+}
+::-webkit-scrollbar-corner {
+	background: transparent;
+}
+
+// Just firefox
+// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+body {
+	scrollbar-color: var($--theme-core-scrollbar-color) transparent;
+}
+
+.scrollbar-toggle-button {
+	position: fixed;
+	top: 7px;
+	left: 750px;
+	width: 220px;
+}
+
+.disappearing-scrollbars {
+	// Firefox
+	scrollbar-color: transparent transparent;
+
+	// Chrome
+	&::-webkit-scrollbar-thumb {
+		background-color: transparent;
+	}
+
+	&:hover {
+		// Firefox
+		scrollbar-color: var($--theme-core-scrollbar-color) transparent;
+
+		// Chrome
+		&::-webkit-scrollbar-thumb {
+			background-color: var($--theme-core-scrollbar-color);
+		}
+	}
+}

package/src/theme/typography.scss

@@ -0,0 +1,184 @@
+@import './variables.scss';
+
+body {
+	color: var($--theme-core-text-color);
+
+	::selection {
+		background: var($--theme-core-selection-color);
+	}
+
+	h1,
+	.h1,
+	h2,
+	.h2,
+	h3,
+	.h3,
+	h4,
+	.h4,
+	h5,
+	.h5,
+	h6,
+	.h6 {
+		color: var($--theme-core-heading-color);
+		margin-top: 60px;
+		margin-bottom: 20px;
+
+		&:hover {
+			color: var($--theme-core-heading-color);
+		}
+	}
+
+	h1,
+	.h1 {
+		font-size: 48px;
+		line-height: 56px;
+		font-weight: 100;
+	}
+
+	h2,
+	.h2 {
+		font-size: 32px;
+		line-height: 38px;
+		font-weight: 100;
+	}
+
+	h3,
+	.h3 {
+		font-size: 24px;
+		line-height: 32px;
+		font-weight: 300;
+	}
+
+	h4,
+	.h4 {
+		font-size: 18px;
+		line-height: 24px;
+		font-weight: 400;
+	}
+
+	h5,
+	.h5 {
+		font-size: 16px;
+		line-height: 20px;
+		font-weight: 400;
+	}
+
+	h6,
+	.h6 {
+		font-size: 14px;
+		line-height: 20px;
+		font-weight: 500;
+	}
+
+	.h7 {
+		font-size: 14px;
+		line-height: 20px;
+		font-weight: 700;
+		text-transform: uppercase;
+		display: block;
+		margin-top: 40px;
+		margin-bottom: 12px;
+		color: var($--theme-core-heading-seven-color);
+	}
+
+	p {
+		margin-top: 0;
+		margin-bottom: 10px;
+	}
+
+	ol,
+	ul {
+		padding-left: 27px;
+		margin: 10px 0;
+		li {
+			line-height: 20px;
+			margin-bottom: 4px;
+		}
+	}
+
+	// // Display numbered lists as 1 > a > i > 1 > a > i
+	ol {
+		list-style-type: decimal;
+		ol {
+			list-style-type: lower-alpha;
+			ol {
+				list-style-type: lower-roman;
+				ol {
+					list-style-type: decimal;
+					ol {
+						list-style-type: lower-alpha;
+						ol {
+							list-style-type: lower-roman;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	a,
+	a:link,
+	a:active,
+	a:visited,
+	a:focus,
+	a:hover {
+		color: var($--theme-core-link-color);
+		text-decoration: none;
+	}
+
+	a {
+		&:hover {
+			text-decoration: none;
+			color: var($--theme-core-link-hover-color);
+		}
+
+		// Don't style non-href anchors like links
+		&:not([href]):not([class]),
+		&:not([href]):not([class]):hover {
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
+	code {
+		padding: 2px 4px;
+		border-radius: 4px;
+		color: var($--theme-core-code-color);
+		background-color: var($--theme-core-code-background-color);
+	}
+
+	pre {
+		display: block;
+		margin: 40px 0;
+		padding: 0;
+		border-radius: 4px;
+		background-color: var($--theme-core-code-background-color);
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+		overflow: auto;
+
+		code {
+			background-color: transparent;
+			margin: 0;
+			padding: 20px;
+			display: block;
+			color: var($--theme-core-code-color);
+		}
+	}
+
+	// Standardized indentation
+	@mixin indent-tier($tier) {
+		.indent-#{$tier} {
+			margin-left: $tier * 30px;
+		}
+	}
+	@include indent-tier(1);
+	@include indent-tier(2);
+	@include indent-tier(3);
+	@include indent-tier(4);
+	@include indent-tier(5);
+	@include indent-tier(6);
+	@include indent-tier(7);
+	@include indent-tier(8);
+}