@brightspace-ui/core 2.7.1 → 2.9.0

package/components/button/button-icon.js

@@ -60,7 +60,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 					--d2l-button-icon-min-height: calc(2rem + 2px);
 					--d2l-button-icon-min-width: calc(2rem + 2px);
 					--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
-					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color, var(--d2l-color-ferrite));
+					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color, var(--d2l-color-tungsten));
 					display: inline-block;
 				}
 				:host([hidden]) {
@@ -75,7 +75,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				}
 				:host([theme="dark"]) {
 					--d2l-button-icon-background-color: transparent;
-					--d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* ferrite @70% @90% */
+					--d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
 					--d2l-button-icon-focus-box-shadow: 0 0 0 2px black, 0 0 0 4px var(--d2l-color-celestine-plus-1);
 					--d2l-icon-fill-color: var(--d2l-color-sylvite);
 					--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
@@ -112,7 +112,7 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				button:hover,
 				button:focus,
 				:host([active]) button {
-					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-ferrite));
+					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
 					background-color: var(--d2l-button-icon-background-color-hover);
 				}
 				button.focus-visible {

package/components/button/floating-buttons.js

@@ -61,7 +61,7 @@ class FloatingButtons extends RtlMixin(LitElement) {
 				background-color: #ffffff;
 				background-color: rgba(255, 255, 255, 0.88);
 				border-top-color: var(--d2l-color-mica);
-				box-shadow: 0 -2px 4px rgba(73, 76, 78, 0.2); /* ferrite */
+				box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
 			}
 
 			:host([_floating]:not([always-float])) .d2l-floating-buttons-container {

package/components/card/demo/card.html

@@ -31,7 +31,7 @@
 			}
 			.badge > img {
 				background-color: white;
-				border: 1px solid #494c4e;
+				border: 1px solid #202122; /* ferrite */
 				border-radius: 6px;
 				height: 70px;
 				object-fit: cover;

package/components/colors/colors.js

@@ -8,11 +8,11 @@ if (!document.head.querySelector('#d2l-colors')) {
 			--d2l-color-sylvite: #f1f5fb;
 			--d2l-color-gypsum: #e3e9f1;
 			--d2l-color-mica: #cdd5dc;
-			--d2l-color-corundum: #b5bdc2;
-			--d2l-color-chromite: #9ea5a9;
-			--d2l-color-galena: #868c8f;
-			--d2l-color-tungsten: #6e7376;
-			--d2l-color-ferrite: #494c4e;
+			--d2l-color-corundum: #b1b9be;
+			--d2l-color-chromite: #90989d;
+			--d2l-color-galena: #6e7477;
+			--d2l-color-tungsten: #494c4e;
+			--d2l-color-ferrite: #202122;
 
 			/* zircon */
 			--d2l-color-zircon-plus-2: #e0feff;

package/components/colors/colors.scss

@@ -3,11 +3,11 @@ $d2l-color-regolith: #f9fbff !default;
 $d2l-color-sylvite: #f1f5fb !default;
 $d2l-color-gypsum: #e3e9f1 !default;
 $d2l-color-mica: #cdd5dc !default;
-$d2l-color-corundum: #b5bdc2 !default;
-$d2l-color-chromite: #9ea5a9 !default;
-$d2l-color-galena: #868c8f !default;
-$d2l-color-tungsten: #6e7376 !default;
-$d2l-color-ferrite: #494c4e !default;
+$d2l-color-corundum: #b1b9be !default;
+$d2l-color-chromite: #90989d !default;
+$d2l-color-galena: #6e7477 !default;
+$d2l-color-tungsten: #494c4e !default;
+$d2l-color-ferrite: #202122 !default;
 
 // zircon
 $d2l-color-zircon-plus-2: #e0feff !default;

package/components/dropdown/dropdown-content-styles.js

@@ -24,8 +24,8 @@ export const dropdownContentStyles = css`
 	:host([theme="dark"]) {
 		--d2l-dropdown-above-animation-name: d2l-dropdown-above-animation-dark;
 		--d2l-dropdown-animation-name: d2l-dropdown-animation-dark;
-		--d2l-dropdown-background-color: #333536; /* ferrite @ 70% */
-		--d2l-dropdown-border-color: var(--d2l-color-ferrite);
+		--d2l-dropdown-background-color: #333536; /* tungsten @ 70% */
+		--d2l-dropdown-border-color: var(--d2l-color-tungsten);
 		--d2l-dropdown-foreground-color: var(--d2l-color-sylvite);
 		--d2l-dropdown-shadow-color: rgba(0, 0, 0, 1);
 		opacity: 0.9;
@@ -66,7 +66,7 @@ export const dropdownContentStyles = css`
 		background-color: var(--d2l-dropdown-background-color);
 		border: 1px solid var(--d2l-dropdown-border-color);
 		border-radius: 0.1rem;
-		box-shadow: -4px -4px 12px -5px rgba(73, 76, 78, 0.2); /* ferrite */
+		box-shadow: -4px -4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
 		height: 16px;
 		-webkit-transform: rotate(45deg);
 		transform: rotate(45deg);
@@ -80,7 +80,7 @@ export const dropdownContentStyles = css`
 	}
 
 	:host([opened-above]) .d2l-dropdown-content-pointer > div {
-		box-shadow: 4px 4px 12px -5px rgba(73, 76, 78, 0.2); /* ferrite */
+		box-shadow: 4px 4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
 	}
 
 	:host([no-pointer]) .d2l-dropdown-content-pointer {

package/components/filter/filter.js

@@ -406,8 +406,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 						key="${item.key}"
 						label="${item.text}"
 						selectable
-						?selected="${item.selected}"
-						slim>
+						?selected="${item.selected}">
 						<div class="d2l-filter-dimension-set-value-text d2l-body-compact">${item.text}</div>
 					</d2l-list-item>
 				`)}

package/components/html-block/html-block.js

@@ -96,7 +96,7 @@ export const htmlBlockContentStyles = css`
 		a:visited,
 		a:link,
 		a:active {
-			color: var(--d2l-color-ferrite, #494c4e);
+			color: var(--d2l-color-ferrite, #202122);
 		}
 	}
 	mjx-assistive-mml math {

package/components/icons/README.md

@@ -80,7 +80,7 @@ When contributing changes to icons, the SVG files should be properly formatted.
   - not contain negative values
 - there should be no `<title>` element
 - there should be no inline `<style>` -- all style for line fills should be applied directly to the SVG elements
-- color of SVG elements should be "ferrite" (`#494c4e`)
+- color of SVG elements should be "tungsten" (`#494c4e`)
 
 The best way to have most of these rules applied for you automatically is to put the icon through [SVGOMG](https://jakearchibald.github.io/svgomg/) with these options selected:
 * `Prettify code` - ON

package/components/icons/icon-styles.js

@@ -5,7 +5,7 @@ export const iconStyles = css`
 	:host {
 		-webkit-align-items: center;
 		align-items: center;
-		color: var(--d2l-color-ferrite);
+		color: var(--d2l-color-tungsten);
 		display: -ms-inline-flexbox;
 		display: -webkit-inline-flex;
 		display: inline-flex;

package/components/icons/images/tier2/check-box-unchecked.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
+  <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
 </svg>

package/components/icons/images/tier2/check-box.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
+  <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
   <path fill="#494c4e" d="M19.707,7.293a1,1,0,0,0-1.414,0L10,15.586,6.707,12.293a1,1,0,0,0-1.414,1.414l4,4a1,1,0,0,0,1.414,0l9-9A1,1,0,0,0,19.707,7.293Z"/>
 </svg>

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

@@ -33,7 +33,7 @@ export const selectStyles = css`
 		background-color: #ffffff;
 		border-color: var(--d2l-color-galena);
 		border-width: 1px;
-		box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, 0.2); /* corundum */
+		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
 		padding: 0.4rem 0.75rem;
 	}
 	.d2l-input-select,

