How to use the @sketch-hq/sketch-file-format-ts.FileFormat1.FillType function in @sketch-hq/sketch-file-format-ts

To help you get started, we’ve selected a few @sketch-hq/sketch-file-format-ts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github airbnb / react-sketchapp / src / jsonUtils / models.ts View on Github external
export const makeColorFill = (cssColor: Color): FileFormat.Fill => ({
  _class: 'fill',
  isEnabled: true,
  color: makeColorFromCSS(cssColor),
  fillType: FileFormat.FillType.Color,
  noiseIndex: 0,
  noiseIntensity: 0,
  patternFillType: FileFormat.PatternFillType.Fill,
  patternTileScale: 1,
  contextSettings: {
    _class: 'graphicsContextSettings',
    blendMode: FileFormat.BlendMode.Normal,
    opacity: 1,
  },
  gradient: emptyGradient,
});
github airbnb / react-sketchapp / src / jsonUtils / style.ts View on Github external
export function parseStyle(json: FileFormat.Style): ViewStyle {
  const style: ViewStyle = {};

  if (json.contextSettings && json.contextSettings.opacity !== 1) {
    style.opacity = json.contextSettings.opacity;
  }

  if (
    json.fills.length > 0 &&
    json.fills[0].fillType === FileFormat.FillType.Color &&
    json.fills[0].isEnabled
  ) {
    const color = json.fills[0].color;
    style.backgroundColor = `#${Math.round(color.red * 255).toString(16)}${Math.round(
      color.green * 255,
    ).toString(16)}${Math.round(color.blue * 255).toString(16)}`;

    if (color.alpha !== 1) {
      style.backgroundColor += `${Math.round(color.alpha * 255).toString(16)}`;
    }
  }

  if (
    (json.shadows.length > 0 && json.shadows[0].isEnabled) ||
    (json.innerShadows.length > 0 && json.innerShadows[0].isEnabled)
  ) {
github airbnb / react-sketchapp / src / jsonUtils / borders.ts View on Github external
export const createUniformBorder = (
  width: number,
  color: string,
  style: BorderStyle = 'solid',
  position: FileFormat.BorderPosition = FileFormat.BorderPosition.Center,
  lineCapStyle: FileFormat.LineCapStyle = FileFormat.LineCapStyle.Butt,
  lineJoinStyle: FileFormat.LineJoinStyle = FileFormat.LineJoinStyle.Miter,
): { borderOptions: FileFormat.BorderOptions; borders: FileFormat.Border[] } => {
  const borderOptions = makeBorderOptions(style, width, lineCapStyle, lineJoinStyle);

  const borders: FileFormat.Border[] = [
    {
      _class: 'border',
      isEnabled: true,
      color: makeColorFromCSS(color),
      fillType: FileFormat.FillType.Color,
      position,
      thickness: width,
      contextSettings: {
        _class: 'graphicsContextSettings',
        blendMode: FileFormat.BlendMode.Normal,
        opacity: 1,
      },
      gradient: emptyGradient,
    },
  ];

  return { borderOptions, borders };
};
github airbnb / react-sketchapp / src / jsonUtils / shapeLayers.ts View on Github external
x: number,
  y: number,
  length: number,
  thickness: number,
  color: Color,
): FileFormat.ShapeGroup => {
  const frame = makeRect(x, y, thickness, length);
  const shapeFrame = makeRect(0, 0, thickness, length);
  const shapePath = makeShapePath(shapeFrame, makeVerticalPath());
  const content = makeShapeGroup(frame, [shapePath]);
  content.style.borders = [
    {
      _class: 'border',
      isEnabled: true,
      color: makeColorFromCSS(color),
      fillType: FileFormat.FillType.Color,
      position: FileFormat.BorderPosition.Center,
      thickness,
      contextSettings: {
        _class: 'graphicsContextSettings',
        blendMode: FileFormat.BlendMode.Normal,
        opacity: 1,
      },
      gradient: emptyGradient,
    },
  ];
  return content;
};
github airbnb / react-sketchapp / src / jsonUtils / models.ts View on Github external
export const makeImageFill = (
  image: FileFormat.ImageDataRef,
  patternFillType: FileFormat.PatternFillType = FileFormat.PatternFillType.Fill,
): FileFormat.Fill => ({
  _class: 'fill',
  isEnabled: true,
  fillType: FileFormat.FillType.Pattern,
  color: makeColorFromCSS('white'),
  image,
  noiseIndex: 0,
  noiseIntensity: 0,
  patternFillType,
  patternTileScale: 1,
  contextSettings: {
    _class: 'graphicsContextSettings',
    blendMode: FileFormat.BlendMode.Normal,
    opacity: 1,
  },
  gradient: emptyGradient,
});