@ncds/ui-admin 0.0.12 → 0.0.13

package/dist/esm/ui-admin/src/components/svg/index.js

@@ -0,0 +1,2 @@
+export * from './SvgIcon';
+export * from './const';

package/dist/esm/ui-admin/src/components/toggle/Toggle.js

@@ -0,0 +1,67 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from 'classnames';
+export var Toggle = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    _c = _a.text,
+    text = _c === void 0 ? '' : _c,
+    _d = _a.supportText,
+    supportText = _d === void 0 ? '' : _d,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    onChange = _a.onChange,
+    className = _a.className,
+    props = __rest(_a, ["size", "text", "supportText", "disabled", "onChange", "className"]);
+  return _jsxs("label", __assign({
+    className: classNames('ncua-toggle', "ncua-toggle--".concat(size), {
+      'ncua-toggle--checked': props === null || props === void 0 ? void 0 : props.checked,
+      'ncua-toggle--disabled': disabled
+    }, className)
+  }, {
+    children: [_jsx("input", __assign({
+      type: "checkbox",
+      className: "ncua-toggle__input",
+      checked: props === null || props === void 0 ? void 0 : props.checked,
+      disabled: disabled,
+      onChange: onChange
+    }, props)), _jsx("span", __assign({
+      className: "ncua-toggle__switch"
+    }, {
+      children: _jsx("span", {
+        className: "ncua-toggle__slider"
+      })
+    })), text && _jsx(_Fragment, {
+      children: _jsxs("span", __assign({
+        className: "ncua-toggle__text-wrapper"
+      }, {
+        children: [_jsx("span", __assign({
+          className: "ncua-toggle__text"
+        }, {
+          children: text
+        })), supportText && _jsx("span", __assign({
+          className: "ncua-toggle__support-text"
+        }, {
+          children: supportText
+        }))]
+      }))
+    })]
+  }));
+};

package/dist/esm/ui-admin/src/components/toggle/index.js

@@ -0,0 +1 @@
+export * from './Toggle';

package/dist/esm/ui-admin/src/components/tooltip/Tooltip.js

@@ -0,0 +1,63 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+var tooltipContent = function (_a) {
+  var title = _a.title,
+    content = _a.content,
+    tooltipType = _a.tooltipType,
+    position = _a.position;
+  return _jsxs("span", __assign({
+    className: classNames("ncua-tooltip__bg", "ncua-tooltip__bg--".concat(tooltipType), "ncua-tooltip__bg--".concat(position))
+  }, {
+    children: [title && _jsx("span", __assign({
+      className: "ncua-tooltip__title"
+    }, {
+      children: title
+    })), content && _jsx("span", {
+      className: "ncua-tooltip__content",
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    })]
+  }));
+};
+export var Tooltip = function (_a) {
+  var _b = _a.tooltipType,
+    tooltipType = _b === void 0 ? 'black' : _b,
+    _c = _a.iconType,
+    iconType = _c === void 0 ? 'stroke' : _c,
+    _d = _a.position,
+    position = _d === void 0 ? 'top' : _d,
+    title = _a.title,
+    content = _a.content,
+    _e = _a.hideArrow,
+    hideArrow = _e === void 0 ? false : _e;
+  return _jsxs("span", __assign({
+    className: classNames('ncua-tooltip', "".concat(hideArrow ? 'ncua-tooltip--hidden-arrow' : ''), "".concat(iconType === 'stroke' ? 'ncua-tooltip--stroke' : ''))
+  }, {
+    children: [iconType === 'stroke' ? _jsx(HelpCircle, {
+      width: 16,
+      height: 16,
+      color: "var(--gray-300"
+    }) : _jsx(HelpCircleFill, {
+      width: 16,
+      height: 16,
+      color: "var(--gray-300)"
+    }), tooltipContent({
+      tooltipType: tooltipType,
+      position: position,
+      title: title,
+      content: content
+    })]
+  }));
+};

package/dist/esm/ui-admin/src/components/tooltip/index.js

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/esm/ui-admin/src/constant/index.js