package/components/inputs/input-styles.js

@@ -6,7 +6,7 @@ export const inputStyles = css`
 		background-color: var(--d2l-input-background-color, #ffffff);
 		border-radius: var(--d2l-input-border-radius, 0.3rem);
 		border-style: solid;
-		box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, 0.2); /* corundum */
+		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
 		box-sizing: border-box;
 		color: var(--d2l-color-ferrite);
 		display: inline-block;

package/components/inputs/sass/select.scss

@@ -27,7 +27,7 @@
 		background-color: #ffffff;
 		border-color: $d2l-color-galena;
 		border-width: 1px;
-		box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, .2); /* corundum */
+		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
 		padding: 0.4rem 0.75rem;
 	}
 	&,

package/components/inputs/sass/text.scss

@@ -10,7 +10,7 @@
 	border-radius: 0.3rem;
 	border-style: solid;
 	border-width: 1px;
-	box-shadow: inset 0 2px 0 0 rgba(181, 189, 194, .2), /* corundum */;
+	box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2), /* corundum */;
 	box-sizing: border-box;
 	color: $d2l-color-ferrite;
 	display: inline-block;

package/components/list/README.md

@@ -313,7 +313,6 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 |---|---|---|
 | `no-selection` | Boolean | Whether to render select-all and selection summary |
 | `no-sticky` | Boolean | Disables sticky positioning for the header |
-| `padding-type` | String | Header whitespace (`normal` (default), `slim`) |
 | `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
 <!-- docs: end hidden content -->
 
