@altruist03/ui 0.1.0 → 0.2.1

package/src/components/index.ts

@@ -0,0 +1,157 @@
+export { Button } from './Button/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonShape } from './Button/Button.types';
+
+export { TextField } from './TextField/TextField';
+export type { TextFieldProps } from './TextField/TextField.types';
+
+export { IpWhitelistField } from './IpWhitelistField/IpWhitelistField';
+export type {
+  IpWhitelistFieldProps,
+  IpWhitelistRow,
+  IpWhitelistOctet,
+} from './IpWhitelistField/IpWhitelistField.types';
+
+export { SegmentedInputField } from './SegmentedInputField/SegmentedInputField';
+export type {
+  SegmentedInputFieldProps,
+  SegmentedInputChangeContext,
+} from './SegmentedInputField/SegmentedInputField.types';
+
+export { DatePicker, ExampleCustomInput } from './DatePicker/DatePicker';
+export type { DatePickerProps } from './DatePicker/DatePicker.types';
+export type { ExampleCustomInputProps } from './DatePicker/DatePicker';
+export { DateTimePicker } from './DatePicker/DateTimePicker';
+export type { DateTimePickerProps } from './DatePicker/DateTimePicker';
+
+export { DateRangePicker } from './DateRangePicker/DateRangePicker';
+export type {
+  DateRangePickerProps,
+  DateRangePickerSize,
+} from './DateRangePicker/DateRangePicker.types';
+
+export { RadioButton, RadioButtonGroup } from './RadioButton/RadioButton';
+export type { RadioButtonProps, RadioButtonGroupProps } from './RadioButton/RadioButton.types';
+
+export { Checkbox, CheckboxGroup } from './Checkbox/Checkbox';
+export type { CheckboxProps, CheckboxGroupProps } from './Checkbox/Checkbox.types';
+
+export { Pagination } from './Pagination/Pagination';
+export type { PaginationProps, PaginationSize } from './Pagination/Pagination.types';
+
+export { CloseButton } from './CloseButton/CloseButton';
+export type {
+  CloseButtonProps,
+  CloseButtonSize,
+  CloseButtonVariant,
+} from './CloseButton/CloseButton.types';
+
+export { Avatar } from './Avatar/Avatar';
+export type {
+  AvatarProps,
+  AvatarShape,
+  AvatarVariant,
+  AvatarIconType,
+} from './Avatar/Avatar.types';
+
+export { Tabs } from './Tabs/Tabs';
+export type { TabsProps, TabsOption } from './Tabs/Tabs.types';
+
+export { SubTabs, normalizeSubTabValue } from './SubTabs/SubTabs';
+export type {
+  SubTabsProps,
+  SubTabsOption,
+  SubTabsVariant,
+  SubTabsColor,
+  SubTabsSize,
+} from './SubTabs/SubTabs.types';
+
+export { ToggleButton } from './ToggleButton/ToggleButton';
+export type { ToggleButtonProps, ToggleButtonOption } from './ToggleButton/ToggleButton.types';
+
+export { ViewEditToggle } from './ViewEditToggle/ViewEditToggle';
+export type {
+  ViewEditToggleProps,
+  ViewEditMode,
+  ViewEditToggleSpotlightProps,
+} from './ViewEditToggle/ViewEditToggle.types';
+
+export { Switch } from './Switch/Switch';
+export type { SwitchProps, SwitchSize } from './Switch/Switch.types';
+
+export { MenuButton } from './MenuButton/MenuButton';
+export type { MenuButtonProps } from './MenuButton/MenuButton.types';
+
+export { Menu } from './Menu/Menu';
+export type { MenuProps, MenuItem } from './Menu/Menu.types';
+
+export { FileUpload } from './FileUpload/FileUpload';
+export type { FileUploadProps, FileUploadSize } from './FileUpload/FileUpload.types';
+
+export { UploadDropzone } from './UploadDropzone2/UploadDropzone';
+export type { UploadDropzoneProps } from './UploadDropzone2/UploadDropzone.types';
+
+export { PhoneField } from './PhoneField/PhoneField';
+export type { PhoneFieldProps, CountryCodeOption } from './PhoneField/PhoneField.types';
+
+export { Badge } from './Badge/Badge';
+export type { BadgeProps } from './Badge/Badge.types';
+
+export { FilterPopover } from './FilterPopover/FilterPopover';
+export type { FilterPopoverProps } from './FilterPopover/FilterPopover.types';
+
+export { Breadcrumb } from './Breadcrumb/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbOption } from './Breadcrumb/Breadcrumb.types';
+
+export { Loader } from './Loader/Loader';
+export type { LoaderProps } from './Loader/Loader.types';
+
+export { DataTable } from './DataTable/DataTable';
+export type { DataTableProps } from './DataTable/DataTable.types';
+
+export { default as Modal } from './Modal/Modal';
+export type { ModalProps } from './Modal/types';
+
+export { Drawer } from './Drawer/Drawer';
+export type { DrawerProps, DrawerAnchor, DrawerSize } from './Drawer/Drawer.types';
+
+export { Spinner } from './Spinner/Spinner';
+export type { SpinnerProps } from './Spinner/Spinner.types';
+
+export { Progress } from './Progress/Progress';
+export type { ProgressProps } from './Progress/Progress.types';
+
+export { Skeleton } from './Skeleton/Skeleton';
+export type { SkeletonProps, SkeletonStyleProps } from './Skeleton/Skeleton.types';
+
+export { Stepper } from './Stepper/Stepper';
+export type { StepperProps, StepperStep } from './Stepper/Stepper.types';
+
+export { Accordion } from './Accordion/Accordion';
+export type { AccordionProps } from './Accordion/Accordion.types';
+
+export { StatCard } from './StatCard/StatCard';
+export type { StatCardProps } from './StatCard/StatCard.types';
+
+export { SummaryCard, SummaryCardGrid } from './SummaryCard/SummaryCard';
+export type { SummaryCardProps, SummaryCardGridProps } from './SummaryCard/SummaryCard.types';
+
+export { SectionIcon } from './SectionIcon/SectionIcon';
+export type {
+  SectionIconProps,
+  SectionIconSize,
+  SectionIconVariant,
+} from './SectionIcon/SectionIcon.types';
+
+export { CollapsibleSearch } from './CollapsibleSearch/CollapsibleSearch';
+export type {
+  CollapsibleSearchProps,
+  CollapsibleSearchSize,
+} from './CollapsibleSearch/CollapsibleSearch';
+export { Toast, ToastProvider, useToastDS } from './Toast/Toast';
+export type {
+  ToastProps,
+  ToastVariant,
+  ToastPosition,
+  ToastContainerProps,
+  ToastContextValue,
+} from './Toast/Toast.types';

