# Function css

- css<
  Composers extends
  (
  | string
  | Function
  | JSXElementConstructor<any>
  | ExoticComponent<any>
  | { [name: string]: unknown }
  )[],
  CSS = CSS<
  {},
  {
  colors: {
  activeBg: "#e7e7e7";
  background: "white";
  blue1: "#038bf4";
  blue2: "#b7d6f5";
  blue3: "#dbe6ff";
  blue4: "#33b4ff";
  blue5: "#30a2e6";
  border: "#d5d5d5";
  buttonBorder: "#bababa";
  choiceActiveBg: "#f3f3f3";
  choiceActiveText: "#313131";
  choiceBg: "#ffffff";
  choiceBorder: "#cfcfcf";
  choiceText: "#999999";
  focusColor: "#dcaf00";
  green1: "#3ec234";
  green1Darker: "#38af2f";
  grey1: "#737373";
  headerBg: "#efeff0";
  headerBorder: "#c8c8c9";
  headerText: "#484848";
  icon: "#636363";
  inactiveBg: "#d3d3de";
  inactiveDarkBg: "#999";
  inputDisabledBg: "#f3f3f3";
  inputDisabledText: "#959595";
  mainColor: "#008ad2";
  mainColorAlt: "#006AA9";
  modalBg: "#f7f7f7";
  modalButtonBg: "#f8f8f8";
  modalButtonBorder: "#c2c2c2";
  orange1: "#ff7200";
  orange1Darker: "#cc5b00";
  pink1: "#ff388f";
  pinky1: "#f5c0b7";
  pinky2: "#e07b67";
  pinky3: "#ffe1db";
  popText: "#666";
  purple1: "#7357e8";
  red1: "#ea2700";
  scrollbarsBg: "transparent";
  scrollbarsThumb: "#737373";
  selectorActive: "#008ad2";
  selectorText: "#606060";
  sub: "#959595";
  tableStripedBg: "#fafafa";
  text: "#323232";
  text2: "#181818";
  text3: "#000000";
  toggleBgDisabled: "#f0f0f0";
  toggleHandleBg: "#e0e0e0";
  toggleHandleBgDisabled: "#deae84";
  toggleHandleBorder: "#cdcdcd";
  toggleHandleBorderDisabled: "#c29f7d";
  toolbarBg: "#f8f8f8";
  toolbarBorder: "#ababab";
  toolButtonText: "#666e80";
  yellow1: "#ffde9d";
  yellow2: "#e4a429";
  yellow3: "#fff5db";
  };
  },
  DefaultThemeMap,
  {
  mx: (
  value: string | number,
  ) => { marginLeft: string | number; marginRight: string | number };
  my: (
  value: string | number,
  ) => { marginBottom: string | number; marginTop: string | number };
  px: (
  value: string | number,
  ) => { paddingLeft: string | number; paddingRight: string | number };
  py: (
  value: string | number,
  ) => { paddingBottom: string | number; paddingTop: string | number };
  size: (
  value: string | number,
  ) => { height: string | number; width: string | number };
  },
  >,
  >(
  ...composers: {
  [K in string | number | symbol]: string extends Composers[K<K>]
  ? Composers[K<K>]
  : Composers[K<K>] extends
  | string
  | Function
  | JSXElementConstructor<any>
  | ExoticComponent<any>
  ? any[any]
  : RemoveIndex<CSS> & {
  compoundVariants?: (
  (
  "variants" extends keyof (...)[(...)]
  ? { [Name in (...) | (...) | (...)]?: (...) | (...) | (...) }
  : WideObject
  ) & { css: CSS }
  )[];
  defaultVariants?: "variants" extends keyof Composers[K<K>]
  ? {
  [Name in string | number | symbol]?: String | Widen<keyof (...)>
  }
  : WideObject;
  variants?: {
  [key: string]: { [key: string]: CSS; [key: number]: CSS };
  };
  } & CSS & {
  [K2 in string
  | number
  | symbol]: K2 extends | "compoundVariants"
  | "defaultVariants"
  | "variants"
  ? unknown
  : K2 extends keyof CSS ? CSS[K2<K2>] : unknown
  }
  },
  ): CssComponent<
  StyledComponentType<Composers>,
  StyledComponentProps<Composers>,
  CSS,
  >