@@ -364,7 +363,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
-| `padding-type` | String | List item whitespace (`normal` (default), `slim`, `none`)|
+| `padding-type` | String | List item whitespace (`normal` (default), `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
@@ -436,10 +435,10 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
+| `padding-type` | String | List item whitespace (`normal` (default), `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
-| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
 
 ### Events
 

package/components/list/demo/list-item-layouts.html

@@ -17,11 +17,6 @@
 				height: 500px;
 				object-fit: cover;
 			}
-			d2l-list-item[slim] div {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
 		</style>
 	</head>
 	<body unresolved>
@@ -58,30 +53,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Slim</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-list>
-						<d2l-list-item slim>
-							<d2l-list-item-content>
-								<div>Identify categories of physical activities</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-						<d2l-list-item slim>
-							<d2l-list-item-content>
-								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-						<d2l-list-item slim>
-							<d2l-list-item-content>
-								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-					</d2l-list>
-				</template>
-			</d2l-demo-snippet>
-
 			<h2>Separators: between</h2>
 
 			<d2l-demo-snippet>
@@ -301,33 +272,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Selectable, Slim, Extended Separators</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-list extend-separators>
-						<d2l-list-item slim selectable key="1" label="Introductory Earth Sciences">
-							<d2l-list-item-content>
-								<div>Introductory Earth Sciences</div>
-								<div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-						<d2l-list-item slim selectable key="2" selected label="Engineering Materials for Energy Systems">
-							<d2l-list-item-content>
-								<div>Engineering Materials for Energy Systems</div>
-								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-						<d2l-list-item slim selectable key="3" label="Geomorphology and GIS">
-							<d2l-list-item-content>
-								<div>Geomorphology and GIS </div>
-								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
-							</d2l-list-item-content>
-						</d2l-list-item>
-					</d2l-list>
-				</template>
-			</d2l-demo-snippet>
-
 		</d2l-demo-page>
 
 	</body>

package/components/list/list-header.js

@@ -26,23 +26,11 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			 * @type {boolean}
 			 */
 			noSticky: { type: Boolean, attribute: 'no-sticky' },
-			/**
-			 * How much padding to render list items with
-			 * @type {'normal'|'slim'}
-			 */
-			paddingType: { type: String, attribute: 'padding-type' },
 			/**
 			 * Whether all pages can be selected
 			 * @type {boolean}
 			 */
 			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
-			/**
-			 * @ignore
-			 * Whether to render a header with reduced whitespace
-			 * TODO: Remove
-			 * @type {boolean}
-			 */
-			slim: { reflect: true, type: Boolean },
 			_scrolled: { type: Boolean, reflect: true }
 		};
 	}
@@ -81,12 +69,6 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				display: flex;
 				margin-bottom: 6px;
 				margin-top: 6px;
-				min-height: 58px;
-			}
-			:host([slim]) .d2l-list-header-container { /* TODO: Remove */
-				min-height: 36px;
-			}
-			:host([padding-type="slim"]) .d2l-list-header-container {
 				min-height: 36px;
 			}
 			.d2l-list-header-extend-separator {
@@ -126,9 +108,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		super();
 		this.noSelection = false;
 		this.noSticky = false;
-		this.paddingType = 'normal';
 		this.selectAllPagesAllowed = false;
-		this.slim = false;
 		this._extendSeparator = false;
 	}
 

package/components/list/list-item-content.js

