@ou-imdt/css/src/utility/imd-palette.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
  /* Semantic colours */
  --neutral: #474045;
  --information: #003E8C;
  --success: #006539;
  --warning: #9B3900;
  --danger: #9B0509;

  /* calc bgs and text colors */
  --neutral-light: color-mix(in srgb, var(--neutral) 20%, var(--mix-color, white));
  --neutral-dark: var(--neutral);
  --information-light: color-mix(in srgb, var(--information) 20%, var(--mix-color, white));
  --information-dark: var(--information);
  --success-light: color-mix(in srgb, var(--success) 20%, var(--mix-color, white));
  --success-dark: color-mix(in srgb, var(--success) 75%, #000000);
  --warning-light: color-mix(in srgb, var(--warning) 20%, var(--mix-color, white));
  --warning-dark: var(--warning);
  --danger-light: color-mix(in srgb, var(--danger) 20%, var(--mix-color, white));
  --danger-dark: var(--danger);


  /* Accent colours */
  --accent1: #AF216B;
  --accent2: #21A0B0;
  --accent3: #B09F21;
  --accent4: #679700;
  --accent5: #67138C;
  --accent6: #BE5400;

  --accent1-light: color-mix(in srgb, var(--accent1) 20%, var(--mix-color, white));
  /* accent2-dark is not used in accent1 as contrast with base color is adequent */
  --accent1-dark: color-mix(in srgb, var(--accent1) 70%, #000000);
  --accent2-light: color-mix(in srgb, var(--accent2) 20%, var(--mix-color, white));
  --accent2-dark: color-mix(in srgb, var(--accent2) 70%, #000000);
  --accent3-light: color-mix(in srgb, var(--accent3) 20%, var(--mix-color, white));
  --accent3-dark: color-mix(in srgb, var(--accent3) 65%, #000000);
  --accent4-light: color-mix(in srgb, var(--accent4) 20%, var(--mix-color, white));
  --accent4-dark: color-mix(in srgb, var(--accent4) 75%, #000000);
  --accent5-light: color-mix(in srgb, var(--accent5) 20%, var(--mix-color, white));
  /* accent5-dark is not used in accent5 as contrast with base color is adequent */
  --accent5-dark: color-mix(in srgb, var(--accent5) 70%, #000000);
  --accent6-light: color-mix(in srgb, var(--accent6) 20%, var(--mix-color, white));
  --accent6-dark: color-mix(in srgb, var(--accent6) 75%, #000000);

}

/* Palette classes */
.neutral,
.information,
.success,
.warning,
.danger,
.input,
.accent1,
.accent2,
.accent3,
.accent4,
.accent5,
.accent6 {
  --color-dark: var(--color);
  --color-light: color-mix(in srgb, var(--color) 20%, var(--mix-color));

  &:not(.border,
    .fg,
    .bg,
    .border-color,
    .bg-color,
    .stroke,
    .fill,
    .use-true-color,
    button,
    progress,
    details) {

    background-color: var(--color-light);
    color: var(--color-dark);
    accent-color: var(--color);
  }

  &:where(progress) {
    accent-color: var(--color);
  }

  &:where(button) {
    color: var(--color-dark);
    border-color: var(--color-dark);
    accent-color: var(--color);

    &:disabled {
      --btn-disabled-fg: var(--color-dark);
      border-color: var(--color-dark);
      filter: opacity(0.5);
    }

    &:hover:not(:disabled) {
      border-color: var(--core2);
      background-color: var(--color-dark);
    }
  }

  &:where(details) {
    border-color: var(--color-dark);
    background-color: initial;

    &[open]>summary,
    >summary {
      color: var(--color-dark);
      background-color: var(--color-light);
      accent-color: var(--color);
    }
  }

  &.fg {
    color: var(--color-dark);
  }

  &.stroke svg *,
  /* ^ target a whole svg from parent element*/
  &.stroke {
    stroke: var(--color-dark);
  }

  &.fill svg *,
  /* ^ target a whole svg from parent element*/
  &.fill {
    fill: var(--color-dark);
  }

  &.bg {
    background-color: var(--color-light);
  }

  &.bg-color:not(details) {
    background-color: var(--color-dark);
    color: var(--mix-color, white);
  }

  &details.bg-color summary {
    background-color: var(--color-dark);
    color: var(--mix-color, white);
  }


  &.border {
    border: var(--border);
    border-color: var(--color-light)
  }

  &.border-color {
    border: var(--border);
    border-color: var(--color)
  }

  &.use-true,
  &.use-true-color {
    --color-dark: var(--color);
    --color-light: var(--color);
  }
}



/* Semantic  Classes */
.neutral {
  --color: var(--neutral);
  --color-dark: var(--neutral-dark);
  --color-light: var(--neutral-light);
}

.information {
  --color: var(--information);
  --color-dark: var(--information-dark);
  --color-light: var(--information-light);
}

.success {
  --color: var(--success);
  --color-dark: var(--success-dark);
  --color-light: var(--success-light);
}

.warning {
  --color: var(--warning);
  --color-dark: var(--warning-dark);
  --color-light: var(--warning-light);
}

.danger {
  --color: var(--danger);
  --color-dark: var(--danger-dark);
  --color-light: var(--danger-light);
}


/* sem-icon has been removed while font awesome is being decoupled from the project */
/* Class to auto prefix FA items to semantic classe e.g. feedback danger will style danger and also add the feedback icon danger */
/* .sem-icon {


  &.information {
    --content-icon: '\f05a' / "information";
  }

  &.success {
    --content-icon: "\f058" / "success";
  }

  &.warning {
    --content-icon: "\f06a" / "warning";
  }

  &.danger {
    --content-icon: "\f071" / "danger";
  }

  &:not(:empty)::before {
    margin-inline-end: 1ch;
    font-weight: 900;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 6 Free';
    content: var(--content-icon)
  }
} */


/* Accent Colours */

.accent1 {
  --color: var(--accent1);
  --color-dark: var(--accent1);
  --color-light: var(--accent1-light);
}

.accent2 {
  --color: var(--accent2);
  --color-dark: var(--accent2-dark);
  --color-light: var(--accent2-light);
}

.accent3 {
  --color: var(--accent3);
  --color-dark: var(--accent3-dark);
  --color-light: var(--accent3-light);
}

.accent4 {
  --color: var(--accent4);
  --color-dark: var(--accent4-dark);
  --color-light: var(--accent4-light);
}

.accent5 {
  --color: var(--accent5);
  --color-dark: var(--accent5);
  --color-light: var(--accent5-light);
}

.accent6 {
  --color: var(--accent6);
  --color-dark: var(--accent6-dark);
  --color-light: var(--accent6-light);
}