- #### Type Parameters

  - Composers extends (
    | string
    | Function
    | JSXElementConstructor<any>
    | ExoticComponent<any>
    | { [name: string]: unknown }
    )[]
  - CSS = CSS<
    {},
    {
    colors: {
    activeBg: "#e7e7e7";
    background: "white";
    blue1: "#038bf4";
    blue2: "#b7d6f5";
    blue3: "#dbe6ff";
    blue4: "#33b4ff";
    blue5: "#30a2e6";
    border: "#d5d5d5";
    buttonBorder: "#bababa";
    choiceActiveBg: "#f3f3f3";
    choiceActiveText: "#313131";
    choiceBg: "#ffffff";
    choiceBorder: "#cfcfcf";
    choiceText: "#999999";
    focusColor: "#dcaf00";
    green1: "#3ec234";
    green1Darker: "#38af2f";
    grey1: "#737373";
    headerBg: "#efeff0";
    headerBorder: "#c8c8c9";
    headerText: "#484848";
    icon: "#636363";
    inactiveBg: "#d3d3de";
    inactiveDarkBg: "#999";
    inputDisabledBg: "#f3f3f3";
    inputDisabledText: "#959595";
    mainColor: "#008ad2";
    mainColorAlt: "#006AA9";
    modalBg: "#f7f7f7";
    modalButtonBg: "#f8f8f8";
    modalButtonBorder: "#c2c2c2";
    orange1: "#ff7200";
    orange1Darker: "#cc5b00";
    pink1: "#ff388f";
    pinky1: "#f5c0b7";
    pinky2: "#e07b67";
    pinky3: "#ffe1db";
    popText: "#666";
    purple1: "#7357e8";
    red1: "#ea2700";
    scrollbarsBg: "transparent";
    scrollbarsThumb: "#737373";
    selectorActive: "#008ad2";
    selectorText: "#606060";
    sub: "#959595";
    tableStripedBg: "#fafafa";
    text: "#323232";
    text2: "#181818";
    text3: "#000000";
    toggleBgDisabled: "#f0f0f0";
    toggleHandleBg: "#e0e0e0";
    toggleHandleBgDisabled: "#deae84";
    toggleHandleBorder: "#cdcdcd";
    toggleHandleBorderDisabled: "#c29f7d";
    toolbarBg: "#f8f8f8";
    toolbarBorder: "#ababab";
    toolButtonText: "#666e80";
    yellow1: "#ffde9d";
    yellow2: "#e4a429";
    yellow3: "#fff5db";
    };
    },
    DefaultThemeMap,
    {
    mx: (
    value: string | number,
    ) => { marginLeft: string | number; marginRight: string | number };
    my: (
    value: string | number,
    ) => { marginBottom: string | number; marginTop: string | number };
    px: (
    value: string | number,
    ) => { paddingLeft: string | number; paddingRight: string | number };
    py: (
    value: string | number,
    ) => { paddingBottom: string | number; paddingTop: string | number };
    size: (
    value: string | number,
    ) => { height: string | number; width: string | number };
    },
    >

  #### Parameters

  - ...composers: {
    [K in string | number | symbol]: string extends Composers[K<K>]
    ? Composers[K<K>]
    : Composers[K<K>] extends
    | string
    | Function
    | JSXElementConstructor<any>
    | ExoticComponent<any>
    ? any[any]
    : RemoveIndex<CSS> & {
    compoundVariants?: (
    (
    "variants" extends keyof (...)[(...)]
    ? { [Name in (...) | (...) | (...)]?: (...) | (...) | (...) }
    : WideObject
    ) & { css: CSS }
    )[];
    defaultVariants?: "variants" extends keyof Composers[K<K>]
    ? {
    [Name in string | number | symbol]?: String | Widen<keyof (...)>
    }
    : WideObject;
    variants?: { [key: string]: { [key: string]: CSS; [key: number]: CSS } };
    } & CSS & {
    [K2 in string
    | number
    | symbol]: K2 extends | "compoundVariants"
    | "defaultVariants"
    | "variants"
    ? unknown
    : K2 extends keyof CSS ? CSS[K2<K2>] : unknown
    }
    }

  #### Returns CssComponent<
  StyledComponentType<Composers>,
  StyledComponentProps<Composers>,
  CSS,
  >

  - Defined in src/theme.ts:20