genesys-react-components 0.2.4-devengage-1548-theme-updates.199 → 0.2.4-devengage-1548-theme-updates.200

package/README.md

@@ -22,7 +22,7 @@ import { DxTextbox } from 'genesys-react-components';
 import { GenesysDevIcons } from 'genesys-dev-icons';
 
 export default function App() {
-	const inputRef = useRef<HTMLInputElement>(null);
+	const inputRef = useRef < HTMLInputElement > null;
 	return (
 		<div className="app">
 			<DxTextbox
@@ -107,3 +107,26 @@ See https://reactjs.org/link/invalid-hook-call for tips about how to debug and f
 The cause of the issue is the first reason. The react-dom dependency is sourced from different locations for the component package and the React app that's using it. The package loads `<thisrepo>/node_modules/react_dom/` but the React app loads `<thisrepo>/app/node_modules/react-dom/` causing them to be different packages even though the loaded versions are identical.
 
 The solution is to delete `<thisrepo>/node_modules/` when using `npm link` in a any local React app. It doesn't seem to matter the order of operations as long as the folder is gone before `npm run start` is run to build the React app.
+
+## Concepts and Best Practices
+
+### What SHOULD go in this package?
+
+This package yields two conceptual things: React components and style information.
+
+Components should be added to this package that provide _functionality_ beyond the base HTML elements and built-in JSX/React constructs. This functionality may be complex and interact with the user, like buttons and text boxes, but can also be simple and provide standardization with no user interaction, like the loading placeholder.
+
+Style information can be added to the package in two primary ways.
+
+The most straightforward is to apply styles to a component in the package. A component should have a file of the same name, but with the `.scss` file extension to contain its styles.
+
+The package also provides general-purpose style information using selectors that apply to base HTML elements. These are broken out into a few individual files that can be consumed individually:
+
+- `src/theme/variables.scss` - The variables definition can be used by consuming applications to make any part of its own UI theme-aware. This is typically applied to the page's background, text colors, and custom components in the app.
+- `src/theme/typography.scss` - This file sets base theme style rules controlling the default colors and fonts. These rules apply to standard HTML elements, not components in the package.
+- `src/theme/roboto.scss` - The _Roboto_ font.
+- `src/theme/scrollbars.scss` - Styles for scrollbars
+
+### What SHOULD NOT go in this package?
+
+This package is not a shim for base HTML elements. As such, it should not contain components that neither provide custom functionality nor extend/enhance/normalize base HTML elements.

package/build/index.js

@@ -102,10 +102,10 @@ styleInject(css_248z$d);
 var css_248z$c = "";
 styleInject(css_248z$c);
 
-var css_248z$b = ".dx-select-group {\n  appearance: none;\n  position: relative;\n}\n.dx-select-group select {\n  border: 1px solid #8a96a3;\n  border-radius: 2px;\n  background-color: #ffffff;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 12px;\n  line-height: 14px;\n  color: #75757a;\n  padding: 8px 32px 8px 12px;\n  width: 100%;\n  appearance: none;\n}\n.dx-select-group select:focus-visible {\n  outline: 2px solid #aac9ff;\n}\n.dx-select-group::after {\n  position: absolute;\n  bottom: 12px;\n  right: 12px;\n  content: \"\\f105\";\n  font-size: 8px;\n  font-family: genesys-dev-icons !important;\n  font-style: normal;\n  font-weight: normal !important;\n  font-feature-settings: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  pointer-events: none;\n}\n.dx-select-group.disabled::after {\n  color: #8a9a9e;\n}\n.dx-select-group.disabled select:disabled {\n  background-color: #e6ebec;\n  border-color: #e8eaed;\n  color: #8a9a9e;\n  cursor: not-allowed;\n}";
+var css_248z$b = "/*** \n * Core colors\n ***/\n/*** \n\t* Component-specific properties \n\t***/\n/*** \n\t* Theme definitions\n\t***/\n.dx-select-group {\n  appearance: none;\n  position: relative;\n}\n.dx-select-group select {\n  border: 1px solid var(--theme-core-control-border-color);\n  border-radius: 2px;\n  background-color: var(--theme-core-control-alt-background-color);\n  font-style: normal;\n  font-weight: 300;\n  font-size: 12px;\n  line-height: 14px;\n  color: var(--theme-core-control-textbox-text-color);\n  padding: 8px 32px 8px 12px;\n  width: 100%;\n  appearance: none;\n}\n.dx-select-group select:focus-visible {\n  outline: 2px solid var(--theme-core-control-focus-color);\n}\n.dx-select-group::after {\n  position: absolute;\n  bottom: 12px;\n  right: 12px;\n  content: \"\\f105\";\n  font-size: 8px;\n  font-family: genesys-dev-icons !important;\n  font-style: normal;\n  font-weight: normal !important;\n  font-feature-settings: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  pointer-events: none;\n}\n.dx-select-group.disabled::after {\n  color: var(--theme-core-control-disabled-text-color);\n}\n.dx-select-group.disabled select:disabled {\n  background-color: var(--theme-core-control-disabled-background-color);\n  border-color: var(--theme-core-control-disabled-border-color);\n  color: var(--theme-core-control-disabled-text-color);\n  cursor: not-allowed;\n}";
 styleInject(css_248z$b);
 
-var css_248z$a = ".dx-multiselect-group {\n  appearance: none;\n  position: relative;\n}\n.dx-multiselect-group select {\n  border: 1px solid #8a96a3;\n  border-radius: 2px;\n  background-color: #ffffff;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 12px;\n  line-height: 14px;\n  color: #75757a;\n  width: 100%;\n  appearance: none;\n  scrollbar-color: #b0b2b5 transparent;\n}\n.dx-multiselect-group select:focus-visible {\n  outline: 2px solid #aac9ff;\n}\n.dx-multiselect-group select option {\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  -webkit-appearance: none;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 12px;\n  line-height: 31px;\n  padding: 8px 12px;\n  color: #75757a;\n}\n.dx-multiselect-group select option:checked {\n  background: #aac9ff -webkit-linear-gradient(bottom, #aac9ff 0%, #aac9ff 100%);\n}\n.dx-multiselect-group select option:disabled {\n  color: #8a9a9e;\n  cursor: not-allowed;\n}\n.dx-multiselect-group select::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 7px;\n  height: 7px;\n}\n.dx-multiselect-group select::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background-color: #b0b2b5;\n}\n.dx-multiselect-group select::-webkit-scrollbar-corner {\n  background: transparent;\n}\n.dx-multiselect-group.disabled select:disabled {\n  background-color: #e6ebec;\n  border-color: #e8eaed;\n  cursor: not-allowed;\n}\n.dx-multiselect-group.disabled select:disabled option {\n  color: #8a9a9e;\n}";
+var css_248z$a = "/*** \n * Core colors\n ***/\n/*** \n\t* Component-specific properties \n\t***/\n/*** \n\t* Theme definitions\n\t***/\n.dx-multiselect-group {\n  appearance: none;\n  position: relative;\n}\n.dx-multiselect-group select {\n  border: 1px solid var(--theme-core-control-border-color);\n  border-radius: 2px;\n  background-color: var(--theme-core-control-alt-background-color);\n  font-style: normal;\n  font-weight: 300;\n  font-size: 12px;\n  line-height: 14px;\n  color: var(--theme-core-control-textbox-text-color);\n  width: 100%;\n  appearance: none;\n  scrollbar-color: #b0b2b5 transparent;\n}\n.dx-multiselect-group select:focus-visible {\n  outline: 2px solid var(--theme-core-control-focus-color);\n}\n.dx-multiselect-group select option {\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  -webkit-appearance: none;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 12px;\n  line-height: 31px;\n  padding: 8px 12px;\n  color: var(--theme-core-control-textbox-text-color);\n}\n.dx-multiselect-group select option:checked {\n  color: var(--theme-core-tag-text-color);\n  background-color: var(--theme-core-tag-background-color);\n}\n.dx-multiselect-group select option:disabled {\n  color: #8a9a9e;\n  cursor: not-allowed;\n}\n.dx-multiselect-group select::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 7px;\n  height: 7px;\n}\n.dx-multiselect-group select::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background-color: #b0b2b5;\n}\n.dx-multiselect-group select::-webkit-scrollbar-corner {\n  background: transparent;\n}\n.dx-multiselect-group.disabled select:disabled {\n  background-color: var(--theme-core-control-disabled-background-color);\n  border-color: var(--theme-core-control-disabled-border-color);\n  cursor: not-allowed;\n}\n.dx-multiselect-group.disabled select:disabled option {\n  color: var(--theme-core-control-disabled-text-color);\n}";
 styleInject(css_248z$a);
 
 var css_248z$9 = "/*** \n * Core colors\n ***/\n/*** \n\t* Component-specific properties \n\t***/\n/*** \n\t* Theme definitions\n\t***/\n.dx-label {\n  margin: 20px 0;\n  display: block;\n}\n.dx-label .label-text,\n.dx-label .input-description {\n  display: block;\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 14px;\n  color: var(--theme-core-control-label-color);\n}\n.dx-label .label-text {\n  margin: 0 0 4px 0;\n}\n.dx-label .input-description {\n  padding: 6px 20px;\n  display: flex;\n  flex-flow: row nowrap;\n  gap: 8px;\n}\n.dx-label .input-description .icon {\n  color: var(--theme-alertblock-info-icon-color);\n  line-height: 0;\n}";
@@ -128,7 +128,7 @@ function DxLabel(props) {
     return React.createElement("label", { className: className }, contents);
 }
 
-var css_248z$8 = "/*** \n * Core colors\n ***/\n/*** \n\t* Component-specific properties \n\t***/\n/*** \n\t* Theme definitions\n\t***/\n.dx-checkbox {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  margin: 15px 0;\n}\n.dx-checkbox:first-of-type {\n  margin-top: 0;\n}\n.dx-checkbox .label-text {\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--theme-dxcheckbox-text-color);\n}\n.dx-checkbox input[type=checkbox] {\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0 8px 0 0;\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--theme-dxcheckbox-border-color);\n  border-radius: 2px;\n  background-color: var(--theme-dxcheckbox-background-color);\n  flex-shrink: 0;\n}\n.dx-checkbox input[type=checkbox]::before {\n  display: none;\n}\n.dx-checkbox input[type=checkbox]:checked {\n  background-color: var(--theme-dxcheckbox-border-color);\n}\n.dx-checkbox input[type=checkbox]:checked::before {\n  display: block;\n  position: relative;\n  top: 7px;\n  left: 3px;\n  font-size: 9px;\n  line-height: 0;\n  color: var(--theme-dxcheckbox-background-color);\n  content: \"\\f104\";\n  font-family: genesys-dev-icons !important;\n  font-style: normal;\n  font-weight: normal !important;\n  font-feature-settings: normal;\n  font-variant: normal;\n  text-transform: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):hover {\n  border-color: var(--theme-dxcheckbox-hover-color);\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus {\n  outline: var(--theme-dxcheckbox-outline-color) solid 2px;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus-visible {\n  outline: 0;\n}\n.dx-checkbox input[type=radio] {\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0 8px 0 0;\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--theme-dxcheckbox-border-color);\n  border-radius: 8px;\n  background-color: var(--theme-dxcheckbox-background-color);\n  flex-shrink: 0;\n}\n.dx-checkbox input[type=radio]::before {\n  display: none;\n}\n.dx-checkbox input[type=radio]:checked::before {\n  content: \"\";\n  display: block;\n  width: 10px;\n  height: 10px;\n  border-radius: 8px;\n  position: relative;\n  top: 2px;\n  left: 2px;\n  background-color: var(--theme-dxcheckbox-border-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):hover {\n  border-color: var(--theme-dxcheckbox-hover-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus {\n  outline: var(--theme-dxcheckbox-outline-color) solid 2px;\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus-visible {\n  outline: 0;\n}\n.dx-checkbox.disabled {\n  cursor: not-allowed;\n}\n.dx-checkbox.disabled input {\n  border-color: var(--theme-dxcheckbox-disabled-border-color);\n  cursor: not-allowed;\n}\n.dx-checkbox.disabled input:checked {\n  background-color: var(--theme-dxcheckbox-disabled-border-color);\n  cursor: not-allowed;\n}\n\n.dx-label .dx-checkbox .label-text {\n  margin: 0;\n}";
+var css_248z$8 = "/*** \n * Core colors\n ***/\n/*** \n\t* Component-specific properties \n\t***/\n/*** \n\t* Theme definitions\n\t***/\n.dx-checkbox {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  margin: 15px 0;\n}\n.dx-checkbox:first-of-type {\n  margin-top: 0;\n}\n.dx-checkbox .label-text {\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--theme-core-text-color);\n}\n.dx-checkbox input[type=checkbox] {\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0 8px 0 0;\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--theme-core-control-border-color);\n  border-radius: 2px;\n  background-color: var(--theme-core-control-background-color);\n  flex-shrink: 0;\n}\n.dx-checkbox input[type=checkbox]::before {\n  display: none;\n}\n.dx-checkbox input[type=checkbox]:checked {\n  background-color: var(--theme-core-control-background-color);\n}\n.dx-checkbox input[type=checkbox]:checked::before {\n  display: block;\n  position: relative;\n  top: 7px;\n  left: 3px;\n  font-size: 9px;\n  line-height: 0;\n  color: var(--theme-core-control-punch-color);\n  content: \"\\f104\";\n  font-family: genesys-dev-icons !important;\n  font-style: normal;\n  font-weight: normal !important;\n  font-feature-settings: normal;\n  font-variant: normal;\n  text-transform: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):hover {\n  border-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus {\n  outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-checkbox input[type=checkbox]:not(:disabled):focus-visible {\n  outline: 0;\n}\n.dx-checkbox input[type=radio] {\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0 8px 0 0;\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--theme-core-control-border-color);\n  border-radius: 8px;\n  background-color: var(--theme-core-control-background-color);\n  flex-shrink: 0;\n}\n.dx-checkbox input[type=radio]::before {\n  display: none;\n}\n.dx-checkbox input[type=radio]:checked::before {\n  content: \"\";\n  display: block;\n  width: 10px;\n  height: 10px;\n  border-radius: 8px;\n  position: relative;\n  top: 2px;\n  left: 2px;\n  background-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):hover {\n  border-color: var(--theme-core-control-punch-color);\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus {\n  outline: var(--theme-core-control-focus-color) solid 2px;\n}\n.dx-checkbox input[type=radio]:not(:disabled):focus-visible {\n  outline: 0;\n}\n.dx-checkbox.disabled {\n  cursor: not-allowed;\n}\n.dx-checkbox.disabled input {\n  border-color: var(--theme-core-control-disabled-border-color);\n  cursor: not-allowed;\n}\n.dx-checkbox.disabled input:checked {\n  background-color: var(--theme-core-control-disabled-background-color);\n  cursor: not-allowed;\n}\n\n.dx-label .dx-checkbox .label-text {\n  margin: 0;\n}";
 styleInject(css_248z$8);
 
 function DxCheckbox(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "genesys-react-components",
-    "version": "0.2.4-devengage-1548-theme-updates.199",
+    "version": "0.2.4-devengage-1548-theme-updates.200",
     "description": "A React component library containing standardized form elements.",
     "type": "module",
     "types": "build/index.d.ts",

package/src/dxitemgroup/DxCheckbox.scss

@@ -16,7 +16,7 @@
 		font-weight: normal;
 		font-size: 12px;
 		line-height: 18px;
-		color: var($--theme-dxcheckbox-text-color);
+		color: var($--theme-core-text-color);
 	}
 
 	input[type='checkbox'] {
@@ -28,9 +28,9 @@
 		margin: 0 8px 0 0;
 		width: 16px;
 		height: 16px;
-		border: 1px solid var($--theme-dxcheckbox-border-color);
+		border: 1px solid var($--theme-core-control-border-color);
 		border-radius: 2px;
-		background-color: var($--theme-dxcheckbox-background-color);
+		background-color: var($--theme-core-control-background-color);
 		flex-shrink: 0;
 	}
 
@@ -41,7 +41,7 @@
 
 	// Fill in background on check
 	input[type='checkbox']:checked {
-		background-color: var($--theme-dxcheckbox-border-color);
+		background-color: var($--theme-core-control-background-color);
 	}
 
 	// Display checkmark on check
@@ -52,7 +52,7 @@
 		left: 3px;
 		font-size: 9px;
 		line-height: 0;
-		color: var($--theme-dxcheckbox-background-color);
+		color: var($--theme-core-control-punch-color);
 
 		// genesys-dev-icons app-check
 		content: '\f104';
@@ -66,19 +66,22 @@
 		-moz-osx-font-smoothing: grayscale;
 	}
 
-	// Hover - radio button
+	// Hover - checkbox
 	input[type='checkbox']:not(:disabled):hover {
-		border-color: var($--theme-dxcheckbox-hover-color);
+		border-color: var($--theme-core-control-punch-color);
 	}
 
-	// Focus - radio button
+	// Focus - checkbox
 	input[type='checkbox']:not(:disabled):focus {
-		outline: var($--theme-dxcheckbox-outline-color) solid 2px;
+		outline: var($--theme-core-control-focus-color) solid 2px;
 	}
 	// Disable default focus outline
 	input[type='checkbox']:not(:disabled):focus-visible {
 		outline: 0;
 	}
+
+	////// RADIO
+
 	input[type='radio'] {
 		// Hide default appearance
 		-webkit-appearance: none;
@@ -88,9 +91,9 @@
 		margin: 0 8px 0 0;
 		width: 16px;
 		height: 16px;
-		border: 1px solid var($--theme-dxcheckbox-border-color);
+		border: 1px solid var($--theme-core-control-border-color);
 		border-radius: 8px;
-		background-color: var($--theme-dxcheckbox-background-color);
+		background-color: var($--theme-core-control-background-color);
 		flex-shrink: 0;
 	}
 
@@ -109,17 +112,17 @@
 		position: relative;
 		top: 2px;
 		left: 2px;
-		background-color: var($--theme-dxcheckbox-border-color);
+		background-color: var($--theme-core-control-punch-color);
 	}
 
 	// Hover - radio button
 	input[type='radio']:not(:disabled):hover {
-		border-color: var($--theme-dxcheckbox-hover-color);
+		border-color: var($--theme-core-control-punch-color);
 	}
 
 	// Focus - radio button
 	input[type='radio']:not(:disabled):focus {
-		outline: var($--theme-dxcheckbox-outline-color) solid 2px;
+		outline: var($--theme-core-control-focus-color) solid 2px;
 	}
 	// Disable default focus outline
 	input[type='radio']:not(:disabled):focus-visible {
@@ -130,13 +133,13 @@
 		cursor: not-allowed;
 
 		input {
-			border-color: var($--theme-dxcheckbox-disabled-border-color);
+			border-color: var($--theme-core-control-disabled-border-color);
 			cursor: not-allowed;
 		}
 
 		// Fill in background on check
 		input:checked {
-			background-color: var($--theme-dxcheckbox-disabled-border-color);
+			background-color: var($--theme-core-control-disabled-background-color);
 			cursor: not-allowed;
 		}
 	}

