top_banner_info refactor

Signed-off-by: Julio Ortega <julio.ortega@dialpad.com>

Author: juliodialpad

packages/dialtone-css/lib/build/less/recipes/top_banner_info.less

@@ -28,3 +28,23 @@
   margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
   text-align: right;
 }
+
+.d-recipe-top-banner-info--success {
+  background-color: var(--dt-color-surface-success);
+}
+
+.d-recipe-top-banner-info--critical {
+  background-color: var(--dt-color-surface-critical);
+}
+
+.d-recipe-top-banner-info--warning {
+  background-color: var(--dt-color-surface-warning);
+}
+
+.d-recipe-top-banner-info--info {
+  background-color: var(--dt-color-surface-info);
+}
+
+.d-recipe-top-banner-info--primary {
+  background-color: var(--dt-color-surface-primary);
+}

packages/dialtone-vue2/recipes/notices/top_banner_info/top_banner_info.test.js

@@ -68,7 +68,7 @@ describe('DtRecipeTopBannerInfo Tests', () => {
         expect(middleContent.text()).toBe(slots.default);
       });
       it('Should display with default background color', () => {
-        expect(rootElement.classes()).toContain('d-bgc-success');
+        expect(rootElement.classes()).toContain('d-recipe-top-banner-info--success');
       });
     });
 
@@ -78,7 +78,7 @@ describe('DtRecipeTopBannerInfo Tests', () => {
       });
 
       it('Should display with passed background color', () => {
-        expect(rootElement.classes()).toContain('d-bgc-info');
+        expect(rootElement.classes()).toContain('d-recipe-top-banner-info--info');
       });
     });
   });

packages/dialtone-vue2/recipes/notices/top_banner_info/top_banner_info.vue

@@ -45,14 +45,14 @@ export default {
       const bgColors = {
         // these are too specific, so for now I'm at least updating the resultant semantic value
         // TODO: breaking change: update to be more abstract
-        green300: 'd-bgc-success',
-        green100: 'd-bgc-success',
-        red200: 'd-bgc-critical',
-        red100: 'd-bgc-critical',
-        gold200: 'd-bgc-warning',
-        gold100: 'd-bgc-warning',
-        black100: 'd-bgc-info',
-        white: 'd-bgc-primary',
+        green100: 'd-recipe-top-banner-info--success',
+        green300: 'd-recipe-top-banner-info--success',
+        red100: 'd-recipe-top-banner-info--critical',
+        red200: 'd-recipe-top-banner-info--critical',
+        gold100: 'd-recipe-top-banner-info--warning',
+        gold200: 'd-recipe-top-banner-info--warning',
+        black100: 'd-recipe-top-banner-info--info',
+        white: 'd-recipe-top-banner-info--primary',
       };
       return [bgColors[this.colorCode]];
     },