@umbraco-cms/backoffice 16.0.0-rc3 → 16.0.0-rc5

package/dist-cms/css/uui-css.css

@@ -66,8 +66,11 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   --uui-type-h5-size: var(--uui-type-default-size,14px);
   --uui-type-h6-size: var(--uui-type-small-size,12px);
 }
+
 /** 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);
@@ -75,136 +78,434 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   --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);
-  --uui-palette-deep-saffron-dark: rgb(222, 145, 56);
-  --uui-palette-deep-saffron-dimmed: rgb(166, 150, 133);
+  --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);
-  --uui-palette-sunglow-dark: rgb(224, 193, 51);
-  --uui-palette-sunglow-dimmed: rgb(166, 160, 133);
+  --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);
-  --uui-palette-spanish-pink-dark: rgb(232, 192, 189);
-  --uui-palette-spanish-pink-dimmed: rgb(219, 212, 212);
+  --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);
-  --uui-palette-gunmetal-dark: rgb(23, 27, 33);
-  --uui-palette-gunmetal-dimmed: rgb(54, 54, 54);
+  --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);
-  --uui-palette-space-cadet-dark: rgb(28, 35, 59);
-  --uui-palette-space-cadet-dimmed: rgb(106, 117, 154);
+  --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);
-  --uui-palette-violet-blue-dark: rgb(54, 65, 156);
-  --uui-palette-violet-blue-dimmed: rgb(87, 87, 87);
-
-  /*
-  // not used jet.
-  $matisse: #2152a3;
-  --uui-palette-matisse: $matisse;
-  --uui-palette-matisse-light: color($matisse lightness(+ 8%));
-  --uui-palette-matisse-dark: color($matisse blackness(+ 8%));
-  --uui-palette-matisse-dimmed: color(
-    $matisse saturation(- 30%) blackness(+ 22%)
-  );
-  */
+  --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);
-  --uui-palette-malibu-dark: rgb(56, 116, 235);
-  --uui-palette-malibu-dimmed: rgb(115, 120, 130);
-  /*
-  $outline-blue: #3879ff;
-  --uui-palette-outline-blue: $outline-blue;
-  --uui-palette-outline-blue-light: color($outline-blue lightness(+ 8%));
-  --uui-palette-outline-blue-dark: color($outline-blue blackness(+ 8%));
-  --uui-palette-outline-blue-dimmed: color(
-    $outline-blue saturation(- 60%) blackness(+ 26%)
-  );
-*/
+  --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);
-  --uui-palette-maroon-flush-dark: rgb(191, 33, 78);
-  --uui-palette-maroon-flush-dimmed: rgb(133, 107, 114);
+  --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);
-  --uui-palette-jungle-green-dark: rgb(43, 179, 115);
-  --uui-palette-jungle-green-dimmed: rgb(102, 135, 120);
+  --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);
-  --uui-palette-forest-green-dark: rgb(10, 115, 73);
-  --uui-palette-forest-green-dimmed: rgb(46, 89, 72);
+  --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);
-  --uui-palette-cocoa-black-dark: rgb(20, 20, 20);
-  --uui-palette-cocoa-black-dimmed: rgb(48, 48, 48);
+  --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);
-  --uui-palette-dune-black-dark: rgb(38, 38, 38);
-  --uui-palette-dune-black-dimmed: rgb(64, 64, 64);
+  --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);
-  --uui-palette-cocoa-brown-dark: rgb(38, 37, 36);
-  --uui-palette-cocoa-brown-dimmed: rgb(43, 43, 43);
+  --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);
-  --uui-palette-chamoisee-dark: rgb(138, 116, 87);
-  --uui-palette-chamoisee-dimmed: rgb(115, 113, 110);
+  --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);
-  --uui-palette-timberwolf-dark: rgb(208, 208, 208);
-  --uui-palette-timberwolf-dimmed: rgb(207, 207, 207);
+  --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);
-  --uui-palette-gravel-dark: rgb(200, 200, 200);
-  --uui-palette-gravel-dimmed: rgb(204, 204, 204);
+  --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);
-  --uui-palette-sand-dark: rgb(226, 226, 226);
-  --uui-palette-sand-dimmed: rgb(231, 231, 231);
+  --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);
-  --uui-palette-white-dark: rgb(250, 250, 250);
-  --uui-palette-white-dimmed: rgb(228, 228, 228);
+  --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);
-  --uui-palette-black-dark: rgb(5, 5, 5);
-  --uui-palette-black-dimmed: rgb(36, 36, 36);
+  --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);
-  --uui-palette-grey-dark: rgb(179, 179, 179);
-  --uui-palette-grey-dimmed: rgb(189, 189, 189);
+  --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);
-  --uui-palette-dusty-grey-dark: rgb(141, 141, 141);
-  --uui-palette-dusty-grey-dimmed: rgb(186, 186, 186);
+  --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);
-  --uui-palette-mine-grey-dark: rgb(56, 56, 56);
-  --uui-palette-mine-grey-dimmed: rgb(87, 87, 87);
+  --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,#3544b1);
-  --uui-color-selected-emphasis: var(--uui-palette-violet-blue-light,rgb(70, 86, 200));
-  --uui-color-selected-standalone: var(--uui-palette-violet-blue-dark,rgb(54, 65, 156));
+  --uui-color-selected-emphasis: var(--uui-palette-violet-blue-light,rgb(
+    70,
+    86,
+    200
+  ));
+  --uui-color-selected-standalone: var(--uui-palette-violet-blue-dark,rgb(
+    54,
+    65,
+    156
+  ));
   --uui-color-selected-contrast: #fff;
 
   --uui-color-current: var(--uui-palette-spanish-pink,#f5c1bc);
-  --uui-color-current-emphasis: var(--uui-palette-spanish-pink-light,rgb(248, 214, 211));
-  --uui-color-current-standalone: var(--uui-palette-spanish-pink-dark,rgb(232, 192, 189));
+  --uui-color-current-emphasis: var(--uui-palette-spanish-pink-light,rgb(
+    248,
+    214,
+    211
+  ));
+  --uui-color-current-standalone: var(--uui-palette-spanish-pink-dark,rgb(
+    232,
+    192,
+    189
+  ));
   --uui-color-current-contrast: var(--uui-palette-space-cadet,#1b264f);
 
   --uui-color-disabled: var(--uui-palette-sand,#f3f3f5);
-  --uui-color-disabled-standalone: var(--uui-palette-sand-dark,rgb(226, 226, 226));
+  --uui-color-disabled-standalone: var(--uui-palette-sand-dark,rgb(
+    226,
+    226,
+    226
+  ));
   --uui-color-disabled-contrast: var(--uui-palette-grey,#c4c4c4);
 
   /* ----- UNIVERSAL -----  */
@@ -217,7 +518,11 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   /* ----- SURFACE -----  */
   --uui-color-surface: #fff;
   --uui-color-surface-alt: var(--uui-palette-sand,#f3f3f5);
-  --uui-color-surface-emphasis: var(--uui-palette-white-dark,rgb(250, 250, 250));
+  --uui-color-surface-emphasis: var(--uui-palette-white-dark,rgb(
+    250,
+    250,
+    250
+  ));
 
   --uui-color-background: var(--uui-palette-sand,#f3f3f5);
 
@@ -238,31 +543,64 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   /* ----- COLORS -----  */
   --uui-color-default: var(--uui-palette-space-cadet,#1b264f);
   --uui-color-default-emphasis: var(--uui-palette-violet-blue,#3544b1);
-  --uui-color-default-standalone: var(--uui-palette-space-cadet-dark,rgb(28, 35, 59));
+  --uui-color-default-standalone: var(--uui-palette-space-cadet-dark,rgb(
+    28,
+    35,
+    59
+  ));
   --uui-color-default-contrast: #fff;
 
   --uui-color-warning: #fbd142;
-  --uui-color-warning-emphasis: var(--uui-palette-sunglow-light,rgb(251, 224, 101));
+  --uui-color-warning-emphasis: var(--uui-palette-sunglow-light,rgb(
+    251,
+    224,
+    101
+  ));
   --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,#d42054);
-  --uui-color-danger-emphasis: var(--uui-palette-maroon-flush-light,rgb(226, 60, 107));
-  --uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark,rgb(191, 33, 78));
+  --uui-color-danger-emphasis: var(--uui-palette-maroon-flush-light,rgb(
+    226,
+    60,
+    107
+  ));
+  --uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark,rgb(
+    191,
+    33,
+    78
+  ));
   --uui-color-danger-contrast: white;
 
   --uui-color-invalid: var(--uui-palette-maroon-flush,#d42054);
-  --uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light,rgb(226, 60, 107));
-  --uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark,rgb(191, 33, 78));
+  --uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light,rgb(
+    226,
+    60,
+    107
+  ));
+  --uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark,rgb(
+    191,
+    33,
+    78
+  ));
   --uui-color-invalid-contrast: white;
 
   --uui-color-positive: var(--uui-palette-forest-green,#0b8152);
-  --uui-color-positive-emphasis: var(--uui-palette-forest-green-light,rgb(13, 155, 98));
-  --uui-color-positive-standalone: var(--uui-palette-forest-green-dark,rgb(10, 115, 73));
+  --uui-color-positive-emphasis: var(--uui-palette-forest-green-light,rgb(
+    13,
+    155,
+    98
+  ));
+  --uui-color-positive-standalone: var(--uui-palette-forest-green-dark,rgb(
+    10,
+    115,
+    73
+  ));
   --uui-color-positive-contrast: #fff;
 }
+
 :root[data-theme='dark'] {
   /* ----- STATES -----  */
   /* --uui-color-selected: #2a72b6;
@@ -324,9 +662,11 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   --uui-color-positive-standalone: #52d176;
   --uui-color-positive-contrast: white; */
 }
+
 :root {
   --uui-font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
 /*
   Lato
 
@@ -336,7 +676,9 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   Black: font-weight: 900;
 
 */
+
 /* Webfont: LatoLatin-Black */
+
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Black'), local('LatoLatin-Black'),
@@ -346,7 +688,9 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-weight: 900;
   text-rendering: optimizeLegibility;
 }
+
 /* Webfont: LatoLatin-BlackItalic */
+
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin BlackItalic'), local('LatoLatin-BlackItalic'),
@@ -356,7 +700,9 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-display: swap;
   text-rendering: optimizeLegibility;
 }
+
 /* Webfont: LatoLatin-Bold */
+
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Bold'), local('LatoLatin-Bold'),
@@ -366,7 +712,9 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-display: swap;
   text-rendering: optimizeLegibility;
 }
+
 /* Webfont: LatoLatin-BoldItalic */
+
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin BoldItalic'), local('LatoLatin-BoldItalic'),
@@ -376,7 +724,9 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-display: swap;
   text-rendering: optimizeLegibility;
 }
