[DOC-299] Rebranding theme with latest Spectrum CSS and branding content

.gitignore

@@ -12,6 +12,10 @@ xsdvi.log
 npm-debug.log
 CNAME
 _config.local.yml
+app.css.map
+print.css.map
+search.css.map
+.vscode/
 
 # OS generated files #
 ######################

README.md

@@ -1,37 +1,43 @@
 # DevDocs theme
 
-A Jekyll theme for Magento documentation sites. Uses NPM to build SCSS and JS files. Includes basic layouts and html includes.
+A Jekyll theme for Adobe Commerce documentation sites. Uses NPM to build SCSS and JS files. Includes basic layouts and html includes.
 
 ## How to apply the theme to your project
 
-1. In your project `Gemfile`, add this: 
-```
+1. In your project `Gemfile`, add this:
+
+```bash
 gem 'devdocs', git: 'https://github.com/magento-devdocs/devdocs-theme.git'
 ```
-2. Then, in your Jekyll `_config.yml` file, add this: 
-```
+
+1. Then, in your Jekyll `_config.yml` file, add this:
+
+```bash
 theme: devdocs
 ```
-3. Do a `bundle install` to fetch the theme and install all dependencies.
 
+1. Do a `bundle install` to fetch the theme and install all dependencies.
 
 ## Developing the theme
 
 Do a `npm install` and then `bundle install`.
 Then run `npm run watch:all`.
 
-
 ## Using theme locally
 
 1. To work with the theme locally and test how it works with DevDocs or any project that uses the theme, you'll want to specify this theme as local gem:
-```
+
+```bash
 bundle config local.devdocs /path/to/theme/git/repository
 ```
-2. Now you can build your project locally, and it will look for the latest theme gem in your filesystem instead of GitHub. Just make sure that your project requires the same branch as your local theme branch:
-```
+
+1. Now you can build your project locally, and it will look for the latest theme gem in your filesystem instead of GitHub. Just make sure that your project requires the same branch as your local theme branch:
+
+```bash
 gem 'devdocs', git: 'https://github.com/magento-devdocs/devdocs-theme.git', :branch => "your_branch_name"
 ```
-3. Do a `bundle install` in your project to get the latest theme from local filesystem.
+
+1. Do a `bundle install` in your project to get the latest theme from local filesystem.
 
 ## How to contribute
 

_config.yml

@@ -1,5 +1,5 @@
-title: Magento Documentation Theme
-description: Templates, styles and scripts for all Magento Documentation portals.
+title: Adobe Commerce Documentation Theme
+description: Templates, styles and scripts for Adobe Commerce Documentation portals.
 logo: Docs Theme
 baseurl: ""
 permalink: pretty
@@ -38,7 +38,7 @@ defaults:
       feedback_link: true
       github_files: https://github.com/magento-devdocs/devdocs-theme/blob/
       github_repo: https://github.com/magento-devdocs/devdocs-theme/
-      
+
   -
     scope:
       path: "video"
@@ -72,11 +72,11 @@ exclude:
   - .idea
 
 app_switcher:
-  apps: 
+  apps:
     - label: Developer
       children:
 
-      - label: Commerce Developer Documentation
+      - label: Commerce Developer Guide
         url: https://devdocs.magento.com/
 
       - label: PWA Studio

_data/var.yml

@@ -9,30 +9,30 @@
 # Enterprise Cloud Edition (ECE)  ---> Commerce Cloud
 # Enterprise Edition for B2B      ---> Commerce for B2B
 
-#NOTE: The new product name variables use the old product name abbreviations (e.g., ce, ee, ece, b2b). 
+#NOTE: The new product name variables use the old product name abbreviations (e.g., ce, ee, ece, b2b).
 
 # Product Name variables
 
 ce: Magento Open Source
-ee: Magento Commerce
-b2b: Magento Commerce for B2B
-mbi: Magento Business Intelligence
+ee: Adobe Commerce
+b2b: B2B for Adobe Commerce
+mbi: Reporting for Commerce
 
 # Cloud product name variables
 