@@ -25,17 +25,21 @@ class ListItemContent extends LitElement {
 			.d2l-list-item-content-text-secondary {
 				color: var(--d2l-list-item-content-text-secondary-color, var(--d2l-color-tungsten));
 				margin: 0;
-				margin-top: 0.15rem;
 				overflow: hidden;
 			}
 
 			.d2l-list-item-content-text-supporting-info {
 				color: var(--d2l-color-ferrite);
 				margin: 0;
-				margin-top: 0.15rem;
 				overflow: hidden;
 			}
 
+			.d2l-list-item-content-text-secondary ::slotted(*),
+			.d2l-list-item-content-text-supporting-info ::slotted(*) {
+				margin-top: 0.15rem;
+			}
+
+
 		`];
 	}
 

package/components/list/list-item-generic-layout.js

@@ -96,12 +96,12 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			}
 			::slotted([slot="outside-control"]) {
 				grid-column: outside-control-start / outside-control-end;
-				width: 2.1rem;
+				width: 2.2rem;
 			}
 
 			::slotted([slot="control"]) {
 				grid-column: control-start / control-end;
-				width: 2.1rem;
+				width: 2.2rem;
 			}
 
 			::slotted([slot="content"]) {

package/components/list/list-item-mixin.js

@@ -59,16 +59,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
 			/**
 			 * How much padding to render list items with
-			 * @type {'normal'|'slim'|'none'}
+			 * @type {'normal'|'none'}
 			 */
 			paddingType: { type: String, attribute: 'padding-type' },
-			/**
-			 * @ignore
-			 * Whether to render the list-item with reduced whitespace.
-			 * TODO: Remove in favor of padding-type="slim"
-			 * @type {boolean}
-			 */
-			slim: { type: Boolean },
 			_breakpoint: { type: Number },
 			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
@@ -118,9 +111,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			[slot="control-container"]::after {
 				border-top: 1px solid var(--d2l-color-mica);
 				content: "";
-				left: 4px;
 				position: absolute;
-				width: calc(100% - 8px);
+				width: 100%;
 			}
 			:host(:first-of-type) [slot="control-container"]::before {
 				top: 0;
@@ -162,9 +154,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				padding-left: 0.9rem;
 				padding-right: 0;
 			}
-			.d2l-list-item-content ::slotted(*) {
-				margin-top: 0.05rem;
-			}
+
 			:host([_hovering-primary-action]) .d2l-list-item-content,
 			:host([_focusing-primary-action]) .d2l-list-item-content {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
@@ -185,14 +175,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				padding-left: 0.55rem;
 				padding-right: 0;
 			}
-			:host([slim]) [slot="content"] { /* TODO, remove */
-				padding-bottom: 0.35rem;
-				padding-top: 0.4rem;
-			}
-			:host([padding-type="slim"]) [slot="content"] {
-				padding-bottom: 0.35rem;
-				padding-top: 0.4rem;
-			}
 			:host([padding-type="none"]) [slot="content"] {
 				padding-bottom: 0;
 				padding-top: 0;
@@ -203,7 +185,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				border-radius: 6px;
 				flex-grow: 0;
 				flex-shrink: 0;
-				margin: 0.15rem 0.9rem 0.15rem 0;
+				margin-right: 0.9rem;
 				max-height: 2.6rem;
 				max-width: 4.5rem;
 				overflow: hidden;
@@ -229,7 +211,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				gap: 0.3rem;
 				grid-auto-columns: 1fr;
 				grid-auto-flow: column;
-				margin: 0.15rem 0;
 			}
 
 			.d2l-list-item-content-extend-separators ::slotted([slot="actions"]),
@@ -276,21 +257,13 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				margin-right: 0;
 			}
 			d2l-selection-input {
-				margin: 1.15rem 0.9rem 1.15rem 0;
+				margin: 0.55rem 0.9rem 0.55rem 0;
 			}
 			.d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-left: 0.9rem;
 			}
-			:host([slim]) d2l-selection-input { /* TODO, remove */
-				margin-bottom: 0.55rem;
-				margin-top: 0.55rem;
-			}
-			:host([padding-type="slim"]) d2l-selection-input {
-				margin-bottom: 0.55rem;
-				margin-top: 0.55rem;
-			}
 			d2l-list-item-drag-handle {
-				margin: 0.8rem 0 0.8rem 0.4rem;
+				margin: 0.25rem 0 0.25rem 0.4rem;
 			}
 			:host([dir="rtl"]) d2l-selection-input {
 				margin-left: 0.9rem;
@@ -306,7 +279,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				margin: 0 -12px;
 			}
 			.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
+				border-left: none;
 				border-radius: 0;
+				border-right: none;
 			}
 			:host([draggable]) [slot="outside-control-container"],
 			.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
@@ -368,7 +343,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 	constructor() {
 		super();
 		this.breakpoints = defaultBreakpoints;
-		this.slim = false;
 		this.paddingType = 'normal';
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();

package/components/menu/menu.js

@@ -65,12 +65,12 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
 			}
 
 			:host([theme="dark"]) {
-				--d2l-menu-background-color: #333536; /* ferrite @ 70% */
+				--d2l-menu-background-color: #333536; /* tungsten @ 70% */
 				--d2l-menu-background-color-hover: #123559; /* celestine-1 @ 50% */
-				--d2l-menu-border-color: var(--d2l-color-ferrite);
+				--d2l-menu-border-color: var(--d2l-color-tungsten);
 				--d2l-menu-foreground-color: var(--d2l-color-sylvite);
 				--d2l-menu-foreground-color-hover: #ffffff;
-				--d2l-menu-separator-color: var(--d2l-color-tungsten);
+				--d2l-menu-separator-color: var(--d2l-color-galena);
 				--d2l-icon-fill-color: var(--d2l-color-mica);
 				background-color: var(--d2l-menu-background-color); /* so that opacity on disabled items works */
 			}

package/components/status-indicator/status-indicator.js

@@ -68,8 +68,8 @@ class StatusIndicator extends LitElement {
 			}
 			:host([state="none"]),
 			:host([state="null"]) {
-				border-color: var(--d2l-color-ferrite);
-				color: var(--d2l-color-ferrite);
+				border-color: var(--d2l-color-tungsten);
+				color: var(--d2l-color-tungsten);
 			}
 
 			:host([bold]) {
@@ -84,7 +84,7 @@ class StatusIndicator extends LitElement {
 			}
 			:host([bold][state="none"]),
 			:host([bold][state="null"]) {
-				background-color: var(--d2l-color-ferrite);
+				background-color: var(--d2l-color-tungsten);
 			}
 		`;
 	}

