@moodlehq/design-system 3.2.0 → 4.1.0

package/dist/index.css

@@ -103,24 +103,219 @@
   inline-size: 100%;
 }
 
+.mds-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: var(--mds-spacing-xxs) var(--mds-spacing-xs);
+  border-radius: var(--mds-border-radius-sm);
+
+  font-family: var(--mds-font-family-base);
+  font-weight: var(--mds-font-weight-medium);
+  font-size: var(--mds-font-size-paragraph-small);
+  line-height: var(--mds-line-height-paragraph-xs);
+  letter-spacing: var(--mds-letter-spacing-default);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+.mds-badge--has-icon {
+  gap: var(--mds-spacing-xxs);
+}
+
+/* Normalize icon dimensions to match the badge icon token across <i> and <svg> usage. */
+
+.mds-badge > i,
+.mds-badge > svg {
+  width: var(--mds-icons-xxs);
+  height: var(--mds-icons-xxs);
+  font-size: var(--mds-icons-xxs);
+  flex-shrink: 0;
+}
+
+/* Pill shape overrides the default rounded corners */
+
+.mds-badge--pill {
+  border-radius: var(--mds-border-radius-pill);
+}
+
+/*
+ * Per-variant colour rules.
+ * Default contrast: solid coloured background with inverse text.
+ * Subtle contrast (.mds-badge--subtle): light tinted background, dark feedback text, visible border.
+ */
+
+.mds-badge--subtle {
+  border: var(--mds-stroke-weight-sm) solid transparent;
+}
+
+/* --- Primary --- */
+
+.mds-badge--primary {
+  background-color: var(--mds-bg-feedback-primary-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-badge--primary.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-primary-subtle);
+  color: var(--mds-text-feedback-primary);
+  border-color: var(--mds-border-feedback-primary);
+}
+
+/* --- Secondary --- */
+
+.mds-badge--secondary {
+  background-color: var(--mds-bg-feedback-secondary-default);
+  color: var(--mds-text-feedback-secondary);
+}
+
+.mds-badge--secondary.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-secondary-subtle);
+  color: var(--mds-text-feedback-secondary);
+  border-color: var(--mds-border-feedback-secondary);
+}
+
+/* --- Success --- */
+
+.mds-badge--success {
+  background-color: var(--mds-bg-feedback-success-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-badge--success.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-success-subtle);
+  color: var(--mds-text-feedback-success);
+  border-color: var(--mds-border-feedback-success);
+}
+
+/* --- Danger --- */
+
+.mds-badge--danger {
+  background-color: var(--mds-bg-feedback-danger-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-badge--danger.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-danger-subtle);
+  color: var(--mds-text-feedback-danger);
+  border-color: var(--mds-border-feedback-danger);
+}
+
+/* --- Warning --- */
+
+.mds-badge--warning {
+  background-color: var(--mds-bg-feedback-warning-default);
+  color: var(--mds-text-feedback-warning);
+}
+
+.mds-badge--warning.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-warning-subtle);
+  color: var(--mds-text-feedback-warning);
+  border-color: var(--mds-border-feedback-warning);
+}
+
+/* --- Info --- */
+
+.mds-badge--info {
+  background-color: var(--mds-bg-feedback-info-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-badge--info.mds-badge--subtle {
+  background-color: var(--mds-bg-feedback-info-subtle);
+  color: var(--mds-text-feedback-info);
+  border-color: var(--mds-border-feedback-info);
+}
+
 .mds-btn.btn {
   background-color: var(--mds-bg-interactive-primary-default);
-  border: var(--mds-stroke-weight-sm) solid var(--mds-border-translucent);
-  border-radius: var(--mds-border-radius-md);
+  border: none;
+  border-radius: var(--mds-border-radius-sm);
   padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
 
   color: var(--mds-text-inverse);
   font-family: var(--mds-font-family-base);
   font-weight: var(--mds-font-weight-regular);
   font-size: var(--mds-font-size-paragraph-default);
-  line-height: var(--mds-line-height-paragraph-small);
+  line-height: var(--mds-line-height-paragraph-xs);
   letter-spacing: var(--mds-letter-spacing-default);
 
-  /* gap provides consistent spacing between startIcon/endIcon and label text;
-     has no visual effect when the button contains only a single child (no icon) */
+  /* Keep icon/text spacing consistent with icon variants from the design matrix. */
   display: inline-flex;
   align-items: center;
-  gap: var(--mds-spacing-xxs);
+  gap: var(--mds-spacing-xs);
+}
+
+/* Icon-only sizing in Figma is not derived from text button size classes. */
+
+.mds-btn.btn.mds-btn--icon-only {
+  padding: var(--mds-spacing-xs);
+  border-radius: var(--mds-border-radius-xl);
+}
+
+.mds-btn.btn.mds-btn--icon-only i,
+.mds-btn.btn.mds-btn--icon-only svg {
+  inline-size: var(--mds-icons-xs);
+  block-size: var(--mds-icons-xs);
+  font-size: var(--mds-icons-xs);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.mds-btn.btn.mds-btn--icon-only.mds-btn--size-sm {
+  padding: var(--mds-spacing-xxs);
+}
+
+.mds-btn.btn.mds-btn--icon-only.mds-btn--size-sm i,
+.mds-btn.btn.mds-btn--icon-only.mds-btn--size-sm svg {
+  inline-size: var(--mds-icons-xxs);
+  block-size: var(--mds-icons-xxs);
+  font-size: var(--mds-icons-xxs);
+}
+
+.mds-btn.btn.mds-btn--icon-only.mds-btn--size-lg {
+  padding: var(--mds-spacing-xs);
+  border-radius: var(--mds-border-radius-sm);
+}
+
+.mds-btn.btn.mds-btn--size-sm i,
+.mds-btn.btn.mds-btn--size-sm svg {
+  inline-size: var(--mds-icons-xxs);
+  block-size: var(--mds-icons-xxs);
+  font-size: var(--mds-icons-xxs);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.mds-btn.btn.mds-btn--size-md i,
+.mds-btn.btn.mds-btn--size-md svg,
+.mds-btn.btn.mds-btn--size-lg i,
+.mds-btn.btn.mds-btn--size-lg svg {
+  inline-size: var(--mds-icons-xs);
+  block-size: var(--mds-icons-xs);
+  font-size: var(--mds-icons-xs);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.mds-btn.btn:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.mds-btn.btn:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+.mds-btn.btn:active:focus-visible {
+  box-shadow: none;
+}
+
+.mds-btn.btn.btn-danger:focus-visible,
+.mds-btn.btn.btn-outline-danger:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-danger);
 }
 
 .mds-btn.btn:hover {
@@ -129,7 +324,7 @@
 
 .mds-btn.btn:active {
   background-color: var(--mds-bg-interactive-primary-active);
-  border: var(--mds-stroke-weight-sm) solid var(--mds-border-translucent);
+  box-shadow: none;
 }
 
 .mds-btn.btn:disabled {
@@ -142,7 +337,7 @@
 
 .mds-btn.btn.btn-secondary {
   background-color: var(--mds-bg-interactive-secondary-default);
-  color: var(--mds-text-default);
+  color: var(--mds-text-subtle);
 }
 
 .mds-btn.btn.btn-secondary:hover {
@@ -155,6 +350,7 @@
 
 .mds-btn.btn.btn-secondary:disabled {
   background-color: var(--mds-bg-interactive-secondary-disabled);
+  color: var(--mds-text-muted);
 }
 
 /**
@@ -177,104 +373,374 @@
   background-color: var(--mds-bg-interactive-danger-disabled);
 }
 
+/**
+  * Ghost variants
+  */
+
+.mds-btn.btn.btn-ghost {
+  background-color: transparent;
+  color: var(--mds-text-subtle);
+}
+
+.mds-btn.btn.btn-ghost:hover {
+  background-color: var(--mds-bg-interactive-secondary-hover);
+  color: var(--mds-text-subtle);
+}
+
+.mds-btn.btn.btn-ghost:active {
+  background-color: var(--mds-bg-interactive-secondary-active);
+  color: var(--mds-text-subtle);
+}
+
+.mds-btn.btn.btn-ghost:disabled {
+  background-color: transparent;
+  color: var(--mds-text-muted);
+}
+
 /**
   * Outline Primary variants
   */
 
-.mds-btn.btn-outline-primary {
+.mds-btn.btn:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
   background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-primary-default);
+  border: var(--mds-stroke-weight-sm) solid transparent;
+}
+
+.mds-btn.btn.btn-outline-primary {
+  border-color: var(--mds-border-interactive-primary-default);
   color: var(--mds-text-link-primary-default);
 }
 
 .mds-btn.btn-outline-primary:hover {
+  border-color: var(--mds-bg-interactive-primary-hover);
   background-color: var(--mds-bg-interactive-primary-hover);
   color: var(--mds-text-inverse);
 }
 
 .mds-btn.btn-outline-primary:active {
+  border-color: var(--mds-bg-interactive-primary-active);
   background-color: var(--mds-bg-interactive-primary-active);
   color: var(--mds-text-inverse);
 }
 
 .mds-btn.btn.btn-outline-primary:disabled {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-primary-disabled);
-  color: var(--mds-color-blue-300);
+  border-color: var(--mds-border-interactive-primary-disabled);
+  color: var(--mds-text-link-primary-disabled);
 }
 
 /**
   * Outline Secondary variants
   */
 
-.mds-btn.btn-outline-secondary {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-secondary-default);
-  color: var(--mds-text-muted);
+.mds-btn.btn.btn-outline-secondary {
+  border-color: var(--mds-border-interactive-secondary-default);
+  color: var(--mds-text-subtle);
 }
 
 .mds-btn.btn-outline-secondary:hover {
+  border-color: var(--mds-border-interactive-secondary-hover);
   background-color: var(--mds-border-interactive-secondary-hover);
   color: var(--mds-text-inverse);
 }
 
 .mds-btn.btn-outline-secondary:active {
+  border-color: var(--mds-border-interactive-secondary-active);
   background-color: var(--mds-border-interactive-secondary-active);
   color: var(--mds-text-inverse);
 }
 
 .mds-btn.btn.btn-outline-secondary:disabled {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-secondary-disabled);
-  color: var(--mds-color-gray-500);
+  border-color: var(--mds-border-interactive-secondary-disabled);
+  color: var(--mds-text-muted);
 }
 
 /**
   * Outline Danger variants
   */
 
-.mds-btn.btn-outline-danger {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-danger-default);
+.mds-btn.btn.btn-outline-danger {
+  border-color: var(--mds-border-interactive-danger-default);
   color: var(--mds-text-danger);
 }
 
 .mds-btn.btn-outline-danger:hover {
-  background-color: var(--mds-bg-interactive-danger-default);
+  border-color: var(--mds-bg-interactive-danger-hover);
+  background-color: var(--mds-bg-interactive-danger-hover);
   color: var(--mds-text-inverse);
 }
 
 .mds-btn.btn-outline-danger:active {
-  background-color: var(--mds-bg-interactive-danger-hover);
+  border-color: var(--mds-bg-interactive-danger-active);
+  background-color: var(--mds-bg-interactive-danger-active);
   color: var(--mds-text-inverse);
 }
 
 .mds-btn.btn.btn-outline-danger:disabled {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-danger-disabled);
-  color: var(--mds-color-red-300);
+  border-color: var(--mds-border-interactive-danger-disabled);
+  color: var(--mds-text-danger-disabled);
 }
 
 /**
   * Size variants
   */
 
-.mds-btn.btn-sm {
+.mds-btn.mds-btn--size-sm {
   padding: var(--mds-spacing-xxs) var(--mds-spacing-xs);
+  border-radius: var(--mds-border-radius-xs);
+  font-weight: var(--mds-font-weight-medium);
+  font-size: var(--mds-font-size-paragraph-small);
+}
+
+.mds-btn.mds-btn--size-md {
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
+  font-size: var(--mds-font-size-paragraph-default);
+}
+
+.mds-btn.mds-btn--size-lg {
+  padding: var(--mds-spacing-sm) var(--mds-spacing-md);
+  font-size: var(--mds-font-size-paragraph-default);
+}
+
+/* Keep outer geometry aligned with filled variants when outline border is present. */
+
+.mds-btn.mds-btn--size-sm:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xxs) - var(--mds-stroke-weight-sm))
+    calc(var(--mds-spacing-xs) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--size-md:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xs) - var(--mds-stroke-weight-sm))
+    calc(var(--mds-spacing-sm) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--size-lg:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-sm) - var(--mds-stroke-weight-sm))
+    calc(var(--mds-spacing-md) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--icon-only:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xs) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--icon-only.mds-btn--size-sm:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xxs) - var(--mds-stroke-weight-sm));
+}
+
+.mds-btn.mds-btn--icon-only.mds-btn--size-lg:is(
+    .btn-outline-primary,
+    .btn-outline-secondary,
+    .btn-outline-danger
+  ) {
+  padding: calc(var(--mds-spacing-xs) - var(--mds-stroke-weight-sm));
+}
+
+.mds-checkbox {
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  align-self: start;
+  min-height: var(--mds-icons-lg);
+  padding: var(--mds-spacing-none);
+  column-gap: var(--mds-spacing-xs);
+  row-gap: var(--mds-spacing-xxs);
+
+  font-family: var(--mds-font-family-base);
+  font-size: var(--mds-font-size-paragraph-default);
+  font-weight: var(--mds-font-weight-regular);
+  line-height: var(--mds-line-height-paragraph-xs);
+  letter-spacing: var(--mds-letter-spacing-default);
+}
+
+.mds-checkbox-input {
+  border-radius: var(--mds-border-radius-xs);
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-secondary-default);
+}
+
+.mds-checkbox .mds-checkbox-input {
+  /* Bootstrap applies float/offset styles to .form-check-input for indented label layouts.
+     Match selector specificity and reset float/margins for the grid-based sibling layout. */
+  margin: 0;
+  float: none;
+  background-color: var(--mds-bg-surface-default);
+}
+
+.mds-checkbox-input:checked {
+  background-color: var(--mds-bg-interactive-primary-default);
+  border-color: transparent;
+}
+
+.mds-checkbox-input:indeterminate {
+  background-color: var(--mds-bg-interactive-primary-default);
+  border-color: transparent;
+}
+
+.mds-checkbox-input:disabled {
+  border-color: var(--mds-border-interactive-secondary-disabled);
+}
+
+.mds-checkbox-input:disabled:checked {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-checkbox-input:disabled:indeterminate {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-checkbox-input.is-invalid {
+  border-color: var(--mds-border-interactive-danger-default);
+}
+
+.mds-checkbox-input.is-invalid:checked {
+  background-color: var(--mds-bg-interactive-danger-default);
+  border-color: transparent;
+}
+
+.mds-checkbox-input.is-invalid:indeterminate {
+  background-color: var(--mds-bg-interactive-danger-default);
+  border-color: transparent;
+}
+
+.mds-checkbox-input.is-invalid:disabled {
+  background-color: var(--mds-bg-interactive-secondary-disabled);
+  border-color: var(--mds-border-interactive-secondary-disabled);
+}
+
+.mds-checkbox-input.is-invalid:disabled:checked {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-checkbox-input.is-invalid:disabled:indeterminate {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-checkbox-input:focus,
+.mds-checkbox-input.is-invalid:focus {
+  /* Reset Bootstrap's :focus box-shadow; our ring is applied on :focus-visible only */
+  box-shadow: none;
+  outline: none;
+}
+
+/* Bootstrap also sets border-color on :focus. Restore the correct border for each state,
+   excluding checked/indeterminate which keep their transparent border. */
+
+.mds-checkbox-input:focus:not(:checked):not(:indeterminate) {
+  border-color: var(--mds-border-interactive-secondary-default);
+}
+
+.mds-checkbox-input.is-invalid:focus:not(:checked):not(:indeterminate) {
+  border-color: var(--mds-border-interactive-danger-default);
+}
+
+.mds-checkbox-input:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+.mds-checkbox-input.is-invalid:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-border-feedback-danger);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+.mds-checkbox .form-check-label,
+.mds-checkbox .mds-checkbox-label {
+  display: flex;
+  align-items: center;
+  /* In the radio-style sibling layout, the checkbox should align to the label text line,
+     not to an expanded label hit area. Keep the label box tight and let htmlFor preserve click behavior. */
+  padding: 0;
+  color: var(--mds-text-default);
+}
+
+.mds-checkbox .mds-checkbox-label-text {
+  min-width: 0;
+}
+
+.mds-checkbox .mds-checkbox-input:disabled ~ .form-check-label,
+.mds-checkbox .mds-checkbox-input:disabled ~ .mds-checkbox-label {
+  color: var(--mds-text-muted);
+}
+
+.mds-checkbox .mds-checkbox-input.is-invalid ~ .form-check-label,
+.mds-checkbox .mds-checkbox-input.is-invalid ~ .mds-checkbox-label {
+  color: var(--mds-text-danger);
+}
+
+/* Disabled takes precedence over invalid — restore muted colour when both are active. */
+
+.mds-checkbox .mds-checkbox-input.is-invalid:disabled ~ .form-check-label,
+.mds-checkbox .mds-checkbox-input.is-invalid:disabled ~ .mds-checkbox-label {
+  color: var(--mds-text-muted);
+}
+
+.mds-checkbox-required {
+  color: var(--mds-text-danger);
+  margin-inline-start: var(--mds-spacing-xxs);
+}
+
+.mds-checkbox .invalid-feedback,
+.mds-checkbox .mds-checkbox-feedback {
+  grid-column: 2;
   font-size: var(--mds-font-size-paragraph-small);
-  line-height: var(--mds-line-height-paragraph-small);
+  font-weight: var(--mds-font-weight-medium);
+  line-height: var(--mds-line-height-paragraph-xs);
 }
 
-.mds-btn.btn-lg {
-  padding: var(--mds-spacing-xs) var(--mds-spacing-md);
-  font-size: var(--mds-font-size-paragraph-lead);
-  line-height: var(--mds-line-height-paragraph-default);
+.mds-checkbox .invalid-feedback,
+.mds-checkbox .mds-checkbox-feedback.mds-checkbox-supporting-text {
+  margin: 0;
+}
+
+.mds-checkbox .invalid-feedback {
+  color: var(--mds-text-danger);
+}
+
+/* In the default state supporting text is subtle. In the invalid state use danger to match
+   the label colour \u2014 matching Figma where the label container sets the colour for both. */
+
+.mds-checkbox .mds-checkbox-feedback.mds-checkbox-supporting-text {
+  color: var(--mds-text-subtle);
+}
+
+.mds-checkbox
+  .mds-checkbox-input.is-invalid
+  ~ .mds-checkbox-feedback.mds-checkbox-supporting-text {
+  color: var(--mds-text-danger);
+}
+
+.mds-checkbox .mds-checkbox-input:disabled ~ .invalid-feedback,
+.mds-checkbox .mds-checkbox-input:disabled ~ .mds-checkbox-feedback {
+  opacity: 0.5;
 }
 
 .mds-close-button.btn-close {
@@ -353,7 +819,7 @@
   font-family: var(--mds-font-family-base, Arial, sans-serif);
   font-size: var(--mds-font-size-body, 1rem);
   font-weight: var(--mds-font-weight-regular, 400);
-  line-height: var(--mds-line-height-paragraph-small, 1.0875rem); /* 108.75% */
+  line-height: var(--mds-line-height-paragraph-xs, 0.75rem);
   letter-spacing: var(--mds-letter-spacing, 0);
 }
 
@@ -448,7 +914,6 @@
 .mds-form-check .form-check-label,
 .mds-form-check .mds-form-check-label {
   color: var(--mds-text-default, #1d2125);
-  cursor: pointer;
 }
 
 /* Use sibling selector so the label reflects the input's disabled/invalid state */
@@ -456,8 +921,6 @@
 .mds-form-check .mds-form-check-input:disabled ~ .form-check-label,
 .mds-form-check .mds-form-check-input:disabled ~ .mds-form-check-label {
   color: var(--mds-text-muted);
-  /* Disabled inputs are not interactive — suppress the pointer cursor on the label */
-  cursor: default;
 }
 
 .mds-form-check .mds-form-check-input.is-invalid ~ .form-check-label,
@@ -474,6 +937,7 @@
   grid-column: 2;
   font-size: var(--mds-font-size-paragraph-small, 0.875rem);
   font-weight: var(--mds-font-weight-medium, 500);
+  line-height: var(--mds-line-height-paragraph-xs, 0.75rem);
   color: var(--mds-text-danger);
 }
 
@@ -547,13 +1011,13 @@
   --mds-activity-icon-resource-icon: var(--mds-color-cyan-500);
   --mds-bg-feedback-danger-light: var(--mds-color-red-50);
   --mds-bg-feedback-danger-subtle: var(--mds-color-red-100);
-  --mds-bg-feedback-info-default: var(--mds-color-cyan-500);
+  --mds-bg-feedback-info-default: var(--mds-color-cyan-600);
   --mds-bg-feedback-info-light: var(--mds-color-cyan-50);
   --mds-bg-feedback-info-subtle: var(--mds-color-cyan-100);
   --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
   --mds-bg-feedback-primary-light: var(--mds-color-blue-50);
   --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
-  --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
+  --mds-bg-feedback-secondary-default: var(--mds-color-gray-300);
   --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
   --mds-bg-feedback-success-default: var(--mds-color-green-500);
   --mds-bg-feedback-success-light: var(--mds-color-green-50);
@@ -571,9 +1035,9 @@
   --mds-bg-interactive-primary-default-light: var(--mds-color-blue-50);
   --mds-bg-interactive-primary-disabled: var(--mds-color-blue-200);
   --mds-bg-interactive-primary-hover: var(--mds-color-blue-600);
-  --mds-bg-interactive-secondary-default: var(--mds-color-gray-400);
+  --mds-bg-interactive-secondary-default: var(--mds-color-gray-300);
   --mds-bg-interactive-secondary-disabled: var(--mds-color-gray-200);
-  --mds-bg-interactive-secondary-hover: var(--mds-color-gray-300);
+  --mds-bg-interactive-secondary-hover: var(--mds-color-gray-400);
   --mds-bg-surface-default: var(--mds-color-gray-white);
   --mds-bg-surface-strong: var(--mds-color-gray-200);
   --mds-bg-surface-subtle: var(--mds-color-gray-100);
@@ -589,7 +1053,7 @@
   --mds-border-interactive-primary-active: var(--mds-color-blue-600);
   --mds-border-interactive-primary-disabled: var(--mds-color-blue-300);
   --mds-border-interactive-secondary-active: var(--mds-color-gray-700);
-  --mds-border-interactive-secondary-default: var(--mds-color-gray-600);
+  --mds-border-interactive-secondary-default: var(--mds-color-gray-500);
   --mds-border-interactive-secondary-disabled: var(--mds-color-gray-500);
   --mds-border-interactive-secondary-hover: var(--mds-color-gray-600);
   --mds-border-subtle: var(--mds-color-gray-200);
@@ -751,7 +1215,7 @@
   --mds-scale-1700: 6rem;
   --mds-scale-1800: 50rem;
   --mds-typography-font-family-monospace: Menlo;
-  --mds-typography-font-family-sans-serif: Roboto;
+  --mds-typography-font-family-sans-serif: Noto sans;
   --mds-typography-font-size-0: 0rem;
   --mds-typography-font-size-1: 1rem;
   --mds-typography-font-size-2: 2rem;