@coderundebug/ui-web/theme/system.css

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
/* Theme: system */
:root, :host {
  /* Allow light and dark modes */
  color-scheme: light dark;

  /* Border */
  --ui-border-radius-small: 3px;
  --ui-border-radius-normal: 4px;
  --ui-border-radius-large: 6px;
  --ui-border-width: 1px;
  --ui-border-style: solid;
  --ui-border-box-shadow: none;

  /* Font */
  --ui-font-size-small: 12px;
  --ui-font-size-normal: 16px;
  --ui-font-size-large: 24px;
  --ui-font-weight-normal: normal;
  --ui-font-weight-bold: 600;

  /* Animation duration */
  --ui-animation-duration-slow: 400ms;
  --ui-animation-duration-default: 200ms;
  --ui-animation-duration-quick: 100ms;
}

/* System Light Mode */
@media (prefers-color-scheme: light) {
  :root, :host {
    /* Colors */
    --ui-background: hsl(0 0% 97% / 1);
    --ui-midground: hsl(0 0% 90% / 1);
    --ui-foreground: hsl(0 0% 18% / 1);
    --ui-default-background: hsl(0 0% 90% / 1);
    --ui-default-foreground: hsl(0 0% 30% / 1);
    --ui-selected-background: hsl(215 50% 90% / 1);
    --ui-selected-foreground: hsl(215 50% 30% / 1);
    --ui-success-background: hsl(104 50% 90% / 1);
    --ui-success-foreground: hsl(104 50% 30% / 1);
    --ui-warning-background: hsl(45 50% 90% / 1);
    --ui-warning-foreground: hsl(45 50% 30% / 1);
    --ui-danger-background: hsl(0 50% 90% / 1);
    --ui-danger-foreground: hsl(0 50% 30% / 1);
    --ui-info-background: hsl(190 50% 90% / 1);
    --ui-info-foreground: hsl(190 90% 30% / 1);
    --ui-highlight-background: hsl(302 50% 90% / 1);
    --ui-highlight-foreground: hsl(302 50% 30% / 1);

    /* Module */
    --ui-module-background: hsl(0 0% 97% / 1);
    --ui-module-foreground: hsl(0 0% 18% / 1);
    --ui-module-backdrop: hsla(0, 0%, 97%, 0.25);
    --ui-module-border-style: none;
    --ui-module-border-width: 0;
    --ui-module-border-color: transparent;  
    --ui-module-shadow: 0 1px 4px 0 rgb(from var(--ui-module-foreground, hsl(0 0% 18% / 1)) r g b / 50%);

    /* Code */
    --ui-code-foreground: black;

    /* HTML */
    --ui-code-html-comment: #008000;
    --ui-code-html-tag-bracket: #900000;
    --ui-code-html-tag-name: #900000;
    --ui-code-html-attribute: #e50000;
    --ui-code-html-value: #0000ff;

    /* CSS */
    --ui-code-css-comment: #008000;
    --ui-code-css-class: #900000;
    --ui-code-css-id: #900000;
    --ui-code-css-tag: #900000;
    --ui-code-css-attribute: #e50000;
    --ui-code-css-text: #a31515;
    --ui-code-css-function: #a45e26;
    --ui-code-css-property: #e50000;
    --ui-code-css-value: #0451a5;
    --ui-code-css-variable: #098658;
    --ui-code-css-constant: #0451a5;

    /* JavaScript */
    --ui-code-javascript-comment: #008000;
    --ui-code-javascript-keyword: #0000ff;
    --ui-code-javascript-declaration: #b700db;
    --ui-code-javascript-property: #001080;
    --ui-code-javascript-class: #267f99;
    --ui-code-javascript-function: #795e26;
    --ui-code-javascript-text: #a31515;
    --ui-code-javascript-numeric: #098658;

    /* SQL */
    --ui-code-sql-comment: #008000;
    --ui-code-sql-command: #0000ff;
    --ui-code-sql-text: #ac1515;
    --ui-code-sql-numeric: #098658;
    --ui-code-sql-identifier: #3b3b3b;
    --ui-code-sql-constant: #098658;
    --ui-code-sql-operator: #000000;

    /* JSON */
    --ui-code-json-property: #0451a5;
    --ui-code-json-text: #a31515;
    --ui-code-json-literal: #098658;
    --ui-code-json-constant: #0000ff;
    --ui-code-json-colon: #3b3b3b;
    --ui-code-json-comma: #3b3b3b;
    --ui-code-json-curly-brackets: #3b3b3b;
    --ui-code-json-square-brackets: #3b3b3b;
  }
}

