@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "17.5.0-next.0",
+    "version": "18.0.0-next.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -16,29 +16,37 @@
     },
     "scripts": {
         "prepare": "husky install",
-        "start": "npm run build && gulp server",
+        "start": "npm run build && npm-run-all --parallel browser-sync bundle:css:watch postcss:bundle:watch postcss:docs:watch",
         "test": "npm run build:css",
         "prebuild": "npm run clean",
         "prepublishOnly": "node scripts gen",
         "postpublish": "node scripts clean",
         "build": "npm run build:css && npm run lint:js && npm run bundle && npm run build:site && npm run copy",
-        "build:css": "npm run lint:less && rimraf dist && gulp && npm run lint:css",
+        "build:css": "npm run lint:sass && rimraf dist && npm run bundle:css && npm run postcss && prettier dist --write && npm run lint:css",
         "build:ci": "npm run build:css && npm run lint:js && npm run bundle && npm run copy",
         "build:jekyll": "node scripts/jekyll-config && bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
         "build:site": "npm run copy:svgToDocs && npm run build:jekyll",
         "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./docs/storybook",
         "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
         "compileModule": "npx gulp compileModule --name $NAME",
-        "bundle": "npm run bundle:js && npm run bundle:css",
+        "browser-sync": "browser-sync start -s _site --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' -w --port 3000",
+        "bundle": "npm run bundle:js",
         "bundle:js": "npm run transpile && webpack",
-        "bundle:css": "npx lessc --clean-css ./docs/src/less/index.less ./docs/static/docs.min.css",
-        "lint": "npm run lint:less && npm run lint:css && npm run lint:js",
-        "lint:less": "stylelint docs/src/less src/less --config .stylelintrc",
+        "bundle:css": "sass src/sass:dist ./docs/src/sass/index.scss:./docs/static/docs.css",
+        "bundle:css:watch": "npm run bundle:css -- --watch",
+        "postcss:bundle:watch": "npm run postcss:bundle -- --watch",
+        "postcss:docs:watch": "postcss --env production ./docs/static/*.css -d ./_site/static --watch",
+        "postcss": "npm run postcss:dist && npm run postcss:docs && npm run postcss:bundle",
+        "postcss:dist": "postcss dist/**/*.css -r ",
+        "postcss:bundle": "postcss --env production ./dist/bundles/*.css -d ./docs/static/ --ext .min.css",
+        "postcss:docs": "postcss --env production ./docs/static/docs.css -o ./docs/static/docs.min.css",
+        "lint": "npm run lint:sass && npm run lint:css && npm run lint:js",
+        "lint:sass": "stylelint docs/src/sass src/sass --config .stylelintrc",
         "lint:css": "stylelint dist --config .stylelintrc",
-        "lint:js": "eslint 'docs/src/js/main.js' > lint.log && eslint 'src/less/**/stories/*.js' >> lint.log ",
+        "lint:js": "eslint 'docs/src/js/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
         "format": "npx prettier --write .",
-        "copy": "npm run copy:lessToDist && npm run copy:svgToDist && npm run copy:tokensToDist",
-        "copy:lessToDist": "mkdirp dist/variables && ncp src/less/variables dist/variables && mkdirp dist/mixins && ncp src/less/mixins/public dist/mixins",
+        "copy": "npm run copy:sassToDist && npm run copy:svgToDist && npm run copy:tokensToDist",
+        "copy:sassToDist": "mkdirp dist/variables && ncp src/sass/variables dist/variables && mkdirp dist/mixins && ncp src/sass/mixins/public dist/mixins",
         "copy:assetsToStorybook": "node scripts storybook-copy",
         "copy:svgToDist": "mkdirp dist/svg && ncp src/svg dist/svg",
         "copy:svgToDocs": "ncp src/svg docs/static && ncp src/svg/icons.svg docs/_includes/master-icons.html",
@@ -61,77 +69,81 @@
         "prerelease:end": "changeset pre exit || :"
     },
     "devDependencies": {
-        "@babel/cli": "^7.24.1",
-        "@babel/core": "^7.24.4",
-        "@babel/preset-env": "^7.24.4",
+        "@babel/cli": "^7.24.7",
+        "@babel/core": "^7.24.7",
+        "@babel/preset-env": "^7.24.7",
         "@changesets/changelog-github": "^0.5.0",
-        "@changesets/cli": "^2.27.1",
-        "@commitlint/cli": "^19.2.2",
+        "@changesets/cli": "^2.27.6",
+        "@commitlint/cli": "^19.3.0",
         "@commitlint/config-conventional": "^19.2.2",
-        "@ebay/browserslist-config": "^2.8.0",
-        "@floating-ui/dom": "^1.6.3",
-        "@percy/cli": "^1.28.3",
-        "@percy/storybook": "^5.0.3",
-        "@storybook/html": "^8.0.8",
-        "@storybook/html-webpack5": "^8.0.8",
+        "@ebay/browserslist-config": "^2.9.0",
+        "@floating-ui/dom": "^1.6.6",
+        "@percy/cli": "^1.28.8",
+        "@percy/storybook": "^6.0.0",
+        "@storybook/html": "^8.1.10",
+        "@storybook/html-webpack5": "^8.1.10",
+        "autoprefixer": "^10.4.19",
         "babel-loader": "^9.1.3",
         "browser-sync": "^3.0.2",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^9.0.0",
+        "cssnano": "^7.0.3",
+        "eslint": "^9.5.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^9",
         "eslint-plugin-prettier": "^5",
         "gulp": "^5",
         "gulp-banner": "~0.1.3",
         "gulp-clean-css": "^4",
-        "gulp-less": "^5",
         "gulp-rename": "^2",
         "husky": "^9.0.11",
         "jekyll": "^3.0.0-beta1",
-        "jsdom": "^24.0.0",
-        "less-loader": "^12.2.0",
-        "less-plugin-autoprefix": "^2",
-        "less-plugin-clean-css": "^1.5.1",
-        "lint-staged": "^15.2.2",
-        "makeup-alert-dialog": "~0.2.0",
-        "makeup-combobox": "~0.3.0",
-        "makeup-confirm-dialog": "~0.2.0",
-        "makeup-dialog": "~0.4.1",
-        "makeup-dialog-button": "~0.3.0",
-        "makeup-drawer-dialog": "0.1.0",
-        "makeup-expander": "~0.10.1",
-        "makeup-floating-label": "~0.3.2",
-        "makeup-fullscreen-dialog": "0.1.0",
-        "makeup-input-dialog": "0.1.0",
-        "makeup-key-emitter": "~0.3.1",
-        "makeup-lightbox-dialog": "0.1.0",
-        "makeup-listbox": "~0.3.2",
-        "makeup-listbox-button": "~0.4.4",
-        "makeup-menu": "~0.3.0",
-        "makeup-menu-button": "~0.3.4",
-        "makeup-modal": "~0.4.1",
-        "makeup-panel-dialog": "0.1.0",
-        "makeup-prevent-scroll-keys": "~0.2.1",
-        "makeup-roving-tabindex": "~0.6.0",
-        "makeup-snackbar-dialog": "0.1.0",
-        "makeup-switch": "~0.2.0",
-        "makeup-toast-dialog": "0.1.0",
+        "jsdom": "^24.1.0",
+        "lint-staged": "^15.2.7",
+        "makeup-alert-dialog": "~0.3.0",
+        "makeup-combobox": "~0.4.0",
+        "makeup-confirm-dialog": "~0.3.0",
+        "makeup-dialog": "~0.5.0",
+        "makeup-dialog-button": "~0.4.0",
+        "makeup-drawer-dialog": "0.2.0",
+        "makeup-expander": "~0.11.0",
+        "makeup-floating-label": "~0.4.1",
+        "makeup-fullscreen-dialog": "0.2.0",
+        "makeup-input-dialog": "0.2.0",
+        "makeup-key-emitter": "~0.4.0",
+        "makeup-lightbox-dialog": "0.2.0",
+        "makeup-listbox": "~0.4.0",
+        "makeup-listbox-button": "~0.5.0",
+        "makeup-menu": "~0.4.0",
+        "makeup-menu-button": "~0.4.0",
+        "makeup-modal": "~0.5.0",
+        "makeup-panel-dialog": "0.2.0",
+        "makeup-prevent-scroll-keys": "~0.3.0",
+        "makeup-roving-tabindex": "~0.7.0",
+        "makeup-snackbar-dialog": "0.2.0",
+        "makeup-switch": "~0.3.0",
+        "makeup-toast-dialog": "0.2.0",
         "mkdirp": "^3",
         "ncp": "^2",
         "npm-run-all": "^4",
-        "postcss-less": "^6.0.0",
+        "postcss-cli": "^11.0.0",
+        "postcss-comment": "^2.0.0",
+        "postcss-import": "^16.1.0",
         "postcss-loader": "^8.1.1",
-        "prettier": "^3.2.5",
+        "prettier": "^3.3.2",
         "rimraf": "^5",
-        "storybook": "^8.0.8",
-        "stylelint": "^16.3.1",
+        "sass": "^1.77.6",
+        "sass-loader": "^14.2.1",
+        "storybook": "^8.1.10",
+        "stylelint": "^16.6.1",
+        "stylelint-config-prettier-scss": "^1.0.0",
         "stylelint-config-standard": "^36",
+        "stylelint-config-standard-scss": "^13.1.0",
         "stylelint-no-unsupported-browser-features": "^8",
         "stylelint-order": "^6",
         "stylelint-prettier": "^5",
-        "svgo": "^3.2.0",
-        "webpack": "^5.91.0",
+        "svgo": "^3.3.2",
+        "webpack": "^5.92.1",
         "webpack-cli": "^5.1.4",
         "winston": "^3.13.0",
         "xmlserializer": "^0.6.1",
@@ -156,7 +168,14 @@
         "extends": "@commitlint/config-conventional"
     },
     "lint-staged": {
-        "*.{js,css,md,less,json}": "prettier --write",
-        "*.{css,less}": "stylelint --config .stylelintrc"
-    }
+        "*.{js,css,md,scss,json}": "prettier --write",
+        "*.{css,scss}": "stylelint --config .stylelintrc"
+    },
+    "dependencies": {
+        "postcss": "^8.4.38",
+        "postcss-mixins": "^10.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-simple-vars": "^7.0.1"
+    },
+    "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
 }