package/src/icons/ReportDollarIcon.tsx

@@ -0,0 +1,71 @@
+import { forwardRef } from 'react';
+import type { SVGProps } from 'react';
+
+export interface ReportDollarIconProps extends SVGProps<SVGSVGElement> {
+  /** Icon size in px. Defaults to 24. */
+  size?: number | string;
+  /** Fill colour of the document body. Inherits from `currentColor` by default. */
+  color?: string;
+  /** Colour of the `$` glyph and inner strokes. Defaults to white. */
+  glyphColor?: string;
+  /**
+   * Optional MUI-style `sx` prop. Only `fontSize` is consumed so the icon
+   * composes seamlessly with `SectionIcon`, which sets sizing via `sx`.
+   */
+  sx?: { fontSize?: number | string };
+}
+
+/**
+ * ReportDollarIcon
+ *
+ * A filled "document with dollar sign" mark used for financial / expense
+ * report section headers (e.g. Summary Report, Details Report on the fuel
+ * page). Mirrors the visual weight of the MUI icon set so it composes well
+ * with `SectionIcon`.
+ */
+export const ReportDollarIcon = forwardRef<SVGSVGElement, ReportDollarIconProps>(
+  function ReportDollarIcon(
+    { size, color = 'currentColor', glyphColor = '#FFFFFF', style, sx, ...rest },
+    ref
+  ) {
+    const resolvedSize = size ?? sx?.fontSize ?? 24;
+    return (
+      <svg
+        ref={ref}
+        width={resolvedSize}
+        height={resolvedSize}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden
+        style={style}
+        {...rest}
+      >
+        <path
+          d="M6.5 2.25h7.25a1.5 1.5 0 0 1 1.06.44l4 4a1.5 1.5 0 0 1 .44 1.06v12.5A2.25 2.25 0 0 1 17 22.5H7A2.25 2.25 0 0 1 4.75 20.25V4.5A2.25 2.25 0 0 1 7 2.25Z"
+          fill={color}
+        />
+        <path
+          d="M14.25 2.75v3.5a1.5 1.5 0 0 0 1.5 1.5h3.25"
+          stroke={glyphColor}
+          strokeWidth="1.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          opacity="0.85"
+        />
+        <text
+          x="12"
+          y="16.6"
+          textAnchor="middle"
+          fontFamily="Roboto, Arial, sans-serif"
+          fontSize="9.5"
+          fontWeight="700"
+          fill={glyphColor}
+        >
+          $
+        </text>
+      </svg>
+    );
+  }
+);

