Bug 1865750 - Remove "Base" comment heading on both `tokens-brand.css…

…` and `tokens-platform.css` above "Typography" tokens r=desktop-theme-reviewers,reusable-components-reviewers,mstriemer,dao

Removed
- "Base" comment heading on brand and platform sheets that don't include base tokens.

Fixed
- Commend headings in all token files

Differential Revision: https://phabricator.services.mozilla.com/D194165

toolkit/themes/shared/design-system/tokens-brand.css

@@ -6,17 +6,13 @@
 
 :root,
 :host(.anonymous-content-host) {
-  /* Base */
-  /* Do not use base tokens directly as they don't carry any meaning and are used to set our base. Refer to Application tokens below. */
-  /* Typography */
   /** Font size **/
-  --font-size-root: 15px;
+  --font-size-root: 15px;       /* Set at the `:root`. Do not use */
   --font-size-small: 0.867rem;  /* 13px */
   --font-size-large: 1.133rem;  /* 17px */
   --font-size-xlarge: 1.467rem; /* 22px */
   --font-size-xxlarge: 2.2rem;  /* 33px */
 
-  /* Application */
   /** Font weight **/
   --font-weight-light: 300;
 
@@ -28,10 +24,10 @@
 @media not (prefers-contrast) {
   :root,
   :host(.anonymous-content-host) {
-    /* Border */
+    /** Border **/
     --border-interactive-color: light-dark(var(--color-gray-60), var(--color-gray-50));
 
-    /* Button */
+    /** Button **/
     /* TODO Bug 1821203 - Gray use needs to be consolidated */
     --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
     --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent);
@@ -43,7 +39,7 @@
     --link-color-active: var(--brand-color-accent-active);
     --link-color-visited: var(--link-color);
 
-    /* Color */
+    /** Color **/
     --color-accent-primary: var(--brand-color-accent);
     --color-accent-primary-hover: var(--brand-color-accent-hover);
     --color-accent-primary-active: var(--brand-color-accent-active);
@@ -53,7 +49,7 @@
     --brand-color-accent-active: light-dark(var(--color-blue-70), var(--color-cyan-20));
     --color-canvas: light-dark(var(--color-white), var(--color-gray-90));
 
-    /* Text */
+    /** Text **/
     --text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
     --text-color-deemphasized: light-dark(
       color-mix(in srgb, currentColor 69%, transparent),

toolkit/themes/shared/design-system/tokens-platform.css

@@ -7,26 +7,15 @@
 @media not (prefers-contrast) {
   :root,
   :host(.anonymous-content-host) {
-    /* Base */
-    /* Do not use base tokens directly as they don't carry any meaning and are used to set our base. Refer to Application tokens below. */
-    /* Typography */
-    /** Font size **/
-    --font-size-root: unset;
-    --font-size-small: unset;
-    --font-size-large: unset;
-    --font-size-xlarge: unset;
-    --font-size-xxlarge: unset;
-
-    /* Application */
-    /* Border */
+    /** Border **/
     --border-interactive-color: color-mix(in srgb, currentColor 15%, var(--color-gray-60));
 
-    /* Button */
+    /** Button **/
     --button-background-color: var(--button-bgcolor);
     --button-background-color-hover: var(--button-hover-bgcolor);
     --button-background-color-active: var(--button-active-bgcolor);
 
-    /* Color */
+    /** Color **/
     --color-accent-primary: var(--platform-color-accent);
     --color-accent-primary-hover: var(--platform-color-accent-hover);
     --color-accent-primary-active: var(--platform-color-accent-active);
@@ -35,6 +24,13 @@
     --platform-color-accent-active: var(--button-primary-active-bgcolor);
     --color-canvas: Canvas;
 
+    /** Font size **/
+    --font-size-root: unset;
+    --font-size-small: unset;
+    --font-size-large: unset;
+    --font-size-xlarge: unset;
+    --font-size-xxlarge: unset;
+
     /** Font weight **/
     --font-weight-light: unset;
 
@@ -48,7 +44,7 @@
     --link-color-active: ActiveText;
     --link-color-visited: var(--link-color);
 
-    /* Text */
+    /** Text **/
     --text-color: currentColor;
   }
 }

toolkit/themes/shared/design-system/tokens-shared.css

@@ -98,7 +98,7 @@
 @media not (prefers-contrast) {
   :root,
   :host(.anonymous-content-host) {
-    /* Color */
+    /** Color **/
     --color-background-information: light-dark(var(--color-blue-05), var(--color-blue-80));
     --color-background-success: light-dark(var(--color-green-05), var(--color-green-80));
     --color-background-warning: light-dark(var(--color-yellow-05), var(--color-yellow-80));
@@ -138,7 +138,7 @@
     --link-color-active: ActiveText;
     --link-color-visited: var(--link-color);
 
-    /* Color */
+    /** Color **/
     --color-canvas: Canvas;
     --color-background-information: var(--color-canvas);
     --color-background-success: var(--color-canvas);
@@ -156,7 +156,7 @@
     --icon-color-warning: var(--icon-color);
     --icon-color-critical: var(--icon-color);
 
-    /* Text */
+    /** Text **/
     --text-color: CanvasText;
     --text-color-deemphasized: inherit;
   }
@@ -166,13 +166,13 @@
        TODO(emilio): These seem rather sketchy */
     :root,
     :host(.anonymous-content-host) {
-      /* Border */
+      /** Border **/
       --border-interactive-color: ButtonText;
       --border-interactive-color-hover: SelectedItem;
       --border-interactive-color-active: ButtonText;
       --border-interactive-color-disabled: GrayText;
 
-      /* Color */
+      /** Color **/
       --color-accent-primary: ButtonText;
       --color-accent-primary-hover: SelectedItem;
       --color-accent-primary-active: SelectedItem;