package/postcss.config.js

@@ -0,0 +1,17 @@
+const path = require("path");
+
+module.exports = (ctx) => ({
+    plugins: [
+        require("autoprefixer"),
+        require("cssnano")({
+            preset: [
+                "default",
+                {
+                    normalizeWhitespace: ctx.env === "production",
+                    rawCache: ctx.env === "production",
+                    colormin: ctx.env === "production",
+                },
+            ],
+        }),
+    ],
+});

package/scripts/README.md

@@ -62,7 +62,7 @@ This contains a list of icon modules to generate. Each key will look up an icon
 | `size`               | Default size for these icons. Defaults to 24px for regular sizes, and 16px for small.                                                          |
 | `postfix`            | The postfix name, this will be used as the end part of the icon name                                                                           |
 | `file`               | The `src/svg` filename to pull icons from                                                                                                      |
-| `output`             | The file directory to output the generated css file to. Defaults to the `src/less/icon` directory.                                             |
+| `output`             | The file directory to output the generated css file to. Defaults to the `src/sass/icon` directory.                                             |
 
 ## importSVG
 

package/scripts/generate-bundle.js

@@ -2,7 +2,7 @@
 /* eslint-disable no-console */
 const glob = require("glob");
 const path = require("path");
-const less = require("less");
+const sass = require("sass");
 const fs = require("fs");
 const pkg = require("../package.json");
 const rimraf = require("rimraf");
