@uploadcare/blocks/blocks/themes/lr-basic/theme.css

Building blocks for Uploadcare products integration

:where(.lr-wgt-theme, .lr-wgt-common, ::backdrop),
:host {
  /* Base values */

  --darkmode: 0;

  --h-foreground: 208;
  --s-foreground: 4%;
  --l-foreground: calc(15% + 70% * var(--darkmode));

  --h-background: 208;
  --s-background: 4%;
  --l-background: calc(95% - 87% * var(--darkmode));

  --h-accent: 211;
  --s-accent: 100%;
  --l-accent: calc(50% - 5% * var(--darkmode));

  --h-confirm: 140;
  --s-confirm: 60%;
  --l-confirm: 60%;

  --h-error: 358;
  --s-error: 100%;
  --l-error: 66%;

  --shadows: 1;

  --h-shadow: 0;
  --s-shadow: 0%;
  --l-shadow: 0%;

  --opacity-normal: 0.5;
  --opacity-hover: 0.8;
  --opacity-active: 1;

  --ui-size: 36px;

  --gap-min: 2px;
  --gap-mid: 10px;
  --gap-max: 20px;
  --gap-table: 0px;

  --borders: 1;

  --border-radius-element: 7px;
  --border-radius-frame: 10px;
  --border-radius-thumb: 5px;

  --transition-duration: 0.2s;

  --modal-max-w: 800px;
  --modal-max-h: 600px;
  --modal-backdrop-background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggc3Ryb2tlPSJyZ2JhKDAsIDAsIDAsIC4xKSIgZD0iTTAgMTAgMTAgMCIvPgo8L3N2Zz4=');

  /* Derivative values */

  --darkmode-minus: calc(1 + var(--darkmode) * -2);

  --clr-background: hsl(var(--h-background), var(--s-background), var(--l-background));
  --clr-background-dark: hsl(var(--h-background), var(--s-background), calc(var(--l-background) - 3%));
  --clr-background-light: hsl(var(--h-background), var(--s-background), calc(var(--l-background) + 3%));

  --clr-generic-file-icon: hsl(
    var(--h-background),
    var(--s-background),
    calc(var(--l-background) + 4% * var(--darkmode-minus))
  );

  --clr-accent: hsl(var(--h-accent), var(--s-accent), var(--l-accent));
  --clr-accent-light: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 50%);
  --clr-accent-lightest: hsla(var(--h-accent), var(--s-accent), var(--l-accent), 10%);

  --clr-confirm: hsl(var(--h-confirm), var(--s-confirm), var(--l-confirm));

  --clr-error: hsl(var(--h-error), var(--s-error), var(--l-error));
  --clr-error-light: hsla(var(--h-error), var(--s-error), var(--l-error), 15%);
  --clr-error-lightest: hsla(var(--h-error), var(--s-error), var(--l-error), 5%);
  --clr-error-message-bgr: hsl(var(--h-error), var(--s-error), calc(var(--l-error) + 30% * var(--darkmode-minus)));

  --clr-txt: hsl(var(--h-foreground), var(--s-foreground), var(--l-foreground));
  --clr-txt-mid: hsl(var(--h-foreground), var(--s-foreground), calc(var(--l-foreground) + 15% * var(--darkmode-minus)));
  --clr-txt-light: hsl(
    var(--h-foreground),
    var(--s-foreground),
    calc(var(--l-foreground) + 30% * var(--darkmode-minus))
  );
  --clr-txt-lightest: hsl(
    var(--h-foreground),
    var(--s-foreground),
    calc(var(--l-foreground) + 50% * var(--darkmode-minus))
  );

  --clr-shade-lv1: hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), 5%);
  --clr-shade-lv2: hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), 8%);
  --clr-shade-lv3: hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), 12%);

  --border-light: 1px solid
    hsla(
      var(--h-foreground),
      var(--s-foreground),
      var(--l-foreground),
      calc((0.1 - 0.05 * var(--darkmode)) * var(--borders))
    );
  --border-mid: 1px solid
    hsla(
      var(--h-foreground),
      var(--s-foreground),
      var(--l-foreground),
      calc((0.2 - 0.1 * var(--darkmode)) * var(--borders))
    );
  --border-accent: 1px solid hsla(var(--h-accent), var(--s-accent), var(--l-accent), 1 * var(--borders));
  --border-dashed: 2px dashed
    hsla(var(--h-foreground), var(--s-foreground), var(--l-foreground), calc(0.1 * var(--borders)));

  --clr-curtain: hsla(var(--h-background), var(--s-background), calc(var(--l-background) - 10%), 70%);

  --hsl-shadow: var(--h-shadow), var(--s-shadow), var(--l-shadow);

  --modal-shadow: 0px 0px 1px hsla(var(--hsl-shadow), calc((0.35 + 0.65 * var(--darkmode)) * var(--shadows))),
    0px 6px 40px hsla(var(--hsl-shadow), calc((0.2 + 0.4 * var(--darkmode)) * var(--shadows)));

  --inset-shadow: inset 0px 2px 3px hsla(var(--hsl-shadow), calc(0.09 + 0.1 * var(--darkmode)));

  /* Maybe move directly to the styles of the buttons? */

  --clr-btn-bgr-primary: var(--clr-accent);
  --clr-btn-bgr-primary-hover: hsl(
    var(--h-accent),
    var(--s-accent),
    calc(var(--l-accent) - 4% * var(--darkmode-minus))
  );
  --clr-btn-bgr-primary-active: hsl(
    var(--h-accent),
    var(--s-accent),
    calc(var(--l-accent) - 8% * var(--darkmode-minus))
  );
  --clr-btn-txt-primary: var(--clr-background-light);
  --shadow-btn-primary: 0px 1px 2px hsla(var(--hsl-shadow), calc(0.26 * var(--shadows))),
    0px 2px 8px hsla(var(--hsl-shadow), calc(0.08 * var(--shadows))),
    inset 0px 0px 2px hsla(var(--hsl-shadow), calc(0.2 * var(--shadows)));

  --clr-btn-bgr-secondary: hsl(
    var(--h-background),
    var(--s-background),
    calc(var(--l-background) + 3% + 3% * var(--darkmode))
  );
  --clr-btn-bgr-secondary-hover: hsl(
    var(--h-background),
    var(--s-background),
    calc(var(--l-background) + 8% * var(--darkmode))
  );
  --clr-btn-bgr-secondary-active: hsl(
    var(--h-background),
    var(--s-background),
    calc(var(--l-background) - 3% + 13% * var(--darkmode))
  );
  --clr-btn-txt-secondary: var(--clr-txt);
  --shadow-btn-secondary: 0px 1px 1px hsla(var(--hsl-shadow), calc(0.07 * var(--shadows))),
    0px 2px 8px hsla(var(--hsl-shadow), calc(0.06 * var(--shadows))),
    inset 0px 0px 1px hsla(var(--hsl-shadow), calc(0.4 * var(--shadows)));

  --clr-btn-bgr-disabled: var(--clr-background);
  --clr-btn-txt-disabled: var(--clr-txt-lightest);
  --shadow-btn-disabled: inset 0px 0px 1px hsla(var(--hsl-shadow), calc(0.4 * var(--shadows)));
}

@media only screen and (max-height: 600px) {
  :where(.lr-wgt-theme, .lr-wgt-common),
  :host {
    --modal-max-h: 100%;
  }
}

@media only screen and (max-width: 800px) {
  :where(.lr-wgt-theme, .lr-wgt-common),
  :host {
    --modal-max-w: 100%;
    --modal-max-h: 100%;
  }
}