@logo-elements/logo-elements-styles/color.js

Logo Elements Design System is a design system library for modern web applications which gives your web apps Logo Applications look and feel, used by Logo Elements

/**
 * @license
 * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
 * Any reproduction of this material must contain this notice.
 */
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import './version.js';

const colorBase = css`
  :host {
    /* Base (background) */
    --leds-base-color: #fff;

    /* Tint */
    --leds-tint-5pct: rgba(255, 255, 255, 0.3);
    --leds-tint-10pct: rgba(255, 255, 255, 0.37);
    --leds-tint-20pct: rgba(255, 255, 255, 0.44);
    --leds-tint-30pct: rgba(255, 255, 255, 0.5);
    --leds-tint-40pct: rgba(255, 255, 255, 0.57);
    --leds-tint-50pct: rgba(255, 255, 255, 0.64);
    --leds-tint-60pct: rgba(255, 255, 255, 0.7);
    --leds-tint-70pct: rgba(255, 255, 255, 0.77);
    --leds-tint-80pct: rgba(255, 255, 255, 0.84);
    --leds-tint-90pct: rgba(255, 255, 255, 0.9);
    --leds-tint: #ffffff;

    /* Shade */
    --leds-shade-5pct: #F3F5F7;
    --leds-shade-10pct: #E8EBEF;
    --leds-shade-20pct: #D2D7DE;
    --leds-shade-30pct: #C4CAD3;
    --leds-shade-40pct: #A9B1BC;
    --leds-shade-50pct: #8D97A4;
    --leds-shade-60pct: #747F8E;
    --leds-shade-70pct: #616D7C;
    --leds-shade-80pct: #414D5E;
    --leds-shade-90pct: #263445;
    --leds-shade: #192434;
    
    /* Shade RGB */
    --leds-shade-5pct-rgb: rgba(25, 59, 103, 0.05);
    --leds-shade-10pct-rgb: rgba(26, 57, 96, 0.1);
    --leds-shade-20pct-rgb: rgba(28, 55, 90, 0.2);
    --leds-shade-30pct-rgb: rgba(28, 52, 84, 0.26);
    --leds-shade-40pct-rgb: rgba(28, 50, 79, 0.38);
    --leds-shade-50pct-rgb: rgba(28, 48, 74, 0.5);
    --leds-shade-60pct-rgb: rgba(28, 46, 69, 0.61);
    --leds-shade-70pct-rgb: rgba(27, 43, 65, 0.69);
    --leds-shade-80pct-rgb: rgba(26, 41, 61, 0.83);
    --leds-shade-90pct-rgb: rgba(24, 39, 57, 0.94);

    /* Contrast */
    --leds-contrast-5pct: var(--leds-shade-5pct);
    --leds-contrast-10pct: var(--leds-shade-10pct);
    --leds-contrast-20pct: var(--leds-shade-20pct);
    --leds-contrast-30pct: var(--leds-shade-30pct);
    --leds-contrast-40pct: var(--leds-shade-40pct);
    --leds-contrast-50pct: var(--leds-shade-50pct);
    --leds-contrast-60pct: var(--leds-shade-60pct);
    --leds-contrast-70pct: var(--leds-shade-70pct);
    --leds-contrast-80pct: var(--leds-shade-80pct);
    --leds-contrast-90pct: var(--leds-shade-90pct);
    --leds-contrast: var(--leds-shade);

    /* Text */
    --leds-header-text-color: var(--leds-contrast);
    --leds-body-text-color: var(--leds-contrast-90pct);
    --leds-secondary-text-color: var(--leds-contrast-70pct);
    --leds-tertiary-text-color: var(--leds-contrast-50pct);
    --leds-disabled-text-color: var(--leds-contrast-30pct);

    /* Primary */
    --leds-primary-color: #0090FF;
    --leds-primary-color-50pct: #80C7FF;
    --leds-primary-color-10pct: #CCE9FF;
    --leds-primary-color-dark: #005699;
    --leds-primary-text-color: #0090FF;
    --leds-primary-contrast-color: #fff;

    /* Error */
    --leds-error-color: #FF3E51;
    --leds-error-color-50pct: #FF9FA8;
    --leds-error-color-10pct: #FFD8DC;
    --leds-error-color-dark: #992531;
    --leds-error-text-color: #FF3E51;
    --leds-error-contrast-color: #fff;

    /* Success */
    --leds-success-color: #01CC78;
    --leds-success-color-50pct: #80E5BB;
    --leds-success-color-10pct: #CCF5E4;
    --leds-success-color-dark: #007B48;
    --leds-success-text-color: #01CC78;
    --leds-success-contrast-color: #fff;
    
    /* Warning */
    --leds-warning-color: #F8AA1C;
    --leds-warning-color-50pct: #FBD48D;
    --leds-warning-color-10pct: #FEEED2;
    --leds-warning-color-dark: #97670F;
    --leds-warning-text-color: #F8AA1C;
    --leds-warning-contrast-color: #fff;
  }
`;