-ece: Magento Commerce Cloud
-csuite: Magento Commerce Cloud Suite
+ece: Adobe Commerce
+csuite: Adobe Commerce Suite
 ct: ece-tools
-mcp-prod: Magento Cloud Patches
-mcp: magento-cloud-patches
-mcd: magento-cloud-docker
-mcd-prod: Magento Cloud Docker
-mcc-prod: Magento Cloud Components
-mcc: magento-cloud-components
+mcp-prod: Cloud Patches for Adobe Commerce
+mcp: adobe-commerce-patches
+mcd: adobe-commerce-docker
+mcd-prod: Docker for Adobe Commerce
+mcc-prod: Cloud Components for Adobe Commerce
+mcc: adobe-commerce-components
 
 # TIP: Use the following syntax to use a variable in the documentation source: {{site.data.var.xx}} where xx
 # is the variable value.
 
-# Magento-developed extension (MDE) variables
+# Adobe-developed extension (ADE) variables
 
 im: Inventory Management

_includes/grid.html

@@ -1,10 +1,10 @@
 <div class="columns {% if include.large %}large-{{include.large}}{% endif %}">
   {% for section in include.sections %}
-    <div class="column">
-      <a href="{{ site.baseurl }}{{ section.url }}" class="card">
-        <h3 class="no_toc">{{ section.title }}</h3>
-        <p>{{ section.content }}</p>
-      </a>
-    </div>
+  <div class="column">
+    <a href="{{ site.baseurl }}{{ section.url }}" class="card">
+      <h3 class="spectrum-Heading .spectrum-Heading--sizeL no_toc">{{ section.title }}</h3>
+      <p>{{ section.content }}</p>
+    </a>
+  </div>
   {% endfor %}
-  </div>
+</div>

_includes/home/intro.html

@@ -1,6 +1,6 @@
 <section class="home-intro">
   <div class="container">
-    <h1 class="spectrum-Heading1 spectrum-Heading--XXL">{{ site.title }}</h1>
+    <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">{{ site.title }}</h1>
     <p class="lead">{{ site.description }}</p>
 
     {% include layout/search-form.html %}

_includes/layout/app-switcher.html

@@ -1,19 +1,23 @@
-
 <div class="app-switcher">
   <div class="dropdown">
-    <button id="app-switcher-trigger" class="app-switcher-trigger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Documentation sites"></button>
-    <div class="dropdown-menu spectrum-Popover spectrum-Dropdown-popover spectrum-Popover--bottom dropdown-menu-right" aria-labelledby="app-switcher-trigger" role="menu">
+    <button id="app-switcher-trigger" class="app-switcher-trigger" data-toggle="dropdown" aria-haspopup="true"
+      aria-expanded="false" aria-label="Documentation sites"></button>
+    <div class="dropdown-menu spectrum-Popover spectrum-Dropdown-popover spectrum-Popover--bottom dropdown-menu-right"
+      aria-labelledby="app-switcher-trigger" role="menu">
       <div class="app-switcher-content">
-      {% for group in site.app_switcher.apps %}
-      <div class="app-switcher-group">
-        <span class="spectrum-Menu-sectionHeading" id="app-switcher-category-{{ forloop.index }}">{{ group.label }}</span>
-        <ul class="spectrum-Menu" role="group" aria-labelledby="app-switcher-category-{{ forloop.index }}">
-        {% for item in group.children %}
-        <li class="spectrum-Menu-item" role="menuitem"><a class="spectrum-Menu-itemLabel" href="{{ item.url }}?itm_source={{ site.algolia.index_name }}&itm_medium=top_nav&itm_campaign=app_switcher&itm_term={{ item.label }}">{{ item.label }}</a></li>
+        {% for group in site.app_switcher.apps %}
+        <div class="spectrum-Menu app-switcher-group">
+          <span class="spectrum-Menu-sectionHeading"
+            id="app-switcher-category-{{ forloop.index }}">{{ group.label }}</span>
+          <ul class="spectrum-Menu" role="group" aria-labelledby="app-switcher-category-{{ forloop.index }}">
+            {% for item in group.children %}
+            <li class="spectrum-Menu-item" role="menuitem"><a class="spectrum-Menu-itemLabel"
+                href="{{ item.url }}?itm_source={{ site.algolia.index_name }}&itm_medium=top_nav&itm_campaign=app_switcher&itm_term={{ item.label }}">{{ item.label }}</a>
+            </li>
+            {% endfor %}
+          </ul>
+        </div>
         {% endfor %}
