@cbpds/web-components/dist/collection/components/cbp-app/core.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/* Additional high level and utilities variables not represented by design tokens */
:root {
  color-scheme: light;
  --cbp-app-color-scheme: light;
  --cbp-color-body-text: var(--cbp-color-text-darkest);
  --cbp-color-body-background: var(--cbp-color-branding-cbp-light);
  --cbp-responsive-spacing-outer: var(--cbp-space-5x);
  --cbp-responsive-spacing-inner: var(--cbp-responsive-spacing-outer);
  --cbp-responsive-spacing-gap: var(--cbp-space-4x);
}

@media (min-width: 37.5em) {
  :root {
    --cbp-responsive-spacing-outer: var(--cbp-space-8x);
    --cbp-responsive-spacing-gap: var(--cbp-space-7x);
  }
}
@media (min-width: 90em) {
  :root {
    --cbp-responsive-spacing-outer: var(--cbp-space-11x);
  }
}
[data-cbp-theme=light] {
  color-scheme: light;
  --cbp-app-color-scheme: light;
}

[data-cbp-theme=dark] {
  color-scheme: dark;
  --cbp-app-color-scheme: dark;
  --cbp-color-body-text: var(--cbp-color-text-lightest);
  --cbp-color-body-background: var(--cbp-color-branding-cbp-dark);
}

html {
  font-size: 100%;
}

body {
  color: var(--cbp-color-body-text);
  background-color: var(--cbp-color-body-background);
  font: var(--cbp-font-size-body)/1rem var(--cbp-font-family-roboto);
}

* {
  scroll-margin-block: var(--cbp-space-15x);
}

h1, h2, h3, h4, h5, h6 {
  line-height: normal;
}

p,
blockquote {
  margin-bottom: var(--cbp-space-4x);
}

p {
  line-height: 1.25rem;
}

mark,
::highlight {
  color: var(--cbp-color-text-darkest);
  background-color: var(--cbp-color-highlight);
}

hr {
  border: none;
  height: 1px;
  background-color: var(--cbp-color-body-text);
}

a[href],
button {
  cursor: pointer;
}

[aria-disabled=true],
:disabled,
input:read-only:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color]),
textarea:read-only {
  cursor: not-allowed;
}

/* Ensure that `hidden` is not overridden by other selectors setting display, such as flex or grid */
[hidden] {
  display: none !important;
}

/*
@media (prefers-color-scheme: dark) {
  :root {
    --cbp-app-color-scheme: dark;
    --cbp-color-body-text: var(--cbp-color-text-lightest);
    --cbp-color-body-background: var(--cbp-color-branding-cbp-dark);
  }
}
*/