Skip to content

fix: create#14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LineIndent merged 3 commits into from
Aug 12, 2026
Merged

fix: create #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a6edc1
fix: create
LineIndent Aug 11, 2026
a7c0cdb
fixes to create event triggers
LineIndent Aug 12, 2026
dcb7bc3
update markdown files for changed docs
LineIndent Aug 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/docs/charts/area-chart.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -655,6 +655,7 @@ def area_chart_with_gradient():
stroke_width=2,
stack_id="1",
is_animation_active=False,
active_dot={"fill": f"var({s[2]})", "stroke": f"var({s[2]})"},
)
for s in series
],
Expand Down
2 changes: 2 additions & 0 deletions assets/docs/charts/line-chart.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -514,6 +514,7 @@ def line_chart_footer_legend():
type_="natural",
dot=False,
is_animation_active=False,
active_dot={"fill": "var(--chart-1)", "stroke": "var(--chart-1)"},
),
rx.recharts.line(
data_key="mobile",
Expand All@@ -522,6 +523,7 @@ def line_chart_footer_legend():
type_="natural",
dot=False,
is_animation_active=False,
active_dot={"fill": "var(--chart-2)", "stroke": "var(--chart-2)"},
),
rx.recharts.x_axis(
data_key="month",
Expand Down
4 changes: 4 additions & 0 deletions assets/globals.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -136,6 +136,10 @@
}
}

.preview-theme {
font-family: var(--font-family, var(--font-sans));
}

