How to use the @bentley/imodeljs-common.ColorDef function in @bentley/imodeljs-common

iModel.views.iterateViews({ from: "BisCore.SpatialViewDefinition" }, (view: ViewDefinition) => {
    if (!view.isSpatialView())
      return true;

    // Create a new display style.
    const vf = new ViewFlags();
    vf.renderMode = RenderMode.SmoothShade;
    vf.cameraLights = true;
    const bgColor = new ColorDef("rgb(127, 127, 127)");

    const displayStyleId = DisplayStyle3d.insert(iModel, view.model, "Schedule View Style", { viewFlags: vf, backgroundColor: bgColor, scheduleScript: script });
    iModel.views.setDefaultViewId(SpatialViewDefinition.insertWithCamera(iModel, view.model, "Schedule View", view.modelSelectorId, view.categorySelectorId, displayStyleId, iModel.projectExtents, StandardViewIndex.Iso));
    return true;
  });
  return true;

protected createDisplayParams(json: any): DisplayParams | undefined {
      const type = JsonUtils.asInt(json.type, DisplayParams.Type.Mesh);
      const lineColor = new ColorDef(JsonUtils.asInt(json.lineColor));
      const fillColor = new ColorDef(JsonUtils.asInt(json.fillColor));
      const width = JsonUtils.asInt(json.lineWidth);
      const linePixels = JsonUtils.asInt(json.linePixels, LinePixels.Solid);
      const fillFlags = JsonUtils.asInt(json.fillFlags, FillFlags.None);
      const ignoreLighting = JsonUtils.asBool(json.ignoreLighting);

      // Material will always contain its own texture if it has one
      const materialKey = json.materialId;
      const material = undefined !== materialKey ? this.materialFromJson(materialKey) : undefined;

      // We will only attempt to include the texture if material is undefined
      let textureMapping;
      if (!material) {
        const textureJson = json.texture;
        textureMapping = undefined !== textureJson ? this.textureMappingFromJson(textureJson) : undefined;

protected createDisplayParams(json: any): DisplayParams | undefined {
      const type = JsonUtils.asInt(json.type, DisplayParams.Type.Mesh);
      const lineColor = new ColorDef(JsonUtils.asInt(json.lineColor));
      const fillColor = new ColorDef(JsonUtils.asInt(json.fillColor));
      const width = JsonUtils.asInt(json.lineWidth);
      const linePixels = JsonUtils.asInt(json.linePixels, LinePixels.Solid);
      const fillFlags = JsonUtils.asInt(json.fillFlags, FillFlags.None);
      const ignoreLighting = JsonUtils.asBool(json.ignoreLighting);

      // Material will always contain its own texture if it has one
      const materialKey = json.materialId;
      const material = undefined !== materialKey ? this.materialFromJson(materialKey) : undefined;

      // We will only attempt to include the texture if material is undefined
      let textureMapping;
      if (!material) {
        const textureJson = json.texture;
        textureMapping = undefined !== textureJson ? this.textureMappingFromJson(textureJson) : undefined;

        if (undefined === textureMapping) {

      handler: (value: string) => this.updateEnvironment({ zenithColor: new ColorDef(value) }),
      value: undefined === currentEnvironment ? "#FFFFFF" : currentEnvironment.zenithColor.toHexString(),

function findOrAddMaterialIndexForColor(color: number): number {
  let result = GltfGlobals.colorToMaterialMap.get(color);
  if (result !== undefined) return result;

  const rgb = new ColorDef(color).colors;
  const pbrMetallicRoughness: GltfMaterialPbrMetallicRoughness = {
    baseColorFactor: [rgb.r / 255, rgb.g / 255, rgb.b / 255, (255 - rgb.t) / 255],
    metallicFactor: 0,
    roughnessFactor: 1,
  };
  const material: GltfMaterial = ({ pbrMetallicRoughness, doubleSided: true });
  if (rgb.t > 10) material.alphaMode = "BLEND";

  result = GltfGlobals.gltf.materials.length;
  GltfGlobals.gltf.materials.push(material);
  GltfGlobals.colorToMaterialMap.set(color, result);
  return result;
}

private convertFeatureGeometry(inGeometry: GeoJson.Geometry): GeometryStreamProps | undefined {
    if (!inGeometry)
      return undefined;

    const builder = new GeometryStreamBuilder();
    if (this._colorIndex !== undefined) {
      const colorValues = [ColorByName.blue, ColorByName.red, ColorByName.green, ColorByName.yellow, ColorByName.cyan, ColorByName.magenta, ColorByName.cornSilk, ColorByName.blueViolet, ColorByName.deepSkyBlue, ColorByName.indigo, ColorByName.fuchsia];
      const geomParams = new GeometryParams(this.featureCategoryId);
      geomParams.lineColor = new ColorDef(colorValues[this._colorIndex++ % colorValues.length]);
      builder.appendGeometryParamsChange(geomParams);
    }

    switch (inGeometry.type) {
      case GeoJson.GeometryType.point:
        const pointGeometry = this.convertPoint(inGeometry.coordinates);
        if (pointGeometry)
          builder.appendGeometry(pointGeometry);
        break;

      case GeoJson.GeometryType.linestring:
        const linestringGeometry = this.convertLinestring(inGeometry.coordinates);
        if (linestringGeometry)
          builder.appendGeometry(linestringGeometry);
        break;

private updateEnvironment(newEnv: SkyBoxProps): void {
    const oldEnv = (this._vp.view as ViewState3d).getDisplayStyle3d().environment;
    const oldSkyEnv = oldEnv.sky as SkyGradient;
    newEnv = {
      display: (oldSkyEnv as SkyBox).display,
      twoColor: undefined !== newEnv.twoColor ? newEnv.twoColor : oldSkyEnv.twoColor,
      zenithColor: undefined !== newEnv.zenithColor ? new ColorDef(newEnv.zenithColor) : oldSkyEnv.zenithColor,
      skyColor: undefined !== newEnv.skyColor ? new ColorDef(newEnv.skyColor) : oldSkyEnv.skyColor,
      groundColor: undefined !== newEnv.groundColor ? new ColorDef(newEnv.groundColor) : oldSkyEnv.groundColor,
      nadirColor: undefined !== newEnv.nadirColor ? new ColorDef(newEnv.nadirColor) : oldSkyEnv.nadirColor,
      skyExponent: undefined !== newEnv.skyExponent ? newEnv.skyExponent : oldSkyEnv.skyExponent,
      groundExponent: undefined !== newEnv.groundExponent ? newEnv.groundExponent : oldSkyEnv.groundExponent,
    };
    (this._vp.view as ViewState3d).getDisplayStyle3d().environment = new Environment(
      {
        sky: new SkyGradient(newEnv),
        ground: oldEnv.ground,
      });
    this.sync();
  }

UiComponents.i18n.translate("UiComponents:month.short.september"),
    UiComponents.i18n.translate("UiComponents:month.short.october"),
    UiComponents.i18n.translate("UiComponents:month.short.november"),
    UiComponents.i18n.translate("UiComponents:month.short.december"),
  ];

  private _amLabel = UiComponents.i18n.translate("UiComponents:time.am");
  private _pmLabel = UiComponents.i18n.translate("UiComponents:time.pm");
  private readonly _presetColors = [
    new ColorDef(ColorByName.grey),
    new ColorDef(ColorByName.lightGrey),
    new ColorDef(ColorByName.darkGrey),
    new ColorDef(ColorByName.lightBlue),
    new ColorDef(ColorByName.lightGreen),
    new ColorDef(ColorByName.darkGreen),
    new ColorDef(ColorByName.tan),
    new ColorDef(ColorByName.darkBrown),
  ];

  constructor(props: SolarTimelineComponentProps) {
    super(props);

    const dayStartMs = this.props.dataProvider.dayStartMs;
    const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;
    const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;
    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;
    const sunOffsetMs = this.props.dataProvider.timeOfDay.getTime() - dayStartMs;
    const currentTimeOffsetMs = this.ensureRange(sunOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);
    const shadowColor = this.props.dataProvider.shadowColor;
    const duration = this.props.duration ? this.props.duration : defaultPlaybackDuration;
    const speed = this.props.speed ? this.props.speed : 2;
    const adjustedDuration = duration / speed;

public render() {
    const colorDef = new ColorDef(this.state.colorValue);
    return (
      <div style="{this.props.style}">
         this._control = control}
          activeColor={colorDef}
          colorDefs={this._availableColors.length &gt; 0 ? this._availableColors : undefined}
          numColumns={this._numColumns}
          disabled={this.state.isDisabled ? true : false}
          readonly={this.state.readonly}
          onColorPick={this._onColorPick}
          data-testid="components-color-editor" /&gt;
      </div>
    );
  }
}

public static get defaultColors(): ColorDef[] {
    return [
      new ColorDef(ColorByName.red),
      new ColorDef(ColorByName.orange),
      new ColorDef(ColorByName.yellow),
      new ColorDef(ColorByName.green),
      new ColorDef(ColorByName.blue),
      new ColorDef(ColorByName.indigo),
      new ColorDef(ColorByName.violet),
      new ColorDef(ColorByName.black),
      new ColorDef(ColorByName.white),
      new ColorDef(ColorByName.cyan),
      new ColorDef(ColorByName.fuchsia),
      new ColorDef(ColorByName.tan),
      new ColorDef(ColorByName.gray),
      new ColorDef(ColorByName.brown),
      new ColorDef(ColorByName.purple),
      new ColorDef(ColorByName.olive),
    ];
  }