package/custom-elements.json

@@ -6510,7 +6510,7 @@
         {
           "name": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -6589,16 +6589,11 @@
           "type": "array",
           "default": "[842,636,580,0]"
         },
-        {
-          "name": "slim",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "paddingType",
           "attribute": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -6710,12 +6705,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "padding-type",
-          "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'",
-          "default": "\"normal\""
-        },
         {
           "name": "select-all-pages-allowed",
           "description": "Whether all pages can be selected",
@@ -6738,24 +6727,12 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "paddingType",
-          "attribute": "padding-type",
-          "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'",
-          "default": "\"normal\""
-        },
         {
           "name": "selectAllPagesAllowed",
           "attribute": "select-all-pages-allowed",
           "description": "Whether all pages can be selected",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "slim",
-          "type": "boolean",
-          "default": "false"
         }
       ],
       "slots": [
@@ -6784,7 +6761,7 @@
         {
           "name": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -6863,16 +6840,11 @@
           "type": "array",
           "default": "[842,636,580,0]"
         },
-        {
-          "name": "slim",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "paddingType",
           "attribute": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -7183,7 +7155,7 @@
         {
           "name": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {
@@ -7274,16 +7246,11 @@
           "type": "array",
           "default": "[842,636,580,0]"
         },
-        {
-          "name": "slim",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "paddingType",
           "attribute": "padding-type",
           "description": "How much padding to render list items with",
-          "type": "'normal'|'slim'|'none'",
+          "type": "'normal'|'none'",
           "default": "\"normal\""
         },
         {

package/generated/icons/tier2/check-box-unchecked.js

@@ -1,5 +1,5 @@
 // auto-generated
 export const val = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
+  <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
 </svg>
 `;

package/generated/icons/tier2/check-box.js

@@ -1,6 +1,6 @@
 // auto-generated
 export const val = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="#f9fbff" stroke-width="1" stroke="#868c8f" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
+  <rect fill="#f9fbff" stroke-width="1" stroke="#6e7477" x="0.5" y="0.5" width="23" height="23" rx="5.5"/>
   <path fill="#494c4e" d="M19.707,7.293a1,1,0,0,0-1.414,0L10,15.586,6.707,12.293a1,1,0,0,0-1.414,1.414l4,4a1,1,0,0,0,1.414,0l9-9A1,1,0,0,0,19.707,7.293Z"/>
 </svg>
 `;

package/package.json

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

package/templates/primary-secondary/primary-secondary.js

@@ -674,7 +674,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 
 			footer {
 				background-color: white;
-				box-shadow: 0 -2px 4px rgba(73, 76, 78, 0.2); /* ferrite */
+				box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
 				padding: 0.75rem 1rem;
 				z-index: 1; /* ensures the footer box-shadow is over main areas with background colours set */
 			}