@aquera/nile-elements 0.1.38-beta-1.4 → 0.1.38

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.38-beta-1.4",
+  "version": "0.1.38",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -37,7 +37,6 @@
     "./nile-textarea": "./dist/src/nile-textarea/index.js",
     "./nile-date-picker": "./dist/src/nile-date-picker/index.js",
     "./nile-error-message": "./dist/src/nile-error-message/index.js",
-    "./nile-filter-chip": "./dist/src/nile-filter-chip/index.js",
     "./nile-form-error-message": "./dist/src/nile-form-error-message/index.js",
     "./nile-form-help-text": "./dist/src/nile-form-help-text/index.js",
     "./nile-calendar": "./dist/src/nile-calendar/index.js",
@@ -85,6 +84,7 @@
     "./nile-section-message": "./dist/src/nile-section-message/index.js",
     "./nile-toolbar": "./dist/src/nile-toolbar/index.js",
     "./nile-inline-edit": "./dist/src/nile-inline-edit/index.js",
+    "./nile-tour": "./dist/src/nile-tour/index.js",
     "./nile-table": "./dist/src/nile-table/index.js"
   },
   "scripts": {

package/rollup.config.js

@@ -15,22 +15,24 @@ const { LERNA_PACKAGE_NAME } = process.env;
 const PACKAGE_ROOT_PATH = process.cwd();
 
 export default [
-  // ------------------------------------------------------------------------
-  // 1) Monorepo build: glob all .ts under /src → per-file ESM + legacy SystemJS
-  // ------------------------------------------------------------------------
   {
     input: Object.fromEntries(
       glob.sync('src/**/*.ts').map(file => [
-        path
-          .relative('src', file)
-          .slice(0, -path.extname(file).length),
+        // This removes `src/` as well as the file extension from each file, so e.g.
+        // src/nested/foo.js becomes nested/foo
+        path.relative(
+          'src',
+          file.slice(0, file.length - path.extname(file).length)
+        ),
+        // This expands the relative paths to absolute paths, so e.g.
+        // src/nested/foo becomes /project/src/nested/foo.js
         fileURLToPath(new URL(file, import.meta.url)),
       ])
     ),
     external: ['tslib', 'lit', /^lit\/.*/],
     output: [
       {
-        // Modern (ESM) build
+        // Modern JS bundles (no JS compilation, ES module output)
         format: 'es',
         chunkFileNames: '[name]-[hash].esm.js',
         entryFileNames: '[name].esm.js',
@@ -38,7 +40,7 @@ export default [
         sourcemap: false,
       },
       {
-        // Legacy (SystemJS) build
+        // Legacy JS bundles (ES5 compilation and SystemJS module output)
         format: 'esm',
         chunkFileNames: '[name]-[hash].cjs.js',
         entryFileNames: '[name].cjs.js',
@@ -59,7 +61,6 @@ export default [
         ],
       },
     ],
-    preserveEntrySignatures: false,
     onwarn(warning) {
       if (warning.code !== 'THIS_IS_UNDEFINED') {
         console.error(`(!) ${warning.message}`);
@@ -73,7 +74,6 @@ export default [
         'process.env.LIT_DEV_MODE': JSON.stringify('false'),
       }),
       resolve(),
-      commonjs(),
       terser({
         ecma: 2017,
         module: true,
@@ -87,30 +87,35 @@ export default [
       styles(),
       summary(),
     ],
+    preserveEntrySignatures: false,
   },
-
-  // ------------------------------------------------------------------------
-  // 2) Simple single-entry build: src/index.ts → dist/*.js + types
-  // ------------------------------------------------------------------------
-  {
-    input: 'src/index.ts',
-    output: {
-      dir: 'dist',
-      format: 'es',
-      sourcemap: true,
-      chunkFileNames: '[name]-[hash].js',
-      entryFileNames: '[name].js',
-    },
-    external: [], // add any externals here if needed
-    plugins: [
-      resolve(),
-      commonjs(),
-      typescript({
-        tsconfig: './tsconfig.json',
-        declaration: true,
-        declarationDir: 'dist/types',
-      }),
-      terser(),
-    ],
-  },
+  // {
+  //   input: 'src/index.ts',
+  //   output: {
+  //     file: 'dist/index.iife.js',
+  //     format: 'iife',
+  //     name: 'NileElement'
+  //   },
+  //   plugins: [
+  //     typescript(),
+  //     replace({
+  //       'Reflect.decorate': 'undefined',
+  //       'process.env.NODE_ENV': JSON.stringify('production'),
+  //     }),
+  //     resolve(),
+  //     terser({
+  //       ecma: 2017,
+  //       module: true,
+  //       warnings: true,
+  //       mangle: {
+  //         properties: {
+  //           regex: /^__/,
+  //         },
+  //       },
+  //     }),
+  //     styles(),
+  //     summary(),
+  //     commonjs()
+  //   ],
+  // },
 ];

package/src/index.ts

@@ -76,6 +76,4 @@ export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
-export { NileFilterChip } from './nile-filter-chip'
-export { NileFileUpload } from './nile-file-upload';
-export { NileFilePreview } from './nile-file-preview';
+export { NileFilterChip } from './nile-filter-chip'

package/src/nile-accordion/nile-accordion.css.ts

@@ -31,35 +31,31 @@ export const styles = css`
   }
 
   .accordian {
-    border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
-    background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));
+    border-top:solid 1px var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
     overflow-anchor: none;
   }
 
   .accordian--lg{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-4)) var(--nile-spacing-lg , var(--ng-spacing-3));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-xl , var(--ng-spacing-6));
-    --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 16px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
 
   .accordian--md{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-lg , var(--ng-spacing-3));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3)) var(--nile-spacing-xl , var(--ng-spacing-6));
-    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 14px);
+    --accordian-heading-padding: 12px 12px;
+    --accordian-content-padding: 6px 12px 18px;
   }
 
   .accordian--sm{
-    --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
-    --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-3));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-1-5)) var(--nile-spacing-lg , var(--ng-spacing-4)) var(--nile-spacing-lg , var(--ng-spacing-3));
-    --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    --accordian-text-size:var(--sm-tesx, 12px);
+    --accordian-heading-padding: 6px 12px;
+    --accordian-content-padding: 6px 12px 12px;
   }
   
   .accordian {
     font-size: var(--accordian-text-size);
-    font-family: var(--accordion-font-family)
   }
 
   .accordian--disabled {
@@ -68,17 +64,17 @@ export const styles = css`
 
   .accordian__header {
     display: flex;
-    gap:var(--nile-spacing-lg , var(--ng-spacing-3));
+    gap:12px;
     align-items: center;
     border-radius: inherit;
-    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));
+    font-weight:500;
     padding: var(--accordian-heading-padding);
     user-select: none;
     cursor: pointer;
   }
 
   .accordian__header--dark{
-    background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));
+    background-color:var(--nile-colors-dark-200);
   }
 
   .accordian__header--arrow-left{
@@ -90,8 +86,7 @@ export const styles = css`
   }
 
   .accordian__header:focus-visible {
-    outline: solid 3px var(--nile-colors-blue-500);
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));
+    outline: solid 3px hsl(200.4, 98%, 39.4%);
     outline-offset: calc(1px + 1px);
   }
 
@@ -136,7 +131,7 @@ export const styles = css`
   }
 
   .accordian__content--arrow-left{
-   margin-left: var(--nile-spacing-4-x , var(--ng-spacing-7));  
+   margin-left:28px;
   }
 `;
 

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -36,8 +36,6 @@ export class NileAutoComplete extends NileElement {
   @property({ type: String }) placeholder: string = 'Type here ..';
 
   @property({ type: Boolean }) noBorder: boolean = false;
-  
-  @property({ type: Boolean }) noOutline: boolean = false;
 
   @property({ type: Boolean }) loading: boolean = false;
 
@@ -72,7 +70,6 @@ export class NileAutoComplete extends NileElement {
       <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
-          ?no-outline=${this.noOutline}
           .disabled=${this.disabled}
           .value=${this.value}
           @nile-input=${this.handleSearch}

package/src/nile-avatar/nile-avatar.css.ts

@@ -16,12 +16,11 @@ export const styles = css`
 
   .text__avatar {
     box-sizing: border-box;
-    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     font-style: normal;
-    aspect-ratio: 1 / 1;
-    font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-600));
-    color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));
-    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
+    font-weight: 600;
+    color: var(--nile-colors-white-base);
+    border-radius: 4px;
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -32,54 +31,47 @@ export const styles = css`
 
   .avatar {
     box-sizing: border-box;
-    border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
+    border: 0.5px solid var(--nile-colors-neutral-500);
+    border-radius: 4px;
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
     overflow: hidden;
   }
 
-  .avatar__xs {
-    width: var(--nile-type-scale-4, var(--ng-height-24px));
-    height: var(--nile-type-scale-4), var(--ng-height-24px);
-    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));
-    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));
-  }
-  
   .avatar__small {
-    width: var(--nile-type-scale-4, var(--ng-height-32px));
-    height: var(--nile-type-scale-4, var(--ng-height-32px));
-    font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));
-    line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));
+    width: var(--nile-type-scale-4);
+    height: var(--nile-type-scale-4);
+    font-size: 6.516px;
+    line-height: 6.516px;
   }
 
   .avatar__medium {
-    width: var(--nile-spacing-3-x, var(--ng-height-40px));
-    height: var(--nile-spacing-3-x, var(--ng-height-40px));
-    font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));
-    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));
+    width: var(--nile-spacing-3-x);
+    height: var(--nile-spacing-3-x);
+    font-size: 12px;
+    line-height: 18px;
   }
 
   .avatar__large {
-    width: var(--nile-spacing-4xl, var(--ng-height-48px));
-    height: var(--nile-spacing-4xl, var(--ng-height-48px));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));
-    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+    line-height: 20px;
   }
 
   .avatar__extralarge {
-    height: var(--nile-spacing-5xl, 56px);
-    width: var(--nile-spacing-5xl, 56px);
-    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));
-    line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));
+    height: 40px;
+    width: 40px;
+    font-size: 16px;
+    line-height: 24px;
   }
 
   .avatar__2xl {
-    height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-16));
-    width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-16));
-    font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));
-    line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));
+    height: 64px;
+    width: 64px;
+    font-size: 24px;
+    line-height: 32px;
   }
 
   .avatar__rounded {
@@ -87,23 +79,23 @@ export const styles = css`
   }
 
   .variant__orange {
-    background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));
+    background:var(--nile-avatar-background-color-orange);
   }
 
   .variant__pink {
-    background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-pink);
   }
 
   .variant__blue {
-    background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-blue);
   }
 
   .variant__light_blue {
-    background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-lightblue);
   }
 
   .variant__green {
-    background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));
+    background: var(--nile-avatar-background-color-green);
   }
 `;
 

package/src/nile-avatar/nile-avatar.ts

@@ -50,13 +50,13 @@ export class NileAvatar extends NileElement {
   @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor = '';
 
   /** Gives the default text color  to the Avatar */
-  @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '';
+  @property({ type: String, reflect: true, attribute: 'text-color' }) textColor = '#fff';
 
   /** Gives the default border color  to the Avatar */
   @property({ type: String, reflect: true, attribute: 'border-color' }) borderColor = '';
 
   /** Size of the Avatar */
-  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';
+  @property({ reflect: true }) size: | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'md';
 
   /** Gives a border radius of 50% to the Avatar */
   @property({ type: Boolean, reflect: true }) isRounded = true;
@@ -88,8 +88,6 @@ export class NileAvatar extends NileElement {
 
   private getDefaultIconSize() {
     switch (this.size) {
-      case 'xs':
-        return '6';
       case 'sm':
         return '10';
       case 'md':
@@ -126,7 +124,6 @@ export class NileAvatar extends NileElement {
     <div
       class=${classMap({
         text__avatar: true,
-        avatar__xs: this.size === 'xs',
         avatar__small: this.size === 'sm',
         avatar__medium: this.size === 'md',
         avatar__large: this.size === 'lg',
@@ -142,9 +139,9 @@ export class NileAvatar extends NileElement {
       part="avatar__content"
       style="
         background-color: ${this.bgColor};
-        color:${this.textColor?this.textColor:"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500) )"};
-        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--ng-colors-border-secondary)'};
-        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--ng-colors-border-secondary)'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}"
+        color:${this.textColor};
+        border: 1px solid ${this.borderColor};
+        border-color:${defaultInitials ? `${this.borderColor}` : 'var(--nile-colors-neutral-500)'}"
     >
       ${content}
     </div>`
