@umbraco-ui/uui-css/dist/custom-properties.css

Umbraco UI css component

/** Naming concept, any inputs are welcome.
UUI - Mapping-level or specific component name - State - Name - Part - Overwrites
*/

/* Size Properties */

:root {
  --uui-size-1: 3px;
  --uui-size-2: 6px;
  --uui-size-3: 9px;
  --uui-size-4: 12px;
  --uui-size-5: 15px;
  --uui-size-6: 18px;
  --uui-size-7: 21px;
  --uui-size-8: 24px;
  --uui-size-9: 27px;
  --uui-size-10: 30px;
  --uui-size-11: 33px;
  --uui-size-12: 36px;
  --uui-size-14: 42px;
  --uui-size-16: 48px;
  --uui-size-20: 60px;
  --uui-size-22: 66px;
  --uui-size-24: 72px;
  --uui-size-28: 84px;
  --uui-size-32: 96px;
  --uui-size-36: 108px;
  --uui-size-40: 120px;
  --uui-size-44: 132px;
  --uui-size-46: 138px;
  --uui-size-48: 144px;
  --uui-size-52: 156px;
  --uui-size-56: 168px;
  --uui-size-60: 180px;
  --uui-size-64: 192px;
  --uui-size-72: 216px;
  --uui-size-80: 240px;
  --uui-size-96: 288px;
  --uui-size-100: 300px;

  /** space and layout sizes for simpler usage of sizes: */
  --uui-size-space-1: 3px; /*--uui-size-1*/
  --uui-size-space-2: 6px; /*--uui-size-2*/
  --uui-size-space-3: 9px; /*--uui-size-3*/
  --uui-size-space-4: 12px; /*--uui-size-4*/
  --uui-size-space-5: 18px; /*--uui-size-6*/
  --uui-size-space-6: 24px; /*--uui-size-8*/

  --uui-size-layout-1: 24px; /*--uui-size-8*/
  --uui-size-layout-2: 30px; /*--uui-size-10*/
  --uui-size-layout-3: 42px; /*--uui-size-14*/
  --uui-size-layout-4: 66px; /*--uui-size-22*/
  --uui-size-layout-5: 96px; /*--uui-size-32*/
  --uui-size-layout-6: 138px; /*--uui-size-46*/

  /** Other size props: */
  --uui-border-radius: var(--uui-size-1);

  /** Typography */
  --uui-type-default-size: 14px;
  --uui-type-small-size: 12px;
  --uui-type-h1-size: 60px; /*--uui-size-20*/
  --uui-type-h2-size: 42px; /*--uui-size-14*/
  --uui-type-h3-size: 30px; /*--uui-size-10*/
  --uui-type-h4-size: 21px;
  --uui-type-h5-size: var(--uui-type-default-size);
  --uui-type-h6-size: var(--uui-type-small-size);
}
/** Interface shadows*/
/* TODO: fix automatic fallback values for shadows before we use them */
:root {
  --uui-shadow-depth-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --uui-shadow-depth-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  --uui-shadow-depth-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  --uui-shadow-depth-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  --uui-shadow-depth-5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
/* Currently used https://chir.ag/projects/name-that-color/ for naming inspiration */
/* Color Properties */
:root {
  --uui-palette-deep-saffron: #f79c37;
  --uui-palette-deep-saffron-light: rgb(
    249,
    181,
    103
  ); /* color($deep-saffron lightness(+ 10%)) */
  --uui-palette-deep-saffron-dark: rgb(
    222,
    145,
    56
  ); /* color($deep-saffron blackness(+ 10%)); */
  --uui-palette-deep-saffron-dimmed: rgb(
    166,
    150,
    133
  ); /* color(
    $deep-saffron saturation(- 74%) blackness(+ 1%)
  ); */
  --uui-palette-sunglow: #fad634;
  --uui-palette-sunglow-light: rgb(
    251,
    224,
    101
  ); /* color($sunglow lightness(+ 10%)); */
  --uui-palette-sunglow-dark: rgb(
    224,
    193,
    51
  ); /* color($sunglow blackness(+ 10%)); */
  --uui-palette-sunglow-dimmed: rgb(
    166,
    160,
    133
  ); /* color(
    $sunglow saturation(- 78%) blackness(+ 1%)
  ); */
  --uui-palette-spanish-pink: #f5c1bc;
  --uui-palette-spanish-pink-light: rgb(
    248,
    214,
    211
  ); /* color($spanish-pink lightness(+ 5%)); */
  --uui-palette-spanish-pink-dark: rgb(
    232,
    192,
    189
  ); /* color($spanish-pink blackness(+ 5%)); */
  --uui-palette-spanish-pink-dimmed: rgb(
    219,
    212,
    212
  ); /* color(
    $spanish-pink saturation(- 60%) blackness(+ 1%)
  ); */
  --uui-palette-gunmetal: #162335;
  --uui-palette-gunmetal-light: rgb(
    35,
    55,
    83
  ); /* color($gunmetal lightness(+ 8%)); */
  --uui-palette-gunmetal-dark: rgb(
    23,
    27,
    33
  ); /* color($gunmetal blackness(+ 8%)); */
  --uui-palette-gunmetal-dimmed: rgb(
    54,
    54,
    54
  ); /* color(
    $gunmetal saturation(- 50%) lightness(+ 6%)
  ); */
  --uui-palette-space-cadet: #1b264f;
  --uui-palette-space-cadet-light: rgb(
    38,
    53,
    110
  ); /* color($space-cadet lightness(+ 8%)); */
  --uui-palette-space-cadet-dark: rgb(
    28,
    35,
    59
  ); /* color($space-cadet blackness(+ 8%)); */
  --uui-palette-space-cadet-dimmed: rgb(
    106,
    117,
    154
  ); /* color(
    $space-cadet saturation(- 30%) lightness(+ 30%)
  ); */
  --uui-palette-violet-blue: #3544b1;
  --uui-palette-violet-blue-light: rgb(
    70,
    86,
    200
  ); /* color($violet-blue lightness(+ 8%)); */
  --uui-palette-violet-blue-dark: rgb(
    54,
    65,
    156
  ); /* color($violet-blue blackness(+ 8%)); */
  --uui-palette-violet-blue-dimmed: rgb(
    87,
    87,
    87
  ); /* color(
    $violet-blue saturation(- 30%) blackness(+ 22%)
  ); */
  --uui-palette-malibu: #3879ff;
  --uui-palette-malibu-light: rgb(
    97,
    150,
    255
  ); /* color($malibu lightness(+ 8%)); */
  --uui-palette-malibu-dark: rgb(
    56,
    116,
    235
  ); /* color($malibu blackness(+ 8%)); */
  --uui-palette-malibu-dimmed: rgb(
    115,
    120,
    130
  ); /* color(
    $malibu saturation(- 60%) blackness(+ 26%)
  ); */
  --uui-palette-maroon-flush: #d42054;
  --uui-palette-maroon-flush-light: rgb(
    226,
    60,
    107
  ); /* color($maroon-flush lightness(+ 8%)); */
  --uui-palette-maroon-flush-dark: rgb(
    191,
    33,
    78
  ); /* color($maroon-flush blackness(+ 8%)); */
  --uui-palette-maroon-flush-dimmed: rgb(
    133,
    107,
    114
  ); /* color(
    $maroon-flush saturation(- 62%) blackness(+ 2%)
  ); */
  --uui-palette-jungle-green: #2bc37c;
  --uui-palette-jungle-green-light: rgb(
    58,
    212,
    140
  ); /* color($jungle-green lightness(+ 6%)); */
  --uui-palette-jungle-green-dark: rgb(
    43,
    179,
    115
  ); /* color($jungle-green blackness(+ 6%)); */
  --uui-palette-jungle-green-dimmed: rgb(
    102,
    135,
    120
  ); /* color(
    $jungle-green saturation(- 50%) blackness(+ 1%)
  ); */
  --uui-palette-forest-green: #0b8152;
  --uui-palette-forest-green-light: rgb(
    13,
    155,
    98
  ); /* color($forest-green lightness(+ 6%)); */
  --uui-palette-forest-green-dark: rgb(
    10,
    115,
    73
  ); /* color($forest-green blackness(+ 6%)); */
  --uui-palette-forest-green-dimmed: rgb(
    46,
    89,
    72
  ); /* color(
    $forest-green saturation(- 50%) blackness(+ 1%)
  ); */
  --uui-palette-cocoa-black: #191715;
  --uui-palette-cocoa-black-light: rgb(
    39,
    36,
    32
  ); /* color($cocoa-black lightness(+ 5%)); */
  --uui-palette-cocoa-black-dark: rgb(
    20,
    20,
    20
  ); /* color($cocoa-black blackness(+ 5%)); */
  --uui-palette-cocoa-black-dimmed: rgb(
    48,
    48,
    48
  ); /* color(
    $cocoa-black saturation(- 20%) lightness(+ 10%)
  ); */
  --uui-palette-dune-black: #2e2b29;
  --uui-palette-dune-black-light: rgb(
    57,
    53,
    50
  ); /* color($dune-black lightness(+ 4%)); */
  --uui-palette-dune-black-dark: rgb(
    38,
    38,
    38
  ); /* color($dune-black blackness(+ 10%)); */
  --uui-palette-dune-black-dimmed: rgb(
    64,
    64,
    64
  ); /* color(
    $dune-black saturation(- 30%) lightness(+ 8%)
  ); */
  --uui-palette-cocoa-brown: #332a24;
  --uui-palette-cocoa-brown-light: rgb(
    66,
    54,
    47
  ); /* color($cocoa-brown lightness(+ 5%)); */
  --uui-palette-cocoa-brown-dark: rgb(
    38,
    37,
    36
  ); /* color($cocoa-brown blackness(+ 5%)); */
  --uui-palette-cocoa-brown-dimmed: rgb(
    43,
    43,
    43
  ); /* color(
    $cocoa-brown saturation(- 40%) blackness(+ 2%)
  ); */
  --uui-palette-chamoisee: #9d8057;
  --uui-palette-chamoisee-light: rgb(
    175,
    148,
    110
  ); /* color($chamoisee lightness(+ 8%)); */
  --uui-palette-chamoisee-dark: rgb(
    138,
    116,
    87
  ); /* color($chamoisee blackness(+ 8%)); */
  --uui-palette-chamoisee-dimmed: rgb(
    115,
    113,
    110
  ); /* color(
    $chamoisee saturation(- 18%) blackness(+ 8%)
  ); */
  --uui-palette-timberwolf: #e2dad4;
  --uui-palette-timberwolf-light: rgb(
    243,
    239,
    237
  ); /* color($timberwolf lightness(+ 8%)); */
  --uui-palette-timberwolf-dark: rgb(
    208,
    208,
    208
  ); /* color($timberwolf blackness(+ 8%)); */
  --uui-palette-timberwolf-dimmed: rgb(
    207,
    207,
    207
  ); /* color(
    $timberwolf saturation(- 82%) blackness(+ 6%)
  ); */
  --uui-palette-gravel: #d8d7d9;
  --uui-palette-gravel-light: rgb(
    237,
    237,
    238
  ); /* color($gravel lightness(+ 8%)); */
  --uui-palette-gravel-dark: rgb(
    200,
    200,
    200
  ); /* color($gravel blackness(+ 8%)); */
  --uui-palette-gravel-dimmed: rgb(
    204,
    204,
    204
  ); /* color($gravel saturation(- 82%) blackness(+ 6%)); */
  --uui-palette-sand: #f3f3f5;
  --uui-palette-sand-light: rgb(
    255,
    255,
    255
  ); /* color($sand lightness(+ 8%)); */
  --uui-palette-sand-dark: rgb(
    226,
    226,
    226
  ); /* color($sand blackness(+ 8%)); */
  --uui-palette-sand-dimmed: rgb(
    231,
    231,
    231
  ); /* color($sand saturation(- 82%) blackness(+ 6%)); */
  --uui-palette-white: #fefefe;
  --uui-palette-white-light: rgb(
    255,
    255,
    255
  ); /* color($white lightness(+ 2%)); */
  --uui-palette-white-dark: rgb(
    250,
    250,
    250
  ); /* color($white blackness(+ 2%)); */
  --uui-palette-white-dimmed: rgb(
    228,
    228,
    228
  ); /* color($white saturation(- 100%) blackness(+ 12%)); */
  --uui-palette-black: #060606;
  --uui-palette-black-light: rgb(
    26,
    26,
    26
  ); /* color($black lightness(+ 8%)); */
  --uui-palette-black-dark: rgb(5, 5, 5); /* color($black blackness(+ 8%)); */
  --uui-palette-black-dimmed: rgb(
    36,
    36,
    36
  ); /* color($black saturation(- 100%) lightness(+ 12%)); */
  --uui-palette-grey: #c4c4c4;
  --uui-palette-grey-light: rgb(
    222,
    222,
    222
  ); /* color($grey lightness(+ 10%)); */
  --uui-palette-grey-dark: rgb(
    179,
    179,
    179
  ); /* color($grey blackness(+ 10%)); */
  --uui-palette-grey-dimmed: rgb(
    189,
    189,
    189
  ); /* color($grey saturation(- 100%) blackness(+ 4%)); */

  /** not begin used currently. */
  --uui-palette-dusty-grey: #9b9b9b;
  --uui-palette-dusty-grey-light: rgb(
    176,
    176,
    176
  ); /* color($dusty-grey lightness(+ 8%)); */
  --uui-palette-dusty-grey-dark: rgb(
    141,
    141,
    141
  ); /* color($dusty-grey blackness(+ 10%)); */
  --uui-palette-dusty-grey-dimmed: rgb(
    186,
    186,
    186
  ); /* color(
    $dusty-grey saturation(- 100%) lightness(+ 12%)
  ); */
  --uui-palette-mine-grey: #3e3e3e;
  --uui-palette-mine-grey-light: rgb(
    82,
    82,
    82
  ); /* color($mine-grey lightness(+ 8%)); */
  --uui-palette-mine-grey-dark: rgb(
    56,
    56,
    56
  ); /* color($mine-grey blackness(+ 10%)); */
  --uui-palette-mine-grey-dimmed: rgb(
    87,
    87,
    87
  ); /* color(
    $mine-grey saturation(- 100%) lightness(+ 10%)
  ); */
}
:root {
  font-family: 'Roboto', sans-serif;

  /* ----- STATES -----  */
  --uui-color-selected: var(--uui-palette-violet-blue);
  --uui-color-selected-emphasis: var(--uui-palette-violet-blue-light);
  --uui-color-selected-standalone: var(--uui-palette-violet-blue-dark);
  --uui-color-selected-contrast: #fff;

  --uui-color-current: var(--uui-palette-spanish-pink);
  --uui-color-current-emphasis: var(--uui-palette-spanish-pink-light);
  --uui-color-current-standalone: var(--uui-palette-spanish-pink-dark);
  --uui-color-current-contrast: var(--uui-palette-space-cadet);

  --uui-color-disabled: var(--uui-palette-sand);
  --uui-color-disabled-standalone: var(--uui-palette-sand-dark);
  --uui-color-disabled-contrast: var(--uui-palette-grey);

  /* ----- UNIVERSAL -----  */
  --uui-color-header-surface: var(--uui-palette-space-cadet);
  --uui-color-header-contrast: rgba(255, 255, 255, 0.8);
  --uui-color-header-contrast-emphasis: #fff;

  --uui-color-focus: var(--uui-palette-malibu);

  /* ----- SURFACE -----  */
  --uui-color-surface: #fff;
  --uui-color-surface-alt: var(--uui-palette-sand);
  --uui-color-surface-emphasis: var(--uui-palette-white-dark);

  --uui-color-background: var(--uui-palette-sand);

  --uui-color-text: var(--uui-palette-black);
  --uui-color-text-alt: var(--uui-palette-dune-black);

  --uui-color-interactive: var(--uui-palette-space-cadet);
  --uui-color-interactive-emphasis: var(--uui-palette-violet-blue);

  --uui-color-border: #d8d7d9;
  --uui-color-border-standalone: #c2c2c2;
  --uui-color-border-emphasis: #a1a1a1;

  --uui-color-divider: #f6f6f7;
  --uui-color-divider-standalone: #e9e9eb;
  --uui-color-divider-emphasis: #bdbdbd;

  /* ----- COLORS -----  */
  --uui-color-default: var(--uui-palette-space-cadet);
  --uui-color-default-emphasis: var(--uui-palette-violet-blue);
  --uui-color-default-standalone: var(--uui-palette-space-cadet-dark);
  --uui-color-default-contrast: #fff;

  --uui-color-warning: #fbd142;
  --uui-color-warning-emphasis: var(--uui-palette-sunglow-light);
  --uui-color-warning-standalone: #a17700;
  --uui-color-warning-contrast: #000;
  /* --uui-color-warning: var(--uui-palette-sunglow); Contrast not high enough */
  /* --uui-color-warning-standalone: var(--uui-palette-sunglow-dark); Contrast not high enough */

  --uui-color-danger: var(--uui-palette-maroon-flush);
  --uui-color-danger-emphasis: var(--uui-palette-maroon-flush-light);
  --uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark);
  --uui-color-danger-contrast: white;

  --uui-color-invalid: var(--uui-palette-maroon-flush);
  --uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light);
  --uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark);
  --uui-color-invalid-contrast: white;

  --uui-color-positive: var(--uui-palette-forest-green);
  --uui-color-positive-emphasis: var(--uui-palette-forest-green-light);
  --uui-color-positive-standalone: var(--uui-palette-forest-green-dark);
  --uui-color-positive-contrast: #fff;
}
:root[data-theme='dark'] {
  /* ----- STATES -----  */
  /* --uui-color-selected: #2a72b6;
  --uui-color-selected-emphasis: #3385d1;
  --uui-color-selected-standalone: #215b91;
  --uui-color-selected-contrast: white;

  --uui-color-current: #d49e98;
  --uui-color-current-emphasis: #dbaea9;
  --uui-color-current-standalone: #c3786f;
  --uui-color-current-contrast: #1b264f; */

  /* ----- UNIVERSAL -----  */
  /* --uui-color-header: #14171b;

  --uui-color-focus: #2294ff;

  --uui-color-hover: #3f464e;
  --uui-color-hover-standalone: #51abff;

  --uui-color-disabled: #373e47;
  --uui-color-disabled-standalone: #444c55;
  --uui-color-disabled-contrast: #636e7b; */

  /* ----- SURFACE -----  */
  /* --uui-color-surface: #2d333b;
  --uui-color-surface-alt: #373e47;

  --uui-color-background: #22272e;

  --uui-color-text: #cdd9e5;
  --uui-color-text-alt: #636e7b;

  --uui-color-border: #4d5661;
  --uui-color-border-standalone: #59636e;
  --uui-color-border-emphasis: #697380;

  --uui-color-divider: #383d44;
  --uui-color-divider-standalone: #444c56;
  --uui-color-divider-emphasis: #4f5864; */
  /* ----- COLORS -----  */
  /* --uui-color-default: #2c70d6;
  --uui-color-default-emphasis: #3886fc;
  --uui-color-default-standalone: #88bdff;
  --uui-color-default-contrast: white;

  --uui-color-warning: #977b00;
  --uui-color-warning-emphasis: #bda22b;
  --uui-color-warning-standalone: #ffd82c;
  --uui-color-warning-contrast: white;

  --uui-color-danger: #8a2944;
  --uui-color-danger-emphasis: #a03452;
  --uui-color-danger-standalone: #ff7a9f;
  --uui-color-danger-contrast: white;

  --uui-color-positive: #26793e;
  --uui-color-positive-emphasis: #358f4e;
  --uui-color-positive-standalone: #52d176;
  --uui-color-positive-contrast: white; */
}
:root {
  --uui-font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}