@ebay/skin 14.1.3 → 14.2.0-0

package/dist/tooltip/tooltip.css

@@ -4,6 +4,7 @@
   --bubble-right-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-bottom-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-top-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
+  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }
 .tooltip {
   position: relative;
@@ -13,7 +14,7 @@ span.tooltip {
 }
 .tooltip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
-  box-shadow: var(--bubble-base-box-shadow);
+  filter: var(--bubble-filter);
   font-size: 14px;
   max-width: 344px;
   width: -webkit-max-content;
@@ -28,19 +29,19 @@ span.tooltip {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
   position: relative;
   z-index: 1;
-  background-color: var(--tooltip-background-color, var(--color-background-information));
-  color: var(--tooltip-foreground-color, var(--color-foreground-on-information));
+  background-color: var(--tooltip-background-color, var(--color-background-primary));
+  color: var(--tooltip-foreground-color, var(--color-foreground-primary));
 }
 span.tooltip__mask {
   display: block;
 }
 .tooltip__cell {
   display: flex;
-  padding: 16px;
+  padding: 8px 16px;
   word-break: break-word;
 }
 .tooltip__cell a {
-  color: var(--tooltip-foreground-color, var(--color-foreground-on-information));
+  color: var(--tooltip-foreground-color, var(--color-foreground-primary));
 }
 .tooltip__cell a:focus {
   outline: 1px dashed currentColor;
@@ -66,83 +67,71 @@ button.tooltip__close {
   width: 32px;
 }
 .tooltip__pointer {
-  height: 16px;
+  height: 8px;
   position: absolute;
   transform: rotate(45deg);
-  width: 16px;
+  width: 8px;
   z-index: 0;
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
-  background-color: var(--tooltip-background-color, var(--color-background-information));
+  top: -4px;
+  left: calc(50% - 4px);
+  background-color: var(--tooltip-background-color, var(--color-background-primary));
 }
 .tooltip__pointer--top-left {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: 12px;
 }
 .tooltip__pointer--top {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
+  top: -4px;
+  left: calc(50% - 4px);
 }
 .tooltip__pointer--top-right {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: auto;
   right: 12px;
 }
 .tooltip__pointer--bottom-left {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: 12px;
 }
 .tooltip__pointer--bottom {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
-  left: calc(50% - 8px);
+  left: calc(50% - 4px);
 }
 .tooltip__pointer--bottom-right {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: auto;
   right: 12px;
 }
 .tooltip__pointer--left {
-  top: calc(50% - 8px);
-  left: -7px;
+  top: calc(50% - 4px);
+  left: -4px;
 }
 .tooltip__pointer--left-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: auto;
 }
 .tooltip__pointer--left-top {
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: 12px;
 }
 .tooltip__pointer--right {
-  top: calc(50% - 8px);
-  box-shadow: var(--bubble-right-box-shadow);
+  top: calc(50% - 4px);
   left: auto;
-  right: -7px;
+  right: -4px;
 }
 .tooltip__pointer--right-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: auto;
 }
 .tooltip__pointer--right-top {
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: 12px;
 }
 .tooltip--expanded .tooltip__overlay,

package/dist/tourtip/tourtip.css

@@ -4,6 +4,7 @@
   --bubble-right-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-bottom-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-top-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