-        </ul>
-      </div>
-      {% endfor %}
       </div>
     </div>
   </div>

_includes/layout/edition-callout.html

@@ -1,32 +1,60 @@
 {% if page.ee_only == true %}
-<div class="bs-callout spectrum-Alert edition-callout ee-only">
+<div class="break">
+  <span class="edition-Label ee-only">{{site.data.var.ee}} only.
+    <a class="spectrum-Link" href="https://docs.magento.com/user-guide/getting-started.html#product-editions">
+      Learn more.</a>
+  </span>
+</div>
+{% endif %}
+{% if page.b2b_only == true %}
+<div class="break">
+  <span class="edition-Label b2b-only">{{site.data.var.b2b}} only.
+    <a class="spectrum-Link" href="https://docs.magento.com/user-guide/getting-started.html#product-editions">
+      Learn more.</a>
+  </span>
+</div>
+{% endif %}
+{% if page.ce_only == true %}
+<div class="break">
+  <span class="edition-Label ce-only">{{site.data.var.ce}} only.
+    <a class="spectrum-Link" href="https://docs.magento.com/user-guide/getting-started.html#product-editions">
+      Learn more.</a>
+  </span>
+</div>
+{% endif %}
+
+<!-- {% if page.ee_only == true %}
+<div class="bs-callout spectrum-Alert-edition edition-callout ee-only">
   <i class="edition-marker-icon-image spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Alert-icon"></i>
-  <h4 class="spectrum-Alert-header">{{site.data.var.ee}} only</h4>
-  <div class="spectrum-Alert-content">
-    The content on this page is for {{site.data.var.ee}} only. 
+  <h4 class="spectrum-Alert-header-edition">{{site.data.var.ee}} only</h4>
+  <div class="spectrum-Alert-content-edition">
+    The content on this page is for {{site.data.var.ee}} only.
     <a href="https://docs.magento.com/user-guide/getting-started.html#product-editions">Learn more</a>
   </div>
 </div>
-{% endif %}
-
-{% if page.b2b_only == true %}
-<div class="bs-callout spectrum-Alert edition-callout b2b-only">
+{% endif %} {% if page.b2b_only == true %}
+<div class="bs-callout spectrum-Alert-edition edition-callout b2b-only">
   <i class="edition-marker-icon-image spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Alert-icon"></i>
-  <h4 class="spectrum-Alert-header">{{site.data.var.b2b}} only</h4>
-  <div class="spectrum-Alert-content">
-    The content on this page is for {{site.data.var.b2b}} only. 
+  <h4 class="spectrum-Alert-header-edition">{{site.data.var.b2b}} only</h4>
+  <div class="spectrum-Alert-content-edition">
+    The content on this page is for {{site.data.var.b2b}} only.
     <a href="https://docs.magento.com/user-guide/getting-started.html#product-editions">Learn more</a>
   </div>
 </div>
-{% endif %}
-
-{% if page.ce_only == true %}
-<div class="bs-callout spectrum-Alert edition-callout ce-only">
+{% endif %} {% if page.ce_only == true %}
+<div class="bs-callout spectrum-Alert-edition edition-callout ce-only">
   <i class="edition-marker-icon-image spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Alert-icon"></i>
-  <h4 class="spectrum-Alert-header">{{site.data.var.ce}} only</h4>
-  <div class="spectrum-Alert-content">
-    The content on this page is for {{site.data.var.ce}} only. 
+  <h4 class="spectrum-Alert-header-edition">{{site.data.var.ce}} only</h4>
+  <div class="spectrum-Alert-content-edition">
+    The content on this page is for {{site.data.var.ce}} only.
     <a href="https://docs.magento.com/user-guide/getting-started.html#product-editions">Learn more</a>
   </div>
 </div>