@@ -0,0 +1 @@
+export * from './size';

package/dist/esm/ui-admin/src/constant/size.js

@@ -0,0 +1 @@
+export var MINIMUM_PC_SIZE = 768;

package/dist/types/ui-admin/src/components/badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import { SideSlotType } from '../button';
+import { Size } from '../../../constant/size';
+export type BadgeType = 'pill-outline' | 'pill-dark-color';
+export type BadgeColor = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled';
+export type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
+export type BadgeProps = {
+    label: string;
+    type?: BadgeType;
+    color?: BadgeColor;
+    className?: string;
+    leadingIcon?: SideSlotType;
+    trailingIcon?: SideSlotType;
+    size?: BadgeSize;
+};
+export declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/types/ui-admin/src/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/{ui-admin → types/ui-admin}/src/components/button/Button.d.ts

@@ -3,16 +3,17 @@ import { COLOR } from '../../../constant/color';
 import { Size } from '../../../constant/size';
 import { IconName } from '@ncds/ui-admin-icon';
 export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'link' | 'destructive';
-type IconSlotType = {
+export type IconSlotType = {
     type: 'icon';
     icon: IconName;
     color?: keyof typeof COLOR;
+    size?: number | string;
 };
-type CustomSlotType = {
+export type CustomSlotType = {
     type: 'custom';
     children: ReactNode;
 };
-type SideSlotType = IconSlotType | CustomSlotType;
+export type SideSlotType = IconSlotType | CustomSlotType;
 export type ButtonSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
 type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
     label: string;

package/dist/types/ui-admin/src/components/carousel/CarouselArrow.d.ts

@@ -0,0 +1,10 @@
+type CarouselArrowProps = {
+    type?: 'default' | 'line';
+    className?: string;
+    size: 'md';
+    chevron: 'left' | 'right';
+    onClick?: () => void;
+};
+export declare const CarouselArrow: ({ type, className, size, chevron, onClick }: CarouselArrowProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CarouselArrow.d.ts.map

package/dist/types/ui-admin/src/components/carousel/CarouselNumberGroup.d.ts

@@ -0,0 +1,10 @@
+type CarouselNumberGroupProps = {
+    framed?: boolean;
+    size?: 'sm';
+    color?: 'light' | 'dark';
+    currentPage: number;
+    totalPage: number;
+};
+export declare const CarouselNumberGroup: ({ framed, size, color, currentPage, totalPage, }: CarouselNumberGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CarouselNumberGroup.d.ts.map

package/dist/types/ui-admin/src/components/carousel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CarouselNumberGroup';
+export * from './CarouselArrow';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui-admin/src/components/index.d.ts

@@ -0,0 +1,10 @@
+export * from './button';
+export * from './checkbox';
+export * from './radio';
+export * from './select';
+export * from './svg';
+export * from './toggle';
+export * from './tooltip';
+export * from './carousel';
+export * from './badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui-admin/src/components/input/Textarea.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef } from 'react';
+interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
+    className?: string;
+    label?: string;
+    hintText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    destructive?: boolean;
+    characterCount?: boolean;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/types/ui-admin/src/components/toggle/Toggle.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent, ComponentPropsWithRef, FC } from 'react';
+export interface ToggleProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+    size?: 'sm' | 'md';
+    text?: string;
+    supportText?: string;
+    disabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+}
+export declare const Toggle: FC<ToggleProps>;
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/types/ui-admin/src/components/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -69,17 +69,17 @@
   --shadow-2xl: 0px 24px 48px -12px #1018282e;
   --shadow-3xl: 0px 32px 64px -12px #10182824;
   --font-families-commerce-sans: Commerce Sans;
-  --line-heights-display-xl: 76;
-  --line-heights-display-lg: 60;
-  --line-heights-display-md: 46;
-  --line-heights-display-sm: 38;
-  --line-heights-display-xs: 32;
-  --line-heights-xl: 30;
-  --line-heights-lg: 28;
-  --line-heights-md: 24;
-  --line-heights-sm: 22;
-  --line-heights-xs: 18;
-  --line-heights-xxs: 14;
+  --line-heights-display-xl: 76px;
+  --line-heights-display-lg: 60px;
+  --line-heights-display-md: 46px;
+  --line-heights-display-sm: 38px;
+  --line-heights-display-xs: 32px;
+  --line-heights-xl: 30px;
+  --line-heights-lg: 28px;
+  --line-heights-md: 24px;
+  --line-heights-sm: 22px;
+  --line-heights-xs: 18px;
+  --line-heights-xxs: 14px;
   --font-weights-commerce-sans-0: 400;
   --font-weights-commerce-sans-1: 500;
   --font-weights-commerce-sans-2: 700;
@@ -247,6 +247,7 @@ button {
   gap: 8px;
   line-height: normal;
   color: inherit;
+  transition: background-color 0.2s ease-in-out;
 }
 .ncua-btn__label {
   pointer-events: none;
@@ -456,7 +457,7 @@ button {
   z-index: 0;
 }
 
-[class*=btn--link] {
+[class*=ncua-btn--link] {
   padding: 0;
   height: auto !important;
   background-color: transparent !important;
@@ -767,7 +768,8 @@ button {
   box-shadow: var(--shadow-xs-focused-3px-gray-100);
   z-index: 1;
 }
-.ncua-input input {
+.ncua-input input,
+.ncua-input textarea {
   width: 100%;
   padding: 0;
   border: 0;
@@ -776,23 +778,29 @@ button {
   line-height: 1rem;
   background-color: var(--base-white);
 }
-.ncua-input input::-webkit-input-placeholder {
+.ncua-input input::-webkit-input-placeholder,
+.ncua-input textarea::-webkit-input-placeholder {
   color: var(--gray-300);
 }
-.ncua-input input::-moz-placeholder {
+.ncua-input input::-moz-placeholder,
+.ncua-input textarea::-moz-placeholder {
   color: var(--gray-300);
 }
-.ncua-input input:-ms-input-placeholder {
+.ncua-input input:-ms-input-placeholder,
+.ncua-input textarea:-ms-input-placeholder {
   color: var(--gray-300);
 }
-.ncua-input input::-ms-input-placeholder {
+.ncua-input input::-ms-input-placeholder,
+.ncua-input textarea::-ms-input-placeholder {
   color: var(--gray-300);
 }
-.ncua-input input::placeholder {
+.ncua-input input::placeholder,
+.ncua-input textarea::placeholder {
   transform: translateY(1px);
   color: var(--gray-300);
 }
-.ncua-input input:focus {
+.ncua-input input:focus,
+.ncua-input textarea:focus {
   outline: none;
 }
 .ncua-input--xs {
@@ -870,7 +878,8 @@ button {
   background: inherit;
   opacity: 0.5;
 }
-.ncua-input.is-disabled input {
+.ncua-input.is-disabled input,
+.ncua-input.is-disabled textarea {
   color: var(--gray-300);
   background-color: inherit;
 }
@@ -928,6 +937,43 @@ button {
   border-bottom-right-radius: 0;
 }
 
+.ncua-input--textarea {
+  font-size: var(--font-size-xxs);
+  gap: 4px;
+}
+.ncua-input--textarea .ncua-input__content {
+  flex-direction: column;
+  align-items: flex-start;
+  height: 126px;
+}
+.ncua-input--textarea .ncua-input__field {
+  padding: 12px;
+  height: 100%;
+  border-radius: 8px;
+}
+.ncua-input--textarea textarea {
+  height: 100%;
+  resize: none;
+  word-wrap: break-word;
+}
+.ncua-input--textarea textarea:disabled {
+  white-space: pre-wrap;
+}
+
+.ncua-input__text-count-wrap {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ncua-input__text-count {
+  color: var(--gray-400);
+}
+.ncua-input.destructive .ncua-input__text-count {
+  color: var(--primary-red-600);
+}
+
 .ncua-label {
   display: flex;
   gap: 4px;
@@ -1326,14 +1372,10 @@ button {
   cursor: pointer;
 }
 .ncua-pagination__page-num:hover, .ncua-pagination__page-num:focus, .ncua-pagination__page-num.is-current {
+  color: var(--gray-600);
   background-color: var(--gray-50);
-}
-.ncua-pagination__page-num:hover, .ncua-pagination__page-num.is-current {
   font-weight: 700;
-}
-.ncua-pagination__page-num:focus {
   outline: none;
-  box-shadow: var(--focus-ring-4px-gray-100);
 }
 .ncua-pagination__next {
   margin-inline: 8px 4px;
@@ -1456,6 +1498,122 @@ button {
   z-index: 200;
 }
 
+:root {
+  --toggle-sm-width: 28px;
+  --toggle-sm-height: 16px;
+  --toggle-sm-slider-size: 12px;
+  --toggle-sm-slider-top: 2px;
+  --toggle-sm-slider-left: 2px;
+  --toggle-sm-translate: 12px;
+  --toggle-sm-font-size: var(--font-size-xs);
+  --toggle-sm-line-height: var(--line-heights-xs);
+  --toggle-sm-text-margin: 8px;
+  --toggle-md-width: 44px;
+  --toggle-md-height: 24px;
+  --toggle-md-slider-size: 20px;
+  --toggle-md-slider-top: 2px;
+  --toggle-md-slider-left: 2px;
+  --toggle-md-translate: 20px;
+  --toggle-md-font-size: var(--font-size-md);
+  --toggle-md-line-height: var(--line-heights-md);
+  --toggle-md-text-margin: 12px;
+  --toggle-focus-shadow: 0px 0px 0px 3px rgba(242, 244, 247, 0.8);
+  --toggle-checked-focus-shadow: 0 0 0 2px rgba(46, 168, 79, 0.2);
+}
+
+.ncua-toggle {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  user-select: none;
+}
+.ncua-toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.ncua-toggle__switch {
+  position: relative;
+  display: inline-block;
+  background-color: var(--gray-200);
+  border-radius: 12px;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+.ncua-toggle__slider {
+  position: absolute;
+  background-color: var(--base-white);
+  border-radius: 50%;
+  transition: transform 0.3s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.ncua-toggle--sm .ncua-toggle__text-wrapper {
+  margin-top: -1px;
+}
+.ncua-toggle__text {
+  display: block;
+  color: var(--gray-600);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-toggle__support-text {
+  margin-top: 2px;
+  color: var(--gray-400);
+}
+.ncua-toggle--sm .ncua-toggle__switch {
+  width: var(--toggle-sm-width);
+  height: var(--toggle-sm-height);
+}
+.ncua-toggle--sm .ncua-toggle__slider {
+  width: var(--toggle-sm-slider-size);
+  height: var(--toggle-sm-slider-size);
+  top: var(--toggle-sm-slider-top);
+  left: var(--toggle-sm-slider-left);
+}
+.ncua-toggle--sm .ncua-toggle__text-wrapper {
+  margin-left: var(--toggle-sm-text-margin);
+  font-size: var(--toggle-sm-font-size);
+  line-height: var(--toggle-sm-line-height);
+}
+.ncua-toggle--sm.ncua-toggle--checked .ncua-toggle__slider {
+  transform: translateX(var(--toggle-sm-translate));
+}
+.ncua-toggle--md .ncua-toggle__switch {
+  width: var(--toggle-md-width);
+  height: var(--toggle-md-height);
+}
+.ncua-toggle--md .ncua-toggle__slider {
+  width: var(--toggle-md-slider-size);
+  height: var(--toggle-md-slider-size);
+  top: var(--toggle-md-slider-top);
+  left: var(--toggle-md-slider-left);
+}
+.ncua-toggle--md .ncua-toggle__text-wrapper {
+  margin-left: var(--toggle-md-text-margin);
+  font-size: var(--toggle-md-font-size);
+  line-height: var(--toggle-md-line-height);
+}
+.ncua-toggle--md.ncua-toggle--checked .ncua-toggle__slider {
+  transform: translateX(var(--toggle-md-translate));
+}
+.ncua-toggle--disabled {
+  cursor: not-allowed;
+}
+.ncua-toggle:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
+  background-color: var(--gray-300);
+}
+.ncua-toggle--checked .ncua-toggle__switch {
+  background-color: var(--green-500);
+}
+.ncua-toggle--checked:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
+  background-color: var(--green-600);
+}
+.ncua-toggle--checked__input:focus + .ncua-toggle__switch {
+  box-shadow: var(--toggle-checked-focus-shadow);
+}
+.ncua-toggle__input:focus + .ncua-toggle__switch {
+  box-shadow: var(--toggle-focus-shadow);
+}
+
 .ncua-date-picker {
   position: relative;
 }
@@ -1625,4 +1783,149 @@ button {
 }
 .ncua-date-picker--disabled .ncua-date-picker__input {
   color: var(--gray-300);
+}
+
+.ncua-carousel-number-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.ncua-carousel-number-group--light .ncua-carousel-number-group__number {
+  color: var(--gray-600);
+}
+.ncua-carousel-number-group--light .ncua-carousel-number-group__total {
+  color: var(--gray-300);
+}
+.ncua-carousel-number-group--dark .ncua-carousel-number-group__number {
+  color: var(--base-white);
+}
+.ncua-carousel-number-group--dark .ncua-carousel-number-group__total {
+  color: var(--gray-300);
+}
+.ncua-carousel-number-group--sm {
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 500;
+}
+.ncua-carousel-number-group.framed {
+  border-radius: 13px;
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--light {
+  background-color: var(--base-white);
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--dark {
+  background-color: rgba(12, 17, 29, 0.6);
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--sm {
+  padding: 2px 8px;
+}
+
+.ncua-carousel-arrow {
+  display: inline-block;
+  border-radius: 999px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.ncua-carousel-arrow__icon {
+  display: block;
+}
+.ncua-carousel-arrow--line {
+  outline: 1px solid var(--gray-200);
+}
+.ncua-carousel-arrow--md {
+  padding: 8px;
+}
+.ncua-carousel-arrow--md .ncua-carousel-arrow__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.ncua-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+  border-radius: 16px;
+  font-weight: 500;
+}
+.ncua-badge--xs {
+  font-size: var(--font-size-xxs);
+  padding: 2px 8px;
+  height: 18px;
+  line-height: var(--line-heights-xxs);
+}
+.ncua-badge--sm {
+  font-size: var(--font-size-xs);
+  padding: 2px 10px;
+  height: 22px;
+  line-height: var(--line-heights-xs);
+}
+.ncua-badge--md {
+  font-size: var(--font-size-sm);
+  padding: 2px 10px;
+  height: 26px;
+  line-height: var(--line-heights-sm);
+}
+.ncua-badge--pill-outline.ncua-badge--neutral {
+  color: var(--gray-600);
+  border: 1px solid var(--gray-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--error {
+  color: var(--primary-red-600);
+  border: 1px solid var(--primary-red-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--warning {
+  color: var(--orange-600);
+  border: 1px solid var(--orange-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--success {
+  color: var(--green-600);
+  border: 1px solid var(--green-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--blue {
+  color: var(--blue-600);
+  border: 1px solid var(--blue-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--pink {
+  color: var(--pink-600);
+  border: 1px solid var(--pink-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--disabled {
+  color: var(--gray-300);
+  border: 1px solid var(--gray-200);
+  background-color: var(--gray-100);
+}
+.ncua-badge--pill-dark-color.ncua-badge--neutral {
+  color: var(--base-white);
+  background-color: var(--base-black);
+}
+.ncua-badge--pill-dark-color.ncua-badge--error {
+  color: var(--base-white);
+  background-color: var(--primary-red-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--warning {
+  color: var(--base-white);
+  background-color: var(--orange-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--success {
+  color: var(--base-white);
+  background-color: var(--green-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--blue {
+  color: var(--base-white);
+  background-color: var(--blue-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--pink {
+  color: var(--base-white);
+  background-color: var(--pink-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--disabled {
+  color: var(--gray-300);
+  background-color: var(--gray-100);
 }