@@ -154,7 +151,7 @@ export class NileAvatar extends NileElement {
     return html`
     <nile-icon
       name="${this.icon}"
-      color="${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}"
+      color="${this.textColor && "#fff"!==this.textColor?this.textColor:'var(--nile-colors-dark-500)'}"
       size="${this.getDefaultIconSize()}"
     ></nile-icon>`
   }
@@ -166,7 +163,6 @@ export class NileAvatar extends NileElement {
       class="avatar"
       class=${classMap({
         avatar: true,
-        avatar__xs: this.size === 'xs',
         avatar__small: this.size === 'sm',
         avatar__medium: this.size === 'md',
         avatar__large: this.size === 'lg',

package/src/nile-badge/nile-badge.css.ts

@@ -15,132 +15,106 @@ export const styles = css`
   }
 
   .badge {
-    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-sm));
+    padding: 2px 6px;
+    border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    height: var(--nile-height-22px, var(--ng-height-22px));
+    height: 22px;
   }
 
   .badge__content {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-family: var(--nile-font-family-serif);
+    font-size: 12px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-line-height-small, var(--ng-font-size-text-xs));
+    font-weight: 500;
+    line-height: 18px;
     letter-spacing: 0.2px;
-    display: flex;
-    align-items: center;
   }
 
   .badge--primary {
-    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));
-    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));
+    background: var(--nile-badge-color-background-primary);
+    color: var(--nile-badge-color-font-primary);
   }
 
   .badge--normal {
-    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));
+    background: var(--nile-badge-color-background-normal);
   }
 
   .badge--info {
-    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));
+    background: var(--nile-badge-color-background-info);
   }
 
   /* for v2 */
   .badge--pink {
-    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));
-    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));
+    color: var(--nile-badge-color-font-pink);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);
+    background: var(--nile-badge-color-background-pink);
   }
 
   .badge--orange {
-    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));
-    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));
+    color: var(--nile-badge-color-font-orange);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);
+    background: var(--nile-badge-color-background-orange);
   }
 
   .badge--purple {
-    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));
-    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));
+    color: var(--nile-badge-color-font-purple);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);
+    background: var(--nile-badge-color-background-purple);
   }
 
   .badge--indigo {
-    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));
-    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));
+    color: var(--nile-badge-color-font-indigo);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);
+    background: var(--nile-badge-color-background-indigo);
   }
 
   .badge--blue {
-    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));
-    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));
+    color: var(--nile-badge-color-font-blue);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);
+    background: var(--nile-badge-color-background-blue);
   }
   .badge--blue-light {
-    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));
-    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));
+    color:var(--nile-badge-color-font-bluelight);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);
+    background: var(--nile-badge-color-background-bluelight);
   }
 
   .badge--gray-blue {
-    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-grablue, var(--ng-componentcolors-utility-gray-blue-200));
-    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));
+    color: var(--nile-badge-color-font-grayblue);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);
+    background: var(--nile-badge-color-background-grayblue);
   }
 
   .badge--success {
-    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));
-    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));
+    color: var(--nile-badge-color-font-success);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);
+    background: var(--nile-badge-color-background-success);
   }
   .badge--warning {
-    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));
-    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));
+    color: var(--nile-badge-color-font-warning);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);
+    background: var(--nile-badge-color-background-warning);
   }
 
   .badge--error {
-    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));
-    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));
+    color: var(--nile-badge-color-font-error);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);
+    background: var(--nile-badge-color-background-error);
   }
 
   .badge--brand {
-    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));
-    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));
+    color: var(--nile-badge-color-font-brand);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);
+    background: var(--nile-badge-color-background-brand);
   }
 
   .badge--gray {
-    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
-    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
-    border-style: solid;
-    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
-    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
+    color: var(--nile-badge-color-font-gray);
+    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);
+    background: var(--nile-badge-color-background-gray);
   }
 
   .badge--pink.badge--pill-outline {
@@ -196,9 +170,8 @@ export const styles = css`
   }
 
   .badge--rounded {
-    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md));
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    padding: 2px 8px;
+    border-radius: 100px;
   }
 `;
 export default [styles];
-