Merge pull request #3499 from ArmDeveloperEcosystem/adsv5-feedback-notes

Adsv5 feedback notes

Author: pareenaverma

assets/css/content-pages.css

@@ -88,20 +88,6 @@ html[theme='dark'] .tab-right-card > h6 {
     line-height: 1.2;
 }
 
-/* Force a 2-line clamp for masthead title */
-ads-masthead #ads-masthead-title {
-  line-height: 1.2;
-  padding-bottom: 6px;
-  box-sizing: border-box;
-  max-height: calc(1.2em * 2 + 8px); /* dyncamically calculate height depending on length of title */
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  white-space: normal;
-}
-
-
 /* hover effects */
 a:hover {
     text-decoration: none; }
@@ -155,7 +141,7 @@ div.github-div {
 
 html[theme='dark'] div.github-div {
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: rgb(23,25,27);;  /* CLOSE to this, but not due to close to gradient background. var(--arm-color-base) at 75% transparency */
+    background-color: var(--ads-ui-ink-100);
 
 }
 
@@ -185,12 +171,12 @@ ads-card.multi-install-card {
     --ads-card-box-shadow-hover: 0 3px 6px 1px rgba(0,0,0,0.16);  /* 0 1px 3px 3px rgba(0,0,0,0.25); */
 } 
 html[theme='dark'] ads-card.multi-install-card {
-    --ads-card-background-color: var(--arm-color-base);
+    --ads-card-background-color: var(--ads-ui-ink-80);
     --ads-card-border-color: #000000;
     /*--ads-card-box-shadow:  0 3px 12px rgba(0, 0, 0, 0.5);*/
 
     /* hover state */
-    --ads-card-background-color-hover: var(--arm-color-base);
+    --ads-card-background-color-hover: var(--ads-ui-ink-80);
     --ads-card-border-color-hover: transparent;
     /*--ads-card-box-shadow-hover:  0 3px 12px rgba(0, 0, 0, 0.5);*/
 

assets/css/content.css

@@ -16,6 +16,10 @@
 
 
 /* Box around content (learning paths and tools) */
+html[theme="dark"] #main {
+    background-color: var(--ads-ui-ink-90);
+}
+
 div.content-box {
     padding-left: 16px;
     padding-right: 16px;
@@ -28,7 +32,7 @@ div.content-box {
     border-radius: 5px;
 
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: rgba(31,32,35,0.75);  /* var(--arm-color-base) at 75% transparency */
+    background-color: var(--ads-ui-ink-100);
 }
 html[theme="light"] div.content-box {
     background-color: white;

assets/css/cross-page.css

@@ -92,7 +92,7 @@ ads-search#search-box.install-guide{
     padding-right: 14px;
 }
 ads-search {
-    --ads-search-button-background-color: var(--arm-color-base);
+    --ads-search-button-background-color: #7233F7;
 }
 
 /* Colors of buttons & links to match DevHub styling */
@@ -166,9 +166,7 @@ table tbody td {
 /* Fix Nav Masthead Breadcrumb container */
 /*************************************/
 #nav-masthead-breadcrumbs {
-    background-image: url("/img/masthead-background.webp"); /* The image used */
-    background-color: var(--arm-color-footing);            /* Used if the image is unavailable */
-    background-size: cover;
+    background-color: var(--ads-ui-ink-100);
 }
 
 
@@ -212,7 +210,6 @@ arm-top-navigation:not(:defined) {
 
 /* Fix Masthead Height */
 #expanded-masthead  {
-        background-color: transparent;
         min-height: 100px;                  /* Keep baseline height for short titles */
         height: auto;                       /* Allow 2-line titles to expand */
         background-position: center; 
@@ -229,31 +226,33 @@ arm-top-navigation:not(:defined) {
 ads-masthead {
     --ads-masthead-border-bottom-color: transparent;
 }
-    
-
 
-ads-breadcrumbs {
-    --ads-breadcrumb-color: var(--lp-accent-secondary);
-    --ads-breadcrumb-current-color: white;
-    --ads-breadcrumb-hover-color: var(--lp-hover-text);
-    --ads-breadcrumbs-link-color: var(--lp-accent-secondary);
-    --ads-breadcrumbs-link-color-hover: var(--lp-hover-text);
-    --ads-breadcrumbs-link-color-visited: var(--lp-accent-secondary);
-    --ads-breadcrumbs-current-color: white;
+/* Align the alert icon with the masthead title while its surface spans the page. */
+#color-refresh-alert-container {
+    background-color: #F0F0F0;
+    overflow: hidden;
 }
 
-#breadcrumb-element ads-breadcrumb[current] {
-    --ads-breadcrumb-color: white;
-    --ads-breadcrumb-current-color: white;
-    --ads-breadcrumbs-current-color: white;
-    color: white;
+/* Bypass ADS's fixed 70% heading wrapper while retaining its typography. */
+ads-masthead #ads-masthead-title {
+    box-sizing: border-box;
+    color: var(--ads-masthead-color, #E6E6E9);
+    font-size: 32px;
+    line-height: 35px;
+    max-height: none;
+    overflow: visible;
+    overflow-wrap: anywhere;
+    white-space: normal;
+    width: calc(100% - 32px);
 }
 
-#breadcrumb-element ads-breadcrumb:not([current]):hover {
-    --ads-breadcrumb-color: var(--lp-hover-text);
-    --ads-breadcrumbs-link-color: var(--lp-hover-text);
-    color: var(--lp-hover-text);
+@media (min-width: 768px) {
+    ads-masthead #ads-masthead-title {
+        font-size: 48px;
+        line-height: 53px;
+    }
 }
+    
 
 
 /* Hide breadcrumb when small screen. */
@@ -267,7 +266,7 @@ ads-breadcrumbs {
 /* Replicate style of breadcrumb in masthead when alone. */
 #only-breadcrumb-masthead {
     width: 100%;
-    background-color: var(--arm-color-footing);
+    background-color: var(--ads-ui-ink-100);
     padding-top: 8px;
     padding-left: 15px; /* u-padding-left-2-1/2 */
     padding-bottom: 8px; 
@@ -292,9 +291,7 @@ ads-breadcrumbs {
     width: fit-content;
     height: fit-content;
 
-    background: -webkit-linear-gradient(left,var(--arm-green), var(--arm-light-blue));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--lp-accent-secondary);
 }
 .beta-homepage {
     vertical-align: top;
@@ -328,7 +325,7 @@ ads-breadcrumbs {
     margin: -1px;
     z-index: -1;
     border-radius: inherit;
-    background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary));
+    background: #848192;
     opacity: 0;
     transition: opacity 0.3s ease; 
 }
@@ -338,48 +335,12 @@ ads-breadcrumbs {
 
 
 
-.gradient-box-tool {
-    /*display: inline-block;*/
-    position: relative;
-    border-radius: 0px;
-    z-index:1;
-  }
-
-.gradient-box-tool::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 1px;
-    left: 2px;
-    margin: -2px;
-    z-index: -1;
-    border-radius: inherit;
-    background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary));
-    opacity: 0;
-    transition: opacity 0.3s ease; 
-}
-.gradient-box-tool:hover::before {
-    opacity: 1;
-}
-
-
-
-
-html[theme="dark"] .orchard-breeze-text {
-    background: -webkit-linear-gradient(left,var(--arm-green), var(--arm-light-blue));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-html[theme="dark"] .fullbourn-sunrise-text {
-    background: -webkit-linear-gradient(left,var(--arm-yellow), var(--arm-orange));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
+html[theme="dark"] .orchard-breeze-text,
+html[theme="dark"] .fullbourn-sunrise-text,
 html[theme="dark"] .minhang-mist-text {
-    background: -webkit-linear-gradient(left,var(--arm-light-blue), var(--arm-light-grey));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    background: none;
+    color: #E6E6E9;
+    -webkit-text-fill-color: currentColor;
 }
 
 
@@ -410,36 +371,9 @@ html[theme='light'] body {
 
 /* Dark Theme */
 /****************************************************/
-/* Mobile background */
-@media (max-width: 768px) {
-    html[theme='dark'] body {
-        background-image: url("/img/bg-img-736x800-purple.webp");
-        background-color: var(--arm-color-footing);      
-        background-position: 0% 100%;
-        background-attachment: fixed;
-        background-size: 100% 100%;         /* Forces smaller width; best solution for mobile sizes */
-    } 
-}
-/* Laptop background */
-@media (min-width: 768px) {
-    html[theme='dark'] body {
-        background-image: url("/img/bg-img-1920x1600-purple.webp");
-        background-color: var(--arm-color-footing);      
-        background-position: 0% 100%;
-        background-attachment: fixed;
-        background-size: cover;             /* Stretches image to fit; best solution for desktop sizes */
-    } 
-}
-
-/* Large Monitor background */
-@media (min-width: 1400px) {
-    html[theme='dark'] body {
-        background-image: url("/img/bg-img-2500x1700-purple.webp");
-        background-color: var(--arm-color-footing);      
-        background-position: 0% 100%;
-        background-attachment: fixed;
-        background-size: cover;             /* Stretches image to fit; best solution for desktop sizes */
-    } 
+html[theme='dark'] body {
+    background-color: var(--ads-ui-ink-100);
+    background-image: none;
 }
 
 

assets/css/home.css

@@ -16,6 +16,12 @@ ads-breadcrumbs:not(:defined) {
     min-height: 32px;
 }
 
+/* The homepage uses the ADS v5 Arm Ink background hierarchy. */
+html[theme='dark'] body {
+    background-color: var(--ads-ui-ink-100);
+    background-image: none;
+}
+
 /* CLS fix: lock the breadcrumb masthead height so hydration doesn't shift content below */
 #only-breadcrumb-masthead {
     height: 40px;
@@ -43,16 +49,16 @@ ads-breadcrumbs:not(:defined) {
     min-height: 152px;
     height: 152px;
     align-items: center;
-    background-color: var(--arm-color-base);
+    background-color: var(--ads-ui-ink-80);
     border: 1px solid transparent;
     border-color: #000000;
     transition: 
         transform 0.3s ease-in-out,
         border-color 0.3s ease-in-out;
 }
 .main-topic-card:hover {
-    background-color: var(--arm-color-base);
-    border-color: var(--arm-green);
+    background-color: var(--ads-ui-ink-80);
+    border-color: #848192;
     cursor: pointer;
     transform: translateY(-3px); /* move up 3px */
 
@@ -86,23 +92,21 @@ ads-breadcrumbs:not(:defined) {
     height: 50px;
     object-fit: contain;
     display: block;
+    /* Figma specifies neutral white icons instead of the legacy purple gradients. */
+    filter: brightness(0) invert(1);
 }
 
-.main-topic-card img[src$="mobile-graphics-and-gaming.svg"],
-.main-topic-card img[src$="ai.svg"] {
-    transform: scale(1.16);
-    transform-origin: center;
-}
-
-.main-topic-card img[src$="embedded-and-microcontrollers.svg"] {
-    transform: scale(1.34);
+/* The two legacy SVGs fill their view boxes more fully than the new 64px icon set. */
+.main-topic-card img[src$="automotive.svg"],
+.main-topic-card img[src$="laptops-and-desktops.svg"] {
+    transform: scale(0.82);
     transform-origin: center;
 }
 
 /* Title styling */
 /**************************************/
 .main-topic-title {
-    color: var(--arm-light-blue);
+    color: #E6E6E9;
     font-weight: 700;
     font-size: 20px;
     line-height: 1.2;
@@ -209,7 +213,7 @@ table.contributor-table th {
     color: black;
 }
 table.contributor-table tbody { 
-    background-color: var(--arm-color-base); 
+    background-color: var(--ads-ui-ink-90);
 }