-{% endif %} 
+{% endif %}
+
+<div class="spectrum-Tags" role="list" aria-label="Tags">
+  <div class="spectrum-Tags-item" role="listitem" tabindex="0">
+    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
+    <span class="spectrum-Tags-itemLabel">Shantanu</span>
+  </div>
+</div> -->

_includes/layout/github-links.html

@@ -1,18 +1,17 @@
-<div class="github-links spectrum-ButtonGroup">
-{%- if page.github_link == true -%}
-  <div class="github-link spectrum-ButtonGroup-item">
-    <a class="improve-page spectrum-ActionButton spectrum-ActionButton--quiet" href="{{ page.github_files }}{{ page.github_path }}" target="_blank">
-      <img class="spectrum-Icon spectrum-Icon--sizeS" src="{{ site.baseurl }}/assets/i/icons/edit.svg" alt="" />
-      <span class="spectrum-ActionButton-label">Edit on GitHub</span> 
-    </a>
-  </div>
-{%- endif -%}
-{%- if page.feedback_link == true -%}
-  <div class="new-issue spectrum-ButtonGroup-item">
-    <a class="spectrum-ActionButton spectrum-ActionButton--quiet" href="{{ page.github_repo }}issues/new?title=Feedback on page: {{ page.url }}" target="_blank">
-      <img class="spectrum-Icon spectrum-Icon--sizeS"  src="{{ site.baseurl }}/assets/i/icons/bug.svg" alt="" />
-      <span class="spectrum-ActionButton-label">Log an Issue</span>
-    </a>
-  </div>
-{%- endif -%}
+<div class="github-links spectrum-ActionGroup--compact ActionGroup--justified">
+  {%- if page.github_link == true -%}
+  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item"
+    onclick="window.location.href='{{ page.github_files }}{{ page.github_path }}';" target="_blank">
+    <img class="spectrum-Icon spectrum-Icon--sizeS" src="{{ site.baseurl }}/assets/i/icons/edit.svg" alt="" />
+    <span class="spectrum-ActionButton-label">Edit on GitHub</span>
+  </button>
+  {%- endif -%}
+  {%- if page.feedback_link == true -%}
+  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item"
+    onclick="window.location.href='{{ page.github_repo }}issues/new?title=Feedback on page: {{ page.url }}';"
+    target="_blank">
+    <img class="spectrum-Icon spectrum-Icon--sizeS" src="{{ site.baseurl }}/assets/i/icons/bug.svg" alt="" />
+    <span class="spectrum-ActionButton-label">Log an Issue</span>
+  </button>
+  {%- endif -%}
 </div>

_includes/layout/header.html

@@ -16,16 +16,8 @@
 	{% include layout/header-styles.html %}
 	{% include layout/header-scripts.html %}
 
-	<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="https://magento.com/favicon.ico">
-	<link rel="apple-touch-icon" type="image/png" href="https://magento.com/apple-touch-icon.png">
-	<link rel="apple-touch-icon" type="image/png" sizes="57x57" href="https://magento.com/apple-touch-icon-57x57.png">
-	<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="https://magento.com/apple-touch-icon-72x72.png">
-	<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="https://magento.com/apple-touch-icon-76x76.png">
-	<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="https://magento.com/apple-touch-icon-114x114.png">
-	<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="https://magento.com/apple-touch-icon-120x120.png">
-	<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="https://magento.com/apple-touch-icon-144x144.png">
-	<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="https://magento.com/apple-touch-icon-152x152.png">
-	<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="https://magento.com/apple-touch-icon-180x180.png">
+	<link rel="icon" href="https://www.adobe.com/favicon.ico" type="image/x-icon"/>
+	<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="https://adobe.com/favicon.ico">
 
 </head>
 <body class="layout-{{ page.layout }}">