+
 /* Webfont: LatoLatin-Italic */
+
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Italic'), local('LatoLatin-Italic'),
@@ -386,7 +736,9 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-display: swap;
   text-rendering: optimizeLegibility;
 }
+
 /* Webfont: LatoLatin-Regular */
+
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Regular'), local('LatoLatin-Regular'),
@@ -396,7 +748,9 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-display: swap;
   text-rendering: optimizeLegibility;
 }
+
 /* Webfont: LatoLatin-Light */
+
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Light'), local('LatoLatin-Light'),
@@ -406,7 +760,9 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-display: swap;
   text-rendering: optimizeLegibility;
 }
+
 /* Webfont: LatoLatin-LightItalic */
+
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin LightItalic'), local('LatoLatin-LightItalic'),
@@ -416,12 +772,14 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-display: swap;
   text-rendering: optimizeLegibility;
 }
+
 .uui-font {
   font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: calc(var(--uui-size-2,6px) * 4);
   -webkit-font-smoothing: antialiased;
 }
+
 .uui-h1,
 .uui-h2,
 .uui-h3,
@@ -440,6 +798,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   line-height: 21px;
   -webkit-font-smoothing: antialiased;
 }
+
 .uui-text h1,
 .uui-h1.uui-h1 {
   font-size: var(--uui-type-h1-size,60px);
@@ -449,16 +808,19 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-text p + h1,
 .uui-text p + .uui-h1 {
   margin-top: var(--uui-size-layout-4,66px);
 }
+
 .uui-text h1.--no-top-margin,
 .uui-text h1:first-child,
 .uui-h1.--no-top-margin,
 .uui-h1:first-child {
   margin-top: 0;
 }
+
 .uui-text h2,
 .uui-h2.uui-h2 {
   font-size: var(--uui-type-h2-size,42px);
@@ -468,16 +830,19 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-text p + h2,
 .uui-text p + .uui-h2 {
   margin-top: var(--uui-size-layout-3,42px);
 }
+
 .uui-text h2.--no-top-margin,
 .uui-text h2:first-child,
 .uui-h2.--no-top-margin,
 .uui-h2:first-child {
   margin-top: 0;
 }
+
 .uui-text h3,
 .uui-h3.uui-h3 {
   font-size: var(--uui-type-h3-size,30px);
@@ -487,12 +852,14 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-text h3.--no-top-margin,
 .uui-text h3:first-child,
 .uui-h3.--no-top-margin,
 .uui-h3:first-child {
   margin-top: 0;
 }
+
 .uui-text h4,
 .uui-h4.uui-h4 {
   font-size: var(--uui-type-h4-size,21px);
@@ -502,12 +869,14 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-text h4.--no-top-margin,
 .uui-text h4:first-child,
 .uui-h4.--no-top-margin,
 .uui-h4:first-child {
   margin-top: 0;
 }
+
 .uui-text h5,
 .uui-h5.uui-h5 {
   font-size: var(--uui-type-h5-size,14px);
@@ -517,41 +886,49 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: 0;
 }
+
 .uui-text h5.--no-top-margin,
 .uui-text h5:first-child,
 .uui-h5.--no-top-margin,
 .uui-h5:first-child {
   margin-top: 0;
 }
+
 .uui-p,
 .uui-text p {
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-p-lead,
 .uui-text p.uui-lead {
   font-size: var(--uui-size-6,18px);
   line-height: var(--uui-size-8,24px);
 }
+
 .uui-a,
 .uui-text a {
   color: var(--uui-color-interactive,#1b264f);
 }
+
 .uui-a:link,
 .uui-a:active .uui-text a:link,
 .uui-text a:active {
   color: var(--uui-color-interactive,#1b264f);
 }
+
 .uui-a:hover,
 .uui-text a:hover {
   color: var(--uui-color-interactive-emphasis,#3544b1);
 }
+
 .uui-small,
 .uui-text small {
   display: inline-block;
   font-size: var(--uui-type-small-size,12px);
   line-height: 18px;
 }
+
 .uui-quoteblock,
 .uui-text blockquote {
   float: right;
@@ -565,6 +942,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   max-width: 16em;
   quotes: '“' '”' '‘' '’';
 }
+
 .uui-quoteblock:before,
 .uui-text blockquote:before {
   content: open-quote;
@@ -574,6 +952,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   font-weight: 400;
   font-size: 2em;
 }
+
 .uui-quoteblock:after,
 .uui-text blockquote:after {
   content: close-quote;
@@ -585,6 +964,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   margin-bottom: -2px;
   display: inline-block;
 }
+
 .uui-ul,
 .uui-text ul {
   list-style-type: square;
@@ -592,6 +972,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-ol,
 .uui-text ol {
   padding-left: var(--uui-size-layout-1,24px);