package/src/icons/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Centralized icon exports for the design system.
+ *
+ * Re-exports the MUI icons that are used across product surfaces so consumers
+ * import them via the design-system entry point. This keeps icon choices
+ * consistent and lets us swap the underlying icon library in one place later.
+ */
+
+export { default as DescriptionOutlinedIcon } from '@mui/icons-material/DescriptionOutlined';
+export { default as DownloadOutlinedIcon } from '@mui/icons-material/DownloadOutlined';
+export { default as DownloadIcon } from '@mui/icons-material/Download';
+export { default as UploadIcon } from '@mui/icons-material/Upload';
+export { default as SearchIcon } from '@mui/icons-material/Search';
+export { default as RefreshIcon } from '@mui/icons-material/Refresh';
+export { default as VisibilityOutlinedIcon } from '@mui/icons-material/VisibilityOutlined';
+export { default as CheckIcon } from '@mui/icons-material/Check';
+export { default as ScheduleIcon } from '@mui/icons-material/Schedule';
+export { default as ErrorOutlineIcon } from '@mui/icons-material/ErrorOutline';
+export { default as ArrowForwardIcon } from '@mui/icons-material/ArrowForward';
+export { default as ArrowBackIcon } from '@mui/icons-material/ArrowBack';
+export { default as AddIcon } from '@mui/icons-material/Add';
+export { default as EditOutlinedIcon } from '@mui/icons-material/EditOutlined';
+
+export { ReportDollarIcon } from './ReportDollarIcon';
+export type { ReportDollarIconProps } from './ReportDollarIcon';
+
+export type { SvgIconProps } from '@mui/material/SvgIcon';

package/src/index.ts