+  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }
 .tourtip {
   position: relative;
@@ -13,7 +14,7 @@ span.tourtip {
 }
 .tourtip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
-  box-shadow: var(--bubble-base-box-shadow);
+  filter: var(--bubble-filter);
   font-size: 14px;
   max-width: 344px;
   width: -webkit-max-content;
@@ -26,19 +27,19 @@ span.tourtip {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
   position: relative;
   z-index: 1;
-  background-color: var(--tourtip-background-color, var(--color-background-information));
-  color: var(--tourtip-foreground-color, var(--color-foreground-on-information));
+  background-color: var(--tourtip-background-color, var(--color-background-primary));
+  color: var(--tourtip-foreground-color, var(--color-foreground-primary));
 }
 span.tourtip__mask {
   display: block;
 }
 .tourtip__cell {
   display: flex;
-  padding: 16px;
+  padding: 8px 16px;
   word-break: break-word;
 }
 .tourtip__cell a {
-  color: var(--tourtip-foreground-color, var(--color-foreground-on-information));
+  color: var(--tourtip-foreground-color, var(--color-foreground-primary));
 }
 .tourtip__cell a:focus {
   outline: 1px dashed currentColor;
@@ -62,98 +63,77 @@ button.tourtip__close {
   padding: 0;
   white-space: nowrap;
   width: 32px;
-  color: var(--tourtip-foreground-color, var(--color-foreground-on-information));
-}
-button.tourtip__close:focus,
-button.tourtip__close:hover {
-  color: var(--color-state-primary-hover);
-}
-button.tourtip__close:focus {
-  outline: 1px dashed currentColor;
 }
 button.tourtip__close > svg {
   fill: currentColor;
-  height: 14px;
   width: 14px;
 }
 .tourtip__pointer {
-  height: 16px;
+  height: 8px;
   position: absolute;
   transform: rotate(45deg);
-  width: 16px;
+  width: 8px;
   z-index: 0;
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
-  background-color: var(--tourtip-background-color, var(--color-background-information));
+  top: -4px;
+  left: calc(50% - 4px);
+  background-color: var(--tourtip-background-color, var(--color-background-primary));
 }
 .tourtip__pointer--top-left {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: 12px;
 }
 .tourtip__pointer--top {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
+  top: -4px;
+  left: calc(50% - 4px);
 }
 .tourtip__pointer--top-right {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: auto;
   right: 12px;
 }
 .tourtip__pointer--bottom-left {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: 12px;
 }
 .tourtip__pointer--bottom {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
-  left: calc(50% - 8px);
+  left: calc(50% - 4px);
 }
 .tourtip__pointer--bottom-right {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: auto;
   right: 12px;
 }
 .tourtip__pointer--left {
-  top: calc(50% - 8px);
-  left: -7px;
+  top: calc(50% - 4px);
+  left: -4px;
 }
 .tourtip__pointer--left-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: auto;
 }
 .tourtip__pointer--left-top {
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: 12px;
 }
 .tourtip__pointer--right {
-  top: calc(50% - 8px);
-  box-shadow: var(--bubble-right-box-shadow);
+  top: calc(50% - 4px);
   left: auto;
-  right: -7px;
+  right: -4px;
 }
 .tourtip__pointer--right-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: auto;
 }
 .tourtip__pointer--right-top {
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: 12px;
 }
 .tourtip__heading {

package/dist/variables/variables.less

@@ -33,6 +33,7 @@
 @spacing-25: @spacing-100 * 0.25;
 @spacing-50: @spacing-100 * 0.5;
 @spacing-100: 8px;
+@spacing-150: @spacing-100 * 1.5;
 @spacing-200: @spacing-100 * 2;
 @spacing-300: @spacing-100 * 3;
 @spacing-400: @spacing-100 * 4;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "14.1.3",
+    "version": "14.2.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -63,8 +63,8 @@
         "@commitlint/cli": "^17.0.2",
         "@commitlint/config-conventional": "^17.0.2",
         "@ebay/browserslist-config": "^2.2.0",
-        "@percy/cli": "^1.3.1",
-        "@percy/storybook": "^4.2.1",
+        "@percy/cli": "^1.8.0",
+        "@percy/storybook": "^4.3.1",
         "@storybook/builder-webpack5": "^6.5.9",
         "@storybook/html": "^6.5.9",
         "@storybook/manager-webpack5": "^6.5.9",

package/scripts/generate-images.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const path = require('path');
 const currentDir = path.dirname(__dirname);
 const svgDir = path.resolve(currentDir, 'src', 'svg');
+const svgIconDir = path.resolve(currentDir, 'src', 'svg', 'icon');
 const masterIconPath = path.resolve(svgDir, 'icons.svg');
 const jsdom = require('jsdom');
 const prettier = require('prettier');
@@ -27,39 +28,44 @@ async function getFiles(dir) {
 
 class GenerateImages {
     constructor(files, masterIconFile) {
-        this.imageList = {};
+        this.imageList = [];
         this.svgs = files.filter((f) => f.endsWith('.svg') && f !== 'icons.svg');
         this.masterIconSymbols = new JSDOM(masterIconFile);
         this.masterDocument = this.masterIconSymbols.window.document;
         this.masterList = [];
     }
 
-    appendImages(filename, nameObj) {
-        this.imageList[filename].push(nameObj.fullName);
+    processSymbolToSVG(symbol, name) {
+        const newSVGCode = symbol.outerHTML.replace('<svg', '<symbol').replace('</svg', '</symbol');
+
+        const svgJsDom = new JSDOM(newSVGCode, { contentType: 'text/xml' });
+        const svgFragment = svgJsDom.window.document.querySelector('symbol');
+        svgFragment.setAttribute('id', name);
+        svgFragment.removeAttribute('xmlns');
+        return svgFragment;
     }
 
-    async processSvg(filePath, mappedName, filename) {
+    async processSvg(filePath, filename, lessFile) {
         const data = await fs.promises.readFile(filePath, 'utf8');
         const symbols = JSDOM.fragment(data);
+        const symbol = symbols.querySelector('svg');
 
-        const lessFile = [`/* ${genText} */`];
-        symbols.querySelectorAll('symbol').forEach((symbol) => {
-            const nameObj = stripName(symbol.id, mappedName.prefix, mappedName.postfix);
-            this.appendImages(filename, nameObj);
-
-            this.masterList.push(symbol);
+        const nameObj = stripName(filename);
+        if (config.skipDocs.indexOf(nameObj.simpleName) === -1) {
+            this.imageList.push(nameObj.fullName);
+        }
 
-            if (config.skip.indexOf(symbol.id) > -1) {
-                return;
-            }
-            const sizes = symbol.getAttribute('viewBox');
-            const [, , width, height] = sizes.split(' ');
-            lessFile.push(
-                `svg.${nameObj.prefix}-${nameObj.name}${nameObj.postfix} { height: ${height}px; width: ${width}px; }`
-            );
-        });
+        // Need to parse it before pushing
+        this.masterList.push(this.processSymbolToSVG(symbol, filename));
 
-        return lessFile;
+        if (config.skip.indexOf(filename) > -1) {
+            return;
+        }
+        const sizes = symbol.getAttribute('viewBox');
+        const [, , width, height] = sizes.split(' ');
+        lessFile.push(
+            `svg.${nameObj.prefix}-${nameObj.fullName} { height: ${height}px; width: ${width}px; }`
+        );
     }
 
     async run() {
@@ -69,37 +75,23 @@ class GenerateImages {
             masterSvg.removeChild(masterSvg.lastChild);
         }
 
+        const lessFile = [`/* ${genText} */`];
+
         await Promise.all(
             this.svgs.map(async (filePath) => {
-                let filename = path.parse(filePath).name;
-                const writeFilename = filename;
-                if (filename === 'icons') {
-                    return;
-                }
-                let mappedName = config[filename];
-                if (config.icons.file.indexOf(filename) > -1) {
-                    mappedName = config.icons;
-                    filename = 'icons';
-                }
-                if (!mappedName) {
-                    return;
-                }
-
-                this.imageList[filename] = this.imageList[filename] || [];
-
-                const lessFile = await this.processSvg(filePath, mappedName, filename);
-
-                // this.imageList[filename].sort();
-                await fs.promises.writeFile(
-                    `src/less/icon/generated/${writeFilename}.less`,
-                    prettier.format(lessFile.join('\n'), { parser: 'less', tabWidth: 4 })
-                );
+                const filename = path.parse(filePath).name;
+                await this.processSvg(filePath, filename, lessFile);
             })
         );
-        Object.keys(config).forEach((key) => {
-            (this.imageList[key] || []).sort();
-            config[key].list = this.imageList[key] || [];
-        });
+
+        await fs.promises.writeFile(
+            `src/less/icon/generated/icon.less`,
+            prettier.format(lessFile.join('\n'), { parser: 'less', tabWidth: 4 })
+        );
+
+        this.imageList.sort();
+        config.icons.list = this.imageList;
+
         await fs.promises.writeFile(configFilePath, YAML.stringify(config));
 
         this.masterList.sort((a, b) => {
@@ -120,17 +112,17 @@ class GenerateImages {
 }
 
 function stripName(name, mappedPrefix, mappedPostfix) {
-    const matcher = new RegExp(
-        `^((?:${mappedPrefix}-|icon-))([\\w-]+?)((?:${mappedPostfix || ''}|-small))$`
-    );
+    const matcher = new RegExp(`^((?:icon-|program-badge-|star-rating-)?)([\\w-]+?)((?:|-small))$`);
     const nameMatch = name.match(matcher);
     if (nameMatch) {
         const [, prefix, newName, postfix] = nameMatch;
+        const fullName = `${newName}${postfix}`;
         return {
             prefix,
             name: newName,
             postfix,
-            fullName: `${newName}${postfix}`,
+            simpleName: prefix === 'icon-' ? fullName : `${prefix}${fullName}`,
+            fullName,
         };
     }
     return {
@@ -139,7 +131,7 @@ function stripName(name, mappedPrefix, mappedPostfix) {
 }
 
 async function runGenerate() {
-    const files = await getFiles(svgDir);
+    const files = await getFiles(svgIconDir);
     const masterIconFile = await fs.promises.readFile(masterIconPath);
 
     const gen = new GenerateImages(files, masterIconFile);

package/scripts/index.js

@@ -4,9 +4,28 @@ const { runImport } = require('./import-svgs');
 const { verifyBuild } = require('./verify-build');
 const { generateTopLevel, cleanTopLevel } = require('./generate-imports');
 const { copySVGIcons, copyCustomStyles } = require('./storybook/copy');
+const { splitter } = require('./split-icon');
 
 require('yargs') // eslint-disable-line
     .usage('Usage: $0 <command> [options]')
+    .command(
+        'split <file>',
+        'generates less files with styles from svg icons',
+        (yargs) => {
+            yargs.positional('svg', {
+                describe: 'SVG file',
+                demand: true,
+                default: '',
+            });
+        },
+        async (argv) => {
+            try {
+                await splitter(argv.file, argv);
+            } catch (e) {
+                console.log(e);
+            }
+        }
+    )
     .command(
         'genSVG',
         'generates less files with styles from svg icons',
@@ -19,6 +38,7 @@ require('yargs') // eslint-disable-line
             }
         }
     )
+
     .command(
         'importSVG <svg> <name> <file>',
         'imports given svg into an icon pack or updates if it exists',

package/scripts/split-icon.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const currentDir = path.dirname(__dirname);
+const svgDir = path.resolve(currentDir, 'src', 'svg');
+const { optimize } = require('svgo');
+const jsdom = require('jsdom');
+const { JSDOM } = jsdom;
+const svgConfig = require('./svgo.config');
+const { html2xhtml2 } = require('./util');
+
+async function splitter(file, argv) {
+    const skinFile = await fs.promises.readFile(path.resolve(svgDir, `${file}.svg`), 'utf8');
+
+    const symbols = JSDOM.fragment(skinFile);
+
+    for (const symbol of symbols.querySelectorAll('symbol')) {
+        const symbolId = symbol.getAttribute('id');
+        symbol.removeAttribute('id');
+        symbol.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+        await fs.promises.writeFile(
+            path.resolve(svgDir, 'icon', `${symbolId}.svg`),
+            html2xhtml2(symbol).replace('<symbol', '<svg').replace('</symbol>', '</svg>')
+        );
+    }
+}
+
+module.exports = { splitter };

package/scripts/util.js

@@ -18,6 +18,13 @@ function html2xhtml(html) {
     return prettier.format(parsedString, { parser: 'html' });
 }
 
+function html2xhtml2(html) {
+    const bodyHtml = html.outerHTML;
+    const dom = parse(bodyHtml);
+    const parsedString = `${serializeToString(dom.childNodes[0].childNodes[1].childNodes[0])}\n`;
+    return prettier.format(parsedString, { parser: 'html' });
+}
+
 function rawSvgToHtml(data) {
     return data
         .replace(/<svg.*>/, '<div hidden>\n<svg>')
@@ -35,6 +42,7 @@ async function removeFile(file) {
 
 module.exports = {
     html2xhtml,
+    html2xhtml2,
     rawSvgToHtml,
     removeFile,
 };

package/src/less/alert-dialog/stories/alert-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Alert Dialog/Alert Dialog' };
+export default { title: 'Alert Dialog' };
 
 export const base = () => `
 <div aria-labelledby="alert-dialog-title" aria-modal="true" class="alert-dialog alert-dialog--mask-fade" role="alertdialog">

package/src/less/badge/stories/badge.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Badge/Badge' };
+export default { title: 'Badge' };
 
 export const oneDigit = () => `
 <span class="badge">1</span>

package/src/less/breadcrumbs/stories/button-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Breadcrumbs/Buttons/Cascade' };
+export default { title: 'Breadcrumbs/Buttons/Cascade' };
 
 export const color = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation" style="color: green">

package/src/less/breadcrumbs/stories/buttons.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Breadcrumbs/Buttons' };
+export default { title: 'Breadcrumbs/Buttons' };
 
 export const currentLocation = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">

package/src/less/breadcrumbs/stories/link-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Breadcrumbs/Links/Cascade' };
+export default { title: 'Breadcrumbs/Links/Cascade' };
 
 export const color = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation" style="color: green">

package/src/less/breadcrumbs/stories/links.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Breadcrumbs/Breadcrumbs/Links' };
+export default { title: 'Breadcrumbs/Links' };
 
 export const currentLocation = () => `
 <nav aria-labelledby="breadcrumbs-heading" class="breadcrumbs" role="navigation">

package/src/less/button/button.less

@@ -280,13 +280,8 @@ a.fake-btn--secondary[aria-disabled="true"] {
 
 button.btn--tertiary,
 a.fake-btn--tertiary {
-    .background-color-token(btn-tertiary-background-color, color-background-secondary);
-    .border-color-token(btn-tertiary-border-color, color-background-secondary);
-    .color-token(btn-tertiary-foreground-color, color-foreground-accent);
-}
-
-a.fake-btn--tertiary:visited {
-    .color-token(btn-tertiary-foreground-color, color-foreground-accent);
+    border-width: 2px;
+    .border-color-token(btn-tertiary-border-color, color-stroke-default);
 }
 
 button.btn--tertiary:not([disabled], [aria-disabled="true"]),
@@ -302,22 +297,14 @@ a.fake-btn--tertiary[href] {
 }
 
 button.btn--tertiary[disabled],
-button.btn--tertiary[aria-disabled="true"]:not([aria-live="polite"][aria-disabled="true"]) {
-    .background-color-token(btn-tertiary-disabled-background-color, color-background-secondary);
-    .border-color-token(btn-tertiary-disabled-border-color, color-background-secondary);
-    .color-token(btn-tertiary-disabled-foreground-color, color-background-disabled);
-}
-
-a.fake-btn--tertiary:not([href]),
-a.fake-btn--tertiary[aria-disabled="true"] {
-    .background-color-token(btn-tertiary-disabled-background-color, color-background-secondary);
-    .border-color-token(btn-tertiary-disabled-border-color, color-background-secondary);
+button.btn--tertiary[aria-disabled="true"]:not([aria-live="polite"][aria-disabled="true"]),
+a.fake-btn--tertiary:not([href]) {
     .color-token(btn-tertiary-disabled-foreground-color, color-background-disabled);
 }
 
 button.btn--tertiary.btn--destructive,
 a.fake-btn--tertiary.fake-btn--destructive {
-    .color-token(btn-tertiary-destructive-foreground-color, color-foreground-attention);
+    .border-color-token(btn-tertiary-destructive-foreground-color, color-stroke-subtle);
 }
 
 button.btn--tertiary.btn--destructive:not([disabled], [aria-disabled="true"]),
@@ -334,8 +321,6 @@ a.fake-btn--tertiary.fake-btn--destructive[href] {
 
 button.btn--tertiary.btn--destructive[disabled],
 button.btn--tertiary.btn--destructive[aria-disabled="true"] {
-    background-color: transparent;
-    border: none;
     .color-token(btn-tertiary-destructive-disabled-foreground-color, color-foreground-disabled);
 }