[CORL-503] More stable CSS classNames (#2477)

* feat: add more css classnames

* fix: snapshots

src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap

@@ -42,6 +42,8 @@ exports[`renders form 1`] = `
             >
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+                data-color="primary"
+                data-variant="filled"
                 disabled={false}
                 onBlur={[Function]}
                 onFocus={[Function]}

src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap

@@ -97,6 +97,8 @@ Make sure it is unique and be sure to keep it secure.
                 </div>
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+                  data-color="primary"
+                  data-variant="filled"
                   disabled={false}
                   onBlur={[Function]}
                   onFocus={[Function]}

src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap

@@ -80,6 +80,8 @@ exports[`accepts valid email 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -187,6 +189,8 @@ exports[`checks for invalid email 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -297,6 +301,8 @@ exports[`renders addEmailAddress view 1`] = `
               </div>
               <button
                 className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+                data-color="primary"
+                data-variant="filled"
                 disabled={false}
                 onBlur={[Function]}
                 onFocus={[Function]}
@@ -409,6 +415,8 @@ exports[`shows error when submitting empty form 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -504,6 +512,8 @@ GraphQL request (4:3)
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -585,6 +595,8 @@ exports[`successfully sets email 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}

src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap

@@ -82,6 +82,8 @@ we require users to create a password.
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -194,6 +196,8 @@ we require users to create a password.
               </div>
               <button
                 className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+                data-color="primary"
+                data-variant="filled"
                 disabled={false}
                 onBlur={[Function]}
                 onFocus={[Function]}
@@ -295,6 +299,8 @@ we require users to create a password.
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -392,6 +398,8 @@ GraphQL request (4:3)
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -475,6 +483,8 @@ we require users to create a password.
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}

src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap

@@ -59,6 +59,8 @@ exports[`checks for invalid username 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -148,6 +150,8 @@ exports[`renders createUsername view 1`] = `
               </div>
               <button
                 className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+                data-color="primary"
+                data-variant="filled"
                 disabled={false}
                 onBlur={[Function]}
                 onFocus={[Function]}
@@ -226,6 +230,8 @@ exports[`shows error when submitting empty form 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -300,6 +306,8 @@ GraphQL request (4:3)
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -360,6 +368,8 @@ exports[`successfully sets username 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}

src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap

@@ -111,6 +111,8 @@ exports[`show restricted screen for commenters and staff 1`] = `
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+            data-color="primary"
+            data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -244,6 +246,8 @@ exports[`show restricted screen for commenters and staff 2`] = `
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+            data-color="primary"
+            data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}

src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap

@@ -97,6 +97,8 @@ exports[`accepts correct password 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -216,6 +218,8 @@ exports[`accepts valid email 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -348,6 +352,8 @@ exports[`checks for invalid email 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -531,6 +537,8 @@ exports[`renders sign in form 1`] = `
               </div>
               <button
                 className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+                data-color="brand"
+                data-variant="filled"
                 disabled={false}
                 onBlur={[Function]}
                 onFocus={[Function]}
@@ -677,6 +685,8 @@ exports[`shows error when submitting empty form 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -790,6 +800,8 @@ exports[`shows server error 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}

src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap

@@ -47,6 +47,8 @@ exports[`renders community 1`] = `
                 <button
                   aria-label="Search"
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment UserTableFilter-adornment"
+                  data-color="dark"
+                  data-variant="adornment"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
@@ -185,7 +187,9 @@ exports[`renders community 1`] = `
       >
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+          data-color="primary"
           data-testid="invite-users-button"
+          data-variant="filled"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -248,6 +252,8 @@ exports[`renders community 1`] = `
             >
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -315,6 +321,8 @@ exports[`renders community 1`] = `
             >
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -350,6 +358,8 @@ exports[`renders community 1`] = `
                 <button
                   aria-label="Change role"
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
+                  data-color="regular"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -413,6 +423,8 @@ exports[`renders community 1`] = `
             >
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -448,6 +460,8 @@ exports[`renders community 1`] = `
                 <button
                   aria-label="Change role"
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
+                  data-color="regular"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -511,6 +525,8 @@ exports[`renders community 1`] = `
             >
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -546,6 +562,8 @@ exports[`renders community 1`] = `
                 <button
                   aria-label="Change role"
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
+                  data-color="regular"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -590,6 +608,8 @@ exports[`renders community 1`] = `
                 <button
                   aria-label="Change user status"
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserStatusChange-button UserStatusChange-fullWidth"
+                  data-color="regular"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -686,6 +706,8 @@ exports[`renders empty community 1`] = `
                 <button
                   aria-label="Search"
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment UserTableFilter-adornment"
+                  data-color="dark"
+                  data-variant="adornment"
                   onBlur={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
@@ -824,7 +846,9 @@ exports[`renders empty community 1`] = `
       >
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+          data-color="primary"
           data-testid="invite-users-button"
+          data-variant="filled"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}

src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap

@@ -96,7 +96,9 @@ exports[`renders configure advanced 1`] = `
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
+            data-color="success"
             data-testid="configure-sideBar-saveChanges"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -162,6 +164,8 @@ each of your site’s stories.
             >
               <button
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+                data-color="primary"
+                data-variant="filled"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}

src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap

@@ -98,6 +98,8 @@ exports[`change settings: during submit: oidc without errors 1`] = `
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+            data-color="primary"
+            data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -261,6 +263,8 @@ the remaining fields. You may also enter the information manually.
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled Button-disabled"
+            data-color="primary"
+            data-variant="filled"
             disabled={true}
             id="configure-auth-oidc-discover"
             onBlur={[Function]}
@@ -577,6 +581,8 @@ For more information visit:
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+            data-color="primary"
+            data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -883,6 +889,8 @@ exports[`change settings: enable oidc configure box 1`] = `
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+            data-color="primary"
+            data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1046,6 +1054,8 @@ the remaining fields. You may also enter the information manually.
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+            data-color="primary"
+            data-variant="filled"
             disabled={false}
             id="configure-auth-oidc-discover"
             onBlur={[Function]}
@@ -1359,6 +1369,8 @@ exports[`change settings: oidc validation errors 1`] = `
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+            data-color="primary"
+            data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1561,6 +1573,8 @@ the remaining fields. You may also enter the information manually.
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+            data-color="primary"
+            data-variant="filled"
             disabled={false}
             id="configure-auth-oidc-discover"
             onBlur={[Function]}
@@ -1890,6 +1904,8 @@ exports[`regenerate sso key 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       id="configure-auth-sso-regenerate"
       onBlur={[Function]}
@@ -2024,7 +2040,9 @@ exports[`renders configure auth 1`] = `
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
+            data-color="success"
             data-testid="configure-sideBar-saveChanges"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -2314,6 +2332,8 @@ integration to register for a new account.
                       </div>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+                        data-color="primary"
+                        data-variant="filled"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -2477,6 +2497,8 @@ the remaining fields. You may also enter the information manually.
                       </div>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled Button-disabled"
+                        data-color="primary"
+                        data-variant="filled"
                         disabled={true}
                         id="configure-auth-oidc-discover"
                         onBlur={[Function]}
@@ -2787,6 +2809,8 @@ integration to register for a new account.
                       </div>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled Button-disabled"
+                        data-color="primary"
+                        data-variant="filled"
                         disabled={true}
                         id="configure-auth-sso-regenerate"
                         onBlur={[Function]}
@@ -3037,6 +3061,8 @@ to create and set up a web application. For more information visit:
                       </div>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+                        data-color="primary"
+                        data-variant="filled"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -3343,6 +3369,8 @@ For more information visit:
                       </div>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+                        data-color="primary"
+                        data-variant="filled"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}

src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap

@@ -96,7 +96,9 @@ exports[`renders configure general 1`] = `
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
+            data-color="success"
             data-testid="configure-sideBar-saveChanges"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -797,6 +799,8 @@ based on the needs of your community.
                     </h1>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={true}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -854,6 +858,8 @@ based on the needs of your community.
                     </h1>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={true}
                       onBlur={[Function]}
                       onClick={[Function]}

src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap

@@ -96,7 +96,9 @@ exports[`renders configure moderation 1`] = `
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
+            data-color="success"
             data-testid="configure-sideBar-saveChanges"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}

src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap

@@ -96,7 +96,9 @@ exports[`renders configure organization 1`] = `
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
+            data-color="success"
             data-testid="configure-sideBar-saveChanges"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}

src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap

@@ -96,7 +96,9 @@ exports[`renders configure wordList 1`] = `
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
+            data-color="success"
             data-testid="configure-sideBar-saveChanges"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}

src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap

@@ -195,6 +195,8 @@ exports[`renders form 1`] = `
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorBrand Button-variantFilled Button-fullWidth"
+            data-color="brand"
+            data-variant="filled"
             disabled={false}
             onBlur={[Function]}
             onFocus={[Function]}

src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap

@@ -142,6 +142,8 @@ exports[`approves comment in reported queue: dangling 1`] = `
                 aria-controls="uuid-0"
                 aria-expanded={false}
                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -367,6 +369,8 @@ exports[`rejects comment in reported queue: dangling 1`] = `
                 aria-controls="uuid-0"
                 aria-expanded={false}
                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -589,6 +593,8 @@ exports[`renders reported queue with comments 1`] = `
                       aria-controls="uuid-0"
                       aria-expanded={false}
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                      data-color="regular"
+                      data-variant="regular"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -798,6 +804,8 @@ exports[`renders reported queue with comments 1`] = `
                       aria-controls="uuid-1"
                       aria-expanded={false}
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                      data-color="regular"
+                      data-variant="regular"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1023,6 +1031,8 @@ exports[`renders reported queue with comments 2`] = `
                       aria-controls="uuid-0"
                       aria-expanded={false}
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                      data-color="regular"
+                      data-variant="regular"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1232,6 +1242,8 @@ exports[`renders reported queue with comments 2`] = `
                       aria-controls="uuid-1"
                       aria-expanded={false}
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                      data-color="regular"
+                      data-variant="regular"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1465,6 +1477,8 @@ exports[`renders reported queue with comments and load more 1`] = `
                 aria-controls="uuid-2"
                 aria-expanded={false}
                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}

src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap

@@ -142,6 +142,8 @@ exports[`approves comment in rejected queue: dangling 1`] = `
                 aria-controls="uuid-0"
                 aria-expanded={false}
                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -364,6 +366,8 @@ exports[`renders rejected queue with comments 1`] = `
                       aria-controls="uuid-0"
                       aria-expanded={false}
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                      data-color="regular"
+                      data-variant="regular"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -573,6 +577,8 @@ exports[`renders rejected queue with comments 1`] = `
                       aria-controls="uuid-1"
                       aria-expanded={false}
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                      data-color="regular"
+                      data-variant="regular"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -801,6 +807,8 @@ exports[`renders rejected queue with comments and load more 1`] = `
                 aria-controls="uuid-2"
                 aria-expanded={false}
                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}

src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap

@@ -108,6 +108,8 @@ exports[`approves single comment 1`] = `
                 aria-controls="uuid-0"
                 aria-expanded={false}
                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -299,6 +301,8 @@ exports[`rejects single comment 1`] = `
                 aria-controls="uuid-0"
                 aria-expanded={false}
                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                data-color="regular"