.toc-link[data-active="true"] {
color: var(--foreground);
font-weight: 500;
Expand Down
160 changes: 118 additions & 42 deletions assets/theme-preview.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,12 +13,14 @@
var DEFAULT_RADIUS_VALUE = "__default__";
var MATCH_BASE_VALUE = "__match_base__";
var PRESET_VERSION = 2;
var BASE62_ALPHABET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var BASE62_ALPHABET =
"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var DEFAULT_PRESET_CODE = "b0";

var BITS_V1 = { font: 5, color: 5, base: 4, radius: 4, style: 4 };
var SHIFT_V1 = (function () {
var s = {}, offset = 0;
var s = {},
offset = 0;
["font", "color", "base", "radius", "style"].forEach(function (name) {
s[name] = offset;
offset += BITS_V1[name];
Expand All@@ -28,11 +30,14 @@

var BITS_V2 = { font: 5, color: 5, chart: 5, base: 4, radius: 4, style: 4 };
var SHIFT_V2 = (function () {
var s = {}, offset = 0;
["font", "color", "chart", "base", "radius", "style"].forEach(function (name) {
s[name] = offset;
offset += BITS_V2[name];
});
var s = {},
offset = 0;
["font", "color", "chart", "base", "radius", "style"].forEach(
function (name) {
s[name] = offset;
offset += BITS_V2[name];
},
);
return s;
})();

Expand DownExpand Up@@ -91,11 +96,27 @@
var styleIdx = plainIndex("style", state.style);
var baseIdx = plainIndex("base", state.base);
var fontIdx = plainIndex("font", state.font);
var colorIdx = state.color === MATCH_BASE_VALUE ? 0 : inheritableIndex("color", state.color);
var radiusIdx = state.radius === DEFAULT_RADIUS_VALUE ? 0 : inheritableIndex("radius", state.radius);
var chartIdx = state.chart === MATCH_BASE_VALUE ? 0 : inheritableIndex("color", state.chart);

if (styleIdx === 0 && radiusIdx === 0 && baseIdx === 0 && colorIdx === 0 && chartIdx === 0 && fontIdx === 0) {
var colorIdx =
state.color === MATCH_BASE_VALUE
? 0
: inheritableIndex("color", state.color);
var radiusIdx =
state.radius === DEFAULT_RADIUS_VALUE
? 0
: inheritableIndex("radius", state.radius);
var chartIdx =
state.chart === MATCH_BASE_VALUE
? 0
: inheritableIndex("color", state.chart);

if (
styleIdx === 0 &&
radiusIdx === 0 &&
baseIdx === 0 &&
colorIdx === 0 &&
chartIdx === 0 &&
fontIdx === 0
) {
return DEFAULT_PRESET_CODE;
}

Expand DownExpand Up@@ -235,10 +256,9 @@
function afterStateChange() {
updateUrl(comboToCode());
var codeDisplay = document.getElementById("preset-code-display");
if (codeDisplay) codeDisplay.value = comboToCode();
if (codeDisplay) codeDisplay.textContent = "--preset " + comboToCode();
}


var state = {
base: null,
color: MATCH_BASE_VALUE,
Expand DownExpand Up@@ -327,7 +347,8 @@
values = isDark ? entry.dark : entry.light;
}
CHART_KEYS.forEach(function (key) {
if (values[key] !== undefined) el.style.setProperty("--" + key, values[key]);
if (values[key] !== undefined)
el.style.setProperty("--" + key, values[key]);
});
}

Expand DownExpand Up@@ -419,7 +440,8 @@

function getThemeCSS() {
var base = findById("base", state.base);
var color = state.color === MATCH_BASE_VALUE ? null : findById("color", state.color);
var color =
state.color === MATCH_BASE_VALUE ? null : findById("color", state.color);
var style = findById("style", state.style);
var font = findById("font", state.font);
if (!base || !style || !font) return "";
Expand All@@ -434,21 +456,41 @@
// both modes at once since the exported CSS needs both :root and .dark
// blocks simultaneously (unlike the live apply path, which only ever
// cares about whichever mode is currently active).
var chartSource = state.chart === MATCH_BASE_VALUE ? base : findById("color", state.chart);
var chartLight = {}, chartDark = {};
var chartSource =
state.chart === MATCH_BASE_VALUE ? base : findById("color", state.chart);
var chartLight = {},
chartDark = {};
if (chartSource) {
CHART_KEYS.forEach(function (key) {
if (chartSource.light[key] !== undefined) chartLight[key] = chartSource.light[key];
if (chartSource.dark[key] !== undefined) chartDark[key] = chartSource.dark[key];
if (chartSource.light[key] !== undefined)
chartLight[key] = chartSource.light[key];
if (chartSource.dark[key] !== undefined)
chartDark[key] = chartSource.dark[key];
});
}

var light = Object.assign({}, base.light, color ? color.light : {}, chartLight, style.vars, font.vars, {
"--radius": radiusValue,
});
var dark = Object.assign({}, base.dark, color ? color.dark : {}, chartDark, style.vars, font.vars, {
"--radius": radiusValue,
});
var light = Object.assign(
{},
base.light,
color ? color.light : {},
chartLight,
style.vars,
font.vars,
{
"--radius": radiusValue,
},
);
var dark = Object.assign(
{},
base.dark,
color ? color.dark : {},
chartDark,
style.vars,
font.vars,
{
"--radius": radiusValue,
},
);

function serialize(values) {
return Object.keys(values)
Expand All@@ -459,7 +501,13 @@
.join("\n");
}

return ":root {\n" + serialize(light) + "\n}\n\n.dark {\n" + serialize(dark) + "\n}";
return (
":root {\n" +
serialize(light) +
"\n}\n\n.dark {\n" +
serialize(dark) +
"\n}"
);
}

window.preview = {
Expand All@@ -478,8 +526,10 @@
// whichever one(s) the user hasn't already manually overridden.
upsertSyntheticOption(colorSelect, MATCH_BASE_VALUE, baseLabel);
upsertSyntheticOption(chartSelect, MATCH_BASE_VALUE, baseLabel);
if (state.color === MATCH_BASE_VALUE && colorSelect) colorSelect.value = MATCH_BASE_VALUE;
if (state.chart === MATCH_BASE_VALUE && chartSelect) chartSelect.value = MATCH_BASE_VALUE;
if (state.color === MATCH_BASE_VALUE && colorSelect)
colorSelect.value = MATCH_BASE_VALUE;
if (state.chart === MATCH_BASE_VALUE && chartSelect)
chartSelect.value = MATCH_BASE_VALUE;

applyBase();
applyColorOverlay();
Expand DownExpand Up@@ -532,15 +582,19 @@
afterStateChange();
},


shuffle: function (seed) {
var registries = window.__THEME_REGISTRIES__;
if (!registries) return;
var rng = mulberry32(seed === undefined ? (Math.random() * 0xffffffff) >>> 0 : seed);

state.style = registries.style[Math.floor(rng() * registries.style.length)].id;
state.base = registries.base[Math.floor(rng() * registries.base.length)].id;
state.font = registries.font[Math.floor(rng() * registries.font.length)].id;
var rng = mulberry32(
seed === undefined ? (Math.random() * 0xffffffff) >>> 0 : seed,
);

state.style =
registries.style[Math.floor(rng() * registries.style.length)].id;
state.base =
registries.base[Math.floor(rng() * registries.base.length)].id;
state.font =
registries.font[Math.floor(rng() * registries.font.length)].id;
state.color =
rng() < 0.5
? MATCH_BASE_VALUE
Expand DownExpand Up@@ -576,6 +630,13 @@
},
applyAll: applyAll,
getThemeCSS: getThemeCSS,

syncAll: function () {
if (!ensureDefaults()) return;
syncSelectsToState();
applyAll();
afterStateChange();
},
};

document.addEventListener("change", function (e) {
Expand DownExpand Up@@ -653,8 +714,6 @@
var target = document.getElementById("get-css-theme");
if (target) {
target.textContent = getThemeCSS();

// Re-run the swatches on the reverted defaults!
updateThemeSwatches();
}
}
Expand All@@ -675,8 +734,19 @@
}
}
}
});