@@ -0,0 +1,214 @@
+// Components
+export { Button } from './components/Button/Button';
+export type {
+  ButtonProps,
+  ButtonVariant,
+  ButtonSize,
+  ButtonShape,
+} from './components/Button/Button.types';
+
+export { TextField } from './components/TextField/TextField';
+export type { TextFieldProps } from './components/TextField/TextField.types';
+
+export { DatePicker } from './components/DatePicker/DatePicker';
+export type { DatePickerProps } from './components/DatePicker/DatePicker.types';
+export { DateTimePicker } from './components/DatePicker/DateTimePicker';
+export type { DateTimePickerProps } from './components/DatePicker/DateTimePicker';
+
+export { DateRangePicker } from './components/DateRangePicker/DateRangePicker';
+export type {
+  DateRangePickerProps,
+  DateRangePickerSize,
+} from './components/DateRangePicker/DateRangePicker.types';
+
+export { RadioButton, RadioButtonGroup } from './components/RadioButton/RadioButton';
+export type {
+  RadioButtonProps,
+  RadioButtonGroupProps,
+  RadioButtonSize,
+} from './components/RadioButton/RadioButton.types';
+
+export { Checkbox, CheckboxGroup } from './components/Checkbox/Checkbox';
+export type { CheckboxProps, CheckboxGroupProps } from './components/Checkbox/Checkbox.types';
+
+export { CloseButton } from './components/CloseButton/CloseButton';
+export type {
+  CloseButtonProps,
+  CloseButtonSize,
+  CloseButtonVariant,
+} from './components/CloseButton/CloseButton.types';
+
+export { Avatar } from './components/Avatar/Avatar';
+export type {
+  AvatarProps,
+  AvatarShape,
+  AvatarVariant,
+  AvatarIconType,
+} from './components/Avatar/Avatar.types';
+
+export { Tabs } from './components/Tabs/Tabs';
+export type { TabsProps, TabsOption } from './components/Tabs/Tabs.types';
+
+export { ToggleButton } from './components/ToggleButton/ToggleButton';
+export type {
+  ToggleButtonProps,
+  ToggleButtonOption,
+} from './components/ToggleButton/ToggleButton.types';
+
+export { ViewEditToggle } from './components/ViewEditToggle/ViewEditToggle';
+export type {
+  ViewEditToggleProps,
+  ViewEditMode,
+  ViewEditToggleSpotlightProps,
+} from './components/ViewEditToggle/ViewEditToggle.types';
+
+export { Switch } from './components/Switch/Switch';
+export type { SwitchProps, SwitchSize } from './components/Switch/Switch.types';
+
+export { MenuButton } from './components/MenuButton/MenuButton';
+export type { MenuButtonProps } from './components/MenuButton/MenuButton.types';
+
+export { Menu } from './components/Menu/Menu';
+export type { MenuProps, MenuItem } from './components/Menu/Menu.types';
+
+export { default as Selector } from './components/Selector/Selector';
+export type { SelectorProps } from './components/Selector/Selector.types';
+
+export { FileUpload } from './components/FileUpload/FileUpload';
+export type { FileUploadProps, FileUploadSize } from './components/FileUpload/FileUpload.types';
+
+export { UploadDropzone } from './components/UploadDropzone2/UploadDropzone';
+export type { UploadDropzoneProps } from './components/UploadDropzone2/UploadDropzone.types';
+
+export { PhoneField } from './components/PhoneField/PhoneField';
+export type { PhoneFieldProps, CountryCodeOption } from './components/PhoneField/PhoneField.types';
+
+export { Badge } from './components/Badge/Badge';
+export type { BadgeProps } from './components/Badge/Badge.types';
+
+export { StatusBadge } from './components/StatusBadge/StatusBadge';
+export type {
+  StatusBadgeProps,
+  StatusBadgeSize,
+  StatusBadgeVariant,
+} from './components/StatusBadge/StatusBadge.types';
+
+export { FilterPopover } from './components/FilterPopover/FilterPopover';
+export type { FilterPopoverProps } from './components/FilterPopover/FilterPopover.types';
+
+export { Breadcrumb } from './components/Breadcrumb/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbOption } from './components/Breadcrumb/Breadcrumb.types';
+
+export { Loader } from './components/Loader/Loader';
+export type { LoaderProps } from './components/Loader/Loader.types';
+
+export { DataTable } from './components/DataTable/DataTable';
+export type { DataTableProps } from './components/DataTable/DataTable.types';
+
+export { Skeleton } from './components/Skeleton/Skeleton';
+export type { SkeletonProps, SkeletonStyleProps } from './components/Skeleton/Skeleton.types';
+
+export { Stepper } from './components/Stepper/Stepper';
+export type { StepperProps, StepperStep } from './components/Stepper/Stepper.types';
+
+export { Accordion } from './components/Accordion/Accordion';
+export type { AccordionProps } from './components/Accordion/Accordion.types';
+
+export { StatCard } from './components/StatCard/StatCard';
+export type { StatCardProps } from './components/StatCard/StatCard.types';
+
+export { ReportCard } from './components/ReportCard/ReportCard';
+export type { ReportCardProps, ReportCardItem } from './components/ReportCard/ReportCard.types';
+
+export { SummaryCard, SummaryCardGrid } from './components/SummaryCard/SummaryCard';
+export type {
+  SummaryCardProps,
+  SummaryCardGridProps,
+} from './components/SummaryCard/SummaryCard.types';
+
+export { SectionIcon } from './components/SectionIcon/SectionIcon';
+export type {
+  SectionIconProps,
+  SectionIconSize,
+  SectionIconVariant,
+} from './components/SectionIcon/SectionIcon.types';
+
+export { CollapsibleSearch } from './components/CollapsibleSearch/CollapsibleSearch';
+export type {
+  CollapsibleSearchProps,
+  CollapsibleSearchSize,
+} from './components/CollapsibleSearch/CollapsibleSearch';
+
+export { default as Modal } from './components/Modal/Modal';
+export type { ModalProps } from './components/Modal/types';
+
+export { Drawer } from './components/Drawer/Drawer';
+export type { DrawerProps, DrawerAnchor, DrawerSize } from './components/Drawer/Drawer.types';
+
+export { Pagination } from './components/Pagination/Pagination';
+export type { PaginationProps, PaginationSize } from './components/Pagination/Pagination.types';
+
+export { PeriodSelector } from './components/PeriodSelector/PeriodSelector';
+export type { PeriodSelectorProps } from './components/PeriodSelector/PeriodSelector.types';
+
+export { default as SelectScroll } from './components/SelectScroll/SelectScroll';
+export type { SelectScrollProps } from './components/SelectScroll/SelectScroll';
+
+export { Spinner } from './components/Spinner/Spinner';
+export type { SpinnerProps } from './components/Spinner/Spinner.types';
+
+export { Progress } from './components/Progress/Progress';
+export type { ProgressProps } from './components/Progress/Progress.types';
+
+export { IpWhitelistField } from './components/IpWhitelistField/IpWhitelistField';
+export type {
+  IpWhitelistFieldProps,
+  IpWhitelistRow,
+  IpWhitelistOctet,
+} from './components/IpWhitelistField/IpWhitelistField.types';
+
+export { SegmentedInputField } from './components/SegmentedInputField/SegmentedInputField';
+export type {
+  SegmentedInputFieldProps,
+  SegmentedInputChangeContext,
+} from './components/SegmentedInputField/SegmentedInputField.types';
+
+export { SubTabs, normalizeSubTabValue } from './components/SubTabs/SubTabs';
+export type {
+  SubTabsProps,
+  SubTabsOption,
+  SubTabsVariant,
+  SubTabsColor,
+  SubTabsSize,
+} from './components/SubTabs/SubTabs.types';
+
+export { Toast, ToastProvider, useToastDS } from './components/Toast/Toast';
+export type {
+  ToastProps,
+  ToastVariant,
+  ToastPosition,
+  ToastContainerProps,
+  ToastContextValue,
+} from './components/Toast/Toast.types';
+
+// Icons
+export * from './icons';
+
+// Tokens
+export * from './tokens';
+
+// ThemeProvider (mode + brand → getTokens)
+export {
+  DesignSystemThemeProvider,
+  useTokens,
+  ThemeContext,
+  type ThemeContextValue,
+  type DesignSystemThemeProviderProps,
+} from './ThemeProvider';
+
+// Themes (token-only; no MUI)
+export * from './themes/firebird';
+export * from './themes/cpc';
+
+// Legacy theme export (resolved tokens; no MUI)
+export * from './theme';

