@brightspace-ui/core 3.191.1 → 3.192.1

package/components/inputs/input-radio-styles.js

@@ -83,6 +83,7 @@ export const radioStyles = css`
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio:focus,
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:hover,
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:focus {
+		background-blend-mode: lighten;
 		background-color: color-mix(in srgb, var(--d2l-color-regolith) 50%, transparent); /* mock background opacity */
 		opacity: 1;
 	}

package/components/typography/styles.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { css, unsafeCSS } from 'lit';
 import { _isValidCssSelector } from '../../helpers/internal/css.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { svgToCSS } from '../../helpers/svg-to-css.js';
 
 /**
@@ -160,12 +161,20 @@ export const _generateBodySmallStyles = (selector, includeSkeleton = true) => {
 
 export const bodySmallStyles = _generateBodySmallStyles('.d2l-body-small', true);
 
+const getHeadingFocusStyles = (selector) => {
+	return getFocusRingStyles(
+		selector,
+		{ extraStyles: css`border-radius: 0.3rem;` }
+	);
+};
+
 /**
  * A private helper method that should not be used by general consumers
  */
 export const _generateHeading1Styles = (selector) => {
 	if (!_isValidCssSelector(selector)) return;
 
+	const focusStyles = getHeadingFocusStyles(selector);
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -174,6 +183,7 @@ export const _generateHeading1Styles = (selector) => {
 			line-height: 2.4rem;
 			margin: 1.5rem 0 1.5rem 0;
 		}
+		${focusStyles}
 		@media (max-width: 615px) {
 			${selector} {
 				font-size: 1.5rem;
@@ -210,6 +220,7 @@ export const heading1Styles = css`
 export const _generateHeading2Styles = (selector) => {
 	if (!_isValidCssSelector(selector)) return;
 
+	const focusStyles = getHeadingFocusStyles(selector);
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -218,6 +229,7 @@ export const _generateHeading2Styles = (selector) => {
 			line-height: 1.8rem;
 			margin: 1.5rem 0 1.5rem 0;
 		}
+		${focusStyles}
 		@media (max-width: 615px) {
 			${selector} {
 				font-size: 1rem;
@@ -255,6 +267,7 @@ export const heading2Styles = css`
 export const _generateHeading3Styles = (selector) => {
 	if (!_isValidCssSelector(selector)) return;
 
+	const focusStyles = getHeadingFocusStyles(selector);
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -263,6 +276,7 @@ export const _generateHeading3Styles = (selector) => {
 			line-height: 1.5rem;
 			margin: 1.5rem 0 1.5rem 0;
 		}
+		${focusStyles}
 		@media (max-width: 615px) {
 			${selector} {
 				font-size: 0.8rem;
@@ -299,6 +313,7 @@ export const heading3Styles = css`
 export const _generateHeading4Styles = (selector) => {
 	if (!_isValidCssSelector(selector)) return;
 
+	const focusStyles = getHeadingFocusStyles(selector);
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -307,6 +322,7 @@ export const _generateHeading4Styles = (selector) => {
 			line-height: 1.2rem;
 			margin: 1.5rem 0 1.5rem 0;
 		}
+		${focusStyles}
 	`;
 };
 export const heading4Styles = css`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.191.1",
+  "version": "3.192.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",