studiokit-scaffolding-js 7.0.14-alpha.1.4 → 7.0.14-alpha.1.6

package/lib/css/components/_forms.css

@@ -6,14 +6,13 @@
 	font-size: 1rem;
 	padding: 0.5rem;
 	line-height: 1.5;
-	border-color: var(--color-light-grey);
-	border-bottom-color: var(--color-medium-dark-grey);
+	border-color: var(--color-medium-dark-grey);
 	box-shadow: none;
+}
 
-	&:focus {
-		border-color: var(--color-focus-border);
-		box-shadow: var(--box-shadow-focus);
-	}
+.form-control :focus, .MuiInputBase-input:focus {
+	border-color: var(--color-focus-border);
+	box-shadow: var(--box-shadow-focus-shadow);
 }
 
 select.form-control {
@@ -58,7 +57,7 @@ select.form-control {
 	& input,
 	& textarea {
 		background-color: var(--color-white);
-		border: 1px solid var(--color-light-grey);
+		border: 1px solid var(--color-medium-dark-grey);
 		padding: 0.5rem;
 		border-radius: 0.25rem;
 		height: auto;

package/lib/css/components/_quill.css

@@ -18,7 +18,7 @@
 	min-height: calc(var(--quill-min-height) + var(--quill-toolbars-height));
 	max-height: calc(var(--quill-max-height) + var(--quill-toolbars-height));
 	position: relative;
-	border: 1px solid var(--color-light-grey);
+	border: 1px solid var(--color-medium-dark-grey);
 }
 
 .quill-loader-inner {
@@ -44,6 +44,10 @@
 	}
 }
 
+.ql-toolbar.ql-snow {
+	border-color: var(--color-medium-dark-grey);
+}
+
 /* Expandable toolbar */
 
 .more-options {
@@ -52,12 +56,12 @@
 	height: 30px !important;
 
 	&.expanded {
-		background: var(--color-light-grey) !important;
+		background: var(--color-medium-dark-grey) !important;
 	}
 }
 
 .more-options-toolbar {
-	border-top: 0 solid var(--color-light-grey);
+	border-top: 0 solid var(--color-medium-dark-grey);
 	margin: 0;
 	padding: 0;
 	height: 0;
@@ -69,7 +73,7 @@
 	}
 
 	&.expanded {
-		border-top: 1px solid var(--color-light-grey);
+		border-top: 1px solid var(--color-medium-dark-grey);
 		margin: 0.6rem -0.6rem 0;
 		padding: 0.6rem 0.6rem 0;
 		height: 36px;
@@ -216,15 +220,15 @@
 	& .ql-picker-item:hover,
 	& .ql-picker-item:focus,
 	& .ql-picker-item.ql-selected {
-		color: var(--color-focus-outline) !important;
+		color: var(--color-primary) !important;
 
 		& .ql-fill,
 		& .ql-stroke.ql-fill {
-			fill: var(--color-focus-outline) !important;
+			fill: var(--color-primary) !important;
 		}
 
 		& .ql-stroke {
-			stroke: var(--color-focus-outline) !important;
+			stroke: var(--color-primary) !important;
 		}
 	}
 
@@ -235,7 +239,7 @@
 	& .ql-picker-label.ql-active,
 	& .ql-picker-item:focus,
 	& .ql-picker-item.ql-selected {
-		outline: 2px solid var(--color-focus-outline) !important;
+		outline: 2px solid var(--color-focus-border) !important;
 	}
 
 	/* Disabled overrides */
@@ -292,7 +296,7 @@
 
 .quill:focus-within {
 	border-color: var(--color-focus-border);
-	box-shadow: var(--box-shadow-focus);
+	box-shadow: var(--box-shadow-focus-shadow);
 	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 	position: relative;
 	z-index: 1;
@@ -303,6 +307,10 @@
 	}
 }
 
+.ql-editor:focus-visible {
+	outline: none;
+}
+
 .error {
 	& .quill:focus-within {
 		border-color: var(--color-red);

package/lib/css/components/_tables.css

@@ -71,7 +71,7 @@ th,
 	padding: 0 !important;
 	text-align: left;
 	background: white;
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid var(--color-medium-dark-grey);
 	border-radius: 3px;
 	width: 100%;
 
@@ -84,6 +84,10 @@ th,
 		outline: none !important;
 		border: none !important;
 		width: 100%;
+
+		&:focus {
+			border: 1px solid var(--color-focus-border) !important;
+		}
 	}
 
 	& input[type=search] {
@@ -112,6 +116,15 @@ th,
 		padding: 0.75rem var(--cell-padding-horiz);
 	}
 
+	& .rt-thead.-filters .form-control {
+		border-color: var(--color-light-grey);
+		border-bottom-color: var(--color-medium-dark-grey);
+
+		&:focus {
+			border-color: var(--color-focus-border);
+		}
+	}
+
 	& .rt-td {
 		padding: var(--cell-padding-horiz);
 		font-size: 1rem;

package/lib/css/utils/_focus.css

@@ -3,6 +3,6 @@ body :focus-visible,
 body button:focus-visible, 
 body [type="button"]:focus-visible,
 body .btn-primary:focus-visible {
-	outline: 0.2rem solid var(--color-focus-outline);
+	outline: 0.2rem solid var(--color-focus-border);
 	outline-offset: 0;
 }

package/lib/css/variables.css

@@ -60,10 +60,10 @@
 	--color-primary: var(--color-blue);
 	--color-error: var(--color-red);
 	--color-success: var(--color-green);
-
-	--color-focus-border: #80bdff; /* from Bootstrap's focus styling */
-	--color-focus-outline: #308DF8;
-	--box-shadow-focus: 0 0 0 0.2rem var(--color-focus-outline);
+	--color-focus-border: #3590f8;
+	--color-focus-shadow: rgb(0 123 255 / 25%); /** from Bootstrap form controls */
+	--box-shadow-focus-border: 0 0 0 0.2rem var(--color-focus-border);
+	--box-shadow-focus-shadow: 0 0 0 0.2rem var(--color-focus-shadow);
 
 	/* Border Radius */
 	--border-radius: 3px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "7.0.14-alpha.1.4",
+	"version": "7.0.14-alpha.1.6",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",