package/src/storybook/preview.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { DesignSystemThemeProvider } from "../ThemeProvider";
+import type { BrandKey, ThemeMode } from "../tokens";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: "light",
+      values: [
+        { name: "light", value: "#FFFFFF" },
+        { name: "dark", value: "#111827" },
+        { name: "gray", value: "#F3F4F6" },
+      ],
+    },
+  },
+  globalTypes: {
+    brand: {
+      name: "Brand",
+      description: "Design system brand (firebird / cpc)",
+      defaultValue: "cpc",
+      toolbar: {
+        icon: "paintbrush",
+        items: [
+          { value: "firebird", title: "Firebird" },
+          { value: "cpc", title: "CPC" },
+        ],
+      },
+    },
+    mode: {
+      name: "Mode",
+      description: "Light / dark theme",
+      defaultValue: "light",
+      toolbar: {
+        icon: "circlehollow",
+        items: [
+          { value: "light", title: "Light" },
+          { value: "dark", title: "Dark" },
+        ],
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const brand = (context.globals?.brand as BrandKey) ?? "cpc";
+      const mode = (context.globals?.mode as ThemeMode) ?? "light";
+      return (
+        <DesignSystemThemeProvider brand={brand} mode={mode}>
+          <div style={{ fontFamily: "system-ui, sans-serif" }}>
+            <Story />
+          </div>
+        </DesignSystemThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+import { getTokens } from "../tokens";
+
+/** Legacy theme export – resolved tokens (CPC light). No MUI. Use DesignSystemThemeProvider + useTokens() in app. */
+export const theme = getTokens({ brand: "cpc", mode: "light" });

package/src/theme/types.d.ts

@@ -0,0 +1 @@
+/** Design system theme types. Theme is token-based (ResolvedTokens); no MUI theme. */

package/src/themes/cpc.ts

@@ -0,0 +1,4 @@
+import { getTokens } from "../tokens";
+
+/** CPC brand theme (light mode). Resolved tokens only – no MUI. Use DesignSystemThemeProvider for context. */
+export const cpcTheme = getTokens({ brand: "cpc", mode: "light" });

package/src/themes/firebird.ts

@@ -0,0 +1,4 @@
+import { getTokens } from "../tokens";
+
+/** Firebird brand theme (light mode). Resolved tokens only – no MUI. Use DesignSystemThemeProvider for context. */
+export const firebirdTheme = getTokens({ brand: "firebird", mode: "light" });

package/src/tokens/brands/cpc/themes/dark.json

@@ -0,0 +1,82 @@
+{
+  "color": {
+    "primary": {
+      "default": "{colors.yellow.1000}",
+      "hover": "{colors.yellow.1100}",
+      "active": "{colors.yellow.800}"
+    },
+    "border": {
+      "transparent": "{colors.transparent}",
+      "default": "{colors.gray.850}",
+      "active": "{colors.gray.650}",
+      "disabled": "{colors.gray.600}",
+      "closeButton": "{colors.white}",
+      "radioActive": "{colors.white}",
+      "tableHeaderPartition": "{colors.white}",
+      "tableBorder": "{colors.gray.1100}"
+    },
+    "background": {
+      "default": "{colors.gray.1100}",
+      "secondary": "{colors.gray.800}",
+      "tertiary": "{colors.gray.700}",
+      "disabled": "{colors.gray.600}",
+      "badge": "{colors.gray.850}",
+      "warm": "{colors.gray.1500}",
+      "chip": "{colors.gray.850}",
+      "checkbox": "{colors.gray.1200}",
+      "closeButton": "{colors.gray.1400}",
+      "dropdown": "{colors.gray.1100}",
+      "filterpopover": "{colors.gray.850}",
+      "tabsBackground": "{colors.gray.850}",
+      "tableHeader": "{colors.gray.750}",
+      "tableRow": "{colors.gray.1100}",
+      "tableRowStripe": "{colors.gray.850}",
+      "tableRowHover": "{colors.gray.1500}",
+      "modalHeader": "{colors.gray.1500}",
+      "selectBox": "{colors.gray.850}"
+    },
+    "text": {
+      "primary": "{colors.white}",
+      "secondary": "{colors.white}",
+      "tertiary": "{colors.white}",
+      "disabled": "{colors.gray.500}",
+      "inverse": "{colors.white}",
+      "fileupload": "{colors.white}",
+      "badge": "{colors.white}",
+      "description": "{colors.white}",
+      "cross": "{colors.gray.850}",
+      "tableHeader": "{colors.white}"
+    },
+    "neutral": {
+      "default": "{colors.gray.1200}",
+      "hover": "{colors.gray.1300}"
+    },
+    "checkbox": {
+      "color": {
+        "active": "{colors.yellow.1000}",
+        "inactive": "{colors.gray.1200}"
+      }
+    },
+    "radio": {
+      "color": {
+        "active": "{colors.white}",
+        "inactive": "{colors.white}",
+        "dot": "{colors.white}"
+      },
+      "label": {
+        "color": {
+          "active": "{colors.white}",
+          "inactive": "{colors.white}"
+        }
+      },
+      "background": "{colors.transparent}"
+    },
+    "badge": {
+      "background": "{colors.gray.1100}"
+    },
+    "icon": {
+      "default": "{colors.white}",
+      "caption": "{colors.white}"
+    }
+  }
+}

package/src/tokens/brands/cpc/themes/light.json

@@ -0,0 +1 @@
+{}

package/src/tokens/brands/default/brand.json

@@ -0,0 +1,20 @@
+{
+  "brand": {
+    "color": {
+      "primary": {
+        "default": "{colors.gray.600}",
+        "hover": "{colors.gray.700}",
+        "active": "{colors.gray.800}"
+      },
+      "background": {
+        "default": "{colors.white}"
+      },
+      "border": {
+        "default": "#C4C4C4",
+        "active": "{colors.gray.600}",
+        "error": "{colors.red.700}",
+        "disabled": "{colors.gray.200}"
+      }
+    }
+  }
+}