+                data-variant="regular"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -525,6 +529,8 @@ exports[`renders single comment view 1`] = `
                         aria-controls="uuid-0"
                         aria-expanded={false}
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
+                        data-color="regular"
+                        data-variant="regular"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}

src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap

@@ -44,6 +44,8 @@ exports[`renders empty stories 1`] = `
               <button
                 aria-label="Search"
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment StoryTableFilter-adornment"
+                data-color="dark"
+                data-variant="adornment"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
@@ -193,6 +195,8 @@ exports[`renders empty stories 1`] = `
                 <button
                   aria-label="Change status"
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
+                  data-color="regular"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -262,6 +266,8 @@ exports[`renders empty stories 1`] = `
                 <button
                   aria-label="Change status"
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
+                  data-color="regular"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -349,6 +355,8 @@ exports[`renders stories 1`] = `
               <button
                 aria-label="Search"
                 className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment StoryTableFilter-adornment"
+                data-color="dark"
+                data-variant="adornment"
                 onBlur={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
@@ -498,6 +506,8 @@ exports[`renders stories 1`] = `
                 <button
                   aria-label="Change status"
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
+                  data-color="regular"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -567,6 +577,8 @@ exports[`renders stories 1`] = `
                 <button
                   aria-label="Change status"
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
+                  data-color="regular"
+                  data-variant="regular"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}

src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap

@@ -149,6 +149,8 @@ Your email address will be used to:
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -325,6 +327,8 @@ Your email address will be used to:
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -495,6 +499,8 @@ Your email address will be used to:
             </div>
             <button
               className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+              data-color="primary"
+              data-variant="filled"
               disabled={false}
               onBlur={[Function]}
               onFocus={[Function]}
@@ -675,6 +681,8 @@ Your email address will be used to:
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -839,6 +847,8 @@ GraphQL request (4:3)
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -989,6 +999,8 @@ Your email address will be used to:
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}

src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap

@@ -82,6 +82,8 @@ we require users to create a password.
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -185,6 +187,8 @@ we require users to create a password.
             </div>
             <button
               className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+              data-color="primary"
+              data-variant="filled"
               disabled={false}
               onBlur={[Function]}
               onFocus={[Function]}
@@ -285,6 +289,8 @@ we require users to create a password.
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -382,6 +388,8 @@ GraphQL request (4:3)
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -465,6 +473,8 @@ we require users to create a password.
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}

src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap

@@ -59,6 +59,8 @@ exports[`checks for invalid username 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -139,6 +141,8 @@ exports[`renders createUsername view 1`] = `
             </div>
             <button
               className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+              data-color="primary"
+              data-variant="filled"
               disabled={false}
               onBlur={[Function]}
               onFocus={[Function]}
@@ -216,6 +220,8 @@ exports[`shows error when submitting empty form 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -290,6 +296,8 @@ GraphQL request (4:3)
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -350,6 +358,8 @@ exports[`successfully sets username 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+      data-color="primary"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}

src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap

@@ -79,6 +79,8 @@ reset your password.
             </div>
             <button
               className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+              data-color="primary"
+              data-variant="filled"
               disabled={false}
               onBlur={[Function]}
               onFocus={[Function]}

src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap

@@ -112,6 +112,8 @@ exports[`accepts correct password 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -246,6 +248,8 @@ exports[`accepts valid email 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -374,6 +378,8 @@ exports[`auth configuration renders all auth enabled 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -411,6 +417,8 @@ exports[`auth configuration renders all auth enabled 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -437,6 +445,8 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantFilled GoogleButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -463,6 +473,8 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled OIDCButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -493,6 +505,8 @@ exports[`auth configuration renders only some social login enabled 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -519,6 +533,8 @@ exports[`auth configuration renders only some social login enabled 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantFilled GoogleButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -673,6 +689,8 @@ exports[`checks for invalid email 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -842,6 +860,8 @@ exports[`renders sign in view 1`] = `
               </div>
               <button
                 className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+                data-color="brand"
+                data-variant="filled"
                 disabled={false}
                 onBlur={[Function]}
                 onFocus={[Function]}
@@ -1024,6 +1044,8 @@ exports[`renders sign in view with error 1`] = `
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+            data-color="brand"
+            data-variant="filled"
             disabled={false}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -1177,6 +1199,8 @@ exports[`shows error when submitting empty form 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1305,6 +1329,8 @@ exports[`shows server error 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1426,6 +1452,8 @@ exports[`submits form successfully 1`] = `
     </div>
     <button
       className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+      data-color="brand"
+      data-variant="filled"
       disabled={false}
       onBlur={[Function]}
       onFocus={[Function]}

src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap

@@ -153,6 +153,8 @@ exports[`accepts correct password 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -333,6 +335,8 @@ exports[`accepts valid email 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -513,6 +517,8 @@ exports[`accepts valid username 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -667,6 +673,8 @@ exports[`auth configuration renders all auth enabled 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -704,6 +712,8 @@ exports[`auth configuration renders all auth enabled 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -730,6 +740,8 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantFilled GoogleButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -756,6 +768,8 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular OIDCButton-colorRegular Button-variantFilled OIDCButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -786,6 +800,8 @@ exports[`auth configuration renders only some social login enabled 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -812,6 +828,8 @@ exports[`auth configuration renders only some social login enabled 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular GoogleButton-colorRegular Button-variantFilled GoogleButton-variantFilled Button-fullWidth"
+        data-color="regular"
+        data-variant="filled"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1007,6 +1025,8 @@ exports[`checks for invalid characters in username 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -1200,6 +1220,8 @@ exports[`checks for invalid email 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -1393,6 +1415,8 @@ exports[`checks for too long username 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -1586,6 +1610,8 @@ exports[`checks for too short password 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -1779,6 +1805,8 @@ exports[`checks for too short username 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -1974,6 +2002,8 @@ exports[`renders sign up form 1`] = `
               </div>
               <button
                 className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+                data-color="brand"
+                data-variant="filled"
                 disabled={false}
                 onBlur={[Function]}
                 onFocus={[Function]}
@@ -2170,6 +2200,8 @@ exports[`shows error when submitting empty form 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -2331,6 +2363,8 @@ exports[`shows server error 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -2485,6 +2519,8 @@ exports[`submits form successfully 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
+          data-color="brand"
+          data-variant="filled"
           disabled={false}
           onBlur={[Function]}
           onFocus={[Function]}

src/core/client/stream/App/TabBar.tsx

@@ -20,7 +20,7 @@ const AppTabBar: FunctionComponent<Props> = props => {
       activeTab={props.activeTab}
       onTabClick={props.onTabClick}
     >
-      <Tab className={CLASSES.tabBar.allComments} tabID="COMMENTS">
+      <Tab className={CLASSES.tabBar.comments} tabID="COMMENTS">
         <Localized id="general-tabBar-commentsTab">
           <span>Comments</span>
         </Localized>

src/core/client/stream/classes.ts

@@ -1,4 +1,35 @@
 const CLASSES = {
+  /**
+   * guidlines represents the box containing the guidlines.
+   */
+  guidelines: "coral coral-guidelines",
+
+  /**
+   * closedSitewide represents the box containing the message when comments
+   * are closed sitewide.
+   */
+  closedSitewide: "coral coral-closedSitewide",
+
+  /**
+   * sortMenu contains the dropdown to sort the comments.
+   */
+  sortMenu: "coral coral-sortMenu",
+
+  /**
+   * counter to show e.g. the amount of comments.
+   */
+  counter: "coral coral-counter",
+
+  /**
+   * rte represents the rich-text-editor
+   */
+  rte: {
+    $root: "coral coral-rte",
+    content: "coral coral-rte-content",
+    placeholder: "coral coral-rte-placholder",
+    toolbar: "coral coral-rte-toolbar",
+  },
+
   /**
    * tabBar is all the components in the top tab bar selector.
    */
@@ -9,19 +40,66 @@ const CLASSES = {
     $root: "coral coral-tabBar",
 
     /**
-     * allComments is the button for the "All Comments" tab.
+     * comments is the button for the "Comments" tab.
      */
-    allComments: "coral coral-tabBar-allComments",
+    comments: "coral coral-tabBar-tab coral-tabBar-comments",
 
     /**
      * myProfile is the button for the "My Profile" tab.
      */
-    myProfile: "coral coral-tabBar-myProfile",
+    myProfile: "coral coral-tabBar-tab coral-tabBar-myProfile",
 
     /**
      * configure is the button for the "Configure" tab.
      */
-    configure: "coral coral-tabBar-configure",
+    configure: "coral coral-tabBar-tab coral-tabBar-configure",
+  },
+
+  /**
+   * tabBarComments is all the components in the comments secondary tab bar selector.
+   */
+  tabBarComments: {
+    /**
+     * $root represents the container for the tab buttons.
+     */
+    $root: "coral coral-tabBarSecondary coral-tabBarComments",
+
+    /**
+     * allComments is the button for the "All Comments" tab.
+     */
+    allComments:
+      "coral coral-tabBarSecondary-tab coral-tabBarComments-allComments",
+
+    /**
+     * featured is the button for the "Featured Comments" tab.
+     */
+    featured: "coral coral-tabBarSecondary-tab coral-tabBarComments-featured",
+
+    /**
+     * featuredTooltip is the tooltip next to the fextured tab.
+     */
+    featuredTooltip: "coral coral-tabBarComments-featuredTooltip",
+  },
+
+  /**
+   * tabBarMyProfile is all the components in the my profile secondary tab bar selector.
+   */
+  tabBarMyProfile: {
+    /**
+     * $root represents the container for the tab buttons.
+     */
+    $root: "coral coral-tabBarSecondary coral-tabBarMyProfile",
+
+    /**
+     * myComments is the button for the "My Comments" tab.
+     */
+    myComments:
+      "coral coral-tabBarSecondary-tab coral-tabBarMyProfile-myComments",
+
+    /**
+     * settings is the button for the "Settings" tab.
+     */
+    settings: "coral coral-tabBarSecondary-tab coral-tabBarMyProfile-settings",
   },
 
   /**
@@ -34,9 +112,14 @@ const CLASSES = {
     $root: "coral coral-createComment",
 
     /**
-     * box is the actual commenting input box for creating a new comment.
+     * message is the box containing the messages configured in the story.
      */
-    box: "coral coral-createComment-box",
+    message: "coral coral-createComment-message",
+
+    /**
+     * closed is the box containing the message when the story is closed.
+     */
+    closed: "coral coral-createComment-closed",
 
     /**
      * submit is the button for submitting a new comment.
@@ -59,15 +142,50 @@ const CLASSES = {
      */
     $root: "coral coral-createReplyComment",
 
-    /**
-     * box is the actual commenting input box for creating a new reply.
-     */
-    box: "coral coral-createReplyComment-box",
-
     /**
      * submit is the button for submitting a new reply.
      */
     submit: "coral coral-createReplyComment-submit",
+
+    /**
+     * cancel is the button for cancelling the reply.
+     */
+    cancel: "coral coral-createReplyComment-cancel",
+
+    /**
+     * dimiss is the button to dismiss the message after submit.
+     */
+    dismiss: "coral coral-createReplyComment-dismiss",
+  },
+
+  /**
+   * editComment is the comment edit box where a user can edit his comment.
+   */
+  editComment: {
+    /**
+     * $root represents the container for the edit box.
+     */
+    $root: "coral coral-editComment",
+
+    /**
+     * submit is the button for submitting the edit.
+     */
+    submit: "coral coral-editComment-submit",
+
+    /**
+     * close is the button for closing the edit after it expired.
+     */
+    close: "coral coral-editComment-close",
+
+    /**
+     * cancel is the button for cancelling the edit.
+     */
+    cancel: "coral coral-editComment-cancel",
+
+    /**
+     * dimiss is the button to dismiss the message after submit.
+     */
+    dismiss: "coral coral-editComment-dismiss",
   },
 
   /**
@@ -104,6 +222,11 @@ const CLASSES = {
      * commentTag can be used to target a tag associated with a Comment.
      */
     commentTag: "coral coral-comment-commentTag",
+
+    /**
+     * inReplyTo shows the author of the parent comment.
+     */
+    inReplyTo: "coral coral-comment-inReplyTo",
   },
 };
 

src/core/client/stream/common/Counter.ts

@@ -0,0 +1,13 @@
+import cn from "classnames";
+import { withProps } from "recompose";
+
+import CLASSES from "coral-stream/classes";
+import { Counter } from "coral-ui/components";
+import { PropTypesOf } from "coral-ui/types";
+
+export default withProps<
+  PropTypesOf<typeof Counter>,
+  PropTypesOf<typeof Counter>
+>(({ className }) => ({
+  className: cn(className, CLASSES.counter),
+}))(Counter);

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx

@@ -1,9 +1,11 @@
 import { CoralRTE } from "@coralproject/rte";
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { EventHandler, FunctionComponent, MouseEvent, Ref } from "react";
 import { Field, Form } from "react-final-form";
 
 import { OnSubmit } from "coral-framework/lib/form";
+import CLASSES from "coral-stream/classes";
 import Timestamp from "coral-stream/common/Timestamp";
 import {
   AriaInfo,
@@ -51,7 +53,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = props => {
     <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
       {({ handleSubmit, submitting, pristine, submitError }) => (
         <form
-          className={props.className}
+          className={cn(props.className, CLASSES.editComment.$root)}
           autoComplete="off"
           onSubmit={handleSubmit}
         >
@@ -147,6 +149,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = props => {
                           variant="outlined"
                           disabled={submitting}
                           onClick={props.onClose}
+                          className={CLASSES.editComment.close}
                         >
                           Close
                         </Button>
@@ -161,6 +164,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = props => {
                                 disabled={submitting}
                                 onClick={props.onCancel}
                                 fullWidth={matches}
+                                className={CLASSES.editComment.cancel}
                               >
                                 Cancel
                               </Button>
@@ -174,6 +178,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = props => {
                                 }
                                 type="submit"
                                 fullWidth={matches}
+                                className={CLASSES.editComment.submit}
                               >
                                 Save Changes
                               </Button>

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx

@@ -10,11 +10,11 @@ import {
   withFetch,
   withFragmentContainer,
 } from "coral-framework/lib/relay";
-import { PropTypesOf } from "coral-framework/types";
 
 import { EditCommentFormContainer_comment as CommentData } from "coral-stream/__generated__/EditCommentFormContainer_comment.graphql";
 import { EditCommentFormContainer_settings as SettingsData } from "coral-stream/__generated__/EditCommentFormContainer_settings.graphql";
 import { EditCommentFormContainer_story as StoryData } from "coral-stream/__generated__/EditCommentFormContainer_story.graphql";
+import CLASSES from "coral-stream/classes";
 
 import {
   getSubmitStatus,
@@ -123,6 +123,7 @@ export class EditCommentFormContainer extends Component<Props, State> {
         <ReplyEditSubmitStatus
           status={this.state.submitStatus}
           onDismiss={this.handleOnCancelOrClose}
+          buttonClassName={CLASSES.editComment.dismiss}
         />
       );
     }
@@ -190,5 +191,4 @@ const enhanced = withContext(({ sessionStorage, browserInfo }) => ({
     )
   )
 );
-export type PostCommentFormContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

src/core/client/stream/tabs/Comments/Comment/InReplyTo.tsx

@@ -1,6 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Flex, Icon, Typography } from "coral-ui/components";
 
 import styles from "./InReplyTo.css";
@@ -17,7 +18,7 @@ const InReplyTo: FunctionComponent<Props> = ({ username }) => {
   );
 
   return (
-    <Flex alignItems="center">
+    <Flex alignItems="center" className={CLASSES.comment.inReplyTo}>
       <Icon className={styles.icon}>reply</Icon>{" "}
       <Localized id="comments-inReplyTo" Username={<Username />}>
         <Typography

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx

@@ -63,7 +63,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
               {({ input, meta }) => (
                 <>
                   <HorizontalGutter size="half">
-                    <div className={CLASSES.createReplyComment.box}>
+                    <div>
                       <Localized id="comments-replyCommentForm-rteLabel">
                         <AriaInfo component="label" htmlFor={inputID}>
                           Write a reply
@@ -133,6 +133,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
                             variant="outlined"
                             disabled={submitting}
                             onClick={props.onCancel}
+                            className={CLASSES.createReplyComment.cancel}
                             fullWidth={matches}
                           >
                             Cancel

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx

@@ -14,10 +14,10 @@ import {
   withFragmentContainer,
 } from "coral-framework/lib/relay";
 import { PromisifiedStorage } from "coral-framework/lib/storage";
-import { PropTypesOf } from "coral-framework/types";
 import { ReplyCommentFormContainer_comment as CommentData } from "coral-stream/__generated__/ReplyCommentFormContainer_comment.graphql";
 import { ReplyCommentFormContainer_settings as SettingsData } from "coral-stream/__generated__/ReplyCommentFormContainer_settings.graphql";
 import { ReplyCommentFormContainer_story as StoryData } from "coral-stream/__generated__/ReplyCommentFormContainer_story.graphql";
+import CLASSES from "coral-stream/classes";
 
 import {
   getSubmitStatus,
@@ -164,6 +164,7 @@ export class ReplyCommentFormContainer extends Component<Props, State> {
         <ReplyEditSubmitStatus
           status={this.state.submitStatus}
           onDismiss={this.handleOnCancelOrDismiss}
+          buttonClassName={CLASSES.createReplyComment.dismiss}
         />
       );
     }
@@ -246,5 +247,4 @@ const enhanced = withContext(({ sessionStorage, browserInfo }) => ({
     )
   )
 );
-export type PostCommentFormContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;

src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.tsx

@@ -9,6 +9,7 @@ import styles from "./ReplyEditSubmitStatus.css";
 
 interface Props {
   status: SubmitStatus;
+  buttonClassName?: string;
   onDismiss: () => void;
 }
 
@@ -40,7 +41,11 @@ export default function ReplyEditSubmitStatus(props: Props) {
       {getMessage(props.status)}
       <Flex justifyContent="flex-end">
         <Localized id="comments-submitStatus-dismiss">
-          <Button onClick={props.onDismiss} variant="outlined">
+          <Button
+            onClick={props.onDismiss}
+            className={props.buttonClassName}
+            variant="outlined"
+          >
             Dismiss
           </Button>
         </Localized>

src/core/client/stream/tabs/Comments/Comment/__snapshots__/InReplyTo.spec.tsx.snap

@@ -3,6 +3,7 @@
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
   alignItems="center"
+  className="coral coral-comment-inReplyTo"
 >
   <ForwardRef(forwardRef)
     className="InReplyTo-icon"

src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx

@@ -10,6 +10,7 @@ import { ConversationThreadContainer_settings as SettingsData } from "coral-stre
 import { ConversationThreadContainer_story as StoryData } from "coral-stream/__generated__/ConversationThreadContainer_story.graphql";
 import { ConversationThreadContainer_viewer as ViewerData } from "coral-stream/__generated__/ConversationThreadContainer_viewer.graphql";
 import { ConversationThreadContainerPaginationQueryVariables } from "coral-stream/__generated__/ConversationThreadContainerPaginationQuery.graphql";
+import Counter from "coral-stream/common/Counter";
 import {
   SetCommentIDMutation,
   withSetCommentIDMutation,
@@ -20,7 +21,7 @@ import {
   UserTagsContainer,
 } from "coral-stream/tabs/Comments/Comment";
 import LocalReplyListContainer from "coral-stream/tabs/Comments/ReplyList/LocalReplyListContainer";
-import { Button, Counter, Flex, HorizontalGutter } from "coral-ui/components";
+import { Button, Flex, HorizontalGutter } from "coral-ui/components";
 
 import { Circle, Line } from "./Timeline";
 

src/core/client/stream/tabs/Comments/RTE/RTE.tsx

@@ -1,7 +1,9 @@
 import { Blockquote, Bold, CoralRTE, Italic } from "@coralproject/rte";
+import cn from "classnames";
 import { Localized as LocalizedOriginal } from "fluent-react/compat";
 import React, { FunctionComponent, Ref } from "react";
 
+import CLASSES from "coral-stream/classes";
 import { Icon } from "coral-ui/components";
 import { PropTypesOf } from "coral-ui/types";
 
@@ -36,6 +38,21 @@ export interface RTEProps {
    * Convenient prop to override the root styling.
    */
   className?: string;
+
+  /**
+   * className for the content area.
+   */
+  contentClassName?: string;
+
+  /**
+   * className for the palceholder text.
+   */
+  placeholderClassName?: string;
+
+  /**
+   * className for the toolbar.
+   */
+  toolbarClassName?: string;
   /*
    * If set renders a full width button
    */
@@ -89,16 +106,31 @@ const RTE: FunctionComponent<RTEProps> = props => {
     disabled,
     defaultValue,
     forwardRef,
+    contentClassName,
+    placeholderClassName,
+    toolbarClassName,
     ...rest
   } = props;
   return (
     <div>
       <CoralRTE
         inputId={inputId}
-        className={className}
-        contentClassName={styles.content}
-        placeholderClassName={styles.placeholder}
-        toolbarClassName={styles.toolbar}
+        className={cn(CLASSES.rte, className)}
+        contentClassName={cn(
+          CLASSES.rte.content,
+          contentClassName,
+          styles.content
+        )}
+        placeholderClassName={cn(
+          CLASSES.rte.placeholder,
+          placeholderClassName,
+          styles.placeholder
+        )}
+        toolbarClassName={cn(
+          CLASSES.rte.toolbar,
+          toolbarClassName,
+          styles.toolbar
+        )}
         onChange={onChange}
         value={value || defaultValue}
         disabled={disabled}

src/core/client/stream/tabs/Comments/RTE/__snapshots__/RTE.spec.tsx.snap

@@ -3,9 +3,9 @@
 exports[`renders correctly 1`] = `
 <div>
   <RTE
-    className="custom"
+    className="$root content placeholder toolbar custom"
     classNameDisabled=""
-    contentClassName="RTE-content"
+    contentClassName="coral coral-rte-content RTE-content"
     contentClassNameDisabled=""
     contentContainerClassName=""
     contentContainerClassNameDisabled=""
@@ -62,9 +62,9 @@ exports[`renders correctly 1`] = `
       ]
     }
     placeholder="Post a comment"
-    placeholderClassName="RTE-placeholder"
+    placeholderClassName="coral coral-rte-placholder RTE-placeholder"
     placeholderClassNameDisabled=""
-    toolbarClassName="RTE-toolbar"
+    toolbarClassName="coral coral-rte-toolbar RTE-toolbar"
     toolbarClassNameDisabled=""
     toolbarPosition="bottom"
     value="Hello world"

src/core/client/stream/tabs/Comments/Stream/CommunityGuidelines/CommunityGuidelines.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { Markdown } from "coral-framework/components";
+import CLASSES from "coral-stream/classes";
 import { CallOut } from "coral-ui/components";
 
 interface Props {
@@ -9,7 +10,7 @@ interface Props {
 
 const CommunityGuidelines: FunctionComponent<Props> = props => {
   return (
-    <CallOut color="primary" fullWidth>
+    <CallOut color="primary" fullWidth className={CLASSES.guidelines}>
       <Markdown>{props.children}</Markdown>
     </CallOut>
   );

src/core/client/stream/tabs/Comments/Stream/CommunityGuidelines/__snapshots__/CommunityGuidelines.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <withPropsOnChange(CallOut)
+  className="coral coral-guidelines"
   color="primary"
   fullWidth={true}
 >

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { PropTypesOf } from "coral-framework/types";
 import { FormApi, FormState } from "final-form";
 import { Localized } from "fluent-react/compat";
@@ -40,14 +41,16 @@ interface Props {
 }
 
 const PostCommentForm: FunctionComponent<Props> = props => (
-  <div>
+  <div className={CLASSES.createComment.$root}>
     {props.showMessageBox && (
-      <MessageBoxContainer story={props.story} className={styles.messageBox} />
+      <MessageBoxContainer
+        story={props.story}
+        className={cn(CLASSES.createComment.message, styles.messageBox)}
+      />
     )}
     <Form onSubmit={props.onSubmit} initialValues={props.initialValues}>
       {({ handleSubmit, submitting, submitError, form }) => (
         <form
-          className={CLASSES.createComment.$root}
           autoComplete="off"
           onSubmit={handleSubmit}
           id="comments-postCommentForm-form"
@@ -81,7 +84,6 @@ const PostCommentForm: FunctionComponent<Props> = props => (
                         onChange={({ html }) =>
                           input.onChange(cleanupRTEEmptyHTML(html))
                         }
-                        className={CLASSES.createComment.box}
                         value={input.value}
                         placeholder="Post a comment"
                         disabled={submitting || props.disabled}

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormClosed.tsx

@@ -1,7 +1,9 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import { Markdown } from "coral-framework/components";
 import { PropTypesOf } from "coral-framework/types";
+import CLASSES from "coral-stream/classes";
 import { CallOut } from "coral-ui/components";
 
 import MessageBoxContainer from "../MessageBoxContainer";
@@ -14,11 +16,14 @@ interface Props {
   story: PropTypesOf<typeof MessageBoxContainer>["story"];
 }
 const PostCommentFormClosed: FunctionComponent<Props> = props => (
-  <div>
+  <div className={CLASSES.createComment.$root}>
     {props.showMessageBox && (
-      <MessageBoxContainer story={props.story} className={styles.messageBox} />
+      <MessageBoxContainer
+        story={props.story}
+        className={cn(CLASSES.createComment.message, styles.messageBox)}
+      />
     )}
-    <CallOut fullWidth>
+    <CallOut fullWidth className={cn(CLASSES.createComment.closed)}>
       <Markdown>{props.message}</Markdown>
     </CallOut>
   </div>

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormClosedSitewide.tsx

@@ -1,7 +1,9 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import { Markdown } from "coral-framework/components";
 import { PropTypesOf } from "coral-framework/types";
+import CLASSES from "coral-stream/classes";
 import { CallOut, HorizontalGutter } from "coral-ui/components";
 
 import MessageBoxContainer from "../MessageBoxContainer";
@@ -15,10 +17,17 @@ interface Props {
 }
 const PostCommentFormClosedSitewide: FunctionComponent<Props> = props => (
   <HorizontalGutter size="double">
-    <CallOut fullWidth className={styles.root}>
+    <CallOut fullWidth className={cn(styles.root, CLASSES.closedSitewide)}>
       <Markdown className={styles.message}>{props.message}</Markdown>
     </CallOut>
-    {props.showMessageBox && <MessageBoxContainer story={props.story} />}
+    {props.showMessageBox && (
+      <div className={CLASSES.createComment.$root}>
+        <MessageBoxContainer
+          story={props.story}
+          className={CLASSES.createComment.message}
+        />
+      </div>
+    )}
   </HorizontalGutter>
 );
 

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormFake.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 
@@ -28,11 +29,11 @@ const PostCommentFormFake: FunctionComponent<Props> = props => {
       {props.showMessageBox && (
         <MessageBoxContainer
           story={props.story}
-          className={styles.messageBox}
+          className={cn(CLASSES.createComment.message, styles.messageBox)}
         />
       )}
       <HorizontalGutter className={styles.root}>
-        <div className={CLASSES.createComment.box} aria-hidden="true">
+        <div aria-hidden="true">
           <Localized
             id="comments-postCommentFormFake-rte"
             attrs={{ placeholder: true }}

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/__snapshots__/PostCommentFormFake.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`renders correctly 1`] = `
   className="coral coral-createComment"
 >
   <Relay(MessageBoxContainer)
-    className="PostCommentFormFake-messageBox"
+    className="coral coral-createComment-message PostCommentFormFake-messageBox"
     story={Object {}}
   />
   <ForwardRef(forwardRef)
@@ -13,7 +13,6 @@ exports[`renders correctly 1`] = `
   >
     <div
       aria-hidden="true"
-      className="coral coral-createComment-box"
     >
       <Localized
         attrs={

src/core/client/stream/tabs/Comments/Stream/SortMenu.tsx

@@ -1,6 +1,8 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import {
   Flex,
   Icon,
@@ -28,7 +30,7 @@ const SortMenu: FunctionComponent<Props> = props => (
   <MatchMedia ltWidth="sm">
     {matches => (
       <Flex
-        className={props.className}
+        className={cn(props.className, CLASSES.sortMenu)}
         justifyContent="flex-end"
         alignItems="center"
         itemGutter

src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useEffect } from "react";
 import { graphql } from "react-relay";
@@ -11,9 +12,10 @@ import {
   COMMENTS_TAB,
   StreamContainerLocal,
 } from "coral-stream/__generated__/StreamContainerLocal.graphql";
+import CLASSES from "coral-stream/classes";
+import Counter from "coral-stream/common/Counter";
 import { UserBoxContainer } from "coral-stream/common/UserBox";
 import {
-  Counter,
   Flex,
   HorizontalGutter,
   Tab,
@@ -47,10 +49,19 @@ const TabWithFeaturedTooltip: FunctionComponent<PropTypesOf<typeof Tab>> = ({
   ...props
 }) => (
   <div className={styles.featuredCommentsTabContainer}>
-    <Tab {...props} className={styles.featuredCommentsTab} />
+    <Tab
+      {...props}
+      className={cn(
+        CLASSES.tabBarComments.featured,
+        styles.featuredCommentsTab
+      )}
+    />
     <FeaturedCommentTooltip
       active={props.active}
-      className={styles.featuredCommentsInfo}
+      className={cn(
+        styles.featuredCommentsInfo,
+        CLASSES.tabBarComments.featuredTooltip
+      )}
     />
   </div>
 );
@@ -132,6 +143,7 @@ export const StreamContainer: FunctionComponent<Props> = props => {
             variant="secondary"
             activeTab={local.commentsTab}
             onTabClick={onChangeTab}
+            className={CLASSES.tabBarComments.$root}
           >
             {featuredCommentsCount > 0 && (
               <TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
@@ -153,7 +165,10 @@ export const StreamContainer: FunctionComponent<Props> = props => {
                 </Flex>
               </TabWithFeaturedTooltip>
             )}
-            <Tab tabID="ALL_COMMENTS">
+            <Tab
+              tabID="ALL_COMMENTS"
+              className={CLASSES.tabBarComments.allComments}
+            >
               <Flex alignItems="center" spacing={1}>
                 <Localized id="comments-allCommentsTab">
                   <span>All Comments</span>

src/core/client/stream/tabs/Comments/Stream/__snapshots__/SortMenu.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly on big screens 1`] = `
 <div
-  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+  className="Box-root Flex-root coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
 >
   <label
     className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
@@ -59,7 +59,7 @@ exports[`renders correctly on big screens 1`] = `
 
 exports[`renders correctly on small screens 1`] = `
 <div
-  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+  className="Box-root Flex-root coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
 >
   <span
     className="SelectField-root"

src/core/client/stream/tabs/Profile/Profile.tsx

@@ -4,6 +4,7 @@ import React, { FunctionComponent, useCallback } from "react";
 import { graphql, useLocal } from "coral-framework/lib/relay";
 import { PropTypesOf } from "coral-framework/types";
 import { ProfileLocal } from "coral-stream/__generated__/ProfileLocal.graphql";
+import CLASSES from "coral-stream/classes";
 import UserBoxContainer from "coral-stream/common/UserBox";
 import {
   HorizontalGutter,
@@ -55,13 +56,14 @@ const Profile: FunctionComponent<ProfileProps> = props => {
         variant="secondary"
         activeTab={local.profileTab}
         onTabClick={onTabClick}
+        className={CLASSES.tabBarMyProfile.$root}
       >
-        <Tab tabID="MY_COMMENTS">
+        <Tab tabID="MY_COMMENTS" className={CLASSES.tabBarMyProfile.myComments}>
           <Localized id="profile-myCommentsTab">
             <span>My Comments</span>
           </Localized>
         </Tab>
-        <Tab tabID="SETTINGS">
+        <Tab tabID="SETTINGS" className={CLASSES.tabBarMyProfile.settings}>
           <Localized id="profile-settingsTab">
             <span>Settings</span>
           </Localized>

src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`renders comment stream 1`] = `
       <button
         aria-controls="tabPane-COMMENTS"
         aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-allComments"
+        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -47,6 +47,8 @@ exports[`renders comment stream 1`] = `
       >
         <button
           className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          data-color="primary"
+          data-variant="underlined"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -59,6 +61,8 @@ exports[`renders comment stream 1`] = `
         </button>
         <button
           className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          data-color="primary"
+          data-variant="outlined"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -78,18 +82,17 @@ exports[`renders comment stream 1`] = `
         >
           <div
             aria-hidden="true"
-            className="coral coral-createComment-box"
           >
             <div>
               <div
-                className=""
+                className="$root content placeholder toolbar"
               >
                 <div
                   className="RTE-contentEditableContainer"
                 >
                   <div
                     aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
+                    className="RTE-contentEditable coral coral-rte-content RTE-content"
                     contentEditable={true}
                     dangerouslySetInnerHTML={
                       Object {
@@ -107,13 +110,13 @@ exports[`renders comment stream 1`] = `
                   />
                   <div
                     aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
+                    className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                   >
                     Post a comment
                   </div>
                 </div>
                 <div
-                  className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                  className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -163,6 +166,8 @@ exports[`renders comment stream 1`] = `
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
+            data-color="primary"
+            data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -179,7 +184,7 @@ exports[`renders comment stream 1`] = `
         className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
       >
         <div
-          className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
           <label
             className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
@@ -233,7 +238,7 @@ exports[`renders comment stream 1`] = `
           </span>
         </div>
         <ul
-          className="TabBar-root TabBar-secondary"
+          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
           role="tablist"
         >
           <li
@@ -244,7 +249,7 @@ exports[`renders comment stream 1`] = `
             <button
               aria-controls="tabPane-ALL_COMMENTS"
               aria-selected={false}
-              className="BaseButton-root Tab-button Tab-secondary"
+              className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -261,7 +266,7 @@ exports[`renders comment stream 1`] = `
                   All Comments
                 </span>
                 <span
-                  className="Counter-root Counter-colorGrey Counter-sizeSmall"
+                  className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
                 >
                   <span
                     className="Counter-text"
@@ -350,6 +355,8 @@ exports[`renders comment stream 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -450,6 +457,8 @@ exports[`renders comment stream 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}

src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap

@@ -16,6 +16,8 @@ exports[`renders permalink view 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+        data-color="primary"
+        data-variant="underlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -28,6 +30,8 @@ exports[`renders permalink view 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+        data-color="primary"
+        data-variant="outlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -54,6 +58,8 @@ exports[`renders permalink view 1`] = `
       </p>
       <a
         className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+        data-color="primary"
+        data-variant="underlined"
         href="http://localhost/"
         onBlur={[Function]}
         onClick={[Function]}
@@ -196,6 +202,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -211,6 +219,8 @@ exports[`renders permalink view 1`] = `
                             </button>
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-1"
                               onBlur={[Function]}
@@ -231,6 +241,8 @@ exports[`renders permalink view 1`] = `
                               <button
                                 aria-controls="permalink-popover-comment-1"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -263,6 +275,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -403,6 +417,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -418,6 +434,8 @@ exports[`renders permalink view 1`] = `
                             </button>
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-2"
                               onBlur={[Function]}
@@ -438,6 +456,8 @@ exports[`renders permalink view 1`] = `
                               <button
                                 aria-controls="permalink-popover-comment-2"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -470,6 +490,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -608,6 +630,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -623,6 +647,8 @@ exports[`renders permalink view 1`] = `
                             </button>
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-with-replies"
                               onBlur={[Function]}
@@ -643,6 +669,8 @@ exports[`renders permalink view 1`] = `
                               <button
                                 aria-controls="permalink-popover-comment-with-replies"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -675,6 +703,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -794,7 +824,7 @@ exports[`renders permalink view 1`] = `
                         className="Comment-subBar"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                          className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                         >
                           <span
                             aria-hidden="true"
@@ -836,6 +866,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -851,6 +883,8 @@ exports[`renders permalink view 1`] = `
                             </button>
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-3"
                               onBlur={[Function]}
@@ -871,6 +905,8 @@ exports[`renders permalink view 1`] = `
                               <button
                                 aria-controls="permalink-popover-comment-3"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -903,6 +939,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -1011,7 +1049,7 @@ exports[`renders permalink view 1`] = `
                         className="Comment-subBar"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                          className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                         >
                           <span
                             aria-hidden="true"
@@ -1053,6 +1091,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -1068,6 +1108,8 @@ exports[`renders permalink view 1`] = `
                             </button>
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-4"
                               onBlur={[Function]}
@@ -1088,6 +1130,8 @@ exports[`renders permalink view 1`] = `
                               <button
                                 aria-controls="permalink-popover-comment-4"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -1120,6 +1164,8 @@ exports[`renders permalink view 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}

src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap

@@ -16,6 +16,8 @@ exports[`renders permalink view with unknown comment 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+        data-color="primary"
+        data-variant="underlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -28,6 +30,8 @@ exports[`renders permalink view with unknown comment 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+        data-color="primary"
+        data-variant="outlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -54,6 +58,8 @@ exports[`renders permalink view with unknown comment 1`] = `
       </p>
       <a
         className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+        data-color="primary"
+        data-variant="underlined"
         href="http://localhost/"
         onBlur={[Function]}
         onClick={[Function]}

src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap

@@ -88,6 +88,8 @@ exports[`renders conversation thread 1`] = `
       >
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined ConversationThreadContainer-showMoreButton"
+          data-color="regular"
+          data-variant="underlined"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -100,7 +102,7 @@ exports[`renders conversation thread 1`] = `
           Show More of This Conversation
         </button>
         <span
-          className="Counter-root Counter-colorDark"
+          className="Counter-root Counter-colorDark coral coral-counter"
         >
           <span
             className="Counter-text"
@@ -230,6 +232,8 @@ exports[`renders conversation thread 1`] = `
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -245,6 +249,8 @@ exports[`renders conversation thread 1`] = `
                       </button>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         id="comments-commentContainer-replyButton-comment-0"
                         onBlur={[Function]}
@@ -265,6 +271,8 @@ exports[`renders conversation thread 1`] = `
                         <button
                           aria-controls="permalink-popover-comment-0"
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -297,6 +305,8 @@ exports[`renders conversation thread 1`] = `
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -450,6 +460,8 @@ exports[`shows more of this conversation 1`] = `
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -465,6 +477,8 @@ exports[`shows more of this conversation 1`] = `
                       </button>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         id="comments-commentContainer-replyButton-comment-1"
                         onBlur={[Function]}
@@ -485,6 +499,8 @@ exports[`shows more of this conversation 1`] = `
                         <button
                           aria-controls="permalink-popover-comment-1"
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -517,6 +533,8 @@ exports[`shows more of this conversation 1`] = `
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -662,6 +680,8 @@ exports[`shows more of this conversation 1`] = `
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -677,6 +697,8 @@ exports[`shows more of this conversation 1`] = `
                       </button>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         id="comments-commentContainer-replyButton-comment-from-staff-0"
                         onBlur={[Function]}
@@ -697,6 +719,8 @@ exports[`shows more of this conversation 1`] = `
                         <button
                           aria-controls="permalink-popover-comment-from-staff-0"
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -729,6 +753,8 @@ exports[`shows more of this conversation 1`] = `
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -867,6 +893,8 @@ exports[`shows more of this conversation 1`] = `
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -882,6 +910,8 @@ exports[`shows more of this conversation 1`] = `
                       </button>
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         id="comments-commentContainer-replyButton-comment-0"
                         onBlur={[Function]}
@@ -902,6 +932,8 @@ exports[`shows more of this conversation 1`] = `
                         <button
                           aria-controls="permalink-popover-comment-0"
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -934,6 +966,8 @@ exports[`shows more of this conversation 1`] = `
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap

@@ -80,6 +80,8 @@ exports[`cancel edit 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  data-color="primary"
+                  data-variant="underlined"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -112,6 +114,8 @@ exports[`cancel edit 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -127,6 +131,8 @@ exports[`cancel edit 1`] = `
                 </button>
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-replies"
                   onBlur={[Function]}
@@ -147,6 +153,8 @@ exports[`cancel edit 1`] = `
                   <button
                     aria-controls="permalink-popover-comment-with-replies"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -183,6 +191,8 @@ exports[`cancel edit 1`] = `
                   <button
                     aria-controls="report-popover-comment-with-replies"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -226,6 +236,7 @@ exports[`edit a comment and handle server error: edit form 1`] = `
 >
   <form
     autoComplete="off"
+    className="coral coral-editComment"
     onSubmit={[Function]}
   >
     <div
@@ -262,14 +273,14 @@ exports[`edit a comment and handle server error: edit form 1`] = `
         </label>
         <div>
           <div
-            className=""
+            className="$root content placeholder toolbar"
           >
             <div
               className="RTE-contentEditableContainer"
             >
               <div
                 aria-placeholder="Edit comment"
-                className="RTE-contentEditable RTE-content"
+                className="RTE-contentEditable coral coral-rte-content RTE-content"
                 contentEditable={true}
                 dangerouslySetInnerHTML={
                   Object {
@@ -289,7 +300,7 @@ exports[`edit a comment and handle server error: edit form 1`] = `
               />
             </div>
             <div
-              className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+              className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
             >
               <button
                 className="Button-button"
@@ -362,7 +373,9 @@ exports[`edit a comment and handle server error: edit form 1`] = `
         className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined coral coral-editComment-cancel"
+          data-color="regular"
+          data-variant="outlined"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -375,7 +388,9 @@ exports[`edit a comment and handle server error: edit form 1`] = `
           Cancel
         </button>
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-editComment-submit"
+          data-color="primary"
+          data-variant="filled"
           disabled={true}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -398,6 +413,7 @@ exports[`edit a comment: edit form 1`] = `
 >
   <form
     autoComplete="off"
+    className="coral coral-editComment"
     onSubmit={[Function]}
   >
     <div
@@ -434,14 +450,14 @@ exports[`edit a comment: edit form 1`] = `
         </label>
         <div>
           <div
-            className=""
+            className="$root content placeholder toolbar"
           >
             <div
               className="RTE-contentEditableContainer"
             >
               <div
                 aria-placeholder="Edit comment"
-                className="RTE-contentEditable RTE-content"
+                className="RTE-contentEditable coral coral-rte-content RTE-content"
                 contentEditable={true}
                 dangerouslySetInnerHTML={
                   Object {
@@ -461,7 +477,7 @@ exports[`edit a comment: edit form 1`] = `
               />
             </div>
             <div
-              className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+              className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
             >
               <button
                 className="Button-button"
@@ -534,7 +550,9 @@ exports[`edit a comment: edit form 1`] = `
         className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined coral coral-editComment-cancel"
+          data-color="regular"
+          data-variant="outlined"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -547,7 +565,9 @@ exports[`edit a comment: edit form 1`] = `
           Cancel
         </button>
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-editComment-submit"
+          data-color="primary"
+          data-variant="filled"
           disabled={true}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -570,6 +590,7 @@ exports[`edit a comment: optimistic response 1`] = `
 >
   <form
     autoComplete="off"
+    className="coral coral-editComment"
     onSubmit={[Function]}
   >
     <div
@@ -606,14 +627,14 @@ exports[`edit a comment: optimistic response 1`] = `
         </label>
         <div>
           <div
-            className=""
+            className="$root content placeholder toolbar "
           >
             <div
               className="RTE-contentEditableContainer"
             >
               <div
                 aria-placeholder="Edit comment"
-                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                className="RTE-contentEditable coral coral-rte-content RTE-content  RTE-contentEditableDisabled"
                 contentEditable={false}
                 dangerouslySetInnerHTML={
                   Object {
@@ -633,7 +654,7 @@ exports[`edit a comment: optimistic response 1`] = `
               />
             </div>
             <div
-              className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
+              className="coral coral-rte-toolbar RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
             >
               <button
                 className="Button-button"
@@ -706,7 +727,9 @@ exports[`edit a comment: optimistic response 1`] = `
         className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled coral coral-editComment-cancel"
+          data-color="regular"
+          data-variant="outlined"
           disabled={true}
           onBlur={[Function]}
           onClick={[Function]}
@@ -719,7 +742,9 @@ exports[`edit a comment: optimistic response 1`] = `
           Cancel
         </button>
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-editComment-submit"
+          data-color="primary"
+          data-variant="filled"
           disabled={true}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -816,6 +841,8 @@ exports[`edit a comment: render comment with edit button 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  data-color="primary"
+                  data-variant="underlined"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -848,6 +875,8 @@ exports[`edit a comment: render comment with edit button 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -863,6 +892,8 @@ exports[`edit a comment: render comment with edit button 1`] = `
                 </button>
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-replies"
                   onBlur={[Function]}
@@ -883,6 +914,8 @@ exports[`edit a comment: render comment with edit button 1`] = `
                   <button
                     aria-controls="permalink-popover-comment-with-replies"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -919,6 +952,8 @@ exports[`edit a comment: render comment with edit button 1`] = `
                   <button
                     aria-controls="report-popover-comment-with-replies"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -1045,6 +1080,8 @@ exports[`edit a comment: server response 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  data-color="primary"
+                  data-variant="underlined"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1077,6 +1114,8 @@ exports[`edit a comment: server response 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -1092,6 +1131,8 @@ exports[`edit a comment: server response 1`] = `
                 </button>
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-replies"
                   onBlur={[Function]}
@@ -1112,6 +1153,8 @@ exports[`edit a comment: server response 1`] = `
                   <button
                     aria-controls="permalink-popover-comment-with-replies"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -1148,6 +1191,8 @@ exports[`edit a comment: server response 1`] = `
                   <button
                     aria-controls="report-popover-comment-with-replies"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -1265,6 +1310,8 @@ exports[`shows expiry message: edit form closed 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  data-color="primary"
+                  data-variant="underlined"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1297,6 +1344,8 @@ exports[`shows expiry message: edit form closed 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -1312,6 +1361,8 @@ exports[`shows expiry message: edit form closed 1`] = `
                 </button>
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-replies"
                   onBlur={[Function]}
@@ -1332,6 +1383,8 @@ exports[`shows expiry message: edit form closed 1`] = `
                   <button
                     aria-controls="permalink-popover-comment-with-replies"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -1368,6 +1421,8 @@ exports[`shows expiry message: edit form closed 1`] = `
                   <button
                     aria-controls="report-popover-comment-with-replies"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -1411,6 +1466,7 @@ exports[`shows expiry message: edit time expired 1`] = `
 >
   <form
     autoComplete="off"
+    className="coral coral-editComment"
     onSubmit={[Function]}
   >
     <div
@@ -1447,14 +1503,14 @@ exports[`shows expiry message: edit time expired 1`] = `
         </label>
         <div>
           <div
-            className=""
+            className="$root content placeholder toolbar "
           >
             <div
               className="RTE-contentEditableContainer"
             >
               <div
                 aria-placeholder="Edit comment"
-                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                className="RTE-contentEditable coral coral-rte-content RTE-content  RTE-contentEditableDisabled"
                 contentEditable={false}
                 dangerouslySetInnerHTML={
                   Object {
@@ -1474,7 +1530,7 @@ exports[`shows expiry message: edit time expired 1`] = `
               />
             </div>
             <div
-              className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
+              className="coral coral-rte-toolbar RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
             >
               <button
                 className="Button-button"
@@ -1537,7 +1593,9 @@ exports[`shows expiry message: edit time expired 1`] = `
         className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined coral coral-editComment-close"
+          data-color="regular"
+          data-variant="outlined"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap

@@ -109,6 +109,8 @@ exports[`renders comment stream with load more button 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -124,6 +126,8 @@ exports[`renders comment stream with load more button 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-0"
                       onBlur={[Function]}
@@ -144,6 +148,8 @@ exports[`renders comment stream with load more button 1`] = `
                       <button
                         aria-controls="permalink-popover-comment-0"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -176,6 +182,8 @@ exports[`renders comment stream with load more button 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -299,6 +307,8 @@ exports[`renders comment stream with load more button 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -314,6 +324,8 @@ exports[`renders comment stream with load more button 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-1"
                       onBlur={[Function]}
@@ -334,6 +346,8 @@ exports[`renders comment stream with load more button 1`] = `
                       <button
                         aria-controls="permalink-popover-comment-1"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -366,6 +380,8 @@ exports[`renders comment stream with load more button 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -391,6 +407,8 @@ exports[`renders comment stream with load more button 1`] = `
   <button
     aria-controls="comments-allComments-log"
     className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+    data-color="regular"
+    data-variant="outlined"
     disabled={false}
     onBlur={[Function]}
     onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap

@@ -80,6 +80,8 @@ exports[`post a comment: optimistic response 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  data-color="primary"
+                  data-variant="underlined"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -112,6 +114,8 @@ exports[`post a comment: optimistic response 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -127,6 +131,8 @@ exports[`post a comment: optimistic response 1`] = `
                 </button>
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   id="comments-commentContainer-replyButton-uuid-0"
                   onBlur={[Function]}
@@ -147,6 +153,8 @@ exports[`post a comment: optimistic response 1`] = `
                   <button
                     aria-controls="permalink-popover-uuid-0"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -183,6 +191,8 @@ exports[`post a comment: optimistic response 1`] = `
                   <button
                     aria-controls="report-popover-uuid-0"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap

@@ -84,7 +84,7 @@ exports[`post a reply: open reply form 1`] = `
             className="Comment-subBar"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignCenter"
+              className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
             >
               <span
                 aria-hidden="true"
@@ -126,6 +126,8 @@ exports[`post a reply: open reply form 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -141,6 +143,8 @@ exports[`post a reply: open reply form 1`] = `
                 </button>
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
                   onBlur={[Function]}
@@ -161,6 +165,8 @@ exports[`post a reply: open reply form 1`] = `
                   <button
                     aria-controls="permalink-popover-comment-with-deepest-replies-5"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -197,6 +203,8 @@ exports[`post a reply: open reply form 1`] = `
                   <button
                     aria-controls="report-popover-comment-with-deepest-replies-5"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -228,6 +236,8 @@ exports[`post a reply: open reply form 1`] = `
             </div>
             <a
               className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+              data-color="primary"
+              data-variant="underlined"
               href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
               id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
               onBlur={[Function]}
@@ -257,9 +267,7 @@ exports[`post a reply: open reply form 1`] = `
         <div
           className="Box-root HorizontalGutter-root HorizontalGutter-half"
         >
-          <div
-            className="coral coral-createReplyComment-box"
-          >
+          <div>
             <label
               className="AriaInfo-root"
               htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
@@ -291,14 +299,14 @@ exports[`post a reply: open reply form 1`] = `
             </div>
             <div>
               <div
-                className=""
+                className="$root content placeholder toolbar"
               >
                 <div
                   className="RTE-contentEditableContainer"
                 >
                   <div
                     aria-placeholder="Write a reply"
-                    className="RTE-contentEditable RTE-content"
+                    className="RTE-contentEditable coral coral-rte-content RTE-content"
                     contentEditable={true}
                     dangerouslySetInnerHTML={
                       Object {
@@ -318,13 +326,13 @@ exports[`post a reply: open reply form 1`] = `
                   />
                   <div
                     aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
+                    className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                   >
                     Write a reply
                   </div>
                 </div>
                 <div
-                  className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                  className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -377,7 +385,9 @@ exports[`post a reply: open reply form 1`] = `
           className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined coral coral-createReplyComment-cancel"
+            data-color="regular"
+            data-variant="outlined"
             disabled={false}
             onBlur={[Function]}
             onClick={[Function]}
@@ -391,6 +401,8 @@ exports[`post a reply: open reply form 1`] = `
           </button>
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createReplyComment-submit"
+            data-color="primary"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -497,6 +509,8 @@ exports[`post a reply: optimistic response 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                      data-color="primary"
+                      data-variant="underlined"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -514,7 +528,7 @@ exports[`post a reply: optimistic response 1`] = `
                 className="Comment-subBar"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                 >
                   <span
                     aria-hidden="true"
@@ -556,6 +570,8 @@ exports[`post a reply: optimistic response 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -575,6 +591,8 @@ exports[`post a reply: optimistic response 1`] = `
                       <button
                         aria-controls="permalink-popover-uuid-0"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -611,6 +629,8 @@ exports[`post a reply: optimistic response 1`] = `
                       <button
                         aria-controls="report-popover-uuid-0"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -759,6 +779,8 @@ exports[`renders comment stream 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -774,6 +796,8 @@ exports[`renders comment stream 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-with-deepest-replies"
                       onBlur={[Function]}
@@ -794,6 +818,8 @@ exports[`renders comment stream 1`] = `
                       <button
                         aria-controls="permalink-popover-comment-with-deepest-replies"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -830,6 +856,8 @@ exports[`renders comment stream 1`] = `
                       <button
                         aria-controls="report-popover-comment-with-deepest-replies"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -957,7 +985,7 @@ exports[`renders comment stream 1`] = `
                     className="Comment-subBar"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                      className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                     >
                       <span
                         aria-hidden="true"
@@ -999,6 +1027,8 @@ exports[`renders comment stream 1`] = `
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -1014,6 +1044,8 @@ exports[`renders comment stream 1`] = `
                         </button>
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           disabled={false}
                           id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
                           onBlur={[Function]}
@@ -1034,6 +1066,8 @@ exports[`renders comment stream 1`] = `
                           <button
                             aria-controls="permalink-popover-comment-with-deepest-replies-1"
                             className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            data-color="regular"
+                            data-variant="ghost"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onFocus={[Function]}
@@ -1070,6 +1104,8 @@ exports[`renders comment stream 1`] = `
                           <button
                             aria-controls="report-popover-comment-with-deepest-replies-1"
                             className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            data-color="regular"
+                            data-variant="ghost"
                             disabled={false}
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -1197,7 +1233,7 @@ exports[`renders comment stream 1`] = `
                         className="Comment-subBar"
                       >
                         <div
-                          className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                          className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                         >
                           <span
                             aria-hidden="true"
@@ -1239,6 +1275,8 @@ exports[`renders comment stream 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -1254,6 +1292,8 @@ exports[`renders comment stream 1`] = `
                             </button>
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
                               onBlur={[Function]}
@@ -1274,6 +1314,8 @@ exports[`renders comment stream 1`] = `
                               <button
                                 aria-controls="permalink-popover-comment-with-deepest-replies-2"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -1310,6 +1352,8 @@ exports[`renders comment stream 1`] = `
                               <button
                                 aria-controls="report-popover-comment-with-deepest-replies-2"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -1437,7 +1481,7 @@ exports[`renders comment stream 1`] = `
                             className="Comment-subBar"
                           >
                             <div
-                              className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                              className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                             >
                               <span
                                 aria-hidden="true"
@@ -1479,6 +1523,8 @@ exports[`renders comment stream 1`] = `
                               >
                                 <button
                                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  data-color="regular"
+                                  data-variant="ghost"
                                   disabled={false}
                                   onBlur={[Function]}
                                   onClick={[Function]}
@@ -1494,6 +1540,8 @@ exports[`renders comment stream 1`] = `
                                 </button>
                                 <button
                                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  data-color="regular"
+                                  data-variant="ghost"
                                   disabled={false}
                                   id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
                                   onBlur={[Function]}
@@ -1514,6 +1562,8 @@ exports[`renders comment stream 1`] = `
                                   <button
                                     aria-controls="permalink-popover-comment-with-deepest-replies-3"
                                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                    data-color="regular"
+                                    data-variant="ghost"
                                     onBlur={[Function]}
                                     onClick={[Function]}
                                     onFocus={[Function]}
@@ -1550,6 +1600,8 @@ exports[`renders comment stream 1`] = `
                                   <button
                                     aria-controls="report-popover-comment-with-deepest-replies-3"
                                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                    data-color="regular"
+                                    data-variant="ghost"
                                     disabled={false}
                                     onBlur={[Function]}
                                     onClick={[Function]}
@@ -1677,7 +1729,7 @@ exports[`renders comment stream 1`] = `
                                 className="Comment-subBar"
                               >
                                 <div
-                                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                                  className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                                 >
                                   <span
                                     aria-hidden="true"
@@ -1719,6 +1771,8 @@ exports[`renders comment stream 1`] = `
                                   >
                                     <button
                                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                      data-color="regular"
+                                      data-variant="ghost"
                                       disabled={false}
                                       onBlur={[Function]}
                                       onClick={[Function]}
@@ -1734,6 +1788,8 @@ exports[`renders comment stream 1`] = `
                                     </button>
                                     <button
                                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                      data-color="regular"
+                                      data-variant="ghost"
                                       disabled={false}
                                       id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
                                       onBlur={[Function]}
@@ -1754,6 +1810,8 @@ exports[`renders comment stream 1`] = `
                                       <button
                                         aria-controls="permalink-popover-comment-with-deepest-replies-4"
                                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                        data-color="regular"
+                                        data-variant="ghost"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -1790,6 +1848,8 @@ exports[`renders comment stream 1`] = `
                                       <button
                                         aria-controls="report-popover-comment-with-deepest-replies-4"
                                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                        data-color="regular"
+                                        data-variant="ghost"
                                         disabled={false}
                                         onBlur={[Function]}
                                         onClick={[Function]}
@@ -1917,7 +1977,7 @@ exports[`renders comment stream 1`] = `
                                     className="Comment-subBar"
                                   >
                                     <div
-                                      className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                                      className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                                     >
                                       <span
                                         aria-hidden="true"
@@ -1959,6 +2019,8 @@ exports[`renders comment stream 1`] = `
                                       >
                                         <button
                                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                          data-color="regular"
+                                          data-variant="ghost"
                                           disabled={false}
                                           onBlur={[Function]}
                                           onClick={[Function]}
@@ -1974,6 +2036,8 @@ exports[`renders comment stream 1`] = `
                                         </button>
                                         <button
                                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                          data-color="regular"
+                                          data-variant="ghost"
                                           disabled={false}
                                           id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
                                           onBlur={[Function]}
@@ -1994,6 +2058,8 @@ exports[`renders comment stream 1`] = `
                                           <button
                                             aria-controls="permalink-popover-comment-with-deepest-replies-5"
                                             className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                            data-color="regular"
+                                            data-variant="ghost"
                                             onBlur={[Function]}
                                             onClick={[Function]}
                                             onFocus={[Function]}
@@ -2030,6 +2096,8 @@ exports[`renders comment stream 1`] = `
                                           <button
                                             aria-controls="report-popover-comment-with-deepest-replies-5"
                                             className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                            data-color="regular"
+                                            data-variant="ghost"
                                             disabled={false}
                                             onBlur={[Function]}
                                             onClick={[Function]}
@@ -2061,6 +2129,8 @@ exports[`renders comment stream 1`] = `
                                     </div>
                                     <a
                                       className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                                      data-color="primary"
+                                      data-variant="underlined"
                                       href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
                                       id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
                                       onBlur={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap

@@ -99,6 +99,8 @@ exports[`post a reply: open reply form 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -114,6 +116,8 @@ exports[`post a reply: open reply form 1`] = `
                 </button>
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-0"
                   onBlur={[Function]}
@@ -134,6 +138,8 @@ exports[`post a reply: open reply form 1`] = `
                   <button
                     aria-controls="permalink-popover-comment-0"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -170,6 +176,8 @@ exports[`post a reply: open reply form 1`] = `
                   <button
                     aria-controls="report-popover-comment-0"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -215,9 +223,7 @@ exports[`post a reply: open reply form 1`] = `
         <div
           className="Box-root HorizontalGutter-root HorizontalGutter-half"
         >
-          <div
-            className="coral coral-createReplyComment-box"
-          >
+          <div>
             <label
               className="AriaInfo-root"
               htmlFor="comments-replyCommentForm-rte-comment-0"
@@ -249,14 +255,14 @@ exports[`post a reply: open reply form 1`] = `
             </div>
             <div>
               <div
-                className=""
+                className="$root content placeholder toolbar"
               >
                 <div
                   className="RTE-contentEditableContainer"
                 >
                   <div
                     aria-placeholder="Write a reply"
-                    className="RTE-contentEditable RTE-content"
+                    className="RTE-contentEditable coral coral-rte-content RTE-content"
                     contentEditable={true}
                     dangerouslySetInnerHTML={
                       Object {
@@ -276,13 +282,13 @@ exports[`post a reply: open reply form 1`] = `
                   />
                   <div
                     aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
+                    className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                   >
                     Write a reply
                   </div>
                 </div>
                 <div
-                  className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                  className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -335,7 +341,9 @@ exports[`post a reply: open reply form 1`] = `
           className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined coral coral-createReplyComment-cancel"
+            data-color="regular"
+            data-variant="outlined"
             disabled={false}
             onBlur={[Function]}
             onClick={[Function]}
@@ -349,6 +357,8 @@ exports[`post a reply: open reply form 1`] = `
           </button>
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createReplyComment-submit"
+            data-color="primary"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -455,6 +465,8 @@ exports[`post a reply: optimistic response 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                      data-color="primary"
+                      data-variant="underlined"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -472,7 +484,7 @@ exports[`post a reply: optimistic response 1`] = `
                 className="Comment-subBar"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                 >
                   <span
                     aria-hidden="true"
@@ -514,6 +526,8 @@ exports[`post a reply: optimistic response 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -529,6 +543,8 @@ exports[`post a reply: optimistic response 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-uuid-0"
                       onBlur={[Function]}
@@ -549,6 +565,8 @@ exports[`post a reply: optimistic response 1`] = `
                       <button
                         aria-controls="permalink-popover-uuid-0"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -585,6 +603,8 @@ exports[`post a reply: optimistic response 1`] = `
                       <button
                         aria-controls="report-popover-uuid-0"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/reaction.spec.tsx.snap

@@ -3,6 +3,8 @@
 exports[`create and remove reaction: Respected 1`] = `
 <button
   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+  data-color="regular"
+  data-variant="ghost"
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -24,6 +26,8 @@ exports[`create and remove reaction: Respected 1`] = `
 exports[`create and remove reaction: Unrespected 1`] = `
 <button
   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+  data-color="regular"
+  data-variant="ghost"
   disabled={false}
   onBlur={[Function]}
   onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap

@@ -16,6 +16,8 @@ exports[`renders comment stream with community guidelines 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+        data-color="primary"
+        data-variant="underlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -28,6 +30,8 @@ exports[`renders comment stream with community guidelines 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+        data-color="primary"
+        data-variant="outlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -40,7 +44,7 @@ exports[`renders comment stream with community guidelines 1`] = `
       </button>
     </div>
     <div
-      className="CallOut-root CallOut-colorPrimary CallOut-fullWidth"
+      className="CallOut-root CallOut-colorPrimary CallOut-fullWidth coral coral-guidelines"
     >
       <div>
         <div
@@ -62,18 +66,17 @@ exports[`renders comment stream with community guidelines 1`] = `
       >
         <div
           aria-hidden="true"
-          className="coral coral-createComment-box"
         >
           <div>
             <div
-              className=""
+              className="$root content placeholder toolbar"
             >
               <div
                 className="RTE-contentEditableContainer"
               >
                 <div
                   aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content"
+                  className="RTE-contentEditable coral coral-rte-content RTE-content"
                   contentEditable={true}
                   dangerouslySetInnerHTML={
                     Object {
@@ -91,13 +94,13 @@ exports[`renders comment stream with community guidelines 1`] = `
                 />
                 <div
                   aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder"
+                  className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                 >
                   Post a comment
                 </div>
               </div>
               <div
-                className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
               >
                 <button
                   className="Button-button"
@@ -147,6 +150,8 @@ exports[`renders comment stream with community guidelines 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
+          data-color="primary"
+          data-variant="filled"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -163,7 +168,7 @@ exports[`renders comment stream with community guidelines 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
         <label
           className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
@@ -217,7 +222,7 @@ exports[`renders comment stream with community guidelines 1`] = `
         </span>
       </div>
       <ul
-        className="TabBar-root TabBar-secondary"
+        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
         role="tablist"
       >
         <li
@@ -228,7 +233,7 @@ exports[`renders comment stream with community guidelines 1`] = `
           <button
             aria-controls="tabPane-ALL_COMMENTS"
             aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -245,7 +250,7 @@ exports[`renders comment stream with community guidelines 1`] = `
                 All Comments
               </span>
               <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
               >
                 <span
                   className="Counter-text"
@@ -370,6 +375,8 @@ exports[`renders comment stream with community guidelines 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -385,6 +392,8 @@ exports[`renders comment stream with community guidelines 1`] = `
                             </button>
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-0"
                               onBlur={[Function]}
@@ -405,6 +414,8 @@ exports[`renders comment stream with community guidelines 1`] = `
                               <button
                                 aria-controls="permalink-popover-comment-0"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -437,6 +448,8 @@ exports[`renders comment stream with community guidelines 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -560,6 +573,8 @@ exports[`renders comment stream with community guidelines 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -575,6 +590,8 @@ exports[`renders comment stream with community guidelines 1`] = `
                             </button>
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               id="comments-commentContainer-replyButton-comment-1"
                               onBlur={[Function]}
@@ -595,6 +612,8 @@ exports[`renders comment stream with community guidelines 1`] = `
                               <button
                                 aria-controls="permalink-popover-comment-1"
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
@@ -627,6 +646,8 @@ exports[`renders comment stream with community guidelines 1`] = `
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              data-color="regular"
+                              data-variant="ghost"
                               disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap

@@ -16,6 +16,8 @@ exports[`renders message box when commenting disabled 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+        data-color="primary"
+        data-variant="underlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -28,6 +30,8 @@ exports[`renders message box when commenting disabled 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+        data-color="primary"
+        data-variant="outlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -43,7 +47,7 @@ exports[`renders message box when commenting disabled 1`] = `
       className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <div
-        className="CallOut-root CallOut-colorRegular CallOut-fullWidth PostCommentFormClosedSitewide-root"
+        className="CallOut-root CallOut-colorRegular CallOut-fullWidth PostCommentFormClosedSitewide-root coral coral-closedSitewide"
       >
         <div>
           <div
@@ -58,30 +62,34 @@ exports[`renders message box when commenting disabled 1`] = `
         </div>
       </div>
       <div
-        className="MessageBox-root"
+        className="coral coral-createComment"
       >
-        <span
-          aria-hidden="true"
-          className="Icon-root Icon-md MessageBoxIcon-root"
-        >
-          chat
-        </span>
         <div
-          className="Markdown-root MessageBoxContent-root"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<p><strong>What do you think</strong>?</p>
+          className="MessageBox-root coral coral-createComment-message"
+        >
+          <span
+            aria-hidden="true"
+            className="Icon-root Icon-md MessageBoxIcon-root"
+          >
+            chat
+          </span>
+          <div
+            className="Markdown-root MessageBoxContent-root"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<p><strong>What do you think</strong>?</p>
 ",
+              }
             }
-          }
-        />
+          />
+        </div>
       </div>
     </div>
     <div
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
         <label
           className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
@@ -135,7 +143,7 @@ exports[`renders message box when commenting disabled 1`] = `
         </span>
       </div>
       <ul
-        className="TabBar-root TabBar-secondary"
+        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
         role="tablist"
       >
         <li
@@ -146,7 +154,7 @@ exports[`renders message box when commenting disabled 1`] = `
           <button
             aria-controls="tabPane-ALL_COMMENTS"
             aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -163,7 +171,7 @@ exports[`renders message box when commenting disabled 1`] = `
                 All Comments
               </span>
               <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
               >
                 <span
                   className="Counter-text"
@@ -229,6 +237,8 @@ exports[`renders message box when logged in 1`] = `
           </span>
           <button
             className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            data-color="primary"
+            data-variant="underlined"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -242,9 +252,11 @@ exports[`renders message box when logged in 1`] = `
         </div>
       </div>
     </div>
-    <div>
+    <div
+      className="coral coral-createComment"
+    >
       <div
-        className="MessageBox-root PostCommentForm-messageBox"
+        className="MessageBox-root coral coral-createComment-message PostCommentForm-messageBox"
       >
         <span
           aria-hidden="true"
@@ -264,7 +276,6 @@ exports[`renders message box when logged in 1`] = `
       </div>
       <form
         autoComplete="off"
-        className="coral coral-createComment"
         id="comments-postCommentForm-form"
         onSubmit={[Function]}
       >
@@ -282,14 +293,14 @@ exports[`renders message box when logged in 1`] = `
             </label>
             <div>
               <div
-                className="coral coral-createComment-box"
+                className="$root content placeholder toolbar"
               >
                 <div
                   className="RTE-contentEditableContainer"
                 >
                   <div
                     aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
+                    className="RTE-contentEditable coral coral-rte-content RTE-content"
                     contentEditable={true}
                     dangerouslySetInnerHTML={
                       Object {
@@ -309,13 +320,13 @@ exports[`renders message box when logged in 1`] = `
                   />
                   <div
                     aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
+                    className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                   >
                     Post a comment
                   </div>
                 </div>
                 <div
-                  className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                  className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -368,6 +379,8 @@ exports[`renders message box when logged in 1`] = `
           >
             <button
               className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createComment-submit"
+              data-color="primary"
+              data-variant="filled"
               disabled={true}
               onBlur={[Function]}
               onFocus={[Function]}
@@ -386,7 +399,7 @@ exports[`renders message box when logged in 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
         <label
           className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
@@ -440,7 +453,7 @@ exports[`renders message box when logged in 1`] = `
         </span>
       </div>
       <ul
-        className="TabBar-root TabBar-secondary"
+        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
         role="tablist"
       >
         <li
@@ -451,7 +464,7 @@ exports[`renders message box when logged in 1`] = `
           <button
             aria-controls="tabPane-ALL_COMMENTS"
             aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -468,7 +481,7 @@ exports[`renders message box when logged in 1`] = `
                 All Comments
               </span>
               <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
               >
                 <span
                   className="Counter-text"
@@ -514,6 +527,8 @@ exports[`renders message box when not logged in 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+        data-color="primary"
+        data-variant="underlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -526,6 +541,8 @@ exports[`renders message box when not logged in 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+        data-color="primary"
+        data-variant="outlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -541,7 +558,7 @@ exports[`renders message box when not logged in 1`] = `
       className="coral coral-createComment"
     >
       <div
-        className="MessageBox-root PostCommentFormFake-messageBox"
+        className="MessageBox-root coral coral-createComment-message PostCommentFormFake-messageBox"
       >
         <span
           aria-hidden="true"
@@ -564,18 +581,17 @@ exports[`renders message box when not logged in 1`] = `
       >
         <div
           aria-hidden="true"
-          className="coral coral-createComment-box"
         >
           <div>
             <div
-              className=""
+              className="$root content placeholder toolbar"
             >
               <div
                 className="RTE-contentEditableContainer"
               >
                 <div
                   aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content"
+                  className="RTE-contentEditable coral coral-rte-content RTE-content"
                   contentEditable={true}
                   dangerouslySetInnerHTML={
                     Object {
@@ -593,13 +609,13 @@ exports[`renders message box when not logged in 1`] = `
                 />
                 <div
                   aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder"
+                  className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                 >
                   Post a comment
                 </div>
               </div>
               <div
-                className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
               >
                 <button
                   className="Button-button"
@@ -649,6 +665,8 @@ exports[`renders message box when not logged in 1`] = `
         </div>
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
+          data-color="primary"
+          data-variant="filled"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -665,7 +683,7 @@ exports[`renders message box when not logged in 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
         <label
           className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
@@ -719,7 +737,7 @@ exports[`renders message box when not logged in 1`] = `
         </span>
       </div>
       <ul
-        className="TabBar-root TabBar-secondary"
+        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
         role="tablist"
       >
         <li
@@ -730,7 +748,7 @@ exports[`renders message box when not logged in 1`] = `
           <button
             aria-controls="tabPane-ALL_COMMENTS"
             aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -747,7 +765,7 @@ exports[`renders message box when not logged in 1`] = `
                 All Comments
               </span>
               <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
               >
                 <span
                   className="Counter-text"
@@ -793,6 +811,8 @@ exports[`renders message box when story isClosed 1`] = `
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+        data-color="primary"
+        data-variant="underlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -805,6 +825,8 @@ exports[`renders message box when story isClosed 1`] = `
       </button>
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+        data-color="primary"
+        data-variant="outlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -816,9 +838,11 @@ exports[`renders message box when story isClosed 1`] = `
         Register
       </button>
     </div>
-    <div>
+    <div
+      className="coral coral-createComment"
+    >
       <div
-        className="MessageBox-root PostCommentFormClosed-messageBox"
+        className="MessageBox-root coral coral-createComment-message PostCommentFormClosed-messageBox"
       >
         <div
           className="Markdown-root MessageBoxContent-root"
@@ -831,7 +855,7 @@ exports[`renders message box when story isClosed 1`] = `
         />
       </div>
       <div
-        className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
+        className="CallOut-root CallOut-colorRegular CallOut-fullWidth coral coral-createComment-closed"
       >
         <div>
           <div
@@ -850,7 +874,7 @@ exports[`renders message box when story isClosed 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
         <label
           className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
@@ -904,7 +928,7 @@ exports[`renders message box when story isClosed 1`] = `
         </span>
       </div>
       <ul
-        className="TabBar-root TabBar-secondary"
+        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
         role="tablist"
       >
         <li
@@ -915,7 +939,7 @@ exports[`renders message box when story isClosed 1`] = `
           <button
             aria-controls="tabPane-ALL_COMMENTS"
             aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -932,7 +956,7 @@ exports[`renders message box when story isClosed 1`] = `
                 All Comments
               </span>
               <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
               >
                 <span
                   className="Counter-text"

src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap

@@ -93,7 +93,7 @@ exports[`renders reply list 1`] = `
                 className="Comment-subBar"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                 >
                   <span
                     aria-hidden="true"
@@ -135,6 +135,8 @@ exports[`renders reply list 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -150,6 +152,8 @@ exports[`renders reply list 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-with-replies"
                       onBlur={[Function]}
@@ -170,6 +174,8 @@ exports[`renders reply list 1`] = `
                       <button
                         aria-controls="permalink-popover-comment-with-replies"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -202,6 +208,8 @@ exports[`renders reply list 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -315,7 +323,7 @@ exports[`renders reply list 1`] = `
                     className="Comment-subBar"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                      className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                     >
                       <span
                         aria-hidden="true"
@@ -357,6 +365,8 @@ exports[`renders reply list 1`] = `
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -372,6 +382,8 @@ exports[`renders reply list 1`] = `
                         </button>
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           disabled={false}
                           id="comments-commentContainer-replyButton-comment-3"
                           onBlur={[Function]}
@@ -392,6 +404,8 @@ exports[`renders reply list 1`] = `
                           <button
                             aria-controls="permalink-popover-comment-3"
                             className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            data-color="regular"
+                            data-variant="ghost"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onFocus={[Function]}
@@ -424,6 +438,8 @@ exports[`renders reply list 1`] = `
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -532,7 +548,7 @@ exports[`renders reply list 1`] = `
                     className="Comment-subBar"
                   >
                     <div
-                      className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                      className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                     >
                       <span
                         aria-hidden="true"
@@ -574,6 +590,8 @@ exports[`renders reply list 1`] = `
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -589,6 +607,8 @@ exports[`renders reply list 1`] = `
                         </button>
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           disabled={false}
                           id="comments-commentContainer-replyButton-comment-4"
                           onBlur={[Function]}
@@ -609,6 +629,8 @@ exports[`renders reply list 1`] = `
                           <button
                             aria-controls="permalink-popover-comment-4"
                             className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            data-color="regular"
+                            data-variant="ghost"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onFocus={[Function]}
@@ -641,6 +663,8 @@ exports[`renders reply list 1`] = `
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          data-color="regular"
+                          data-variant="ghost"
                           disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -751,7 +775,7 @@ exports[`renders reply list 1`] = `
                 className="Comment-subBar"
               >
                 <div
-                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
                 >
                   <span
                     aria-hidden="true"
@@ -793,6 +817,8 @@ exports[`renders reply list 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -808,6 +834,8 @@ exports[`renders reply list 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-5"
                       onBlur={[Function]}
@@ -828,6 +856,8 @@ exports[`renders reply list 1`] = `
                       <button
                         aria-controls="permalink-popover-comment-5"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -860,6 +890,8 @@ exports[`renders reply list 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`renders comment stream 1`] = `
       <button
         aria-controls="tabPane-COMMENTS"
         aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-allComments"
+        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -47,6 +47,8 @@ exports[`renders comment stream 1`] = `
       >
         <button
           className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          data-color="primary"
+          data-variant="underlined"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -59,6 +61,8 @@ exports[`renders comment stream 1`] = `
         </button>
         <button
           className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          data-color="primary"
+          data-variant="outlined"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -78,18 +82,17 @@ exports[`renders comment stream 1`] = `
         >
           <div
             aria-hidden="true"
-            className="coral coral-createComment-box"
           >
             <div>
               <div
-                className=""
+                className="$root content placeholder toolbar"
               >
                 <div
                   className="RTE-contentEditableContainer"
                 >
                   <div
                     aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
+                    className="RTE-contentEditable coral coral-rte-content RTE-content"
                     contentEditable={true}
                     dangerouslySetInnerHTML={
                       Object {
@@ -107,13 +110,13 @@ exports[`renders comment stream 1`] = `
                   />
                   <div
                     aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
+                    className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                   >
                     Post a comment
                   </div>
                 </div>
                 <div
-                  className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                  className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -163,6 +166,8 @@ exports[`renders comment stream 1`] = `
           </div>
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
+            data-color="primary"
+            data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -179,7 +184,7 @@ exports[`renders comment stream 1`] = `
         className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
       >
         <div
-          className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
           <label
             className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
@@ -233,7 +238,7 @@ exports[`renders comment stream 1`] = `
           </span>
         </div>
         <ul
-          className="TabBar-root TabBar-secondary"
+          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
           role="tablist"
         >
           <li
@@ -244,7 +249,7 @@ exports[`renders comment stream 1`] = `
             <button
               aria-controls="tabPane-ALL_COMMENTS"
               aria-selected={true}
-              className="BaseButton-root Tab-button Tab-secondary Tab-active"
+              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -261,7 +266,7 @@ exports[`renders comment stream 1`] = `
                   All Comments
                 </span>
                 <span
-                  className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
                 >
                   <span
                     className="Counter-text"
@@ -386,6 +391,8 @@ exports[`renders comment stream 1`] = `
                             >
                               <button
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -401,6 +408,8 @@ exports[`renders comment stream 1`] = `
                               </button>
                               <button
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 disabled={false}
                                 id="comments-commentContainer-replyButton-comment-0"
                                 onBlur={[Function]}
@@ -421,6 +430,8 @@ exports[`renders comment stream 1`] = `
                                 <button
                                   aria-controls="permalink-popover-comment-0"
                                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  data-color="regular"
+                                  data-variant="ghost"
                                   onBlur={[Function]}
                                   onClick={[Function]}
                                   onFocus={[Function]}
@@ -453,6 +464,8 @@ exports[`renders comment stream 1`] = `
                             >
                               <button
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -581,6 +594,8 @@ exports[`renders comment stream 1`] = `
                             >
                               <button
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
@@ -596,6 +611,8 @@ exports[`renders comment stream 1`] = `
                               </button>
                               <button
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 disabled={false}
                                 id="comments-commentContainer-replyButton-comment-from-staff-0"
                                 onBlur={[Function]}
@@ -616,6 +633,8 @@ exports[`renders comment stream 1`] = `
                                 <button
                                   aria-controls="permalink-popover-comment-from-staff-0"
                                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  data-color="regular"
+                                  data-variant="ghost"
                                   onBlur={[Function]}
                                   onClick={[Function]}
                                   onFocus={[Function]}
@@ -648,6 +667,8 @@ exports[`renders comment stream 1`] = `
                             >
                               <button
                                 className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                data-color="regular"
+                                data-variant="ghost"
                                 disabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap

@@ -399,6 +399,8 @@ exports[`render popup expanded 1`] = `
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              data-color="primary"
+              data-variant="regular"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -411,6 +413,8 @@ exports[`render popup expanded 1`] = `
             </button>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+              data-color="primary"
+              data-variant="filled"
               disabled={false}
               onBlur={[Function]}
               onFocus={[Function]}
@@ -495,6 +499,8 @@ exports[`report comment as offensive 1`] = `
              
             <button
               className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined ThankYou-dismiss"
+              data-color="primary"
+              data-variant="underlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap

@@ -108,6 +108,8 @@ exports[`renders comment stream 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -123,6 +125,8 @@ exports[`renders comment stream 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-1"
                       onBlur={[Function]}
@@ -143,6 +147,8 @@ exports[`renders comment stream 1`] = `
                       <button
                         aria-controls="permalink-popover-comment-1"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -175,6 +181,8 @@ exports[`renders comment stream 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -206,6 +214,8 @@ exports[`renders comment stream 1`] = `
       <button
         aria-controls="coral-comments-replyList-log--comment-0"
         className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+        data-color="regular"
+        data-variant="outlined"
         disabled={false}
         id="coral-comments-replyList-showAll--comment-0"
         onBlur={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap

@@ -84,7 +84,7 @@ exports[`renders deepest comment with link 1`] = `
             className="Comment-subBar"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-alignCenter"
+              className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
             >
               <span
                 aria-hidden="true"
@@ -126,6 +126,8 @@ exports[`renders deepest comment with link 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -141,6 +143,8 @@ exports[`renders deepest comment with link 1`] = `
                 </button>
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
                   onBlur={[Function]}
@@ -161,6 +165,8 @@ exports[`renders deepest comment with link 1`] = `
                   <button
                     aria-controls="permalink-popover-comment-with-deepest-replies-5"
                     className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    data-color="regular"
+                    data-variant="ghost"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -193,6 +199,8 @@ exports[`renders deepest comment with link 1`] = `
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  data-color="regular"
+                  data-variant="ghost"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -210,6 +218,8 @@ exports[`renders deepest comment with link 1`] = `
             </div>
             <a
               className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+              data-color="primary"
+              data-variant="underlined"
               href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
               id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
               onBlur={[Function]}

src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap

@@ -109,6 +109,8 @@ exports[`renders app with comment stream 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -124,6 +126,8 @@ exports[`renders app with comment stream 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-2"
                       onBlur={[Function]}
@@ -144,6 +148,8 @@ exports[`renders app with comment stream 1`] = `
                       <button
                         aria-controls="permalink-popover-comment-2"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -176,6 +182,8 @@ exports[`renders app with comment stream 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -299,6 +307,8 @@ exports[`renders app with comment stream 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -314,6 +324,8 @@ exports[`renders app with comment stream 1`] = `
                     </button>
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       id="comments-commentContainer-replyButton-comment-3"
                       onBlur={[Function]}
@@ -334,6 +346,8 @@ exports[`renders app with comment stream 1`] = `
                       <button
                         aria-controls="permalink-popover-comment-3"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        data-color="regular"
+                        data-variant="ghost"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -366,6 +380,8 @@ exports[`renders app with comment stream 1`] = `
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      data-color="regular"
+                      data-variant="ghost"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}

src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap

@@ -37,6 +37,8 @@ exports[`renders configure 1`] = `
             </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+              data-color="primary"
+              data-variant="underlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -65,6 +67,8 @@ exports[`renders configure 1`] = `
           </h1>
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
+            data-color="success"
+            data-variant="filled"
             disabled={true}
             onBlur={[Function]}
             onFocus={[Function]}
@@ -280,6 +284,8 @@ will still be displayed.
         </p>
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorError Button-variantOutlined CloseStream-button"
+          data-color="error"
+          data-variant="outlined"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}

src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap

@@ -95,6 +95,8 @@ exports[`renders profile 1`] = `
   <button
     aria-controls="coral-profile-commentHistory-log"
     className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+    data-color="regular"
+    data-variant="outlined"
     disabled={false}
     id="coral-profile-commentHistory-loadMore"
     onBlur={[Function]}

src/core/client/stream/test/profile/__snapshots__/settings.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`renders the empty settings pane 1`] = `
       <button
         aria-controls="tabPane-COMMENTS"
         aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary coral coral-tabBar-allComments"
+        className="BaseButton-root Tab-button Tab-primary coral coral-tabBar-tab coral-tabBar-comments"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -39,7 +39,7 @@ exports[`renders the empty settings pane 1`] = `
       <button
         aria-controls="tabPane-PROFILE"
         aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-myProfile"
+        className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-myProfile"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -82,6 +82,8 @@ exports[`renders the empty settings pane 1`] = `
             </h1>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              data-color="primary"
+              data-variant="regular"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -114,6 +116,8 @@ exports[`renders the empty settings pane 1`] = `
             </p>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              data-color="primary"
+              data-variant="regular"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -128,7 +132,7 @@ exports[`renders the empty settings pane 1`] = `
         </div>
       </div>
       <ul
-        className="TabBar-root TabBar-secondary"
+        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarMyProfile"
         role="tablist"
       >
         <li
@@ -139,7 +143,7 @@ exports[`renders the empty settings pane 1`] = `
           <button
             aria-controls="tabPane-MY_COMMENTS"
             aria-selected={false}
-            className="BaseButton-root Tab-button Tab-secondary"
+            className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-myComments"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -162,7 +166,7 @@ exports[`renders the empty settings pane 1`] = `
           <button
             aria-controls="tabPane-SETTINGS"
             aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarMyProfile-settings"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -280,6 +284,8 @@ Commenters you ignore will still be able to see your comments.
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                        data-color="primary"
+                        data-variant="underlined"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -345,6 +351,8 @@ Commenters you ignore will still be able to see your comments.
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+                      data-color="primary"
+                      data-variant="filled"
                       disabled={true}
                       onBlur={[Function]}
                       onFocus={[Function]}
@@ -379,6 +387,8 @@ You can make
             </p>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantOutlined"
+              data-color="regular"
+              data-variant="outlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}

src/core/client/ui/components/Button/Button.tsx

@@ -108,6 +108,8 @@ export class Button extends React.Component<Props> {
         disabled={disabled}
         ref={forwardRef}
         type={type}
+        data-variant={variant}
+        data-color={color}
         {...rest}
       />
     );

src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap

@@ -4,6 +4,8 @@ exports[`forwards ref 1`] = `
 <ForwardRef(forwardRef)
   className=""
   classes={Object {}}
+  data-color="regular"
+  data-variant="regular"
 >
   Push me
 </ForwardRef(forwardRef)>
@@ -13,6 +15,8 @@ exports[`renders a regular sized, primary colored ghost button with fullWidth 1`
 <ForwardRef(forwardRef)
   className="sizeRegular colorPrimary variantGhost fullWidth"
   classes={Object {}}
+  data-color="primary"
+  data-variant="ghost"
 >
   Push me
 </ForwardRef(forwardRef)>
@@ -22,6 +26,8 @@ exports[`renders active state 1`] = `
 <ForwardRef(forwardRef)
   className="active"
   classes={Object {}}
+  data-color="regular"
+  data-variant="regular"
 >
   Push me
 </ForwardRef(forwardRef)>
@@ -36,6 +42,8 @@ exports[`renders correctly 1`] = `
       "mouseHover": "mouseHover",
     }
   }
+  data-color="regular"
+  data-variant="regular"
 >
   Push me
 </ForwardRef(forwardRef)>