@brightspace-ui/core 3.227.16 → 3.228.0

package/components/calendar/calendar.js

@@ -210,7 +210,7 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 			}
 
 			th {
-				border-bottom: 1px solid var(--d2l-color-gypsum);
+				border-bottom: 1px solid var(--d2l-theme-border-color-subtle);
 				padding-bottom: 0.6rem;
 				padding-top: 0.3rem;
 				text-align: center;
@@ -262,11 +262,11 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 
 			.d2l-calendar-date {
 				align-items: center;
-				background-color: white;
+				background-color: var(--d2l-theme-background-color-base);
 				border-radius: 0.3rem;
 				border-style: none;
 				box-sizing: content-box;
-				color: var(--d2l-color-ferrite);
+				color: var(--d2l-theme-text-color-static-standard);
 				cursor: pointer;
 				display: flex;
 				font-family: inherit;
@@ -304,7 +304,7 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 				}
 
 				.d2l-calendar-date:disabled {
-					opacity: 0.5;
+					opacity: var(--d2l-theme-opacity-disabled-control);
 				}
 			}
 
@@ -333,7 +333,7 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 			}
 
 			.d2l-calendar-animating .d2l-calendar-date:disabled {
-				opacity: 0.5;
+				opacity: var(--d2l-theme-opacity-disabled-control);
 			}
 
 			.d2l-calendar-next .d2l-heading-4,
@@ -358,7 +358,7 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 
 			.d2l-calendar-date:enabled:not(.d2l-calendar-date-selected):hover,
 			.d2l-calendar-date:enabled:not(.d2l-calendar-date-selected).d2l-calendar-date-hover {
-				background-color: var(--d2l-color-gypsum);
+				background-color: var(--d2l-theme-background-color-interactive-tertiary-hover);
 			}
 
 			td, .d2l-calendar-date:${unsafeCSS(getFocusPseudoClass())} {
@@ -366,12 +366,12 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 			}
 
 			td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date:not(:disabled) {
-				outline: 2px solid var(--d2l-color-celestine);
+				outline: 2px solid var(--d2l-theme-border-color-focus);
 			}
 
 			@keyframes initial-focus {
 				from {
-					outline: 0 solid var(--d2l-color-celestine);
+					outline: 0 solid var(--d2l-theme-border-color-focus);
 					padding: 0;
 				}
 			}
@@ -388,19 +388,19 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 			}
 
 			.d2l-calendar-date.d2l-calendar-date-selected {
-				background-color: var(--d2l-color-celestine-plus-2);
-				outline: 1px solid var(--d2l-color-celestine);
+				background-color: var(--d2l-theme-background-color-interactive-highlighted);
+				outline: 1px solid var(--d2l-theme-border-color-focus);
 			}
 
 			.d2l-calendar-date.d2l-calendar-date-selected:disabled {
-				background-color: white;
-				color: rgba(73, 76, 78, 0.5);
+				background-color: var(--d2l-theme-background-color-base);
+				color: var(--d2l-theme-text-color-static-disabled);
+				opacity: 1;
 				outline: none;
 			}
 
 			td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date.d2l-calendar-date-selected:disabled {
-				opacity: 1;
-				outline: 2px solid var(--d2l-color-celestine);
+				outline: 2px solid var(--d2l-theme-border-color-focus);
 			}
 
 			.d2l-calendar-date.d2l-calendar-date-today,
@@ -420,7 +420,7 @@ class Calendar extends LocalizeCoreElement(LitElement) {
 			}
 
 			.d2l-calendar-date-day-info::after {
-				background-color: var(--d2l-color-celestine);
+				background-color: var(--d2l-theme-brand-color-primary-default);
 				border-radius: 3px;
 				bottom: 4px;
 				content: "";

package/components/colors/colors.js

@@ -45,6 +45,7 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 		--d2l-theme-text-color-interactive-hover: var(--d2l-theme-brand-color-primary-hover);
 		--d2l-theme-text-color-static-faint: var(--d2l-color-galena);
 		--d2l-theme-text-color-static-inverted: #ffffff;
+		--d2l-theme-text-color-static-disabled: #20212280; /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */
 		--d2l-theme-text-color-static-standard: var(--d2l-color-ferrite);
 		--d2l-theme-text-color-static-subtle: var(--d2l-color-tungsten);
 
@@ -103,6 +104,7 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 		--d2l-theme-text-color-interactive-hover: var(--d2l-theme-brand-color-primary-hover);
 		--d2l-theme-text-color-static-faint: var(--d2l-color-galena);
 		--d2l-theme-text-color-static-inverted: #161718;
+		--d2l-theme-text-color-static-disabled: #cdd5dc80; /* --d2l-theme-text-color-static-standard at 50% opacity, remove once color-mix is widely supported */
 		--d2l-theme-text-color-static-standard: var(--d2l-color-mica);
 		--d2l-theme-text-color-static-subtle: var(--d2l-color-chromite);
 
@@ -219,6 +221,10 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 				${darkPalette}
 			}
 		}
+
+		@supports (color: color-mix(in srgb, black 50%, transparent)) {
+			--d2l-theme-text-color-static-disabled: color-mix(in srgb, var(--d2l-theme-text-color-static-standard) 50%, transparent);
+		}
 	`;
 	globalThis.document.head.appendChild(style);
 }

package/package.json

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