const $tpl = document.createElement('template');
$tpl.innerHTML = `<style>${colorBase.toString().replace(':host', 'html')}</style>`;
document.head.appendChild($tpl.content);

const color = css`
  [theme~='dark'] {
    /* Base (background) */
    --leds-base-color: hsl(214, 35%, 21%);

    /* Tint */
    --leds-tint-5pct: hsla(214, 65%, 85%, 0.06);
    --leds-tint-10pct: hsla(214, 60%, 80%, 0.14);
    --leds-tint-20pct: hsla(214, 64%, 82%, 0.23);
    --leds-tint-30pct: hsla(214, 69%, 84%, 0.32);
    --leds-tint-40pct: hsla(214, 73%, 86%, 0.41);
    --leds-tint-50pct: hsla(214, 78%, 88%, 0.5);
    --leds-tint-60pct: hsla(214, 82%, 90%, 0.58);
    --leds-tint-70pct: hsla(214, 87%, 92%, 0.69);
    --leds-tint-80pct: hsla(214, 91%, 94%, 0.8);
    --leds-tint-90pct: hsla(214, 96%, 96%, 0.9);
    --leds-tint: hsl(214, 100%, 98%);

    /* Shade */
    --leds-shade-5pct: hsla(214, 0%, 0%, 0.07);
    --leds-shade-10pct: hsla(214, 4%, 2%, 0.15);
    --leds-shade-20pct: hsla(214, 8%, 4%, 0.23);
    --leds-shade-30pct: hsla(214, 12%, 6%, 0.32);
    --leds-shade-40pct: hsla(214, 16%, 8%, 0.41);
    --leds-shade-50pct: hsla(214, 20%, 10%, 0.5);
    --leds-shade-60pct: hsla(214, 24%, 12%, 0.6);
    --leds-shade-70pct: hsla(214, 28%, 13%, 0.7);
    --leds-shade-80pct: hsla(214, 32%, 13%, 0.8);
    --leds-shade-90pct: hsla(214, 33%, 13%, 0.9);
    --leds-shade: hsl(214, 33%, 13%);

    /* Contrast */
    --leds-contrast-5pct: var(--leds-tint-5pct);
    --leds-contrast-10pct: var(--leds-tint-10pct);
    --leds-contrast-20pct: var(--leds-tint-20pct);
    --leds-contrast-30pct: var(--leds-tint-30pct);
    --leds-contrast-40pct: var(--leds-tint-40pct);
    --leds-contrast-50pct: var(--leds-tint-50pct);
    --leds-contrast-60pct: var(--leds-tint-60pct);
    --leds-contrast-70pct: var(--leds-tint-70pct);
    --leds-contrast-80pct: var(--leds-tint-80pct);
    --leds-contrast-90pct: var(--leds-tint-90pct);
    --leds-contrast: var(--leds-tint);

    /* Text */
    --leds-header-text-color: var(--leds-contrast);
    --leds-body-text-color: var(--leds-contrast-90pct);
    --leds-secondary-text-color: var(--leds-contrast-70pct);
    --leds-tertiary-text-color: var(--leds-contrast-50pct);
    --leds-disabled-text-color: var(--leds-contrast-30pct);

    /* Primary */
    --leds-primary-color: hsl(214, 90%, 48%);
    --leds-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
    --leds-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
    --leds-primary-text-color: hsl(214, 90%, 77%);
    --leds-primary-contrast-color: #fff;

    /* Error */
    --leds-error-color: hsl(3, 79%, 49%);
    --leds-error-color-50pct: hsla(3, 75%, 62%, 0.5);
    --leds-error-color-10pct: hsla(3, 75%, 62%, 0.14);
    --leds-error-text-color: hsl(3, 100%, 80%);

    /* Success */
    --leds-success-color: hsl(145, 72%, 30%);
    --leds-success-color-50pct: hsla(145, 92%, 51%, 0.5);
    --leds-success-color-10pct: hsla(145, 92%, 51%, 0.1);
    --leds-success-text-color: hsl(145, 85%, 46%);
  }

  html {
    color: var(--leds-body-text-color);
    background-color: var(--leds-base-color);
  }

  [theme~='dark'] {
    color: var(--leds-body-text-color);
    background-color: var(--leds-base-color);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--leds-header-text-color);
  }

  a {
    color: var(--leds-primary-text-color);
  }

  blockquote {
    color: var(--leds-secondary-text-color);
  }

  code,
  pre {
    background-color: var(--leds-contrast-10pct);
    border-radius: var(--leds-border-radius-m);
  }
`;

registerStyles('', color, { moduleId: 'leds-color' });

const colorLegacy = css`
  :host {
    color: var(--leds-body-text-color) !important;
    background-color: var(--leds-base-color) !important;
  }
`;

registerStyles('', [color, colorLegacy], { moduleId: 'leds-color-legacy' });

export { colorBase, color, colorLegacy };