eli-crow / figma-plugin-color-system-utilities Goto Github PK

ScaleNode

• Has a name following this RegExp pattern after trimming.
• Is a ChildrenMixin
• Has one or more StopNode as children, defined as
  • Is a MinimalFillsMixin
  • Does not begin with . or _
  • Has numeric name after trimming

GenerateScaleOptions

Extract this information from the ScaleNode before acting on it.

interface LightnessScaleProperties {
  name: string;
  theme: string | null;
  min: number;
  max: number;
  keyLightest: string;
  keyBase: string;
  keyDarkest: string;
}

function generateLightnessScale(options: LightnessScaleProperties) {
  throw new Error("not implemented")
}

Interpreting ScaleNode

• theme / scale are extracted from ScaleNode name match. (see RegExp pattern above)
  • theme is optional. If only the first match has a value, treat it as the scale's name
• min and max interpreted based on the numeric values of the StopNode names. If all StopNodes have a name with a numberic value value...
  • if largest < 10: the scale is interpreted to be in the range [0, 1000], otherwise
  • if largest < 100: range is [0, 100], otherwise
  • if largest < 1000 is [0, 1000]
• lightestColor and darkestColor are the lightest colors among StopNode that aren't pure white or black, respectively (since white and black are intrinsically devoid of hue or saturation information)

Scale and Stop

interface Stop {
  name: string;
  offset: number;   // in the range [0,1]
  color: RGB;
}

interface LightnessScale extends LightnessScaleProperties {
  stops: Stop[]
}

Generate a lightness scale using linear interpolation between referenceLightest, referenceDarkest, and referenceBase, based on the HSLuv lightness of each of the reference points.

See this function for a start

Element with gradient should have name like

• [<folder> / ] <scale> [ / <stop-list>]
  • allow arbitrary whitespece
  • where <stop-list> is like {50, 100, 200, 300, 400, 500, 600, 700, 800, 900}
  • if is omitted, use {100, 200, 300, 400, 500, 600, 700, 800, 900}

Sample each stop value (normalized to the implied maximum power of 10 among all stop values) and create a style

Create a reference-gradient style and assign it to the element

Split off:

• #11

Should match the scale style name more forgivingly

• Allow arbitrary whitespace

Write a command with parameters

• That allows a user to switch scales, while preserving stops.
• The command should provide completions based on known scales.
• It should allow free-form submission, that is treated as the top match among completions for more intuitive use.

Decisions

• What is a "scale"?
• How do we filter what to show in completions?

labeled stops can be specified like {lightest=50, 100, 200, ...}: the stop will be named as the identifier and treated as the number

Currently, we are just clamping each channel value. Really, we should us hsluv to find the maximum possible lch and clamp to that.

Need to be a little smarter about how the middle stop is decided.

• If a stop's color matches the DEFAULT color for the existing scale, use that value
• Otherwise, use the most chromatic stop

Configuration mostly by naming convention

• Reference scale: must be present, with a name matching /[._]?scale$/i
• Base color: optional, but will be interpreted and generated if not present. name must match /[._]?(?:base|default|normal)$/i
• Stops: a style in a folder containing a reference scale. Description must match /^([\d.])+%/. The style will sample the gradient at an offset of Number($1) / 100

Resolves #12
Resolves #5