/* System Dark mode */
@media (prefers-color-scheme: dark) {
  :root, :host {
    /* Colors */
    --ui-background: hsl(0 0% 18% / 1);
    --ui-midground: hsl(0 0% 25% / 1);
    --ui-foreground: hsl(0 0% 97% / 1);
    --ui-default-background: hsl(0 0% 30% / 1);
    --ui-default-foreground: hsl(0 0% 90% / 1);
    --ui-selected-background: hsl(215 50% 30% / 1);
    --ui-selected-foreground: hsl(215 50% 90% / 1);
    --ui-success-background: hsl(104 50% 30% / 1);
    --ui-success-foreground: hsl(104 50% 90% / 1);  
    --ui-warning-background: hsl(45 50% 30% / 1);
    --ui-warning-foreground: hsl(45 50% 90% / 1);
    --ui-danger-background: hsl(0 50% 30% / 1);
    --ui-danger-foreground: hsl(0 50% 90% / 1);
    --ui-info-background: hsl(190 90% 30% / 1);
    --ui-info-foreground: hsl(190 50% 90% / 1);
    --ui-highlight-background: hsl(302 50% 30% / 1);
    --ui-highlight-foreground: hsl(302 50% 90% / 1);

    /* Module */
    --ui-module-background: hsl(0 0% 25% / 1);
    --ui-module-foreground: hsl(0 0% 75% / 1);
    --ui-module-backdrop: hsla(0, 0%, 25%, 0.25);
    --ui-module-border-style: none;
    --ui-module-border-width: 0;
    --ui-module-border-color: transparent;  
    --ui-module-shadow: 0 0 2px 0 var(--ui-module-foreground);

    /* Code */
    --ui-code-foreground: white;

    /* HTML */
    --ui-code-html-comment: #6a9955;
    --ui-code-html-tag-bracket: #808080;
    --ui-code-html-tag-name: #569ccb;
    --ui-code-html-attribute: #9cdcfe;
    --ui-code-html-value: #ce9178;

    /* CSS */
    --ui-code-css-comment: #6a9955;
    --ui-code-css-class: #d7ba7d;
    --ui-code-css-id: #d7ba7d;
    --ui-code-css-tag: #d7ba7d;
    --ui-code-css-attribute: #9cdcfe;
    --ui-code-css-text: #c39178;
    --ui-code-css-function: #d4d4d4;
    --ui-code-css-property: #9cdcfe;
    --ui-code-css-value: #d4d4c9;
    --ui-code-css-variable: #b5ce9b;
    --ui-code-css-constant: #d4d4c9;

    /* JavaScript */
    --ui-code-javascript-comment: #6a9949;
    --ui-code-javascript-keyword: #4a9cd6;
    --ui-code-javascript-declaration: #da70cb;
    --ui-code-javascript-property: #d4d4d4;
    --ui-code-javascript-class: #d4d4d4;
    --ui-code-javascript-function: #d4d4d4;
    --ui-code-javascript-text: #ce9178;
    --ui-code-javascript-numeric: #b5cea8;

    /* SQL */
    --ui-code-sql-comment: #6a993e;
    --ui-code-sql-command: #569cd6;
    --ui-code-sql-text: #ce9178;
    --ui-code-sql-numeric: #b5cea8;
    --ui-code-sql-identifier: #d4d4d4;
    --ui-code-sql-constant: #b5cea8;
    --ui-code-sql-operator: #d4d4d4;

    /* JSON */
    --ui-code-json-property: #9cdcf0;
    --ui-code-json-text: #ce9178;
    --ui-code-json-literal: #b5ce89;
    --ui-code-json-constant: #4a9cd6;
    --ui-code-json-colon: #d4d4d4;
    --ui-code-json-comma: #d4d4d4;
    --ui-code-json-curly-brackets: #d4d4d4;
    --ui-code-json-square-brackets: #d4d4d4;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion) {
  :root, :host {
    /* Animation duration */
    --ui-animation-duration-slow: 0;
    --ui-animation-duration-default: 0;
    --ui-animation-duration-quick: 0;
  }
}

/* High contrast */
@media (forced-colors: active) or (prefers-contrast: more) {
  :root, :host {
    /* Border */
    --ui-border-radius: 0;
    --ui-border-width: 3px;
    --ui-border-style: solid;

    /* Colors */
    --ui-module-background: var(--ui-background);
    --ui-module-foreground: var(--ui-foreground);
    --ui-default-background: var(--ui-background);
    --ui-default-foreground: var(--ui-foreground);
    --ui-selected-background: var(--ui-background);
    --ui-selected-foreground: var(--ui-foreground);
    --ui-success-background: var(--ui-background);
    --ui-success-foreground: var(--ui-foreground);
    --ui-warning-background: var(--ui-background);
    --ui-warning-foreground: var(--ui-foreground);
    --ui-danger-background: var(--ui-background);
    --ui-danger-foreground: var(--ui-foreground);
    --ui-info-background: var(--ui-background);
    --ui-info-foreground: var(--ui-foreground);
    --ui-highlight-background: var(--ui-background);
    --ui-highlight-foreground: var(--ui-foreground);

    /* Module */
    --ui-module-border-style: solid;
    --ui-module-border-width: 3px;
    --ui-module-border-color: var(--ui-foreground);
    --ui-module-shadow: none;
  }
}

@media ((forced-colors: active) or (prefers-contrast: more)) and (prefers-color-scheme: light) {
  :root, :host {
    /* Colors */
    --ui-background: white;
    --ui-midground: white;
    --ui-foreground: black;
  }
}

@media ((forced-colors: active) or (prefers-contrast: more)) and (prefers-color-scheme: dark) {
  :root, :host {
    /* Colors */
    --ui-background: black;
    --ui-midground: black;
    --ui-foreground: white;
  }
}

/* Hide UI components until they are loaded */
*:not(:defined) {
  display: none;
}
::slotted(*:not(:defined)) {
  display: none;
}

/* Default body properties */
body, :host {
  /* Background and color */
  background-color: var(--ui-background);
  color: var(--ui-foreground);
  --ui-icon-primary-color: var(--ui-foreground);

  /* Text */
  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Oxygen",
    "Ubuntu",
    "Cantarell",
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  font-size: var(--ui-font-size-normal);
}