@multiplatform.one/theme 8.4.0 → 8.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/theme/devtools/ColorLineVisualizer.native.js +5 -232
- package/dist/cjs/theme/devtools/ColorLineVisualizer.native.js.map +1 -1
- package/dist/cjs/theme/devtools/ThemeDevtoolsPanel.native.js +5 -1786
- package/dist/cjs/theme/devtools/ThemeDevtoolsPanel.native.js.map +1 -1
- package/dist/esm/audit/constraintAudit.native.js.map +1 -1
- package/dist/esm/audit/designTokens.native.js.map +1 -1
- package/dist/esm/audit/diffReport.native.js.map +1 -1
- package/dist/esm/audit/index.native.js.map +1 -1
- package/dist/esm/audit/themeMatrix.native.js.map +1 -1
- package/dist/esm/dates.native.js.map +1 -1
- package/dist/esm/devWarn.native.js.map +1 -1
- package/dist/esm/expo.native.js.map +1 -1
- package/dist/esm/figma/figmaTokens.native.js.map +1 -1
- package/dist/esm/font.native.js.map +1 -1
- package/dist/esm/fonts/createFontLoader.native.js.map +1 -1
- package/dist/esm/fonts/index.native.js.map +1 -1
- package/dist/esm/fonts/interFaces.native.js.map +1 -1
- package/dist/esm/fonts/types.native.js.map +1 -1
- package/dist/esm/index.gnome.native.js.map +1 -1
- package/dist/esm/index.native.js.map +1 -1
- package/dist/esm/keyboardFocusRing.native.js.map +1 -1
- package/dist/esm/menuRow.native.js.map +1 -1
- package/dist/esm/nativeTwins.native.js.map +1 -1
- package/dist/esm/numbers.native.js.map +1 -1
- package/dist/esm/theme/Heading.native.js.map +1 -1
- package/dist/esm/theme/IconSlot.native.js.map +1 -1
- package/dist/esm/theme/Intent.native.js.map +1 -1
- package/dist/esm/theme/Preset.native.js.map +1 -1
- package/dist/esm/theme/PresetContext.native.js.map +1 -1
- package/dist/esm/theme/Surface.native.js.map +1 -1
- package/dist/esm/theme/Text.native.js.map +1 -1
- package/dist/esm/theme/Tint.native.js.map +1 -1
- package/dist/esm/theme/accentInk.native.js.map +1 -1
- package/dist/esm/theme/activateThemeConfig.native.js.map +1 -1
- package/dist/esm/theme/animations/css.native.js.map +1 -1
- package/dist/esm/theme/animations/index.native.js.map +1 -1
- package/dist/esm/theme/animations/reactNative.native.js.map +1 -1
- package/dist/esm/theme/chartPalette.native.js.map +1 -1
- package/dist/esm/theme/colorRules.native.js.map +1 -1
- package/dist/esm/theme/controlTiers.native.js.map +1 -1
- package/dist/esm/theme/cookies.native.js.map +1 -1
- package/dist/esm/theme/createDefaultThemeConfig.native.js.map +1 -1
- package/dist/esm/theme/createThemes.native.js.map +1 -1
- package/dist/esm/theme/dedupeInherited.native.js.map +1 -1
- package/dist/esm/theme/defaults/accent.native.js.map +1 -1
- package/dist/esm/theme/defaults/base.native.js.map +1 -1
- package/dist/esm/theme/defaults/builderOptions.native.js.map +1 -1
- package/dist/esm/theme/defaults/categoryFonts.native.js.map +1 -1
- package/dist/esm/theme/defaults/fonts.native.js.map +1 -1
- package/dist/esm/theme/defaults/house.native.js.map +1 -1
- package/dist/esm/theme/defaults/index.native.js.map +1 -1
- package/dist/esm/theme/devtools/ColorLineVisualizer.native.js +2 -218
- package/dist/esm/theme/devtools/ColorLineVisualizer.native.js.map +1 -1
- package/dist/esm/theme/devtools/ThemeDevtoolsPanel.native.js +2 -1783
- package/dist/esm/theme/devtools/ThemeDevtoolsPanel.native.js.map +1 -1
- package/dist/esm/theme/devtools/animationOptions.native.js.map +1 -1
- package/dist/esm/theme/devtools/buildSnapshot.native.js.map +1 -1
- package/dist/esm/theme/devtools/index.native.js.map +1 -1
- package/dist/esm/theme/devtools/knobIcons.native.js.map +1 -1
- package/dist/esm/theme/devtools/vizConstants.native.js.map +1 -1
- package/dist/esm/theme/dynamicType.native.js.map +1 -1
- package/dist/esm/theme/fieldFocus.native.js.map +1 -1
- package/dist/esm/theme/fillContrast.native.js.map +1 -1
- package/dist/esm/theme/focusState.native.js.map +1 -1
- package/dist/esm/theme/fontCategoryMetrics.native.js.map +1 -1
- package/dist/esm/theme/fontCategoryStacks.native.js.map +1 -1
- package/dist/esm/theme/glyphPaint.native.js.map +1 -1
- package/dist/esm/theme/glyphTint.native.js.map +1 -1
- package/dist/esm/theme/groupGeometry.native.js.map +1 -1
- package/dist/esm/theme/index.native.js.map +1 -1
- package/dist/esm/theme/intents.native.js.map +1 -1
- package/dist/esm/theme/knobs.native.js.map +1 -1
- package/dist/esm/theme/layoutTokens.native.js.map +1 -1
- package/dist/esm/theme/listRows.native.js.map +1 -1
- package/dist/esm/theme/mergedTokens.native.js.map +1 -1
- package/dist/esm/theme/motion.native.js.map +1 -1
- package/dist/esm/theme/motionStops.native.js.map +1 -1
- package/dist/esm/theme/motionTiming.native.js.map +1 -1
- package/dist/esm/theme/nativeMonoFamily.native.js.map +1 -1
- package/dist/esm/theme/nativePresetSwitch.native.js.map +1 -1
- package/dist/esm/theme/nativeSchemePreference.native.js.map +1 -1
- package/dist/esm/theme/nativeTheme.native.js.map +1 -1
- package/dist/esm/theme/nativeTransitionProps.native.js.map +1 -1
- package/dist/esm/theme/overlaySurfaces.native.js.map +1 -1
- package/dist/esm/theme/pageGutter.native.js.map +1 -1
- package/dist/esm/theme/preset.types.native.js.map +1 -1
- package/dist/esm/theme/presetPreview.native.js.map +1 -1
- package/dist/esm/theme/presetStore.native.js.map +1 -1
- package/dist/esm/theme/presetUserSync.native.js.map +1 -1
- package/dist/esm/theme/presets.native.js.map +1 -1
- package/dist/esm/theme/radiusClass.native.js.map +1 -1
- package/dist/esm/theme/radiusClassTable.generated.native.js.map +1 -1
- package/dist/esm/theme/ramps.native.js.map +1 -1
- package/dist/esm/theme/readableColor.native.js.map +1 -1
- package/dist/esm/theme/recipeInputs.native.js.map +1 -1
- package/dist/esm/theme/recipes.native.js.map +1 -1
- package/dist/esm/theme/resolveKnobs.native.js.map +1 -1
- package/dist/esm/theme/scale/activeScale.native.js.map +1 -1
- package/dist/esm/theme/scale/deriveRecipeInputs.native.js.map +1 -1
- package/dist/esm/theme/scale/index.native.js.map +1 -1
- package/dist/esm/theme/scale/scaleAttribute.native.js.map +1 -1
- package/dist/esm/theme/scale/scaleCss.native.js.map +1 -1
- package/dist/esm/theme/scale/scaleFonts.native.js.map +1 -1
- package/dist/esm/theme/scale/scaleInputs.native.js.map +1 -1
- package/dist/esm/theme/scale/themeScales.native.js.map +1 -1
- package/dist/esm/theme/scale/useActiveScale.native.js.map +1 -1
- package/dist/esm/theme/schemeStore.native.js.map +1 -1
- package/dist/esm/theme/shared.native.js.map +1 -1
- package/dist/esm/theme/sizeRecipes.native.js.map +1 -1
- package/dist/esm/theme/subsetThemes.native.js.map +1 -1
- package/dist/esm/theme/themeValue.native.js.map +1 -1
- package/dist/esm/theme/tileSizes.native.js.map +1 -1
- package/dist/esm/theme/tintHues.native.js.map +1 -1
- package/dist/esm/theme/tokenNumber.native.js.map +1 -1
- package/dist/esm/theme/touchManipulation.native.js.map +1 -1
- package/dist/esm/theme/useResolvedKnobs.native.js.map +1 -1
- package/dist/esm/theme/useTouchSurface.native.js.map +1 -1
- package/dist/esm/theme/v3TokenRoles.native.js.map +1 -1
- package/package.json +5 -5
- package/src/theme/devtools/ColorLineVisualizer.native.tsx +8 -0
- package/src/theme/devtools/ThemeDevtoolsPanel.native.tsx +8 -0
- package/types/theme/devtools/ColorLineVisualizer.native.d.ts +5 -0
- package/types/theme/devtools/ColorLineVisualizer.native.d.ts.map +1 -0
- package/types/theme/devtools/ThemeDevtoolsPanel.native.d.ts +5 -0
- package/types/theme/devtools/ThemeDevtoolsPanel.native.d.ts.map +1 -0
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var __create = Object.create;
|
|
4
3
|
var __defProp = Object.defineProperty;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
8
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
7
|
var __export = (target, all) => {
|
|
10
8
|
for (var name in all) __defProp(target, name, {
|
|
@@ -21,240 +19,15 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
21
19
|
}
|
|
22
20
|
return to;
|
|
23
21
|
};
|
|
24
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
25
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
26
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
27
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
30
|
-
value: mod,
|
|
31
|
-
enumerable: true
|
|
32
|
-
}) : target, mod));
|
|
33
22
|
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
34
23
|
value: true
|
|
35
24
|
}), mod);
|
|
36
|
-
var
|
|
37
|
-
__export(
|
|
25
|
+
var ColorLineVisualizer_native_exports = {};
|
|
26
|
+
__export(ColorLineVisualizer_native_exports, {
|
|
38
27
|
ColorLineVisualizer: () => ColorLineVisualizer
|
|
39
28
|
});
|
|
40
|
-
module.exports = __toCommonJS(
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
var import_vizConstants = require("./vizConstants.native.js");
|
|
44
|
-
function readColorsFromElement(el) {
|
|
45
|
-
var style = getComputedStyle(el);
|
|
46
|
-
var result = [];
|
|
47
|
-
var found = false;
|
|
48
|
-
for (var i = 1; i <= 12; i++) {
|
|
49
|
-
var color = style.getPropertyValue(`--color${i}`).trim();
|
|
50
|
-
if (!color) color = style.getPropertyValue(`--color-${i}`).trim();
|
|
51
|
-
if (color) {
|
|
52
|
-
found = true;
|
|
53
|
-
result.push(color);
|
|
54
|
-
} else {
|
|
55
|
-
result.push(fallbackGradient()[i - 1]);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
return found ? result : null;
|
|
59
|
-
}
|
|
60
|
-
function useDomThemeColors() {
|
|
61
|
-
var [colors, setColors] = (0, import_react.useState)(function () {
|
|
62
|
-
return fallbackGradient();
|
|
63
|
-
});
|
|
64
|
-
(0, import_react.useEffect)(function () {
|
|
65
|
-
if (typeof document === "undefined") return;
|
|
66
|
-
var readColors = function readColors2() {
|
|
67
|
-
var result = readColorsFromElement(document.documentElement);
|
|
68
|
-
if (!result && document.body) {
|
|
69
|
-
result = readColorsFromElement(document.body);
|
|
70
|
-
}
|
|
71
|
-
if (!result) {
|
|
72
|
-
var themed = document.querySelector('[class*="t_"]');
|
|
73
|
-
if (themed) result = readColorsFromElement(themed);
|
|
74
|
-
}
|
|
75
|
-
if (!result) {
|
|
76
|
-
var root = document.getElementById("root") || document.getElementById("__next");
|
|
77
|
-
if (root) result = readColorsFromElement(root);
|
|
78
|
-
}
|
|
79
|
-
if (result) setColors(result);
|
|
80
|
-
};
|
|
81
|
-
readColors();
|
|
82
|
-
var observer = new MutationObserver(readColors);
|
|
83
|
-
observer.observe(document.documentElement, {
|
|
84
|
-
attributes: true,
|
|
85
|
-
attributeFilter: ["class", "style"]
|
|
86
|
-
});
|
|
87
|
-
if (document.body) {
|
|
88
|
-
observer.observe(document.body, {
|
|
89
|
-
attributes: true,
|
|
90
|
-
attributeFilter: ["class", "style"],
|
|
91
|
-
subtree: true
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
return function () {
|
|
95
|
-
return observer.disconnect();
|
|
96
|
-
};
|
|
97
|
-
}, []);
|
|
98
|
-
return colors;
|
|
99
|
-
}
|
|
100
|
-
function fallbackGradient() {
|
|
101
|
-
return Array.from({
|
|
102
|
-
length: 12
|
|
103
|
-
}, function (_, i) {
|
|
104
|
-
var t = i / 11;
|
|
105
|
-
var v = Math.round(240 - t * 200);
|
|
106
|
-
return `rgb(${v},${v},${v})`;
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
function NumberLineRow(param) {
|
|
110
|
-
var {
|
|
111
|
-
colorFor,
|
|
112
|
-
halfHeight
|
|
113
|
-
} = param;
|
|
114
|
-
var h = halfHeight ? Math.round(import_vizConstants.cellSize / 2) : import_vizConstants.cellSize;
|
|
115
|
-
return /* @__PURE__ */import_react.default.createElement("div", {
|
|
116
|
-
style: {
|
|
117
|
-
display: "flex",
|
|
118
|
-
gap: 0
|
|
119
|
-
}
|
|
120
|
-
}, Array.from({
|
|
121
|
-
length: 12
|
|
122
|
-
}, function (_, i) {
|
|
123
|
-
var step = i + 1;
|
|
124
|
-
var background = colorFor(step);
|
|
125
|
-
return /* @__PURE__ */import_react.default.createElement("div", {
|
|
126
|
-
key: step,
|
|
127
|
-
style: {
|
|
128
|
-
width: import_vizConstants.cellSize,
|
|
129
|
-
height: h,
|
|
130
|
-
flexShrink: 0,
|
|
131
|
-
background,
|
|
132
|
-
color: (0, import_vizConstants.contrastTextFor)(background),
|
|
133
|
-
display: "flex",
|
|
134
|
-
alignItems: "center",
|
|
135
|
-
justifyContent: "center",
|
|
136
|
-
fontSize: halfHeight ? 9 : 11,
|
|
137
|
-
fontWeight: 700
|
|
138
|
-
},
|
|
139
|
-
title: `$color${step}`
|
|
140
|
-
}, step);
|
|
141
|
-
}));
|
|
142
|
-
}
|
|
143
|
-
function SemanticBrackets() {
|
|
144
|
-
var totalWidth = 12 * import_vizConstants.cellSize;
|
|
145
|
-
return /* @__PURE__ */import_react.default.createElement("div", {
|
|
146
|
-
style: {
|
|
147
|
-
position: "relative",
|
|
148
|
-
height: 24,
|
|
149
|
-
width: totalWidth,
|
|
150
|
-
marginBottom: 2
|
|
151
|
-
}
|
|
152
|
-
}, import_colorRules.semanticGroups.map(function (g) {
|
|
153
|
-
var leftPx = (g.from - 1) * import_vizConstants.cellSize;
|
|
154
|
-
var widthPx = (g.to - g.from + 1) * import_vizConstants.cellSize;
|
|
155
|
-
return /* @__PURE__ */import_react.default.createElement("div", {
|
|
156
|
-
key: g.key,
|
|
157
|
-
style: {
|
|
158
|
-
position: "absolute",
|
|
159
|
-
left: leftPx,
|
|
160
|
-
width: widthPx,
|
|
161
|
-
bottom: 0,
|
|
162
|
-
display: "flex",
|
|
163
|
-
flexDirection: "column"
|
|
164
|
-
}
|
|
165
|
-
}, /* @__PURE__ */import_react.default.createElement("div", {
|
|
166
|
-
style: {
|
|
167
|
-
textAlign: "center",
|
|
168
|
-
fontSize: 9,
|
|
169
|
-
fontWeight: 600,
|
|
170
|
-
color: g.color,
|
|
171
|
-
lineHeight: 1.2,
|
|
172
|
-
whiteSpace: "nowrap"
|
|
173
|
-
}
|
|
174
|
-
}, g.label), /* @__PURE__ */import_react.default.createElement("div", {
|
|
175
|
-
style: {
|
|
176
|
-
height: 6,
|
|
177
|
-
borderLeft: `2px solid ${g.color}`,
|
|
178
|
-
borderRight: `2px solid ${g.color}`,
|
|
179
|
-
borderTop: `2px solid ${g.color}`,
|
|
180
|
-
borderRadius: "3px 3px 0 0"
|
|
181
|
-
}
|
|
182
|
-
}));
|
|
183
|
-
}));
|
|
184
|
-
}
|
|
185
|
-
function createVizStyles(isDark) {
|
|
186
|
-
var border = isDark ? "#333" : "#ddd";
|
|
187
|
-
var mutedText = isDark ? "#888" : "#999";
|
|
188
|
-
var foreground = isDark ? "#e8e8e8" : "#1a1a1a";
|
|
189
|
-
var cardBackground = isDark ? "#1e1e1e" : "#fafafa";
|
|
190
|
-
return {
|
|
191
|
-
container: {
|
|
192
|
-
display: "flex",
|
|
193
|
-
flexDirection: "column",
|
|
194
|
-
gap: 6,
|
|
195
|
-
padding: "8px 10px",
|
|
196
|
-
borderRadius: 8,
|
|
197
|
-
border: `1px solid ${border}`,
|
|
198
|
-
background: cardBackground,
|
|
199
|
-
width: "fit-content",
|
|
200
|
-
fontSize: 11,
|
|
201
|
-
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
202
|
-
// Not the host page's tracking, which follows the app's bodyFont knob.
|
|
203
|
-
letterSpacing: "normal",
|
|
204
|
-
color: foreground
|
|
205
|
-
},
|
|
206
|
-
title: {
|
|
207
|
-
fontSize: 13,
|
|
208
|
-
fontWeight: 600,
|
|
209
|
-
textTransform: "uppercase",
|
|
210
|
-
letterSpacing: "0.06em",
|
|
211
|
-
color: mutedText
|
|
212
|
-
}
|
|
213
|
-
};
|
|
214
|
-
}
|
|
215
|
-
function ColorLineVisualizer(param) {
|
|
216
|
-
var {
|
|
217
|
-
knobs: _knobs,
|
|
218
|
-
isDark,
|
|
219
|
-
themeColors: propColors,
|
|
220
|
-
oppositeThemeColors: propOppositeColors,
|
|
221
|
-
accentColors: propAccentColors,
|
|
222
|
-
oppositeAccentColors: propOppositeAccentColors
|
|
223
|
-
} = param;
|
|
224
|
-
var domColors = useDomThemeColors();
|
|
225
|
-
var themeColors = propColors && propColors.length === 12 ? propColors : domColors;
|
|
226
|
-
var styles = (0, import_react.useMemo)(function () {
|
|
227
|
-
return createVizStyles(isDark);
|
|
228
|
-
}, [isDark]);
|
|
229
|
-
var toColorFn = function toColorFn2(arr) {
|
|
230
|
-
return function (step) {
|
|
231
|
-
return arr[Math.min(11, Math.max(0, step - 1))];
|
|
232
|
-
};
|
|
233
|
-
};
|
|
234
|
-
var colorFor = toColorFn(themeColors);
|
|
235
|
-
var oppositeColors = propOppositeColors && propOppositeColors.length === 12 ? propOppositeColors : null;
|
|
236
|
-
var accentColors = propAccentColors && propAccentColors.length === 12 ? propAccentColors : null;
|
|
237
|
-
var oppositeAccentColors = propOppositeAccentColors && propOppositeAccentColors.length === 12 ? propOppositeAccentColors : null;
|
|
238
|
-
return /* @__PURE__ */import_react.default.createElement("div", {
|
|
239
|
-
style: styles.container
|
|
240
|
-
}, /* @__PURE__ */import_react.default.createElement("div", {
|
|
241
|
-
style: styles.title
|
|
242
|
-
}, "Theme"), /* @__PURE__ */import_react.default.createElement(SemanticBrackets, null), /* @__PURE__ */import_react.default.createElement(NumberLineRow, {
|
|
243
|
-
colorFor
|
|
244
|
-
}), oppositeColors && /* @__PURE__ */import_react.default.createElement(NumberLineRow, {
|
|
245
|
-
colorFor: toColorFn(oppositeColors),
|
|
246
|
-
halfHeight: true
|
|
247
|
-
}), accentColors && /* @__PURE__ */import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */import_react.default.createElement("div", {
|
|
248
|
-
style: {
|
|
249
|
-
...styles.title,
|
|
250
|
-
fontSize: 11,
|
|
251
|
-
marginTop: 6
|
|
252
|
-
}
|
|
253
|
-
}, "accent"), /* @__PURE__ */import_react.default.createElement(NumberLineRow, {
|
|
254
|
-
colorFor: toColorFn(accentColors)
|
|
255
|
-
}), oppositeAccentColors && /* @__PURE__ */import_react.default.createElement(NumberLineRow, {
|
|
256
|
-
colorFor: toColorFn(oppositeAccentColors),
|
|
257
|
-
halfHeight: true
|
|
258
|
-
})));
|
|
29
|
+
module.exports = __toCommonJS(ColorLineVisualizer_native_exports);
|
|
30
|
+
function ColorLineVisualizer(_props) {
|
|
31
|
+
return null;
|
|
259
32
|
}
|
|
260
33
|
//# sourceMappingURL=ColorLineVisualizer.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["ColorLineVisualizer_native_exports","__export","ColorLineVisualizer","module","exports","__toCommonJS","_props"],"sources":["../../../../src/theme/devtools/ColorLineVisualizer.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kCAAA;AAAAC,QAAA,CAAAD,kCAAA;EAAAE,mBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAL,kCAAA;AAA6E,SAASE,oBAAoBI,MAAA,EAAQ;EAC9G,OAAO;AACX","ignoreList":[]}
|