// --- 6. COPY PRESET CODE ACTION ---
if (e.target.closest && e.target.closest("#copy-preset-button")) {
var label = document.getElementById("preset-code-display");
if (label) {
navigator.clipboard.writeText(window.preview.getPresetCode());
label.textContent = "Copied!";
setTimeout(function () {
label.textContent = "--preset " + window.preview.getPresetCode();
}, 1000);
}
}
});

// document.addEventListener("click", function (e) {
// if (e.target.id === "copy-css-preset") {
Expand DownExpand Up@@ -718,8 +788,10 @@
break;
}
}
}).observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });

}).observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});

// On first load: if the URL has a valid ?preset= code, apply it.
// Otherwise fall back to plain defaults (and write "b0" to the URL so
Expand All@@ -737,9 +809,13 @@
upsertSyntheticOption(
document.getElementById("color-theme-select"),
MATCH_BASE_VALUE,
baseEntry ? baseEntry.label : "Match base"
baseEntry ? baseEntry.label : "Match base",
);
upsertSyntheticOption(
document.getElementById("radius-select"),
DEFAULT_RADIUS_VALUE,
"Default",
);
upsertSyntheticOption(document.getElementById("radius-select"), DEFAULT_RADIUS_VALUE, "Default");
syncSelectsToState();
afterStateChange();
}
Expand Down
1 change: 1 addition & 0 deletions native/lib/charts/area/v8.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -92,6 +92,7 @@ def create_gradient(var_name):
stroke_width=2,
stack_id="1",
is_animation_active=False,
active_dot={"fill": f"var({s[2]})", "stroke": f"var({s[2]})"},
)
for s in series
],
Expand Down
2 changes: 2 additions & 0 deletions native/lib/charts/line/v8.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -40,6 +40,7 @@ def line_chart_footer_legend():
type_="natural",
dot=False,
is_animation_active=False,
active_dot={"fill": "var(--chart-1)", "stroke": "var(--chart-1)"},
),
rx.recharts.line(
data_key="mobile",
Expand All@@ -48,6 +49,7 @@ def line_chart_footer_legend():
type_="natural",
dot=False,
is_animation_active=False,
active_dot={"fill": "var(--chart-2)", "stroke": "var(--chart-2)"},
),
rx.recharts.x_axis(
data_key="month",
Expand Down
Loading
Loading