[UI] Accessibility features in user profile (mautic#13887)

* tokens

* incorporating all bootstrap variables

* migrating mautic variables into bootstrap

* fixing broken darken/lighten

* variables

* revert removing 5x duplicated import rules

revert
Revert "fixing broken darken/lighten"
This reverts commit bcf4ac98e07c0c17162a74794a8161d5398c3d7c.

* grunt compile-less

* aligning previous tokens

* remove duplicated imports

* dark color scheme disabled by default to avoid conflicts

* utilities syntax fix

* improve radius calc

* tag to label token names

* setting the dark theme implementation method

* set implementation mode for high contrast + run grunt-compile-less

* fix missing transparency bg colors

* darker brand bg on dark theme

* Responsive typography

* secondary brand color support

* style fixes

* fixes for secondary brand color support

* transparency for borders when on brand bg

* Revert "transparency for borders when on brand bg"

This reverts commit a8c4748.

* sat improv

* reduced max bdr value

* enhanced border calc

* removing duplicates

* high contrast improvement

* separate file for tokens to avoid duplication on .css files

* brand center enabled by default

* another pallete generation method + accessibility improvement

* 4px rounded standard

* revert to 0 based on community feedback

* fix css to less

* semantic fixes

* wip

* features toggle

* js for button toggles that append attributes to the html tag

* fix missing translation

* radio input style

* grid fix

* text-help class

* making mixin accessible

* separating radio styles

* improving layout and adding features

* main JS code

* splitting into right files

* letting it ready to merge

* polishing the underline solution

* improve reduced transparency reliability

* i wasn't happy re. descriptions

* improve reliability for underlined links

* fix for keyboard shortcuts

* fix cs

app/bundles/CoreBundle/Assets/css/app.css

@@ -1149,6 +1149,10 @@ a.text-google:focus {
 .text-helper {
   color: var(--text-helper);
 }
+.text-help {
+  color: var(--text-helper);
+  font-size: var(--typography-utility-productive);
+}
 blockquote {
   padding-left: 40px;
   border-width: 0px;
@@ -1360,8 +1364,8 @@ kbd {
   background: #a3e2e4;
 }
 .alert-growl {
-  background: rgba(0, 0, 0, 0.7);
-  color: #FFFFFF;
+  background: var(--layer-translucent-inverse);
+  color: var(--text-inverse);
   border-radius: 0;
   border-left: 4px solid var(--border-interactive);
   border-top: none;
@@ -1414,7 +1418,7 @@ kbd {
 }
 .alert-growl .close {
   font-size: 13px;
-  color: #fff;
+  color: var(--text-inverse);
   margin-left: 10px;
   font-weight: normal;
 }
@@ -1707,22 +1711,22 @@ a.media {
 .container {
   padding-right: 15px;
   padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
+  margin: 0;
+  display: flex;
 }
 @media (min-width: 768px) {
   .container {
-    width: 750px;
+    max-width: 750px;
   }
 }
 @media (min-width: 992px) {
   .container {
-    width: 970px;
+    max-width: 970px;
   }
 }
 @media (min-width: 1200px) {
   .container {
-    width: 1170px;
+    max-width: 1170px;
   }
 }
 .container-fluid {
@@ -1734,6 +1738,7 @@ a.media {
 .row {
   display: flex;
   flex-wrap: wrap;
+  max-width: 100%;
   margin-right: -15px;
   margin-left: -15px;
 }
@@ -2660,15 +2665,15 @@ ul.dropdown-menu-form {
   overflow-y: auto;
 }
 .dropdown-toggle {
-  outline: 2px solid transparent !important;
+  outline: 2px var(--outline-style) transparent !important;
   outline-offset: -2px;
 }
 .dropdown-toggle:hover {
-  outline: 2px solid transparent;
+  outline: 2px var(--outline-style) transparent;
 }
 .dropdown-toggle:active,
 .dropdown-toggle:focus {
-  outline: 2px solid var(--focus) !important;
+  outline: 2px var(--outline-style) var(--focus) !important;
 }
 .dropdown-header {
   margin: 32px 16px 8px 16px;
@@ -3675,12 +3680,30 @@ input[type=file].form-control {
 .radio-inline.custom-danger label:hover input:checked + span {
   border: 1px solid #F86B4F;
 }
-input[type="radio"] {
+.radio-group .radio-option {
+  margin-bottom: var(--spacing-02);
+}
+.radio-group input[type="radio"] {
   width: 16px;
   height: 16px;
-  vertical-align: -3px;
+  vertical-align: top;
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  border: 4px solid white;
+  border-radius: 50%;
+  outline: 1px solid black;
+  transition: 0.2s all linear;
+  outline-offset: -1px;
   margin-right: 4px;
 }
+.radio-group input[type="radio"]:checked {
+  background-color: black;
+}
+.radio-group input[type="radio"]:hover {
+  cursor: pointer;
+  opacity: 0.7;
+}
 .radio-inline[class*=" custom"] label input + span,
 .radio[class*=" custom"] label input + span,
 .radio-inline[class^="custom"] label input + span,
@@ -7334,6 +7357,7 @@ ul.media-list.media-list-feed div.media-body {
   --layer-selected-inverse: #161616;
   --layer-selected-disabled: #8d8d8d;
   --layer-translucent: #ffffffcc;
+  --layer-translucent-inverse: rgba(0, 0, 0, 0.7);
   --layer-accent: #e0e0e0;
   --layer-accent-hover: #d1d1d1;
   --layer-accent-active: #a8a8a8;
@@ -7481,6 +7505,7 @@ ul.media-list.media-list-feed div.media-body {
   --layer-selected-inverse: #f4f4f4;
   --layer-selected-disabled: #6f6f6f;
   --layer-translucent: #000000cc;
+  --layer-translucent-inverse: #ffffffcc;
   --layer-accent: #393939;
   --layer-accent-alternate: #525252;
   --layer-accent-hover: #4c4c4c;
@@ -7642,20 +7667,41 @@ ul.media-list.media-list-feed div.media-body {
   --border-radius-sm: clamp(0px, 0px, 7px);
   --border-radius-md: clamp(0px, calc(1.8 * 0px), 14px);
   --border-radius-lg: clamp(0px, calc(2.6 * 0px), 21px);
+  --outline-style: solid;
 }
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --duration-productive: 0;
-    --duration-expressive: 0;
-  }
+:root[reduce-motion="true"] {
+  --duration-productive: 0;
+  --duration-expressive: 0;
 }
-:root[high-contrast="enabled"] {
-  outline-style: dotted;
+:root[contrast-borders="true"] {
+  --outline-style: dashed;
   --border-no-color: var(--border-strong);
-  --border-bottom: 1px solid var(--border-strong);
+  --border-bottom: 1px;
 }
-@media (prefers-reduced-transparency: reduce) {
-  :root {
-    --layer-translucent: var(--layer);
-  }
+:root[contrast-borders="true"] a {
+  outline: 2px var(--outline-style) transparent !important;
+  outline-offset: -2px;
+}
+:root[contrast-borders="true"] a:hover {
+  outline: 2px var(--outline-style) transparent;
+}
+:root[contrast-borders="true"] a:active,
+:root[contrast-borders="true"] a:focus {
+  outline: 2px var(--outline-style) var(--focus) !important;
+}
+:root[reduce-transparency="true"] {
+  --layer-translucent: var(--layer);
+  --layer-translucent-inverse: var(--layer-selected-inverse);
+}
+:root[enable-underlines="true"] p a,
+:root[enable-underlines="true"] .alert a,
+:root[enable-underlines="true"] .list-group-item-text,
+:root[enable-underlines="true"] .accordion-title,
+:root[enable-underlines="true"] td a:not(.label):not([class*="dropdown-"]):not(.dropdown-menu a),
+:root[enable-underlines="true"] p a:hover,
+:root[enable-underlines="true"] .alert a:hover,
+:root[enable-underlines="true"] .list-group-item-text:hover,
+:root[enable-underlines="true"] .accordion-title:hover,
+:root[enable-underlines="true"] td a:not(.label):not([class*="dropdown-"]):not(.dropdown-menu a):hover {
+  text-decoration: underline;
 }

app/bundles/CoreBundle/Assets/css/app/less/components/alerts.less

@@ -47,7 +47,7 @@
   .alert { background-color: var(--layer-alternate); }
 }
 
-.alert-success { 
+.alert-success {
   border-color: var(--support-success);
 
   &:not([class*="col-"]):before {
@@ -96,8 +96,8 @@
 }
 
 .alert-growl {
-  background: rgba(0, 0, 0, .7);
-  color: #FFFFFF;
+  background: var(--layer-translucent-inverse);
+  color: var(--text-inverse);
   border-radius: 0;
   border-left: 4px solid var(--border-interactive);
   border-top: none;
@@ -161,7 +161,7 @@
 
 .alert-growl .close {
   font-size: (@font-size-base);
-  color: #fff;
+  color: var(--text-inverse);
   margin-left: 10px;
   font-weight: normal;
 }