package/src/dxitemgroup/dropdown.scss

@@ -1,22 +1,24 @@
+@import '../theme/variables.scss';
+
 .dx-select-group {
 	appearance: none;
 	position: relative;
 
 	select {
-		border: 1px solid #8a96a3;
+		border: 1px solid var($--theme-core-control-border-color);
 		border-radius: 2px;
-		background-color: #ffffff;
+		background-color: var($--theme-core-control-alt-background-color);
 		font-style: normal;
 		font-weight: 300;
 		font-size: 12px;
 		line-height: 14px;
-		color: #75757a;
+		color: var($--theme-core-control-textbox-text-color);
 		padding: 8px 32px 8px 12px;
 		width: 100%;
 		appearance: none;
 
 		&:focus-visible {
-			outline: 2px solid #aac9ff;
+			outline: 2px solid var($--theme-core-control-focus-color);
 		}
 	}
 
@@ -40,13 +42,13 @@
 
 	&.disabled {
 		&::after {
-			color: #8a9a9e;
+			color: var($--theme-core-control-disabled-text-color);
 		}
 
 		select:disabled {
-			background-color: #e6ebec;
-			border-color: #e8eaed;
-			color: #8a9a9e;
+			background-color: var($--theme-core-control-disabled-background-color);
+			border-color: var($--theme-core-control-disabled-border-color);
+			color: var($--theme-core-control-disabled-text-color);
 			cursor: not-allowed;
 		}
 	}

package/src/dxitemgroup/multiselect.scss

@@ -1,21 +1,23 @@
+@import '../theme/variables.scss';
+
 .dx-multiselect-group {
 	appearance: none;
 	position: relative;
 
 	select {
-		border: 1px solid #8a96a3;
+		border: 1px solid var($--theme-core-control-border-color);
 		border-radius: 2px;
-		background-color: #ffffff;
+		background-color: var($--theme-core-control-alt-background-color);
 		font-style: normal;
 		font-weight: 300;
 		font-size: 12px;
 		line-height: 14px;
-		color: #75757a;
+		color: var($--theme-core-control-textbox-text-color);
 		width: 100%;
 		appearance: none;
 
 		&:focus-visible {
-			outline: 2px solid #aac9ff;
+			outline: 2px solid var($--theme-core-control-focus-color);
 		}
 
 		option {
@@ -28,10 +30,11 @@
 			font-size: 12px;
 			line-height: 31px;
 			padding: 8px 12px;
-			color: #75757a;
+			color: var($--theme-core-control-textbox-text-color);
 
 			&:checked {
-				background: #aac9ff -webkit-linear-gradient(bottom, #aac9ff 0%, #aac9ff 100%);
+				color: var($--theme-core-tag-text-color);
+				background-color: var($--theme-core-tag-background-color);
 			}
 
 			&:disabled {
@@ -62,12 +65,12 @@
 
 	&.disabled {
 		select:disabled {
-			background-color: #e6ebec;
-			border-color: #e8eaed;
+			background-color: var($--theme-core-control-disabled-background-color);
+			border-color: var($--theme-core-control-disabled-border-color);
 			cursor: not-allowed;
 
 			option {
-				color: #8a9a9e;
+				color: var($--theme-core-control-disabled-text-color);
 			}
 		}
 	}

package/src/theme/typography.scss

@@ -148,6 +148,25 @@
 		background-color: var($--theme-core-code-background-color);
 	}
 
+	pre {
+		display: block;
+		margin: 0;
+		padding: 0;
+		border-radius: 4px;
+		background-color: var($--theme-core-code-background-color);
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+
+		code {
+			background-color: transparent;
+			margin: 0;
+			padding: 20px;
+			display: block;
+			color: var($--theme-core-code-color);
+		}
+	}
+
 	// Standardized indentation
 	@mixin indent-tier($tier) {
 		.indent-#{$tier} {

package/src/theme/variables.scss

@@ -19,6 +19,9 @@ $--theme-core-control-textbox-text-color: --theme-core-control-textbox-text-colo
 $--theme-core-control-textbox-placeholder-text-color: --theme-core-control-textbox-placeholder-text-color;
 $--theme-core-control-textbox-background-color: --theme-core-control-textbox-background-color;
 $--theme-core-control-textbox-border-color: --theme-core-control-textbox-border-color;
+$--theme-core-control-disabled-background-color: --theme-core-control-disabled-background-color;
+$--theme-core-control-disabled-text-color: --theme-core-control-disabled-text-color;
+$--theme-core-control-disabled-border-color: --theme-core-control-disabled-border-color;
 $--theme-core-tag-background-color: --theme-core-tag-background-color;
 $--theme-core-tag-text-color: --theme-core-tag-text-color;
 $--theme-core-punch-color: --theme-core-punch-color;
@@ -163,6 +166,9 @@ $theme-anemia: (
 	$--theme-core-control-textbox-background-color: #ffffff,
 	$--theme-core-control-textbox-border-color: #c6cbd1,
 	$--theme-core-control-textbox-placeholder-text-color: #757576,
+	$--theme-core-control-disabled-background-color: #9aafb5,
+	$--theme-core-control-disabled-text-color: #8a9a9e,
+	$--theme-core-control-disabled-border-color: #e8eaed,
 	$--theme-core-tag-background-color: #1ca2ab,
 	$--theme-core-tag-text-color: #ffffff,
 	$--theme-core-punch-color: #ff4f1f,
@@ -289,6 +295,9 @@ $theme-anemia-dark: (
 	$--theme-core-control-textbox-background-color: #6e6e75,
 	$--theme-core-control-textbox-border-color: #c6cbd1,
 	$--theme-core-control-textbox-placeholder-text-color: #999999,
+	$--theme-core-control-disabled-background-color: #c1cad688,
+	$--theme-core-control-disabled-text-color: #959699,
+	$--theme-core-control-disabled-border-color: #e8eaed,
 	$--theme-core-tag-background-color: #ffb3f7,
 	$--theme-core-tag-text-color: #2d2d2d,
 	$--theme-core-punch-color: #ff4f1f,