Skip to content

Commit 12ab971

Browse files
bhestonbheston
committed
AUI: Refactored Swatch to Color
1 parent 2762eb2 commit 12ab971

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+683
-513
lines changed

‎packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts

Lines changed: 101 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { type Color, modeLrgb, modeRgb, parse, type Rgb, useMode, wcagLuminance } from "culori/fn";
2-
import { Shadow, StyleProperty } from "@adaptive-web/adaptive-ui";
1+
import { type Color as CuloriColor, modeLrgb, modeRgb, parse, type Rgb, useMode, wcagLuminance } from "culori/fn";
2+
import { Color, Shadow, StyleProperty } from "@adaptive-web/adaptive-ui";
33
import { AppliedStyleModules, AppliedStyleValues, Controller, focusIndicatorNodeName, PluginNode, PluginNodeData, State, StatesState, STYLE_REMOVE } from "@adaptive-web/adaptive-ui-designer-core";
44
import { FIGMA_SHARED_DATA_NAMESPACE } from "@adaptive-web/adaptive-ui-designer-figma";
5-
import { colorToRgba, variantBooleanHelper } from "./utility.js";
5+
import { colorToRgba, roundToDecimals, variantBooleanHelper } from "./utility.js";
66

77
const rgb = useMode(modeRgb);
88
// For luminance
@@ -119,7 +119,7 @@ export class FigmaPluginNode extends PluginNode {
119119
public id: string;
120120
public type: string;
121121
public name: string;
122-
public fillColor: Color | null = null;
122+
public fillColor: CuloriColor | null = null;
123123
public states?: StatesState;
124124
private _node: BaseNode;
125125
private _state?: State;
@@ -760,7 +760,7 @@ export class FigmaPluginNode extends PluginNode {
760760
return await FigmaPluginNode.get(parent, false);
761761
}
762762

763-
private getFillColor(): Color | null {
763+
private getFillColor(): CuloriColor | null {
764764
// console.log("FigmaPluginNode.getFillColor", this.debugInfo);
765765
if ((this._node as GeometryMixin).fills) {
766766
const fills = (this._node as GeometryMixin).fills;
@@ -783,7 +783,7 @@ export class FigmaPluginNode extends PluginNode {
783783
return null;
784784
}
785785

786-
public async getEffectiveFillColor(): Promise<Color | null> {
786+
public async getEffectiveFillColor(): Promise<CuloriColor | null> {
787787
if (this.fillColor) {
788788
return this.fillColor;
789789
}
@@ -849,90 +849,109 @@ export class FigmaPluginNode extends PluginNode {
849849
}
850850
}
851851

852-
private paintColor(target: StyleProperty, value: string): void {
852+
private paintColor(target: StyleProperty, value: unknown): void {
853853
let paint: Paint | null = null;
854854

855855
if (value !== STYLE_REMOVE) {
856-
if (value.startsWith("linear-gradient")) {
857-
const linearMatch = /linear-gradient\((?<params>.+)\)/;
858-
const matches = value.match(linearMatch);
859-
if (matches && matches.groups) {
860-
const array = matches.groups.params.split(",").map(p => p.trim());
861-
862-
let degrees: number = 90;
863-
if (array[0].endsWith("deg")) {
864-
const angle = array.shift()?.replace("deg", "") || "90";
865-
degrees = Number.parseFloat(angle);
866-
}
867-
const radians: number = degrees * (Math.PI / 180);
868-
869-
const paramMatch = /(?<color>#[\w\d]+)( (?<pos>.+))?/;
870-
const stops = array.map((p, index, array) => {
871-
const paramMatches = p.match(paramMatch);
872-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
873-
const color = rgb(parse(paramMatches?.groups?.color || "FF00FF")!);
874-
let position: number = 0;
875-
if (paramMatches?.groups && paramMatches?.groups?.pos) {
876-
if (paramMatches.groups.pos.endsWith("%")) {
877-
position = Number.parseFloat(paramMatches.groups.pos) / 100;
878-
} else if (paramMatches.groups.pos.startsWith("calc(100% - ")) {
879-
const px = Number.parseFloat(
880-
paramMatches.groups.pos
881-
.replace("calc(100% - ", "")
882-
.replace("px)", "")
883-
);
884-
const size = degrees === 90 || degrees === 270
885-
? (this._node as LayoutMixin).height
886-
: (this._node as LayoutMixin).width;
887-
position = (size - px) / size;
888-
}
889-
} else if (index === array.length - 1) {
890-
position = 1;
856+
if (typeof value === "string") {
857+
if (value.startsWith("linear-gradient")) {
858+
const linearMatch = /linear-gradient\((?<params>.+)\)/;
859+
const matches = value.match(linearMatch);
860+
if (matches && matches.groups) {
861+
const array = matches.groups.params.split(",").map(p => p.trim());
862+
863+
let degrees: number = 90;
864+
if (array[0].endsWith("deg")) {
865+
const angle = array.shift()?.replace("deg", "") || "90";
866+
degrees = Number.parseFloat(angle);
891867
}
892-
const stop: ColorStop = {
893-
position,
894-
color: {
895-
r: color.r,
896-
g: color.g,
897-
b: color.b,
898-
a: color.alpha || 1,
899-
},
868+
const radians: number = degrees * (Math.PI / 180);
869+
870+
const paramMatch = /(?<color>#[\w\d]+)( (?<pos>.+))?/;
871+
const stops = array.map((p, index, array) => {
872+
const paramMatches = p.match(paramMatch);
873+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
874+
const color = rgb(parse(paramMatches?.groups?.color || "FF00FF")!);
875+
let position: number = 0;
876+
if (paramMatches?.groups && paramMatches?.groups?.pos) {
877+
if (paramMatches.groups.pos.endsWith("%")) {
878+
position = Number.parseFloat(paramMatches.groups.pos) / 100;
879+
} else if (paramMatches.groups.pos.startsWith("calc(100% - ")) {
880+
const px = Number.parseFloat(
881+
paramMatches.groups.pos
882+
.replace("calc(100% - ", "")
883+
.replace("px)", "")
884+
);
885+
const size = degrees === 90 || degrees === 270
886+
? (this._node as LayoutMixin).height
887+
: (this._node as LayoutMixin).width;
888+
position = (size - px) / size;
889+
}
890+
} else if (index === array.length - 1) {
891+
position = 1;
892+
}
893+
const stop: ColorStop = {
894+
position,
895+
color: {
896+
r: color.r,
897+
g: color.g,
898+
b: color.b,
899+
a: color.alpha || 1,
900+
},
901+
};
902+
return stop;
903+
});
904+
905+
const gradientPaint: GradientPaint = {
906+
type: "GRADIENT_LINEAR",
907+
gradientStops: stops,
908+
gradientTransform: [
909+
[Math.cos(radians), Math.sin(radians), 0],
910+
[Math.sin(radians) * -1, Math.cos(radians), 1],
911+
],
900912
};
901-
return stop;
902-
});
903-
904-
const gradientPaint: GradientPaint = {
905-
type: "GRADIENT_LINEAR",
906-
gradientStops: stops,
907-
gradientTransform: [
908-
[Math.cos(radians), Math.sin(radians), 0],
909-
[Math.sin(radians) * -1, Math.cos(radians), 1],
910-
],
913+
paint = gradientPaint;
914+
}
915+
} else {
916+
// Assume it's solid
917+
const color = parse(value);
918+
if (!color) {
919+
throw new Error(
920+
`The value "${value}" could not be parsed`
921+
);
922+
}
923+
924+
const rgbColor = rgb(color);
925+
const solidPaint: SolidPaint = {
926+
type: "SOLID",
927+
visible: true,
928+
opacity: rgbColor.alpha,
929+
blendMode: "NORMAL",
930+
color: {
931+
r: rgbColor.r,
932+
g: rgbColor.g,
933+
b: rgbColor.b,
934+
},
911935
};
912-
paint = gradientPaint;
936+
paint = solidPaint;
913937
}
914-
} else {
915-
// Assume it's solid
916-
const color = parse(value);
917-
if (!color) {
918-
throw new Error(
919-
`The value "${value}" could not be parsed`
920-
);
938+
} else if (value && typeof value === "object") {
939+
if (Object.keys(value).includes("color")) {
940+
const color = value as Color;
941+
// console.log(" Color", color);
942+
const solidPaint: SolidPaint = {
943+
type: "SOLID",
944+
visible: true,
945+
opacity: color.color.alpha,
946+
blendMode: "NORMAL",
947+
color: {
948+
r: roundToDecimals((color.color as Rgb).r, 6),
949+
g: roundToDecimals((color.color as Rgb).g, 6),
950+
b: roundToDecimals((color.color as Rgb).b, 6),
951+
},
952+
};
953+
paint = solidPaint;
921954
}
922-
923-
const rgbColor = rgb(color);
924-
const solidPaint: SolidPaint = {
925-
type: "SOLID",
926-
visible: true,
927-
opacity: rgbColor.alpha,
928-
blendMode: "NORMAL",
929-
color: {
930-
r: rgbColor.r,
931-
g: rgbColor.g,
932-
b: rgbColor.b,
933-
},
934-
};
935-
paint = solidPaint;
936955
}
937956
}
938957

‎packages/adaptive-ui-designer-figma-plugin/src/figma/utility.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,7 @@ export const colorToRgba = (color: Rgb): RGBA => {
4646
a: color.alpha || 1,
4747
};
4848
}
49+
50+
export const roundToDecimals = (num: number, dec: number): number => {
51+
return parseFloat(num.toFixed(dec));
52+
}

‎packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-elements.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { customElement, FASTElement, html } from "@microsoft/fast-element";
22
import { DesignToken, StaticDesignTokenValue } from "@microsoft/fast-foundation";
3-
import { Swatch } from "@adaptive-web/adaptive-ui";
3+
import { Color } from "@adaptive-web/adaptive-ui";
44
import { fillColor } from "@adaptive-web/adaptive-ui/reference";
55
import { DesignTokenValue, PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core";
66
import { UIController } from "./ui-controller.js";
@@ -55,7 +55,13 @@ export class ElementsController {
5555
try {
5656
if (value) {
5757
// TODO figure out a better way to handle storage data types
58-
const color = Swatch.parse((value as unknown) as string);
58+
59+
let color: Color | null = null;
60+
if (value instanceof Color) {
61+
color = value;
62+
} else {
63+
color = Color.parse((value as unknown) as string);
64+
}
5965
if (color) {
6066
// TODO fix this logic
6167
// console.log(" setting DesignToken value (color)", token.name, value);

‎packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-tokens.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { calc } from '@csstools/css-calc';
22
import { observable } from "@microsoft/fast-element";
33
import { DesignToken } from "@microsoft/fast-foundation";
44
import { Color } from "@adaptive-web/adaptive-ui";
5-
import { formatHex8 } from 'culori';
65
import { DesignTokenValue, PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core";
76
import { UIController } from "./ui-controller.js";
87
import { ElementsController } from "./ui-controller-elements.js";
@@ -110,7 +109,7 @@ export class DesignTokenController {
110109
// TODO figure out a better way to handle storage data types
111110
// Reconcile with similar block in evaluateEffectiveAppliedDesignToken
112111
if (value instanceof Color) {
113-
return formatHex8(value.color);
112+
return value.toString();
114113
} else if (typeof value === "string") {
115114
if (value.startsWith("calc")) {
116115
return calc(value);

‎packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -382,7 +382,7 @@ export class UIController {
382382
if (colorHex) {
383383
const parentElement = this._elements.getElementForNode(node).parentElement as FASTElement;
384384
// console.log(" setting fill color token on parent element", colorHex, parentElement.id, parentElement.title);
385-
this._elements.setDesignTokenForElement(parentElement, fillColor, Swatch.parse(colorHex));
385+
this._elements.setDesignTokenForElement(parentElement, fillColor, Color.parse(colorHex));
386386
}
387387

388388
const allApplied = this.collectEffectiveAppliedStyles(node);
@@ -423,7 +423,7 @@ export class UIController {
423423
value = ret;
424424
}
425425
}
426-
const fillColorValue = (this._elements.getDesignTokenValue(node, fillColor) as Swatch).toColorString();
426+
// const fillColorValue = (this._elements.getDesignTokenValue(node, fillColor) as Swatch).toColorString();
427427
// console.log(" evaluateEffectiveAppliedDesignToken", target, " : ", token.name, " -> ", value, valueDebug, `(from ${info.source})`, "fillColor", fillColorValue);
428428

429429
const applied = new AppliedStyleValue(value);

‎packages/adaptive-ui-explorer/src/app.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
2+
Color,
23
Palette,
3-
Swatch,
44
} from "@adaptive-web/adaptive-ui";
55
import {
66
accentBaseColor,
@@ -289,7 +289,7 @@ export class App extends FASTElement {
289289
});
290290
}
291291

292-
private layerTokens: Array<[DesignToken<Swatch>, string]> = [
292+
private layerTokens: Array<[DesignToken<Color>, string]> = [
293293
[layerFillFixedPlus1, "+1"],
294294
[layerFillFixedBase, "Base"],
295295
[layerFillFixedMinus1, "-1"],
@@ -303,7 +303,7 @@ export class App extends FASTElement {
303303
layerFillBaseLuminance.setValueFor(ds, luminance);
304304

305305
return this.layerTokens
306-
.map((conf: [DesignToken<Swatch>, string]): SwatchInfo => {
306+
.map((conf: [DesignToken<Color>, string]): SwatchInfo => {
307307
const color = conf[0].getValueFor(ds).toColorString();
308308
return {
309309
index: this.neutralColors.indexOf(color),

‎packages/adaptive-ui-explorer/src/components/color-block.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Swatch } from "@adaptive-web/adaptive-ui";
1+
import { Color } from "@adaptive-web/adaptive-ui";
22
import {
33
accentFillDiscernibleControlStyles,
44
accentFillIdealControlStyles,
@@ -261,9 +261,9 @@ export class ColorBlock extends FASTElement {
261261

262262
private updateColor(): void {
263263
if (this.color && this.$fastController.isConnected) {
264-
const swatch =Swatch.parse(this.color)
265-
if (swatch) {
266-
fillColor.setValueFor(this, swatch);
264+
const color = Color.parse(this.color)
265+
if (color) {
266+
fillColor.setValueFor(this, color);
267267
}
268268
}
269269
}

‎packages/adaptive-ui-explorer/src/components/layer-background/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Swatch } from '@adaptive-web/adaptive-ui';
1+
import { Color } from '@adaptive-web/adaptive-ui';
22
import {
33
fillColor,
44
layerFillBaseLuminance,
@@ -61,7 +61,7 @@ export class LayerBackground extends FASTElement {
6161
}
6262

6363
if (this.backgroundLayerRecipe !== undefined) {
64-
let swatch: Swatch | null = null;
64+
let swatch: Color | null = null;
6565
switch (this.backgroundLayerRecipe) {
6666
case "-1":
6767
swatch = layerFillFixedMinus1.getValueFor(this);

‎packages/adaptive-ui-explorer/src/components/palette-gradient/palette-gradient.template.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
import { html, repeat } from "@microsoft/fast-element";
2-
import { Color, isDark, Swatch } from "@adaptive-web/adaptive-ui";
2+
import { Color, isDark } from "@adaptive-web/adaptive-ui";
33
import { PaletteGradient } from "./palette-gradient.js";
44

5-
function getClass(swatch: Swatch, source?: Color, closestSource?: Swatch) {
6-
return swatch.toColorString() === source?.toColorString()
5+
function getClass(color: Color, source?: Color, closestSource?: Color) {
6+
return color.toString() === source?.toString()
77
? "source"
8-
: swatch.toColorString() === closestSource?.toColorString()
8+
: color.toString() === closestSource?.toString()
99
? "source closest"
1010
: "";
1111
}
1212

13-
function getColor(background: Swatch) {
13+
function getColor(background: Color) {
1414
const darkMode = isDark(background);
1515
return darkMode ? "white" : "black";
1616
}
1717

1818
export const paletteGradientTemplate = html<PaletteGradient>`
1919
${repeat(
2020
(x) => x.palette?.swatches || [],
21-
html<Swatch, PaletteGradient>`
21+
html<Color, PaletteGradient>`
2222
<a
2323
class="${(x, c) => getClass(x, c.parent.palette?.source, c.parent.closestSource)}"
24-
style="background: ${(x) => x.toColorString()}; color: ${(x) => getColor(x)}"
25-
title="${(x, c) => c.index.toString().concat(": ", x.toColorString().toUpperCase())}"
24+
style="background: ${(x) => x.toString()}; color: ${(x) => getColor(x)}"
25+
title="${(x, c) => c.index.toString().concat(": ", x.toString().toUpperCase())}"
2626
></a>
2727
`,
2828
{ positioning: true }

0 commit comments

Comments
 (0)