@@ -46,8 +46,8 @@ class CssProcesser {
     }
 
     run() {
-        return this.generateLESS()
-            .then((raw) => this.compileLess(raw))
+        return this.generateSASS()
+            .then((raw) => this.compileSASS(raw))
             .then((raw) =>
                 this.minify ? cleanCSSInstance.minify(raw) : { styles: raw },
             )
@@ -99,10 +99,10 @@ class CssProcesser {
     }
 
     /**
-     * Generates a raw less file for given css file
+     * Generates a raw sass file for given css file
      * @param {*} file
      */
-    generateRawLess(file) {
+    generateRawSASS(file) {
         const fileName = path.basename(file, ".css");
         if (
             this.args.modules.length > 0 &&
@@ -133,7 +133,7 @@ class CssProcesser {
     processFiles(files) {
         return new Promise((resolve) => {
             const compiled = files
-                .map((file) => this.generateRawLess(file))
+                .map((file) => this.generateRawSASS(file))
                 .join("\n");
             const processed = this.processed;
             const skipped = this.skipped;
@@ -162,14 +162,15 @@ class CssProcesser {
         });
     }
 
-    generateLESS() {
+    generateSASS() {
         return this.getDistCss(this.tokensFile).then((files) =>
             this.processFiles(files),
         );
     }
 
-    compileLess(raw) {
-        return less.render(raw).then((render) => render.css);
+    compileSASS(raw) {
+        const compilation = sass.compile(raw);
+        return compilation.css;
     }
 
     writeAllFiles(raw) {
@@ -191,8 +192,8 @@ function getCDNPath(bundle) {
 }
 
 /**
- * Runs the compilation of less
- * @param {*} res The response with tokensFile and raw css/less
+ * Runs the compilation ofsass
+ * @param {*} res The response with tokensFile and raw csssass/
  * @param {*} plugin The given plugin to run the render with
  */
 /**
@@ -234,7 +235,7 @@ function writeFile(file, data) {
 }
 
 /**
- * Main function to start, generates less files and compiles and writes them
+ * Main function to start, generates sass files and compiles and writes them
  * @param {*} name
  * @param {*} args
  */

package/scripts/generate-images.js

@@ -14,7 +14,10 @@ const YAML = require("yaml");
 const config = YAML.parse(file);
 const { html2xhtml } = require("./util");
 const { query } = require("winston");
+const { size } = require("@floating-ui/dom");
 const genText = "This is a generated file, DO NOT EDIT";
+const supportedSizes = ["12", "16", "18", "20", "24", "32", "48", "64"];
+
 const defsList = [];
 
 async function getFiles(dir) {
@@ -100,6 +103,19 @@ function sortMethod({ id: a }, { id: b }) {
     return 0;
 }
 
+function sortMethodObj({ id: a }, { id: b }) {
+    const aName = a && a.name;
+    const bName = b && b.name;
+
+    if (aName < bName) {
+        return -1;
+    }
+    if (aName > bName) {
+        return 1;
+    }
+    return 0;
+}
+
 class GenerateImages {
     constructor(files, masterIconFile) {
         this.imageList = [];
@@ -131,7 +147,7 @@ class GenerateImages {
         return svgFragment;
     }
 
-    async processSvg(filePath, filename, lessFile) {
+    async processSvg(filePath, filename) {
         const data = await fs.promises.readFile(filePath, "utf8");
         const symbols = JSDOM.fragment(data);
         const symbol = symbols.querySelector("svg");
@@ -142,7 +158,10 @@ class GenerateImages {
                 config.deprecated.indexOf(nameObj.simpleName) === -1);
 
         if (isAllowedInDocs) {
-            this.imageList.push(nameObj.fullName);
+            this.imageList.push({
+                name: nameObj.fullName,
+                size: nameObj.size,
+            });
         }
         console.log("Processing SVG:", symbol, filename);
         // Need to parse it before pushing
@@ -160,10 +179,6 @@ class GenerateImages {
 
         const [, , width, height] = sizes.split(" ");
         const id = `${nameObj.prefix}-${nameObj.fullName}`;
-        lessFile.push({
-            id,
-            data: `svg.${id} { height: ${height}px; width: ${width}px; }`,
-        });
     }
 
     async run() {
@@ -173,13 +188,11 @@ class GenerateImages {
             masterSvg.removeChild(masterSvg.lastChild);
         }
 
-        const lessFile = [];
-
         await Promise.all(
             this.svgs.map(async (filePath) => {
                 const filename = path.parse(filePath).name;
                 // console.log(filename);
-                await this.processSvg(filePath, filename, lessFile);
+                await this.processSvg(filePath, filename);
             }),
         );
         if (defsList.length) {
@@ -194,20 +207,7 @@ class GenerateImages {
             masterSvg.appendChild(defsEl);
         }
 
-        lessFile.sort(sortMethod);
-
-        const prettierFormat = await prettier.format(
-            [`/* ${genText} */`]
-                .concat(lessFile.map(({ data }) => data))
-                .join("\n"),
-            { parser: "less", tabWidth: 4 },
-        );
-        await fs.promises.writeFile(
-            `src/less/icon/generated/icon.less`,
-            prettierFormat,
-        );
-
-        this.imageList.sort();
+        this.imageList.sort(sortMethodObj);
         config.icons.list = this.imageList;
 
         await fs.promises.writeFile(configFilePath, YAML.stringify(config));
@@ -226,14 +226,25 @@ function stripName(name, mappedPrefix, mappedPostfix) {
     const matcher = new RegExp(
         `^((?:icon-|program-badge-|star-rating-)?)([\\w-]+?)((?:|-small))$`,
     );
+    const sizeMatcher = new RegExp(
+        `(?:${supportedSizes.join("|")})(?:-\\w+)?$`,
+    );
+
     const nameMatch = name.match(matcher);
     if (nameMatch) {
         const [, prefix, newName, postfix] = nameMatch;
+        const sizeMatch = name.match(sizeMatcher);
+        let size;
+        if (sizeMatch) {
+            size = sizeMatch[0];
+        }
+
         const fullName = `${newName}${postfix}`;
         return {
             prefix,
             name: newName,
             postfix,
+            size,
             simpleName: prefix === "icon-" ? fullName : `${prefix}${fullName}`,
             fullName,
         };

package/src/{less/alert-dialog/alert-dialog.less → sass/alert-dialog/alert-dialog.scss}

@@ -1,14 +1,14 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dialog-mixins.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/public/typography-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dialog-mixins";
+@import "../mixins/private/token-mixins";
+@import "../mixins/public/typography-mixins";
 
 .alert-dialog[role="alertdialog"] {
-    .lightbox-dialog-base();
+    @include lightbox-dialog-base();
 }
 
 .alert-dialog__window {
-    .lightbox-dialog-window();
+    @include lightbox-dialog-window();
 
     margin-left: var(--spacing-200);
     margin-right: var(--spacing-200);
@@ -17,7 +17,7 @@
 }
 
 .alert-dialog__title {
-    .typography-large-1();
+    @include typography-large-1();
 
     margin: 0;
 }
@@ -52,7 +52,8 @@
 
 .alert-dialog--hide,
 .alert-dialog--show-init {
-    && {
+    &.alert-dialog--hide,
+    &.alert-dialog--show-init {
         display: flex;
     }
 
@@ -68,7 +69,8 @@
 
 .alert-dialog--show,
 .alert-dialog--hide-init {
-    && {
+    &.alert-dialog--show,
+    &.alert-dialog--hide-init {
         display: flex;
     }
 
@@ -82,15 +84,15 @@
     }
 }
 
-@media (min-width: @_screen-size-MD) {
+@media (min-width: $_screen-size-MD) {
     .alert-dialog__window {
-        .lightbox-dialog-window-large();
+        @include lightbox-dialog-window-large();
 
         max-width: calc(88% - var(--spacing-400));
     }
 }
 
-@media (min-width: @_screen-size-LG) {
+@media (min-width: $_screen-size-LG) {
     .alert-dialog__window {
         max-width: var(--dialog-lightbox-max-width);
     }

package/src/sass/avatar/avatar.scss

@@ -0,0 +1,134 @@
+@import "../variables/variables";
+
+/* These are temporary colors until we get the new palette */
+$_avatar-teal-foreground-color: #002a69;
+$_avatar-teal-background-color: #84b4fb;
+$_avatar-light-teal-foreground-color: #07465a;
+$_avatar-light-teal-background-color: #44ccd5;
+$_avatar-green-foreground-color: #1b561a;
+$_avatar-green-background-color: #4ce160;
+$_avatar-lime-foreground-color: #4e4e0c;
+$_avatar-lime-background-color: #c1d737;
+$_avatar-yellow-foreground-color: #553b06;
+$_avatar-yellow-background-color: #ffbd14;
+$_avatar-orange-foreground-color: #562501;
+$_avatar-orange-background-color: #ff8806;
+$_avatar-pink-foreground-color: #4b112d;
+$_avatar-pink-background-color: #f79cc8;
+$_avatar-magenta-foreground-color: #3e135f;
+$_avatar-magenta-background-color: #cc9ef0;
+
+.avatar {
+    align-items: center;
+    background-color: $_avatar-teal-background-color;
+    border-radius: 50%;
+    color: $_avatar-teal-foreground-color;
+    display: inline-flex;
+    font-size: var(--font-size-large-2);
+    font-weight: var(--font-weight-bold);
+    height: 48px;
+    justify-content: center;
+    line-height: 48px;
+    overflow: hidden;
+    width: 48px;
+}
+.avatar > svg {
+    height: 100%;
+    width: 100%;
+}
+
+.avatar > img {
+    height: 48px;
+    object-fit: cover;
+    width: 48px;
+}
+
+.avatar--teal {
+    background-color: $_avatar-teal-background-color;
+    color: $_avatar-teal-foreground-color;
+}
+
+.avatar--light-teal {
+    background-color: $_avatar-light-teal-background-color;
+    color: $_avatar-light-teal-foreground-color;
+}
+
+.avatar--green {
+    background-color: $_avatar-green-background-color;
+    color: $_avatar-green-foreground-color;
+}
+
+.avatar--lime {
+    background-color: $_avatar-lime-background-color;
+    color: $_avatar-lime-foreground-color;
+}
+
+.avatar--yellow {
+    background-color: $_avatar-yellow-background-color;
+    color: $_avatar-yellow-foreground-color;
+}
+
+.avatar--orange {
+    background-color: $_avatar-orange-background-color;
+    color: $_avatar-orange-foreground-color;
+}
+
+.avatar--magenta {
+    background-color: $_avatar-magenta-background-color;
+    color: $_avatar-magenta-foreground-color;
+}
+
+.avatar--pink {
+    background-color: $_avatar-pink-background-color;
+    color: $_avatar-pink-foreground-color;
+}
+
+.avatar--32,
+.avatar--32 > img {
+    font-size: var(--font-size-medium);
+    height: 32px;
+    line-height: 32px;
+    width: 32px;
+}
+.avatar--40,
+.avatar--40 > img {
+    font-size: var(--font-size-large-1);
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+}
+.avatar--48,
+.avatar--48 > img {
+    font-size: var(--font-size-large-2);
+    height: 48px;
+    line-height: 48px;
+    width: 48px;
+}
+.avatar--56,
+.avatar--56 > img {
+    font-size: var(--font-size-giant-1);
+    height: 56px;
+    line-height: 56px;
+    width: 56px;
+}
+.avatar--64,
+.avatar--64 > img {
+    font-size: var(--font-size-giant-2);
+    height: 64px;
+    line-height: 64px;
+    width: 64px;
+}
+.avatar--96,
+.avatar--96 > img {
+    font-size: var(--font-size-giant-3);
+    height: 96px;
+    line-height: 96px;
+    width: 96px;
+}
+.avatar--128,
+.avatar--128 > img {
+    font-size: var(--font-size-giant-4);
+    height: 128px;
+    line-height: 128px;
+    width: 128px;
+}

package/src/sass/badge/badge.scss

@@ -0,0 +1,21 @@
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
+
+.badge {
+    align-items: center;
+    @include background-color-token(
+        badge-background-color,
+        color-background-attention
+    );
+
+    border-radius: 16px;
+    @include color-token(badge-foreground-color, color-foreground-on-attention);
+
+    display: inline-flex;
+    font-size: 10px;
+    height: 16px;
+    justify-content: center;
+    min-width: 8px;
+    padding: 2px 6px;
+    white-space: nowrap;
+}