packages/styles/scss/base/custom-properties/_init.scss

   1 @use 'sass:math';
   2
   3 /*
   4  * Static variables that keep the same between each visual theme
   5  */
   6
   7 // Colors mapping
   8 :root,
   9 .ui-standard,
  10 .ui-prominent {
  11         --signal-danger-hover: var(--signal-danger-major-1);
  12         --signal-danger-active: var(--signal-danger-major-2);
  13         --signal-warning-hover: var(--signal-warning-major-1);
  14         --signal-warning-active: var(--signal-warning-major-2);
  15         --signal-success-hover: var(--signal-success-major-1);
  16         --signal-success-active: var(--signal-success-major-2);
  17         --signal-info-hover: var(--signal-info-major-1);
  18         --signal-info-active: var(--signal-info-major-2);
  19         --interaction-norm-hover: var(--interaction-norm-major-1);
  20         --interaction-norm-active: var(--interaction-norm-major-2);
  21         --interaction-weak-hover: var(--interaction-weak-major-1);
  22         --interaction-weak-active: var(--interaction-weak-major-2);
  23 }
  24
  25 // Other mappings
  26 :root {
  27         --1px: #{math.div(1rem, 16)}; // Assumed 16px browser base font size
  28         --border-radius-sm: calc(0.5 * var(--border-radius) * var(--1px));
  29         --border-radius-md: calc(var(--border-radius) * var(--1px));
  30         --border-radius-lg: calc(1.5 * var(--border-radius) * var(--1px));
  31         --border-radius-xl: calc(2 * var(--border-radius) * var(--1px));
  32         --border-radius-full: 9999em;
  33 }